/*
 * components.css — Botones, cards, mockups y componentes reutilizables
 */

/* ── Botones ─────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--grad); color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .82rem; font-weight: 700; letter-spacing: .05em;
  padding: .95rem 2rem; text-decoration: none;
  border-radius: 8px; position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 4px 20px rgba(139, 92, 246, .35);
}
.btn-primary span, .btn-primary svg { position: relative; z-index: 1; }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.12); opacity: 0; transition: opacity .25s; }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(139, 92, 246, .45); }
.btn-primary svg { width: 15px; }

.btn-ghost {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); text-decoration: none;
  display: flex; align-items: center; gap: .5rem;
  transition: color .2s, gap .2s;
}
.btn-ghost:hover { color: var(--text); gap: .9rem; }
.btn-ghost svg { width: 15px; }

/* ── Service Cards (homepage) ────────────────────── */
.sc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.sc {
  background: var(--surface);
  padding: 2.5rem;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: background .25s;
  display: flex; flex-direction: column; gap: .6rem;
}
.sc::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
.sc:hover { background: var(--bg3); }
.sc:hover::before { transform: scaleX(1); }
.sc-num {
  font-family: "Fraunces", serif; font-size: 1.6rem; font-weight: 200;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sc-icon {
  width: 80px; height: 80px; color: var(--accent); opacity: .6;
  transition: opacity .25s; margin: .5rem 0;
}
.sc:hover .sc-icon { opacity: 1; }
.sc-title { font-family: "Fraunces", serif; font-size: 1.5rem; font-weight: 300; color: var(--text); line-height: 1.2; }
.sc-em    { font-style: italic; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sc-desc  { font-size: .84rem; color: var(--muted); line-height: 1.7; flex: 1; }
.sc-tags  { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.sc-footer{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border);
}
.sc-price { font-family: "Fraunces", serif; font-size: 1.1rem; font-weight: 200; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sc-arrow { color: var(--accent); font-size: .85rem; transition: transform .2s; }
.sc:hover .sc-arrow { transform: translateX(4px); }

/* ── Contact info row ────────────────────────────── */
.cta-contact-row {
  display: flex; gap: 3rem; margin-top: 3rem;
  flex-wrap: wrap; justify-content: center;
}
.ci-label { font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.ci-val   { font-size: .88rem; font-weight: 500; }
.ci-val a { color: var(--text); text-decoration: none; transition: color .2s; }
.ci-val a:hover { color: var(--accent); }

/* ── Process (homepage) ──────────────────────────── */
.process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.steps { display: flex; flex-direction: column; gap: 0; }
.step  { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
.step-n { font-family: "Fraunces", serif; font-size: 2.6rem; font-weight: 200; line-height: 1; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; min-width: 60px; }
.step h4 { font-family: "Fraunces", serif; font-size: 1.25rem; font-weight: 300; margin-bottom: .4rem; }
.step p  { font-size: .855rem; color: var(--muted); line-height: 1.75; }

/* Hex animation (proceso visual) */
/* ── Proceso: visual animado ─────────────────────── */
@keyframes hexSpin        { from { transform: rotate(0deg);    } to { transform: rotate(360deg);  } }
@keyframes hexSpinReverse { from { transform: rotate(0deg);    } to { transform: rotate(-360deg); } }
@keyframes hexPulse       { 0%,100% { opacity:.12; transform:translate(-50%,-50%) scale(1);    }
                             50%     { opacity:.28; transform:translate(-50%,-50%) scale(1.18); } }

.process-visual {
  position: relative;
  width: 280px; height: 280px;
  margin: 0 auto;
}
.hex-ring {
  position: absolute; inset: 0;
  border: 1px solid var(--border);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: hexSpin 18s linear infinite;
}
.hr2 {
  inset: 28px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  border-color: rgba(139,92,246,.35);
  animation: hexSpinReverse 12s linear infinite;
}
.hex-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--grad);
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(139,92,246,.6);
}
.hex-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--grad);
  opacity: .12;
  animation: hexPulse 4s ease-in-out infinite;
}

/* ── Manifesto / About ───────────────────────────── */
.manifesto-wrap { max-width: 1280px; margin: 0 auto; text-align: center; }
.manifesto-q    { font-family: "Fraunces", serif; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 300; line-height: 1.3; color: var(--text); margin: 1.5rem 0 2rem; }
.manifesto-q em { font-style: italic; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.manifesto-body { font-size: .95rem; color: var(--muted); line-height: 1.95; }
.divider { display: flex; align-items: center; gap: 1.5rem; margin: 2rem 0; }
.divider span { flex: 1; height: 1px; background: var(--border); }
.divider svg  { width: 20px; }

/* ── Hero Divider (shape) ────────────────────────── */
.hero-divider { height: 90px; background: var(--surface2); margin-top: -1px; }
.hero-divider svg { width: 100%; height: 100%; display: block; }

/* ── MOCKUPS ─────────────────────────────────────── */
/* Browser */
.mockup-browser {
  background: rgba(15,13,26,.9); border: 1px solid rgba(139,92,246,.25);
  border-radius: 12px; overflow: hidden; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.mb-bar {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem;
  background: rgba(139,92,246,.1); border-bottom: 1px solid rgba(139,92,246,.15);
}
.mb-dots { display: flex; gap: .3rem; }
.mb-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.12); }
.mb-url { flex: 1; height: 16px; background: rgba(255,255,255,.07); border-radius: 6px; margin: 0 .5rem; }
.mb-body { padding: .8rem; }
.mb-hero-strip { height: 48px; background: var(--grad); border-radius: 6px; opacity: .35; margin-bottom: .6rem; }
.mb-nav-row { display: flex; gap: .4rem; margin-bottom: .7rem; }
.mb-nav-dot { width: 32px; height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; }
.mb-grid    { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; margin-bottom: .6rem; }
.mb-card    { background: rgba(255,255,255,.04); border-radius: 6px; overflow: hidden; }
.mb-card-bar { height: 52px; }
.c1 { background: linear-gradient(135deg, rgba(139,92,246,.6), rgba(217,70,168,.4)); }
.c2 { background: linear-gradient(135deg, rgba(217,70,168,.5), rgba(139,92,246,.3)); }
.c3 { background: linear-gradient(135deg, rgba(99,102,241,.5), rgba(139,92,246,.4)); }
.mb-card-lines { padding: .4rem .5rem; display: flex; flex-direction: column; gap: .25rem; }
.mb-card-line  { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; }
.mb-footer-strip{ display: flex; gap: .4rem; padding-top: .2rem; }
.mb-footer-pill { flex: 1; height: 20px; background: rgba(255,255,255,.06); border-radius: 10px; }

/* Phone */
.mockup-phone {
  width: 140px;
  background: rgba(15,13,26,.95); border: 1px solid rgba(139,92,246,.3);
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 20px 56px rgba(0,0,0,.5);
}
.phone-notch { width: 40px; height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; margin: 8px auto 0; }
.phone-body  { padding: .6rem; }
.phone-header{ display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.phone-avatar{ width: 22px; height: 22px; border-radius: 50%; background: var(--grad); }
.phone-greeting{ font-family:"JetBrains Mono",monospace; font-size: .55rem; color: rgba(255,255,255,.7); }
.phone-stat-row { display: flex; gap: .4rem; margin-bottom: .5rem; }
.phone-stat     { flex: 1; background: rgba(139,92,246,.12); border-radius: 6px; padding: .3rem .4rem; }
.phone-stat-n   { font-family:"Fraunces",serif; font-size: .7rem; font-weight:300; background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.phone-stat-l   { font-family:"JetBrains Mono",monospace; font-size: .48rem; color: rgba(255,255,255,.35); }
.phone-chart    { display: flex; align-items: flex-end; gap: 2px; height: 40px; margin-bottom: .5rem; }
.phone-bar      { flex: 1; border-radius: 2px 2px 0 0; }
.phone-list     { display: flex; flex-direction:column; gap: .25rem; }
.phone-list-item{ display:flex; align-items:center; gap:.3rem; }
.phone-dot      { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.phone-li-text  { flex:1; height:5px; background:rgba(255,255,255,.1); border-radius:3px; }
.phone-li-val   { font-family:"JetBrains Mono",monospace; font-size:.5rem; color:rgba(255,255,255,.5); }

/* Chat */
.mockup-chat {
  background: rgba(15,13,26,.95); border: 1px solid rgba(139,92,246,.25);
  border-radius: 16px; overflow: hidden; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.chat-header {
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; border-bottom:1px solid rgba(139,92,246,.15);
  background:rgba(139,92,246,.1);
}
.chat-avatar { width:32px; height:32px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.chat-name   { font-size:.82rem; font-weight:600; color:var(--text); }
.chat-status { font-family:"JetBrains Mono",monospace; font-size:.6rem; color:#10B981; }
.chat-messages { padding:.9rem; display:flex; flex-direction:column; gap:.6rem; }
.msg         { display:flex; flex-direction:column; }
.msg.bot     { align-items:flex-start; }
.msg.usr     { align-items:flex-end; }
.msg-bubble  { max-width:80%; padding:.5rem .8rem; border-radius:12px; font-size:.77rem; line-height:1.55; }
.msg.bot .msg-bubble { background:rgba(139,92,246,.15); border:1px solid rgba(139,92,246,.2); color:var(--text); border-radius:4px 12px 12px 12px; }
.msg.usr .msg-bubble { background:var(--grad); color:#fff; border-radius:12px 4px 12px 12px; }
.msg-time { font-family:"JetBrains Mono",monospace; font-size:.5rem; color:var(--muted); margin-top:.2rem; }
.chat-typing { display:flex; gap:.3rem; align-items:center; padding:.4rem .6rem; }
.typing-dot  { width:5px; height:5px; border-radius:50%; background:var(--accent); animation:pulse 1.2s ease infinite; }
.typing-dot:nth-child(2){ animation-delay:.2s; }
.typing-dot:nth-child(3){ animation-delay:.4s; }
.chat-input-row { display:flex; gap:.5rem; padding:.7rem 1rem; border-top:1px solid rgba(139,92,246,.12); }
.chat-input-pill{ flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(139,92,246,.15); border-radius:20px; padding:.4rem .8rem; font-size:.72rem; color:var(--muted); }
.chat-send { width:30px; height:30px; background:var(--grad); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.chat-send svg { width:13px; color:#fff; }

/* Dashboard */
.mockup-dash {
  background: rgba(15,13,26,.95); border:1px solid rgba(139,92,246,.25);
  border-radius:14px; overflow:hidden; width:100%;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.dash-top { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; border-bottom:1px solid rgba(139,92,246,.15); background:rgba(139,92,246,.08); }
.dash-title { font-family:"Fraunces",serif; font-size:1rem; font-weight:300; color:var(--text); }
.dash-live  { font-family:"JetBrains Mono",monospace; font-size:.58rem; letter-spacing:.1em; color:#10B981; background:rgba(16,185,129,.12); padding:.18rem .6rem; border-radius:10px; }
.dash-kpis  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; padding:.8rem 1rem; border-bottom:1px solid rgba(139,92,246,.1); }
.kpi        { background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.12); border-radius:8px; padding:.6rem .5rem; text-align:center; }
.kpi-n      { font-family:"Fraunces",serif; font-size:1.15rem; font-weight:300; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.kpi-l      { font-family:"JetBrains Mono",monospace; font-size:.52rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:.15rem; }
.dash-chart-area { padding:.8rem 1rem; border-bottom:1px solid rgba(139,92,246,.1); }
.dash-chart-label{ font-family:"JetBrains Mono",monospace; font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:.5rem; }
.dash-bars  { display:flex; align-items:flex-end; gap:4px; height:55px; }
.d-bar      { flex:1; border-radius:3px 3px 0 0; }
.dash-list  { padding:.7rem 1rem .9rem; display:flex; flex-direction:column; gap:.4rem; }
.dl-row     { display:flex; align-items:center; gap:.6rem; }
.dl-av      { width:24px; height:24px; border-radius:50%; flex-shrink:0; }
.dl-name    { flex:1; font-size:.75rem; color:var(--text); }
.dl-badge   { font-family:"JetBrains Mono",monospace; font-size:.55rem; letter-spacing:.08em; padding:.1rem .55rem; border-radius:10px; text-transform:uppercase; }
.dl-badge.won  { background:rgba(16,185,129,.15); color:#10B981; }
.dl-badge.lead { background:rgba(139,92,246,.15); color:var(--accent); }
.dl-badge.prop { background:rgba(245,158,11,.15); color:#F59E0B; }
.dl-val { font-family:"JetBrains Mono",monospace; font-size:.65rem; color:var(--muted); }

/* Slide mockup wrapper position */
.slide-mockup-wrap {
  position: absolute; top: 50%; right: 6%;
  transform: translateY(-50%);
  width: 75%; max-width: 380px; z-index: 4;
}

/* Slide mockup adjustments per type */
.slide-mockup-wrap .mockup-browser { transform: rotate(2deg); }

/* ── Imágenes en tarjetas de servicio ────────────────── */
.sc.sc-has-image {
    position: relative;
    overflow: hidden;
}
.sc-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .6s ease;
}
.sc-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10,8,18,.55) 0%,
        rgba(10,8,18,.75) 60%,
        rgba(10,8,18,.92) 100%
    );
}
.sc.sc-has-image:hover .sc-image {
    transform: scale(1.05);
}
.sc.sc-has-image .sc-content {
    position: relative;
    z-index: 1;
}