/* ===========================================================================
   SKYBIZ VISAS · hoja de las páginas de visa
   ---------------------------------------------------------------------------
   Tres partes, y las fronteras importan:

   1) CABECERA, PIE Y SISTEMA DE SECCIONES — copiados LITERALMENTE del index
      (index.html). Ni un valor reescrito: la barra utilitaria, la
      cabecera flotante, el desplegable de Visas, el menú móvil, el botón
      dorado, el flotante de WhatsApp y el ritmo de secciones son los mismos
      objetos que en la home. Si algo cambia allí, se vuelve a copiar aquí.
      No editar esta zona a mano.

   2) COMPOSICIÓN COMPARTIDA — todo lo que empieza por .u-. Es la que usan la
      canadiense y la de Schengen: banner, secciones, FAQ, cierre, pie y barra
      inferior de móvil. No puede pisar nada de la zona 1.

   3) LANDING DE VENTA DE LA VISA AMERICANA — todo lo que empieza por .v-, más
      el modal de WhatsApp (.wam). Es exclusivo de visa-usa.html: esa página
      dejó de ser informativa y se rehízo como página de venta, así que no
      comparte composición con las otras dos. Está al final de la hoja.

   Al reescribir la americana se retiraron ~19 kB de reglas .u- que se quedaron
   sin ninguna página que las usara (la ruta de cuatro etapas, el expediente,
   la oferta editorial, la franja de cifras antigua). Si algo de eso hace falta
   otra vez, está en el historial, no comentado aquí.

   Estas páginas NO cargan el runtime de la home (support.js). Son documentos
   estáticos: el JS son ~500 líneas en assets/main.js, y cada pieza se activa
   solo si su marcado existe en la página.
   =========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · COPIADO DEL INDEX — no editar
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
          --blue-50: #F0F4FF;
          --blue-100: #E1E9FF;
          --blue-200: #B3C6FF;
          --blue-500: #1A56F0;
          --blue-600: #003AE0;
          --blue-700: #002EAF;
          --blue-850: #1C3772;
          --blue-900: #00176B;
          --blue-950: #001536;
          --green-50: #F2F8EA;
          --green-100: #E3F0D2;
          --green-200: #C6E1A6;
          --green-400: #9AC864;
          --green-500: #7BAE3B;
          --green-600: #689537;
          --green-700: #4E7A22;
          --green-800: #3A5C1A;
          /* ── EL amarillo de Skybiz ──────────────────────────────────────
             Uno solo en toda la web. Antes convivían cuatro familias:
             #FFC801 (esta escala), #FFC400 (--gold, el del banner y los
             botones), el latón #97733F de los antetítulos y el ámbar
             #F59E0B de los descuentos. Según la sección, la página se leía
             con un amarillo distinto.
             Los nombres antiguos se conservan como alias porque los usan
             cientos de estilos en línea; todos apuntan al mismo color, así
             que para cambiar el amarillo de marca se toca UNA línea. */
          --gold: #FFC400;
          --gold-100: var(--gold);
          --gold-400: var(--gold);
          --gold-500: var(--gold);
          --gold-600: var(--gold);
          --gold-700: var(--gold);
          --red-600: #C60309;
          --red-700: #A00308;
          --ink-950: #0A0E1A;
          --ink-700: #2B3245;
          --ink-500: #5A6478;
          --ink-400: #8A93A6;
          --ink-200: #DDE1EA;
          --ink-100: #EDEFF4;
          --ink-50: #F6F7FA;
          --white: #FFFFFF;
          --ease: cubic-bezier(.2, .7, .2, 1);
          --shadow-card: 0 2px 0 var(--ink-200), 0 0 0 1px var(--ink-100);
          --shadow-raise: 4px 4px 0 var(--blue-950);
          --shadow-gold: 4px 4px 0 var(--gold-500);
        }

/* Sobre el propio dorado, el anillo dorado sería invisible. */
        .btn-x--gold:focus-visible,
        .sk-deal a:focus-visible {
          outline-color: var(--ink-deep)
        }

:root {
          --paper: #FCFBF9;
          --paper-deep: #F4F2EC;
          --navy: #14263F;
          --navy-hover: #1E3454;
          --navy-soft: #43556E;
          --slate: #5B6879;
          --rule: #E4E0D7;
          --rule-soft: #EFECE4;
          /* --brass (#97733F) y --brass-tint se retiran: eran un segundo
             dorado. Lo que era decorativo —filetes, puntos, subrayados— pasa
             a --gold; lo que era TEXTO pasa a tinta marina, porque el
             amarillo de marca sobre papel claro da 1,6:1 de contraste y no
             se puede leer. El único uso de --brass-tint era el hover del
             desplegable, que ahora usa --paper-deep, un neutro que ya existía
             y es casi el mismo tono. */
          --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
          --sans: 'IBM Plex Sans', system-ui, sans-serif;
          --sk-max: 1240px;
          --sk-gutter: clamp(20px, 4vw, 48px);
        }

.sk-shell {
          max-width: var(--sk-max);
          margin-inline: auto;
          padding-inline: var(--sk-gutter)
        }

/* ── Barra utilitaria ──────────────────────────────────────────────
           Va en el azul de marca (--brand), que es el de la referencia. */
        /* ── v9 · Cabecera flotante ────────────────────────────────────────
           Sobre el banner las dos barras son transparentes y se funden con él;
           a partir de 80px de scroll `html.nav-solida` les devuelve el color.
           Solo se anima el color de fondo y la sombra: nada que mueva layout. */
        .tope {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 60
        }

.sk-util {
          background: var(--brand);
          color: rgba(255, 255, 255, .88);
          font-size: 13px;
          line-height: 1;
          transition: background-color 300ms var(--ease)
        }

/* Estado transparente (arriba del todo, sobre el banner). */
        html:not(.nav-solida) .sk-util {
          background: transparent
        }

.sk-util__inner {
          min-height: 34px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 24px
        }

.sk-util a {
          color: inherit;
          transition: color 200ms var(--ease)
        }

.sk-util a:hover {
          color: #fff
        }

.sk-util__meta {
          display: none;
          align-items: center;
          gap: 20px
        }

.sk-util__social {
          display: flex;
          align-items: center;
          gap: 14px
        }

/* La sede entra más tarde que el correo: es la pieza más larga.
           Los dos selectores van doblados (.sk-util .sk-util__where) a
           propósito: más abajo, `.sk-util__item { display:inline-flex }` tiene
           la MISMA especificidad y está escrito después, así que ganaba y este
           `display:none` no llegaba a aplicarse nunca. Resultado: entre 820 y
           1040 px la dirección de Miami se pintaba encima del correo. */
        .sk-util .sk-util__where {
          display: none;
          align-items: center;
          gap: 20px
        }

@media (min-width:820px) {
  .sk-util__meta {
              display: flex
            }
}

@media (min-width:1040px) {
  .sk-util .sk-util__where {
              display: inline-flex
            }
}

/* ── Cabecera ────────────────────────────────────────────────────── */
        .sk-header {
          position: relative;
          z-index: 60;
          height: 72px;
          /* Blanco puro, no el crema del resto de la página. El archivo del
             logo entregado no tiene transparencia: sobre crema se recortaba un
             rectángulo blanco a su alrededor. Igualando la cabecera al fondo
             del propio logo, el recuadro desaparece sin tocar el archivo. */
          background: rgba(255, 255, 255, .93);
          -webkit-backdrop-filter: saturate(1.6) blur(14px);
          backdrop-filter: saturate(1.6) blur(14px);
          border-bottom: 1px solid var(--rule);
          transition: height 240ms var(--ease), box-shadow 240ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease)
        }

/* ── Estado transparente sobre el banner ───────────────────────────
           Todo lo que en claro es tinta marina pasa a blanco, y el botón
           sólido pasa a dorado: sobre el marino del hero, un botón marino
           habría desaparecido. */
        html:not(.nav-solida) .sk-header {
          background: transparent;
          border-bottom-color: transparent;
          -webkit-backdrop-filter: none;
          backdrop-filter: none
        }

html:not(.nav-solida) .sk-nav__link,
        html:not(.nav-solida) .sk-quiet,
        html:not(.nav-solida) .sk-burger {
          color: #fff
        }

html:not(.nav-solida) .sk-nav__link:hover,
        html:not(.nav-solida) .sk-nav__item:focus-within>.sk-nav__link,

        html:not(.nav-solida) .sk-burger {
          border-color: rgba(255, 255, 255, .45)
        }

html:not(.nav-solida) .sk-burger span {
          background: #fff
        }

html:not(.nav-solida) .sk-header .sk-btn--solid {
          background: var(--gold);
          color: var(--ink-deep)
        }

/* Con un solo amarillo, el hover ya no puede aclarar el fondo. La
           respuesta pasa a una sombra del propio amarillo, que es el mismo
           recurso que usa el botón del banner. */
        html:not(.nav-solida) .sk-header .sk-btn--solid:hover {
          background: var(--gold);
          color: var(--ink-deep);
          box-shadow: 0 12px 28px -12px rgba(255, 196, 0, .85)
        }

/* v14 · Esta regla describía una placa blanca bajo el logotipo que en
           realidad nunca llegó a declararse: el archivo tiene canal alfa y no
           la necesita. Se conserva el aislamiento —cuesta cero— para que
           cualquier mezcla que alguien añada mañana dentro de la ranura no
           salga a buscar el marino del banner. */
        .sk-logo {
          isolation: isolate
        }

.sk-header.nav--compacta {
          height: 60px;
          box-shadow: 0 1px 24px rgba(20, 38, 63, .07)
        }

@media (min-width:1024px) {
  .sk-header {
              height: 88px
            }
  .sk-header.nav--compacta {
              height: 72px
            }
}

.sk-header__inner {
          height: 100%;
          display: flex;
          align-items: center;
          gap: clamp(16px, 2.4vw, 40px)
        }

/* v13 · Logo izquierda · menú al medio · un botón a la derecha.
           El <nav> se lleva el espacio sobrante y centra sus enlaces, así que
           el menú queda ópticamente centrado sin posicionarlo en absoluto y
           sin poder solaparse con el logo ni con el botón. */
        .sk-nav {
          flex: 1 1 auto;
          justify-content: center;
          min-width: 0
        }

.sk-actions {
          flex: 0 0 auto;
          margin-left: 0
        }

/* Los dos logotipos oficiales ocupan el mismo hueco y se cruzan por
           opacidad: sin salto de layout y sin segunda descarga al hacer scroll. */
        .sk-logo__img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: left center;
          transition: opacity 300ms var(--ease)
        }

html:not(.nav-solida) .sk-logo__img--color,
        html.nav-solida .sk-logo__img--blanco {
          opacity: 0
        }

/* ── Marca ───────────────────────────────────────────────────────── */
        .sk-brand {
          display: flex;
          align-items: baseline;
          gap: 9px;
          flex: 0 0 auto;
          color: var(--navy)
        }

.sk-brand:hover {
          color: var(--navy)
        }

.sk-brand__mark {
          width: 9px;
          height: 9px;
          border-radius: 50%;
          background: var(--gold);
          flex: 0 0 auto;
          transform: translateY(-1px)
        }

.sk-brand__name {
          font-family: var(--serif);
          font-weight: 600;
          font-size: 25px;
          letter-spacing: -.015em;
          line-height: 1
        }

.sk-brand__sub {
          display: none;
          font-family: var(--sans);
          font-weight: 500;
          font-size: 10px;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: var(--navy-soft);
          transform: translateY(-2px)
        }

@media (min-width:600px) {
  .sk-brand__sub {
              display: inline
            }
}

/* ── Navegación principal ────────────────────────────────────────── */
        /* Marca y navegación forman un solo grupo a la izquierda; las acciones
           se van a la derecha. Evita el menú centrado de plantilla. */
        .sk-nav {
          display: none;
          align-items: center;
          gap: clamp(4px, 1.1vw, 14px)
        }

.sk-nav__link {
          position: relative;
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 8px 10px;
          border-radius: 4px;
          font-family: var(--sans);
          font-weight: 500;
          font-size: 15px;
          line-height: 1;
          color: var(--navy-soft);
          white-space: nowrap;
          transition: color 200ms var(--ease)
        }

.sk-nav__link:hover,
        .sk-nav__item:focus-within>.sk-nav__link {
          color: var(--navy)
        }

/* El filete de subrayado crece desde el centro; solo transform. */
        .sk-nav__link::after {
          content: '';
          position: absolute;
          left: 10px;
          right: 10px;
          bottom: 1px;
          height: 1px;
          background: var(--gold);
          transform: scaleX(0);
          transition: transform 240ms var(--ease)
        }

.sk-nav__link:hover::after,
        .sk-nav__item:focus-within>.sk-nav__link::after {
          transform: scaleX(1)
        }

.sk-nav__caret {
          transition: transform 240ms var(--ease)
        }

.sk-nav__item:hover .sk-nav__caret,
        .sk-nav__item:focus-within .sk-nav__caret {
          transform: rotate(180deg)
        }

@media (min-width:1024px) {
  .sk-nav {
              display: flex
            }
}

/* ── Desplegable de Visas ────────────────────────────────────────── */
        .sk-nav__item {
          position: relative
        }

.sk-menu {
          position: absolute;
          top: calc(100% + 14px);
          left: 50%;
          width: 384px;
          margin: 0;
          padding: 8px;
          list-style: none;
          background: var(--paper);
          border: 1px solid var(--rule);
          border-radius: 8px;
          box-shadow: 0 24px 48px -20px rgba(20, 38, 63, .22), 0 2px 8px rgba(20, 38, 63, .05);
          opacity: 0;
          visibility: hidden;
          transform: translate(-50%, -6px);
          transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms
        }

/* Puente invisible: el cursor puede cruzar los 14px de hueco sin cerrarlo. */
        .sk-menu::before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: -15px;
          height: 15px
        }

.sk-nav__item:hover .sk-menu,
        .sk-nav__item:focus-within .sk-menu {
          opacity: 1;
          visibility: visible;
          transform: translate(-50%, 0);
          transition-delay: 0s
        }

.sk-menu__link {
          display: grid;
          grid-template-columns: 30px 1fr;
          gap: 2px 14px;
          padding: 13px 14px;
          border-radius: 5px;
          color: var(--navy);
          transition: background-color 200ms var(--ease)
        }

.sk-menu__link:hover {
          background: var(--paper-deep);
          color: var(--navy)
        }

.sk-menu__flag {
          grid-row: span 2;
          align-self: center;
          width: 30px;
          height: 21px;
          border-radius: 3px;
          overflow: hidden;
          position: relative;
          box-shadow: 0 0 0 1px var(--rule)
        }

.sk-menu__title {
          font-family: var(--sans);
          font-weight: 600;
          font-size: 15px;
          line-height: 1.3
        }

.sk-menu__desc {
          font-family: var(--sans);
          font-size: 13px;
          line-height: 1.45;
          color: var(--slate)
        }

.sk-menu__foot {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          margin-top: 4px;
          padding: 12px 14px 6px;
          border-top: 1px solid var(--rule-soft);
          font-family: var(--sans);
          font-size: 13px;
          color: var(--slate)
        }

.sk-menu__foot a {
          color: var(--navy);
          font-weight: 600;
          text-decoration: underline;
          text-underline-offset: 3px;
          text-decoration-color: var(--rule)
        }

.sk-menu__foot a:hover {
          text-decoration-color: var(--gold)
        }

/* ── Acciones de cabecera ────────────────────────────────────────── */
        .sk-actions {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-left: auto;
          flex: 0 0 auto
        }

/* En pantallas estrechas el CTA de cabecera cede tamaño al menú.
           v14 · Y también al logotipo. En móvil la ranura de la marca NO está
           limitada por su alto sino por el ancho que le dejan el CTA y el
           botón de menú: recortar el archivo no la agranda ni un píxel si no
           se le devuelve ancho. Doce píxeles del CTA y seis del hueco entre
           piezas valen un 20 % más de marca, y el botón conserva sus 42 px de
           alto táctil. */
        @media (max-width:639px) {
  .sk-header .sk-btn {
              height: 42px;
              padding: 0 12px;
              font-size: 13.5px
            }
  .sk-actions {
              gap: 8px
            }
  .sk-header__inner {
              gap: 10px
            }
}

.sk-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          height: 46px;
          padding: 0 22px;
          border: 1px solid transparent;
          border-radius: 6px;
          font-family: var(--sans);
          font-weight: 600;
          font-size: 15px;
          line-height: 1;
          white-space: nowrap;
          cursor: pointer;
          transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease)
        }

.sk-btn--solid {
          background: var(--navy);
          color: #fff
        }

.sk-btn--solid:hover {
          background: var(--navy-hover);
          color: #fff
        }

.sk-btn--ghost {
          background: transparent;
          border-color: var(--rule);
          color: var(--navy)
        }

.sk-btn--ghost:hover {
          border-color: var(--navy);
          background: transparent;
          color: var(--navy)
        }

.sk-burger {
          display: inline-grid;
          place-items: center;
          gap: 5px;
          width: 44px;
          height: 44px;
          background: none;
          border: 1px solid var(--rule);
          border-radius: 5px;
          cursor: pointer
        }

.sk-burger span {
          width: 17px;
          height: 1.5px;
          background: var(--navy);
          display: block
        }

@media (min-width:1024px) {
  .sk-burger {
              display: none
            }
}

.sk-eyebrow {
          display: flex;
          align-items: center;
          gap: 14px;
          margin: 0;
          font-family: var(--sans);
          font-weight: 600;
          font-size: 11.5px;
          letter-spacing: .17em;
          text-transform: uppercase;
          color: var(--ink-navy)
        }

.sk-eyebrow::before {
          content: '';
          width: 32px;
          height: 1px;
          background: var(--gold);
          flex: 0 0 auto
        }

.hero .ac,
                .sk-sec--ink .ac,
                .sk-close .ac {
                  color: var(--gold)
                }

/* ── Menú móvil ──────────────────────────────────────────────────── */
        .sk-sheet {
          position: fixed;
          inset: 0;
          z-index: 100;
          /* Blanco, por el mismo motivo que la cabecera: el logo va arriba. */
          background: #fff;
          padding: 22px var(--sk-gutter) 32px;
          display: flex;
          flex-direction: column;
          overflow-y: auto
        }

.sk-sheet__head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 22px;
          border-bottom: 1px solid var(--rule)
        }

.sk-sheet__close {
          width: 44px;
          height: 44px;
          display: grid;
          place-items: center;
          background: none;
          border: 1px solid var(--rule);
          border-radius: 5px;
          color: var(--navy);
          font-size: 20px;
          line-height: 1;
          cursor: pointer
        }

.sk-sheet__nav {
          display: flex;
          flex-direction: column;
          margin-top: 8px
        }

.sk-sheet__link {
          padding: 17px 0;
          border-bottom: 1px solid var(--rule-soft);
          font-family: var(--serif);
          font-weight: 400;
          font-size: 27px;
          line-height: 1.15;
          letter-spacing: -.015em;
          color: var(--navy)
        }

.sk-sheet__sub {
          display: flex;
          flex-direction: column;
          gap: 14px;
          padding: 16px 0 18px 18px;
          margin: 0;
          list-style: none;
          border-left: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule-soft)
        }

.sk-sheet__sub a {
          font-family: var(--sans);
          font-weight: 500;
          font-size: 16px;
          color: var(--slate)
        }

.sk-sheet__foot {
          margin-top: auto;
          padding-top: 32px;
          display: flex;
          flex-direction: column;
          gap: 7px;
          font-family: var(--sans);
          font-size: 13.5px;
          color: var(--slate)
        }

/* El foco global usa --blue-200 (#B3C6FF), que pertenece a la paleta
           anterior y desentona dentro de la primera pantalla. Aquí se sustituye
           por un contorno de latón, manteniendo el grosor y la visibilidad. */
        .sk-util :focus-visible,
        .sk-header :focus-visible,
        .sk-hero :focus-visible,
        .sk-sheet :focus-visible {
          outline: 2px solid var(--gold);
          outline-offset: 3px;
          border-radius: 3px;
          box-shadow: none
        }

/* ═══════════════════════════════════════════════════════════════════
           v3 · AZUL DE MARCA EN TODA LA WEB
           ───────────────────────────────────────────────────────────────────
           --brand es el azul de la barra utilitaria del sitio actual. TODO lo
           demás se deriva de él, así que para corregir el tono exacto se cambia
           ESTA línea y nada más: la web entera se re-pinta.

           Debajo se remapean los tokens --blue-* originales. Los cientos de
           estilos en línea que ya usaban var(--blue-600) o var(--blue-950)
           pasan al azul de marca sin tocarlos uno por uno.

           OJO: valor estimado a partir de la captura. Si tienes el hex exacto,
           sustitúyelo aquí.
           ═══════════════════════════════════════════════════════════════════ */
        :root {
          --brand: #0E7490;
          --brand-50: #ECF6F9;
          --brand-100: #D2E9F0;
          --brand-200: #A6D2DE;
          --brand-300: #6FB6C9;
          --brand-500: #1189A8;
          --brand-600: #0C6379;
          --brand-700: #0A5162;
          --brand-800: #08404E;
          --brand-950: #062B36;

          /* Remapeo de la paleta anterior → azul de marca. */
          --blue-50: var(--brand-50);
          --blue-100: var(--brand-100);
          --blue-200: var(--brand-200);
          --blue-500: var(--brand-500);
          --blue-600: var(--brand);
          --blue-700: var(--brand-600);
          --blue-850: var(--brand-700);
          --blue-900: var(--brand-800);
          --blue-950: var(--brand-950);

          /* La primera pantalla se alinea con el mismo azul. */
          --navy: #07323E;
          --navy-hover: var(--brand-700);
          --navy-soft: #3D5A63;
          --slate: #566B72;

          /* El ámbar #F59E0B que antes se reservaba a los descuentos era, en
             la práctica, un tercer amarillo: la banda de "-10%" y el botón
             dorado se veían de dos colores distintos en la misma tarjeta.
             Los tres nombres se conservan porque los usan varias reglas, pero
             ya apuntan al amarillo de marca. El descuento sigue destacando
             por tamaño y por posición, no por tener color propio. */
          --save: var(--gold);
          --save-deep: var(--gold);
          --save-tint: var(--gold);

          /* Verde WhatsApp real: un CTA de WhatsApp en verde WhatsApp se
             reconoce sin leerlo. Antes eran botones dorados. */
          --wa: #25D366;
          --wa-deep: #128C7E;
        }

/* ═══════════════════════════════════════════════════════════════════
           v5 · SISTEMA DE MOTION
           ───────────────────────────────────────────────────────────────────
           Un solo lenguaje para toda la página, no una colección de efectos.

           Tres decisiones que lo sostienen:
           · UNA curva. --mo-ease es una salida suave sin rebote: entra rápido
             y frena largo. Es lo que hace que un movimiento se lea "caro".
           · UNA duración base (--mo-dur, 700ms) con dos variantes. Todo lo que
             se mueve en la página dura 560, 700 u 880ms. Nada más.
           · SOLO transform y opacity. Son las dos propiedades que el navegador
             resuelve en la GPU sin recalcular layout ni repintar. La única
             excepción es .rv-blur, reservada a piezas pequeñas y contadas.

           El estado oculto lo aplica el JS (clase .rv). Si el script no corre,
           o si el sistema pide movimiento reducido, todo queda visible.
           ═══════════════════════════════════════════════════════════════════ */
        :root {
          --mo-ease: cubic-bezier(.22, .61, .36, 1);
          --mo-ease-soft: cubic-bezier(.33, 1, .68, 1);
          --mo-dur: 700ms;
          --mo-dur-s: 560ms;
          --mo-dur-l: 880ms
        }

/* ── Secciones: encabezado común ───────────────────────────────────
            Un solo patrón de encabezado para todas las secciones nuevas: así la
            jerarquía visual se repite y la página se lee, no se descifra. */
        .sk-sec {
          padding-block: clamp(56px, 7vw, 104px)
        }

.sk-sec--tint {
          background: var(--paper-deep)
        }

.sk-sec--ink {
          background: var(--brand-950);
          color: #fff
        }

.sk-head {
          max-width: 62ch
        }

.sk-head__title {
          margin: 18px 0 0;
          font-family: var(--serif);
          font-weight: 400;
          font-size: clamp(30px, 3.7vw, 46px);
          line-height: 1.12;
          letter-spacing: -.02em;
          color: var(--navy);
          text-wrap: balance
        }

.sk-sec--ink .sk-head__title {
          color: #fff
        }

.sk-head__lead {
          margin: 16px 0 0;
          font-family: var(--sans);
          font-size: clamp(16px, 1.2vw, 17.5px);
          line-height: 1.62;
          color: var(--slate)
        }

.sk-sec--ink .sk-head__lead {
          color: rgba(255, 255, 255, .78)
        }

.sk-head__row {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-end;
          justify-content: space-between;
          gap: 24px 40px
        }

.sk-btn--wa {
          background: var(--wa-deep);
          color: #fff
        }

.sk-btn--wa:hover {
          background: #0f6f63;
          color: #fff
        }

/* ── Logo ──────────────────────────────────────────────────────────
           v14 · LA MARCA NO SE LEÍA, Y NO ERA CUESTIÓN DE TAMAÑO DE RANURA.
           El archivo entregado traía la mitad de su alto en aire: dentro de
           sus 480x160 la tinta iba de la fila 33 a la 117, un 52 %. Con la
           ranura en 158x40 y `contain`, la imagen se ajustaba POR ALTURA y se
           dibujaba a 120 px: 38 px de ranura vacíos a la derecha y la palabra
           a 21 px de alto en una cabecera de 88. Se recortó el archivo contra
           su propia tinta (560x108, la tinta ocupa ya el 93 %) y la ranura
           pasa a definirse por ALTO y proporción, no por ancho fijo: así no
           puede volver a sobrar hueco a un lado.

           `flex: 0 1 auto` es la red de seguridad del bug de los 320 px: si
           alguna vez no cabe, el logotipo cede ancho —y `contain` lo redibuja
           más pequeño— en lugar de empujar el botón de menú fuera de la
           pantalla. */
        .sk-logo {
          position: relative;
          width: auto;
          height: clamp(30px, 3.2vw, 40px);
          aspect-ratio: 560 / 108;
          min-width: 0;
          flex: 0 1 auto
        }

/* v14 · El `mix-blend-mode: multiply` que había aquí venía de cuando se
           creía que el archivo entregado no tenía transparencia y había que
           fundir un rectángulo blanco con la cabecera. El archivo SÍ tiene
           canal alfa —el fondo es transparente—, así que la mezcla no hacía
           nada: dentro de .sk-logo, que está aislado, no hay ningún fondo
           contra el que multiplicar. Se retira porque el día que alguien le
           ponga color a esa placa, multiply ennegrecería la marca sin que
           nadie supiera por qué. */
        .sk-logo__img {
          position: absolute;
          inset: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: left center
        }

/* ── Barra utilitaria: variante de la web actual ───────────────────── */
        .sk-util__group {
          display: flex;
          align-items: center;
          gap: 18px;
          min-width: 0
        }

.sk-util__item {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          white-space: nowrap
        }

.sk-util__social a {
          display: grid;
          place-items: center;
          width: 26px;
          height: 26px;
          border-radius: 50%;
          background: rgba(255, 255, 255, .14);
          color: #fff;
          transition: background-color 200ms var(--ease), transform 200ms var(--ease)
        }

.sk-util__social a:hover {
          background: rgba(255, 255, 255, .3);
          transform: translateY(-2px)
        }

.sk-nav-btn {
          width: 42px;
          height: 42px;
          display: grid;
          place-items: center;
          background: var(--paper);
          border: 1px solid var(--rule);
          border-radius: 6px;
          color: var(--navy);
          cursor: pointer;
          transition: border-color 200ms var(--ease), background-color 200ms var(--ease)
        }

.sk-nav-btn:hover {
          border-color: var(--navy);
          background: var(--paper-deep)
        }

.sk-nav-btn:disabled {
          opacity: .35;
          cursor: default;
          border-color: var(--rule);
          background: transparent
        }

/* Con las cintas en movimiento continuo, las flechas sobran: solo
           existen donde la marquesina no se activa. */
        @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sk-nav-btn {
              display: none
            }
}

/* ── Botón flotante de WhatsApp ────────────────────────────────────
           Faltaba por completo. Se sitúa por encima del botón de subir y, en
           móvil, por encima de la barra fija de reserva. */
        .sk-wa {
          position: fixed;
          right: clamp(14px, 1.8vw, 26px);
          bottom: 80px;
          z-index: 80;
          display: inline-flex;
          align-items: center;
          gap: 0;
          height: 56px;
          padding: 0 16px;
          border-radius: 999px;
          background: var(--wa);
          color: #07323E;
          box-shadow: 0 14px 30px -10px rgba(18, 140, 126, .7);
          transition: gap 260ms var(--ease), padding 260ms var(--ease), transform 260ms var(--ease)
        }

.sk-wa:hover {
          color: #07323E;
          transform: translateY(-3px);
          gap: 10px;
          padding-right: 22px
        }

/* La etiqueta se despliega al pasar el cursor: en reposo es un disco. */
        .sk-wa__txt {
          max-width: 0;
          overflow: hidden;
          white-space: nowrap;
          font-family: var(--sans);
          font-weight: 600;
          font-size: 15px;
          transition: max-width 260ms var(--ease)
        }

.sk-wa:hover .sk-wa__txt {
          max-width: 190px
        }

@media (max-width:767px) {
  .sk-wa {
              bottom: 78px;
              height: 52px
            }
}

@media (prefers-reduced-motion:reduce) {
  .sk-wa,
            .sk-wa__txt,
            .sk-step__ico,
            .sk-short__disc {
              transition: none
            }
}

/* ── Logo reconstruido ─────────────────────────────────────────────── */
        .sk-logo__svg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%
        }

/* ═══════════════════════════════════════════════════════════════════
        /* ═══════════════════════════════════════════════════════════════════
           v6 · SISTEMA DE SUPERFICIES
           ───────────────────────────────────────────────────────────────────
           El problema no era el hero: era el ritmo. La página alternaba
           oscuro / claro / oscuro / claro y se leía como cuatro sitios
           apilados. El marino se reserva ahora a tres momentos —hero, CTA
           final y footer— y todo lo de en medio respira en superficies claras
           que se van aclarando y volviendo a asentar.

               HERO            marino profundo
                 ↓ degradado
               VISAS           blanco cálido      s1
               ¿CALIFICAS?     tinte azul         s3
               PROCESO         neutro claro       s2
               RESULTADOS      blanco cálido      s1
               TESTIMONIOS     neutro claro       s2
               PAQUETES        blanco cálido      s1
                 ↓ degradado
               CONTACTO        marino profundo
               FOOTER          marino profundo

           Dos bloques oscuros, uno al principio y otro al final, con todo el
           recorrido claro entre ellos. Las dos fronteras van resueltas con un
           degradado a sangre, no con un corte.
           ═══════════════════════════════════════════════════════════════════ */
        :root {
          --s1: #FBFAF8;
          --s2: #F4F5F8;
          --s3: #EDF1F7;
          --ink-deep: #030B24;
          --ink-navy: #071A4A;
          --gold: #FFC400;
          /* Alias del estado hover. Apunta al MISMO amarillo: un segundo
             tono para el hover seria otro amarillo mas. El botón responde
             con elevacion y sombra, no cambiando de color. */
          --gold-soft: var(--gold);
          --hair: rgba(7, 26, 74, .10);
          --hair-light: rgba(255, 255, 255, .14)
        }

.sk-sec--tint {
          background: var(--s2)
        }

.sk-sec--soft {
          background: var(--s3)
        }

.sk-sec--plain {
          background: var(--s1)
        }

/* El cierre es marino: el itálico dorado del titular debe ser el mismo
           oro del banner, no el ámbar reservado a los descuentos. */
        .sk-close .sk-head__title em {
          color: var(--gold)
        }

.sk-close .sk-head__title {
          margin-bottom: 10px
        }

.sk-close .sk-head__lead {
          margin-top: 18px
        }

/* ═══════════════════════════════════════════════════════════════════
           v6 · HERO EDITORIAL
           ───────────────────────────────────────────────────────────────────
           Composición asimétrica en dos columnas (1.15 / 0.85). El wordmark ya
           no está centrado: ancla la esquina superior izquierda y deja que el
           retrato ocupe la derecha. La línea de credenciales cierra abajo, a
           todo el ancho.

           El wordmark se resuelve SOLO con tipografía: peso, escala, tracking y
           color. Ni sombras, ni contornos, ni degradados animados. "SKYBIZ" va
           apretado (-.03em) y "VISAS" abierto (.28em) — es la misma lógica del
           logotipo, donde VISAS aparece espaciado entre dos filetes.
           ═══════════════════════════════════════════════════════════════════ */
        /* ═══════════════════════════════════════════════════════════════════
           v9 · BANNER
           ───────────────────────────────────────────────────────────────────
           Composición del encargo: el degradado marino cubre SOLO la izquierda,
           donde vive el texto, y se abre hacia la derecha para que la fotografía
           sea protagonista. Nada de retícula, nada de grano, nada de luces
           flotantes: el banner ya no anima nada salvo la entrada del contenido.
           `--tope-h` reserva el alto de la cabecera flotante, que ahora va por
           encima del banner en vez de empujarlo hacia abajo.
           ═══════════════════════════════════════════════════════════════════ */
        :root {
          --tope-h: 106px
        }

@media (min-width:1024px) {
  :root {
              --tope-h: 122px
            }
}

.btn-x {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          height: 56px;
          padding: 0 30px;
          border: 1px solid transparent;
          border-radius: 8px;
          font-family: var(--sans);
          font-weight: 600;
          font-size: 15.5px;
          line-height: 1;
          white-space: nowrap;
          cursor: pointer;
          transition: transform var(--mo-dur-s) var(--mo-ease), box-shadow var(--mo-dur-s) var(--mo-ease), background-color var(--mo-dur-s) var(--mo-ease), border-color var(--mo-dur-s) var(--mo-ease)
        }

.btn-x:hover {
          transform: translateY(-2px)
        }

.btn-x:active {
          transform: translateY(0);
          transition-duration: 90ms
        }

.btn-x--gold {
          background: var(--gold);
          color: var(--ink-deep);
          box-shadow: 0 10px 26px -12px rgba(255, 196, 0, .8)
        }

.btn-x--gold:hover {
          background: var(--gold-soft);
          color: var(--ink-deep);
          box-shadow: 0 18px 40px -14px rgba(255, 196, 0, .9)
        }

@media (prefers-reduced-motion:reduce) {
  .btn-x:hover {
              transform: none
            }
}

@media (prefers-reduced-motion:reduce) {
  .sk-menu,
            .sk-nav__link::after,
            .sk-nav__caret,
            .sk-textlink svg {
              transition-duration: .01ms !important
            }
}

/* ── Añadido imprescindible para la versión estática ──────────────────────
   En la home, .sk-sheet solo existe en el DOM mientras el menú está abierto
   (lo monta <sc-if>). Aquí el panel está siempre presente, así que necesita un
   estado cerrado que allí no hace falta. Es lo ÚNICO que se le añade: ni un
   color, ni una medida, ni una tipografía cambian. */
.sk-sheet {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 280ms var(--mo-ease), transform 280ms var(--mo-ease), visibility 280ms
}

.sk-sheet.abierto {
  visibility: visible;
  opacity: 1;
  transform: none
}


/* ═══════════════════════════════════════════════════════════════════════════
   2 · COMPOSICIÓN DE LA PÁGINA
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   VISA AMERICANA B1/B2 · composición propia de la página
   ---------------------------------------------------------------------------
   Todo lo de arriba es de la home, copiado sin tocar. Lo de aquí abajo es lo
   único que esta página añade, y va prefijado con .u- para que no pueda pisar
   nada del sistema compartido.

   No se define ni un color nuevo: cada valor sale de los tokens de marca.
   El amarillo del botón es --gold (#FFC400), el mismo del banner de la home.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────────────────────
   Misma base que el index, valor por valor. `box-sizing:border-box` no es
   opcional: sin él los rellenos se suman al ancho declarado y en pantallas
   estrechas la página desborda unos píxeles a la derecha. */
* {
  box-sizing: border-box
}

html {
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-950);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden
}

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

a {
  color: inherit;
  text-decoration: none
}

/* El ancla de las secciones tiene que caer por debajo de la cabecera fija. */
section[id] {
  scroll-margin-top: calc(var(--tope-h) + 16px)
}

/* Salto al contenido: visible solo con teclado. */
.u-salto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--ink-deep);
  font-weight: 600
}

.u-salto:focus {
  left: 12px;
  top: 12px
}

/* ═══ 1 · BANNER ══════════════════════════════════════════════════════════
   Una sola pieza centrada: antetítulo, titular, apoyo, botón y precio. La
   fotografía va a sangre debajo, con un velo marino PLANO —no un degradado—
   para que el banner corte limpio contra la sección siguiente. */
.u-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: min(84vh, 720px);
  padding-block: calc(var(--tope-h) + clamp(18px, 2.4vw, 36px)) clamp(48px, 6vw, 84px);
  background: var(--ink-navy);
  color: #fff;
  text-align: center
}

.u-hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: no-repeat 76% 54% / cover;
  will-change: transform
}

/* La fotografía del banner es lo ÚNICO que cambia de una página de visa a
   otra, y vive aquí, con un modificador por destino. NO se declara desde el
   HTML con una variable: una url() dentro de una custom property se resuelve
   contra la hoja que la sustituye -esta-, no contra la página que la declara,
   así que apuntaba a assets/img/... y daba 404. Añadir Europa son dos líneas;
   el componente no se toca. */
.u-hero--canada .u-hero__foto {
  background-image: url('../img/canada/hero-solicitud.webp');
  background-position: 64% 62%
}

.u-hero--europa .u-hero__foto {
  background-image: url('../img/europa/hero-expediente.webp');
  background-position: 58% 64%
}

/* Capa de color sólida, sin degradado: el encargo pide que el banner no se
   desvanezca hacia ningún lado. Es un único rgba del marino de marca. */
.u-hero__capa {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 26, 74, .86)
}

/* `margin-inline:auto` no es decorativo: sin él la caja de 780px se queda
   pegada al borde izquierdo del contenedor y el bloque, aunque lleve el texto
   centrado dentro, aparece unos 200px a la izquierda del centro de la
   pantalla. Que el texto esté centrado no centra la caja. */
.u-hero__in {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin-inline: auto
}

/* Antetítulo con las mismas medidas que .sk-eyebrow de la home, pero centrado
   y en dorado: sobre el marino, el latón de la home no tendría contraste. */
.u-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold)
}

.u-label .u-bandera {
  display: block;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hair-light)
}

.u-hero h1 {
  margin: clamp(18px, 2.2vw, 28px) auto 0;
  max-width: 19ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -.028em;
  color: #fff;
  text-wrap: balance
}

.u-hero__sub {
  margin: clamp(16px, 1.8vw, 22px) auto 0;
  max-width: 52ch;
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .74)
}

/* Un solo botón. La acción secundaria, si hace falta, es texto. */
.u-hero__act {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 2.8vw, 34px)
}

/* Precio junto al botón y con la aclaración de la tasa consular pegada: son
   dos importes distintos y no pueden leerse como uno solo. */
/* El precio del banner. Antes era una línea de texto discreta y el usuario
   tenía que bajar hasta media página para saber cuánto cuesta. Ahora es una
   pieza con jerarquía propia: rótulo pequeño, cifra grande y la aclaración
   de la tasa consular debajo. Las tres páginas de visa la usan igual. */
.u-precio-mini {
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px
}

.u-precio-mini__et {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold)
}

.u-precio-mini b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 46px);
  line-height: 1;
  letter-spacing: -.025em;
  color: #fff
}

.u-precio-mini span {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6)
}

/* Prueba de confianza: UNA línea, no cuatro tarjetas. */
.u-confianza {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .55)
}

.u-confianza i {
  font-style: normal;
  margin-inline: 8px;
  color: rgba(255, 255, 255, .3)
}

/* Entrada del banner. El estado final es el visible: las keyframes aportan el
   estado inicial, así que si el motion está desactivado no queda nada oculto. */
@keyframes uEntra {
  from {
    opacity: 0;
    transform: translateY(16px)
  }
}

.u-label,
.u-hero h1,
.u-hero__sub,
.u-hero__act,
.u-precio-mini,
.u-confianza {
  animation: uEntra var(--mo-dur-s) var(--mo-ease) both
}

.u-hero h1 {
  animation-delay: 80ms
}

.u-hero__sub {
  animation-delay: 170ms
}

.u-hero__act {
  animation-delay: 330ms
}

.u-precio-mini {
  animation-delay: 250ms
}

.u-confianza {
  animation-delay: 410ms
}

/* ═══ 2 · QUÉ HACEMOS POR TI ══════════════════════════════════════════════
   Tres momentos numerados, no tres tarjetas: sin caja, sin borde, sin icono.
   El número grande hace de ancla visual y el filete superior de separación. */
.u-tres {
  list-style: none;
  margin: clamp(34px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(26px, 3vw, 44px)
}

@media (min-width:820px) {
  .u-tres {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

.u-tres li {
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--rule)
}

/* Doblado a propósito (.u-tres .u-tres__n). Con el selector simple la
   regla vale 0,1,0 y .u-tres p vale 0,1,1, así que el párrafo genérico ganaba
   y la cifra se pintaba en gris de texto: el acento no llegaba a verse nunca. */
.u-tres .u-tres__n {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand)
}

.u-tres h3 {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--navy)
}

.u-tres p {
  margin: 9px 0 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--slate)
}

/* ═══ 3 · QUÉ INCLUYE ═════════════════════════════════════════════════════
   Lista a dos columnas. Sin tarjetas: cada línea es una fila con su marca. */
/* Sin `max-width` propio: la lista arranca a plomo con el titular de la
   sección. Con una caja más estrecha y centrada quedaba unos 40px metida
   hacia dentro y se leía como un bloque suelto. */
.u-incluye {
  list-style: none;
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  padding: 0;
  display: grid;
  gap: 2px clamp(24px, 3vw, 48px)
}

@media (min-width:720px) {
  .u-incluye {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.u-incluye li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--navy)
}

.u-incluye svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--brand)
}

/* ═══ 4 · PAREJAS FOTO + TEXTO (DS-160, entrevista) ═══════════════════════ */
.u-duo {
  display: grid;
  gap: clamp(26px, 3.6vw, 60px);
  align-items: center
}

@media (min-width:900px) {
  .u-duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
  }

  /* La segunda pareja invierte el orden para que la página respire y no
     parezca una plantilla repetida dos veces. */
  .u-duo--flip .u-duo__foto {
    order: 2
  }
}

.u-duo__foto {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-deep)
}

.u-duo__foto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover
}

.u-duo__txt h2 {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--navy)
}

.u-duo__txt p {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--slate)
}

/* Cuatro apoyos cortos bajo el texto de la entrevista. Son etiquetas, no
   botones ni tarjetas: sin fondo, solo un filete a la izquierda. */
.u-apoyos {
  list-style: none;
  margin: clamp(20px, 2.2vw, 28px) 0 0;
  padding: 0;
  display: grid;
  gap: 10px
}

@media (min-width:520px) {
  .u-apoyos {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.u-apoyos li {
  padding-left: 14px;
  border-left: 2px solid var(--gold);
  font-size: 15px;
  line-height: 1.45
}

/* ── Bloque oscuro: el mismo marino del banner ───────────────────────────
   Se apoya en .sk-sec--ink de la home para el color de titular y de apoyo;
   aquí solo se cambia el fondo al marino de marca y se aclaran las piezas
   propias de esta página. */
.u-oscuro {
  background: var(--ink-navy);
  color: #fff
}

/* El antetítulo de la home va en latón (--brass), que sobre el marino queda
   casi negro. Sobre oscuro pasa a dorado; el resto de sus medidas no cambia. */
.u-oscuro .sk-eyebrow {
  color: var(--gold)
}

.u-oscuro .sk-eyebrow::before {
  background: var(--gold)
}

.u-oscuro .u-duo__txt h2 {
  color: #fff
}

.u-oscuro .u-duo__txt p {
  color: rgba(255, 255, 255, .76)
}

.u-oscuro .u-duo__foto {
  background: rgba(255, 255, 255, .06)
}

/* ═══ 5 · PROCESO · cuatro pasos ══════════════════════════════════════════
   Horizontal en escritorio con una línea que los enhebra, vertical en móvil.
   No son tarjetas: el número y el filete bastan. */
.u-pasos {
  list-style: none;
  margin: clamp(34px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(24px, 2.6vw, 34px)
}

@media (min-width:860px) {
  .u-pasos {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

.u-pasos li {
  position: relative;
  padding-top: 26px
}

/* El filete superior hace de línea de tiempo; el disco marca el punto. */
.u-pasos li::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 1px;
  background: var(--rule)
}

.u-pasos li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold)
}

/* Mismo doblado y por el mismo motivo que .u-tres__n. */
.u-pasos .u-pasos__n {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .17em;
  color: var(--brand)
}

.u-pasos h3 {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.25;
  color: var(--navy)
}

.u-pasos p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate)
}

/* ═══ 6 · REQUISITOS ══════════════════════════════════════════════════════ */
.u-req {
  counter-reset: req;
  list-style: none;
  margin: clamp(28px, 3.2vw, 42px) 0 0;
  padding: 0;
  display: grid;
  gap: 0 clamp(24px, 3vw, 48px)
}

@media (min-width:720px) {
  .u-req {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* Numeradas por CSS, no a mano: si un día sobra o falta un requisito, la
   numeración se recoloca sola. El contador va en el <ul>, arriba. */
.u-req li {
  counter-increment: req;
  position: relative;
  padding: 18px 0 18px 44px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--navy);
  transition: padding-left 260ms var(--mo-ease)
}

.u-req li::before {
  content: counter(req, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 20px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--brand)
}

.u-req li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 380ms var(--mo-ease)
}

.u-req li:hover {
  padding-left: 50px
}

.u-req li:hover::after {
  width: 100%
}

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

  .u-req li,
  .u-req li::after {
    transition: none
  }
}

.u-req b {
  display: block;
  font-weight: 600
}

.u-req span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--slate)
}

/* ═══ 7 · PRECIO ══════════════════════════════════════════════════════════
   Dos importes enfrentados. El de SkyBiz en dorado; el consular en blanco,
   porque no es nuestro y no debe leerse como parte de la oferta. */
/* Alineado a la izquierda, no centrado: el titular de la sección arranca
   ahí y una caja centrada debajo se lee como un bloque descolgado. */
.u-tarifa {
  max-width: 820px;
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  display: grid;
  gap: 2px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--rule)
}

@media (min-width:680px) {
  .u-tarifa {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.u-tarifa__c {
  padding: clamp(26px, 3vw, 38px);
  background: var(--ink-navy);
  color: #fff
}

.u-tarifa__c p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6)
}

.u-tarifa__cifra {
  display: block;
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 4.6vw, 54px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--gold)
}

.u-tarifa__c small {
  display: block;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72)
}

/* La tarifa consular NO lleva cifra. El importe lo fija el Gobierno de EE. UU.
   y cambia sin avisar: publicarlo aquí sería inventar un dato que no
   controlamos. En su lugar va la frase, en el mismo tipo pero a un cuerpo que
   se pueda leer, y el enlace a la página oficial donde se consulta. Tampoco va
   en dorado: el dorado es el precio de SkyBiz, no el del consulado. */
.u-tarifa__c--gob .u-tarifa__cifra {
  max-width: 20ch;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.26;
  letter-spacing: -.015em;
  color: #fff
}

.u-tarifa__pie {
  max-width: 820px;
  margin: clamp(18px, 2vw, 24px) 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--brand);
  border-radius: 0 8px 8px 0;
  background: var(--paper-deep);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--navy)
}

.u-tarifa__pie a {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 3px
}

/* ═══ 8 · PREGUNTAS FRECUENTES ════════════════════════════════════════════
   <details> nativo: sin una línea de JavaScript, accesible por teclado y
   funciona aunque el script no cargue. */
.u-faq {
  max-width: 820px;
  margin: clamp(30px, 3.4vw, 46px) 0 0
}

.u-faq details {
  border-bottom: 1px solid var(--rule)
}

.u-faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.35;
  color: var(--navy)
}

.u-faq summary::-webkit-details-marker {
  display: none
}

/* El signo se dibuja en CSS, no con una fuente de iconos. */
.u-faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 6px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--brand);
  transition: transform 240ms var(--mo-ease)
}

.u-faq details[open] summary::after {
  transform: rotate(45deg)
}

.u-faq details p {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate)
}

/* ═══ 9 · CIERRE ══════════════════════════════════════════════════════════ */
.u-cierre {
  background: var(--ink-navy);
  color: #fff;
  text-align: center
}

.u-cierre .sk-shell {
  max-width: 780px
}

.u-cierre .sk-eyebrow {
  justify-content: center;
  color: var(--gold)
}

.u-cierre .sk-eyebrow::before {
  background: var(--gold)
}

.u-cierre h2 {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.1;
  letter-spacing: -.024em;
  color: #fff
}

.u-cierre p {
  margin: 18px auto 0;
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .74)
}

.u-cierre__act {
  display: flex;
  justify-content: center;
  margin-top: clamp(26px, 3vw, 36px)
}

/* ═══ 10 · PIE ════════════════════════════════════════════════════════════
   Mismos colores, mismas medidas y misma tipografía que el pie de la home.
   Allí los hovers van en un atributo `style-hover` que interpreta el runtime;
   como esta página es estática, viven aquí en CSS. Nada más cambia. */
.u-pie {
  background: var(--ink-950);
  color: var(--white);
  padding: clamp(48px, 7vw, 80px) 0 32px
}

.u-pie__grid {
  display: grid;
  gap: 32px 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr))
}

/* v14 · El archivo recortado ya no trae aire propio: los doce píxeles que
   antes ponía el PNG por arriba y por abajo se reponen aquí como margen, y
   el ancho sube un 10 % porque ahora todo él es marca. */
.u-pie__marca {
  display: block;
  width: clamp(136px, 13vw, 174px);
  height: auto;
  margin-bottom: 10px
}

.u-pie__txt {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-400)
}

.u-pie__soc {
  display: flex;
  gap: 12px;
  margin-top: 20px
}

.u-pie__soc a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-700);
  border-radius: 8px;
  color: var(--white);
  transition: border-color 200ms var(--ease)
}

.u-pie__soc a:hover {
  border-color: var(--white)
}

.u-pie h2 {
  margin: 0 0 14px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-400)
}

/* `overflow-wrap:anywhere` y no `break-word`: la dirección de correo es una
   sola palabra de 214px sin espacios y las columnas del pie se reparten con
   `auto-fit`. Con `break-word` la columna seguiría calculando su tamaño mínimo
   sobre la palabra entera y el correo se saldría igual por la derecha —a 430px
   de ancho desbordaba la página 11px—; `anywhere` sí entra en ese cálculo. */
.u-pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  overflow-wrap: anywhere
}

.u-pie a:hover {
  color: var(--gold)
}

.u-pie address {
  margin-top: 16px;
  font-style: normal;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-400)
}

.u-pie address b {
  display: block;
  font-weight: 400;
  color: var(--white)
}

.u-pie__bajo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-700);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-400)
}

/* Aviso legal. Va literal: es la frase que impide leer la página como una
   promesa de aprobación. */
.u-pie__legal {
  margin: 24px 0 0;
  max-width: 96ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-400)
}

/* ═══ 11 · BARRA INFERIOR (solo móvil) ════════════════════════════════════
   Aparece pasado el banner y se retira al llegar al cierre, para no tapar el
   botón definitivo con una copia de sí mismo. */
.u-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 75;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px clamp(14px, 4vw, 20px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(3, 11, 36, .96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  transform: translateY(102%);
  transition: transform 320ms var(--mo-ease)
}

.u-bar.visible {
  transform: none
}

.u-bar__txt {
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .72)
}

.u-bar__txt b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: #fff
}

.u-bar .btn-x {
  height: 46px;
  padding: 0 18px;
  font-size: 14.5px
}

@media (min-width:768px) {
  .u-bar {
    display: none
  }
}

/* Bajo 768px el flotante de WhatsApp y la barra compiten por la esquina.
   Gana la barra, que lleva el mismo destino. */
@media (max-width:767px) {
  .u-bar.visible~.sk-wa {
    opacity: 0;
    pointer-events: none
  }
}

/* Única línea que reescribe algo de la home: se le añade `opacity` a la lista
   de transiciones del flotante para que el relevo con la barra no sea un
   corte seco. Los tres valores originales se repiten tal cual. */
.sk-wa {
  transition: opacity 240ms var(--mo-ease), gap 260ms var(--ease), padding 260ms var(--ease), transform 260ms var(--ease)
}

/* ═══ Revelado al hacer scroll ════════════════════════════════════════════
   El estado oculto (.rv) lo añade el JS. Si el script no corre, o si el
   sistema pide movimiento reducido, no queda nada en opacity:0. */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease)
}

.rv.rv--in {
  opacity: 1;
  transform: none
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }

  .rv {
    opacity: 1 !important;
    transform: none !important
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TEST DE DESTINO · componente copiado del index, NO EDITAR
   ─────────────────────────────────────────────────────────────────────
   Son las reglas .sk-quiz / .sk-opt del index, extraídas con un tokenizador
   y pegadas en su orden original, incluidas las que las reescriben más
   abajo en la hoja (la tarjeta oscura sobre fondo claro). Si el test del
   index cambia, hay que volver a extraerlas: no retocarlas aquí.

   Lo ÚNICO que no viene del index es el marcado, porque allí lo monta un
   runtime con <sc-if> y {{ }} que estas páginas estáticas no tienen. Las
   clases y el comportamiento visible son los mismos.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Test de elegibilidad: bloque destacado ────────────────────────
           Pasa a fondo oscuro de marca a sangre completa. Es la conversión de
           menor fricción de la página (no pide datos), así que ahora es el
           bloque con más contraste de todo el sitio. */
        .sk-quiz {
          position: relative;
          background: var(--brand-950);
          color: #fff;
          overflow: hidden;
          padding-block: clamp(56px, 7vw, 96px)
        }

.sk-quiz::before {
          content: '';
          position: absolute;
          right: -12%;
          top: -40%;
          width: 62%;
          aspect-ratio: 1;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(14, 116, 144, .55), transparent 68%);
          pointer-events: none
        }

.sk-quiz__grid {
          position: relative;
          display: grid;
          gap: clamp(32px, 4vw, 56px);
          align-items: center;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr))
        }

.sk-quiz__title {
          margin: 16px 0 0;
          font-family: var(--serif);
          font-weight: 400;
          font-size: clamp(34px, 4.4vw, 54px);
          line-height: 1.08;
          letter-spacing: -.022em;
          color: #fff
        }

.sk-quiz__lead {
          margin: 18px 0 0;
          max-width: 46ch;
          font-family: var(--sans);
          font-size: clamp(16px, 1.2vw, 18px);
          line-height: 1.6;
          color: rgba(255, 255, 255, .82)
        }

.sk-quiz__pills {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 26px
        }

.sk-quiz__pill {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 8px 14px;
          border-radius: 999px;
          background: rgba(255, 255, 255, .1);
          font-family: var(--sans);
          font-weight: 500;
          font-size: 13.5px;
          color: #fff
        }

.sk-quiz__card {
          background: var(--paper);
          color: var(--navy);
          border-radius: 14px;
          box-shadow: 0 32px 64px -28px rgba(0, 0, 0, .6);
          padding: clamp(22px, 3vw, 32px)
        }

/* ── v11 · Opciones del test ───────────────────────────────────────
           Antes cada botón repetía catorce declaraciones en un atributo style,
           lo que impedía darles estado de foco y hacía imposible mantenerlos.
           Ahora son una clase: 52px de alto (área táctil holgada en móvil),
           un solo estado de hover y el foco lo hereda del sistema global. */
        .sk-opts {
          display: grid;
          gap: 10px;
          margin-top: 20px
        }

.sk-opt {
          min-height: 52px;
          width: 100%;
          text-align: left;
          padding: 0 16px;
          background: var(--paper);
          border: 1px solid var(--rule);
          border-radius: 8px;
          cursor: pointer;
          font-family: var(--sans);
          font-size: 16px;
          font-weight: 500;
          color: var(--navy);
          transition: border-color 200ms var(--ease), background-color 200ms var(--ease), transform 200ms var(--ease)
        }

.sk-opt:hover {
          border-color: var(--brand);
          background: var(--brand-50);
          transform: translateX(3px)
        }

.sk-opt__back {
          margin-top: 16px;
          min-height: 44px;
          background: none;
          border: none;
          padding: 8px 0;
          cursor: pointer;
          font-family: var(--sans);
          font-size: 13px;
          color: var(--slate)
        }

.sk-opt__back:hover {
          color: var(--navy)
        }

/* ── ¿Calificas? en claro ──────────────────────────────────────────
           Antes era el tercer bloque marino a sangre. Con toda la página clara
           basta una tarjeta oscura sobre tinte azul: contrasta más que antes y
           no interrumpe el recorrido. */
        .sk-quiz::before {
          display: none
        }

/* En el index, .sk-sec--soft está escrita DESPUÉS de .sk-quiz, así que es su
   fondo claro el que gana: la sección es un tinte suave con una tarjeta oscura
   encima, no un bloque marino. Al pegar aquí el bloque del test al final de la
   hoja, el orden quedaba invertido y la sección salía marina. Se repite la
   regla, tal cual, para reproducir la cascada del index. */
.sk-sec--soft {
  background: var(--s3)
}

.sk-quiz .sk-quiz__title {
          color: var(--ink-navy)
        }

.sk-quiz .sk-quiz__title em {
          color: var(--brand-600)
        }

.sk-quiz .sk-quiz__lead {
          color: var(--slate)
        }

.sk-quiz .sk-quiz__pill {
          background: rgba(7, 26, 74, .05);
          border: 1px solid var(--hair);
          color: var(--ink-navy)
        }

/* La tarjeta del test es ahora la pieza oscura: es donde se actúa. */
        .sk-quiz .sk-quiz__card {
          background: var(--ink-navy);
          color: #fff;
          box-shadow: 0 34px 70px -30px rgba(7, 26, 74, .55)
        }

.sk-quiz .sk-quiz__card h3 {
          color: #fff !important
        }

.sk-quiz .sk-quiz__card>p:first-child {
          color: var(--gold) !important
        }

.sk-quiz .sk-quiz__card button[type=button] {
          background: rgba(255, 255, 255, .06) !important;
          border-color: rgba(255, 255, 255, .18) !important;
          color: #fff !important
        }

.sk-quiz .sk-quiz__card button[type=button]:hover {
          background: rgba(255, 255, 255, .13) !important;
          border-color: var(--gold) !important
        }

/* Lo único añadido: los pasos que JS enseña y esconde, y el panel de
   resultado. Sin esto el test se vería con las tres preguntas a la vez. */
.u-test__res {
  margin-top: 18px;
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, .07);
  padding: 20px
}

.u-test__res p {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .88)
}

.u-test__res p + p {
  margin-top: 12px
}

.u-test__res b {
  font-weight: 600;
  color: #fff
}

.u-test__res .btn-x {
  margin-top: 18px
}

/* ═══════════════════════════════════════════════════════════════════════
   LANDING COMERCIAL · piezas de la página americana
   ─────────────────────────────────────────────────────────────────────
   La página pasó de guía a página de venta. Estas son las piezas que hacen
   falta para eso y no existían: el producto en cuatro partes, la franja de
   confianza y la oferta. Mismos tokens, misma tipografía, mismo amarillo.
   Canadá y Europa NO las usan: siguen con .u-tres / .u-tarifa.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   COMPRA DIRECTA · v2 de la página americana
   ─────────────────────────────────────────────────────────────────────
   La página pasa de "landing que lleva a WhatsApp" a "landing que cobra".
   Estas son las piezas que hacen falta para eso: la línea del producto, el
   sello de pago seguro, el bloque de compra intermedio, el expediente de
   requisitos y las dos vías del cierre.

   Ni un token nuevo. Mismo amarillo (--gold), mismas tipografías, mismas
   curvas y duraciones. Canadá y Europa NO usan nada de esto.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── Intro del test ────────────────────────────────────────────────────
   Está FUERA de los [data-paso], así que no se conmuta: enmarca la tarjeta
   entera como lo que es, la vía para quien todavía no quiere pagar. */
/* La regla de al lado es `.sk-quiz .sk-quiz__card>p:first-child`, y :first-child
   cuenta como clase: vale 0,4,0. Con tres clases yo valia 0,3,0 y perdia aunque
   fuese despues y aunque llevase !important. Con el id de la tarjeta, 1,1,0. */
#uTest .u-test__intro {
  color: rgba(255, 255, 255, .62) !important
}

.sk-quiz .sk-quiz__card #uTestPaso {
  color: var(--gold)
}

.u-test__intro {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate)
}

/* ── Barra inferior de móvil: las dos vías ─────────────────────────────
   El botón lleva a la compra, así que WhatsApp deja de estar cubierto por
   la barra y pasa a estar DENTRO de ella. Antes los dos iban al mismo
   sitio y bastaba con uno. */
.u-bar__acc {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto
}

.u-bar__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  transition: border-color var(--mo-dur-s) var(--mo-ease), background-color var(--mo-dur-s) var(--mo-ease)
}

.u-bar__wa:hover {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .08)
}
/* ═══════════════════════════════════════════════════════════════════════
   SEGUNDA DIRECCIÓN · v3 de la página americana
   ─────────────────────────────────────────────────────────────────────
   La oferta completa sube al banner, el proceso se cuenta con fotografías
   conectadas, las cifras cuentan desde cero y PayPal se reconoce a un
   metro. Ni un token nuevo: mismo oro, mismas familias, mismas curvas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El botón de PayPal ────────────────────────────────────────────────
   El logotipo es el archivo oficial de paypalobjects.com, sin retocar.
   Botón blanco con filete —una de las variantes que PayPal admite—
   porque en dorado chocaría con el amarillo de Skybiz y las dos acciones
   se confundirían. La jerarquía es simple: relleno gana a contorno. */
.btn-pp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 26px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #CBD2DC;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  white-space: nowrap;
  color: #001C64;
  transition: transform var(--mo-dur-s) var(--mo-ease), box-shadow var(--mo-dur-s) var(--mo-ease), border-color var(--mo-dur-s) var(--mo-ease)
}

.btn-pp:hover {
  transform: translateY(-2px);
  border-color: #003087;
  box-shadow: 0 16px 34px -18px rgba(0, 48, 135, .8);
  color: #001C64
}

.btn-pp:active {
  transform: translateY(0)
}

.btn-pp img {
  display: block;
  width: auto;
  height: 20px
}

@media (prefers-reduced-motion:reduce) {
  .btn-pp:hover {
    transform: none
  }
}

/* ── El cierre con dos acciones ─────────────────────────────────────────
   El mismo par del banner: dorado y PayPal, envueltos si no caben. */
.u-cierre__act {
  flex-wrap: wrap;
  gap: 12px
}

/* ── La barra de móvil ─────────────────────────────────────────────────
   El pago es ahora el botón de PayPal, reconocible como tal. */
.u-bar .btn-pp {
  height: 46px;
  padding: 0 16px;
  font-size: 14px
}

.u-bar .btn-pp img {
  height: 17px
}
/* ═══════════════════════════════════════════════════════════════════════
   v4 · CADA ZONA CON UNA SOLA FUNCIÓN
   ─────────────────────────────────────────────────────────────────────
   Cabecera = navegación y respaldo. Banner = propuesta y evaluación.
   #precio = la oferta y el pago. Ni una de las tres hace el trabajo de
   otra, y el precio aparece UNA vez en cada altura de la página.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── La oferta ─────────────────────────────────────────────────────────
   Composición editorial en dos columnas asimétricas separadas por un
   filete: a la izquierda el precio como pieza tipográfica, a la derecha
   lo que se lleva y el pago. La cifra manda —hasta 104px— y el "USD" va
   pequeño y alineado a la base, como en una portada, no como una etiqueta
   de producto. */
/* ── El botón de PayPal ────────────────────────────────────────────────
   Aspecto de checkout: blanco, filete tenue, holgura y el logotipo
   oficial a tamaño legible. NUNCA dorado: el oro es la acción de Skybiz
   y esta es la de PayPal. Dos acciones distintas, dos aspectos distintos. */
.btn-pp--ancho {
  display: flex;
  width: 100%;
  height: 60px;
  margin-top: clamp(24px, 2.8vw, 32px);
  gap: 12px;
  font-size: 16px;
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .6)
}

.btn-pp--ancho img {
  height: 24px
}

/* ── Confianza ─────────────────────────────────────────────────────────
   Titular y fotografía en asimétrico, y las tres cifras cruzando el ancho
   completo debajo. Filete arriba y separadores verticales: la retícula se
   dibuja con líneas de un píxel, no con cajas. */
/* ── Barra de móvil ────────────────────────────────────────────────────
   Sin cifra: el precio ya está en el banner y en la oferta, y repetirlo
   una tercera vez en una barra fija es lo que hace que una página parezca
   un embudo y no una agencia. Aparece pasada la sección del producto, no
   antes: nadie ve un checkout sin saber qué compra. */
.u-bar__txt {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .68)
}

.u-bar__txt b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  color: #fff
}
/* ═══════════════════════════════════════════════════════════════════════
   v5 · MENOS CAJAS, MÁS COMPOSICIÓN
   ─────────────────────────────────────────────────────────────────────
   Tres correcciones de jerarquía:

     1. La cabecera vuelve a ser SOLO navegación: logo, menú y hamburguesa.
        Las cifras se van de ahí.
     2. El respaldo pasa al banner, pero no como una línea de texto: es una
        franja tipográfica apoyada en un filete que cruza el ancho completo
        de la fotografía.
     3. El proceso y el expediente dejan de ser tarjetas. La retícula se
        dibuja con líneas de un píxel, números grandes y espacio.
   ═══════════════════════════════════════════════════════════════════════ */

/* El banner centra su contenido con place-items:center, y eso encoge al
   contenedor hasta el ancho de lo que lleva dentro. Para que el filete del
   respaldo cruce el ancho del banner y no el del párrafo más largo, el
   contenedor se estira. */
.u-hero>.sk-shell {
  width: 100%;
  justify-self: stretch
}



/* En pantallas estrechas las tres columnas siguen cabiendo, pero el rótulo
   necesita respirar: menos interletra y menos aire lateral antes que
   partir «EXPERIENCIA» por la mitad. */

/* ═══════════════════════════════════════════════════════════════════════════
   3 · VISA AMERICANA · LANDING DE VENTA
   ---------------------------------------------------------------------------
   TODO lo que empieza por .v- es exclusivo de visa-usa.html. Ni una sola de
   estas reglas la usan la canadiense ni la de Schengen, así que se puede
   trabajar aquí sin mirar de reojo a las otras dos páginas. Lo que sí se
   comparte —.sk-header, .sk-sheet, .u-pie, .u-bar, .u-faq, .sk-quiz, .btn-pp,
   .rv— se reutiliza tal cual y no se reescribe.

   La página deja de ser informativa y pasa a ser comercial. Eso cambia tres
   cosas en el diseño:

     · JERARQUÍA. La compra manda. La tarjeta de oferta es el único elemento
       blanco sobre el marino del banner, así que es lo primero que mira el
       ojo. La vía gratuita —evaluar el perfil— es un botón fantasma, presente
       pero claramente por debajo.

     · SUPERFICIES. Marino en tres momentos y solo tres: banner, oferta y
       cierre. Entre ellos, claro. El bloque más oscuro de la página (--ink-deep)
       es justamente la oferta: es donde se decide.

     · LÍNEAS. Casi ninguna. Solo quedan las que hacen un trabajo: las que
       separan las tres cifras del banner, la que marca la nota dentro de una
       etapa y la que aparta la vía alternativa dentro de la tarjeta de compra.
       El resto es espacio.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Piezas comunes de la landing ────────────────────────────────────────── */
.v-head {
  max-width: 58ch
}

.v-head--centro {
  margin-inline: auto;
  text-align: center
}

.v-head--centro .sk-eyebrow {
  justify-content: center
}

.v-h2 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(31px, 4.1vw, 53px);
  line-height: 1.06;
  letter-spacing: -.026em;
  color: var(--ink-navy)
}

/* El énfasis del titular NO va en cursiva ni en otro peso: va en el azul de
   marca sobre claro y en el amarillo sobre marino. Es la misma decisión del
   index. */
.v-h2 em {
  font-style: normal;
  color: var(--brand-600)
}

.v-h2--claro {
  color: #fff
}

.v-h2--claro em {
  color: var(--gold)
}

.v-lead {
  margin: 18px 0 0;
  max-width: 56ch;
  font-family: var(--sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.62;
  color: var(--slate)
}

.v-head--centro .v-lead {
  margin-inline: auto
}

.v-lead--claro {
  color: rgba(255, 255, 255, .76)
}

.v-eyebrow--oro {
  color: var(--gold)
}

/* ── Botón fantasma ──────────────────────────────────────────────────────
   La vía gratuita. Vive sobre marino, así que se dibuja con un filete claro y
   nunca con relleno: si tuviera fondo competiría con PayPal, que es la acción
   principal. */
.v-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  transition: border-color var(--mo-dur-s) var(--mo-ease), color var(--mo-dur-s) var(--mo-ease), transform var(--mo-dur-s) var(--mo-ease)
}

.v-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px)
}

.v-ghost svg {
  transition: transform var(--mo-dur-s) var(--mo-ease)
}

.v-ghost:hover svg {
  transform: translateX(3px)
}

.v-ghost--grande {
  height: 58px;
  padding: 0 30px;
  font-size: 16px
}

.v-ghost--rail {
  height: 46px;
  padding: 0 18px;
  font-size: 14.5px
}

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

  .v-ghost:hover,
  .v-ghost:hover svg {
    transform: none
  }
}

/* ═══ 1 · BANNER ══════════════════════════════════════════════════════════
   Composición asimétrica: argumento a la izquierda, compra a la derecha. El
   degradado carga la mano en la izquierda —donde vive el texto— y se abre
   hacia la derecha para que la fotografía del pasaporte siga viéndose. */
.v-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-navy);
  color: #fff;
  padding-top: calc(var(--tope-h) + clamp(26px, 4vw, 56px))
}

/* 22px de sobrante por arriba y por abajo: el paralaje mueve la fotografia
   como mucho 18px, asi que nunca llega a verse un borde. */
.v-hero__img {
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  z-index: -2;
  width: 100%;
  height: calc(100% + 44px);
  object-fit: cover;
  object-position: 56% 50%;
  will-change: transform
}

/* El degradado carga casi todo el peso en la mitad izquierda, que es donde
   vive el texto blanco, y se abre a la derecha para que la fotografia del
   pasaporte se vea de verdad y no quede en un marino plano. Donde hay texto
   nunca baja de .93 de opacidad. */
.v-hero__capa {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(98deg, rgba(3, 11, 36, .97) 0%, rgba(3, 11, 36, .94) 32%, rgba(3, 11, 36, .8) 54%, rgba(5, 17, 48, .54) 76%, rgba(5, 17, 48, .4) 100%)
}

.v-hero__shell {
  padding-bottom: clamp(38px, 5vw, 72px)
}

.v-hero__grid {
  display: grid;
  gap: clamp(28px, 3.6vw, 52px);
  align-items: center
}

@media (min-width:960px) {
  .v-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr)
  }
}

/* EN MÓVIL EL ORDEN CAMBIA, y no es un capricho: titular, beneficio, PRECIO y
   pago; la vía gratuita, después. Si la tarjeta va al final, el visitante que
   llega de un anuncio ve el botón de "evaluar mi perfil" antes que el precio y
   se marcha por la vía gratuita sin haber sabido nunca cuánto cuesta.

   `display: contents` disuelve la columna izquierda para que sus cuatro hijos
   sean elementos de la rejilla y se puedan ordenar uno a uno. El hueco de la
   rejilla se pone a cero porque cada pieza ya trae su propio margen; si no, el
   hueco de 28px se colaría también entre el antetítulo y el titular. */
@media (max-width:959px) {
  .v-hero__grid {
    gap: 0
  }

  .v-hero__col {
    display: contents
  }

  .v-card {
    order: 3;
    margin-top: clamp(24px, 5vw, 34px)
  }

  .v-hero__alt {
    order: 4
  }
}

.v-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold)
}

.v-label__flag {
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .34)
}

.v-hero h1 {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  max-width: 17ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(35px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #fff
}

.v-hero h1 em {
  font-style: normal;
  color: var(--gold)
}

.v-hero__sub {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  max-width: 48ch;
  font-family: var(--sans);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .8)
}

.v-hero__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: clamp(24px, 2.8vw, 34px) 0 0
}

/* ── La tarjeta de oferta ────────────────────────────────────────────────
   La excepción justificada a "menos tarjetas": aquí se compra, y una caja es
   exactamente lo que hace falta para que el precio, lo que incluye y el pago
   se lean como una sola unidad. */
.v-card {
  position: relative;
  background: #fff;
  color: var(--navy);
  border-radius: 16px;
  padding: clamp(22px, 2.8vw, 32px);
  box-shadow: 0 44px 88px -36px rgba(0, 0, 0, .78)
}

.v-card__rot {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-600)
}

.v-card__t {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--navy)
}

/* El precio, en tres piezas: el anterior tachado, el actual enorme y la
   moneda. `baseline` los alinea por la base de las cifras, no por la caja. */
.v-card__precio,
.v-compra__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-family: var(--serif)
}

.v-card__precio s,
.v-compra__precio s {
  font-size: clamp(19px, 1.8vw, 23px);
  color: var(--slate);
  text-decoration-thickness: 1.5px
}

.v-card__precio b {
  font-weight: 600;
  font-size: clamp(52px, 6.4vw, 72px);
  line-height: .92;
  letter-spacing: -.038em;
  color: var(--navy);
  font-variant-numeric: tabular-nums
}

.v-card__precio span,
.v-compra__precio span {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--slate)
}

.v-card__que,
.v-compra__que {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate)
}

.v-card__lista {
  list-style: none;
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  padding: 0;
  display: grid;
  gap: 10px
}

.v-card__lista li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--navy)
}

.v-card__lista svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--brand)
}

.v-card__pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
  color: var(--slate)
}

.v-card__pie svg {
  flex: 0 0 auto;
  color: var(--brand)
}

/* ── La franja de cifras ─────────────────────────────────────────────────
   Cierra el banner a sangre. Los filetes verticales entre cifras SÍ trabajan:
   son tres datos distintos, no una lista. */
.v-cifras {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .13);
  background: rgba(3, 11, 36, .68)
}

/* `minmax(0, 1fr)` y no `1fr`: con `1fr` la columna no puede encoger por
   debajo de su contenido mínimo, y en un teléfono de 320 px la palabra
   ASESORADAS —11,5 px y .15em de espaciado— empujaba la tercera columna 16 px
   fuera de la pantalla. No se veía desbordamiento porque un ancestro lleva
   `overflow-x: clip`: simplemente la cifra aparecía cortada. Afecta a las
   cuatro landings, y en las cuatro es una corrección. */
.v-cifras__lista {
  list-style: none;
  margin: 0;
  padding: clamp(16px, 2.2vw, 26px) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

/* Y para que la palabra quepa de verdad en vez de rozar el filete vecino, a
   esa anchura el rótulo cede espaciado. El tamaño no baja: 11,5 px es el
   mínimo legible que ya fijó la revisión anterior. */
@media (max-width:359px) {
  .v-cifras__lista li {
    padding-inline: 6px
  }

  .v-cifras__lista span {
    letter-spacing: .04em
  }
}

.v-cifras__lista li {
  padding-inline: clamp(10px, 2vw, 26px);
  text-align: center
}

.v-cifras__lista li+li {
  border-left: 1px solid rgba(255, 255, 255, .14)
}

.v-cifras__lista b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums
}

.v-cifras__lista span {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(10px, 1vw, 11.5px);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62)
}

/* ── Entrada escalonada del banner ───────────────────────────────────────
   Solo transform y opacity, y solo una vez. El movimiento reducido lo apaga
   desde la regla global de la hoja. */
@keyframes vSube {
  from {
    opacity: 0;
    transform: translateY(24px)
  }
}

.v-label {
  animation: vSube var(--mo-dur) var(--mo-ease) both
}

.v-hero h1 {
  animation: vSube var(--mo-dur) 90ms var(--mo-ease) both
}

.v-hero__sub {
  animation: vSube var(--mo-dur) 170ms var(--mo-ease) both
}

.v-hero__alt {
  animation: vSube var(--mo-dur) 250ms var(--mo-ease) both
}

.v-card {
  animation: vSube var(--mo-dur-l) 180ms var(--mo-ease) both
}

.v-cifras {
  animation: vSube var(--mo-dur-l) 380ms var(--mo-ease) both
}

/* ═══ 2 · POR QUÉ COMPRAR ═════════════════════════════════════════════════
   Fotografía pegada a la izquierda mientras pasan los cuatro beneficios. Ni
   una tarjeta: los separa el espacio y un filete dorado corto que crece al
   entrar en pantalla, que es lo único que marca dónde empieza cada uno. */
.v-porque__grid {
  display: grid;
  gap: clamp(30px, 4vw, 66px)
}

@media (min-width:900px) {
  .v-porque__grid {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    align-items: start
  }

  .v-porque__foto {
    position: sticky;
    top: calc(var(--tope-h) + 28px)
  }
}

.v-porque__foto {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-deep)
}

.v-porque__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 38%
}

@media (max-width:899px) {
  .v-porque__foto img {
    aspect-ratio: 16 / 10
  }
}

.v-benes {
  list-style: none;
  margin: clamp(28px, 3.4vw, 46px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(30px, 3.6vw, 50px)
}

.v-benes li {
  position: relative;
  padding-left: clamp(38px, 3.6vw, 56px)
}

/* El filete dorado se tiende al entrar. Sin JavaScript no hay .rv--in, así que
   se declara ya tendido y solo se recoge cuando el JS marca el estado oculto:
   nada queda invisible si el script no corre. */
.v-benes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: clamp(22px, 2.4vw, 34px);
  height: 2px;
  background: var(--gold);
  transform-origin: left center
}

.v-benes li.rv::before {
  transform: scaleX(0)
}

.v-benes li.rv--in::before {
  transform: none;
  transition: transform var(--mo-dur-l) var(--mo-ease)
}

.v-bene__n {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--slate);
  font-variant-numeric: tabular-nums
}

.v-benes h3 {
  margin: 7px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(23px, 2.3vw, 31px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink-navy)
}

.v-benes li>p:last-child {
  margin: 10px 0 0;
  max-width: 48ch;
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.62;
  color: var(--slate)
}

/* ═══ 3 · PRUEBA ══════════════════════════════════════════════════════════
   Corta a propósito: la página de testimonios es el index. Tres videos, la
   ficha de Google con su fecha y una línea de autoridad. Nada más. */
.v-vids {
  list-style: none;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 236px));
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px)
}

/* En móvil, carrusel con anclaje: tres columnas de 9:16 en 390px serían
   sellos ilegibles. El sangrado negativo lleva el carril hasta el borde de la
   pantalla sin sacar la sección de su rejilla. */
@media (max-width:639px) {
  .v-vids {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--sk-gutter) * -1);
    padding-inline: var(--sk-gutter);
    scrollbar-width: none
  }

  .v-vids::-webkit-scrollbar {
    display: none
  }

  .v-vid {
    flex: 0 0 min(62vw, 236px);
    scroll-snap-align: center
  }
}

.v-vid {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-navy)
}

.v-vid img,
.v-vid iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover
}

.v-vid__play {
  color: #fff;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 0 20px;
  background: linear-gradient(to top, rgba(3, 11, 36, .78) 0%, rgba(3, 11, 36, .18) 46%, rgba(3, 11, 36, .06) 100%);
  border: 0;
  cursor: pointer;
  transition: background-color var(--mo-dur-s) var(--mo-ease)
}

.v-vid__disc {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-top: auto;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink-deep);
  transition: transform var(--mo-dur-s) var(--mo-ease)
}

.v-vid__play:hover .v-vid__disc {
  transform: scale(1.08)
}

.v-vid__cap {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff
}

@media (prefers-reduced-motion:reduce) {
  .v-vid__play:hover .v-vid__disc {
    transform: none
  }
}

.v-google {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 26px;
  margin-top: clamp(24px, 3vw, 36px)
}

.v-google__nota {
  display: inline-flex;
  align-items: center;
  gap: 12px
}

.v-google__score {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink-navy)
}

.v-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold)
}

.v-google__meta {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--slate)
}

.v-google__meta b {
  color: var(--navy)
}

.v-google__link,
.v-google__mas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px
}

.v-google__link:hover,
.v-google__mas:hover {
  color: var(--ink-navy)
}

.v-aval {
  margin: clamp(26px, 3vw, 40px) auto 0;
  max-width: 66ch;
  text-align: center;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--slate)
}

.v-aval b {
  color: var(--navy)
}

.v-aval span {
  display: block
}

/* ═══ 4 · QUÉ INCLUYE ═════════════════════════════════════════════════════
   La fotografía se queda pegada y cambia según qué etapa cruza el centro de
   la pantalla. Solo se anima la opacidad: el navegador la resuelve en la GPU
   y no recalcula nada. */
.v-etapas__grid {
  display: grid;
  gap: clamp(28px, 3.4vw, 52px);
  margin-top: clamp(30px, 3.6vw, 52px)
}

.v-etapas__vis {
  display: none
}

@media (min-width:900px) {
  .v-etapas__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 84px)
  }

  .v-etapas__vis {
    display: block
  }

  .v-etapas__lista {
    padding-block: clamp(0px, 8vh, 90px)
  }
}

.v-etapas__marco {
  position: sticky;
  top: calc(var(--tope-h) + 32px);
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-navy)
}

.v-etapas__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 620ms var(--mo-ease)
}

.v-etapas__foto.es-activa {
  opacity: 1
}

.v-etapas__n {
  position: absolute;
  left: 24px;
  bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  font-family: var(--serif);
  color: #fff;
  text-shadow: 0 2px 18px rgba(3, 11, 36, .8)
}

.v-etapas__n b {
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--gold);
  font-variant-numeric: tabular-nums
}

.v-etapas__n i {
  font-style: normal;
  font-size: 16px;
  color: rgba(255, 255, 255, .7)
}

.v-etapas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(36px, 8vh, 96px);
  counter-reset: none
}

.v-etapa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(14px, 1.8vw, 24px)
}

.v-etapa__n {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink-200);
  font-variant-numeric: tabular-nums;
  transition: color 480ms var(--mo-ease)
}

.v-etapa.es-activa .v-etapa__n {
  color: var(--brand)
}

.v-etapa h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -.024em;
  color: var(--ink-navy)
}

.v-etapa__cuerpo>p {
  margin: 11px 0 0;
  max-width: 44ch;
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.62;
  color: var(--slate)
}

/* El filete dorado de la nota SÍ trabaja: aparta del cuerpo una condición
   práctica —lo que hay que traer— sin abrir otra sección para ella. */
.v-etapa__cuerpo>p.v-etapa__nota {
  margin-top: 16px;
  padding-left: 15px;
  border-left: 2px solid var(--gold);
  font-size: 14px;
  color: var(--navy-soft)
}

.v-etapa__foto {
  display: block;
  margin: 20px 0 0;
  border-radius: 12px;
  overflow: hidden
}

.v-etapa__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover
}

@media (min-width:900px) {
  .v-etapa__foto {
    display: none
  }
}

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

  .v-etapas__foto,
  .v-etapa__n {
    transition: none
  }
}

/* ═══ 5 · LA OFERTA ═══════════════════════════════════════════════════════
   El bloque más oscuro de la página. Aquí ya se sabe qué se compra, así que
   el precio va grande y PayPal ocupa el ancho de la tarjeta. */
.v-oferta {
  background: var(--ink-deep);
  color: #fff;
  padding-block: clamp(56px, 7vw, 104px)
}

.v-oferta__grid {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  align-items: center
}

@media (min-width:900px) {
  .v-oferta__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr)
  }
}

.v-oferta__lista {
  list-style: none;
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding: 0;
  display: grid;
  gap: 13px
}

.v-oferta__lista li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.45;
  color: rgba(255, 255, 255, .88)
}

.v-oferta__lista svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--gold)
}

.v-compra {
  background: #fff;
  color: var(--navy);
  border-radius: 18px;
  padding: clamp(24px, 3.2vw, 38px);
  box-shadow: 0 44px 92px -40px rgba(0, 0, 0, .9)
}

.v-compra__rot {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-600)
}

.v-compra__precio b {
  font-weight: 600;
  font-size: clamp(60px, 7.4vw, 86px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--navy);
  font-variant-numeric: tabular-nums
}

.btn-pp--xl {
  height: 66px;
  font-size: 17px
}

.btn-pp--xl img {
  height: 27px
}

.v-compra__seguro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--slate)
}

.v-compra__seguro svg {
  color: var(--brand)
}

.v-compra__wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 18px;
  min-height: 44px;
  border: 1px solid rgba(37, 211, 102, .45);
  border-radius: 8px;
  background: rgba(37, 211, 102, .08);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  color: #0f7a3d;
  text-decoration: none;
  transition: background 200ms var(--mo-ease), border-color 200ms var(--mo-ease)
}

.v-compra__wa svg {
  fill: currentColor
}

.v-compra__wa:hover {
  background: rgba(37, 211, 102, .16);
  border-color: rgba(37, 211, 102, .7)
}

.v-compra__nota {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate)
}

.v-compra__nota b {
  color: var(--navy)
}

.v-compra__nota a {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px
}

.v-compra__nota a:hover {
  color: var(--navy)
}

/* El único filete de la tarjeta, y trabaja: aparta la vía alternativa del
   bloque de compra para que no se lea como parte del pago. */
.v-compra__duda {
  margin: clamp(18px, 2vw, 24px) 0 0;
  padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--slate)
}

.v-compra__duda a {
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px
}

.v-compra__duda a:hover {
  color: var(--navy)
}

/* ═══ 6 · EVALUACIÓN ══════════════════════════════════════════════════════
   El componente es el del index (.sk-quiz). Lo único que se añade es la línea
   de agradecimiento del resultado, que el encargo pide literal. */
.u-test__res .u-test__gracias {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--gold)
}

/* ═══ 7 · OBJECIONES ══════════════════════════════════════════════════════ */
.v-faq .u-faq {
  margin-top: clamp(26px, 3vw, 40px)
}

/* El contenido de la pregunta abierta entra en vez de aparecer de golpe. */
.u-faq details[open] p {
  animation: vSube 420ms var(--mo-ease) both
}

/* ═══ 8 · CIERRE ══════════════════════════════════════════════════════════ */
.v-cierre {
  background: var(--ink-navy);
  color: #fff;
  text-align: center;
  padding-block: clamp(56px, 7vw, 100px)
}

.v-cierre .sk-shell {
  max-width: 800px
}

.v-cierre .sk-eyebrow {
  justify-content: center
}

.v-cierre .v-h2 {
  margin-top: 16px
}

.v-cierre__precio {
  margin: clamp(20px, 2.4vw, 28px) 0 0
}

.v-cierre__precio b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 4.6vw, 54px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--gold)
}

.v-cierre__precio span {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255, 255, 255, .72)
}

.v-cierre__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(26px, 3vw, 36px)
}

.v-cierre__seguro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72)
}

.v-cierre__seguro svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8
}

.v-cierre__alt {
  margin: clamp(20px, 2.4vw, 26px) 0 0;
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(255, 255, 255, .72)
}

.v-cierre__alt a {
  font-weight: 600;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px
}

/* ═══ BARRA DE CONVERSIÓN · ESCRITORIO ════════════════════════════════════
   Entra cuando el banner ya no está y se retira sobre la oferta y sobre el
   cierre, que llevan el mismo botón. Es delgada y translúcida: no tapa una
   línea de texto completa, y como se retira en las dos secciones finales,
   nunca llega a cubrir el pie. */
.v-rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: rgba(3, 11, 36, .95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  transform: translateY(102%);
  transition: transform 340ms var(--mo-ease)
}

.v-rail.visible {
  transform: none
}

@media (max-width:767px) {
  .v-rail {
    display: none
  }
}

.v-rail__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 11px
}

.v-rail__txt {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  color: rgba(255, 255, 255, .74)
}

.v-rail__flag {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3)
}

.v-rail__txt b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.02em;
  color: #fff
}

.v-rail__act {
  display: inline-flex;
  align-items: center;
  gap: 12px
}

.v-rail .btn-pp {
  height: 46px;
  padding: 0 20px;
  font-size: 15px
}

/* ═══ MENÚ MÓVIL · las dos vías ═══════════════════════════════════════════ */
.v-sheet__act {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px
}

.v-sheet__act .btn-pp--ancho {
  margin-top: 0;
  height: 54px
}

/* ═══ MODAL DE WHATSAPP ═══════════════════════════════════════════════════
   Portado del index, donde lo monta el runtime con <sc-if>. Aquí vive siempre
   en el DOM y se conmuta con `hidden`, igual que el menú móvil.

   Ningún WhatsApp de la página salta directo a wa.me: primero se elige el
   tema, después se ve el mensaje, se puede editar, y solo entonces se abre
   WhatsApp. Los enlaces conservan su href real, así que sin JavaScript el
   botón sigue llevando a WhatsApp: el modal es una mejora, no un requisito. */
.wam {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.wam[hidden] {
  display: none
}

/* OJO, ESTO NO ES REDUNDANTE. El atributo `hidden` oculta un elemento porque
   la hoja del navegador le pone `display:none`, y esa regla la gana cualquier
   `display` escrito aquí. Las tres piezas que el modal esconde y enseña
   —el paso 1, el botón de volver y el antetítulo— tienen su propio `display`
   (grid, block, inline-flex), así que sin esto se quedaban a la vista: en el
   paso 2 se veían a la vez las cinco opciones y el mensaje. */
.wam [hidden] {
  display: none !important
}

@media (min-width:640px) {
  .wam {
    align-items: center;
    padding: 24px
  }
}

.wam__velo {
  position: absolute;
  inset: 0;
  background: rgba(3, 11, 36, .62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: wamVelo 240ms var(--mo-ease) both
}

.wam__box {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow: auto;
  padding: clamp(22px, 4vw, 32px);
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 40px 90px -30px rgba(3, 11, 36, .6);
  animation: wamSube 320ms var(--mo-ease) both;
  outline: none
}

@media (min-width:640px) {
  .wam__box {
    border-radius: 22px
  }
}

.wam__x {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--paper-deep);
  border: 0;
  border-radius: 50%;
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
  cursor: pointer
}

.wam__x:hover {
  background: var(--rule)
}

.wam__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wa-deep)
}

.wam__t {
  margin: 10px 44px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 27px);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--navy)
}

.wam__opts {
  display: grid;
  gap: 8px;
  margin-top: 18px
}

.wam__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 16px;
  background: var(--paper-deep);
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), transform 200ms var(--ease)
}

.wam__opt:hover {
  background: #fff;
  border-color: var(--navy);
  transform: translateX(3px)
}

.wam__opt .flag {
  flex: 0 0 auto;
  width: 26px;
  height: 17px;
  border-radius: 2px
}

.wam__ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 17px;
  color: var(--navy)
}

.wam__back {
  display: block;
  margin: 0 0 8px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--slate);
  cursor: pointer
}

.wam__back:hover {
  color: var(--navy)
}

.wam__lbl {
  display: block;
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--slate)
}

.wam__msg {
  display: block;
  width: 100%;
  min-height: 128px;
  margin-top: 12px;
  padding: 14px 16px;
  background: #E9F8EF;
  border: 1px solid transparent;
  border-radius: 16px 16px 16px 4px;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-700);
  resize: vertical
}

.wam__msg:focus {
  outline: none;
  background: #fff;
  border-color: var(--wa-deep);
  box-shadow: 0 0 0 3px rgba(18, 140, 126, .18)
}

.wam__acts {
  display: grid;
  gap: 10px;
  margin-top: 16px
}

@media (min-width:480px) {
  .wam__acts {
    grid-template-columns: auto 1fr
  }
}

.wam__acts .sk-btn {
  height: 52px
}

.wam__num {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slate)
}

@keyframes wamVelo {
  from {
    opacity: 0
  }
}

@keyframes wamSube {
  from {
    opacity: 0;
    transform: translateY(28px)
  }
}

/* Con el modal o el menú abiertos, el fondo no se desplaza. */
html.modal-abierta {
  overflow: hidden
}

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

  .wam__velo,
  .wam__box,
  .u-faq details[open] p,
  .v-label,
  .v-hero h1,
  .v-hero__sub,
  .v-hero__alt,
  .v-card,
  .v-cifras {
    animation: none
  }

  .wam__opt:hover {
    transform: none
  }
}

/* ── Salvavidas de desbordamiento ───────────────────────────────────────
   El carrusel de videos en móvil sale de la rejilla con un margen negativo
   para llegar al borde de la pantalla. `clip` lo recorta sin crear contexto de
   scroll; `hidden` sí lo crearía y rompería el `position:sticky` de las dos
   columnas pegadas de la página. El banner ya recorta por su cuenta. */
.v-prueba {
  overflow-x: clip
}

/* ── Anillo de foco de la landing ───────────────────────────────────────
   La zona copiada del index solo define el foco para la cabecera, la barra
   utilitaria y el menú. Dentro del contenido mandaba el anillo por defecto del
   navegador, que sobre marino casi no se ve. Se acota a `.v-main` y a las
   piezas flotantes de esta página: las otras dos no llevan esa clase. */
.v-main :focus-visible,
.wam :focus-visible,
.v-rail :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: none
}

/* Sobre el propio amarillo el anillo dorado sería invisible. */
.v-main .btn-x--gold:focus-visible {
  outline-color: var(--ink-deep)
}

/* ── Desplazamiento suave, solo en la landing ───────────────────────────
   Los CTA de esta página saltan a secciones que están muy abajo, y un salto
   seco de cuatro mil píxeles se lee como un cambio de página. `:has()` lo
   acota a la americana —es la única con `.v-main`— sin tocar a las otras dos.
   El `scroll-margin-top` que ya baja el ancla por debajo de la cabecera fija
   está más arriba, en `section[id]`, y vale igual. Con movimiento reducido, la
   regla global de la hoja lo devuelve a `auto`. */
html:has(.v-main) {
  scroll-behavior: smooth
}

/* ═══════════════════════════════════════════════════════════════════════════
   3b · LANDING · ITERACIÓN 2
   ---------------------------------------------------------------------------
   Lo que se añade aquí responde a tres cosas: la línea de progreso del proceso,
   los estilos que estaban escritos a mano dentro del HTML —ahora son clases,
   que es lo que hará falta el día que esto sea una plantilla— y el hueco que
   necesita la barra de conversión para no apoyarse sobre la última línea de
   texto en móvil.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Utilidades ──────────────────────────────────────────────────────────── */

/* El sprite de iconos: existe en el DOM, no ocupa nada y no se ve. */
.u-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

/* Ancla invisible de compatibilidad. Sin alto y sin caja, pero con el mismo
   margen de desplazamiento que las secciones, para que caiga por debajo de la
   cabecera fija. */
.v-ancla {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--tope-h) + 16px)
}

/* El icono de comprobado de las píldoras del test. El símbolo del sprite lleva
   `stroke="currentColor"` dentro, así que se pinta con `color`, no con
   `stroke`: un atributo stroke en el <svg> de fuera no llega. */
.v-tick {
  color: var(--brand)
}

/* ── La línea de progreso del proceso ────────────────────────────────────
   Las cuatro etapas cuelgan de una línea vertical que se tiende de arriba
   abajo según se van pasando. No es adorno: es lo que dice que son cuatro
   momentos de UN proceso y no cuatro servicios sueltos, y es la única manera
   de que se vea el avance sin escribir «paso 2 de 4» en cada bloque.

   Son dos líneas superpuestas, la gris de fondo y la dorada que crece. Sin
   JavaScript la dorada se queda a cero y la gris se ve igual: la lista sigue
   leyéndose como una secuencia. */
.v-etapas__lista {
  --hueco: clamp(36px, 8vh, 96px);
  --col-n: clamp(38px, 4vw, 54px);
  gap: var(--hueco)
}

.v-etapa {
  position: relative;
  grid-template-columns: var(--col-n) minmax(0, 1fr)
}

.v-etapa__n {
  text-align: center
}

.v-etapa:not(:last-child)::before,
.v-etapa:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--col-n) / 2 - 1px);
  top: clamp(34px, 3.2vw, 44px);
  bottom: calc(var(--hueco) * -1 + 6px);
  width: 2px;
  border-radius: 2px
}

.v-etapa:not(:last-child)::before {
  background: var(--rule)
}

.v-etapa:not(:last-child)::after {
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top center
}

.v-etapa.es-pasada:not(:last-child)::after {
  transform: none;
  transition: transform 700ms var(--mo-ease)
}

@media (prefers-reduced-motion:reduce) {
  .v-etapa.es-pasada:not(:last-child)::after {
    transition: none
  }
}

/* ── Lo que pedimos para empezar ─────────────────────────────────────────
   Los cinco apartados del perfil, dentro de la etapa que los pide. Lista en
   línea separada por puntos medios, no cinco píldoras ni cinco tarjetas: su
   trabajo es quitar miedo en dos segundos, no ocupar pantalla. */
.v-pide {
  margin-top: 18px;
  padding-left: 15px;
  border-left: 2px solid var(--gold)
}

.v-pide__rot {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy)
}

.v-pide__lista {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px
}

.v-pide__lista li {
  position: relative;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy-soft)
}

.v-pide__lista li+li::before {
  content: '·';
  position: absolute;
  left: -10px;
  color: var(--ink-400)
}

/* ── El test, sin estilos escritos a mano ────────────────────────────────
   Eran cuatro atributos `style` dentro del marcado. Son las mismas medidas,
   ahora en clases: sin esto, una futura plantilla tendría que arrastrar los
   estilos dentro del contenido. */
.v-quiz__paso {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase
}

.v-quiz__q {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.2
}

/* El antetítulo de la evaluación va en marino sobre el tinte claro. Acotado a
   `.v-main` para no tocar el test de la página de Schengen. */
.v-main .sk-quiz .sk-eyebrow {
  color: var(--ink-navy)
}

/* ── Menú móvil ──────────────────────────────────────────────────────────
   El enlace que encabeza un grupo no lleva filete: el filete separa opciones
   del mismo nivel, y debajo de este van sus tres hijos. */
.sk-sheet__link--grupo {
  border-bottom: none;
  padding-bottom: 4px
}

.v-sheet__act .sk-btn {
  height: 52px
}

/* El icono del flotante de WhatsApp no debe encogerse cuando se despliega la
   etiqueta al pasar el cursor. Estaba escrito a mano en las tres páginas. */
.sk-wa svg {
  flex: 0 0 auto
}

/* ── Hueco para la barra de conversión en móvil ──────────────────────────
   La barra mide unos 66px y se retira sola en la oferta, en el cierre y en el
   pie. Donde sí puede quedarse encima del texto es al final de la FAQ y al
   final de la evaluación, que son las dos últimas secciones donde está
   visible. Se les reserva el hueco de forma permanente en vez de añadirlo
   cuando la barra aparece: así no hay un salto de 66px a mitad del scroll. */
@media (max-width:767px) {

  .v-main .v-faq,
  .v-main .sk-quiz {
    padding-bottom: calc(clamp(56px, 7vw, 104px) + 72px)
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3c · LANDING · EL BOTÓN DE PAGO, DENTRO DEL PRIMER PANTALLAZO EN MÓVIL
   ---------------------------------------------------------------------------
   Medido en el navegador: en 375 y 390 px el botón de PayPal caía en 875 px,
   con la pantalla en 844. Es decir, el visitante que llega de un anuncio veía
   el precio pero NO la forma de pagar sin desplazarse. La causa principal no
   era el tamaño de la tarjeta sino el titular:

     `.v-hero h1` llevaba `max-width: 17ch`, que en escritorio es lo que hace
     que el titular caiga en cuatro líneas bonitas. En un teléfono de 390 px la
     columna mide 350 y ese tope la estrangula a 264: el titular pasaba a cinco
     líneas y empujaba todo lo demás casi cien píxeles hacia abajo.

   Un `ch` es el ancho del cero de la tipografía, no una medida de pantalla: en
   una columna estrecha deja de proteger la línea y pasa a estorbar.

   Se corrige el tope, se ajusta el cuerpo del titular al ancho real del
   teléfono y se aprieta la tarjeta lo justo. Ni una pieza desaparece.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:959px) {

  /* El titular usa el ancho que tiene, que ya está limitado por la columna. */
  .v-hero h1 {
    max-width: none;
    font-size: clamp(30px, 7.8vw, 38px);
    line-height: 1.07
  }

  .v-hero__sub {
    max-width: none;
    line-height: 1.55
  }

  /* El nombre de la tarjeta repite lo que ya dice el antetítulo dos líneas más
     arriba («VISA AMERICANA B1/B2 · ECUADOR»). En escritorio hay sitio de
     sobra y ordena la tarjeta; en un teléfono son 37 px que separan el precio
     del pago sin aportar nada. Se oculta A LA VISTA, no al lector de
     pantalla: sigue siendo el nombre accesible de la tarjeta. */
  .v-card__t {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
  }

  .v-card {
    padding: 18px
  }

  .v-card__precio {
    margin-top: 10px
  }

  .v-card__precio b {
    font-size: 48px
  }

  .v-card__lista {
    margin-top: 16px;
    gap: 8px
  }

  .v-card__lista li {
    font-size: 14.5px
  }

  .v-card .btn-pp--ancho {
    margin-top: 18px
  }

  /* Los últimos píxeles: el aire sobre el antetítulo y el que separa el
     subtítulo de la tarjeta. Con esto el botón también entra en las pantallas
     de 812 px de alto, que siguen siendo muchas. */
  .v-hero {
    padding-top: calc(var(--tope-h) + 16px)
  }

  .v-card {
    margin-top: 18px
  }
}

/* ── Cuerpo mínimo y áreas táctiles ──────────────────────────────────────
   El barrido de anchos encontró dos cosas más en móvil: rótulos en
   versalitas a 11,5 px, que a esa escala y con ese espaciado cuestan de leer,
   y tres enlaces de texto con menos de 40 px de alto, que en un pulgar son un
   objetivo pequeño. Ninguna de las dos rompe nada; las dos restan. */
@media (max-width:767px) {

  .sk-eyebrow,
  .v-card__rot,
  .v-compra__rot,
  .v-pide__rot,
  .v-dest__rot {
    font-size: 12px
  }

  /* 44px es el mínimo cómodo para un pulgar. Se consigue con relleno
     vertical, sin mover el texto de sitio.

     Los enlaces que van DENTRO de una frase se quedan como están: la norma
     los exceptúa a propósito, y estirarlos rompería el renglón. Los que se
     estiran son los que ocupan una línea para ellos solos, que son CTA. */
  .v-google__link,
  .v-google__mas {
    min-height: 44px;
    padding-block: 10px
  }

  .v-compra__duda a,
  .v-cierre__alt a {
    display: inline-block;
    padding-block: 11px
  }
}

/* ── El flotante de WhatsApp no compite con la compra ────────────────────
   En móvil el disco verde se apoya en la esquina inferior derecha, y ahí es
   exactamente donde cae el botón de PayPal de la tarjeta del banner: el
   flotante tapaba media etiqueta del CTA principal en el primer pantallazo.

   La hoja ya lo retiraba cuando la barra inferior está a la vista, pero en el
   banner la barra todavía no ha entrado, así que se veían los dos.

   En esta página, en móvil, el flotante sobra del todo: la vía de WhatsApp
   está en el propio banner («o pregúntanos por WhatsApp») y, en cuanto se
   pasa el banner, en la barra inferior. Dos discos verdes para lo mismo no
   suman, y uno de ellos estaba tapando el pago. En escritorio se queda: allí
   la barra de conversión no lleva WhatsApp. */
@media (max-width:767px) {
  .v-main~.sk-wa {
    display: none
  }
}

/* ═══ CABECERA EN PANTALLAS DE 320 px ═══════════════════════════════════════
   Medido en el navegador a 320 px: la fila de la cabecera necesitaba 335 px
   —logotipo 120 + hueco 24 + CTA 139 + hueco 8 + botón de menú 44— dentro de
   los 280 que deja el contenedor. Como la fila no encoge, el botón de menú se
   salía hasta 347 y quedaba PARCIALMENTE FUERA DE LA PANTALLA: en un teléfono
   de 320 px no se podía abrir el menú. No había desbordamiento visible porque
   un ancestro lleva `overflow-x: clip`, que lo recorta en silencio.

   El arreglo aprieta las tres piezas lo justo para que quepan, y va acotado a
   359 px o menos: de 360 en adelante no cambia absolutamente nada, que es
   donde estaba probado. Afecta a las cuatro páginas, y en las cuatro es una
   corrección, no un cambio de composición.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:359px) {

  .sk-header__inner {
    gap: 10px
  }

  .sk-logo {
    height: 24px
  }

  .sk-actions {
    gap: 6px
  }

  /* El CTA se estrecha, pero conserva los 44 px de alto: sigue siendo un
     objetivo táctil cómodo. */
  .sk-header .sk-btn--solid {
    padding-inline: 10px;
    font-size: 12.5px;
    letter-spacing: 0;
    white-space: nowrap
  }

  /* v14 · Cuatro píxeles de margen a cada lado, SOLO en la fila de la
     cabecera, para que la marca no baje de los 110 px de ancho en un
     teléfono de 320. Es el único sitio donde el logotipo compite por
     espacio con el CTA y el botón de menú a la vez. */
  .sk-header__inner {
    padding-inline: 16px
  }
}

/* ═══ LANDING · DESTINOS (solo la página Schengen) ══════════════════════════════════
   Ocho tarjetas con bandera y veintiun chips. Mismos tokens que el resto de
   la landing: papel, filete, marino, serif para el nombre. Las tarjetas son
   la excepción justificada a "menos tarjetas": aquí la rejilla ES el
   contenido, lo que se vende es la amplitud. Solo se anima transform.
   ════════════════════════════════════════════════════════════════════════ */
.v-dest__rot {
  margin: clamp(30px, 3.6vw, 46px) 0 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--slate)
}

.v-dest__top {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px
}

.v-dest__pais {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: transform var(--mo-dur-s) var(--mo-ease), border-color var(--mo-dur-s) var(--mo-ease)
}

.v-dest__pais:hover {
  transform: translateY(-2px);
  border-color: var(--gold)
}

.v-dest__flag {
  grid-row: 1 / span 2;
  width: 40px;
  height: 27px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(20, 38, 63, .12)
}

.v-dest__pais b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.15;
  color: var(--navy)
}

.v-dest__pais span {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--slate)
}

.v-dest__resto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px
}

.v-dest__resto li {
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--navy)
}

/* La aclaración: corta, con filete dorado, en el mismo tono que las notas
   del bloque de oferta. No es una advertencia, es un dato. */
.v-dest__nota {
  max-width: 64ch;
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: var(--white);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate)
}

@media (max-width:959px) {
  .v-dest__top {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* En móvil, carrusel con anclaje: cuatro tarjetas apiladas más veintiun
   chips serían dos pantallas de países. Mismo sangrado negativo que los
   videos, para que el carril llegue al borde sin sacar la sección de su
   rejilla. */
@media (max-width:639px) {
  .v-dest__top {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--sk-gutter) * -1);
    padding-inline: var(--sk-gutter);
    padding-bottom: 6px;
    scrollbar-width: none
  }

  .v-dest__top::-webkit-scrollbar {
    display: none
  }

  .v-dest__pais {
    flex: 0 0 min(72vw, 250px);
    scroll-snap-align: start
  }

  .v-dest__resto li {
    font-size: 13px;
    padding: 6px 11px
  }
}

/* El rótulo va a 12 px en móvil como el resto de antetítulos. Tiene que ir
   aquí, después de la regla base, porque la de los demás antetítulos está
   más arriba en la hoja y esta la pisaría por orden. */
@media (max-width:767px) {
  .v-dest__rot {
    font-size: 12px
  }
}

/* ═══ RÓTULOS DE LA BANDA DE CIFRAS EN MÓVIL ════════════════════════════════════
   `clamp(10px, 1vw, 11.5px)` toca su mínimo en cualquier teléfono: 1vw son
   3,9 px en una pantalla de 390. Diez píxeles en versalitas y con 0,15em de
   espaciado cuestan de leer, y así estaban las cuatro páginas que usan la
   banda.

   Se sube a 11,5 px y se aprieta el espaciado a la vez: el rótulo ocupa
   prácticamente el mismo ancho que antes —sigue en dos líneas a 320 px— pero
   con el cuerpo de letra del escritorio. De 768 px en adelante no cambia
   nada, que es donde ya estaba bien.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px) {
  .v-cifras__lista span {
    font-size: 11.5px;
    letter-spacing: .08em
  }
}

/* ═══ NOSOTROS · piezas propias (prefijo .n-) ════════════════════════════════════════
   La página institucional. Reutiliza cabeceras de sección, prueba social
   y cierre de las landings; lo que sigue es lo que no existía. Mismos tokens,
   misma tipografía, solo transform/opacity en movimiento.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Banner: texto a la izquierda, avión a la derecha ───────────────────── */
.n-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ink-deep);
  color: #fff
}

.n-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1
}

.n-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La asesora ocupa el centro-derecha del cuadrado, el póster del equipo la
     zona alta y la carpeta de Skybiz la baja. Anclado al 60/52 entran las
     tres, y el texto de la izquierda sigue cayendo sobre pared vacía. */
  object-position: 60% 52%
}

.n-hero__capa {
  position: absolute;
  inset: 0;
  /* La segunda capa oscurece la franja de arriba: ahí está el logotipo que
     lleva el propio fotograma, y no debe verse dos veces bajo la cabecera. */
  background:
    linear-gradient(98deg, rgba(3, 11, 36, .97) 0%, rgba(3, 11, 36, .95) 30%, rgba(3, 11, 36, .82) 48%, rgba(5, 17, 48, .5) 70%, rgba(5, 17, 48, .34) 100%)
}

.n-hero__shell {
  padding-top: calc(var(--tope-h) + clamp(56px, 9vw, 150px));
  padding-bottom: clamp(56px, 9vw, 150px)
}

.n-hero__txt {
  max-width: 640px
}

.n-hero h1 {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff
}

.n-hero h1 em {
  font-style: normal;
  color: var(--gold)
}

.n-hero .v-hero__sub {
  max-width: 56ch
}

.n-hero__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: clamp(24px, 2.8vw, 34px) 0 0
}

/* ── Fotografías: cada una con su foco, no un centrado universal ─────── */
.n-foto {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-deep)
}

.n-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.n-foto--alta {
  aspect-ratio: 4 / 5
}

.n-foto--alta img {
  object-position: 50% 45%
}

/* Los dos fotogramas del video: 16:9, su proporción nativa, sin ampliar de
   los 480 px que da YouTube. Son paisajes: centrados. */
.n-foto--viaje {
  position: relative;
  aspect-ratio: 16 / 9
}

.n-foto--viaje img {
  object-position: 50% 50%
}

.n-foto--viaje figcaption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(3, 11, 36, .72);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff
}

/* Una sola fotografía en «personas». */
.n-foto--sola {
  aspect-ratio: 4 / 3
}

.n-foto--sola img {
  object-position: 50% 42%
}

/* ── Mitad y mitad ────────────────────────────────────────────────────────── */
.n-mitad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center
}

.n-mitad__txt .v-h2 {
  margin-top: 10px
}

.n-dest {
  list-style: none;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.n-dest a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
  transition: border-color var(--mo-dur-s) var(--mo-ease), transform var(--mo-dur-s) var(--mo-ease)
}

.n-dest a:hover {
  border-color: var(--gold);
  transform: translateY(-1px)
}

.n-dest svg {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(20, 38, 63, .12)
}

/* ── Origen: foto | escalera | foto ────────────────────────────────────────── */
.n-origen__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  margin-top: clamp(28px, 3.4vw, 44px)
}

.n-paso {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative
}

/* La línea dorada baja por el margen y cada paso se apoya en ella. */
.n-paso::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--gold)
}

.n-paso li {
  position: relative;
  padding: 10px 0
}

.n-paso li::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 16px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper-deep);
  border: 2px solid var(--gold)
}

.n-paso li:first-child::before,
.n-paso li:last-child::before {
  background: var(--gold)
}

.n-paso b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  color: var(--navy)
}

.n-paso span {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--slate)
}

/* ── El video ─────────────────────────────────────────────────────────────────── */
.n-video {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--ink-navy);
  color: #fff
}

.n-centro {
  margin-inline: auto;
  text-align: center
}

.n-video__marco {
  position: relative;
  max-width: 980px;
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink-deep);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7)
}

.n-video__marco img,
.n-video__marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover
}

.n-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: linear-gradient(to top, rgba(3, 11, 36, .55), rgba(3, 11, 36, .08) 60%);
  color: #fff;
  cursor: pointer
}

.n-video__disco {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink-deep);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6);
  transition: transform var(--mo-dur-s) var(--mo-ease)
}

.n-video__disco svg {
  fill: currentColor;
  margin-left: 4px
}

.n-video__play:hover .n-video__disco {
  transform: scale(1.06)
}

.n-video__cap {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em
}

/* ── Línea de tiempo ─────────────────────────────────────────────────────────── */
.n-linea {
  list-style: none;
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px
}

.n-linea li {
  position: relative;
  padding-top: 26px
}

.n-linea li::before {
  content: "";
  position: absolute;
  left: 0;
  right: -28px;
  top: 6px;
  height: 1px;
  background: var(--rule)
}

.n-linea li:last-child::before {
  right: 0
}

.n-linea li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--paper)
}

.n-linea__hito {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums
}

.n-linea h3 {
  margin: 12px 0 8px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--navy)
}

.n-linea p {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate)
}

/* ── La familia Skybiz: una raíz y dos ramas ──────────────────────────── */
.n-eco {
  max-width: 900px;
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  text-align: center
}

.n-eco__raiz {
  position: relative;
  margin: 0;
  padding-bottom: 36px;
  font-family: 'Archivo', var(--sans);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -.02em;
  color: var(--navy)
}

.n-eco__raiz::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 30px;
  background: var(--gold)
}

.n-eco__ramas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.n-eco__ramas > li,
.n-eco__ramas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none
}

.n-eco__ramas > li {
  padding: 26px 22px 24px;
  border-top: 2px solid var(--rule);
  background: var(--white);
  border-radius: 0 0 12px 12px
}

.n-eco__aqui {
  border-top-color: var(--gold) !important
}

.n-eco__que {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate)
}

.n-eco__ramas b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--navy)
}

.n-eco__d {
  max-width: 34ch;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate)
}

.n-eco__ir {
  margin-top: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--gold)
}

.n-eco__aqui .n-eco__ir {
  text-decoration: none;
  color: var(--slate)
}

/* ── Las personas: texto y collage ─────────────────────────────────────────── */
.n-gente {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center
}

.n-gente__txt .v-h2 {
  margin-top: 10px
}

.n-gente__nota {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy-soft)
}

/* ── Qué hacemos: cuatro líneas, no cuatro tarjetas ────────────────────── */
.n-hace {
  list-style: none;
  max-width: 900px;
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 40px
}

.n-hace li {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--rule)
}

.n-hace svg {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  grid-row: 1 / span 2
}

.n-hace h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  color: var(--navy)
}

.n-hace p {
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--slate)
}

/* ── Cifras y licencia ─────────────────────────────────────────────────────── */
.n-cifras {
  padding: clamp(36px, 4.4vw, 56px) 0;
  background: var(--ink-navy);
  color: #fff
}

.n-cifras__lista {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.n-cifras__aval {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-family: var(--sans);
  font-size: 13.5px;
  text-align: center;
  color: rgba(255, 255, 255, .72)
}

.n-cifras__aval svg {
  flex: none;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.8
}

.n-cifras__aval b {
  color: #fff
}

/* ── Seis testimonios en fila ──────────────────────────────────────────────── */
.v-vids--seis {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

/* ── Skybiz en el mundo: el mapa de rutas del index, sobre marino ──────── */
.n-mundo {
  position: relative;
  isolation: isolate;
  background: var(--ink-navy);
  color: #fff
}

.n-mundo .sk-eyebrow {
  color: var(--gold)
}

.n-mundo .v-h2 {
  color: #fff
}

.n-mundo .v-h2 em {
  color: var(--gold)
}

.n-mundo .v-lead {
  color: rgba(255, 255, 255, .78)
}

.n-mundo__mapa {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .32;
  background: url('../img/hero/mapa-rutas.svg') no-repeat 50% 40% / 118% auto;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 45%, #000 30%, transparent 85%);
  mask-image: radial-gradient(80% 90% at 50% 45%, #000 30%, transparent 85%)
}

.n-sitios {
  list-style: none;
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  padding: 0;
  max-width: 780px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.n-sitio {
  padding: 24px 26px;
  border-radius: 12px;
  background: var(--white);
  color: var(--navy)
}

.n-sitio__flag {
  display: block;
  width: 36px;
  height: 24px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(20, 38, 63, .12)
}

.n-sitio__flag--ec {
  background: linear-gradient(to bottom, #FFDD00 0 50%, #034EA2 50% 75%, #ED1C24 75% 100%)
}

.n-sitio h3 {
  margin: 14px 0 6px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--navy)
}

.n-sitio address {
  margin: 0 0 14px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate)
}

.n-sitio a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--gold)
}

.n-sitio a svg {
  fill: currentColor
}

/* ── Tableta ───────────────────────────────────────────────────────────────────── */
@media (max-width:959px) {

  /* El banner deja de ser un fondo: la imagen va PRIMERO, como banda 16:10,
     y el texto debajo sobre marino. Nada escrito encima de la foto. */
  /* En móvil la banda es casi cuadrada, como la propia fotografía: así
     entran la asesora, la carpeta y el póster del equipo sin recortar a
     nadie. */
  .n-hero__media {
    position: static;
    aspect-ratio: 5 / 4
  }

  .n-hero__img {
    object-position: 62% 38%
  }

  /* Solo se funde por abajo con el marino del texto: la fotografía se ve
     entera. */
  .n-hero__capa {
    background: linear-gradient(to top, var(--ink-deep) 0%, rgba(3, 11, 36, .4) 22%, rgba(3, 11, 36, 0) 48%)
  }

  .n-hero__media {
    position: relative
  }

  .n-hero__shell {
    padding-top: clamp(22px, 4vw, 36px);
    padding-bottom: clamp(44px, 7vw, 64px)
  }

  .n-hero {
    padding-top: var(--tope-h)
  }

  .n-mitad,
  .n-gente {
    grid-template-columns: 1fr
  }

  .n-foto--alta {
    aspect-ratio: 16 / 10
  }

  .n-origen__grid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .n-linea {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .n-cifras__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .v-vids--seis {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

/* ── Móvil ─────────────────────────────────────────────────────────────────────── */
@media (max-width:639px) {
  .n-hero h1 {
    font-size: clamp(30px, 8vw, 38px)
  }

  .n-hero__act .btn-x,
  .n-hero__act .v-ghost {
    width: 100%;
    justify-content: center
  }

  .n-linea {
    grid-template-columns: 1fr;
    gap: 0
  }

  .n-linea li {
    padding: 0 0 28px 28px
  }

  .n-linea li::before {
    left: 6px;
    right: auto;
    top: 6px;
    bottom: -6px;
    width: 1px;
    height: auto
  }

  .n-linea li:last-child::before {
    display: none
  }

  .n-eco__ramas {
    grid-template-columns: 1fr
  }

  .n-hace {
    grid-template-columns: 1fr;
    gap: 0
  }

  .n-sitios {
    grid-template-columns: 1fr
  }

  .n-video__disco {
    width: 66px;
    height: 66px
  }

  .n-video__marco {
    border-radius: 12px
  }
}

@media (max-width:767px) {
  .n-eco__que {
    font-size: 12px
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · VISA DE ESTUDIANTE · LANDING
   ---------------------------------------------------------------------------
   Todo lo que empieza por .e- es exclusivo de visa-estudiante.html, como .v-
   lo es de las landings de venta y .n- de Nosotros. Se reutiliza tal cual la
   cabecera, el panel móvil, el pie, .btn-x, .u-faq, .wam y el flotante.

   ESTE BLOQUE SUSTITUYE AL DE LA v1, que ocupaba 27 KB y vestía catorce
   secciones. Ocho piezas bastan porque la página tiene ocho bloques:

     banner · para quién · qué incluye · cómo funciona · franja de CTA ·
     confianza · preguntas · cierre

   Tres decisiones de composición y ninguna más:

     · EL BANNER ES MITAD TEXTO, MITAD FOTOGRAFÍA. No hay tarjeta flotando
       encima, ni cifras, ni categorías. La foto sangra por la derecha y solo
       lleva un degradado corto donde se junta con el marino, para que el
       corte no parezca un recorte.

     · CERO CAJAS DONDE BASTA UN FILETE. Las tres situaciones y los cuatro
       pasos se separan con una línea de un píxel y espacio. Las únicas cajas
       de la página son las cuatro de «qué incluye», porque ahí sí hay un
       icono, un número y dos líneas que leer juntos.

     · TRES MOMENTOS OSCUROS: banner, franja de CTA y cierre. Entre ellos,
       claro, alternando papel y papel hondo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Piezas comunes ──────────────────────────────────────────────────────── */
.e-sec {
  padding-block: clamp(56px, 7.5vw, 116px);
  background: var(--s1)
}

.e-sec--tint {
  background: var(--s2)
}

.e-head {
  max-width: 54ch
}

.e-head--centro {
  margin-inline: auto;
  text-align: center
}

.e-h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -.026em;
  color: var(--ink-navy)
}

.e-h2 em {
  font-style: normal;
  color: var(--brand-600)
}

.e-lead {
  margin: 18px 0 0;
  max-width: 52ch;
  font-family: var(--sans);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.62;
  color: var(--slate)
}

.e-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold)
}

.e-eyebrow__flag {
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .34)
}

/* El botón secundario. Solo vive sobre marino y nunca lleva relleno: si lo
   tuviera competiría con el dorado, que es la acción principal. */
.e-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  transition: border-color var(--mo-dur-s) var(--mo-ease), color var(--mo-dur-s) var(--mo-ease)
}

.e-ghost:hover {
  border-color: var(--gold);
  color: var(--gold)
}

/* ── 1 · Banner ──────────────────────────────────────────────────────────
   78vh en escritorio: alto para respirar, no tanto como para esconder el
   segundo bloque. La fotografía es absoluta a la derecha y el texto vive en
   la retícula de siempre, así que la marca no se desalinea con el resto. */
.e-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-navy);
  color: #fff;
  /* La cabecera del sitio es `position: fixed`, así que el banner tiene que
     reservarle su alto. Si no, la fotografía pasa POR DEBAJO del menú y los
     enlaces blancos quedan sobre el ladrillo claro del edificio: ilegibles. */
  padding-top: var(--tope-h)
}

.e-hero__shell {
  position: relative;
  z-index: 2
}

.e-hero__txt {
  padding-block: clamp(44px, 6vw, 92px)
}

.e-hero h1 {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 13ch;
  text-wrap: balance;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1.03;
  letter-spacing: -.032em;
  color: #fff
}

.e-hero h1 em {
  font-style: normal;
  color: var(--gold)
}

.e-hero__sub {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 42ch;
  font-family: var(--sans);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .8)
}

.e-hero__act {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3vw, 40px)
}

.e-hero__foto {
  margin: 0;
  background: var(--ink-deep)
}

.e-hero__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%
}

@media (min-width:1000px) {
  .e-hero {
    min-height: 78vh;
    display: flex;
    align-items: center
  }

  .e-hero__shell {
    width: 100%
  }

  .e-hero__txt {
    max-width: 46%
  }

  .e-hero__foto {
    position: absolute;
    inset: var(--tope-h) 0 0 52%;
    z-index: 1
  }

  /* El degradado corto no es decoración: sin él la fotografía empieza con un
     corte recto sobre el marino y se ve pegada, no compuesta. */
  .e-hero__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--ink-navy) 0%, rgba(7, 26, 74, .55) 9%, transparent 26%)
  }
}

/* ── 2 · Para quién es ───────────────────────────────────────────────────
   Tres situaciones, un filete arriba y una línea de texto. Sin caja, sin
   icono y sin botón: aquí el visitante solo tiene que reconocerse. */
.e-casos {
  list-style: none;
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin: clamp(38px, 4.5vw, 62px) 0 0;
  padding: 0
}

@media (min-width:760px) {
  .e-casos {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

.e-casos li {
  padding-top: 20px;
  border-top: 2px solid var(--gold)
}

.e-casos h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.22;
  letter-spacing: -.014em;
  color: var(--ink-navy)
}

.e-casos p {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--slate)
}

/* ── 3 · Qué incluye ─────────────────────────────────────────────────────
   Las únicas cajas de la página, y se ganan el sitio: icono, número, título
   y una línea forman una unidad que hay que leer junta. */
.e-items {
  list-style: none;
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
  margin: clamp(38px, 4.5vw, 58px) 0 0;
  padding: 0
}

@media (min-width:620px) {
  .e-items {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (min-width:1040px) {
  .e-items {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

.e-items li {
  padding: clamp(24px, 2.4vw, 30px);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 var(--rule)
}

.e-items__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--s3);
  color: var(--brand-600)
}

.e-items__n {
  margin: 20px 0 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-400)
}

.e-items h3 {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.24;
  letter-spacing: -.012em;
  color: var(--ink-navy)
}

.e-items p {
  margin: 9px 0 0;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--slate)
}

/* La línea del precio que todavía no existe. Ni tabla de tarifas ni cifra
   inventada: se dice que el alcance se confirma y se ofrece la evaluación. */
.e-nota {
  margin: clamp(26px, 3vw, 36px) 0 0;
  max-width: 62ch;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate)
}

/* ── 4 · Cómo funciona ───────────────────────────────────────────────────
   Cuatro pasos, un título por paso y nada más. La línea la dibuja un filete
   con un punto por paso; el primero va en dorado. */
.e-linea {
  list-style: none;
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  margin: clamp(38px, 4.5vw, 58px) 0 0;
  padding: 0
}

@media (min-width:720px) {
  .e-linea {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

.e-linea li {
  position: relative;
  padding-top: 26px
}

.e-linea li::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule)
}

.e-linea li::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule)
}

.e-linea li:first-child::after {
  background: var(--gold)
}

.e-linea__n {
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--brand-600)
}

.e-linea h3 {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.22;
  letter-spacing: -.014em;
  color: var(--ink-navy)
}

/* ── 5 · Franja de conversión ────────────────────────────────────────────
   El único CTA entre el banner y el cierre. Corta y oscura: es un respiro
   con una acción, no una sección. */
.e-franja {
  background: var(--ink-navy);
  color: #fff;
  padding-block: clamp(42px, 5vw, 64px)
}

.e-franja__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px
}

.e-franja__t {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(25px, 2.8vw, 36px);
  line-height: 1.14;
  letter-spacing: -.024em;
  color: #fff
}

.e-franja__sub {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72)
}

/* ── 6 · Confianza ───────────────────────────────────────────────────────
   Fotografía real a la izquierda, argumento a la derecha y tres cifras
   debajo. Ni una cuarta cifra, ni sellos, ni insignias. */
.e-conf__grid {
  display: grid;
  gap: clamp(28px, 3.6vw, 60px);
  align-items: center
}

@media (min-width:900px) {
  .e-conf__grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr)
  }
}

.e-conf__foto {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-deep)
}

.e-conf__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 58% 50%
}

.e-cifras {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(30px, 3.4vw, 42px) 0 0;
  padding: 0
}

.e-cifras li {
  padding-left: 16px;
  border-left: 1px solid var(--rule)
}

.e-cifras li:first-child {
  padding-left: 0;
  border-left: 0
}

.e-cifras b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink-navy);
  font-variant-numeric: tabular-nums
}

.e-cifras span {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-500)
}

/* ── 7 · Preguntas ───────────────────────────────────────────────────── */
.e-faq .u-faq {
  max-width: 78ch;
  margin-inline: auto;
  margin-top: clamp(30px, 3.6vw, 44px)
}

/* ── 8 · Cierre ──────────────────────────────────────────────────────────
   400 px de alto en escritorio. Un titular, una frase y las dos acciones de
   siempre: no hay nada nuevo que contar a estas alturas. */
.e-cierre {
  background: var(--ink-deep);
  color: #fff;
  padding-block: clamp(64px, 7vw, 110px);
  text-align: center
}

.e-cierre__t {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.08;
  letter-spacing: -.028em;
  color: #fff
}

.e-cierre__t em {
  font-style: normal;
  color: var(--gold)
}

.e-cierre__sub {
  margin: 18px auto 0;
  max-width: 48ch;
  font-family: var(--sans);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .76)
}

.e-cierre__act {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 3vw, 38px)
}

/* ── Móvil ───────────────────────────────────────────────────────────────
   Comprobado a 390 px, que es el ancho de referencia. El banner cambia de
   orden: eyebrow, titular, apoyo, botones y DESPUÉS la fotografía, para que
   la acción esté en la primera pantalla y no detrás de una imagen alta. */
@media (max-width:999px) {
  .e-hero__foto img {
    aspect-ratio: 1 / 1;
    max-height: 62vh
  }
}

@media (max-width:719px) {

  /* La línea de cuatro pasos gira: en un teléfono un proceso se lee como
     lista, no como cuatro columnas de una palabra. */
  .e-linea {
    gap: 0
  }

  .e-linea li {
    padding: 0 0 22px 24px
  }

  .e-linea li::before {
    top: 6px;
    bottom: -6px;
    left: 3px;
    right: auto;
    width: 1px;
    height: auto
  }

  .e-linea li::after {
    top: 3px;
    left: 0
  }

  .e-linea li:last-child {
    padding-bottom: 0
  }

  .e-linea li:last-child::before {
    display: none
  }
}

@media (max-width:640px) {

  /* Las tres cifras en una fila de 390 px dejarían «PROCESOS» partido. */
  .e-cifras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
  }

  .e-cifras li {
    padding-left: 12px
  }

  /* 11,5 px es el mínimo legible que fijó la revisión de móvil del sitio.
     Lo que cede es el espaciado, no el tamaño. */
  .e-cifras span {
    font-size: 11.5px;
    letter-spacing: .04em
  }

  .e-hero__act .btn-x,
  .e-hero__act .e-ghost,
  .e-cierre__act .btn-x,
  .e-cierre__act .e-ghost {
    width: 100%
  }

  .e-franja__in .btn-x {
    width: 100%
  }
}