/* ============================================================
   VALUA CLINIC — hoja de estilos compartida
   Sistema de diseño heredado del prototipo de la home.
   Metodología BEM. CSS sin frameworks. Toda página nueva
   enlaza este fichero; los tokens de :root viven aquí.
   ============================================================ */

     :root {
         --ink: #0F1E26;
         --ink-2: #16303B;
         --ink-3: #23434F;
         --paper: #F2F5F4;
         --paper-2: #FFFFFF;
         --cloud: #E6ECEA;
         --line: rgba(15, 30, 38, .12);
         --line-ink: rgba(255, 255, 255, .13);
         --muted: #566268;
         --muted-ink: #9FB4BC;
         --signal: #1FB98A;
         --signal-200: #8DEBCB;
         --signal-600: #0F7E5C;
         --clay: #DB7A55;

         --font-display: 'Archivo', system-ui, sans-serif;
         --font-body: 'Hanken Grotesk', system-ui, sans-serif;
         --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

         --wrap: 1160px;
         --r: 14px;
         --ease: cubic-bezier(.2, .7, .2, 1);
     }

     *,
     *::before,
     *::after {
         box-sizing: border-box;
     }

     html {
         scroll-behavior: smooth;
     }

     @media (prefers-reduced-motion:reduce) {
         html {
             scroll-behavior: auto;
         }
     }

     body {
         margin: 0;
         font-family: var(--font-body);
         font-size: 1.075rem;
         line-height: 1.62;
         color: var(--ink);
         background: var(--paper);
         -webkit-font-smoothing: antialiased;
         text-rendering: optimizeLegibility;
     }

     h1,
     h2,
     h3 {
         font-family: var(--font-display);
         margin: 0;
         line-height: 1.05;
         letter-spacing: -.02em;
     }

     p {
         margin: 0;
     }

     a {
         color: inherit;
     }

     img,
     svg {
         display: block;
         max-width: 100%;
     }

     /* ---- utilidades de layout ---- */
     .wrap {
         width: 100%;
         max-width: var(--wrap);
         margin-inline: auto;
         padding-inline: 24px;
     }

     .eyebrow {
         font-family: var(--font-mono);
         font-size: .74rem;
         font-weight: 500;
         letter-spacing: .16em;
         text-transform: uppercase;
         color: var(--signal-600);
         display: inline-flex;
         align-items: center;
         gap: .6em;
         margin: 0 0 22px;
     }

     .eyebrow::before {
         content: "";
         width: 26px;
         height: 1px;
         background: currentColor;
         opacity: .5;
     }

     .eyebrow--ink {
         color: var(--signal-200);
     }

     /* skip link */
     .skip {
         position: absolute;
         left: 16px;
         top: -60px;
         background: var(--ink);
         color: #fff;
         padding: 10px 16px;
         border-radius: 8px;
         font-family: var(--font-mono);
         font-size: .85rem;
         z-index: 100;
         transition: top .2s var(--ease);
     }

     .skip:focus {
         top: 16px;
     }

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

     /* accesible solo para lectores de pantalla */
     .visually-hidden {
         position: absolute;
         width: 1px;
         height: 1px;
         padding: 0;
         margin: -1px;
         overflow: hidden;
         clip: rect(0, 0, 0, 0);
         white-space: nowrap;
         border: 0;
     }

     /* ============================================================
BOTONES
============================================================ */
     .button {
         --bg: var(--ink);
         --fg: #fff;
         position: relative;
         display: inline-flex;
         align-items: center;
         gap: .6em;
         font-family: var(--font-mono);
         font-size: .9rem;
         font-weight: 500;
         letter-spacing: .02em;
         padding: 15px 24px;
         border-radius: 100px;
         border: 1px solid var(--bg);
         background: var(--bg);
         color: var(--fg);
         text-decoration: none;
         cursor: pointer;
         overflow: hidden;
         isolation: isolate;
         transition: transform .25s var(--ease), box-shadow .25s var(--ease);
     }

     .button__arrow {
         transition: transform .3s var(--ease);
     }

     .button::before {
         content: "";
         position: absolute;
         inset: 0;
         z-index: -1;
         background: var(--signal);
         transform: translateX(-101%);
         transition: transform .4s var(--ease);
     }

     .button:hover {
         transform: translateY(-2px);
     }

     .button:hover::before {
         transform: translateX(0);
     }

     .button:hover .button__arrow {
         transform: translateX(4px);
     }

     .button--signal {
         --bg: var(--signal);
         --fg: var(--ink);
         border-color: var(--signal);
     }

     .button--signal::before {
         background: #fff;
     }

     .button--ghost {
         --bg: transparent;
         --fg: var(--ink);
         border-color: var(--line);
     }

     .button--ghost::before {
         background: var(--ink);
     }

     .button--ghost:hover {
         color: #fff;
     }

     .button--on-ink {
         --bg: var(--signal);
         --fg: var(--ink);
     }

     .button--ghost-ink {
         --bg: transparent;
         --fg: #fff;
         border-color: var(--line-ink);
     }

     .button--ghost-ink::before {
         background: #fff;
     }

     .button--ghost-ink:hover {
         color: var(--ink);
     }

     @media (prefers-reduced-motion:reduce) {

         .button,
         .button::before,
         .button__arrow {
             transition: none;
         }

         .button:hover {
             transform: none;
         }
     }

     /* ============================================================
HEADER
============================================================ */
     .site-header {
         position: sticky;
         top: 0;
         z-index: 50;
         background: rgba(242, 245, 244, .82);
         backdrop-filter: saturate(140%) blur(12px);
         border-bottom: 1px solid var(--line);
     }

     /* evita que el header sticky tape el destino al saltar a una ancla (WCAG 2.4.11) */
     [id] {
         scroll-margin-top: 90px;
     }

     .site-header__inner {
         display: flex;
         align-items: center;
         justify-content: space-between;
         min-height: 70px;
     }

     .brand {
         display: inline-flex;
         align-items: center;
         gap: 11px;
         text-decoration: none;
         font-family: var(--font-display);
         font-weight: 800;
         letter-spacing: -.02em;
         font-size: 1.18rem;
     }

     .brand__mark {
         width: 30px;
         height: 30px;
         border-radius: 8px;
         background: var(--ink);
         position: relative;
         flex: none;
     }

     .brand__mark::after {
         content: "";
         position: absolute;
         inset: 0;
         margin: auto;
         width: 11px;
         height: 11px;
         border-radius: 50%;
         background: var(--signal);
         box-shadow: 0 0 0 0 rgba(31, 185, 138, .55);
         animation: pulse 2.6s var(--ease) infinite;
     }

     @keyframes pulse {
         0% {
             box-shadow: 0 0 0 0 rgba(31, 185, 138, .5);
         }

         70% {
             box-shadow: 0 0 0 9px rgba(31, 185, 138, 0);
         }

         100% {
             box-shadow: 0 0 0 0 rgba(31, 185, 138, 0);
         }
     }

     .brand__tail {
         color: var(--signal-600);
     }

     .nav {
         display: flex;
         align-items: center;
         gap: 30px;
     }

     .nav__list {
         display: flex;
         align-items: center;
         gap: 26px;
         list-style: none;
         margin: 0;
         padding: 0;
         font-size: .95rem;
     }

     .nav__link {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         padding-block: 10px;
         text-decoration: none;
         color: var(--muted);
         font-weight: 500;
         cursor: pointer;
         transition: color .2s var(--ease);
     }

     .nav__link:hover {
         color: var(--ink);
     }

     /* ---- submenú (p.ej. Especialidades), vía <details>/<summary> nativo:
        funciona con o sin JS y anuncia el estado abierto/cerrado por defecto ---- */
     .nav__details {
         position: relative;
     }

     .nav__summary {
         list-style: none;
     }

     .nav__summary::-webkit-details-marker {
         display: none;
     }

     .nav__caret {
         width: 10px;
         height: 7px;
         stroke: currentColor;
         fill: none;
         stroke-width: 1.6;
         flex: none;
         transition: transform .2s var(--ease);
     }

     .nav__details[open]>.nav__summary .nav__caret {
         transform: rotate(180deg);
     }

     .nav__submenu {
         list-style: none;
         margin: 0;
         padding: 0;
         display: grid;
         gap: 2px;
     }

     .nav__sublink {
         display: block;
         text-decoration: none;
         color: var(--muted);
         transition: color .2s var(--ease), background .2s var(--ease);
     }

     .nav__sublink:hover {
         color: var(--ink);
     }

     /* ---- toggle hamburguesa: solo se muestra en mobile y solo si hay JS
        (sin JS, el <nav> ya se ve siempre — ver media query de abajo) ---- */
     .nav-toggle {
         display: none;
         align-items: center;
         justify-content: center;
         width: 44px;
         height: 44px;
         padding: 0;
         border: 1px solid var(--line);
         border-radius: 10px;
         background: transparent;
         color: var(--ink);
         cursor: pointer;
         flex: none;
     }

     .nav-toggle__box {
         position: relative;
         width: 18px;
         height: 12px;
         flex: none;
     }

     .nav-toggle__bar {
         position: absolute;
         left: 0;
         right: 0;
         height: 2px;
         background: currentColor;
         border-radius: 2px;
         transition: transform .25s var(--ease), opacity .25s var(--ease), top .25s var(--ease);
     }

     .nav-toggle__bar:nth-child(1) {
         top: 0;
     }

     .nav-toggle__bar:nth-child(2) {
         top: 5px;
     }

     .nav-toggle__bar:nth-child(3) {
         top: 10px;
     }

     .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
         top: 5px;
         transform: rotate(45deg);
     }

     .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
         opacity: 0;
     }

     .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
         top: 5px;
         transform: rotate(-45deg);
     }

     @media (min-width:861px) {

         /* dropdown flotante del submenú en desktop */
         .nav__submenu {
             position: absolute;
             top: calc(100% + 14px);
             left: 0;
             min-width: 230px;
             background: var(--paper-2);
             border: 1px solid var(--line);
             border-radius: 12px;
             padding: 8px;
             box-shadow: 0 24px 48px -24px rgba(15, 30, 38, .35);
         }

         .nav__sublink {
             padding: 10px 12px;
             border-radius: 8px;
             font-size: .92rem;
         }

         .nav__sublink:hover {
             background: var(--cloud);
         }
     }

     @media (max-width:860px) {
         .js .nav-toggle {
             display: inline-flex;
         }

         /* Sin JS: el <nav> se ve siempre, apilado a ancho completo bajo el
            header (el header envuelve línea al no caber brand + nav). Con
            JS, el script añade la clase .js al <html> y estas reglas
            esconden el <nav> detrás del botón hamburguesa (misma
            convención que .js .reveal). */
         .site-header__inner {
             flex-wrap: wrap;
         }

         .nav {
             flex-direction: column;
             align-items: stretch;
             gap: 0;
             width: 100%;
         }

         .js .nav {
             display: none;
             position: absolute;
             top: 100%;
             left: 0;
             right: 0;
             width: auto;
             background: var(--paper-2);
             border-bottom: 1px solid var(--line);
             box-shadow: 0 24px 48px -28px rgba(15, 30, 38, .35);
             padding: 8px 0 24px;
             max-height: calc(100vh - 70px);
             overflow-y: auto;
         }

         .js .nav.is-open {
             display: flex;
         }

         .nav__list {
             flex-direction: column;
             align-items: stretch;
             gap: 0;
             padding-inline: 24px;
             font-size: 1.02rem;
         }

         .nav__link {
             padding-block: 14px;
             border-bottom: 1px solid var(--line);
             color: var(--ink);
         }

         .nav__details[open] {
             padding-bottom: 4px;
         }

         .nav__submenu {
             padding: 2px 0 10px 18px;
         }

         .nav__sublink {
             padding-block: 10px;
         }

         .nav__cta {
             margin: 16px 24px 0;
             justify-content: center;
         }
     }

     /* ============================================================
SECCIONES (rejilla vertical)
============================================================ */
     .section {
         padding-block: clamp(70px, 9vw, 120px);
     }

     .section--ink {
         background: var(--ink);
         color: #fff;
     }

     .section--tight {
         padding-block: clamp(54px, 6vw, 80px);
     }

     .section__head {
         max-width: 640px;
         margin-bottom: 56px;
     }

     .section--center .section__head {
         margin-inline: auto;
         text-align: center;
     }

     .section__title {
         font-size: clamp(1.9rem, 3.6vw, 3rem);
         font-weight: 700;
     }

     .section__lead {
         margin-top: 20px;
         font-size: 1.16rem;
         color: var(--muted);
     }

     .section--ink .section__lead {
         color: var(--muted-ink);
     }

     /* ============================================================
HERO
============================================================ */
     .hero {
         background:
             radial-gradient(120% 90% at 82% 8%, #16323E 0%, var(--ink) 46%),
             var(--ink);
         color: #fff;
         overflow: hidden;
         position: relative;
     }

     .hero__grid {
         display: grid;
         grid-template-columns: 1.05fr .95fr;
         gap: 64px;
         align-items: center;
         padding-block: clamp(78px, 10vw, 132px);
     }

     .hero__title {
         font-size: clamp(2.5rem, 5.2vw, 4.4rem);
         font-weight: 800;
         letter-spacing: -.03em;
     }

     .hero__title em {
         font-style: normal;
         color: var(--signal-200);
     }

     .hero__sub {
         margin-top: 26px;
         font-size: 1.2rem;
         line-height: 1.55;
         color: var(--muted-ink);
         max-width: 34ch;
     }

     .hero__actions {
         margin-top: 38px;
         display: flex;
         flex-wrap: wrap;
         gap: 14px;
     }

     .hero__note {
         margin-top: 26px;
         font-family: var(--font-mono);
         font-size: .78rem;
         letter-spacing: .04em;
         line-height: 1.5;
         color: var(--muted-ink);
     }

     .hero__note .panel__dot {
         display: inline-block;
         margin-right: 9px;
         vertical-align: middle;
     }

     .hero__note b {
         color: var(--signal-200);
         font-weight: 500;
     }

     /* animación de entrada */
     .js .hero__anim {
         opacity: 0;
         transform: translateY(18px);
         animation: rise .9s var(--ease) forwards;
     }

     .js .hero__anim--1 {
         animation-delay: .05s;
     }

     .js .hero__anim--2 {
         animation-delay: .16s;
     }

     .js .hero__anim--3 {
         animation-delay: .27s;
     }

     .js .hero__anim--4 {
         animation-delay: .38s;
     }

     .js .hero__anim--5 {
         animation-delay: .5s;
     }

     @keyframes rise {
         to {
             opacity: 1;
             transform: none;
         }
     }

     /* ---- PANEL (elemento firma) ---- */
     .panel {
         background: linear-gradient(180deg, #16303B, #122733);
         border: 1px solid var(--line-ink);
         border-radius: 20px;
         padding: 26px;
         box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .65);
         position: relative;
     }

     .js .hero__panel {
         opacity: 0;
         transform: translateY(26px) scale(.98);
         animation: rise .95s var(--ease) .3s forwards;
     }

     .panel__bar {
         display: flex;
         align-items: center;
         justify-content: space-between;
         font-family: var(--font-mono);
         font-size: .72rem;
         letter-spacing: .14em;
         text-transform: uppercase;
         color: var(--muted-ink);
         padding-bottom: 16px;
         margin-bottom: 18px;
         border-bottom: 1px solid var(--line-ink);
     }

     .panel__live {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         color: var(--signal-200);
     }

     .panel__dot {
         width: 7px;
         height: 7px;
         border-radius: 50%;
         background: var(--signal);
         animation: blink 1.8s steps(1) infinite;
     }

     @keyframes blink {
         50% {
             opacity: .25;
         }
     }

     .panel__flow {
         margin: 4px 0 22px;
     }

     .panel__flow-track {
         width: 100%;
         height: 52px;
     }

     .flow-node {
         font-family: var(--font-mono);
         font-size: 11px;
         fill: #CFE0E6;
         letter-spacing: .06em;
     }

     .flow-line {
         stroke: var(--signal);
         stroke-width: 2;
         fill: none;
         stroke-linecap: round;
     }

     .js .flow-line {
         /* una sola línea continua de 312 unidades (x=4 a x=316); los
            puntos se pintan encima y la tapan, así no hay huecos sueltos
            entre tramos como cuando eran dos <path> independientes */
         stroke-dasharray: 320;
         stroke-dashoffset: 320;
         animation: draw 1.4s var(--ease) .7s forwards;
     }

     @keyframes draw {
         to {
             stroke-dashoffset: 0;
         }
     }

     .flow-blip {
         fill: var(--signal);
     }

     .js .flow-blip {
         opacity: 0;
         animation: blip-in .4s var(--ease) forwards;
     }

     /* cada punto se enciende cuando la línea lo alcanza (posición
        proporcional a lo largo del trazo: llamada, agenda, servicio, factura) */
     .js .flow-blip:nth-of-type(1) {
         animation-delay: .7s;
     }

     .js .flow-blip:nth-of-type(2) {
         animation-delay: 1.2s;
     }

     .js .flow-blip:nth-of-type(3) {
         animation-delay: 1.6s;
     }

     .js .flow-blip:nth-of-type(4) {
         animation-delay: 2.1s;
     }

     @keyframes blip-in {
         to {
             opacity: 1;
         }
     }

     .metric {
         margin-top: 16px;
     }

     .metric__label {
         font-family: var(--font-mono);
         font-size: .72rem;
         letter-spacing: .1em;
         text-transform: uppercase;
         color: var(--muted-ink);
     }

     .metric__row {
         display: flex;
         align-items: baseline;
         gap: 12px;
         margin-top: 8px;
     }

     .metric__from {
         font-family: var(--font-mono);
         color: #C77E64;
         font-size: 1.05rem;
         text-decoration: line-through;
         text-decoration-color: rgba(199, 126, 100, .5);
     }

     .metric__to {
         font-family: var(--font-display);
         font-weight: 800;
         font-size: 2.3rem;
         color: #fff;
         letter-spacing: -.02em;
     }

     .metric__to em {
         font-style: normal;
         color: var(--signal-200);
     }

     .metric__track {
         margin-top: 12px;
         height: 8px;
         border-radius: 100px;
         background: rgba(255, 255, 255, .08);
         overflow: hidden;
     }

     .metric__fill {
         height: 100%;
         border-radius: 100px;
         background: linear-gradient(90deg, var(--signal), var(--signal-200));
         width: 25%;
     }

     .js .metric__fill {
         width: 25%;
         transition: width 1.4s var(--ease) 1s;
     }

     /* ============================================================
PROBLEMA
============================================================ */
     .problem__grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 22px;
     }

     .leak {
         background: var(--paper-2);
         border: 1px solid var(--line);
         border-radius: var(--r);
         padding: 30px 26px;
         transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
     }

     .leak:hover {
         transform: translateY(-4px);
         border-color: var(--signal);
         box-shadow: 0 22px 40px -28px rgba(15, 30, 38, .4);
     }

     .leak__num {
         font-family: var(--font-mono);
         font-size: .8rem;
         color: var(--signal-600);
         letter-spacing: .1em;
     }

     .leak__title {
         font-size: 1.24rem;
         font-weight: 700;
         margin: 14px 0 12px;
         line-height: 1.2;
     }

     .leak__text {
         color: var(--muted);
         font-size: 1.02rem;
     }

     /* ============================================================
SISTEMA (servicios / hub)
============================================================ */
     .system__grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 18px;
     }

     .service {
         display: flex;
         gap: 20px;
         align-items: flex-start;
         padding: 26px;
         border: 1px solid var(--line-ink);
         border-radius: var(--r);
         background: rgba(255, 255, 255, .02);
         text-decoration: none;
         color: #fff;
         transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
     }

     .service:hover {
         transform: translateY(-4px);
         background: rgba(31, 185, 138, .06);
         border-color: var(--signal);
     }

     .service__glyph {
         flex: none;
         width: 46px;
         height: 46px;
         border-radius: 11px;
         display: grid;
         place-items: center;
         background: rgba(31, 185, 138, .12);
         border: 1px solid rgba(31, 185, 138, .3);
     }

     .service__glyph svg {
         width: 22px;
         height: 22px;
         stroke: var(--signal-200);
         fill: none;
         stroke-width: 1.8;
     }

     .service__body {
         flex: 1;
     }

     .service__title {
         font-family: var(--font-display);
         font-weight: 700;
         font-size: 1.16rem;
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .service__title-arrow {
         color: var(--signal-200);
         transition: transform .3s var(--ease);
     }

     .service:hover .service__title-arrow {
         transform: translate(3px, -3px);
     }

     .service__text {
         margin-top: 8px;
         color: var(--muted-ink);
         font-size: .99rem;
     }

     .system__aside {
         margin-top: 30px;
         font-family: var(--font-mono);
         font-size: .85rem;
         color: var(--muted-ink);
         letter-spacing: .03em;
     }

     .system__aside b {
         color: var(--signal-200);
         font-weight: 500;
     }

     /* ============================================================
PRUEBA / RESULTADOS
============================================================ */
     .proof__grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 22px;
     }

     .result {
         background: var(--ink);
         color: #fff;
         border-radius: 18px;
         padding: 38px 34px;
         position: relative;
         overflow: hidden;
     }

     .result::after {
         content: "";
         position: absolute;
         right: -40px;
         top: -40px;
         width: 150px;
         height: 150px;
         border-radius: 50%;
         background: radial-gradient(circle, rgba(31, 185, 138, .22), transparent 70%);
     }

     .result__label {
         font-family: var(--font-mono);
         font-size: .76rem;
         letter-spacing: .12em;
         text-transform: uppercase;
         color: var(--muted-ink);
     }

     .result__figure {
         font-family: var(--font-display);
         font-weight: 800;
         letter-spacing: -.03em;
         font-size: clamp(2.6rem, 5vw, 3.6rem);
         margin: 14px 0 6px;
     }

     .result__figure em {
         font-style: normal;
         color: var(--signal-200);
     }

     .result__figure .was {
         color: #C77E64;
         text-decoration: line-through;
         text-decoration-color: rgba(199, 126, 100, .5);
         font-size: .55em;
         margin-right: .25em;
     }

     .result__caption {
         color: var(--muted-ink);
         font-size: 1rem;
     }

     .result__tag {
         margin-top: 22px;
         display: inline-block;
         font-family: var(--font-mono);
         font-size: .72rem;
         letter-spacing: .06em;
         color: var(--signal-200);
         border: 1px solid var(--line-ink);
         border-radius: 100px;
         padding: 6px 12px;
     }

     /* ============================================================
TRUST (ingenieros)
============================================================ */
     .trust__grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 22px;
     }

     .claim {
         padding-top: 26px;
         border-top: 2px solid var(--ink);
     }

     .claim__title {
         font-size: 1.28rem;
         font-weight: 700;
         margin-bottom: 12px;
         line-height: 1.2;
     }

     .claim__text {
         color: var(--muted);
     }

     .claim__text q {
         font-style: italic;
         color: var(--ink);
         quotes: "«" "»";
     }

     /* ============================================================
VERTICALES
============================================================ */
     .verticals__grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px;
     }

     .vertical {
         border: 1px solid var(--line);
         border-radius: var(--r);
         padding: 30px 26px;
         background: var(--paper-2);
         text-decoration: none;
         color: inherit;
         transition: transform .3s var(--ease), box-shadow .3s var(--ease);
         display: flex;
         flex-direction: column;
         min-height: 220px;
     }

     .vertical:hover {
         transform: translateY(-4px);
         box-shadow: 0 22px 44px -28px rgba(15, 30, 38, .4);
     }

     .vertical__tag {
         align-self: flex-start;
         font-family: var(--font-mono);
         font-size: .72rem;
         letter-spacing: .08em;
         text-transform: uppercase;
         padding: 5px 11px;
         border-radius: 100px;
         background: rgba(31, 185, 138, .1);
         color: var(--signal-600);
     }

     .vertical__tag--warm {
         background: rgba(219, 122, 85, .12);
         color: var(--clay);
     }

     .vertical__title {
         font-size: 1.32rem;
         font-weight: 700;
         margin: 18px 0 10px;
     }

     .vertical__text {
         color: var(--muted);
         font-size: 1rem;
         flex: 1;
     }

     .vertical__go {
         margin-top: 18px;
         font-family: var(--font-mono);
         font-size: .82rem;
         color: var(--ink);
         display: inline-flex;
         gap: 7px;
         align-items: center;
     }

     .vertical__go span {
         transition: transform .3s var(--ease);
     }

     .vertical:hover .vertical__go span {
         transform: translateX(4px);
     }

     /* ============================================================
PLANES
============================================================ */
     .plans__grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px;
         align-items: stretch;
     }

     .plan {
         border: 1px solid var(--line-ink);
         border-radius: 18px;
         padding: 32px 28px;
         display: flex;
         flex-direction: column;
         background: rgba(255, 255, 255, .02);
     }

     .plan--featured {
         background: linear-gradient(180deg, #173540, #123039);
         border-color: var(--signal);
         box-shadow: 0 30px 60px -34px rgba(31, 185, 138, .4);
     }

     .plan__badge {
         align-self: flex-start;
         margin-bottom: 16px;
         font-family: var(--font-mono);
         font-size: .68rem;
         letter-spacing: .1em;
         text-transform: uppercase;
         color: var(--ink);
         background: var(--signal);
         border-radius: 100px;
         padding: 5px 11px;
     }

     .plan__name {
         font-family: var(--font-display);
         font-weight: 800;
         font-size: 1.5rem;
     }

     .plan__for {
         margin-top: 8px;
         color: var(--muted-ink);
         font-size: .96rem;
         min-height: 2.6em;
     }

     .plan__list {
         list-style: none;
         margin: 22px 0 0;
         padding: 22px 0 0;
         border-top: 1px solid var(--line-ink);
         display: grid;
         gap: 12px;
         flex: 1;
     }

     .plan__list li {
         position: relative;
         padding-left: 26px;
         color: #DCE7EA;
         font-size: .98rem;
     }

     .plan__list li::before {
         content: "";
         position: absolute;
         left: 0;
         top: .45em;
         width: 13px;
         height: 13px;
         background: var(--signal);
         border-radius: 50%;
         box-shadow: inset 0 0 0 2px var(--ink);
     }

     .plan .button {
         margin-top: 26px;
         width: 100%;
         justify-content: center;
     }

     /* ============================================================
CTA sin riesgo
============================================================ */
     .risk__box {
         border: 1px solid var(--line);
         border-radius: 20px;
         background: var(--paper-2);
         padding: clamp(30px, 4vw, 48px);
         display: grid;
         grid-template-columns: 1.2fr 1fr;
         gap: 40px;
         align-items: center;
     }

     .risk__title {
         font-size: clamp(1.6rem, 2.8vw, 2.2rem);
         font-weight: 700;
     }

     .risk__text {
         margin-top: 16px;
         color: var(--muted);
     }

     .risk__points {
         list-style: none;
         margin: 0;
         padding: 0;
         display: grid;
         gap: 16px;
     }

     .risk__points li {
         display: flex;
         gap: 14px;
         align-items: flex-start;
     }

     .risk__check {
         flex: none;
         width: 26px;
         height: 26px;
         border-radius: 50%;
         background: var(--ink);
         display: grid;
         place-items: center;
         margin-top: 2px;
     }

     .risk__check svg {
         width: 14px;
         height: 14px;
         stroke: var(--signal);
         fill: none;
         stroke-width: 2.4;
     }

     .risk__points b {
         display: block;
         font-weight: 700;
     }

     .risk__points span {
         color: var(--muted);
         font-size: .96rem;
     }

     /* ============================================================
FAQ
============================================================ */
     .faq__list {
         max-width: 780px;
         margin-inline: auto;
     }

     .faq__item {
         border-bottom: 1px solid var(--line);
     }

     .faq__item summary {
         list-style: none;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 20px;
         padding: 26px 0;
         font-family: var(--font-display);
         font-weight: 700;
         font-size: 1.18rem;
     }

     .faq__item summary::-webkit-details-marker {
         display: none;
     }

     .faq__sign {
         flex: none;
         width: 26px;
         height: 26px;
         position: relative;
     }

     .faq__sign::before,
     .faq__sign::after {
         content: "";
         position: absolute;
         inset: 0;
         margin: auto;
         background: var(--signal-600);
         border-radius: 2px;
         transition: transform .3s var(--ease);
     }

     .faq__sign::before {
         width: 14px;
         height: 2px;
     }

     .faq__sign::after {
         width: 2px;
         height: 14px;
     }

     .faq__item[open] .faq__sign::after {
         transform: rotate(90deg) scaleX(0);
     }

     .faq__answer {
         padding: 0 46px 28px 0;
         color: var(--muted);
         font-size: 1.05rem;
     }

     /* ============================================================
CTA final + FORM
============================================================ */
     .finale__grid {
         display: grid;
         grid-template-columns: 1.05fr .95fr;
         gap: 56px;
         align-items: center;
     }

     .finale__title {
         font-size: clamp(2rem, 4vw, 3.1rem);
         font-weight: 800;
         letter-spacing: -.03em;
     }

     .finale__title em {
         font-style: normal;
         color: var(--signal-200);
     }

     .finale__text {
         margin-top: 22px;
         color: var(--muted-ink);
         font-size: 1.14rem;
         max-width: 38ch;
     }

     .finale__meta {
         margin-top: 30px;
         display: flex;
         flex-wrap: wrap;
         gap: 26px;
         font-family: var(--font-mono);
         font-size: .86rem;
         color: var(--muted-ink);
     }

     .finale__meta a {
         color: var(--signal-200);
         text-decoration: none;
     }

     .form {
         background: var(--paper-2);
         border-radius: 20px;
         padding: 32px;
         color: var(--ink);
     }

     .form__field {
         margin-bottom: 18px;
     }

     .form__label {
         display: block;
         font-family: var(--font-mono);
         font-size: .76rem;
         letter-spacing: .06em;
         text-transform: uppercase;
         color: var(--muted);
         margin-bottom: 8px;
     }

     .form__input {
         width: 100%;
         font-family: var(--font-body);
         font-size: 1rem;
         padding: 13px 15px;
         border: 1px solid var(--line);
         border-radius: 10px;
         background: var(--paper);
         color: var(--ink);
         transition: border-color .2s var(--ease), background .2s var(--ease);
     }

     .form__input:focus {
         outline: none;
         border-color: var(--signal);
         background: #fff;
     }

     .form .button {
         width: 100%;
         justify-content: center;
         margin-top: 6px;
     }

     .form__legal {
         margin-top: 14px;
         font-size: .82rem;
         color: var(--muted);
         text-align: center;
     }

     /* ============================================================
FOOTER
============================================================ */
     .site-footer {
         background: var(--ink);
         color: var(--muted-ink);
         padding-block: 56px 40px;
         border-top: 1px solid var(--line-ink);
     }

     .site-footer__grid {
         display: grid;
         grid-template-columns: 1.4fr 1fr 1fr;
         gap: 40px;
     }

     .site-footer__brand {
         color: #fff;
         font-family: var(--font-display);
         font-weight: 800;
         font-size: 1.3rem;
     }

     .site-footer__desc {
         margin-top: 14px;
         max-width: 34ch;
         font-size: .95rem;
     }

     .site-footer__col h3 {
         font-family: var(--font-mono);
         font-weight: 500;
         font-size: .76rem;
         letter-spacing: .12em;
         text-transform: uppercase;
         color: var(--muted-ink);
         margin-bottom: 16px;
     }

     .site-footer__col ul {
         list-style: none;
         margin: 0;
         padding: 0;
         display: grid;
         gap: 11px;
     }

     .site-footer__col a {
         color: #CBD9DE;
         text-decoration: none;
         font-size: .96rem;
         transition: color .2s var(--ease);
     }

     .site-footer__col a:hover {
         color: var(--signal-200);
     }

     .site-footer__bottom {
         margin-top: 44px;
         padding-top: 22px;
         border-top: 1px solid var(--line-ink);
         display: flex;
         justify-content: space-between;
         gap: 20px;
         flex-wrap: wrap;
         font-family: var(--font-mono);
         font-size: .78rem;
     }

     /* honeypot anti-spam: oculto para humanos, visible para bots ingenuos.
        No usamos display:none (algunos bots lo detectan y lo saltan). */
     .hp {
         position: absolute;
         left: -9999px;
         width: 1px;
         height: 1px;
         overflow: hidden;
     }

     /* estados del formulario (envío a HighLevel) */
     .form__legal--ok {
         color: var(--signal-600);
         font-weight: 600;
     }

     .form__legal--err {
         color: var(--clay);
         font-weight: 600;
     }

     /* ============================================================
BOOKING — popup del calendario (HighLevel)
============================================================ */
     .booking {
         width: min(760px, 94vw);
         max-height: 92vh;
         padding: 0;
         border: 1px solid var(--line);
         border-radius: 18px;
         background: var(--paper-2);
         color: var(--ink);
         overflow: hidden;
         box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6);
     }

     .booking::backdrop {
         background: rgba(15, 30, 38, .55);
         backdrop-filter: saturate(140%) blur(3px);
     }

     .booking__bar {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 16px;
         padding: 15px 20px;
     }

     .booking__title {
         font-family: var(--font-display);
         font-weight: 700;
         font-size: 1.05rem;
     }

     .booking__close {
         flex: none;
         width: 38px;
         height: 38px;
         display: grid;
         place-items: center;
         padding: 0;
         border: 1px solid var(--line);
         border-radius: 10px;
         background: transparent;
         color: var(--ink);
         cursor: pointer;
         font-size: 1.05rem;
         line-height: 1;
         transition: background .2s var(--ease);
     }

     .booking__close:hover {
         background: var(--cloud);
     }

     .booking__body {
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
         max-height: calc(92vh - 70px);
     }

     .booking__body iframe {
         display: block;
         width: 100%;
         border: 0;
         min-height: 640px;
     }

     .booking[open] {
         animation: booking-in .28s var(--ease);
     }

     @keyframes booking-in {
         from {
             opacity: 0;
             transform: translateY(10px) scale(.99);
         }

         to {
             opacity: 1;
             transform: none;
         }
     }

     @media (prefers-reduced-motion: reduce) {
         .booking[open] {
             animation: none;
         }
     }

     /* ============================================================
REVEAL (scroll)
============================================================ */
     .js .reveal {
         opacity: 0;
         transform: translateY(26px);
         transition: opacity .7s var(--ease), transform .7s var(--ease);
     }

     .js .reveal.is-visible {
         opacity: 1;
         transform: none;
     }

     .js .reveal--d1 {
         transition-delay: .08s;
     }

     .js .reveal--d2 {
         transition-delay: .16s;
     }

     .js .reveal--d3 {
         transition-delay: .24s;
     }

     /* ============================================================
RESPONSIVE
============================================================ */
     @media (max-width:960px) {

         .hero__grid,
         .finale__grid {
             grid-template-columns: 1fr;
             gap: 48px;
         }

         .problem__grid,
         .trust__grid,
         .verticals__grid,
         .plans__grid {
             grid-template-columns: 1fr;
         }

         .system__grid,
         .proof__grid {
             grid-template-columns: 1fr;
         }

         .risk__box {
             grid-template-columns: 1fr;
             gap: 30px;
         }

         .site-footer__grid {
             grid-template-columns: 1fr 1fr;
         }

         .hero__sub {
             max-width: none;
         }
     }

     @media (max-width:520px) {
         .wrap {
             padding-inline: 18px;
         }

         .site-footer__grid {
             grid-template-columns: 1fr;
         }

         .hero__actions {
             flex-direction: column;
             align-items: stretch;
         }

         .hero__actions .button {
             justify-content: center;
         }

         .site-header .button {
             padding: 10px 16px;
             font-size: .78rem;
             gap: .4em;
         }
     }

     @media (prefers-reduced-motion:reduce) {

         *,
         *::before,
         *::after {
             animation-duration: .001ms !important;
             animation-iteration-count: 1 !important;
             transition-duration: .001ms !important;
         }

         .js .reveal {
             opacity: 1;
             transform: none;
         }

         .js .hero__anim,
         .js .hero__panel {
             opacity: 1;
             transform: none;
         }
     }