/* Hero propio: el más frío del set, tira a azul eléctrico. Es la página de software. */
  .hga{position:relative;overflow:hidden;padding:52px 0 64px;
    background:linear-gradient(180deg,rgba(233,236,254,.6),transparent 62%),
      radial-gradient(760px 460px at 92% 0%, rgba(64,96,255,.20), transparent 60%),
      radial-gradient(620px 440px at -6% 92%, rgba(120,90,255,.13), transparent 58%)}
  /* Acá el H1 NO es el kicker chico de las otras landings: es el claim grande. Hay que
     deshacer el display:inline-flex y el guion coral del ::before que hereda de .hga h1,
     porque con el titular en dos renglones el guion quedaba flotando al lado del segundo. */
  .hga-left h1{display:block;font-size:clamp(1.9rem,3.6vw,2.95rem);letter-spacing:-.035em;line-height:1.12;
    color:var(--ink);text-transform:none;font-weight:800;margin:0}
  .hga-left h1::before{content:none}
  @media(min-width:961px){ .hga-grid{grid-template-columns:1.06fr .94fr} }

  /* ===== PANEL DE AEGIS (visual del hero) =====
     Va oscuro a propósito: los mockups de software del sitio van oscuros para que se
     lean como capturas reales sobre página clara (§3 de CLAUDE.md).
     Los términos de búsqueda son GENÉRICOS E ILUSTRATIVOS: no son de ninguna cuenta.
     El intervalo solo corre con la sección a la vista y se apaga con reduced-motion. */
  /* min-width:0 en la columna y max-width:100% en el panel: los términos van con
     white-space:nowrap, y aunque .ag-term tenga min-width:0 para achicarse dentro del
     flex, su contribución de ancho mínimo igual infla la pista de la grilla del hero.
     Sin esto, en el celular el hero se salía 40px del viewport. */
  .hga-right{min-width:0}
  .ag{position:relative;max-width:100%;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
    border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid rgba(255,255,255,.09)}
  .ag-row{min-width:0}
  .ag-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
    border-bottom:1px solid rgba(255,255,255,.09)}
  .ag-live{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:800;
    letter-spacing:.09em;text-transform:uppercase;color:#8FE3C0}
  .ag-live i{width:7px;height:7px;border-radius:50%;background:#31D0A0;box-shadow:0 0 0 0 rgba(49,208,160,.7);
    animation:agPulse 2s infinite}
  @keyframes agPulse{70%{box-shadow:0 0 0 7px rgba(49,208,160,0)}100%{box-shadow:0 0 0 0 rgba(49,208,160,0)}}
  .ag-clock{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
  /* Barra de escaneo: una línea que barre. Es transform puro, no repinta layout. */
  .ag-scan{position:relative;height:3px;background:rgba(255,255,255,.07);overflow:hidden}
  .ag-beam{position:absolute;top:0;bottom:0;width:34%;
    background:linear-gradient(90deg,transparent,#4F63FF,#8FE3C0,transparent);
    animation:agScan 2.6s linear infinite;will-change:transform}
  @keyframes agScan{0%{transform:translateX(-120%)}100%{transform:translateX(400%)}}
  .ag-feed{padding:8px 0;min-height:246px}
  .ag-row{display:flex;align-items:center;gap:11px;padding:10px 18px;
    animation:agIn .38s ease both}
  @keyframes agIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
  .ag-row .i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex-shrink:0}
  .ag-row .i svg{width:13px;height:13px}
  .ag-term{flex:1;min-width:0;font-size:.86rem;color:rgba(255,255,255,.92);font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ag-verd{font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    padding:4px 9px;border-radius:100px;white-space:nowrap;flex-shrink:0}
  .ag-row.ok .i{background:rgba(49,208,160,.16);color:#5CE0B4}
  .ag-row.ok .ag-verd{background:rgba(49,208,160,.16);color:#5CE0B4}
  .ag-row.cut .i{background:rgba(255,102,90,.16);color:#FF8A7C}
  .ag-row.cut .ag-verd{background:rgba(255,102,90,.16);color:#FF8A7C}
  .ag-row.up .i{background:rgba(110,132,255,.18);color:#9DB0FF}
  .ag-row.up .ag-verd{background:rgba(110,132,255,.18);color:#9DB0FF}
  .ag-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.09);
    border-top:1px solid rgba(255,255,255,.09)}
  .ag-k{background:var(--navy);padding:15px 14px;text-align:center}
  .ag-k b{display:block;font-size:1.24rem;font-weight:800;color:#fff;letter-spacing:-.03em;
    line-height:1;font-variant-numeric:tabular-nums}
  .ag-k span{display:block;font-size:.68rem;color:rgba(255,255,255,.5);font-weight:600;margin-top:6px;line-height:1.3}
  .ag-cap{margin:12px 0 0;font-size:.78rem;color:var(--muted);text-align:center}
  @media(max-width:480px){.ag-term{font-size:.8rem}.ag-k b{font-size:1.06rem}}

  /* ===== PANELES DE MONITOREO =====
     Tres paneles más, de la misma familia visual que el de términos (oscuros, cabecera con
     señal en vivo, pie que aclara que los datos son ilustrativos), pero cada uno muestra algo
     distinto para que no se lean como el mismo widget repetido: medidores, lista de estado con
     un incidente, y barras de participación.
     Los tres corren con UN solo temporizador compartido y solo cuando están a la vista. */
  .pnl{position:relative;max-width:100%;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
    border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid rgba(255,255,255,.09)}
  .pnl-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
    border-bottom:1px solid rgba(255,255,255,.09)}
  .pnl-t{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:800;
    letter-spacing:.09em;text-transform:uppercase;color:#8FE3C0}
  .pnl-t i{width:7px;height:7px;border-radius:50%;background:#31D0A0;animation:agPulse 2s infinite;flex-shrink:0}
  .pnl-m{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;white-space:nowrap}
  .pnl-b{padding:17px 18px}
  .pnl-cap{margin:12px 0 0;font-size:.78rem;color:var(--muted)}

  /* -- A. Velocidad: tres medidores de Core Web Vitals -- */
  .cwv{display:flex;flex-direction:column;gap:15px}
  .cwv-r{display:grid;grid-template-columns:46px 1fr 72px;align-items:center;gap:12px}
  .cwv-k{font-size:.71rem;font-weight:800;color:rgba(255,255,255,.55);letter-spacing:.04em}
  .cwv-track{position:relative;height:7px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden;min-width:0}
  .cwv-track i{position:absolute;left:0;top:0;bottom:0;border-radius:100px;width:0;transition:width .6s ease}
  .cwv-v{font-size:.79rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
  .cwv-r.good .cwv-track i{background:linear-gradient(90deg,#31D0A0,#5CE0B4)}
  .cwv-r.warn .cwv-track i{background:linear-gradient(90deg,#E8A33D,#F5C46A)}
  .cwv-r.bad .cwv-track i{background:linear-gradient(90deg,#E8564A,#FF8A7C)}
  .cwv-foot{margin-top:17px;padding-top:15px;border-top:1px solid rgba(255,255,255,.09);
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .cwv-score{display:flex;align-items:baseline;gap:9px}
  .cwv-score b{font-size:1.62rem;font-weight:800;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
  .cwv-score span{font-size:.71rem;color:rgba(255,255,255,.5);font-weight:600}
  .cwv-when{font-size:.7rem;color:rgba(255,255,255,.45);font-weight:600;white-space:nowrap}

  /* -- B. Landing pages: estado de cada página, con un incidente que aparece y se resuelve -- */
  .lps{display:flex;flex-direction:column}
  .lp-r{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .lp-r:last-child{border-bottom:0}
  .lp-u{min-width:0}
  .lp-u b{display:block;font-size:.83rem;font-weight:700;color:rgba(255,255,255,.9);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lp-u span{display:block;font-size:.69rem;color:rgba(255,255,255,.45);font-weight:600;margin-top:3px}
  .lp-s{font-size:.63rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    padding:4px 10px;border-radius:100px;white-space:nowrap}
  .lp-r.ok .lp-s{background:rgba(49,208,160,.16);color:#5CE0B4}
  .lp-r.err .lp-s{background:rgba(232,86,74,.2);color:#FF9A8E}
  .lp-r.err .lp-u b{color:#FFB3A8}
  .lp-alert{margin-top:15px;display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:12px;
    background:rgba(232,86,74,.13);border:1px solid rgba(232,86,74,.32);
    opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .35s ease}
  .lp-alert.on{opacity:1;transform:none}
  .lp-alert svg{width:17px;height:17px;color:#FF9A8E;flex-shrink:0;margin-top:1px}
  .lp-alert b{display:block;font-size:.81rem;color:#FFC9C1;font-weight:800}
  .lp-alert span{display:block;font-size:.74rem;color:rgba(255,255,255,.62);margin-top:2px;line-height:1.45}

  /* El panel del medio va a la izquierda: si los tres van del mismo lado, la página se
     vuelve una columna de widgets. En mobile .rt-grid ya colapsa a una sola columna. */
  .rt-grid.flip .rt-text{order:2}
  .rt-grid.flip .rt-visual{order:1}
  @media(max-width:960px){.rt-grid.flip .rt-text{order:1}.rt-grid.flip .rt-visual{order:2}}

  /* ===== CONTADORES =====
     Los cinco números son los que ya publica la página. Cuentan una sola vez, al entrar
     en pantalla, y con reduced-motion aparecen directamente en su valor final. */
  .nums{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:var(--maxw);margin:0 auto}
  .num{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px;
    box-shadow:var(--shadow-sm);text-align:center}
  .num b{display:block;font-size:clamp(1.7rem,3vw,2.35rem);font-weight:800;color:var(--coral);
    letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
  .num span{display:block;font-size:.86rem;color:var(--muted);font-weight:600;margin-top:9px;line-height:1.4}
  @media(max-width:1000px){.nums{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:620px){.nums{grid-template-columns:1fr 1fr;gap:12px}.num{padding:20px 14px}}

  /* ===== Bloque de tres preguntas sobre AEGIS ===== */
  .qa{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--maxw);margin:0 auto}
  .qa-c{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px;
    box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
  .qa-c::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--violet)}
  .qa-c:nth-child(2)::before{background:var(--blue)}
  .qa-c:nth-child(3)::before{background:var(--coral)}
  .qa-c h3{font-size:1.12rem;margin-bottom:11px;letter-spacing:-.02em}
  .qa-c p{color:var(--ink-soft);font-size:.98rem;line-height:1.65}
  @media(max-width:900px){.qa{grid-template-columns:1fr}}

  /* ===== Cuatro beneficios ===== */
  .ben{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:var(--maxw);margin:0 auto}
  .ben-c{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;
    box-shadow:var(--shadow-sm);display:flex;gap:16px;align-items:flex-start}
  .ben-ic{width:44px;height:44px;border-radius:13px;background:var(--bg-lav);display:grid;place-items:center;
    color:var(--violet);flex-shrink:0}
  .ben-ic svg{width:22px;height:22px}
  .ben-c h3{font-size:1.06rem;margin-bottom:7px;letter-spacing:-.015em}
  .ben-c p{color:var(--ink-soft);font-size:.95rem;line-height:1.6}
  @media(max-width:820px){.ben{grid-template-columns:1fr}}

  /* ===== Comparación Caissa vs otras agencias ===== */
  .cmp{max-width:940px;margin:0 auto;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
  .cmp-h,.cmp-r{display:grid;grid-template-columns:1fr 128px 128px;align-items:center}
  .cmp-h{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:14px 22px}
  .cmp-h span{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);text-align:center}
  .cmp-h span:first-child{text-align:left}
  .cmp-h .me{color:var(--coral-dk)}
  .cmp-r{padding:15px 22px;border-bottom:1px solid var(--bg-soft)}
  .cmp-r:last-child{border-bottom:0}
  .cmp-r > b{font-size:.96rem;font-weight:600;color:var(--ink-soft);line-height:1.45}
  .cmp-v{display:grid;place-items:center}
  .cmp-v svg{width:21px;height:21px}
  .cmp-v.si{color:#0E9F6E}
  .cmp-v.no{color:#C9CCDC}
  /* Los tildes de la columna Caissa se dibujan cuando la sección entra en pantalla. */
  .cmp-v.si svg path{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .5s ease}
  .cmp.in .cmp-v.si svg path{stroke-dashoffset:0}
  .cmp-r:nth-child(2) .cmp-v.si svg path{transition-delay:.05s}
  .cmp-r:nth-child(3) .cmp-v.si svg path{transition-delay:.1s}
  .cmp-r:nth-child(4) .cmp-v.si svg path{transition-delay:.15s}
  .cmp-r:nth-child(5) .cmp-v.si svg path{transition-delay:.2s}
  .cmp-r:nth-child(6) .cmp-v.si svg path{transition-delay:.25s}
  .cmp-r:nth-child(7) .cmp-v.si svg path{transition-delay:.3s}
  .cmp-r:nth-child(8) .cmp-v.si svg path{transition-delay:.35s}
  .cmp-r:nth-child(9) .cmp-v.si svg path{transition-delay:.4s}
  .cmp-r:nth-child(10) .cmp-v.si svg path{transition-delay:.45s}
  @media(prefers-reduced-motion:reduce){.cmp-v.si svg path{stroke-dashoffset:0;transition:none}}
  @media(max-width:640px){
    .cmp-h,.cmp-r{grid-template-columns:1fr 62px 62px;padding-left:16px;padding-right:16px}
    .cmp-h span{font-size:.6rem}
    .cmp-r > b{font-size:.9rem}
  }

  /* ===== Testimonio ===== */
  .tq{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;
    box-shadow:var(--shadow);padding:40px 44px;text-align:center}
  .tq blockquote{margin:0;font-style:italic;color:var(--ink-soft);font-size:1.1rem;line-height:1.7}
  .tq-w{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
  .tq-w b{color:var(--ink);font-size:.98rem}
  .tq-w span{color:var(--muted);font-size:.88rem}
  .tq-w img{height:26px;width:auto;max-width:120px;object-fit:contain;filter:brightness(0);opacity:.45}
  @media(max-width:640px){.tq{padding:30px 24px}.tq blockquote{font-size:1.02rem}}


@media (max-width:820px){
  section{padding:52px 0}
  .compare-sec,.audit,.results,.answer,.live,.services{padding:58px 0}
  .proof,.rev2{padding:56px 0}
  .method{padding:56px 0 60px}
  .section-head{margin-bottom:30px}
  .team-grid,.audit-panel,.answer-grid,.live-grid{gap:30px}
  .steps{gap:26px}
}
@media (max-width:560px){
  /* Ritmo de seccion */
  section{padding:44px 0}
  .compare-sec,.audit,.results,.answer,.live,.services{padding:48px 0}
  .proof,.rev2{padding:46px 0}
  .method{padding:46px 0 50px}
  .final{padding:40px 0}
  .rel{padding:40px 0}
  .section-head{margin-bottom:24px}
  .wrap{padding:0 20px}

  /* Tarjetas de la home: menos marco, mismo contenido */
  .rescard{padding:20px 20px}
  .rescards{gap:12px}
  .feat-review{padding:22px 20px;gap:16px}
  .fit-card{padding:22px 20px}
  .fit-cols{gap:14px}
  .why-picky{padding:20px 22px}
  .expect .card{padding:20px 22px}
  .commit{padding:20px 22px}
  .rcard{padding:20px 22px}
  .r2card{padding:20px 22px}
  .pf3-chat{padding:22px 20px}
  .final-panel{padding:32px 20px}
  .screenmock .scr{padding:16px}

  /* Tarjetas compartidas por las landings */
  .svc-card,.ind,.tst,.pcard,.cons,.faqo,.wedo-c,.pp-b,.cta-ga{padding:20px 20px}
  .price-note{padding:18px 20px}

  /* Titulares un escalon mas chicos: a 375px un H2 de 32,8px se come tres renglones.
     Valores planos, no clamp: con vw el titulo crecia justo por debajo del breakpoint. */
  :root{--h2:1.86rem;--h2-sub:1.62rem}
  .rescard h3{font-size:1.22rem}
  .m4-verb{font-size:1.3rem}

  /* Tabla comparativa apilada: 6 filas x 237px eran 1.448px de alto para 74 palabras.
     Se afina el aire de cada celda y la barra de titulo; el contenido no cambia. */
  .compare{gap:11px}
  .crow > div{padding:11px 16px}
  .c-label{font-size:1rem;padding-top:10px;padding-bottom:10px}
  .c-before::before,.c-after::before{margin-bottom:3px}

  /* Enlaces del footer: 24px de alto no es un objetivo tactil. Con el padding quedan en 44. */
  .foot-col a{padding:10px 0;margin-bottom:0}
  .foot-legal a,.foot-copy a{display:inline-block;padding:4px 0}
}

/* =====================================================================
   BLINDAJE  (lo agrega el generador, no viene del HTML original)

   Los badges del footer y estos logos se dimensionaban SOLO con el
   atributo height del HTML. Cualquier hoja que declare img{height:auto}
   lo anula y los manda al tamano natural: los badges pasan de 80px de
   alto a 1727px. El tema ya saca el CSS de bloques de WordPress, que es
   quien traia esa regla, pero declararlo aca cuesta 400 bytes y deja de
   depender de eso. Tambien evita salto de layout (CLS) mientras cargan.
   ===================================================================== */
.foot-badges img{width:auto;height:38px;display:block}
.foot-badges img[src*="badge-premier"],
.foot-badges img[src*="badge-gptw"],
.foot-badges img[src*="badge-ecommerce"]{height:50px}

/* El panel del desplegable, un poco mas cerca del nav (venia con 9px de aire).
   El ::before es un puente invisible que cubre ese hueco: sin el, al bajar el
   mouse del boton al panel se dispara mouseleave y el menu se cierra en la cara
   del usuario. Los dos numeros TIENEN que ser iguales. */
.nav-menu{top:calc(100% + 4px)}
.nav-menu::before{top:-4px;height:4px}

/* Los titulos de columna del footer dejaron de ser headings: son rotulos, no
   estructura del documento (auditoria SEO del blog). Como <p> no heredan el
   font-weight:800 ni el line-height de h1,h2,h3,h4, van explicitos. Se ven igual
   que con .foot-col h2 / .foot-col h3, que es lo que declara base.css. */
.foot-col .foot-col-t{color:var(--ink);font-size:1rem;font-weight:800;line-height:1.12;margin:0 0 15px}

/* Rotulo de "Enlaces destacados", la ultima fila del footer. Va en <p> y no en <h3>
   por el mismo motivo que los titulos de columna: es una etiqueta, no una seccion
   del documento. Copia lo que base.css le da a .foot-feat h3. */
.foot-feat .foot-feat-t{color:var(--ink);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0}