@charset "utf-8";
/* ============================================================================
   i.Galenus — sistema de diseño del sitio público
   Capas: reset < base < theme < components < utilities
   ========================================================================== */
@layer reset, base, theme, components, utilities;

/* ─────────────────────────── TOKENS ─────────────────────────────────────── */
:root{
  /* Marca */
  --solemn-blue:#010326;
  --innovation-blue:#003AC9;
  --serene-sky:#066DF0;
  --intimate-lilac:#BA23E5;
  --friendly-purple:#6000C6;
  --neutral-light:#F4F6FB;

  /* Semánticos — superficie oscura (por defecto) */
  --bg:var(--solemn-blue);
  --bg-raised:#070A33;
  --fg:#fff;
  --fg-muted:rgb(255 255 255 / .62);
  --fg-faint:rgb(255 255 255 / .50);      /* 5.25:1 — .45 daba 4.40 y no pasaba AA */
  --line:rgb(255 255 255 / .12);
  --line-strong:rgb(255 255 255 / .46);   /* 4.58:1 — límite de control, WCAG 1.4.11 */
  --surface:rgb(255 255 255 / .04);
  --surface-hover:rgb(255 255 255 / .07);

  --accent:var(--innovation-blue);
  --accent2:var(--serene-sky);
  --accent-fg:#fff;
  /* El azul de marca como texto da 4.27:1 en oscuro y 4.36:1 en claro: no pasa
     AA. Se reserva --accent2 para rellenos y bordes y se usa este para texto. */
  --accent-text:#4D90F5;                  /* 6.35:1 sobre el fondo oscuro */

  /* Escala tipográfica fluida */
  /* Pisos pensados para leer en un teléfono de 320-390 px, no para que la
     tipografía "quepa": 14 px para etiquetas y 16 px para el cuerpo. */
  --step--1:clamp(.875rem,.85rem + .12vw,.92rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --step-1:clamp(1.1rem,1.03rem + .34vw,1.3rem);
  --step-2:clamp(1.35rem,1.2rem + .72vw,1.85rem);
  --step-3:clamp(1.7rem,1.4rem + 1.4vw,2.6rem);
  --step-4:clamp(2.1rem,1.55rem + 2.6vw,3.6rem);
  --step-5:clamp(2.5rem,1.6rem + 4vw,4.6rem);

  /* Espaciado */
  --gutter:clamp(1rem,.6rem + 2vw,1.5rem);
  --measure:68ch;
  --radius:12px;
  --radius-lg:20px;
  --section-y:clamp(3.5rem,2rem + 7vw,7rem);

  --t:.35s cubic-bezier(.4,0,.2,1);
  --t-fast:.18s cubic-bezier(.4,0,.2,1);

  --shadow-1:0 1px 2px rgb(1 3 38 / .12), 0 4px 16px rgb(1 3 38 / .10);
  --shadow-2:0 2px 6px rgb(1 3 38 / .16), 0 18px 50px rgb(1 3 38 / .22);

  color-scheme:dark;
  scrollbar-gutter:stable;
}

/* Superficie clara — se aplica por sección, no por preferencia del sistema:
   la marca es de contraste fijo y las secciones alternan a propósito. */
:where(.light){
  --bg:var(--neutral-light);
  --bg-raised:#fff;
  --fg:var(--solemn-blue);
  --fg-muted:#5A6275;
  --fg-faint:#646B7D;                     /* 4.93:1 sobre el fondo claro — #868DA0 daba 3.07 */
  --line:rgb(1 3 38 / .12);
  --line-strong:rgb(1 3 38 / .48);        /* 3.55:1 — límite de control */
  --surface:rgb(1 3 38 / .03);
  --surface-hover:rgb(1 3 38 / .06);
  --accent-text:#1565D8;                  /* 5.00:1 sobre el fondo claro */
  color-scheme:light;
}

/* ─────────────────────────── RESET ──────────────────────────────────────── */
@layer reset{
  *,::before,::after{box-sizing:border-box;}
  :where(body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol,fieldset,legend){margin:0;padding:0;}
  :where(ul,ol):where([class]){list-style:none;}
  :where(html){-webkit-text-size-adjust:100%;}
  @media (prefers-reduced-motion:no-preference){
    :where(html:focus-within){scroll-behavior:smooth;}
  }
  :where(img,picture,svg,video){display:block;max-width:100%;}
  :where(img,video){height:auto;}
  :where(input,button,textarea,select){font:inherit;color:inherit;}
  :where(button){background:none;border:none;}
  :where(a){color:inherit;text-decoration:none;}
  :where(fieldset){border:none;}
  [hidden]{display:none !important;}
}

/* ─────────────────────────── BASE ───────────────────────────────────────── */
@layer base{
  html{scroll-padding-block-start:6rem;}
  body{
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:var(--step-0);
    line-height:1.65;
    background:var(--bg);
    color:var(--fg);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  h1,h2,h3,h4{
    font-family:Archivo,system-ui,sans-serif;
    line-height:1.08;
    letter-spacing:-.025em;
    text-wrap:balance;
  }
  h1{font-size:var(--step-5);font-weight:900;letter-spacing:-.035em;}
  h2{font-size:var(--step-4);font-weight:800;}
  h3{font-size:var(--step-2);font-weight:700;line-height:1.2;}
  h4{font-size:var(--step-1);font-weight:700;line-height:1.25;}
  p{text-wrap:pretty;overflow-wrap:break-word;}
  strong,b{font-weight:600;color:var(--fg);}
  ::selection{background:var(--serene-sky);color:#fff;}

  :focus-visible{
    outline:2px solid var(--serene-sky);
    outline-offset:3px;
    border-radius:4px;
  }

  /* Enlaces dentro de texto corrido. Se limita a prosa: las listas de
     navegación y de pie llevan sus propios estilos y no deben subrayarse. */
  :where(p, .checks li, .faq-answer, blockquote) a{
    color:inherit;
    text-decoration:underline;
    text-decoration-color:var(--line-strong);
    text-underline-offset:.2em;
    transition:text-decoration-color var(--t-fast);
  }
  :where(p, .checks li, .faq-answer, blockquote) a:hover{text-decoration-color:currentColor;}

  abbr[title]{text-decoration:underline dotted;cursor:help;}
}

/* ─────────────────────────── LAYOUT ─────────────────────────────────────── */
@layer components{
  .wrap{
    width:min(100% - var(--gutter) * 2, 1160px);
    margin-inline:auto;
  }
  .wrap-narrow{width:min(100% - var(--gutter) * 2, 780px);margin-inline:auto;}

  section{background:var(--bg);color:var(--fg);}
  .section{padding-block:var(--section-y);}
  .section-sm{padding-block:calc(var(--section-y) * .6);}

  /* Secciones fuera de pantalla: se saltan el render hasta acercarse */
  /* El marcador debe parecerse al alto real o el salto al renderizar se ve.
     `.defer-xl` es para las secciones largas (la cronología, los precios). */
  .defer{content-visibility:auto;contain-intrinsic-block-size:auto 55rem;}
  .defer-xl{content-visibility:auto;contain-intrinsic-block-size:auto 130rem;}

  .grid{display:grid;gap:clamp(1rem,.5rem + 1.6vw,1.75rem);}
  .cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));}
  .cols-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));}
  .cols-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));}

  .stack > * + *{margin-block-start:var(--stack,1rem);}
  .lede{font-size:var(--step-1);line-height:1.6;color:var(--fg-muted);max-width:var(--measure);}

  .eyebrow{
    font-family:Inter,system-ui,sans-serif;
    font-size:var(--step--1);
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--fg-faint);
    margin-block-end:.9rem;
    display:block;
  }
  .eyebrow-accent{color:var(--accent-text);opacity:1;}
}

/* ─────────────────────────── BOTONES ────────────────────────────────────── */
@layer components{
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    min-block-size:44px;               /* área táctil */
    padding:.8rem 1.6rem;
    border-radius:10px;
    font-size:var(--step-0);
    font-weight:600;
    line-height:1.2;
    text-align:center;
    cursor:pointer;
    border:1.5px solid transparent;
    transition:transform var(--t-fast), box-shadow var(--t), background-color var(--t), border-color var(--t), color var(--t);
  }
  .btn:active{transform:translateY(1px);}

  .btn-primary{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:var(--accent-fg);
    box-shadow:0 4px 20px rgb(0 58 201 / .35);
  }
  .btn-primary:hover{box-shadow:0 10px 34px rgb(0 58 201 / .5);transform:translateY(-2px);}

  .btn-ghost{border-color:var(--line-strong);color:var(--fg);}
  .btn-ghost:hover{border-color:var(--fg);background:var(--surface-hover);}

  .btn-solid{background:var(--fg);color:var(--bg);}
  .btn-solid:hover{opacity:.88;transform:translateY(-2px);}

  .btn-wa{background:#25D366;color:#04250f;border-color:#25D366;}
  .btn-wa:hover{background:#1fb855;border-color:#1fb855;transform:translateY(-2px);}

  .btn-sm{padding:.5rem 1rem;font-size:var(--step--1);min-block-size:38px;}
  .btn-lg{padding:1rem 2rem;font-size:var(--step-1);}
  .btn-block{inline-size:100%;}

  .btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;}

  /* Enlace de acción autónomo (no va dentro de una oración): necesita el
     mismo blanco táctil que un botón. */
  .link-arrow{
    display:inline-flex;align-items:center;gap:.4rem;
    min-block-size:44px;
    font-weight:600;color:var(--accent-text);
    transition:gap var(--t-fast);
  }
  .link-arrow::after{content:"→";transition:translate var(--t-fast);}
  .link-arrow:hover::after{translate:3px 0;}

}

/* ─────────────────────────── NAVBAR ─────────────────────────────────────── */
@layer components{
  .nav{
    position:fixed;inset-block-start:0;inset-inline:0;z-index:900;
    background:rgb(1 3 38 / .86);
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    border-block-end:1px solid rgb(255 255 255 / .08);
  }
  .nav::after{
    content:"";display:block;block-size:2px;
    background:linear-gradient(90deg,var(--innovation-blue),var(--serene-sky),var(--intimate-lilac));
  }
  .nav-inner{
    display:flex;align-items:center;gap:1.5rem;
    block-size:68px;
    width:min(100% - var(--gutter) * 2, 1240px);
    margin-inline:auto;
  }
  .nav-logo{display:flex;align-items:center;flex-shrink:0;min-block-size:44px;padding-inline-end:.5rem;}
  .nav-logo svg{block-size:26px;inline-size:auto;fill:#fff;}
  .nav-links{display:none;align-items:center;gap:1.5rem;margin-inline-start:auto;}
  .nav-link{
    font-size:.9rem;font-weight:500;color:rgb(255 255 255 / .72);
    transition:color var(--t-fast);white-space:nowrap;
    padding-block:.5rem;
  }
  .nav-link:hover,.nav-link[aria-current="page"]{color:#fff;}
  .nav-link[aria-current="page"]{font-weight:600;}
  .nav-actions{display:none;align-items:center;gap:.6rem;margin-inline-start:1rem;}
  /* Las etiquetas de los botones de la barra no se parten en dos renglones,
     sin importar qué tan largas sean en el idioma que toque. */
  .nav-actions .btn{white-space:nowrap;}

  /* Menú desplegable de subespecialidades — popover nativo */
  .nav-menu-btn{
    font-size:.9rem;font-weight:500;color:rgb(255 255 255 / .72);
    display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;
    transition:color var(--t-fast);padding-block:.5rem;
    anchor-name:--subesp;
  }
  .nav-menu-btn:hover{color:#fff;}
  .nav-menu-btn::after{content:"";inline-size:.4em;block-size:.4em;border:solid currentColor;border-width:0 1.5px 1.5px 0;rotate:45deg;translate:0 -.15em;}
  .nav-menu{
    margin:0;padding:.5rem;border:1px solid var(--line);border-radius:14px;
    background:#080B33;box-shadow:var(--shadow-2);
    min-inline-size:15rem;
    position:fixed;
    position-anchor:--subesp;
    inset:auto;
    inset-block-start:calc(anchor(bottom) + .5rem);
    inset-inline-start:anchor(left);
  }
  .nav-menu a{display:block;padding:.6rem .8rem;border-radius:9px;font-size:.9rem;color:rgb(255 255 255 / .78);transition:background var(--t-fast),color var(--t-fast);}
  .nav-menu a:hover{background:rgb(255 255 255 / .07);color:#fff;}
  #btn-mas{anchor-name:--mas;}
  #menu-mas{position-anchor:--mas;}
  @supports not (anchor-name:--x){
    .nav-menu{inset-block-start:64px;inset-inline-start:auto;inset-inline-end:var(--gutter);}
  }

  .nav-toggle{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem;margin-inline-start:auto;min-block-size:44px;min-inline-size:44px;align-items:center;justify-content:center;}
  .nav-toggle span{display:block;inline-size:22px;block-size:2px;background:#fff;border-radius:2px;transition:translate var(--t-fast),rotate var(--t-fast),opacity var(--t-fast);}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){translate:0 7px;rotate:45deg;}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){translate:0 -7px;rotate:-45deg;}

  /* Menú móvil: panel de alto fijo (barra = 70 px). La lista se desplaza por dentro
     y los botones de cuenta quedan siempre a la vista al pie, sin hacer scroll. */
  .nav-mobile{
    display:none;
    flex-direction:column;
    block-size:calc(100vh - 70px);
    block-size:calc(100dvh - 70px);
    background:rgb(3 5 45 / .98);
    border-block-start:1px solid var(--line);
    overflow:hidden;
  }
  .nav-mobile[data-open]{display:flex;}
  .nav-mobile-scroll{
    flex:1 1 auto;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;
    padding:.5rem var(--gutter) 1rem;
    display:flex;flex-direction:column;
  }
  .nav-mobile-scroll a,.nav-mobile-subs summary{
    display:flex;align-items:center;min-block-size:48px;
    padding:.5rem .25rem;font-size:1.05rem;color:rgb(255 255 255 / .86);
    border-block-end:1px solid rgb(255 255 255 / .06);
  }
  .nav-mobile-subs summary{cursor:pointer;list-style:none;justify-content:space-between;font-weight:600;color:#fff;}
  .nav-mobile-subs summary::-webkit-details-marker{display:none;}
  .nav-mobile-subs summary::after{content:"";inline-size:.5em;block-size:.5em;border:solid currentColor;border-width:0 2px 2px 0;rotate:45deg;transition:rotate var(--t-fast);}
  .nav-mobile-subs[open] summary::after{rotate:225deg;}
  .nav-mobile-subs a{padding-inline-start:1rem;font-size:.98rem;color:rgb(255 255 255 / .72);}
  .nav-mobile-cta{
    flex:none;display:grid;gap:.6rem;
    padding:.85rem var(--gutter) calc(.85rem + env(safe-area-inset-bottom,0px));
    background:rgb(1 3 38 / .98);
    border-block-start:1px solid rgb(255 255 255 / .12);
    box-shadow:0 -14px 28px -18px rgb(0 0 0 / .6);
  }
  .nav-mobile-cta{gap:.75rem;background:rgb(8 12 60 / .98);}
  .nav-mobile-cta .btn{margin:0;min-block-size:50px;justify-content:center;}
  .nav-mobile-cta .btn-ghost{border:1.5px solid rgb(255 255 255 / .6);}
  /* Degradado al pie de la lista: avisa que hay más enlaces por deslizar. */
  .nav-mobile-scroll{
    padding-block-end:2.5rem;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2.25rem),transparent);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 2.25rem),transparent);
  }
  @media (max-height:640px){
    .nav-mobile-scroll a,.nav-mobile-subs summary{min-block-size:44px;}
  }
  /* Horizontal o pantalla baja: los dos botones van en una sola fila y la lista gana alto. */
  @media (max-height:450px){
    .nav-mobile-cta{grid-template-columns:1fr 1fr;padding-block:.6rem calc(.6rem + env(safe-area-inset-bottom,0px));}
    .nav-mobile-cta .btn{min-block-size:46px;}
    .nav-mobile-scroll a,.nav-mobile-subs summary{min-block-size:42px;font-size:1rem;}
  }
  .nav-mobile-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);padding:1rem .25rem .25rem;}
  html.nav-open{overflow:hidden;}
  html.nav-open .sticky-cta,html.nav-open .wa-float{display:none;}

  /* A partir de aquí sí hay lugar para la navegación completa. */
  @media (width >= 1140px){
    .nav-links,.nav-actions{display:flex;}
    .nav-toggle{display:none;}
  }
}

/* ─────────────────────────── HERO ───────────────────────────────────────── */
@layer components{
  .hero{
    position:relative;
    padding-block:clamp(7rem,5rem + 9vw,10.5rem) clamp(3rem,2rem + 5vw,5.5rem);
    overflow:hidden;
    isolation:isolate;
  }
  .hero-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;}
  .orb-a{inset-block-start:-14rem;inset-inline-end:-10rem;inline-size:min(44rem,90vw);aspect-ratio:1;
    background:radial-gradient(circle at 40% 40%,rgb(6 109 240 / .3),rgb(96 0 198 / .16),transparent 68%);}
  .orb-b{inset-block-end:-16rem;inset-inline-start:-8rem;inline-size:min(30rem,70vw);aspect-ratio:1;
    background:radial-gradient(circle at 60% 60%,rgb(186 35 229 / .16),transparent 70%);}

  .badge{
    display:inline-flex;align-items:center;gap:.55rem;
    background:var(--surface);border:1px solid var(--line);
    border-radius:100px;padding:.4rem 1rem;
    font-size:var(--step--1);color:var(--fg-muted);
    margin-block-end:1.5rem;
  }
  .badge::before{
    content:"";inline-size:6px;block-size:6px;border-radius:50%;
    background:var(--accent2);flex-shrink:0;
  }
  @media (prefers-reduced-motion:no-preference){
    .badge::before{
      box-shadow:0 0 0 0 rgb(6 109 240 / .6);
      animation:pulse 2.4s ease-out infinite;
    }
  }
  @keyframes pulse{to{box-shadow:0 0 0 10px rgb(6 109 240 / 0);}}

  .hero-h{max-inline-size:17ch;}
  .hero-sub{margin-block-start:1.5rem;max-inline-size:56ch;font-size:var(--step-1);color:var(--fg-muted);}
  .hero-cta{margin-block-start:2.25rem;}
  .hero-note{margin-block-start:1rem;font-size:var(--step--1);color:var(--fg-faint);}
}

/* ─────────────────────────── TARJETAS ───────────────────────────────────── */
@layer components{
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:clamp(1.25rem,1rem + 1vw,1.75rem);
    transition:border-color var(--t),background-color var(--t),transform var(--t);
    block-size:100%;
  }
  .card:where(:hover){border-color:var(--line-strong);background:var(--surface-hover);}
  .card h3,.card h4{margin-block-end:.6rem;}
  .card p{color:var(--fg-muted);font-size:var(--step-0);}

  .card-num{
    font-family:Archivo,sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.1em;
    color:var(--accent-text);margin-block-end:.9rem;display:block;
  }

  /* Tarjeta enlazada: el <a> cubre la tarjeta sin anidar bloques en un enlace */
  .card-link{position:relative;}
  .card-link:has(a:hover){border-color:var(--line-strong);background:var(--surface-hover);}
  .card-link a::after{content:"";position:absolute;inset:0;border-radius:inherit;}

  .pill{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.35rem .75rem;border-radius:100px;
    border:1px solid var(--line);background:var(--surface);
    font-size:var(--step--1);color:var(--fg-muted);
  }
  .pill-row{display:flex;flex-wrap:wrap;gap:.5rem;}
  /* Una píldora que es enlace es navegación real: necesita blanco táctil.
     Las que solo son etiqueta (prueba social) se quedan compactas. */
  a.pill{min-block-size:44px;padding-inline:1.1rem;}
  a.pill:hover{border-color:var(--line-strong);color:var(--fg);}
}

/* ─────────────────────────── LISTA DE VENTAJAS ──────────────────────────── */
@layer components{
  .checks{display:grid;gap:.85rem;}
  /* La palomita se posiciona en absoluto en vez de ser una celda de grid: así el
     <strong> y el texto que le sigue son hermanos en un bloque normal y fluyen
     juntos, en lugar de convertirse cada uno en un ítem de grid. */
  .checks li{position:relative;padding-inline-start:1.9rem;color:var(--fg-muted);}
  .checks li::before{
    content:"";position:absolute;inset-inline-start:0;inset-block-start:.34em;
    inline-size:1.15rem;block-size:1.15rem;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/76% no-repeat,
      radial-gradient(circle,#000 99%,transparent);
    -webkit-mask-composite:destination-out;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/76% no-repeat,
      radial-gradient(circle,#000 99%,transparent);
    mask-composite:exclude;
  }
  .checks strong{display:block;color:var(--fg);font-weight:600;}
}

/* ─────────────────────────── ANTES / DESPUÉS ────────────────────────────── */
@layer components{
  .ba{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));}
  .ba-col{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
  .ba-head{padding:1rem 1.25rem;font-family:Archivo,sans-serif;font-weight:700;font-size:var(--step-1);border-block-end:1px solid var(--line);}
  .ba-before .ba-head{background:rgb(208 43 43 / .1);color:#E27A7A;}
  .light .ba-before .ba-head{color:#B3332F;}
  .ba-after .ba-head{background:rgb(6 109 240 / .12);color:var(--accent-text);}
  .ba-col li{padding:.9rem 1.25rem;border-block-end:1px solid var(--line);color:var(--fg-muted);font-size:var(--step-0);}
  .ba-col li:last-child{border-block-end:none;}
}

/* ─────────────────────────── MÉTRICAS ──────────────────────────────────── */
@layer components{
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
  .stat{background:var(--bg);padding:1.75rem 1.25rem;text-align:center;}
  .stat dt{order:2;font-size:var(--step--1);color:var(--fg-faint);margin-block-start:.4rem;}
  .stat dd{order:1;font-family:Archivo,sans-serif;font-size:var(--step-3);font-weight:900;letter-spacing:-.03em;
    background:linear-gradient(135deg,var(--accent2),var(--intimate-lilac));
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  .stat{display:flex;flex-direction:column;}
}

/* ─────────────────────────── CRONOLOGÍA (el día) ────────────────────────── */
@layer components{
  .timeline{display:grid;gap:0;border-inline-start:2px solid var(--line);margin-inline-start:.5rem;}
  .tl-item{display:grid;grid-template-columns:1fr;gap:.25rem;padding:0 0 2rem 1.75rem;position:relative;}
  .tl-item::before{
    content:"";position:absolute;inset-inline-start:-7px;inset-block-start:.45em;
    inline-size:12px;block-size:12px;border-radius:50%;
    background:var(--bg);border:2px solid var(--accent2);
  }
  .tl-item:last-child{padding-block-end:0;}
  .tl-time{
    font-family:Archivo,sans-serif;font-weight:800;font-size:var(--step--1);
    letter-spacing:.04em;color:var(--accent-text);
    font-variant-numeric:tabular-nums;
    min-inline-size:3.6rem;
  }
  .tl-body h3{font-size:var(--step-1);margin-block-end:.3rem;}
  .tl-body p{color:var(--fg-muted);font-size:var(--step-0);max-inline-size:60ch;}
  @media (width >= 640px){
    .tl-item{grid-template-columns:auto 1fr;gap:1.25rem;}
  }
}

/* ─────────────────────────── CALCULADORAS ───────────────────────────────── */
@layer components{
  .calc{
    border:1px solid var(--line);border-radius:var(--radius-lg);
    background:var(--surface);padding:clamp(1.25rem,1rem + 1.5vw,2rem);
  }
  .calc-field{display:grid;gap:.5rem;margin-block-end:1.5rem;}
  .calc-field label{font-weight:600;font-size:var(--step-0);}
  .calc-field .hint{font-size:var(--step--1);color:var(--fg-faint);}
  /* Solo las cifras de resultado llevan el tratamiento grande; el <output> del
     texto de apoyo debe leerse como texto. */
  .calc-out output{
    font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.03em;
    font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem);display:block;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;   /* una cifra nunca se parte a media cifra */
  }
  /* Una columna por defecto: las cifras llevan `white-space:nowrap`, así que en
     un teléfono dos columnas no refluyen — se encimarían. */
  .calc-out{display:grid;grid-template-columns:1fr;gap:1.25rem;padding-block-start:1.5rem;border-block-start:1px solid var(--line);}
  .calc-out div small{display:block;font-size:var(--step--1);color:var(--fg-faint);margin-block-start:.15rem;}
  @media (width >= 30rem){
    .calc-out{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));}
  }

  input[type="range"]{
    inline-size:100%;accent-color:var(--serene-sky);block-size:44px;cursor:pointer;
  }

  .stepper{display:flex;align-items:center;gap:.75rem;}
  .stepper button{
    inline-size:44px;block-size:44px;border-radius:10px;
    border:1px solid var(--line-strong);color:var(--fg);
    font-size:1.25rem;line-height:1;cursor:pointer;
    display:grid;place-items:center;
    transition:background var(--t-fast),border-color var(--t-fast);
  }
  .stepper button:hover{background:var(--surface-hover);border-color:var(--fg);}
  .stepper output{font-size:var(--step-2);min-inline-size:2.5ch;text-align:center;}
}

/* ─────────────────────────── PRECIOS ────────────────────────────────────── */
@layer components{
  .price-card{
    border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
    background:var(--surface);
    display:flex;flex-direction:column;gap:1.25rem;
    position:relative;
  }
  .price-card[data-featured]{
    border-color:var(--accent2);
    box-shadow:0 0 0 1px var(--accent2), 0 20px 60px rgb(6 109 240 / .18);
  }
  .price-tag{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;}
  .price-amount{font-family:Archivo,sans-serif;font-size:var(--step-4);font-weight:900;letter-spacing:-.035em;line-height:1;}
  .price-per{font-size:var(--step-0);color:var(--fg-faint);}
  .price-flag{
    position:absolute;inset-block-start:0;inset-inline-end:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
    translate:0 -50%;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;font-size:var(--step--1);font-weight:600;
    padding:.3rem .85rem;border-radius:100px;
  }
}

/* ─────────────────────────── FAQ (details nativo) ───────────────────────── */
@layer components{
  .faq{border-block-start:1px solid var(--line);}
  .faq details{border-block-end:1px solid var(--line);}
  .faq summary{
    display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
    padding:1.25rem .25rem;cursor:pointer;list-style:none;
    font-family:Archivo,sans-serif;font-weight:700;font-size:var(--step-1);
    line-height:1.3;
    transition:color var(--t-fast);
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:"";flex-shrink:0;inline-size:1.1rem;block-size:1.1rem;margin-block-start:.25em;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    color:var(--accent2);
    transition:rotate var(--t);
  }
  .faq details[open] summary::after{rotate:135deg;}
  .faq summary:hover{color:var(--accent2);}
  .light .faq summary:hover{color:var(--accent-text);}
  .faq-answer{padding:0 .25rem 1.5rem;color:var(--fg-muted);max-inline-size:var(--measure);}
  .faq-answer > * + *{margin-block-start:.75rem;}
}

/* ─────────────────────────── TABLA ──────────────────────────────────────── */
@layer components{
  .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);}
  table{border-collapse:collapse;inline-size:100%;font-size:var(--step-0);min-inline-size:34rem;}
  th,td{padding:.9rem 1.1rem;text-align:start;border-block-end:1px solid var(--line);}
  th{font-family:Archivo,sans-serif;font-weight:700;font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);text-wrap:balance;}
  tbody tr:last-child td{border-block-end:none;}
  td{color:var(--fg-muted);}
  td:first-child{color:var(--fg);font-weight:500;}
}

/* ─────────────────────────── CTA FINAL ─────────────────────────────────── */
@layer components{
  .cta-band{
    position:relative;isolation:isolate;overflow:hidden;
    background:linear-gradient(135deg,var(--innovation-blue),var(--friendly-purple) 60%,var(--intimate-lilac));
    color:#fff;
    --fg:#fff;--fg-muted:rgb(255 255 255 / .8);--fg-faint:rgb(255 255 255 / .65);
    --line:rgb(255 255 255 / .35);--line-strong:rgb(255 255 255 / .72);
    text-align:center;
  }
  .cta-band .btn-primary{background:#fff;color:var(--innovation-blue);box-shadow:0 8px 30px rgb(1 3 38 / .28);}
  .cta-band .btn-primary:hover{box-shadow:0 14px 44px rgb(1 3 38 / .38);}
  .cta-band .btn-row{justify-content:center;}
  .cta-band h2{max-inline-size:20ch;margin-inline:auto;}
  .cta-band p{margin-inline:auto;}
}

/* ─────────────────────────── BARRA MÓVIL FIJA ──────────────────────────── */
@layer components{
  .sticky-cta{
    position:fixed;inset-block-end:0;inset-inline:0;z-index:850;
    display:flex;gap:.5rem;
    padding-block:.6rem calc(.6rem + env(safe-area-inset-bottom,0px));
    /* En horizontal, sobre un teléfono con muescas, los botones de los extremos
       quedarían debajo del recorte si solo se respetara el gutter. */
    padding-inline:max(var(--gutter),env(safe-area-inset-left,0px))
                   max(var(--gutter),env(safe-area-inset-right,0px));
    background:rgb(1 3 38 / .94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-block-start:1px solid rgb(255 255 255 / .12);
  }
  .sticky-cta .btn{flex:1;padding-inline:.75rem;}
  /* El alto real de la barra es ~63 px más el área segura inferior; reservar
     un valor plano dejaba la última sección tapada en teléfonos con gesto. */
  body{padding-block-end:calc(4.75rem + env(safe-area-inset-bottom,0px));}
  @media (width >= 760px){
    .sticky-cta{display:none;}
    body{padding-block-end:0;}
  }
}

/* ─────────────────────────── BOTÓN WHATSAPP FLOTANTE ───────────────────── */
@layer components{
  .wa-float{
    position:fixed;z-index:840;
    inset-block-end:calc(1.25rem + env(safe-area-inset-bottom,0px));
    inset-inline-end:1.25rem;
    inline-size:56px;block-size:56px;border-radius:50%;
    background:#25D366;color:#fff;
    display:none;place-items:center;
    box-shadow:0 8px 28px rgb(0 0 0 / .32);
    transition:transform var(--t-fast),box-shadow var(--t);
  }
  .wa-float:hover{transform:scale(1.07);box-shadow:0 12px 36px rgb(0 0 0 / .42);}
  .wa-float svg{inline-size:28px;block-size:28px;fill:currentColor;}
  /* En móvil WhatsApp vive en la barra fija, no flotando encima del contenido. */
  @media (width >= 760px){.wa-float{display:grid;}}
}

/* ─────────────────── PLANES Y CONSUMO ──────────────────────────────────── */
@layer components{
  /* La bolsa mensual va ARRIBA de las viñetas: en un modelo medido la capacidad
     es el producto y las funciones son el contexto. */
  .bag{
    display:grid;gap:0;
    border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;
  }
  .bag > div{
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    padding:.5rem .8rem;
    border-block-end:1px solid var(--line);
  }
  .bag > div:last-child{border-block-end:none;}
  .bag dt{font-size:var(--step--1);color:var(--fg-muted);}
  .bag dd{
    font-family:Archivo,sans-serif;font-weight:800;
    font-variant-numeric:tabular-nums;color:var(--fg);
  }

  .unit-note{
    font-size:var(--step--1);color:var(--fg-faint);
    border-block-start:1px solid var(--line);padding-block-start:.6rem;
    text-wrap:pretty;
  }

  /* Una cifra dentro de texto: se lee como dato, no como titular. */
  .kpi{
    font-family:Archivo,sans-serif;font-weight:900;
    font-variant-numeric:tabular-nums;
    font-size:1.35em;line-height:1;color:var(--fg);
  }

  /* Tabla de planes */
  .plans{min-inline-size:48rem;}
  .plans th[scope="col"]{
    vertical-align:bottom;text-transform:none;letter-spacing:0;
    font-size:var(--step-0);color:var(--fg);
    position:sticky;inset-block-start:0;background:var(--bg);z-index:1;
  }
  .plans .th-price{
    display:block;font-family:Archivo,sans-serif;font-weight:900;
    font-size:var(--step-1);color:var(--fg);font-variant-numeric:tabular-nums;
  }
  .cell-note{display:block;font-weight:400;font-size:var(--step--1);color:var(--fg-faint);margin-block-start:.15rem;}
  .plans td{text-align:center;font-variant-numeric:tabular-nums;}
  /* La regla global de <th> va en versalitas; para un encabezado de FILA eso es
     ilegible en una tabla de 33 renglones. Se devuelve a caja normal. */
  .plans th[scope="row"]{
    text-transform:none;letter-spacing:0;
    font-family:Inter,system-ui,sans-serif;
    font-size:var(--step-0);font-weight:500;color:var(--fg);
    text-wrap:pretty;
  }
  /* Columna destacada: teñida de arriba abajo, no solo en el encabezado. */
  .plans [data-featured]{
    background:color-mix(in srgb,var(--accent2) 14%,transparent);
  }
  .plans th[data-featured]{box-shadow:inset 0 3px 0 var(--accent2);}
  .plans .row-group{
    text-align:start;font-family:Archivo,sans-serif;font-weight:800;
    font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;
    color:var(--accent-text);
    background:var(--surface);
    padding-block:.75rem;
  }

  .plans tbody tr:hover td:not([data-featured]){background:var(--surface);}
}

/* ─────────────────── DIVULGACIÓN PROGRESIVA ────────────────────────────── */
/* `<details>` de CONTENIDO, distinto del de FAQ: el texto sigue en el HTML
   servido —Google lo indexa igual y Ctrl+F lo encuentra— pero deja de cobrarle
   una pantalla al lector. Se abre solo en escritorio, donde esconder no gana nada. */
@layer components{
  .disclosure{
    margin-block:2rem;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
  }
  .disclosure > summary{
    display:flex;align-items:center;gap:.6rem;
    min-block-size:48px;padding:.75rem 1rem;
    cursor:pointer;list-style:none;
    font-size:var(--step-0);font-weight:500;color:var(--fg-muted);
    transition:color var(--t-fast);
  }
  .disclosure > summary::-webkit-details-marker{display:none;}
  .disclosure > summary::before{
    content:"+";font-family:Archivo,sans-serif;font-weight:700;
    color:var(--accent2);font-size:1.1em;line-height:1;
    transition:rotate var(--t);
  }
  .disclosure[open] > summary::before{rotate:45deg;}
  .disclosure > summary:hover{color:var(--fg);}
  .disclosure > :not(summary){padding:0 1rem 1.25rem;}

  .spec-list{display:grid;gap:.25rem 1.25rem;}
  .spec-list dt{font-weight:600;color:var(--fg);font-size:var(--step-0);}
  .spec-list dd{color:var(--fg-muted);font-size:var(--step-0);margin-block-end:.9rem;}
  @media (width >= 42rem){
    .spec-list{grid-template-columns:minmax(10rem,1fr) 2fr;}
    .spec-list dt{grid-column:1;}
    .spec-list dd{grid-column:2;margin-block-end:.45rem;}
  }
}

/* ─────────────────── FIGURAS CLÍNICAS ──────────────────────────────────── */
/* Diagramas dibujados, no capturas: pesan ~4 KB, escalan a cualquier ancho, se
   tematizan con los tokens y llevan <title>/<desc> — accesibles e indexables.
   El par «dibujo → texto que el sistema escribe» es el argumento entero: lo que
   ningún competidor puede enseñar. */
@layer components{
  .fig{
    margin:0;
    display:grid;
    gap:1.25rem;
    container-type:inline-size;
  }
  .fig-svg{
    inline-size:100%;
    max-inline-size:26rem;
    block-size:auto;
    margin-inline:auto;
    color:var(--fg);
    overflow:visible;
  }

  .fig-zone{fill:none;stroke:currentColor;stroke-opacity:.22;stroke-width:1.25;}
  .fig-zone-3{fill:var(--surface);}
  .fig-disc{fill:#E8A33D;fill-opacity:.55;stroke:#B4690E;stroke-width:1.25;}
  .fig-macula{fill:#6B4A2B;fill-opacity:.4;}
  .fig-iris{fill:var(--surface);stroke:currentColor;stroke-opacity:.2;}
  .fig-pupil{fill:var(--bg);stroke:currentColor;stroke-opacity:.25;}

  .fig-hour,.fig-axis,.fig-zlabel text,.fig-qname{
    font-family:var(--font-data,Inter,system-ui,sans-serif);
    fill:currentColor;
  }
  .fig-hour{font-size:13px;font-weight:600;opacity:.65;}
  .fig-axis{font-size:12px;font-weight:600;opacity:.5;letter-spacing:.08em;text-transform:uppercase;}
  .fig-zlabel text{font-size:11px;opacity:.42;letter-spacing:.06em;}
  .fig-grade{font-family:Archivo,sans-serif;font-size:26px;font-weight:900;fill:currentColor;}
  .fig-qname{font-size:11px;opacity:.55;letter-spacing:.06em;text-transform:uppercase;}

  .fig-key{display:grid;gap:.5rem;font-size:var(--step--1);color:var(--fg-muted);}
  .fig-key-cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));}
  .fig-key li{display:flex;align-items:center;gap:.55rem;}
  .fig-key b{color:var(--fg);font-weight:600;}
  .fig-dot{inline-size:.7rem;block-size:.7rem;border-radius:2px;background:var(--c);flex-shrink:0;}
  .fig-swatch{inline-size:.9rem;block-size:.9rem;border-radius:3px;flex-shrink:0;
    background:color-mix(in srgb,#0E97B8 calc(var(--o) * 100%),transparent);
    border:1px solid var(--line);}

  /* El pie no es un pie de foto: es la prueba. Se trata como documento. */
  .fig-cap{
    border-inline-start:2px solid var(--accent2);
    padding-inline-start:1rem;
    display:grid;gap:.4rem;
  }
  .fig-cap-label{
    font-size:var(--step--1);font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--fg-faint);
  }
  .fig-quote{
    font-family:var(--font-data,Inter,sans-serif);
    font-size:var(--step-0);line-height:1.55;color:var(--fg);
    quotes:none;
  }
  .fig-quote::before,.fig-quote::after{content:none;}

  /* Lado a lado cuando el contenedor da para ello. */
  @container (min-width: 46rem){
    .fig{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;}
    .fig-svg{grid-row:span 2;max-inline-size:none;}
  }
}

/* ─────────────────────────── IDIOMA ────────────────────────────────────── */
@layer components{
  .lang-switch{
    display:flex;align-items:center;gap:.15rem;
    border:1px solid var(--line);border-radius:100px;padding:.15rem;
  }
  .lang-switch a{
    display:inline-flex;align-items:center;justify-content:center;
    min-block-size:34px;padding-inline:.7rem;border-radius:100px;
    font-size:var(--step--1);font-weight:600;color:var(--fg-faint);
    transition:color var(--t-fast),background-color var(--t-fast);
  }
  .lang-switch a:hover{color:var(--fg);background:var(--surface-hover);}
  .lang-switch a[aria-current]{color:var(--fg);background:var(--surface-hover);}
  /* En la barra superior el espacio es finito y el nombre de un idioma puede
     ser largo ("Português", "Deutsch"): ahí va el código y el nombre completo
     queda en el title y en el aria-label. */
  .lang-switch-compact a{text-transform:uppercase;letter-spacing:.04em;padding-inline:.6rem;}
  .lang-switch-mobile{margin-block-start:1rem;align-self:flex-start;}
  .lang-switch-mobile a{min-block-size:44px;padding-inline:1rem;}
}

/* ─────────────────── FORMULARIO INCRUSTADO ─────────────────────────────── */
@layer components{
  /* El formulario vive sobre fondo claro; se le da una tarjeta blanca propia
     para que en una sección oscura lea como pieza intencional y no como hueco. */
  .tf-shell{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:.5rem;
    box-shadow:var(--shadow-2);
    overflow:hidden;
  }
  .tf-shell > div{
    inline-size:100%;
    block-size:clamp(28rem, 62svh, 38rem);
    border-radius:calc(var(--radius-lg) - .35rem);
    overflow:hidden;
  }
}

/* ─────────────────────────── MIGAS DE PAN ──────────────────────────────── */
@layer components{
  .crumbs{font-size:var(--step--1);color:var(--fg-faint);padding-block-start:5.5rem;}
  .crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;list-style:none;}
  .crumbs li:not(:last-child)::after{content:"/";margin-inline-start:.4rem;opacity:.5;}
  .crumbs a{display:inline-block;padding-block:.72rem;}
  .crumbs a:hover{color:var(--fg);}
}

/* ─────────────────────────── PIE ───────────────────────────────────────── */
@layer components{
  .foot{background:#000119;color:#fff;--fg:#fff;--fg-muted:rgb(255 255 255 / .6);--fg-faint:rgb(255 255 255 / .45);--line:rgb(255 255 255 / .1);
    padding-block:clamp(3rem,2rem + 4vw,4.5rem) 2rem;border-block-start:1px solid rgb(255 255 255 / .1);}
  .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:2.5rem 1.5rem;}
  .foot-brand{grid-column:1 / -1;}
  @media (width >= 900px){.foot-brand{grid-column:span 2;}}
  .foot-brand svg{block-size:26px;inline-size:auto;fill:#fff;margin-block-end:1rem;}
  .foot h2{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);font-weight:600;margin-block-end:1rem;font-family:Inter,sans-serif;}
  .foot ul{display:grid;gap:.1rem;}
  .foot a{display:inline-block;padding-block:.6rem;font-size:var(--step-0);color:var(--fg-muted);transition:color var(--t-fast);}
  .foot a:hover{color:#fff;}
  .foot-social{display:flex;gap:.25rem;margin-block-start:.75rem;}
  .foot-social a{display:inline-grid;place-items:center;inline-size:44px;block-size:44px;padding:0;border-radius:50%;}
  .foot-social a:hover{background:rgb(255 255 255 / .08);}
  .foot-social svg{inline-size:22px;block-size:22px;fill:currentColor;}
  .foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
    margin-block-start:3rem;padding-block-start:1.5rem;border-block-start:1px solid var(--line);
    font-size:var(--step--1);color:var(--fg-faint);}
}

/* ─────────────────────────── REVELADO AL SCROLL ────────────────────────── */
@layer utilities{
  .sr-only{
    position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .skip-link{
    position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:1000;
    background:#fff;color:var(--solemn-blue);padding:.6rem 1rem;border-radius:8px;font-weight:600;
    translate:0 -300%;transition:translate var(--t-fast);
  }
  .skip-link:focus{translate:0 0;}

  .text-center{text-align:center;}
  .mx-auto{margin-inline:auto;}
  .mt-0{margin-block-start:0;}
  .mt-1{margin-block-start:.75rem;}
  .mt-2{margin-block-start:1.5rem;}
  .mt-3{margin-block-start:2.25rem;}
  .mt-4{margin-block-start:3rem;}
  .muted{color:var(--fg-muted);}
  .faint{color:var(--fg-faint);}
  .small{font-size:var(--step--1);}
  .max-measure{max-inline-size:var(--measure);}
}

/* En una pantalla táctil no existe el hover: el estado se queda pegado después
   del toque hasta que se toca en otro lado. Se neutralizan los efectos de
   elevación y desplazamiento; los cambios de color se dejan, son inofensivos. */
@media (hover: none){
  .btn-primary:hover,.btn-solid:hover,.btn-wa:hover{transform:none;}
  .btn-primary:hover{box-shadow:0 4px 20px rgb(0 58 201 / .35);}
  .card:where(:hover),.card-link:has(a:hover){
    border-color:var(--line);background:var(--surface);
  }
  .wa-float:hover{transform:none;}
  .link-arrow:hover::after{translate:0 0;}
  .stepper button:hover{background:transparent;border-color:var(--line-strong);}
}

/* Animaciones ligadas al scroll — progresivas: sin soporte, todo queda visible */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 22%;
    }
    @keyframes reveal-in{
      from{opacity:0;translate:0 1.5rem;}
      to{opacity:1;translate:0 0;}
    }
  }
}

/* ─────────────────────────── VISUALES (ilustraciones) ───────────────────── */
@layer components{
  .hero-grid{display:grid;gap:2.5rem;align-items:center;}
  .hero-copy{min-inline-size:0;}
  .visual{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface);}
  .visual img{display:block;inline-size:100%;block-size:auto;}
  .visual-wide{max-inline-size:60rem;margin-inline:auto;}
  .split{display:grid;gap:2rem;align-items:center;}
  @media (min-width:62rem){
    .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
    .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
    .split-rev .visual{order:-1;}
  }
  @media (prefers-reduced-motion:no-preference){
    .visual-float img{animation:visual-float 9s ease-in-out infinite;}
    @keyframes visual-float{50%{transform:translateY(-.6rem) scale(1.015);}}
  }
}

/* ───────── Footer con CTA y figuras SVG animadas ───────── */
@layer components{
  .foot-cta{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;padding:2rem;margin-block-end:3rem;
    border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgb(0 58 201 / .35),rgb(1 3 38 / .2));}
  .foot-cta-title{font-size:var(--step-2);font-weight:700;color:#fff;line-height:1.2;}
  .foot-cta-note{color:var(--fg-muted);margin-block-start:.35rem;}
  .foot .foot-cta .btn{padding:.9rem 1.6rem;}
  .foot .foot-cta .btn-primary{color:var(--accent-fg);}
  .foot .foot-cta .btn-ghost{color:#fff;}
  .foot-subs{margin-block-start:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.1rem 1.25rem;font-size:var(--step--1);}
  .foot-subs a{padding-block:.35rem;font-size:var(--step--1);}

  .flow{margin:0;display:grid;gap:1rem;}
  .flow-svg{inline-size:100%;block-size:auto;color:var(--fg);overflow:visible;}
  .flow-v{display:none;max-inline-size:22rem;margin-inline:auto;}
  @media (max-width:44rem){.flow-h{display:none;}.flow-v{display:block;}}
  .flow-node{fill:var(--surface);stroke:var(--line);stroke-width:1.5;}
  .flow-badge{fill:rgb(0 58 201 / .24);stroke:var(--accent-text);stroke-width:1.5;}
  .flow-node-key{stroke:var(--accent2);stroke-width:2;}
  .flow-label{fill:var(--fg);font-size:17px;font-weight:600;}
  .flow-sub{fill:var(--fg-muted);font-size:13px;}
  .flow-line{fill:none;stroke:var(--accent-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;}
  .flow-cap{color:var(--fg-muted);text-align:center;font-size:var(--step--1);}
  .fig-trend{grid-template-columns:minmax(0,1fr);align-items:center;}
  @media (min-width:48rem){.fig-trend{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}}
  .tr-svg{max-inline-size:30rem;}
  .tr-grid,.tr-axis{stroke:var(--line);stroke-width:1;}
  .tr-tick,.tr-unit,.tr-x{font-size:11px;fill:var(--fg-muted);}
  .tr-t0{fill:var(--accent-text);}
  .tr-t1{fill:#B8A6FF;}
  .tr-target{stroke:var(--fg-muted);stroke-dasharray:5 5;stroke-width:1;fill:none;}
  .tr-targetl{font-size:11px;fill:var(--fg-muted);}
  .tr-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
  .tr-s0{stroke:var(--accent-text);}
  .tr-s1{stroke:#B8A6FF;}
  .tr-d0{fill:var(--accent-text);}
  .tr-d1{fill:#B8A6FF;}
  .light .tr-s1,.light .tr-t1{stroke:#6B4FD8;}
  .light .tr-t1,.light .tr-d1{fill:#6B4FD8;}
  .fig-key{display:grid;gap:.6rem;list-style:none;padding:0;margin:0 0 1rem;font-size:var(--step--1);color:var(--fg-muted);}
  .fig-line{display:inline-block;inline-size:1.6rem;block-size:3px;border-radius:2px;margin-inline-end:.6rem;vertical-align:middle;}
  .tr-k0{background:var(--accent-text);}
  .tr-k1{background:#B8A6FF;}
  .fig-cap-label{display:block;font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);font-weight:600;margin-block-end:.35rem;}
  .fig-quote{color:var(--fg-muted);font-size:var(--step--1);}
}

/* Dibujo al entrar en pantalla: progresivo; sin soporte, todo queda visible */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .draw .flow-line{animation:fig-draw linear both;animation-timeline:view();animation-range:entry calc(var(--i,0) * 3%) cover calc(30% + var(--i,0) * 2%);}
    .draw .flow-step{animation:fig-step linear both;animation-timeline:view();animation-range:entry calc(var(--i,0) * 3%) cover calc(25% + var(--i,0) * 2%);}
    .draw .tr-dot{animation:fig-step linear both;animation-timeline:view();animation-range:entry calc(var(--i,0) * 4%) cover calc(35% + var(--i,0) * 3%);}
    @keyframes fig-draw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
    @keyframes fig-step{from{opacity:0;translate:0 .6rem;}to{opacity:1;translate:0 0;}}
  }
}

/* ───────── Imágenes con reserva, íconos, CTA y dinamismo ───────── */
@layer components{
  /* Reserva de espacio: el contenedor lleva el aspect-ratio y el degradado de marca,
     así que no hay salto de diseño si el archivo de imagen aún no existe. */
  .visual{--ar:4/3;aspect-ratio:var(--ar);
    background:linear-gradient(135deg,var(--solemn-blue),rgb(6 109 240 / .55) 55%,rgb(186 35 229 / .4));}
  .visual-wide{--ar:16/9;}
  .visual img{block-size:100%;object-fit:cover;color:transparent;}

  .card-media{margin:-.25rem -.25rem 1.1rem;border-radius:calc(var(--radius-lg) - .35rem);overflow:hidden;aspect-ratio:4/3;
    background:linear-gradient(135deg,var(--solemn-blue),rgb(6 109 240 / .55) 55%,rgb(186 35 229 / .4));}
  .card-media img{display:block;inline-size:100%;block-size:100%;object-fit:cover;color:transparent;transition:transform .6s ease;}
  .card-media-ico{display:grid;place-items:center;color:#fff;}
  .card-media-ico svg{inline-size:3.5rem;block-size:3.5rem;opacity:.9;}
  .card-link:hover .card-media img{transform:scale(1.05);}

  /* Íconos de línea */
  .ico{display:inline-grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;border-radius:12px;margin-block-end:.9rem;
    background:linear-gradient(135deg,rgb(6 109 240 / .2),rgb(186 35 229 / .18));color:var(--accent-text);}
  .ico svg{inline-size:1.45rem;block-size:1.45rem;}
  .tl-body h3 .ico{inline-size:2rem;block-size:2rem;margin:0 .6rem 0 0;border-radius:8px;vertical-align:middle;}
  .tl-body h3 .ico svg{inline-size:1.15rem;block-size:1.15rem;}
  .card-pain::before,.card-feat::before{content:"";display:block;inline-size:2.75rem;block-size:2.75rem;border-radius:12px;margin-block-end:.9rem;
    background:var(--ic) center/1.4rem no-repeat,linear-gradient(135deg,rgb(6 109 240 / .2),rgb(186 35 229 / .18));}
  .card-pain{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23066DF0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}
  .card-feat{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23066DF0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");}

  /* Llamada a la acción: grande, con brillo y flecha */
  .btn-cta{font-size:var(--step-1);padding:.9rem 1.75rem;min-block-size:60px;border-radius:999px;font-weight:700;letter-spacing:-.005em;
    box-shadow:0 10px 36px rgb(6 109 240 / .5),inset 0 1px 0 rgb(255 255 255 / .25);}
  .btn-cta::after{content:"→";margin-inline-start:.6rem;}
  .btn-cta:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 3px var(--ig-azul),0 10px 36px rgb(6 109 240 / .5);}
  .hero-cta .btn-ghost{font-size:var(--step-0);opacity:.9;}
  .cta-band .btn-cta{box-shadow:0 12px 40px rgb(1 3 38 / .4);}
  .btn-row,.hero-cta{gap:1rem;}
  @media (max-width:40rem){
    .btn-cta{inline-size:100%;justify-content:center;padding-inline:1.25rem;font-size:var(--step-0);}
    .btn-row{display:grid;}
  }
  @media (prefers-reduced-motion:no-preference){
    .btn-cta::after{transition:translate var(--t-fast);}
    .btn-cta:hover::after,.btn-cta:focus-visible::after{translate:5px 0;}
    .hero-cta .btn-cta{animation:cta-glow 3.2s ease-in-out infinite;}
    @keyframes cta-glow{50%{box-shadow:0 12px 52px rgb(186 35 229 / .55),inset 0 1px 0 rgb(255 255 255 / .25);}}
  }

  .mini-cta{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-block-start:3rem;
    padding:1.25rem 1.5rem;border:1px solid var(--line-strong);border-radius:var(--radius-lg);
    background:linear-gradient(135deg,rgb(6 109 240 / .14),rgb(186 35 229 / .1));}
  .mini-cta-text{margin:0;font-weight:600;font-size:var(--step-1);max-inline-size:34ch;text-wrap:balance;}
  .mini-cta .btn-cta{font-size:var(--step-0);padding:.9rem 1.5rem;}
  .mini-cta .btn-row{align-items:center;}

  /* Contenedor de diagramas */
  .viz-card{padding:clamp(1rem,3vw,2rem);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);}
  .viz-title{font-size:var(--step-1);margin-block-end:1rem;}

  /* Antes / Después más gráfico */
  .ba-col li{position:relative;padding-inline-start:3.1rem;}
  .ba-col li::before{position:absolute;inset-inline-start:1.15rem;inset-block-start:.85rem;font-weight:800;}
  .ba-before li::before{content:"✕";color:#E27A7A;}
  .ba-after li::before{content:"✓";color:var(--accent-text);}
  .ba-after{border-color:var(--accent2);box-shadow:0 0 0 1px rgb(6 109 240 / .25),0 18px 50px rgb(6 109 240 / .14);}
  .timeline{border-inline-start-color:var(--accent2);}
  .tl-item::before{inline-size:14px;block-size:14px;inset-inline-start:-8px;box-shadow:0 0 0 4px rgb(6 109 240 / .18);}

  /* Pie: cuatro columnas con aire */
  @media (width >= 900px){
    .foot .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;}
    .foot .foot-brand{grid-column:auto;}
  }
  .foot-cta .link-arrow{color:#fff;}
}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card:hover{transform:perspective(900px) rotateX(1.4deg) translateY(-4px);box-shadow:var(--shadow-2);}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .grid > .reveal:nth-child(3n+2){animation-range:entry 10% cover 26%;}
    .grid > .reveal:nth-child(3n+3){animation-range:entry 15% cover 30%;}
  }
}

/* ───────── QA visual v2 ───────── */
@layer components{
  /* Figura de retina: sin hueco, etiquetas legibles, contraste de lesiones */
  .fig-zone{stroke-opacity:.4;}
  .fig-hour{font-size:15px;opacity:.9;}
  .fig-axis{font-size:14px;opacity:.85;}
  .fig-zlabel text{font-size:13px;opacity:.72;}
  .fig-retina .fig-svg{max-inline-size:28rem;}
  .fig-key{font-size:var(--step-0);}
  .fig-key li{align-items:flex-start;}
  .fig-dot{inline-size:.9rem;block-size:.9rem;margin-block-start:.3rem;}
  .fig-key,.fig-cap,.fig-quote{min-inline-size:0;overflow-wrap:anywhere;}
  .fig-quote{font-size:var(--step-0);color:var(--fg);}
  @container (min-width: 46rem){
    .fig-retina{grid-template-columns:minmax(0,28rem) minmax(0,1fr);gap:1.5rem 3rem;justify-content:center;align-items:start;}
    .fig-retina .fig-svg{grid-row:span 2;max-inline-size:28rem;}
    .fig-retina .fig-key{align-self:end;}
    .fig-retina .fig-cap{align-self:start;}
  }
  @container (max-width: 34rem){
    .fig-hour{font-size:21px;}
    .fig-axis{font-size:19px;}
    .fig-zlabel text{font-size:17px;}
  }
}

/* ───────── QA visual v2b ───────── */
@layer components{
  /* Retina: dos columnas por viewport (un @container no puede dar estilo a su propio contenedor) */
  @media (min-width:62rem){
    .fig-retina{grid-template-columns:minmax(0,28rem) minmax(0,1fr);gap:1.5rem 3rem;justify-content:start;align-items:start;}
    .fig-retina .fig-svg{grid-row:span 2;max-inline-size:28rem;margin-inline:0;}
    .fig-retina .fig-key{align-self:end;}
    .fig-retina .fig-cap{align-self:start;}
  }
  .fig-zlabel text{font-size:14px;opacity:.8;}

  /* Tendencias: más grandes, ejes legibles, sin trazo en el texto */
  .tr-svg{max-inline-size:none;inline-size:100%;}
  .tr-tick,.tr-unit,.tr-x,.tr-targetl{font-size:14px;font-weight:600;}
  .tr-tick:not(.tr-t0):not(.tr-t1),.tr-x,.tr-targetl{fill:var(--fg);}
  text.tr-axis{stroke:none;fill:var(--fg-muted);font-size:14px;}
  .tr-line{stroke-width:3.5;}
  .tr-lbl{font-size:15px;font-weight:700;stroke:none;}
  .fig-trend .fig-quote{font-size:var(--step-0);}
  @container (max-width:34rem){
    .tr-tick,.tr-unit,.tr-x,.tr-targetl,text.tr-axis{font-size:19px;}
    .tr-lbl{font-size:20px;}
  }

  /* Dolores: 2x2, ícono distinto y contraste AA */
  .cols-pain{grid-template-columns:minmax(0,1fr);}
  @media (min-width:40rem){.cols-pain{grid-template-columns:repeat(2,minmax(0,1fr));}}
  .card-pain{min-inline-size:0;overflow-wrap:anywhere;}
  .card-pain::before{background:var(--ic) center/1.5rem no-repeat,rgb(6 109 240 / .14);border:1px solid rgb(11 79 196 / .35);}
  .card-pain{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4FC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}
  .card-pain:nth-child(2){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4FC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");}
  .card-pain:nth-child(3){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4FC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E");}
  .card-pain:nth-child(4){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4FC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E");}
  .card-pain:nth-child(n+5){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4FC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}
}

/* ───────── QA visual v2c ───────── */
@layer components{
  @media (min-width:48rem){.fig-trend{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:2rem 2.5rem;}}
  .light .tr-k1{background:#6B4FD8;}
  .light .tr-tick:not(.tr-t0):not(.tr-t1),.light .tr-x{fill:#1b1f3a;}
}

/* ───────── QA visual v2d ───────── */
@layer components{
  /* anywhere partía palabras ("Shaff-er"); break-word solo corta si no cabe */
  .fig-key,.fig-cap,.fig-quote,.card-pain{overflow-wrap:break-word;}
  .fig-trend .fig-key li{display:block;}
  .light .fig-key,.light .fig-quote{color:var(--fg);}
  .light text.tr-axis{fill:var(--fg);}
}

/* ───────── QA visual v2e ───────── */
@layer components{
  .fig-qname{font-size:13px;opacity:.85;}
  @container (max-width:34rem){
    .fig-zlabel text{font-size:19px;opacity:.85;}
    .fig-qname{font-size:16px;}
  }
}

/* ───────── QA visual v3: texto SVG legible en 320–390 px ───────── */
@layer components{
  .tr-svg{overflow:visible;}
  @media (max-width:30rem){
    .fig-retina .fig-axis{font-size:21px;}
    .fig-retina .fig-zlabel text{font-size:21px;}
    .fig-retina .fig-hour{font-size:22px;}
    .fig-gonio .fig-axis{font-size:20px;}
    .tr-tick,.tr-unit,.tr-x,.tr-targetl,text.tr-axis{font-size:22px;}
    .tr-lbl{font-size:23px;}
    .flow-v .flow-sub{font-size:15px;}
    .flow-v .flow-label{font-size:18px;}
  }
}

/* ───────── QA visual v4: tendencias y gonioscopia en móvil ───────── */
@layer components{
  @media (max-width:30rem){
    .tr-lbl{display:none;}
    .fig-gonio .fig-axis{font-size:22px;}
  }
}

/* ───────── QA visual v5: microtexto y contraste en secciones claras ───────── */
@layer components{
  .hero-note{font-size:var(--step-0);color:var(--fg-muted);font-weight:500;}
  .light .calc .hint,.light .calc-out div small{color:#4A5163;}
  .light .calc-field label{color:#1B2233;}
}

/* cierre-v2 */
.hero-media{position:relative;overflow:hidden;border-radius:1.25rem;}
.hero-video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;}
.hero-chips{margin-block-start:1.25rem;}
.video-card{max-inline-size:56rem;margin-inline:auto;}
.video-card video{display:block;inline-size:100%;block-size:auto;aspect-ratio:16/9;border-radius:1rem;background:#010326;}
.video-card figcaption{margin-block-start:.75rem;text-align:center;font-size:var(--step--1);color:var(--fg-muted);}
@media (prefers-reduced-motion:reduce){.hero-video{display:none;}}

/* ───────── QA visual v5: texto SVG >= 12 px efectivos a 320-384 px ───────── */
@layer components{
  @media (max-width:24rem){
    .tr-tick,.tr-unit,.tr-x,.tr-targetl,text.tr-axis{font-size:25px;}
    .fig-retina .fig-axis,.fig-retina .fig-zlabel text,.fig-retina .fig-hour{font-size:26px;}
    .fig-gonio .fig-axis,.fig-gonio .fig-qname{font-size:25px;}
  }
}

/* cierre-v3: titular balanceado y microtexto con contraste */
h1,h2,.hero-h{text-wrap:balance;}
.hero-h{max-inline-size:20ch;letter-spacing:-.025em;}
.hero-note{color:var(--fg-muted);font-size:var(--step-0);font-weight:500;}

/* cierre-v4: titular de portada mas compacto, sin palabra huerfana */
.hero-h{font-size:clamp(2.1rem,1.25rem + 3vw,3.6rem);max-inline-size:none;letter-spacing:-.02em;line-height:1.05;text-wrap:balance;}

/* cierre-v5: CTAs de portada en movil a ancho completo con separacion */
@media (max-width:40rem){.hero-cta{display:grid;gap:.75rem;}.hero-cta .btn{inline-size:100%;justify-content:center;text-align:center;}}

/* ───────── estilo-ig: línea visual del Instagram @igalenus ─────────
   Titular en dos niveles con la frase clave en cápsula, foto en marco de esquinas muy
   redondeadas, barra de acción con botón cuadrado de flecha y un acento cálido por sección.
   Azul (.cap-azul) = mensajes al médico. Violeta (.cap-violeta) = solo pacientes y portal.
   Los CTAs primarios siguen siendo .btn-cta con su data-cta único. */
:root{
  --ig-azul:#0B6EF0;
  --ig-violeta:#8A2BE2;
  --ig-marino:#010326;
  --ig-lavanda:#F5F0FD;
  --ig-crema:#FFF5EA;
  --ig-calido:#E9822B;
  --ig-radio:2rem;
}

/* 1 · Titular en dos niveles */
.tit-ig .tit-l1{display:block;margin-block-end:.3em;}
.cap-azul,.cap-violeta{
  display:inline-block;max-inline-size:100%;padding:.08em .5em .14em;border-radius:1.1em;
  color:#fff;font-weight:600;line-height:1.15;letter-spacing:-.015em;text-wrap:balance;
}
.cap-azul{background:var(--ig-azul);}
.cap-violeta{background:var(--ig-violeta);}
@media (max-width:24rem){.cap-azul,.cap-violeta{font-size:.8em;padding-inline:.4em;}}

/* 2 · Marco de foto con esquinas muy redondeadas */
.foto-marco{
  position:relative;inline-size:100%;aspect-ratio:var(--ar,4/5);
  border-radius:var(--ig-radio);overflow:hidden;background:var(--ig-lavanda);
  box-shadow:0 0 0 .4rem color-mix(in srgb,var(--acento-ig,var(--ig-azul)) 22%,transparent),0 24px 60px rgb(1 3 38 / .22);
}
.foto-marco img{display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:var(--pos,50% 25%);color:transparent;}
.foto-marco--hero{--ar:4/3;}
.foto-marco--ancho{--ar:16/9;max-inline-size:60rem;margin-inline:auto;}
@media (min-width:62rem){.foto-marco--hero{--ar:4/5;}}
/* La cabeza rompe el borde superior: solo con imagen de fondo transparente (webp con alfa). */
.foto-marco--rompe{overflow:visible;background:none;box-shadow:none;margin-block-start:3rem;}
.foto-marco--rompe::before{
  content:"";position:absolute;inset:18% 0 0 0;border-radius:var(--ig-radio);background:var(--ig-lavanda);
  box-shadow:0 0 0 .4rem color-mix(in srgb,var(--acento-ig,var(--ig-azul)) 22%,transparent);
}
.foto-marco--rompe img{position:relative;border-radius:0 0 var(--ig-radio) var(--ig-radio);object-fit:contain;object-position:50% 100%;}

/* 3 · Un acento por sección (cálido) */
.sec-ig{--acento-ig:var(--ig-azul);}
.sec-ig--violeta{--acento-ig:var(--ig-violeta);}
.sec-ig--calida{--acento-ig:var(--ig-calido);}
.sec-ig--crema{--bg:var(--ig-crema);background:var(--ig-crema);}
.sec-ig--lavanda{--bg:var(--ig-lavanda);background:var(--ig-lavanda);}

/* Foto + contenido en dos columnas */
.split-ig{display:grid;gap:2rem;align-items:center;}
.stack-ig{display:grid;gap:1rem;}
@media (min-width:62rem){
  .split-ig{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3.5rem;}
}

/* 4 · Barra de acción con botón cuadrado de flecha (CTAs secundarios) */
.barra-ig{
  display:inline-flex;align-items:center;justify-content:space-between;gap:1.25rem;min-block-size:56px;
  padding:.375rem .375rem .375rem 1.5rem;border-radius:999px;background:var(--ig-marino);color:#fff;
  border:1.5px solid #8E88B8;font-weight:700;font-size:var(--step-0);line-height:1.2;text-decoration:none;
  transition:box-shadow var(--t-fast),border-color var(--t-fast);
}
.barra-ig .barra-flecha{
  flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:.85rem;
  background:var(--acento-ig,var(--ig-azul));color:#fff;font-size:1.25rem;line-height:1;
}
.barra-ig .barra-flecha::before{content:"→";}
.barra-ig:hover{border-color:#C9C4EE;box-shadow:0 10px 30px rgb(1 3 38 / .35);}
.barra-ig:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 3px var(--ig-azul);}
@media (prefers-reduced-motion:no-preference){
  .barra-ig .barra-flecha{transition:transform var(--t-fast);}
  .barra-ig:hover .barra-flecha,.barra-ig:focus-visible .barra-flecha{transform:translateX(3px);}
}
@media (max-width:40rem){.barra-ig{display:flex;inline-size:100%;}}

/* Franja de logos de respaldo: 2 columnas en móvil, 4 en tableta, una sola fila en escritorio */
.faja-logos-lista{
  list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem 1rem;align-items:center;justify-items:center;
}
.faja-logos-lista li{display:flex;align-items:center;justify-content:center;min-block-size:48px;}
.faja-logos-lista img{display:block;inline-size:auto;max-inline-size:100%;block-size:auto;}
@media (min-width:40rem){.faja-logos-lista{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (min-width:72rem){.faja-logos-lista{grid-template-columns:repeat(8,auto);justify-content:space-between;}}

/* cierre-v6 · móvil: las rejillas de una columna no deben crecer más que el viewport */
.hero-grid,.split,.split-ig{grid-template-columns:minmax(0,1fr);}
.hero-grid>*,.split>*,.split-ig>*,.grid>*{min-inline-size:0;}
@media (min-width:62rem){
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .split-ig{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3.5rem;}
}
.foto-marco{max-inline-size:100%;}
.tit-ig,.hero-h{overflow-wrap:anywhere;}
/* QA mini-sites v1: pasos en cuadrícula y diagrama con contraste */
.timeline.tl-grid{border:0;margin-inline:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));}
.timeline.tl-grid .tl-item{display:block;padding:1.25rem 1.25rem 1.25rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);}
.timeline.tl-grid .tl-item::before{display:none;}
.timeline.tl-grid .tl-time{display:block;font-size:var(--step-2);line-height:1;margin-block-end:.5rem;}
.timeline.tl-grid .tl-body p{color:var(--fg);opacity:.86;}
@media (min-width:64rem){.timeline.tl-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.timeline.tl-grid .tl-item:last-child:nth-child(3n+1){grid-column:1/-1;display:flex;align-items:baseline;gap:1.25rem;}.timeline.tl-grid .tl-item:last-child:nth-child(3n+1) .tl-time{margin:0;}}
.viz-card--oscuro{background:rgb(8 22 70 / .85);border-color:rgb(120 170 255 / .45);}
.viz-card--oscuro .flow-node{fill:rgb(24 52 130 / .75);stroke:rgb(150 190 255 / .7);}
.viz-card--oscuro .flow-node-key{fill:rgb(6 109 240 / .35);stroke:#7DB4FF;}
.viz-card--oscuro .flow-badge{fill:rgb(6 109 240 / .45);stroke:#9CC4FF;}
.viz-card--oscuro .flow-step > g{color:#fff;}
.viz-card--oscuro .flow-label{fill:#fff;}
.viz-card--oscuro .flow-sub{fill:#D5DCF0;}
.viz-card--oscuro .flow-line{stroke:#9CC4FF;stroke-width:3;}
.viz-card--oscuro .flow-cap{color:#D5DCF0;}
/* QA mini-sites v2: rejillas sin fila huérfana */
.grid.g4{grid-template-columns:minmax(0,1fr);}
@media (width >= 36rem){.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (width >= 64rem){.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr));}}
.grid.g3-2{grid-template-columns:minmax(0,1fr);}
@media (width >= 40rem){.grid.g3-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid.g3-2>:last-child:nth-child(odd){grid-column:1/-1;}}
@media (width >= 64rem){.grid.g3-2{grid-template-columns:repeat(6,minmax(0,1fr));}.grid.g3-2>*{grid-column:span 2;}.grid.g3-2>:nth-child(3n+1):nth-last-child(2),.grid.g3-2>:nth-child(3n+2):last-child{grid-column:span 3;}}
@media (width >= 40rem){.cols-pain>:last-child:nth-child(odd){grid-column:1/-1;}}

/* QA mini-sites v3: 8 pasos en 4 columnas */
@media (width >= 64rem){.timeline.tl-grid.tl-4{grid-template-columns:repeat(4,minmax(0,1fr));}}
/* Fotos horizontales (16:9) en la portada de subespecialidad: encuadre ancho para no perder a las personas de los lados */
.foto-marco--hero.foto-marco--horiz{--ar:4/3;}
@media (min-width:62rem){.foto-marco--hero.foto-marco--horiz{--ar:3/2;}}

/* ═══════════════════════════════════════════════════════════════════════════
   ESCENA «dictado → nota → firma» · animada por scroll (heraldo, 2026-10-10)
   Bloque autocontenido: partial src/partials/figuras/escena-dictado.html
   Base = todo visible y en orden (sin soporte, sin JS, movimiento reducido).
   La animación solo existe dentro de @supports (animation-timeline:view())
   y prefers-reduced-motion:no-preference; el escenario queda fijo (sticky)
   mientras el desplazamiento avanza la escena.
   ═══════════════════════════════════════════════════════════════════════════ */
.esc{margin:0;}
.esc-stage{
  position:relative;display:flex;flex-direction:column;justify-content:center;color:#fff;
  padding:clamp(1rem,.6rem + 2vw,2rem);border-radius:var(--ig-radio,2rem);
  background:radial-gradient(120% 90% at 85% 0%,rgb(11 110 240 / .42),transparent 60%),linear-gradient(160deg,#010326,#0A1550);
  box-shadow:0 0 0 .4rem rgb(11 110 240 / .22),0 24px 60px rgb(1 3 38 / .28);
}
.esc-pasos{list-style:none;margin:0 0 .75rem;padding:0;display:flex;gap:.5rem;}
.esc-paso{
  flex:1;text-align:center;font-weight:700;font-size:.875rem;letter-spacing:.04em;line-height:1.2;
  padding:.45rem .5rem;border-radius:999px;color:#fff;background:#0B6EF0;
}
.esc-barra{block-size:3px;margin-block-end:1rem;border-radius:99px;background:rgb(255 255 255 / .16);overflow:hidden;}
.esc-barra span{display:block;block-size:100%;background:#7DB4FF;transform-origin:left center;}
.esc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;}
@media (min-width:48rem){.esc-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:1.5rem;align-items:stretch;}}

/* 1 · foto + onda de voz */
.esc-foto{position:relative;aspect-ratio:16/10;border-radius:1.25rem;overflow:hidden;background:var(--ig-lavanda,#F5F0FD);}
@media (min-width:48rem){.esc-foto{aspect-ratio:auto;min-block-size:22rem;}}
.esc-foto img{position:absolute;inset:0;display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 22%;color:transparent;}
.esc-onda{
  position:absolute;inset-inline:6%;inset-block-start:6%;display:flex;align-items:center;gap:.6rem;
  padding:.5rem .9rem;border-radius:999px;background:rgb(255 255 255 / .8);
  box-shadow:0 8px 24px rgb(1 3 38 / .18);backdrop-filter:blur(6px);
}
.esc-mic{flex:none;inline-size:1.5rem;block-size:1.5rem;fill:none;stroke:#0B6EF0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.esc-barras{flex:1;display:flex;align-items:center;gap:3px;block-size:2.25rem;}
.esc-barras i{flex:1;max-inline-size:6px;block-size:100%;border-radius:99px;background:linear-gradient(#0B6EF0,#8A2BE2);transform:scaleY(var(--a,.6));}

/* 2 · nota estructurada */
.esc-nota{display:flex;flex-direction:column;justify-content:space-between;gap:.7rem;padding:1.1rem;border-radius:1.25rem;background:var(--ig-crema,#FFF5EA);color:var(--ig-marino,#010326);}
.esc-fila{display:grid;grid-template-columns:6.8rem minmax(0,1fr);gap:.75rem;align-items:center;}
.esc-chip{justify-self:start;font-size:.8125rem;font-weight:700;line-height:1.2;padding:.3rem .7rem;border-radius:999px;color:#fff;}
.esc-chip--a{background:#0B6EF0;}
.esc-chip--b{background:#8A2BE2;}
.esc-chip--c{background:#E9822B;color:#010326;}
.esc-chip--d{background:#010326;}
.esc-lins{display:grid;gap:.35rem;}
.esc-lin{display:block;inline-size:var(--w,80%);block-size:.55rem;border-radius:99px;background:rgb(1 3 38 / .2);transform-origin:left center;}

/* 3 · revisión NOM-004 + sello de firma */
.esc-pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-block-start:.2rem;padding-block-start:.8rem;border-block-start:1px dashed rgb(1 3 38 / .28);}
.esc-nom{display:flex;align-items:center;gap:.65rem;}
.esc-anillo{flex:none;inline-size:3.4rem;block-size:3.4rem;}
.esc-anillo circle{fill:none;stroke-width:5;}
.esc-anillo-fondo{stroke:rgb(1 3 38 / .14);}
.esc-anillo-valor{stroke:#0B6EF0;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:8;transform:rotate(-90deg);transform-origin:24px 24px;}
.esc-anillo text{font-size:15px;font-weight:800;fill:#010326;stroke:none;}
.esc-nom-txt{display:flex;flex-direction:column;line-height:1.25;}
.esc-nom-txt b{font-size:.95rem;color:#010326;}
.esc-nom-txt small{font-size:.75rem;color:#4A5168;}
.esc-sello{display:flex;flex-direction:column;align-items:center;gap:.1rem;}
.esc-sello svg{inline-size:3.75rem;block-size:3.75rem;fill:none;stroke:#8A2BE2;stroke-width:3;transform:rotate(-6deg);}
.esc-sello svg path{stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}
.esc-sello span{font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6A1FB8;}
.esc-aviso{margin:0;font-size:.9rem;font-weight:600;}

/* Animación ligada al scroll: el escenario queda fijo y la escena avanza con el desplazamiento */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .esc-track{view-timeline:--esc block;block-size:var(--esc-alto,260vh);}
    .esc-stage{position:sticky;inset-block-start:5.5rem;}
    .esc-paso--2,.esc-paso--3,.esc-barra span,.esc-barras i,.esc-onda,.esc-foto img,.esc-chip,.esc-lin,.esc-nom,.esc-anillo-valor,.esc-sello,.esc-aviso{
      animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--esc;
    }
    .esc-barra span{animation-name:esc-barra;animation-range:contain 0% contain 92%;}
    .esc-paso--2{animation-name:esc-paso;animation-range:contain 28% contain 38%;}
    .esc-paso--3{animation-name:esc-paso;animation-range:contain 62% contain 72%;}
    .esc-foto img{animation-name:esc-zoom;animation-range:contain 0% contain 100%;}
    .esc-barras i{animation-name:esc-onda;animation-range:contain calc(var(--i,0) * .15%) contain calc(36% + var(--i,0) * .15%);}
    .esc-onda{animation-name:esc-onda-fuera;animation-range:contain 34% contain 44%;}
    .esc-chip{animation-name:esc-chip;animation-range:contain calc(30% + var(--r,0) * 6%) contain calc(37% + var(--r,0) * 6%);}
    .esc-lin{animation-name:esc-linea;animation-range:contain calc(33% + var(--r,0) * 6% + var(--l,0) * 2.5%) contain calc(43% + var(--r,0) * 6% + var(--l,0) * 2.5%);}
    .esc-nom{animation-name:esc-aparece;animation-range:contain 62% contain 70%;}
    .esc-anillo-valor{animation-name:esc-anillo;animation-range:contain 64% contain 78%;}
    .esc-sello{animation-name:esc-sello;animation-range:contain 78% contain 90%;}
    .esc-aviso{animation-name:esc-aparece;animation-range:contain 84% contain 94%;}

    @keyframes esc-barra{from{transform:scaleX(0);}to{transform:scaleX(1);}}
    @keyframes esc-paso{from{opacity:.45;background-color:rgb(255 255 255 / .1);}to{opacity:1;background-color:#0B6EF0;}}
    @keyframes esc-zoom{from{transform:scale(1.08);}to{transform:scale(1);}}
    @keyframes esc-onda{
      0%{transform:scaleY(.12);}
      18%{transform:scaleY(var(--a,.6));}
      40%{transform:scaleY(calc(var(--a,.6) * .4 + .1));}
      62%{transform:scaleY(var(--a,.6));}
      82%{transform:scaleY(calc(var(--a,.6) * .55 + .1));}
      100%{transform:scaleY(.14);}
    }
    @keyframes esc-onda-fuera{from{opacity:1;translate:0 0;}to{opacity:0;translate:0 -.6rem;}}
    @keyframes esc-chip{from{opacity:.2;translate:0 .4rem;}to{opacity:1;translate:0 0;}}
    @keyframes esc-linea{from{transform:scaleX(0);}to{transform:scaleX(1);}}
    @keyframes esc-aparece{from{opacity:0;translate:0 .6rem;}to{opacity:1;translate:0 0;}}
    @keyframes esc-anillo{from{stroke-dashoffset:100;}to{stroke-dashoffset:8;}}
    @keyframes esc-sello{
      from{opacity:0;transform:scale(1.8) rotate(-18deg);}
      60%{opacity:1;}
      to{opacity:1;transform:scale(1) rotate(0deg);}
    }
  }
}
@supports not (animation-timeline:view()){
  .esc-track{block-size:auto;}
  .esc-stage{position:relative;min-block-size:0;}
}
/* ═════════════════════════ fin escena dictado → nota → firma ═════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   CAPAS · profundidad (heraldo, 2026-10-10)
   Base = escena completa y estática (sin JS, sin soporte, movimiento reducido).
   El JS solo escribe --px (puntero) y --p (avance por scroll) en .capas; cada
   capa los consume con su propia profundidad --d (px). Solo transform/opacity.
   Capas: fondo orgánico · marco con foto desenfocada · sujeto recortado que
   rompe el marco · esferas de luz.
   ═══════════════════════════════════════════════════════════════════════════ */
.capas{
  --px:0;--py:0;--p:0;
  position:relative;margin:0;inline-size:100%;aspect-ratio:var(--ar,6/5);isolation:isolate;
  overflow:visible;
}
.capas>*{position:absolute;pointer-events:none;}
.capa-mov{transform:translate3d(calc(var(--px) * var(--d,0) * 1px),calc(var(--p) * var(--d,0) * 1px),0);}

.capas-fondo{inset:0;z-index:-1;}
.capas-blob{position:absolute;display:block;aspect-ratio:1;border-radius:58% 42% 55% 45% / 48% 56% 44% 52%;}
.capas-blob--a{inline-size:56%;inset-block-start:-2%;inset-inline-start:0;background:radial-gradient(circle at 35% 35%,#c9c2f7,#8f86e6 70%);opacity:.7;}
.capas-blob--b{inline-size:36%;inset-block-start:0;inset-inline-end:3%;border-radius:44% 56% 40% 60% / 55% 42% 58% 45%;background:radial-gradient(circle at 40% 40%,#fbd9c4,#f3b99a 75%);opacity:.85;}

.capas-marco{
  inset:var(--marco-top,38%) 0 0 0;border-radius:var(--ig-radio);overflow:hidden;background:var(--ig-lavanda);
  box-shadow:0 0 0 .3rem rgb(243 185 154 / .38),0 24px 60px rgb(1 3 38 / .3);
}
.capas-marco img{display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:var(--pos,50% 40%);filter:blur(5px) saturate(.9) brightness(1.3) contrast(.85);transform:scale(1.08);color:transparent;}
.capas-marco::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(255 245 234 / .5),rgb(243 185 154 / .28));}

.capas-sujeto{
  inset-inline:var(--sujeto-x,-6%);inset-block-end:0;inline-size:calc(100% - 2 * var(--sujeto-x,-6%));block-size:var(--sujeto-h,100%);max-inline-size:none;
  object-fit:contain;object-position:50% 100%;z-index:2;
  filter:drop-shadow(0 26px 24px rgb(30 20 90 / .32)) drop-shadow(-3px -1px 5px rgb(255 236 220 / .2));
}
.capas-flota{inset:0;z-index:3;}
.capas-flota i{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgb(255 255 255 / .95),rgb(255 236 220 / .55) 55%,rgb(243 185 154 / .15) 100%);
  filter:blur(3px);box-shadow:0 18px 40px -14px rgb(40 30 110 / .25);
}
.capas-flota i:nth-child(1){inline-size:9%;aspect-ratio:1;inset-inline-end:10%;inset-block-end:34%;}
.capas-flota i:nth-child(2){inline-size:6%;aspect-ratio:1;inset-inline-start:8%;inset-block-start:38%;filter:blur(5px);}

/* Entrada escalonada al cargar: solo opacity/translate, sujeta a movimiento permitido */
@media (prefers-reduced-motion:no-preference){
  .capas-marco,.capas-sujeto,.capas-flota{animation:capas-in .9s cubic-bezier(.2,.7,.2,1) both;}
  .capas-sujeto{animation-delay:.15s;}
  .capas-flota{animation-delay:.35s;}
  @keyframes capas-in{from{opacity:0;translate:0 1.5rem;}to{opacity:1;translate:0 0;}}
}
@media (min-width:62rem){.capas{--ar:1/1;--marco-top:36%;}}
@media (prefers-reduced-motion:reduce){.capa-mov{transform:none;}}
/* ═════════════════════════ fin capas ═════════════════════════ */

/* capas: ronda 2 (QA) - en escritorio de poca altura el CTA debe quedar mas arriba */
@media (min-width:62rem) and (max-height:860px){.hero{padding-block-start:7.5rem;}}
/* capas: ronda 2 (QA) - movil: menos chips para que la escena asome sobre la barra fija */
@media (max-width:40rem){.hero-chips>li:nth-child(n+4){display:none;}.hero{padding-block-end:2.5rem;}.hero-note{margin-block-end:0;}}

/* capas: ronda 3 (QA) - movil: sin chips y CTA secundario como enlace, para que la escena asome sobre la barra fija */
@media (max-width:40rem){.hero-chips{display:none;}.hero-cta .btn-ghost{background:none;border:0;box-shadow:none;min-block-size:44px;text-decoration:underline;text-underline-offset:.25em;}.hero-cta .btn-ghost svg,.hero-cta .btn-ghost .btn-ico,.hero-cta .btn-ghost .arrow{display:none;}.hero-note{margin-block-start:.5rem;}}

/* capas: ronda 4 (QA) - manchas suaves, secundario como enlace en movil, barra fija solo cuando el CTA del hero sale de pantalla */
.capas-blob{filter:blur(6px);}
.capas-blob--b{inset-block-start:-6%;inset-inline-end:0;inline-size:34%;opacity:.7;}
@media (max-width:40rem){
  .hero{padding-block-start:6rem;}
  .barra-ig{background:none;border:0;box-shadow:none;justify-content:center;min-block-size:44px;text-decoration:underline;text-underline-offset:.25em;}
  .barra-ig .barra-flecha{display:none;}
  .hero-cta{gap:.25rem;}
  .sticky-cta{transition:transform .25s ease,opacity .25s ease;}
  html.hero-cta-on .sticky-cta{transform:translateY(110%);opacity:0;pointer-events:none;}
}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none;}}

/* capas: ronda 5 (QA) - durazno mas calido, contraste del microcopy, menos aire bajo el hero en movil */
.capas-blob--b{background:radial-gradient(circle at 40% 40%,#ffc9a0,#f59a64 78%);opacity:.8;}
.hero-note{color:var(--fg-muted);}
@media (max-width:40rem){.hero-note{margin-block-start:.25rem;}.hero{padding-block-end:1.25rem;}.capas{margin-block-start:-.5rem;}}
@media (min-width:62rem){.capas--hero{margin-block-start:-2rem;}}

/* capas: ronda 6 (QA) - menos aire en movil para subir la escena, subtitulo mas legible, manchas mas suaves, flecha del secundario discreta en escritorio */
.hero-sub{color:rgb(214 220 240 / .92);}
.capas-blob{filter:blur(12px);}
.capas-blob--b{opacity:.65;}
.hero-cta .barra-ig .barra-flecha{background:rgb(255 255 255 / .12);}
@media (max-width:40rem){
  .hero-sub{margin-block-start:1rem;}
  .hero-cta{margin-block-start:1.25rem;}
  .capas{margin-block-start:-1.25rem;}
}
@media (min-width:62rem){.capas--hero{margin-block-start:-4rem;}}

/* capas: secciones - misma escena del hero, mas baja; el sujeto rompe el marco por arriba */
.capas--sec{--ar:6/5;--marco-top:34%;--sujeto-x:-4%;}
.capas--centro{max-inline-size:36rem;margin-inline:auto;}
@media (min-width:62rem){.capas--sec{--ar:6/5;}}
.capas--sec .capas-blob--a{background:radial-gradient(circle at 35% 35%,#d6d0fa,#a79ff0 70%);}

/* capas: secciones ronda 2 (QA) - manchas de la paleta (lavanda y azul, sin durazno turbio), mas aire, escena mas alta y sticky en escritorio */
.capas--sec .capas-blob{filter:blur(16px);}
.capas--sec .capas-blob--a{opacity:.5;}
.capas--sec .capas-blob--b{inline-size:30%;inset-block-start:-4%;inset-inline-end:-2%;opacity:.4;background:radial-gradient(circle at 40% 40%,#cfd6ff,#8ea2f5 78%);}
.capas--sec{margin-block-end:1.5rem;}
.capas--sec .capas-sujeto{filter:drop-shadow(0 22px 22px rgb(10 12 60 / .38)) drop-shadow(-2px -1px 6px rgb(255 214 170 / .28));}
@media (min-width:62rem){
  .capas--sec{--ar:1/1;--marco-top:38%;}
  .split-ig>.capas--sec{align-self:start;position:sticky;inset-block-start:7rem;}
  .capas--centro{--ar:6/5;--marco-top:36%;max-inline-size:34rem;margin-block-end:2.5rem;}
}
@media (max-width:61.99rem){.capas--sec{margin-block-end:2rem;}}

/* capas: secciones ronda 3 (QA) - base del sujeto fundida, borde del marco liviano y frio, manchas de la paleta azul, marco mas alto en escritorio */
.capas--sec .capas-sujeto{-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 99%);mask-image:linear-gradient(180deg,#000 80%,transparent 99%);}
.capas--sec .capas-marco{box-shadow:0 0 0 1px rgb(160 170 255 / .28),0 24px 60px rgb(1 3 38 / .35);}
.capas--sec .capas-marco::after{background:linear-gradient(180deg,rgb(214 222 255 / .38),rgb(190 176 250 / .22));}
.capas--sec .capas-blob--a{background:radial-gradient(circle at 35% 35%,#8ea2f5,#5b5fd6 72%);opacity:.38;}
.capas--sec .capas-blob--b{background:radial-gradient(circle at 40% 40%,#b9a8ff,#7a5cf0 78%);opacity:.32;inline-size:34%;inset-inline-end:2%;}
.capas--sec .capas-sujeto{filter:drop-shadow(0 20px 20px rgb(10 12 60 / .4)) drop-shadow(-2px -1px 6px rgb(255 214 170 / .22)) saturate(.96);}
@media (min-width:62rem){
  .capas--sec{--marco-top:26%;--sujeto-x:-2%;}
  .capas--centro{--marco-top:28%;max-inline-size:40rem;}
}
@media (max-width:61.99rem){.capas--sec{margin-block-end:2.5rem;}}
.section[id]{scroll-margin-block-start:5rem;}

/* capas: secciones ronda 4 (QA) - el sujeto vuelve a romper el marco en escritorio, marco menos blanco (tinte azul hacia la base), borde con filo azul, manchas mas cerca */
@media (min-width:62rem){
  .capas--sec{--marco-top:38%;--sujeto-x:-2%;}
  .capas--centro{--marco-top:36%;}
}
.capas--sec .capas-marco img{filter:blur(5px) saturate(.85) brightness(.95) contrast(.9);}
.capas--sec .capas-marco::after{background:linear-gradient(180deg,rgb(190 200 255 / .3),rgb(48 56 150 / .42));}
.capas--sec .capas-marco{box-shadow:0 0 0 1px rgb(150 165 255 / .5),0 0 40px rgb(110 120 240 / .22),0 24px 60px rgb(1 3 38 / .35);}
.capas--sec .capas-blob--a{inset-inline-start:6%;inset-block-start:10%;opacity:.5;}
.capas--sec .capas-blob--b{inset-inline-end:6%;inset-block-start:8%;opacity:.42;}
.capas--sec{margin-block-end:1.5rem;}

/* capas: secciones ronda 5 (QA) - fundido de la base mas largo, base del marco hacia el azul de la pagina (sin velo lechoso), sombra de contacto, bokeh claro atenuado */
.capas--sec .capas-sujeto{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,rgb(0 0 0 / .6) 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 68%,rgb(0 0 0 / .6) 84%,transparent 100%);}
.capas--sec .capas-marco::after{background:linear-gradient(180deg,rgb(190 200 255 / .28) 0%,rgb(60 70 170 / .4) 55%,rgb(8 10 60 / .88) 100%);}
.capas--sec .capas-marco img{filter:blur(6px) saturate(.8) brightness(.88) contrast(.9);}
.capas--sec .capas-flota i:nth-child(1){opacity:.55;}

/* capas: secciones ronda 6 (QA) - interior del marco mas oscuro y entintado de azul, fundido de base mas largo, luz calida ambar tras los hombros, columna sticky centrada en escritorio */
.capas--sec .capas-marco img{filter:blur(6px) saturate(.85) brightness(.68) contrast(.95);}
.capas--sec .capas-marco::after{background:linear-gradient(180deg,rgb(120 130 210 / .3) 0%,rgb(40 48 140 / .5) 45%,rgb(8 10 60 / .95) 100%);}
.capas--sec .capas-marco::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 55% 45% at 50% 38%,rgb(255 190 140 / .34),transparent 70%);mix-blend-mode:soft-light;}
.capas--sec .capas-sujeto{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgb(0 0 0 / .55) 76%,transparent 95%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgb(0 0 0 / .55) 76%,transparent 95%);filter:drop-shadow(0 20px 20px rgb(10 12 60 / .4)) drop-shadow(-2px -1px 7px rgb(255 190 140 / .4)) saturate(1) brightness(.95);}
.capas--sec .capas-blob--b{opacity:.3;}
@media (min-width:62rem){
  .split-ig>.capas--sec{inset-block-start:max(7rem,calc(50vh - 15rem));}
  .capas--centro{margin-block-end:1.25rem;}
}

/* capas: secciones ronda 7 (QA) - luz calida mas visible tras los hombros, orbes claros atenuados, halo violeta mas discreto, columna sticky un poco mas arriba */
.capas--sec .capas-marco::before{background:radial-gradient(ellipse 60% 50% at 50% 40%,rgb(255 176 120 / .3),transparent 72%);mix-blend-mode:normal;}
.capas--sec .capas-flota i{opacity:.35;}
.capas--sec .capas-blob--b{opacity:.22;}
@media (min-width:62rem){
  .split-ig>.capas--sec{inset-block-start:max(6.5rem,calc(50vh - 17rem));}
}

/* capas: secciones ronda 8 (QA) - interior del marco mas oscuro y azul (sin velo lechoso), luz calida mas intensa tras los hombros, orbes claros casi fuera */
.capas--sec .capas-marco{background:#1b2368;}
.capas--sec .capas-marco img{filter:blur(6px) saturate(.8) brightness(.5) contrast(1);}
.capas--sec .capas-marco::after{background:linear-gradient(180deg,rgb(34 44 130 / .55) 0%,rgb(40 48 140 / .55) 45%,rgb(8 10 60 / .95) 100%);}
.capas--sec .capas-marco::before{background:radial-gradient(ellipse 60% 50% at 50% 42%,rgb(255 170 110 / .5),transparent 72%);}
.capas--sec .capas-flota i{opacity:.15;}
@media (min-width:62rem){
  .capas--centro{margin-block-end:.5rem;}
  .capas--sec .capas-blob--b{display:none;}
}

/* capas: secciones ronda 9 (QA) - luz calida visible a los lados de los hombros (la figura la tapaba al centro), halo difuso en vez de disco, marco que se disuelve en la base (sin caja) */
.capas--sec .capas-marco::before{background:radial-gradient(ellipse 85% 55% at 50% 52%,rgb(255 160 100 / .62),rgb(255 140 90 / .22) 55%,transparent 80%);mix-blend-mode:screen;}
.capas--sec .capas-blob{filter:blur(22px);}
.capas--sec .capas-marco{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);}
.capas--sec .capas-marco img{filter:blur(6px) saturate(.8) brightness(.46) contrast(1);}
@media (min-width:62rem){
  .split-ig>.capas--sec{inset-block-start:max(6.5rem,calc(50vh - 15rem));}
}

/* capas: secciones ronda 10 (QA) - luz calida ambar ENTRE el marco y el sujeto (a los lados de los hombros, fuera del marco), marco con mascara tambien en los costados superiores, halo mas ancho y suave, margen derecho para el boton de WhatsApp */
.capas--sec::before{content:"";position:absolute;inset:auto -10% 6% -10%;block-size:58%;z-index:1;pointer-events:none;background:radial-gradient(ellipse 48% 50% at 50% 48%,rgb(255 165 105 / .5),rgb(255 140 90 / .18) 55%,transparent 75%);filter:blur(16px);mix-blend-mode:screen;}
.capas--sec .capas-marco{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect;}
.capas--sec .capas-blob{filter:blur(34px);opacity:.55;}
.capas--sec .capas-marco img{filter:blur(6px) saturate(.8) brightness(.4) contrast(1);}
@media (min-width:62rem){
  .split-ig>*:last-child{padding-inline-end:4.5rem;}
}

/* capas: secciones ronda 11 (QA) - se quita la capa 'screen' dentro del marco (era la que daba el velo lechoso/rosado); la luz ambar pasa a mezcla normal fuera del marco; marco con fondo azul profundo; columna sticky un poco mas abajo */
.capas--sec .capas-marco::before{display:none;}
.capas--sec .capas-marco{background:#121a5e;}
.capas--sec::before{background:radial-gradient(ellipse 48% 50% at 50% 48%,rgb(255 160 90 / .55),rgb(255 140 80 / .2) 55%,transparent 75%);mix-blend-mode:normal;}
.capas--sec .capas-flota i{opacity:.08;}
@media (min-width:62rem){
  .split-ig>.capas--sec{inset-block-start:max(6.5rem,calc(50vh - 12rem));}
}

/* topbar al estilo gbook + escena de clínicas a pantalla completa (heraldo, 2026-10-10) */
.nav{background:rgb(1 3 38 / .34);border-block-end-color:transparent;transition:background-color .3s var(--ease,ease),border-color .3s var(--ease,ease),box-shadow .3s var(--ease,ease);}
.nav::after{opacity:0;transform:scaleX(.2);transform-origin:left center;transition:opacity .3s ease,transform .5s var(--ease,ease);}
.nav.scrolled,html.nav-open .nav{background:rgb(1 3 38 / .92);border-block-end-color:rgb(255 255 255 / .1);box-shadow:0 10px 30px -18px rgb(1 3 38 / .7);}
.nav.scrolled::after,html.nav-open .nav::after{opacity:1;transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){.nav,.nav::after{transition:none;}}

.esc-stage{min-block-size:calc(100svh - 7.5rem);}
.esc-paso{background:transparent;border-radius:0;text-align:left;padding:.25rem 0 .5rem;color:rgb(255 255 255 / .92);border-block-end:3px solid #7DB4FF;pointer-events:none;cursor:default;}
.esc-pasos{counter-reset:p;gap:1rem;}
.esc-paso::before{counter-increment:p;content:counter(p) "  ";opacity:.6;font-weight:600;}
.esc-cue{display:none;margin:0 0 .6rem;align-items:center;justify-content:center;gap:.6rem;font-size:.85rem;font-weight:600;color:#BBD7FF;}
.esc-cue i{inline-size:.6rem;block-size:.6rem;border:solid currentColor;border-width:0 2px 2px 0;rotate:45deg;}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .esc-stage{inset-block-start:5rem;}
    .esc-cue{display:flex;animation:esc-cue-fuera linear both;animation-timeline:--esc;animation-range:contain 0% contain 14%;}
    .esc-cue i{animation:esc-cue-baja 1.4s ease-in-out infinite;}
    .esc-paso{animation-name:esc-paso2;}
    @keyframes esc-paso2{from{opacity:.45;border-block-end-color:rgb(255 255 255 / .18);}to{opacity:1;border-block-end-color:#7DB4FF;}}
    @keyframes esc-cue-fuera{from{opacity:1;}to{opacity:0;}}
    @keyframes esc-cue-baja{0%,100%{translate:0 -.2rem;}50%{translate:0 .25rem;}}
  }
}

/* topbar + escena clínicas · ronda 2 (heraldo, 2026-10-10): más contraste, indicación de scroll evidente, pasos como indicador */
.nav-link,.nav-menu-btn{color:rgb(255 255 255 / .92);font-weight:500;}
.nav-actions .btn-ghost{border:1.5px solid rgb(255 255 255 / .5);}
.esc-paso{color:rgb(255 255 255 / .8);user-select:none;-webkit-user-select:none;}
.esc-cue{font-size:1rem;color:#fff;padding:.45rem 1rem;margin-inline:auto;inline-size:fit-content;border-radius:999px;background:rgb(125 180 255 / .22);border:1px solid rgb(187 215 255 / .5);}
.esc-cue i{inline-size:.7rem;block-size:.7rem;}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes esc-paso2{from{opacity:.7;border-block-end-color:rgb(255 255 255 / .3);}to{opacity:1;border-block-end-color:#7DB4FF;}}
  }
}
.esc-nota .esc-chip--c{color:#010326;}

/* topbar + escena clínicas · ronda 3 (heraldo, 2026-10-10): indicación de scroll con contraste, una sola barra de avance, tarjeta de nota con esqueleto visible, menos aire */
.nav.scrolled,html.nav-open .nav{background:rgb(9 15 74 / .95);box-shadow:0 12px 32px -16px rgb(1 3 38 / .9),0 1px 0 rgb(125 180 255 / .18);}
.nav::after{block-size:3px;}
.nav-link,.nav-menu-btn{font-size:.97rem;font-weight:600;color:#fff;}
.esc-stage{justify-content:flex-start;}
.esc-paso{border-block-end:0;padding:.2rem 0 .35rem;color:rgb(255 255 255 / .82);font-size:.9rem;}
.esc-paso--1{color:#fff;}
.esc-barra{block-size:4px;margin-block-end:.9rem;background:rgb(255 255 255 / .22);}
.esc-cue{font-size:1.05rem;font-weight:700;color:#fff;background:rgb(255 255 255 / .16);border:1.5px solid rgb(255 255 255 / .75);box-shadow:0 0 0 .3rem rgb(125 180 255 / .18);}
.esc-cue i{inline-size:.8rem;block-size:.8rem;border-width:0 3px 3px 0;}
.esc-grid{flex:1 1 auto;}
.esc-nota{justify-content:space-evenly;}
.esc-nota .esc-lin{background:rgb(1 3 38 / .26);}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes esc-paso2{from{opacity:.78;}to{opacity:1;}}
    @keyframes esc-chip{from{opacity:.55;translate:0 .3rem;}to{opacity:1;translate:0 0;}}
    @keyframes esc-linea{from{transform:scaleX(.22);}to{transform:scaleX(1);}}
  }
}
@media (max-width:47.99rem){.esc-stage{padding-block-start:.9rem;}.esc-foto{aspect-ratio:4/3;}}

/* topbar + escena clínicas · ronda 4 (heraldo, 2026-10-10): nota con texto de ejemplo, indicación de scroll que no se desvanece pronto, pasos coherentes, respiro sobre la barra fija */
.esc-txt{display:block;font-size:.95rem;font-weight:500;line-height:1.35;color:#010326;}
.esc-fila{align-items:start;}
.esc-nota{justify-content:space-between;gap:.9rem;}
.esc-chip--d{color:#fff;}
.esc-nom-txt small{color:#3A4158;font-size:.8rem;}
.esc-cue{background:rgb(125 180 255 / .32);border:2px solid #fff;color:#fff;text-shadow:0 1px 2px rgb(1 3 38 / .6);}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .esc-cue{animation-range:contain 22% contain 34%;}
    .esc-txt{animation:esc-aparece linear both;animation-timeline:--esc;animation-range:contain calc(33% + var(--r,0) * 6%) contain calc(40% + var(--r,0) * 6%);}
    .esc-paso--1{animation:esc-paso-fin linear both;animation-timeline:--esc;animation-range:contain 28% contain 38%;}
    .esc-paso--2{animation:esc-paso-fin linear both;animation-timeline:--esc;animation-range:contain 62% contain 72%;}
    @keyframes esc-paso-fin{from{opacity:1;}to{opacity:.55;}}
  }
}
@media (max-width:47.99rem){.esc-stage{min-block-size:calc(100svh - 11.5rem);}.esc-txt{font-size:.9rem;}.esc-fila{grid-template-columns:5.6rem minmax(0,1fr);}}

/* topbar + escena clínicas · ronda 5 (heraldo, 2026-10-10): pasos con estado propio (activo coherente con el avance), texto de la nota presente desde el inicio en tono tenue, móvil compacto para que quepa sobre la barra fija */
.esc-paso{color:#fff;}
.esc-paso--1,.esc-paso--2,.esc-paso--3{font-weight:700;}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .esc-paso--1{animation:esc-p1 linear both;animation-timeline:--esc;animation-range:contain 26% contain 38%;}
    .esc-paso--2{animation:esc-p2 linear both;animation-timeline:--esc;animation-range:contain 26% contain 74%;}
    .esc-paso--3{animation:esc-p3 linear both;animation-timeline:--esc;animation-range:contain 60% contain 74%;}
    @keyframes esc-p1{from{opacity:1;}to{opacity:.5;}}
    @keyframes esc-p2{0%{opacity:.5;}25%{opacity:1;}75%{opacity:1;}100%{opacity:.5;}}
    @keyframes esc-p3{from{opacity:.5;}to{opacity:1;}}
    @keyframes esc-aparece-txt{from{opacity:.3;translate:0 .4rem;}to{opacity:1;translate:0 0;}}
    .esc-txt{animation-name:esc-aparece-txt;}
  }
}
@media (max-width:47.99rem){
  .esc-stage{min-block-size:0;padding-block-end:4.5rem;}
  .esc-foto{aspect-ratio:2/1;}
  .esc-nota{padding:.85rem;gap:.55rem;}
  .esc-cue{margin-block-end:.4rem;font-size:.95rem;}
  .esc-pasos{margin-block-end:.4rem;}
  .esc-pie{padding-block-start:.5rem;}
  .esc-anillo{inline-size:2.8rem;block-size:2.8rem;}
  .esc-sello svg{inline-size:3rem;block-size:3rem;}
}
.esc-nom-txt small{font-size:.85rem;color:#2F3650;}
.esc-stage{padding-block-end:clamp(1rem,.6rem + 2vw,2rem);}

/* topbar + escena clínicas · ronda 6 (heraldo, 2026-10-10): pasos inactivos más legibles, texto de nota con más contraste, filas que reparten la altura, foto reencuadrada para ver a ambas personas */
.esc-txt{color:#010326;}
.esc-fila{grid-template-columns:7.6rem minmax(0,1fr);align-items:center;}
@media (min-width:48rem){.esc-nota{justify-content:space-between;}.esc-fila{flex:1 1 auto;}.esc-grid{margin-block-start:0;}}
.esc-foto img{object-position:50% 30%;}
.esc-nom-txt small{font-size:.875rem;color:#2F3650;}
.esc-sello span{font-size:.875rem;}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes esc-p1{from{opacity:1;}to{opacity:.72;}}
    @keyframes esc-p2{0%{opacity:.72;}25%{opacity:1;}75%{opacity:1;}100%{opacity:.72;}}
    @keyframes esc-p3{from{opacity:.72;}to{opacity:1;}}
    @keyframes esc-aparece-txt{from{opacity:.55;translate:0 .4rem;}to{opacity:1;translate:0 0;}}
  }
}
@media (max-width:47.99rem){.esc-foto{aspect-ratio:16/10;}.esc-fila{grid-template-columns:5.8rem minmax(0,1fr);}.esc-stage{padding-block-end:4.5rem;}}

/* topbar + escena clínicas · ronda 7 (heraldo, 2026-10-10): en móvil la escena volvía a pasar del alto útil (r6); foto 16/9 con encuadre alto y filas más compactas */
@media (max-width:47.99rem){.esc-foto{aspect-ratio:16/9;}.esc-foto img{object-position:50% 22%;}.esc-nota{padding:.75rem;gap:.45rem;}.esc-txt{font-size:.875rem;line-height:1.3;}.esc-stage{padding-block-end:1rem;}}

/* topbar + escena clínicas · ronda 8 (heraldo, 2026-10-10): foto móvil más alta para no cortar a la paciente, pasos inactivos más claros, respiro bajo el stepper en escritorio, WhatsApp sin invadir el marco */
@media (max-width:47.99rem){.esc-foto{aspect-ratio:3/2;}.esc-foto img{object-position:50% 14%;}}
@media (min-width:48rem){.esc-barra{margin-block-end:.5rem;}.esc-cue{margin-block-end:.5rem;}.esc-stage{margin-inline-end:3.5rem;}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes esc-p1{from{opacity:1;}to{opacity:.8;}}
    @keyframes esc-p2{0%{opacity:.8;}25%{opacity:1;}75%{opacity:1;}100%{opacity:.8;}}
    @keyframes esc-p3{from{opacity:.8;}to{opacity:1;}}
  }
}

/* topbar + escena clínicas · ronda 9 (heraldo, 2026-10-10): marco centrado en escritorio, pie de la nota visible desde el inicio (tenue), pasos inactivos más legibles, indicación de scroll sin aspecto de botón, foto móvil que muestra a la paciente */
@media (min-width:48rem){.esc-stage{margin-inline-end:0;}}
@media (max-width:47.99rem){.esc-foto img{object-position:50% 42%;}.esc-foto{aspect-ratio:4/3;}.esc-stage{padding-block-end:.75rem;}}
.esc-cue{background:transparent;border:0;box-shadow:none;padding:.2rem 0;font-weight:600;text-shadow:none;pointer-events:none;cursor:default;user-select:none;-webkit-user-select:none;}
.esc-paso{color:#fff;opacity:.9;}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes esc-p1{from{opacity:1;}to{opacity:.88;}}
    @keyframes esc-p2{0%{opacity:.88;}25%{opacity:1;}75%{opacity:1;}100%{opacity:.88;}}
    @keyframes esc-p3{from{opacity:.88;}to{opacity:1;}}
    @keyframes esc-pie-pre{from{opacity:.38;translate:0 .4rem;}to{opacity:1;translate:0 0;}}
    @keyframes esc-sello-pre{from{opacity:.32;transform:scale(1.12) rotate(-10deg);}to{opacity:1;transform:scale(1) rotate(0deg);}}
    .esc-nom,.esc-aviso{animation-name:esc-pie-pre;}
    .esc-sello{animation-name:esc-sello-pre;}
  }
}

/* topbar + escena clínicas · ronda 10 (heraldo, 2026-10-10): en móvil la escena rozaba la barra fija (784 px vs 778 px); foto 3/2 con encuadre medio */
@media (max-width:47.99rem){.esc-foto{aspect-ratio:3/2;}.esc-foto img{object-position:50% 40%;}.esc-stage{padding-block-end:.5rem;}}

/* capas: secciones ronda 12 (heraldo, 2026-10-10) - «La solución»: sin orbes claros sueltos junto a la mano, menos aire entre subtítulo, escena y tarjetas */
.capas--sec .capas-flota{display:none;}
.capas--centro{margin-block-start:1.25rem;margin-block-end:.75rem;}
#sistema .lede{margin-block-end:0;}
@media (min-width:62rem){.capas--centro{margin-block-start:.5rem;margin-block-end:.5rem;}}

/* capas: secciones ronda 13 (heraldo, 2026-10-10) - «La solución»: el marco deja de leerse como caja (bordes fundidos con máscara, sin filo), una sola fuente de luz (se quita la segunda mancha), menos aire sobre la escena, margen de ancla bajo la barra */
#sistema{scroll-margin-block-start:5rem;}
.capas--centro .capas-marco{box-shadow:none;-webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 52%,#000 48%,rgb(0 0 0 / .55) 72%,transparent 100%);mask-image:radial-gradient(ellipse 72% 78% at 50% 52%,#000 48%,rgb(0 0 0 / .55) 72%,transparent 100%);}
.capas--centro .capas-blob--b{display:none;}
.capas--centro .capas-blob--a{inline-size:62%;inset-inline-start:19%;inset-block-start:4%;opacity:.5;}
.capas--centro{margin-block-start:-.5rem;}
@media (min-width:62rem){.capas--centro{margin-block-start:-2.5rem;}}
@media (max-width:61.99rem){.capas--centro{margin-block-end:1.5rem;}}

/* capas: secciones ronda 14 (heraldo, 2026-10-10) - «La solución»: se elimina la caja; el fondo es un solo resplandor radial sin bordes ni segunda luz, la médica queda sobre el azul de la página */
.capas--centro .capas-marco{-webkit-mask-image:none;mask-image:none;background:radial-gradient(ellipse 52% 58% at 50% 40%,rgb(122 110 240 / .42),rgb(70 80 210 / .2) 48%,transparent 74%);border-radius:0;box-shadow:none;overflow:visible;}
.capas--centro .capas-marco img,.capas--centro .capas-marco::before,.capas--centro .capas-marco::after{display:none;}
.capas--centro .capas-blob{display:none;}
.capas--centro{margin-block-end:2.5rem;}
@media (min-width:62rem){.capas--centro{margin-block-end:1.5rem;}}

/* capas: secciones ronda 15 (heraldo, 2026-10-10) - «La solución»: resplandor algo más vivo tras la cabeza, menos aire bajo la escena en escritorio */
.capas--centro .capas-marco{background:radial-gradient(ellipse 50% 56% at 50% 34%,rgb(132 120 245 / .55),rgb(76 86 215 / .26) 46%,transparent 74%);}
@media (min-width:62rem){.capas--centro{margin-block-end:.25rem;}}

/* capas: secciones ronda 16 (heraldo, 2026-10-10) - «La solución»: el resplandor pasaba a recortarse en el borde superior del marco (corte recto a la altura de la frente); ahora vive en la capa de fondo, que cubre toda la escena, y el marco se oculta */
.capas--centro .capas-marco{display:none;}
.capas--centro .capas-fondo{background:radial-gradient(ellipse 46% 52% at 50% 30%,rgb(132 120 245 / .55),rgb(76 86 215 / .26) 50%,transparent 76%);}
.capas--centro .capas-sujeto{filter:drop-shadow(0 18px 18px rgb(10 12 60 / .4)) saturate(.96);}

/* capas: secciones ronda 17 (heraldo, 2026-10-10) - «La solución»: el resplandor arrancaba con corte plano en el borde superior de la escena; ahora nace más abajo y se desvanece antes de tocarlo, con un solo tono frío (sin tinte cálido) */
.capas--centro .capas-fondo{background:radial-gradient(ellipse 44% 40% at 50% 46%,rgb(128 118 244 / .5),rgb(74 84 214 / .24) 52%,transparent 80%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 100%);}
.capas--centro .capas-sujeto{filter:drop-shadow(0 18px 18px rgb(10 12 60 / .4)) saturate(.88) hue-rotate(-6deg);}
@media (min-width:62rem){.capas--centro{margin-block-start:-3.5rem;margin-block-end:-.5rem;}}


/* ux: ronda 1 (heraldo) · barra superior, barra fija, teléfono horizontal, pie, foco y rendimiento (auditoría 02) */

/* H-02 · botón compacto «Crear cuenta» entre 760 y 999 px (antes solo había hamburguesa) */
.nav-cta-compact{display:none;margin-inline-start:auto;white-space:nowrap;min-block-size:44px;}
@media (width >= 760px) and (width < 1140px){
  .nav-cta-compact{display:inline-flex;align-items:center;}
  .nav-toggle{margin-inline-start:.25rem;}
}

/* H-19 / H-22 · el JS publica el alto real de la barra fija en --sticky-h */
html{scroll-padding-block-end:calc(var(--sticky-h,5rem) + 1rem);}
body{padding-block-end:var(--sticky-h,calc(4.75rem + env(safe-area-inset-bottom,0px)));}
@media (width >= 760px) and (not ((max-height:500px) and (orientation:landscape))){
  html{scroll-padding-block-end:1rem;}
  body{padding-block-end:0;}
}
/* La escena fijada termina contra el borde de la pantalla: sin este relleno el sello «FIRMADA» quedaba bajo la barra. */
.esc-track{padding-block-end:var(--sticky-h,0px);}

/* H-03 · barra fija: CTA con el ancho restante y WhatsApp como icono */
.sticky-cta{align-items:stretch;gap:.625rem;}
.sticky-cta .btn-primary{flex:1 1 0;min-inline-size:0;white-space:nowrap;justify-content:center;}
.sticky-wa{flex:none;display:grid;place-items:center;inline-size:54px;block-size:54px;border-radius:14px;border:2px solid #25D366;background:rgb(37 211 102 / .16);color:#25D366;transition:background-color var(--t-fast,.15s);}
.sticky-wa:hover{background:rgb(37 211 102 / .28);}
.sticky-wa svg{inline-size:26px;block-size:26px;fill:currentColor;}
/* Barra oculta mientras el CTA del hero está a la vista: también fuera del foco y del lector de pantalla. */
.sticky-cta{transition:transform .25s ease,opacity .25s ease;}
html.hero-cta-on .sticky-cta{transform:translateY(110%);opacity:0;pointer-events:none;visibility:hidden;transition:transform .25s ease,opacity .25s ease,visibility 0s linear .25s;}
@media (prefers-reduced-motion:reduce){.sticky-cta,html.hero-cta-on .sticky-cta{transition:none;}}

/* H-23 · la capa decorativa no debe interceptar clics (se superpone al CTA por el margen negativo) */
.capas{pointer-events:none;}

/* H-01 · menú móvil: Precios y Subespecialidades primero y con más peso; NOM-004 y Sobre iGalenus en bloque secundario */
.nav-mobile-scroll a.nav-mobile-primary,.nav-mobile-scroll .nav-mobile-primary>summary{font-size:1.2rem;font-weight:700;color:#fff;min-block-size:56px;}
.nav-mobile-scroll .nav-mobile-more{margin-block-start:1rem;padding-block-start:.25rem;border-block-start:1px solid rgb(255 255 255 / .16);}
.nav-mobile-scroll .nav-mobile-more a{font-size:.95rem;color:rgb(255 255 255 / .78);min-block-size:44px;border-block-end-color:transparent;}
.nav-mobile-label{color:rgb(255 255 255 / .62);}
.nav-mobile-cta{gap:.875rem;}
@media (max-height:450px){
  .nav-mobile-scroll a.nav-mobile-primary,.nav-mobile-scroll .nav-mobile-primary>summary{font-size:1.05rem;min-block-size:44px;}
}

/* H-16 · contraste del pie y encabezados h3 (antes h2) con el mismo aspecto */
.foot{--fg-muted:rgb(255 255 255 / .72);--fg-faint:rgb(255 255 255 / .6);}
.foot h3{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);font-weight:600;margin-block-end:1rem;font-family:Inter,sans-serif;}
.foot-subs a{padding-block:.6rem;}

/* Tamaños táctiles: 44 px en botones en pantallas pequeñas */
@media (max-width:61.99rem){.btn{min-block-size:44px;}}

/* Rendimiento: sin movimiento perpetuo */
@media (prefers-reduced-motion:no-preference){
  .hero-cta .btn-cta{animation:cta-glow 3.2s ease-in-out 3;}
  .visual-float img{animation:none;}
}

/* Escena de clínicas: la barra de avance solo existe si la animación ligada al scroll corre */
.esc-barra{display:none;}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){.esc-barra{display:block;}}
}

/* H-03 / H-18 · teléfono horizontal: barra fija activa, hero compacto, escena de clínicas sin anclado */
@media (max-height:500px) and (orientation:landscape){
  html:not(.nav-open) .sticky-cta{display:flex;}
  .wa-float{display:none;}
  .hero{padding-block:4.75rem 1rem;}
  .hero-sub{margin-block-start:.75rem;}
  .hero-cta{margin-block-start:1rem;}
  .esc-track{block-size:auto;}
  .esc-track .esc-stage{position:relative;inset-block-start:auto;min-block-size:0;}
  .esc-track .esc-stage,.esc-track .esc-stage *{animation:none;}
  .esc-foto{display:none;}
  .esc-barra,.esc-cue{display:none;}
}

/* ux: ronda 1b (heraldo) · contraste de .ba-head, etiqueta del bloque secundario del menú, enlaces táctiles del pie */
.ba-after .ba-head{color:#8DBBFF;}
.light .ba-after .ba-head{color:var(--accent-text);}
.nav-mobile-label{margin:.9rem 0 .15rem;padding-inline:.25rem;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.foot-subs a{display:inline-block;margin-inline-end:.5rem;}
.foot-brand p a{display:inline-block;padding-block:.5rem;}

/* ux: ronda 1c (heraldo) · teléfono horizontal: el CTA del hero entra en la primera pantalla (solo espaciado) */
@media (max-height:500px) and (orientation:landscape){
  .hero{padding-block:4.6rem .75rem;}
  .hero .badge{margin-block-end:.6rem;}
  .hero-h{font-size:clamp(1.7rem,1rem + 2.2vw,2.2rem);line-height:1.05;}
  .hero-sub{margin-block-start:.5rem;font-size:var(--step-0);}
  .hero-chips{display:none;}
  .hero-cta{margin-block-start:.75rem;gap:.5rem;}
  .hero-note{margin-block-start:.35rem;}
  .hero-grid{gap:1rem;}
}

/* home: reestructura ronda 1 (heraldo) */
.hero-h--mono,.hero-h--mono *{color:var(--fg);background:none;-webkit-text-fill-color:currentColor;}
.hero-cta{align-items:center;gap:1rem 1.5rem;}
.faja-logos{border-block:1px solid var(--line);}
.faja-logos .eyebrow{text-align:center;margin-block-end:.25rem;}
.faja-logos-nota{text-align:center;margin:0 auto 1.25rem;max-inline-size:60ch;}
.faja-logos-lista{list-style:none;padding:0;margin-inline:0;margin-block:0;align-items:center;gap:1rem 1.5rem;}
.faja-logos-lista li{min-block-size:36px;}
.faja-logos-lista img{block-size:34px;inline-size:auto;max-inline-size:100%;object-fit:contain;opacity:.75;}
@media (min-width:72rem){.faja-logos-lista{grid-template-columns:repeat(6,auto);}}
.cifras{list-style:none;margin:2rem 0 0;padding:1.25rem 0 0;border-block-start:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 3rem;}
.cifras li{display:flex;flex-direction:column;align-items:center;text-align:center;min-inline-size:8rem;}
.cifras strong{font-family:Archivo,sans-serif;font-size:var(--step-3);font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.cifras li>span{font-size:var(--step--1);color:var(--fg-muted);margin-block-start:.35rem;}
.cifras-fecha{text-align:center;margin-block-start:.75rem;}
.planes-home .price-card{block-size:100%;}
.planes-home .checks{margin:0;}
.unidades-ia{max-inline-size:70ch;}
.banda-optica{display:grid;gap:1rem 2rem;align-items:center;padding:1.25rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}
@media (min-width:60rem){.banda-optica{grid-template-columns:auto 1fr auto;}}
.banda-optica-t{margin:0;font-size:var(--step-0);}
.banda-pasos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;justify-content:space-between;}
.banda-pasos li{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;font-size:var(--step--1);min-inline-size:4.5rem;}
.norma-aviso{border-inline-start:3px solid var(--ig-azul,currentColor);padding:.5rem .9rem;background:var(--surface);border-radius:8px;max-inline-size:52ch;}

/* home: reestructura ronda 1 (heraldo) · «La solución» en 2x2 (cuatro tarjetas) */
.grid-2x2{grid-template-columns:1fr;}
@media (min-width:40rem){.grid-2x2{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* home: reestructura ronda 2 (heraldo) · pie sin choque con WhatsApp, contraste de la franja, tarjetas de plan alineadas, anclas bajo la barra */
@media (min-width:760px){.foot-bottom{padding-inline-end:5rem;}}
section[id]{scroll-margin-block-start:5.5rem;}
.faja-logos .eyebrow{color:var(--fg-muted);}
.faja-logos-nota,.cifras-fecha{color:var(--fg-muted);}
.planes-home .price-card{display:flex;flex-direction:column;}
.planes-home .price-card .btn-block{margin-block-start:auto;}

/* home: franja de respaldo con 7 logos a color (heraldo, 2026-10-10) · altura óptica por logo, sin cajas */
.faja-logos-lista{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.25rem 2.25rem;}
.faja-logos-lista li{min-block-size:0;}
.faja-logos-lista img{--k:.8;block-size:calc(var(--h) * var(--k) * 1px);inline-size:auto;max-inline-size:100%;opacity:1;}
@media (min-width:40rem){.faja-logos-lista img{--k:.9;}}
@media (min-width:72rem){.faja-logos-lista img{--k:1;}.faja-logos-lista{flex-wrap:nowrap;justify-content:space-between;}}
.lg-google,.lg-liigh{--h:60;}.lg-aws{--h:34;}.lg-stripe,.lg-bloquers{--h:30;}.lg-tec{--h:44;}.lg-nvidia{--h:42;}
.lg-stripe,.lg-liigh{border-radius:6px;}

/* ── Ronda 3 · pestañas con capturas reales en «La solución» (sin JS: radios + hermanos) ── */
.sis-tabs{position:relative;margin-block-start:2.5rem}
.sis-tabs>input{position:absolute;opacity:0;inline-size:1px;block-size:1px;pointer-events:none}
.sis-tabs-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:1rem}
.sis-tabs-nav label{cursor:pointer;padding:.6rem 1.1rem;border:1px solid var(--line-strong);border-radius:999px;font-weight:600;line-height:1.2;background:var(--surface);transition:background .2s,border-color .2s}
.sis-tabs-nav label:hover{background:var(--surface-hover)}
.sis-panel{display:none;margin:0}
.sis-panel img{display:block;inline-size:100%;block-size:auto;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-2);background:#fff}
.sis-panel figcaption{margin-block-start:.75rem;font-size:.95rem;opacity:.85;max-inline-size:60ch}
#st1:checked~.sis-tabs-nav label[for=st1],#st2:checked~.sis-tabs-nav label[for=st2],#st3:checked~.sis-tabs-nav label[for=st3],#st4:checked~.sis-tabs-nav label[for=st4]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
#st1:checked~.sis-panels #sp1,#st2:checked~.sis-panels #sp2,#st3:checked~.sis-panels #sp3,#st4:checked~.sis-panels #sp4{display:block}
#st1:focus-visible~.sis-tabs-nav label[for=st1],#st2:focus-visible~.sis-tabs-nav label[for=st2],#st3:focus-visible~.sis-tabs-nav label[for=st3],#st4:focus-visible~.sis-tabs-nav label[for=st4]{outline:3px solid var(--accent2);outline-offset:3px}

/* ── Punto 7 · banda de óptica rediseñada y «Cómo se siente» con scroll (heraldo, 2026-10-10) ── */
#dia{overflow-x:clip;}
.banda-optica{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);border:0;border-radius:var(--ig-radio,2rem);color:#fff;background:radial-gradient(120% 100% at 90% 0%,rgb(11 110 240 / .45),transparent 60%),linear-gradient(160deg,#010326,#0A1550);box-shadow:0 0 0 .35rem rgb(11 110 240 / .2),0 24px 60px rgb(1 3 38 / .28);}
@media (min-width:60rem){.banda-optica{grid-template-columns:minmax(0,1fr);}}
.banda-optica-t{margin:0;font-size:var(--step-1);max-inline-size:36ch;text-wrap:balance;color:#fff;}
.banda-optica-t strong{color:#fff;}
.banda-optica .link-arrow{color:#fff;justify-self:start;}
.bo-ruta{position:relative;}
.bo-ruta::before{content:"";position:absolute;inset:1.625rem auto 1.625rem calc(1.625rem - 1px);inline-size:2px;border-radius:99px;background:rgb(255 255 255 / .22);}
.bo-hilo{position:absolute;inset:1.625rem auto 1.625rem calc(1.625rem - 1px);inline-size:2px;border-radius:99px;background:linear-gradient(#0B6EF0,#8A2BE2);transform-origin:top;pointer-events:none;}
.banda-pasos{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;justify-content:normal;}
.banda-pasos li{position:relative;z-index:1;flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;text-align:start;font-size:var(--step-0);font-weight:700;min-inline-size:0;color:#fff;}
.banda-pasos li:nth-child(1){--i:0}.banda-pasos li:nth-child(2){--i:1}.banda-pasos li:nth-child(3){--i:2}.banda-pasos li:nth-child(4){--i:3}.banda-pasos li:nth-child(5){--i:4}
.banda-pasos .ico{flex:none;inline-size:3.25rem;block-size:3.25rem;margin:0;border-radius:50%;color:#fff;background:linear-gradient(135deg,#0B6EF0,#8A2BE2);box-shadow:0 0 0 .3rem #0A1550;}
.banda-pasos .ico svg{inline-size:1.5rem;block-size:1.5rem;}
.banda-pasos li:last-child .ico{color:#010326;background:linear-gradient(135deg,#E9822B,#F4B15C);}
@media (min-width:40rem){
  .banda-pasos{grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;}
  .banda-pasos li{flex-direction:column;text-align:center;gap:.6rem;font-size:var(--step--1);}
  .bo-ruta::before,.bo-hilo{inset:calc(1.625rem - 1px) 10% auto 10%;block-size:2px;inline-size:auto;}
  .bo-hilo{transform-origin:left;}
}
#dia .wrap>.timeline{position:relative;border-inline-start-color:rgb(1 3 38 / .14);margin-inline-start:.75rem;}
.tl-hilo{position:absolute;inset:0 auto 0 -2px;inline-size:2px;border-radius:99px;background:linear-gradient(#0B6EF0,#8A2BE2);transform-origin:top;pointer-events:none;}
#dia .wrap>.timeline .tl-item::before{z-index:1;background:#0B6EF0;border-radius:50%;}
#dia .wrap>.timeline .tl-time{font-family:Archivo,sans-serif;font-weight:900;font-variant-numeric:tabular-nums;font-size:var(--step-2);color:#0847B8;}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .bo-hilo{animation:bo-fill-y linear both;animation-timeline:view();animation-range:entry 20% cover 55%;}
  @media (min-width:40rem){.bo-hilo{animation-name:bo-fill-x;}}
  @keyframes bo-fill-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes bo-fill-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .banda-pasos li{animation:bo-pop linear both;animation-timeline:view();animation-range:entry calc(var(--i) * 7%) entry calc(35% + var(--i) * 7%);}
  @keyframes bo-pop{from{opacity:.2;transform:scale(.85) translateY(.75rem)}to{opacity:1;transform:none}}
  #dia .wrap>.timeline>.tl-item.reveal{animation:none;opacity:1;translate:none;}
  .tl-hilo{animation:tl-fill linear both;animation-timeline:view();animation-range:cover 12% cover 80%;}
  @keyframes tl-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  #dia .wrap>.timeline .tl-item::before{animation:tl-dot linear both;animation-timeline:view();animation-range:entry 20% entry 90%;}
  @keyframes tl-dot{from{scale:.4;opacity:.35}to{scale:1;opacity:1}}
  #dia .wrap>.timeline .tl-time{animation:tl-in-l linear both;animation-timeline:view();animation-range:entry 5% entry 85%;}
  #dia .wrap>.timeline .tl-body{animation:tl-in-r linear both;animation-timeline:view();animation-range:entry 10% entry 95%;}
  @keyframes tl-in-l{from{opacity:0;translate:-1.25rem 0;scale:.9}to{opacity:1;translate:0 0;scale:1}}
  @keyframes tl-in-r{from{opacity:0;translate:1.25rem 0}to{opacity:1;translate:0 0}}
}}

/* Punto 7 · ajustes tras QA visual: hora con ancho fijo, hilos más visibles, puntos que se activan al llegar */
@media (width >= 640px){#dia .wrap>.timeline .tl-item{grid-template-columns:6.25rem minmax(0,1fr);}}
#dia .wrap>.timeline .tl-body p{color:#2F3650;}
.bo-ruta::before{background:rgb(255 255 255 / .3);inline-size:3px;}
.bo-hilo{inline-size:3px;box-shadow:0 0 12px rgb(125 180 255 / .75);}
@media (min-width:40rem){.bo-ruta::before,.bo-hilo{inline-size:auto;block-size:3px;}}
.tl-hilo{inline-size:3px;inset-inline-start:-2.5px;}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  #dia .wrap>.timeline .tl-item::before{animation-range:entry 55% entry 100%;}
}}
@media (max-width:39.99rem){.banda-pasos{gap:1.75rem;}.bo-hilo{box-shadow:0 0 10px rgb(125 180 255 / .8);}}

/* ── Punto 7 · «Cómo se siente» como escena visual que avanza con el scroll (heraldo, 2026-10-11) ──
   Base = cuatro tarjetas visibles (sin soporte, sin JS, movimiento reducido).
   La escena fija (sticky) solo existe en @supports (animation-timeline:view()) + no-preference. */
.dia{margin:2.5rem 0 0;}
.dia-stage{position:relative;isolation:isolate;overflow:hidden;color:#fff;border-radius:var(--ig-radio,2rem);padding:clamp(1rem,.6rem + 2vw,2.25rem);box-shadow:0 0 0 .4rem rgb(11 110 240 / .18),0 24px 60px rgb(1 3 38 / .26);}
.dia-cielo{position:absolute;inset:0;z-index:-1;background:linear-gradient(165deg,#0B5FDB 0%,#6B35D9 100%);}
.dia-noche{position:absolute;inset:0;background:linear-gradient(165deg,#010326,#0A1550 70%,#1A1E6E);}
.dia-estrellas{position:absolute;inset:0;}
.dia-estrellas i{position:absolute;inset-inline-start:var(--x);inset-block-start:var(--y);inline-size:var(--z,3px);block-size:var(--z,3px);border-radius:50%;background:#fff;}
.dia-arco,.dia-riel,.dia-noche,.dia-estrellas{display:none;}
.dia-escenas{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);}
@media (min-width:48rem){.dia-escenas{grid-template-columns:repeat(2,minmax(0,1fr));}}
.dia-esc{display:grid;gap:.9rem;align-content:start;padding:1.1rem;border-radius:1.25rem;background:rgb(255 255 255 / .1);}
.dia .dia-hora{margin:0;font-family:Archivo,sans-serif;font-weight:900;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:clamp(3.25rem,2rem + 6vw,7.5rem);color:#fff;}
.dia .dia-tit{margin:.35rem 0 0;font-size:var(--step-3);line-height:1.05;color:#fff;}
.dia .dia-sub{margin:.4rem 0 0;font-size:var(--step-0);color:rgb(255 255 255 / .88);max-inline-size:26ch;}
.dia-vis{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:1.25rem;background:rgb(255 255 255 / .1);display:grid;place-items:center;}

/* 1 · explora: ojo + indicadores */
.dia-ojo{inline-size:100%;block-size:100%;}
.dia-iris{transform-box:fill-box;transform-origin:center;}
.dia-an-fondo{fill:none;stroke:rgb(255 255 255 / .22);stroke-width:9;}
.dia-an{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--o,0);transform-box:fill-box;transform-origin:center;rotate:-90deg;}
.dia-g-n{font-size:22px;font-weight:800;fill:#fff;}
.dia-g-l{font-size:16px;font-weight:700;fill:rgb(255 255 255 / .85);letter-spacing:.06em;}
.dia-spark{stroke-dasharray:1;stroke-dashoffset:0;}

/* 2 · dicta: foto + onda + etiquetas */
.dia-vis--dicta img{position:absolute;inset:0;display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 55%;color:transparent;}
.dia-onda{position:absolute;inset-inline:6%;inset-block-start:6%;display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-radius:999px;background:rgb(255 255 255 / .86);box-shadow:0 8px 24px rgb(1 3 38 / .2);}
.dia-mic{flex:none;inline-size:1.5rem;block-size:1.5rem;fill:none;stroke:#0B6EF0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.dia-barras{flex:1;display:flex;align-items:center;gap:3px;block-size:2rem;}
.dia-barras i{flex:1;max-inline-size:6px;block-size:100%;border-radius:99px;background:linear-gradient(#0B6EF0,#8A2BE2);transform:scaleY(var(--m,.6));}
.dia-tags{position:absolute;inset-inline:6%;inset-block-end:6%;display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;}
.dia-tags li{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:999px;background:rgb(255 255 255 / .94);color:#010326;font-weight:700;font-size:.875rem;line-height:1.2;box-shadow:0 6px 18px rgb(1 3 38 / .22);}
.dia-tags i{inline-size:.6rem;block-size:.6rem;border-radius:50%;}
.dia-tags .t1{background:#0B6EF0;}.dia-tags .t2{background:#8A2BE2;}.dia-tags .t3{background:#E9822B;}

/* 3 · cobra: recibo + sello CFDI */
.dia-ticket{inline-size:min(78%,17rem);display:grid;gap:.6rem;padding:1rem;border-radius:1rem;background:var(--ig-crema,#FFF5EA);color:#010326;box-shadow:0 14px 34px rgb(1 3 38 / .35);}
.dia-tk-cab{display:flex;align-items:center;gap:.6rem;}
.dia-tk-logo{display:grid;place-items:center;inline-size:1.6rem;block-size:1.6rem;border-radius:50%;background:#0B6EF0;color:#fff;font-weight:800;font-size:.8rem;}
.dia-tk-barra{inline-size:45%;block-size:.5rem;border-radius:99px;background:rgb(1 3 38 / .3);}
.dia-tk-fila{display:flex;justify-content:space-between;align-items:center;gap:.75rem;}
.dia-tk-l{inline-size:55%;block-size:.5rem;border-radius:99px;background:rgb(1 3 38 / .2);transform-origin:left center;}
.dia-tk-p{inline-size:22%;block-size:.5rem;border-radius:99px;background:rgb(1 3 38 / .28);transform-origin:right center;}
.dia-tk-total{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding-block-start:.6rem;border-block-start:1px dashed rgb(1 3 38 / .3);}
.dia-tk-total b{color:#010326;font-size:.95rem;}
.dia-tk-monto{inline-size:32%;block-size:.85rem;border-radius:99px;background:#0B6EF0;transform-origin:right center;}
.dia-cfdi{position:absolute;inset-inline-end:7%;inset-block-end:12%;display:flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border:3px solid #8A2BE2;border-radius:.6rem;background:rgb(255 255 255 / .95);color:#8A2BE2;font-weight:800;font-size:.95rem;line-height:1.1;rotate:-8deg;box-shadow:0 10px 26px rgb(1 3 38 / .3);}
.dia-cfdi svg{inline-size:1.1rem;block-size:1.1rem;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;}

/* 4 · firma: notas con sello */
.dia-vis--firma{display:flex;align-items:flex-start;justify-content:center;padding-block-start:7%;}
.dia-nota{position:relative;flex:none;block-size:70%;aspect-ratio:3/4;margin-inline:-.7rem;padding:.7rem;display:grid;align-content:start;gap:.4rem;border-radius:.8rem;background:var(--ig-crema,#FFF5EA);box-shadow:0 12px 28px rgb(1 3 38 / .35);rotate:calc((var(--n) - 1) * 7deg);}
.dia-nota:nth-child(2){z-index:1;}
.dia-nota>i{display:block;inline-size:var(--w,80%);block-size:.4rem;border-radius:99px;background:rgb(1 3 38 / .2);}
.dia-nota>i:first-child{block-size:.6rem;inline-size:45%;background:#0B6EF0;}
.dia-sello4{position:absolute;inset-inline-end:.35rem;inset-block-end:.35rem;inline-size:2.4rem;block-size:2.4rem;fill:none;stroke:#8A2BE2;stroke-width:4;rotate:-8deg;}
.dia-sello4 path{stroke-width:8;stroke-linecap:round;stroke-linejoin:round;}
.dia-candado{position:absolute;inset-inline:0;inset-block-end:.7rem;margin-inline:auto;inline-size:max-content;max-inline-size:94%;z-index:2;display:flex;align-items:center;gap:.45rem;padding:.4rem .85rem;border-radius:999px;background:rgb(255 255 255 / .95);color:#010326;font-weight:700;font-size:.8125rem;line-height:1.2;box-shadow:0 8px 22px rgb(1 3 38 / .3);}
.dia-candado svg{flex:none;inline-size:1rem;block-size:1rem;fill:none;stroke:#8A2BE2;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

/* escena fija que avanza con el scroll */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .dia-track{view-timeline:--dia block;block-size:400vh;}
  .dia-stage{position:sticky;inset-block-start:5rem;display:flex;flex-direction:column;gap:.5rem;block-size:min(40rem,calc(100svh - 6.5rem));}
  .dia-arco,.dia-riel,.dia-noche,.dia-estrellas{display:block;}
  .dia-arco{position:relative;flex:none;block-size:3.5rem;}
  .dia-arco svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;}
  .dia-sol{position:absolute;inset-block-end:-.4rem;inset-inline-start:2.5%;inline-size:1.5rem;block-size:1.5rem;margin-inline-start:-.75rem;}
  .dia-sunc,.dia-luna{position:absolute;inset:0;border-radius:50%;}
  .dia-sunc{background:radial-gradient(circle at 35% 35%,#FFE2B0,#E9822B);box-shadow:0 0 22px 6px rgb(244 177 92 / .6);}
  .dia-luna{background:#EAF0FF;box-shadow:inset -.4rem 0 0 #9FB6F2,0 0 18px 4px rgb(160 190 255 / .4);opacity:0;}
  .dia-escenas{flex:1;min-block-size:0;display:grid;gap:0;grid-template-columns:minmax(0,1fr);}
  .dia-esc{grid-area:1/1;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-content:normal;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding:0;background:none;block-size:100%;min-block-size:0;}
  .dia-vis{aspect-ratio:auto;block-size:100%;min-block-size:0;align-self:stretch;}
  .dia-riel{flex:none;display:grid;gap:.5rem;}
  .dia-barra{display:block;block-size:4px;border-radius:99px;background:rgb(255 255 255 / .22);overflow:hidden;}
  .dia-barra b{display:block;block-size:100%;background:#fff;transform-origin:left center;}
  .dia-riel ol{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;}
  .dia-riel li{font-weight:800;font-size:.875rem;font-variant-numeric:tabular-nums;color:rgb(255 255 255 / .55);}
  @media (max-width:47.99rem){
    .dia-stage{inset-block-start:4.5rem;block-size:min(40rem,calc(100svh - 5.5rem));padding:.9rem;}
    .dia-arco{block-size:2.5rem;}
    .dia-esc{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:.6rem;}
    .dia-txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .75rem;}
    .dia .dia-hora{font-size:3.25rem;}
    .dia .dia-tit{font-size:var(--step-2);margin:0;}
    .dia .dia-sub{flex-basis:100%;margin:.25rem 0 0;font-size:var(--step--1);max-inline-size:none;}
  }

  /* escenas: entran, se sostienen y salen */
  .dia-esc{animation:dia-esc linear both;animation-timeline:--dia;animation-range:contain calc(var(--s) * 1%) contain calc((var(--s) + 28) * 1%);}
  .dia-esc--1{animation-name:dia-esc-1;}
  .dia-esc--4{animation-name:dia-esc-4;}
  @keyframes dia-esc{0%{opacity:0;translate:0 1.5rem;scale:.97}14%,86%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -1.5rem;scale:.97}}
  @keyframes dia-esc-1{0%,86%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -1.5rem;scale:.97}}
  @keyframes dia-esc-4{0%{opacity:0;translate:0 1.5rem;scale:.97}14%,100%{opacity:1;translate:0 0;scale:1}}

  /* elementos dentro de cada escena: --d = inicio, --l = duración (en % del recorrido) */
  .dia-in{animation-timeline:--dia;animation-fill-mode:both;animation-timing-function:linear;animation-range:contain calc((var(--s) + var(--d,4)) * 1%) contain calc((var(--s) + var(--d,4) + var(--l,8)) * 1%);}
  .dia-iris{animation-name:dia-iris;--d:4;--l:7;}
  .dia-scan{animation-name:dia-scan;--d:8;--l:12;}
  .dia-an{animation-name:dia-anillo;--d:10;--l:8;}
  .dia-spark{animation-name:dia-trazo;--d:14;--l:8;}
  @keyframes dia-iris{from{opacity:0;scale:.55}to{opacity:1;scale:1}}
  @keyframes dia-scan{from{translate:0 0}to{translate:540px 0}}
  @keyframes dia-anillo{from{stroke-dashoffset:100}to{stroke-dashoffset:var(--o)}}
  @keyframes dia-trazo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

  .dia-vis--dicta img{animation-name:dia-zoom;--d:0;--l:28;}
  .dia-onda{animation-name:dia-baja;--d:3;--l:5;}
  .dia-barras i{animation-name:dia-barra-y;--d:calc(5 + var(--i) * .25);--l:6;transform-origin:center;}
  .dia-tags li{animation-name:dia-sube;--d:calc(12 + var(--i) * 4);--l:5;}
  @keyframes dia-zoom{from{scale:1.14}to{scale:1}}
  @keyframes dia-baja{from{opacity:0;translate:0 -1rem}to{opacity:1;translate:0 0}}
  @keyframes dia-barra-y{from{transform:scaleY(.12)}to{transform:scaleY(var(--m,.6))}}
  @keyframes dia-sube{from{opacity:0;translate:0 1rem;scale:.9}to{opacity:1;translate:0 0;scale:1}}

  .dia-ticket{animation-name:dia-ticket;--d:3;--l:8;}
  .dia-tk-l,.dia-tk-p,.dia-tk-monto{animation-name:dia-crece;--d:calc(9 + var(--r) * 2.5);--l:5;}
  .dia-cfdi{animation-name:dia-sello;--d:15;--l:5;}
  @keyframes dia-ticket{from{opacity:0;translate:0 2.5rem;rotate:4deg}to{opacity:1;translate:0 0;rotate:0deg}}
  @keyframes dia-crece{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes dia-sello{from{opacity:0;scale:1.9;rotate:-20deg}to{opacity:1;scale:1;rotate:-8deg}}

  .dia-nota{animation-name:dia-cae;--d:calc(4 + var(--n) * 3);--l:6;}
  .dia-sello4{animation-name:dia-sello2;--d:calc(13 + var(--n) * 3);--l:4;}
  .dia-candado{animation-name:dia-aparece;--d:21;--l:4;}
  @keyframes dia-cae{from{opacity:0;translate:0 -2.5rem}to{opacity:1;translate:0 0}}
  @keyframes dia-sello2{from{opacity:0;scale:2.2}to{opacity:1;scale:1}}
  @keyframes dia-aparece{from{opacity:0;translate:0 .75rem}to{opacity:1;translate:0 0}}

  /* cielo, sol y riel: recorren todo el día */
  .dia-noche{animation:dia-aparece-b linear both;animation-timeline:--dia;animation-range:contain 44% contain 70%;}
  .dia-estrellas{animation:dia-aparece-b linear both;animation-timeline:--dia;animation-range:contain 56% contain 80%;}
  .dia-sol{animation:dia-sol-x linear both;animation-timeline:--dia;animation-range:contain 0% contain 100%;}
  .dia-sol i{animation:dia-sol-y linear both;animation-timeline:--dia;animation-range:contain 0% contain 100%;}
  .dia-sunc{animation-name:dia-sol-y,dia-se-va;}
  .dia-luna{animation-name:dia-sol-y,dia-llega;}
  .dia-sunc,.dia-luna{animation-range:contain 0% contain 100%,contain 50% contain 68%;}
  .dia-barra b{animation:dia-avance linear both;animation-timeline:--dia;animation-range:contain 0% contain 100%;}
  .dia-riel li{animation:dia-hora-on linear both;animation-timeline:--dia;animation-range:contain calc(var(--k) * 24%) contain calc(var(--k) * 24% + 4%);}
  @keyframes dia-aparece-b{from{opacity:0}to{opacity:1}}
  @keyframes dia-sol-x{from{inset-inline-start:2.5%}to{inset-inline-start:97.5%}}
  @keyframes dia-sol-y{0%,100%{translate:0 0}12.5%,87.5%{translate:0 -1.07rem}25%,75%{translate:0 -1.84rem}37.5%,62.5%{translate:0 -2.3rem}50%{translate:0 -2.45rem}}
  @keyframes dia-se-va{from{opacity:1}to{opacity:0}}
  @keyframes dia-llega{from{opacity:0}to{opacity:1}}
  @keyframes dia-avance{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes dia-hora-on{from{color:rgb(255 255 255 / .55)}to{color:#fff}}
}}

/* Punto 7 · ajustes 2 de la escena «Un martes cualquiera» tras QA visual (heraldo, 2026-10-11) */
.dia-barras i{max-inline-size:none;}
.dia .dia-sub{color:rgb(255 255 255 / .96);}
.dia-ticket{inline-size:min(88%,21rem);padding:1.25rem;gap:.85rem;}
.dia-tk-l,.dia-tk-p,.dia-tk-monto{block-size:.65rem;}
.dia-tk-l{background:rgb(1 3 38 / .3);}
.dia-tk-p{background:rgb(1 3 38 / .42);}
.dia-tk-monto{block-size:1rem;}
.dia-cfdi{inset-inline-end:5%;inset-block-end:8%;font-size:1.05rem;}
.dia-nota{block-size:68%;margin-inline:-.35rem;}
.dia-nota>i{background:rgb(1 3 38 / .3);}
.dia-nota>i:first-child{background:#0B6EF0;}
.dia-sello4{inline-size:3rem;block-size:3rem;stroke-width:5;}
.dia-candado{inset-block-end:.5rem;}
.dia-vis--firma{padding-block-start:5%;}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .dia-riel li{font-size:1rem;color:rgb(255 255 255 / .72);}
  .dia-noche{animation-range:contain 62% contain 80%;}
  .dia-estrellas{animation-range:contain 70% contain 88%;}
  .dia-sunc,.dia-luna{animation-range:contain 0% contain 100%,contain 62% contain 78%;}
  .dia-tags li{--d:calc(10 + var(--i) * 3.5);}
  .dia-tk-l,.dia-tk-p,.dia-tk-monto{--d:calc(6 + var(--r) * 2.5);}
  .dia-cfdi{--d:13;}
  .dia-nota{--d:calc(3 + var(--n) * 2.5);}
  .dia-sello4{--d:calc(11 + var(--n) * 2.5);}
  .dia-candado{--d:17;}
}}

/* Punto 7 · ajustes 3 de «Un martes cualquiera»: riel legible, noche al final del día, notas completas, punto de tendencia (heraldo, 2026-10-11) */
.dia-nota{block-size:60%;margin-inline:-1.1rem;rotate:calc((var(--n) - 1) * 6deg);}
.dia-candado{background:#fff;color:#010326;}
.dia-barras{justify-content:space-between;}
.dia-barras i{flex:1 1 0;min-inline-size:0;}
.dia-punto{fill:#fff;}
@media (max-width:47.99rem){.dia-nota{block-size:66%;margin-inline:-.9rem;}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .dia-riel li{font-size:1.0625rem;font-weight:800;color:rgb(255 255 255 / .88);}
  .dia-barra{background:rgb(255 255 255 / .38);}
  .dia-noche{animation-range:contain 72% contain 88%;}
  .dia-estrellas{animation-range:contain 78% contain 94%;}
  .dia-sunc,.dia-luna{animation-range:contain 0% contain 100%,contain 72% contain 86%;}
  .dia-punto{animation-name:dia-aparece-b;--d:21;--l:3;}
  @keyframes dia-hora-on{from{color:rgb(255 255 255 / .85)}to{color:#fff}}
}}

/* Punto 7 · ajustes 4 de «Un martes cualquiera»: sello de la nota izquierda visible, etiqueta blanca sólida, menos hueco en móvil (heraldo, 2026-10-11) */
.dia-candado{background:#fff !important;color:#010326;box-shadow:0 6px 18px rgb(1 3 38 / .35);}
@media (min-width:48rem){.dia-nota:nth-child(1) .dia-sello4{inset-inline-end:auto;inset-inline-start:.35rem;}}
@media (max-width:47.99rem){.dia-vis--firma{padding-block-start:3%;}.dia-nota{block-size:76%;}}

/* Franja de respaldo: cifras primero y más grandes, logos después */
.cifras.cifras-grandes{margin:1rem 0 2.5rem;padding:0 0 2.25rem;border-block-start:none;border-block-end:1px solid var(--line);gap:1.5rem 4.5rem;}
.cifras-grandes strong{font-size:clamp(2.75rem,2rem + 4vw,5rem);}
.cifras-grandes li>span{font-size:var(--step-0);margin-block-start:.5rem;}
.cifras-grandes li{min-inline-size:10rem;}
.faja-logos .faja-apoyo{margin-block-end:1.25rem;}

/* /precios: mismo diseño que los planes de la home, con la bolsa de consultas como barra (heraldo, 2026-10-11) */
.planes-precios-grid{gap:1.5rem;}
.planes-precios .price-card{transition:box-shadow .3s ease,border-color .3s ease,translate .3s ease;}
.planes-precios .price-card:hover{translate:0 -4px;box-shadow:var(--shadow-2);}
.planes-precios .price-card[data-featured] .price-amount{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.bolsa{padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}
.bolsa-t{margin:0;font-size:var(--step--1);color:var(--fg-muted);}
.bolsa-t strong{font-family:Archivo,sans-serif;font-size:var(--step-1);font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;margin-inline-end:.2rem;}
.bolsa-barra{display:block;block-size:.5rem;border-radius:99px;background:var(--line);overflow:hidden;margin-block-start:.6rem;}
.bolsa-barra::after{content:"";display:block;block-size:100%;inline-size:max(.5rem,calc(var(--v) / 400 * 100%));border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left center;}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .bolsa-barra::after{animation:bolsa-crece linear both;animation-timeline:view();animation-range:entry 10% cover 40%;}
    @keyframes bolsa-crece{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  }
}

/* planes-precios-ajuste (heraldo, 2026-10-11): 4 columnas sin botones a dos líneas y etiqueta centrada con aire sobre el título */
.planes-precios-grid .price-card{padding:2.25rem 1.5rem 1.5rem;}
.planes-precios-grid .price-flag{inset-inline-start:50%;inset-inline-end:auto;translate:-50% -50%;inline-size:max-content;max-inline-size:calc(100% - 1rem);text-align:center;line-height:1.25;font-size:.8rem;padding:.3rem .8rem;}
.planes-precios-grid .btn{padding-inline:.5rem;font-size:.95rem;text-wrap:balance;}

/* planes-precios-ajuste-2 (heraldo, 2026-10-11): etiqueta en una sola linea y cabeceras de tarjeta con la misma altura para alinear precios */
.planes-precios-grid .price-flag{white-space:nowrap;max-inline-size:none;font-size:.74rem;letter-spacing:.01em;padding:.3rem .7rem;}
@media(min-width:1000px){.planes-precios-grid .price-card>div:first-child{min-block-size:8rem;}}

/* planes-precios-ajuste-3 (heraldo, 2026-10-11): la cabecera de las tarjetas con etiqueta tambien reserva altura (first-of-type) para que precios y bolsas arranquen a la misma altura */
@media(min-width:1000px){.planes-precios-grid .price-card>div:first-of-type{min-block-size:9.5rem;}}
/* planes-precios-ajuste-4 (heraldo, 2026-10-11): el bloque de precio reserva la altura de la tarjeta Expediente (precio + nota) para que las cajas de consultas arranquen a la misma altura */
@media(min-width:1000px){.planes-precios-grid .price-tag:not(:has(+ .faint)){min-block-size:7.875rem;}}
/* ciclo-precios (heraldo, 2026-10-12): conmutador Mensual/Anual en CSS puro. Sin JS y sin :has() queda el anual a la vista. */
.ciclo-scope{--ciclo-dur:.32s;}
.ciclo{display:inline-flex;gap:.25rem;margin:0;padding:.3rem;min-inline-size:0;max-inline-size:100%;border:1px solid var(--line);border-radius:99px;background:var(--surface);}
.ciclo input{position:absolute;inline-size:1px;block-size:1px;margin:0;opacity:0;pointer-events:none;}
.ciclo label{display:inline-flex;align-items:center;min-block-size:2.75rem;padding:.35rem 1.15rem;border-radius:99px;font-weight:700;color:var(--fg-muted);cursor:pointer;white-space:nowrap;}
.ciclo input:checked+label{background:var(--accent);color:#fff;}
.ciclo input:focus-visible+label{outline:3px solid var(--accent2);outline-offset:3px;}
.ciclo-ahorro{margin-inline-start:.35em;font-weight:600;}
.ciclo-nota{margin:.75rem 0 0;}
@media(max-width:480px){.ciclo label{padding:.35rem .8rem;font-size:var(--step--1);}}
@supports not selector(:has(*)){.ciclo,.ciclo-nota{display:none;}}
.cv-stack{display:grid;}
.cv-stack>.cv{grid-area:1/1;}
.price-ciclo{display:inline-grid;}
.cv{opacity:1;visibility:visible;translate:0 0;}
.cv-m{opacity:0;visibility:hidden;translate:0 .35em;}
.ciclo-scope:has(#ciclo-mensual:checked) .cv-a{opacity:0;visibility:hidden;translate:0 -.35em;}
.ciclo-scope:has(#ciclo-mensual:checked) .cv-m{opacity:1;visibility:visible;translate:0 0;}
@media(prefers-reduced-motion:no-preference){
.cv{transition:opacity var(--ciclo-dur) ease,translate var(--ciclo-dur) ease,visibility 0s linear var(--ciclo-dur);}
.ciclo-scope:has(#ciclo-mensual:checked) .cv-m,.ciclo-scope:not(:has(#ciclo-mensual:checked)) .cv-a{transition-delay:0s;}
.ciclo label{transition:background-color .25s ease,color .25s ease;}
}
.price-ahorro{display:inline-flex;align-items:center;align-self:center;padding:.2rem .65rem;border-radius:99px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:var(--step--1);font-weight:800;white-space:nowrap;}
.price-nota{margin:0;}
.plans .th-sub{display:block;margin-block-start:.2rem;font-size:.72rem;font-weight:500;line-height:1.3;color:var(--fg-muted);}
@media(min-width:1000px){.planes-precios-grid .price-tag+.faint{min-block-size:4.5em;}}
@media(min-width:760px){.planes-home:not(.planes-precios-grid) .price-tag+.faint{min-block-size:3em;}}
/* ciclo-precios-ajuste-2 (heraldo, 2026-10-12): el bloque de precio reserva la altura con chip y nota (dos filas) para que bolsas, listas y botones queden alineados */
@media(min-width:760px){.planes-home:not(.planes-precios-grid) .price-tag{min-block-size:5.95rem;}}
@media(min-width:1000px){
.planes-precios-grid .price-tag:has(+ .faint){min-block-size:5.95rem;}
.planes-precios-grid .price-tag+.faint{min-block-size:4.75rem;}
.planes-precios-grid .price-tag:not(:has(+ .faint)){min-block-size:11.95rem;}
}

/* ronda-a-botones-notas (heraldo, 2026-10-13): botones Contratar anual/mensual con el conmutador, micro-texto del plan gratis y notas bajo las tarjetas en chips */
.btn-cv{margin-block-start:auto;}
.planes-home .price-card .btn-cv{margin-block-start:auto;}
.planes-home .price-card .btn-cv .btn-block{margin:0;}
.planes-home .price-card{padding-block-end:max(2.1rem,clamp(1.5rem,1.2rem + 1.5vw,2.25rem));}
.cta-micro{position:absolute;inset-inline:0;inset-block-end:.45rem;margin:0;text-align:center;line-height:1.1;}
.planes-notas{display:grid;gap:.6rem;margin-block-start:1.5rem;justify-items:start;}
.planes-notas p{margin:0;}
.nota-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start;}
.nota-chips li{padding:.3rem .8rem;border:1px solid var(--line);border-radius:.9rem;background:var(--surface);font-size:var(--step--1);line-height:1.35;color:var(--fg-muted);}
.planes-notas-ciclo{max-inline-size:100%;}

/* ronda-d-movil-1 (heraldo, 2026-10-13): contencion de raiz del desborde horizontal. La figura .capas (home: problema y hero) contiene sus capas con parallax y su sujeto; el recorte es solo horizontal para no cortar sombras verticales. */
.capas{overflow-x:clip;max-inline-size:100%;}
.split-ig>.capas--sec{inline-size:100%;min-inline-size:0;}

/* ronda-d-movil-2 (heraldo, 2026-10-13): objetivos tactiles de 44 px en pestanas de la solucion, subenlaces del pie, migas y enlaces sueltos de una linea */
.sis-tabs-nav label{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;}
.foot-subs a{display:inline-flex;align-items:center;min-block-size:44px;padding-block:.35rem;}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;min-inline-size:44px;padding-block:0;}
.small>a:not(.btn){display:inline-flex;align-items:center;min-block-size:44px;max-inline-size:100%;}

/* ronda-d-movil-3 (heraldo, 2026-10-13): barra superior con objetivos de 44 px tambien en escritorio */
.nav-menu-btn{min-block-size:44px;}
.nav-actions .btn-sm{min-block-size:44px;}

/* ronda-d-movil-4 (heraldo, 2026-10-13): notas de cobro como chips con jerarquia (pago en negrita, garantia y aviso en chips cortos), micro-texto centrado y con contraste, enlaces de flecha con objetivo de 44 px */
.planes-notas{gap:.85rem;margin-block-start:1.75rem;justify-items:start;}
.notas-fija{margin:0;font-size:max(.875rem,var(--step--1));color:var(--fg-muted);line-height:1.45;}
.nota-lineas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start;}
.nota-lineas li{display:flex;align-items:center;gap:.55rem;padding:.5rem .9rem;border:1px solid var(--line);border-radius:.9rem;background:var(--surface);font-size:max(.8125rem,var(--step--1));line-height:1.35;color:var(--fg-muted);}
.nota-lineas li::before{content:"";flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--accent2);}
.nota-lineas .n-pago{font-weight:700;color:var(--fg);}
.nota-lineas .n-tarjeta{font-weight:600;color:var(--fg);}
.nota-lineas .n-cuenta{background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-color:color-mix(in srgb,var(--accent) 28%,var(--line));color:var(--fg);}
.nota-lineas .n-cuenta::before{background:var(--accent);}
.cta-micro{color:var(--fg-muted);font-size:max(.8125rem,var(--step--1));}
.link-arrow{min-block-size:44px;}
@media (max-width:40rem){
  .planes-notas{justify-items:stretch;}
  .nota-lineas{flex-direction:column;flex-wrap:nowrap;}
  .nota-lineas li{border-radius:.75rem;}
  .hero-note{text-align:center;margin-block-start:.5rem;}
}

/* ronda-d-movil-5 (heraldo, 2026-10-13): micro-texto de la prueba con aire propio bajo el boton (todas las tarjetas reservan el mismo pie), chips de cobro con un solo peso y buen contraste, etiqueta del plan en 13 px que baja de linea sin cortarse, nota del hero alineada con el resto */
.planes-home .price-card,.planes-precios-grid .price-card{padding-block-end:3rem;}
.cta-micro{inset-block-end:.8rem;color:var(--fg-muted);font-size:.8125rem;line-height:1.2;padding-inline:1rem;}
.nota-lineas li{align-items:flex-start;font-weight:500;color:var(--fg);}
.nota-lineas li::before{margin-block-start:.42em;}
.nota-lineas .n-pago,.nota-lineas .n-tarjeta{font-weight:500;color:var(--fg);}
@media (max-width:40rem){
  .planes-precios-grid .price-flag{white-space:normal;max-inline-size:calc(100% - 1rem);font-size:.8125rem;line-height:1.25;text-align:center;}
  .hero-note{text-align:start;margin-block-start:.75rem;}
  .price-card{row-gap:1.25rem;}
}
/* ronda-g-1 (heraldo, 2026-10-13): cierre movil. Nota de prueba pegada al boton principal, enlace secundario alineado a la izquierda, precios de IA en chips, objetivos tactiles de 44 px, tipografia minima de 13 px, filas de planes del mismo alto, orbes contenidos y calidez (radios suaves y punto ambar) */
:root{--radius:14px;--radius-lg:24px;}
.hero-cta{align-items:flex-start;}
.hero-cta-main{display:grid;gap:.625rem;justify-items:start;}
.hero-cta-main .hero-note{margin:0;color:var(--fg);font-weight:500;line-height:1.3;text-align:start;}
.hero-note::before{content:"";display:inline-block;inline-size:.5rem;block-size:.5rem;margin-inline-end:.5rem;border-radius:50%;background:#F0A04B;vertical-align:.08em;}
@media (min-width:40.01rem){.hero-cta .barra-ig{min-block-size:60px;}}
@media (max-width:40rem){
  .hero-cta{display:grid;gap:.375rem;justify-items:stretch;}
  .hero-cta-main{justify-items:stretch;gap:.625rem;}
  .hero-cta .barra-ig{justify-content:flex-start;padding-inline:0;}
}

/* precios de IA en chips cortos (mismo contenido) */
.unidades-ia{display:grid;gap:.75rem;max-inline-size:none;margin-block-start:2rem;}
.unidades-ia .ia-t{margin:0;line-height:1.45;}
.ia-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;}
.ia-chips li{display:flex;align-items:baseline;gap:.55rem;padding:.55rem .95rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:max(.8125rem,var(--step--1));line-height:1.35;color:var(--fg);}
.ia-chips b{font-weight:700;white-space:nowrap;}
@media (max-width:40rem){
  .ia-chips{flex-direction:column;}
  .ia-chips li{justify-content:space-between;border-radius:.875rem;}
}

/* objetivos tactiles y tipografia minima */
.link-arrow{display:inline-flex;align-items:center;min-block-size:44px;}
.foot-grid li a,.foot-brand p a,.foot-bottom a,.lang-switch a{display:inline-flex;align-items:center;min-block-size:44px;}
.card-num{font-size:.8125rem;}
.nav-mobile-label{font-size:.8125rem;}

/* ritmo de notas de cobro y de la tarjeta gratis */
.nota-lineas li::before{margin-block-start:calc((1.35em - .5rem) / 2);background:#F0A04B;}
.nota-lineas .n-cuenta::before{background:var(--accent);}
.price-card p.small>strong:only-child{display:block;font-weight:500;line-height:1.5;color:var(--fg);}

/* tarjetas de plan: una fila del alto de la mas alta y aire para la insignia */
.planes-home,.planes-precios-grid{grid-auto-rows:1fr;}
@media (max-width:59.99rem){.planes-home,.planes-precios-grid{row-gap:2.75rem;}}

/* contencion de raiz: orbes decorativos y titulos largos */
:has(>.hero-orb){overflow-x:clip;}
.wrap,.wrap-narrow{min-inline-size:0;}
.wrap-narrow h2,.wrap-narrow h3,.wrap-narrow p{overflow-wrap:anywhere;max-inline-size:100%;}
/* ronda-g-2 (heraldo, 2026-10-13): insignia de plan y texto de lectura de 16 px en tarjetas y notas pequenas */
.price-card .price-flag{font-size:.8125rem;}
.price-card li{font-size:1rem;line-height:1.45;}
main p.small,main .small{font-size:1rem;line-height:1.5;}
main .notas-fija{font-size:1rem;line-height:1.5;}


/* ronda-j-1 (heraldo, 2026-10-13): chip «Ahorra» siempre en su propia linea bajo precio y unidad, en todas las tarjetas y anchos (antes Consultorio lo subia a la linea del precio a 390-412 px y Clinica lo bajaba). Salto de linea forzado con un pseudo-elemento de ancho completo. */
.price-tag--ciclo{row-gap:.2rem;}
.price-tag--ciclo::after{content:"";order:2;flex:0 0 100%;block-size:0;}
.price-tag--ciclo .price-ahorro{order:3;align-self:flex-start;}

/* ronda-j-2 (heraldo, 2026-10-13): hero calido y humano sin cambiar texto ni fotos. Brillos ambar y durazno en vez de violeta frio, subtitulo en crema, mas aire y radios. Los orbes se acotan en movil para que el resplandor no se corte contra el borde. */
.hero:not(.sec-ig--crema):not(.sec-ig--lavanda){background-image:radial-gradient(52rem 26rem at 88% -4%,rgb(240 160 75 / .14),transparent 62%),radial-gradient(38rem 22rem at 2% 104%,rgb(233 130 43 / .10),transparent 66%),linear-gradient(180deg,rgb(70 34 44 / .22),transparent 72%);}
.orb-a{background:radial-gradient(circle at 40% 40%,rgb(240 160 75 / .26),rgb(233 110 80 / .12) 42%,transparent 68%);}
.orb-b{background:radial-gradient(circle at 60% 60%,rgb(6 109 240 / .16),rgb(240 160 75 / .06) 55%,transparent 72%);}
.hero-sub{color:rgb(255 238 220 / .93);}
.hero .badge{border-radius:999px;padding:.5rem 1.1rem;border-color:rgb(240 160 75 / .35);background:rgb(240 160 75 / .08);color:rgb(255 238 220 / .9);}
.hero .badge::before{background:#F0A04B;}
@media (max-width:40rem){
  .orb-a{inset-inline-end:-5rem;inset-block-start:-9rem;inline-size:min(26rem,100vw);}
  .orb-b{inset-inline-start:-6rem;inset-block-end:-10rem;inline-size:min(22rem,80vw);}
  .hero{padding-block-start:clamp(6.5rem,5.5rem + 6vw,8rem);}
}
@media (min-width:40.01rem){.hero-sub{margin-block-start:1.75rem;}}

/* ronda-j-3 (heraldo, 2026-10-13): texto de lectura de 16 px en movil (migas, nota del hero, pasos de la escena, menu movil, notas de cobro y precios de IA); etiqueta de la calculadora con objetivo de 44 px. Chips y etiquetas se quedan en 13 px o mas. */
.crumbs{font-size:1rem;}
.hero-note{font-size:1rem;}
.esc-paso{font-size:1rem;}
.nav-mobile-subs a,.nav-mobile-scroll .nav-mobile-more a{font-size:1rem;}
label.calc-field,.calc-field>label{display:flex;align-items:center;min-block-size:44px;}
@media (max-width:40rem){
  .nota-lineas li,.ia-chips li{font-size:1rem;line-height:1.4;}
}

/* ronda-j-4 (heraldo, 2026-10-13): en 1000-1279 px el precio de Clinica baja la unidad a otra linea y su cabecera quedaba mas alta que la de Consultorio; todas reservan la misma altura */
@media (min-width:1000px) and (max-width:1279.98px){
  .planes-home:not(.planes-precios-grid) .price-tag{min-block-size:7.5rem;}
}

/* ronda-j-5 (heraldo, 2026-10-13): vision a 390 px. (a) Las manchas de la escena del hero de la home eran lavanda; pasan a ambar y durazno. (b) En movil los orbes del hero quedan completos dentro del hero (antes asomaban por arriba y por abajo y el borde del hero los cortaba en linea recta, visible en /preguntas-frecuentes/ y /oftalmologia/). */
.hero .capas-blob--a{background:radial-gradient(circle at 35% 35%,#ffd9b3,#f0a04b 72%);opacity:.5;}
.hero .capas-blob--b{background:radial-gradient(circle at 40% 40%,#ffc9a0,#f59a64 78%);opacity:.7;}
@media (max-width:40rem){
  .orb-a{inset-block-start:0;inset-inline-end:-4rem;inline-size:min(20rem,90vw);}
  .orb-b{inset-block-end:0;inset-inline-start:-5rem;inline-size:min(18rem,80vw);}
}

/* ronda-j-6 (heraldo, 2026-10-13): vision ronda 2. Los brillos del hero siguen cortandose en linea recta: el fondo del hero y los orbes llegaban brillantes al borde. Ahora cada brillo se desvanece por completo antes del borde (elipses en porcentaje del hero y orbes con closest-side), sin tocar texto ni fotos. */
.hero:not(.sec-ig--crema):not(.sec-ig--lavanda){background-image:radial-gradient(ellipse 62% 46% at 86% 46%,rgb(240 160 75 / .14),transparent),radial-gradient(ellipse 56% 40% at 8% 58%,rgb(233 130 43 / .10),transparent),linear-gradient(180deg,transparent,rgb(70 34 44 / .16) 50%,transparent);}
.orb-a{background:radial-gradient(closest-side,rgb(240 160 75 / .26),rgb(233 110 80 / .12) 55%,transparent);}
.orb-b{background:radial-gradient(closest-side,rgb(6 109 240 / .16),rgb(240 160 75 / .06) 60%,transparent);}
@media (max-width:40rem){
  .orb-a{inset-inline-end:0;}
  .orb-b{inset-inline-start:0;}
}

/* ronda-j-7 (heraldo, 2026-10-13): vision ronda 3. Brillo ambar un poco mas presente (seguia sobrio) y mas aire entre la primera linea del titular y la pildora azul de la segunda. */
.hero:not(.sec-ig--crema):not(.sec-ig--lavanda){background-image:radial-gradient(ellipse 64% 48% at 86% 46%,rgb(240 160 75 / .22),transparent),radial-gradient(ellipse 58% 42% at 8% 58%,rgb(233 130 43 / .15),transparent),linear-gradient(180deg,transparent,rgb(70 34 44 / .2) 50%,transparent);}
.orb-a{background:radial-gradient(closest-side,rgb(240 160 75 / .34),rgb(233 110 80 / .16) 55%,transparent);}
.hero-h .tit-l1{margin-block-end:.45em;}

/* ronda-j-8 (heraldo, 2026-10-13): medicion final de tipografia a 320-390 px. Texto de lectura que seguia en 14-15 px (pistas, pies de figura, subtitulos de dia, notas de tabla, notas pequenas) sube a 16 px; la sub-etiqueta del encabezado de la tabla de precios estaba en 11.5 px y sube a 13 px (minimo de etiquetas). Chips, insignias y etiquetas se quedan en 13-14 px. */
@media (max-width:40rem){
  p.hint,p.dia-sub,figcaption,.cell-note,main small:not([class]){font-size:1rem;}
  th .th-sub{font-size:.8125rem;}
}

/* D · ahorro anual como ribbon en las cards, servicios adicionales y desplegable de pagos */
.price-ribbon{align-self:center;margin-inline-start:auto;margin-inline-end:calc(-1 * clamp(1.5rem,1.2rem + 1.5vw,2.25rem) - 1px);padding:.3rem .85rem .3rem 1.25rem;background:#F0A04B;color:#010326;font-size:max(.875rem,var(--step--1));font-weight:700;line-height:1.2;clip-path:polygon(.6rem 0,100% 0,100% 100%,.6rem 100%,0 50%);}
.servicios .serv-card p{margin:0;}
.servicios .serv-card .price-amount{font-size:var(--step-3);}
.servicios .serv-card .serv-bolsa{margin-block-start:auto;padding-block-start:.75rem;border-block-start:1px solid var(--line);}
.pagos-info .planes-notas{margin-block-start:1rem;}
@media(max-width:380px){.ciclo label{padding-inline:.65rem;}}
/* Cotizador de /precios/ */
.quote-inputs{display:grid;align-items:start;gap:1rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.quote-inputs input[type="number"],.quote-inputs select{inline-size:100%;min-block-size:44px;padding:.5rem .75rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--fg);font:inherit;}
.quote-inputs .calc-field>label:not(.quote-check){min-block-size:3rem;align-items:flex-end;line-height:1.25;}
.quote-inputs .quote-check{gap:.6rem;font-weight:500;}
.quote-inputs .quote-check input{inline-size:1.25rem;block-size:1.25rem;flex:none;}
.quote-out{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-block-start:1.75rem;padding-block-start:1.5rem;border-block-start:1px solid var(--line);}
.quote-card{align-content:start;}
.quote-card p{margin:0;}
.quote-card[data-off]{opacity:1;}
.quote-card[data-off] h3,.quote-card[data-off]>p{color:var(--fg-muted,#B7BECC);}

/* escena dictado y «Cómo se siente» · ronda 11 (forja, 2026-10-17, pedido de Walt): los campos de la nota (motivo, exploración, diagnóstico, plan), la calificación NOM-004 y el sello «Firmada» nacen ocultos y aparecen con el scroll; la escena del día se centra en la pantalla mientras avanza */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes esc-chip{from{opacity:0;translate:0 .4rem;}to{opacity:1;translate:0 0;}}
    @keyframes esc-linea{from{transform:scaleX(0);}to{transform:scaleX(1);}}
    @keyframes esc-pie-pre{from{opacity:0;translate:0 .4rem;}to{opacity:1;translate:0 0;}}
    @keyframes esc-sello-pre{from{opacity:0;transform:scale(1.6) rotate(-14deg);}60%{opacity:1;}to{opacity:1;transform:scale(1) rotate(0deg);}}
    .dia-track{--dia-h:min(40rem,calc(100svh - 6.5rem));--dia-top:max(5rem,calc((100svh - var(--dia-h)) / 2));view-timeline-inset:var(--dia-top) var(--dia-top);}
    .dia-stage{inset-block-start:var(--dia-top);}
    @media (max-width:47.99rem){
      .dia-track{--dia-h:min(40rem,calc(100svh - 5.5rem));--dia-top:max(4.5rem,calc((100svh - var(--dia-h)) / 2));}
    }
  }
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes esc-aparece-txt{from{opacity:0;translate:0 .4rem;}to{opacity:1;translate:0 0;}}
  }
}


/* Cotizador de /precios/ · rediseño (forja, 2026-10-17, pedido de Walt; textos de Heraldo): perfiles de arranque, campos en tres bloques con ayuda breve, resultado con ahorro y paso a una persona */
.cotizador{scroll-margin-block-start:5rem;}
.quote-inicio{display:grid;gap:.75rem;margin-block-end:1.5rem;}
.quote-presets-t{margin:0;}
.quote-presets{display:flex;flex-wrap:wrap;gap:.6rem;}
.quote-chip{min-block-size:44px;padding:.4rem 1.1rem;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--fg);font:inherit;font-weight:600;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.quote-chip:hover{border-color:#F0A04B;}
.quote-chip[aria-pressed="true"]{background:#F0A04B;border-color:#F0A04B;color:#010326;}
.quote-inputs{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1.25rem;}
.quote-grupo{display:grid;align-content:start;gap:1.1rem;min-inline-size:0;margin:0;padding:1.25rem;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.03);}
.quote-grupo legend{padding-inline:.5rem;font-weight:800;font-size:var(--step-0);}
.quote-grupo .calc-field{margin:0;gap:.4rem;}
.quote-inputs .quote-grupo .calc-field>label:not(.quote-check){min-block-size:0;align-items:flex-start;}
.quote-hint{font-size:var(--step--1);line-height:1.4;color:var(--fg-muted,#B7BECC);}
.quote-out-t{margin-block:1.75rem .25rem;font-size:var(--step-1);}
.quote-out-t+.quote-out{margin-block-start:.75rem;}
.quote-ahorro{color:#F0A04B;font-weight:700;}
.quote-limite{line-height:1.4;}
.quote-ayuda{margin-block-start:1rem;}
@media(max-width:47.99rem){.quote-grupo{padding:1rem;}}
/* Cotizador · ajuste visual: 3 bloques en fila, extras a todo lo ancho, ayudas con más contraste */
@media(min-width:64rem){.quote-inputs{grid-template-columns:repeat(3,minmax(0,1fr));}.quote-grupo:nth-of-type(4){grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;}.quote-grupo:nth-of-type(4) legend{grid-column:1/-1;}}
.quote-hint{color:#D5DAE5;}
.quote-grupo{background:rgba(255,255,255,.05);}
.quote-card[data-off]{opacity:.9;}
.quote-card[data-off] p{color:#D5DAE5;}
.quote-card .price-per,.quote-card .faint{color:#C9CFDC;}
.quote-presets{align-items:stretch;}
@media(max-width:47.99rem){.quote-presets{display:grid;grid-template-columns:1fr;}}

/* Cotizador \u00b7 tarjeta Expediente (gratis): acento naranja, precio $0, lo que incluye y llamada a crear cuenta; nunca se atenua */
.price-card.quote-card--free,.price-card.quote-card--free[data-featured]{border-color:#F0A04B;background:linear-gradient(180deg,rgba(240,160,75,.16),rgba(240,160,75,.03) 55%),var(--surface);box-shadow:0 0 0 1px rgba(240,160,75,.35),0 18px 40px -18px rgba(240,160,75,.5);}
.quote-card--free .price-amount{color:#F0A04B;}
.quote-card--free .checks{margin:.25rem 0;gap:.6rem;}
.quote-card--free .checks li{color:#E6EAF2;}
.quote-card--free .quote-limite{padding:.6rem .75rem;border-radius:var(--radius);background:rgba(255,255,255,.06);}
.quote-card--free .quote-micro{text-align:center;}

/* Cotizador \u00b7 tarjeta Expediente: m\u00e1s presencia, bot\u00f3n naranja y botones de las tres tarjetas alineados abajo */
.quote-out .quote-card{display:flex;flex-direction:column;}
.quote-card>.btn{margin-block-start:auto;}
.price-card.quote-card--free,.price-card.quote-card--free[data-featured]{border:2px solid #F0A04B;box-shadow:0 0 0 4px rgba(240,160,75,.16),0 22px 48px -16px rgba(240,160,75,.6);}
.quote-card--free .price-amount{font-size:var(--step-4,2.75rem);line-height:1;}
.quote-card--free .btn-primary{background:#F0A04B;border-color:#F0A04B;color:#010326;}
.quote-card--free .btn-primary:hover{background:#F6B46D;border-color:#F6B46D;}
.quote-card--free .quote-micro,.quote-card--free .price-per{color:#D5DAE5;}

/* Cotizador · Expediente: $0 de mayor tamaño que los precios de pago, borde más grueso, nota antes del botón para alinear los tres botones */
.quote-card--free .price-amount{font-size:clamp(3rem,2.4rem + 2.5vw,4.25rem);}
.price-card.quote-card--free,.price-card.quote-card--free[data-featured]{border-width:3px;}
.quote-card--free .btn-primary{box-shadow:0 10px 28px -8px rgba(240,160,75,.75);}
.quote-card--free .quote-micro{margin:0;text-align:center;}
/* prueba-14 (forja, 2026-10-18): leyenda de la prueba con presencia (check + peso 500 + color mas firme), reserva hasta 2 lineas sin encimarse al boton; en el cotizador va pegada al boton */
.planes-home .price-card,.planes-precios-grid .price-card{padding-block-end:3.75rem;}
.cta-micro{inset-block-end:1rem;line-height:1.3;font-weight:500;color:#3D455A;text-wrap:balance;}
.cta-micro::before{content:"\2713\00a0";color:var(--accent);font-weight:700;}
.quote-card:not(.quote-card--free) .quote-micro{margin-block:auto .7rem;text-align:center;font-weight:500;color:#E3E7F0;}
.quote-card:not(.quote-card--free)>.btn{margin-block-start:0;}
.quote-card .quote-micro::before{content:"\2713\00a0";color:#F0A04B;font-weight:700;}
/* prueba-14: en /precios/ las tarjetas son angostas y la leyenda baja a 2 lineas; se reserva ese pie para que no pise el boton y todas queden parejas */
.planes-precios-grid .price-card{padding-block-end:5.75rem;}
.planes-precios-grid .cta-micro{inset-block-end:1rem;}
/* prueba-14: en la home, entre 896 y 1152 px las tarjetas bajan la leyenda a 2 lineas */
@media (min-width:56rem) and (max-width:72rem){.planes-home .price-card{padding-block-end:5.75rem;}}