/* ===========================================================================
   SKYBIZ VISAS · hoja de la portada
   ---------------------------------------------------------------------------
   GENERADA por wordpress/tools/extract-home-css.mjs a partir del <style> de
   index.html (v15). Sin las reglas de cabecera, menú móvil, pie y modal: en
   WordPress esas piezas son las globales (skybiz.css). Se carga solo en la
   portada, después de skybiz.css. Para cambiar la home, editar aquí.
   =========================================================================== */
/* ── Tokens ─────────────────────────────────────────────────────── */
        :root {
          --navy: #071A4A;
          --navy-deep: #030B24;
          --navy-hover: #0C2A75;
          --gold: #FFC400;
          --gold-ink: #3B2400;
          --white: #FFFFFF;
          --paper: #F5F6FA;
          --paper-2: #EDF0F6;
          --ink: #0A0E1A;
          --ink-2: #2B3245;
          --slate: #5A6478;
          --mute: #8A93A6;
          --hair: rgba(7, 26, 74, .10);
          --hair-2: rgba(7, 26, 74, .18);
          --hair-light: rgba(255, 255, 255, .14);
          --wa: #25D366;
          --wa-deep: #128C7E;
          --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
          --sans: 'IBM Plex Sans', system-ui, sans-serif;
          --ease: cubic-bezier(.2, .7, .2, 1);
          --mo-ease: cubic-bezier(.22, .61, .36, 1);
          --mo-dur: 700ms;
          --mo-dur-s: 560ms;
          --mo-dur-l: 880ms;
          --max: 1240px;
          --gutter: clamp(20px, 4vw, 48px);
          --tope-h: 106px
        }


        @media (min-width:1024px) {

          :root {
            --tope-h: 122px
          }
}


        /* ── Base ───────────────────────────────────────────────────────── */
        * {
          box-sizing: border-box
        }


        html {
          -webkit-text-size-adjust: 100%;
          scroll-behavior: smooth
        }


        html.modal-abierta {
          overflow: hidden
        }


        body {
          margin: 0;
          background: var(--white);
          color: var(--ink);
          font-family: var(--sans);
          font-size: 16px;
          line-height: 1.6;
          -webkit-font-smoothing: antialiased;
          text-wrap: pretty
        }


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


        button {
          font: inherit
        }


        a {
          color: var(--navy);
          text-decoration: none
        }


        :focus-visible {
          outline: 3px solid var(--gold);
          outline-offset: 3px;
          box-shadow: none
        }


        .btn--gold:focus-visible,
        .visa__tag:focus-visible {
          outline-color: var(--navy)
        }


        summary {
          list-style: none;
          cursor: pointer
        }


        summary::-webkit-details-marker {
          display: none
        }


        /* Los elementos que entran desde la derecha (.rv-right) asoman 28px
           antes de revelarse: sin esto, la página podía deslizarse en
           horizontal un instante. */
        html,
        body {
          overflow-x: hidden;
          overflow-x: clip
        }


        .sec {
          overflow-x: clip
        }


        [id] {
          scroll-margin-top: calc(var(--tope-h) - 20px)
        }


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


        .flag {
          flex: 0 0 auto;
          width: 24px;
          height: 16px;
          border-radius: 2.5px;
          box-shadow: 0 0 0 1px rgba(7, 26, 74, .12)
        }


        /* ── Movimiento: revelado al scroll ─────────────────────────────
           El estado oculto solo existe cuando el JS ha armado el elemento
           (clase .rv). Si el script no corre, todo se ve. */
        .rv {
          opacity: 0;
          transform: translateY(20px);
          transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease)
        }


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


        .rv-up {
          transform: translateY(28px)
        }


        .rv-left {
          transform: translateX(-28px)
        }


        .rv-right {
          transform: translateX(28px)
        }


        .rv-scale {
          transform: scale(.98)
        }


        .rv-blur {
          filter: blur(12px);
          transform: translateY(14px);
          transition: opacity var(--mo-dur-l) var(--mo-ease), transform var(--mo-dur-l) var(--mo-ease), filter var(--mo-dur-l) var(--mo-ease)
        }


        .rv-blur.rv--in {
          filter: blur(0)
        }


        /* ── Botones: dos acciones de marca, PayPal y WhatsApp ─────────── */
        .btn {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          height: 54px;
          padding: 0 26px;
          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 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease)
        }


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


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


        .btn svg {
          flex: 0 0 auto;
          transition: transform 200ms var(--ease)
        }


        .btn:hover .i-arrow {
          transform: translateX(3px)
        }


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


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


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


        .btn--navy:hover {
          background: var(--navy-hover);
          color: #fff;
          box-shadow: 0 16px 34px -18px rgba(7, 26, 74, .7)
        }


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


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


        .btn--ghost-light {
          background: rgba(255, 255, 255, .04);
          border-color: rgba(255, 255, 255, .34);
          color: #fff
        }


        .btn--ghost-light:hover {
          background: rgba(255, 255, 255, .1);
          border-color: #fff;
          color: #fff
        }


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


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


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


        .btn__flags {
          display: inline-flex;
          margin-right: 2px
        }


        .btn__flags .flag {
          width: 20px;
          height: 13.5px;
          margin-left: -5px;
          box-shadow: 0 0 0 1.5px var(--navy)
        }


        .btn__flags .flag:first-child {
          margin-left: 0
        }


        /* PayPal: el logotipo oficial, sin recolorear. Blanco con filete,
           que es una de las variantes que PayPal admite: en amarillo se
           confundiría con el botón de Skybiz y son dos acciones distintas. */
        .sk-pp {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          height: 52px;
          padding: 0 20px;
          border-radius: 8px;
          background: #fff;
          border: 1.5px solid #C9D0DB;
          font-family: var(--sans);
          font-weight: 600;
          font-size: 15px;
          line-height: 1;
          white-space: nowrap;
          color: #001C64;
          transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease)
        }


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


        .sk-pp img {
          display: block;
          width: auto;
          height: 18px
        }


        .sk-pp span::before {
          content: '·';
          margin-right: 10px;
          color: #9AA3B5
        }


        /* ── HERO ───────────────────────────────────────────────────────────
           Tres planos: el mapa de rutas al fondo, el texto a la izquierda y la
           persona a la derecha, de pie sobre la franja de cifras. La franja
           cruza todo el ancho y la persona la pisa: eso da la profundidad. */
        .hero {
          position: relative;
          isolation: isolate;
          overflow: hidden;
          background: var(--navy);
          color: #fff;
          padding-top: calc(var(--tope-h) + clamp(12px, 2.4vw, 32px))
        }


        .hero__mapa {
          position: absolute;
          inset: 0;
          z-index: -3;
          pointer-events: none;
          opacity: .34;
          background: url('../img/hero/mapa-rutas.svg') no-repeat 0 38% / 128% auto;
          -webkit-mask-image: radial-gradient(88% 80% at 46% 42%, #000 26%, transparent 82%);
          mask-image: radial-gradient(88% 80% at 46% 42%, #000 26%, transparent 82%);
          animation: heroFondo 900ms var(--mo-ease) both
        }


        .hero__velo {
          position: absolute;
          inset: 0;
          z-index: -2;
          pointer-events: none;
          background:
            radial-gradient(124% 104% at 52% 42%, transparent 48%, rgba(3, 11, 36, .5) 100%),
            linear-gradient(96deg, rgba(7, 26, 74, .92) 0%, rgba(7, 26, 74, .86) 30%, rgba(7, 26, 74, .5) 62%, rgba(7, 26, 74, .26) 100%)
        }


        .hero__grid {
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column
        }


        .hero__eyebrow {
          margin: 0;
          font-weight: 600;
          font-size: 11.5px;
          letter-spacing: .2em;
          text-transform: uppercase;
          color: var(--gold);
          animation: heroEntra 600ms var(--mo-ease) both
        }


        .hero__h1 {
          margin: clamp(14px, 1.8vw, 22px) 0 0;
          font-family: var(--serif);
          font-weight: 400;
          font-size: clamp(36px, 4.6vw, 62px);
          line-height: 1.05;
          letter-spacing: -.028em;
          color: #fff
        }


        .hero__ln {
          display: block;
          overflow: hidden;
          padding-bottom: .1em;
          margin-bottom: -.1em
        }


        .hero__ln>span {
          display: block;
          animation: heroSube 760ms var(--mo-ease) both
        }


        .hero__ln:nth-child(2)>span {
          animation-delay: 100ms
        }


        .hero__ln:nth-child(3)>span {
          animation-delay: 200ms
        }


        .hero__h1 em {
          font-style: normal;
          font-weight: 600;
          color: var(--gold)
        }


        .hero__sub {
          margin: clamp(16px, 1.8vw, 24px) 0 0;
          max-width: 46ch;
          font-size: clamp(15.5px, 1.15vw, 18px);
          line-height: 1.62;
          color: rgba(255, 255, 255, .8);
          animation: heroEntra 620ms var(--mo-ease) 520ms both
        }


        .hero__cta {
          display: flex;
          flex-wrap: wrap;
          gap: 12px 14px;
          margin-top: clamp(22px, 2.4vw, 32px);
          animation: heroEntra 620ms var(--mo-ease) 680ms both
        }


        @media (max-width:520px) {

          .hero__cta .btn {
            width: 100%
          }
}


        /* La persona */
        .hero__foto {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          animation: heroFoto 800ms var(--mo-ease) 300ms both
        }


        .hero__foto::before {
          content: '';
          position: absolute;
          left: -22%;
          right: -22%;
          bottom: -6%;
          height: 74%;
          z-index: -2;
          background: radial-gradient(closest-side, rgba(38, 84, 196, .58), rgba(7, 26, 74, 0) 74%)
        }


        .hero__persona {
          display: block;
          width: 100%;
          height: auto;
          -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 86%, transparent 100%)
        }


        /* Las cifras: protagonistas, sobre una franja a todo el ancho.
           La franja llega al borde inferior del banner y lleva aire arriba y
           abajo: apretada contra las cifras parecia un recorte, no una banda. */
        .hero__cifras {
          position: relative;
          z-index: 1;
          list-style: none;
          margin: 0;
          padding: clamp(26px, 3.4vw, 44px) 0 clamp(28px, 3.6vw, 46px);
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          gap: 12px clamp(28px, 4.5vw, 72px);
          animation: heroEntra 700ms var(--mo-ease) 820ms both
        }


        /* La banda se dibuja a sangre.
           OJO CON EL CENTRADO: en escritorio esta lista es la columna 1 de la
           rejilla del banner, no el ancho completo. Un `width:100vw` centrado
           con translateX(-50%) se centraba en ESA columna, que esta a la
           izquierda, y la banda se quedaba a media pantalla por la derecha.
           Estirandola 100vw hacia cada lado no depende de donde este su
           contenedor; el `overflow:hidden` del banner recorta lo que sobra.
           `bottom:-1px` evita la costura de un pixel con la seccion siguiente
           en pantallas con escalado fraccional. */
        .hero__cifras::before {
          content: '';
          position: absolute;
          top: 0;
          bottom: -1px;
          left: -100vw;
          right: -100vw;
          z-index: -1;
          background: rgba(3, 11, 36, .58)
        }


        .hero__cifras li {
          display: flex;
          flex-direction: column;
          gap: 6px;
          min-width: 0
        }


        .hero__cifras b {
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(32px, 9vw, 44px);
          line-height: 1;
          letter-spacing: -.03em;
          color: var(--gold);
          font-variant-numeric: tabular-nums;
          white-space: nowrap
        }


        .hero__cifras span {
          font-weight: 600;
          font-size: 10px;
          line-height: 1.3;
          letter-spacing: .13em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, .78)
        }


        /* Móvil: texto · persona (centrada, apoyada en la franja) · cifras */
        @media (max-width:899px) {

          .hero__foto {
            z-index: 0;
            width: min(76%, 360px);
            margin: clamp(18px, 5vw, 32px) auto -28px
          }


          .hero__persona {
            -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 80%, transparent 100%)
          }


          .hero__cifras::before {
            background: rgba(3, 11, 36, .72)
          }
}


        /* Escritorio: rejilla de dos columnas y la persona de pie sobre la
           franja. */
        @media (min-width:900px) {

          .hero {
            min-height: min(90vh, 880px);
            display: grid
          }


          .hero__grid {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(300px, .85fr);
            grid-template-rows: 1fr auto 1fr auto;
            column-gap: clamp(24px, 3vw, 56px);
            align-items: end;
            width: 100%
          }


          .hero__txt {
            grid-column: 1;
            grid-row: 2;
            align-self: center;
            padding-bottom: clamp(8px, 2vw, 24px)
          }


          .hero__foto {
            grid-column: 2;
            grid-row: 1 / -1;
            align-self: end;
            justify-self: center;
            z-index: 2;
            width: 100%
          }


          .hero__persona {
            width: auto;
            max-width: 100%;
            height: min(74vh, 720px)
          }


          .hero__cifras {
            grid-column: 1;
            grid-row: 4;
            justify-content: flex-start
          }


          .hero__cifras b {
            font-size: clamp(44px, 5.2vw, 76px)
          }


          .hero__cifras span {
            font-size: 11.5px;
            letter-spacing: .16em
          }


          .hero__ln>span {
            white-space: nowrap
          }
}


        /* Portátiles bajos: se comprime el aire, no la persona. */
        @media (min-width:900px) and (max-height:820px) {

          .hero__h1 {
            font-size: clamp(34px, 4vw, 52px)
          }


          .hero__persona {
            height: min(70vh, 560px)
          }
}


        @keyframes heroSube {
          from {
            transform: translateY(105%)
          }
        }


        @keyframes heroEntra {
          from {
            opacity: 0;
            transform: translateY(14px)
          }
        }


        @keyframes heroFoto {
          from {
            opacity: 0;
            transform: translateY(26px)
          }
        }


        @keyframes heroFondo {
          from {
            opacity: 0
          }

          to {
            opacity: .34
          }
        }


        /* ── Secciones: encabezado común ────────────────────────────────── */
        .sec {
          padding-block: clamp(64px, 8vw, 118px)
        }


        .sec--paper {
          background: var(--paper)
        }


        .eyebrow {
          margin: 0;
          font-weight: 600;
          font-size: 11.5px;
          line-height: 1.2;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: var(--navy)
        }


        .title {
          margin: 14px 0 0;
          font-family: var(--serif);
          font-weight: 400;
          font-size: clamp(30px, 3.8vw, 50px);
          line-height: 1.1;
          letter-spacing: -.022em;
          color: var(--navy);
          text-wrap: balance
        }


        .title em {
          font-style: normal;
          font-weight: 600
        }


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


        .sec__head--center {
          max-width: 66ch;
          margin-inline: auto;
          text-align: center
        }


        .sec__head--center .lead {
          margin-inline: auto
        }


        /* ── VISAS: la elección ─────────────────────────────────────────── */
        .vsel {
          display: flex;
          gap: 8px;
          margin: 26px auto 0;
          max-width: 560px
        }


        .vsel__b {
          flex: 1 1 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          min-height: 48px;
          padding: 0 8px;
          background: #fff;
          border: 1px solid var(--hair-2);
          border-radius: 10px;
          font-weight: 600;
          font-size: 13.5px;
          color: var(--navy);
          cursor: pointer;
          transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease)
        }


        .vsel__b[aria-pressed="true"] {
          background: var(--navy);
          border-color: var(--navy);
          color: #fff
        }


        @media (min-width:1024px) {

          .vsel {
            display: none
          }
}


        .visas {
          list-style: none;
          margin: clamp(26px, 3.6vw, 48px) auto 0;
          padding: 0;
          display: grid;
          gap: clamp(18px, 2.2vw, 28px);
          max-width: 560px
        }


        @media (min-width:1024px) {

          .visas {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            max-width: none
          }
}


        @media (max-width:1023px) {


          .visas[data-sel="usa"] .visa:not([data-visa="usa"]),
          .visas[data-sel="canada"] .visa:not([data-visa="canada"]),
          .visas[data-sel="europa"] .visa:not([data-visa="europa"]) {
            display: none
          }
}


        .visa {
          position: relative;
          display: flex;
          flex-direction: column;
          background: #fff;
          border-radius: 18px;
          overflow: hidden;
          box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -44px rgba(7, 26, 74, .4);
          transition: transform 340ms var(--mo-ease), box-shadow 340ms var(--mo-ease)
        }


        .visa:hover {
          transform: translateY(-6px);
          box-shadow: 0 0 0 1px var(--hair), 0 44px 80px -40px rgba(7, 26, 74, .5)
        }


        /* -- Cabecera de la tarjeta: el flyer de Skybiz --------------------
           Son las piezas comerciales de la agencia, no fotografia de banco:
           se muestran tal cual, sin desaturar y sin velo encima.

           SE ENCUADRA LA BANDA SUPERIOR (16:9 desde el borde de arriba), y es
           deliberado, por dos razones:
             1. Ahi viven el titular, el monumento y -en el americano- el
                logotipo: es la mitad que vende.
             2. El pie del flyer lleva su propio precio impreso y en dos de los
                tres NO coincide con el precio vigente de la web: el de Canada
                dice $205 y el de Europa $195, frente a los $190 y $180 que
                cobra Skybiz. Publicar la pieza entera pondria dos precios
                distintos en la misma tarjeta.
           PENDIENTE - Cuando lleguen flyers con el precio correcto, para
           mostrar mas pieza basta con subir este aspect-ratio a 3/2 o a 4/5. */
        /* El flyer se muestra ENTERO, sin recorte vertical: los tres archivos
           son 900x1125, asi que el hueco va en su misma proporcion, 4:5, y
           `cover` no llega a recortar nada.

           OJO · El pie de la pieza lleva su propio precio impreso y en dos de
           los tres NO coincide con el precio vigente: el flyer de Canada dice
           $205 y el de Europa $195, frente a los $190 y $180 que cobra Skybiz
           y que van en el texto de la tarjeta, en el JSON-LD y en la FAQ.
           Mientras las piezas no se rehagan, cada tarjeta enseña dos precios.
           Para volver a ocultar el pie: aspect-ratio 4/3 y un degradado a
           marino desde el 74% de la banda. */
        .visa__media {
          position: relative;
          display: block;
          aspect-ratio: 4 / 5;
          overflow: hidden;
          background: var(--navy)
        }


        .visa__media img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 50% 50%;
          transition: transform 760ms var(--mo-ease)
        }


        .visa:hover .visa__media img {
          transform: scale(1.03)
        }


        /* Con la pieza entera a la vista no queda sitio libre encima: el
           destino vuelve al cuerpo de la tarjeta. */
        .visa__dest {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 8px 10px;
          margin: 0 0 12px;
          font-weight: 600;
          font-size: 11.5px;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: var(--slate)
        }


        /* Arriba a la derecha: es la unica esquina que en las tres piezas es
           cielo liso. A la izquierda choca con el logotipo del flyer americano
           y abajo, con el recuadro "INCLUYE". */
        .visa__tag {
          padding: 4px 9px;
          border-radius: 5px;
          background: var(--gold);
          color: var(--gold-ink);
          font-weight: 600;
          font-size: 10.5px;
          letter-spacing: .14em;
          text-transform: uppercase
        }


        .visa__body {
          display: flex;
          flex-direction: column;
          flex: 1;
          padding: clamp(20px, 2vw, 28px)
        }


        .visa__t {
          margin: 0;
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(24px, 2vw, 28px);
          line-height: 1.15;
          letter-spacing: -.018em;
          color: var(--navy)
        }


        .visa__t a {
          color: inherit
        }


        .visa__tipo {
          margin: 6px 0 0;
          font-weight: 500;
          font-size: 13px;
          line-height: 1.45;
          color: var(--slate)
        }


        .visa__precio {
          display: flex;
          align-items: baseline;
          flex-wrap: wrap;
          gap: 4px 10px;
          margin-top: 20px
        }


        .visa__was {
          font-size: 16px;
          color: var(--mute);
          text-decoration: line-through;
          text-decoration-thickness: 1.5px
        }


        .visa__now {
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(42px, 3.4vw, 50px);
          line-height: 1;
          letter-spacing: -.03em;
          color: var(--navy);
          font-variant-numeric: tabular-nums
        }


        .visa__cur {
          font-weight: 600;
          font-size: 13px;
          color: var(--slate)
        }


        .visa__save {
          flex-basis: 100%;
          display: flex;
          align-items: center;
          gap: 9px;
          margin-top: 8px;
          font-weight: 500;
          font-size: 14px;
          color: var(--ink-2)
        }


        .visa__save b {
          display: inline-block;
          padding: 3px 8px;
          border-radius: 5px;
          background: var(--gold);
          color: var(--gold-ink);
          font-weight: 600;
          font-size: 13px;
          letter-spacing: .02em;
          font-variant-numeric: tabular-nums
        }


        .visa__inc {
          list-style: none;
          margin: 20px 0 0;
          padding: 0;
          display: grid;
          gap: 9px
        }


        .visa__inc li {
          position: relative;
          padding-left: 24px;
          font-size: 14.5px;
          line-height: 1.5;
          color: var(--ink-2)
        }


        .visa__inc li::before {
          content: '';
          position: absolute;
          left: 1px;
          top: .5em;
          width: 11px;
          height: 6px;
          border-left: 2px solid var(--navy);
          border-bottom: 2px solid var(--navy);
          transform: rotate(-45deg)
        }


        .visa__cta {
          display: grid;
          gap: 10px;
          margin-top: auto;
          padding-top: 22px
        }


        .visa__nota {
          margin: 10px 0 0;
          font-size: 12.5px;
          line-height: 1.5;
          color: var(--slate)
        }


        .visa__mas {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          margin-top: 14px;
          font-weight: 600;
          font-size: 13.5px;
          color: var(--navy)
        }


        .visa__mas svg {
          transition: transform 200ms var(--ease)
        }


        .visa__mas:hover svg {
          transform: translateX(3px)
        }


        .visas__pie {
          margin: clamp(20px, 2.4vw, 28px) auto 0;
          max-width: 70ch;
          text-align: center;
          font-size: 14px;
          line-height: 1.6;
          color: var(--slate)
        }


        /* ── PROCESO: mira lo que hacemos por ti ────────────────────────── */
        .proc {
          display: grid;
          gap: clamp(26px, 4vw, 64px);
          margin-top: clamp(30px, 4vw, 56px);
          align-items: center
        }


        @media (min-width:960px) {

          .proc {
            grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr)
          }
}


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


        .proc__btn {
          display: grid;
          grid-template-columns: 36px 1fr;
          gap: 4px 16px;
          align-items: start;
          width: 100%;
          text-align: left;
          padding: 16px 18px 16px 14px;
          background: transparent;
          border: 0;
          border-radius: 14px;
          cursor: pointer;
          color: inherit;
          transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease)
        }


        .proc__n {
          display: grid;
          place-items: center;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          box-shadow: inset 0 0 0 1px var(--hair-2);
          font-weight: 600;
          font-size: 12.5px;
          letter-spacing: .06em;
          color: var(--slate);
          transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease)
        }


        .proc__t {
          display: block;
          padding-top: 6px;
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(19px, 1.6vw, 23px);
          line-height: 1.2;
          letter-spacing: -.012em;
          color: var(--navy)
        }


        .proc__more {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows 520ms var(--mo-ease)
        }


        .proc__more>span {
          display: block;
          overflow: hidden;
          opacity: 0;
          transition: opacity 400ms var(--mo-ease)
        }


        .proc__d {
          display: block;
          margin-top: 8px;
          font-size: 15px;
          line-height: 1.55;
          color: var(--slate)
        }


        .proc__para {
          display: block;
          margin-top: 10px;
          font-weight: 500;
          font-size: 14.5px;
          line-height: 1.5;
          color: var(--navy)
        }


        .proc__para::before {
          content: '';
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-right: 9px;
          border-radius: 2px;
          background: var(--gold);
          vertical-align: 1px
        }


        .proc[data-paso="0"] .proc__item[data-i="0"] .proc__btn,
        .proc[data-paso="1"] .proc__item[data-i="1"] .proc__btn,
        .proc[data-paso="2"] .proc__item[data-i="2"] .proc__btn,
        .proc[data-paso="3"] .proc__item[data-i="3"] .proc__btn {
          background: #fff;
          box-shadow: 0 0 0 1px var(--hair), 0 24px 48px -36px rgba(7, 26, 74, .45)
        }


        .proc[data-paso="0"] .proc__item[data-i="0"] .proc__n,
        .proc[data-paso="1"] .proc__item[data-i="1"] .proc__n,
        .proc[data-paso="2"] .proc__item[data-i="2"] .proc__n,
        .proc[data-paso="3"] .proc__item[data-i="3"] .proc__n {
          background: var(--gold);
          color: var(--gold-ink);
          box-shadow: none
        }


        .proc[data-paso="0"] .proc__item[data-i="0"] .proc__more,
        .proc[data-paso="1"] .proc__item[data-i="1"] .proc__more,
        .proc[data-paso="2"] .proc__item[data-i="2"] .proc__more,
        .proc[data-paso="3"] .proc__item[data-i="3"] .proc__more {
          grid-template-rows: 1fr
        }


        .proc[data-paso="0"] .proc__item[data-i="0"] .proc__more>span,
        .proc[data-paso="1"] .proc__item[data-i="1"] .proc__more>span,
        .proc[data-paso="2"] .proc__item[data-i="2"] .proc__more>span,
        .proc[data-paso="3"] .proc__item[data-i="3"] .proc__more>span {
          opacity: 1
        }


        .proc__visor {
          position: relative;
          aspect-ratio: 4 / 3;
          border-radius: 22px;
          overflow: hidden;
          background: var(--navy);
          box-shadow: 0 40px 80px -50px rgba(7, 26, 74, .6)
        }


        .proc__foto {
          position: absolute;
          inset: 0;
          margin: 0;
          opacity: 0;
          transform: scale(1.05);
          transition: opacity 700ms var(--mo-ease), transform 1400ms var(--mo-ease)
        }


        .proc__foto img {
          width: 100%;
          height: 100%;
          object-fit: cover
        }


        .proc__foto figcaption {
          position: absolute;
          left: clamp(18px, 2.4vw, 28px);
          right: clamp(18px, 2.4vw, 28px);
          bottom: clamp(30px, 3vw, 40px);
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(20px, 1.8vw, 26px);
          line-height: 1.2;
          color: #fff;
          text-shadow: 0 2px 14px rgba(3, 11, 36, .6);
          transform: translateY(10px);
          transition: transform 700ms var(--mo-ease)
        }


        .proc__foto::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(to top, rgba(3, 11, 36, .78) 0%, rgba(3, 11, 36, 0) 55%)
        }


        .proc__foto figcaption {
          z-index: 1
        }


        .proc[data-paso="0"] .proc__foto[data-i="0"],
        .proc[data-paso="1"] .proc__foto[data-i="1"],
        .proc[data-paso="2"] .proc__foto[data-i="2"],
        .proc[data-paso="3"] .proc__foto[data-i="3"] {
          opacity: 1;
          transform: none
        }


        .proc[data-paso="0"] .proc__foto[data-i="0"] figcaption,
        .proc[data-paso="1"] .proc__foto[data-i="1"] figcaption,
        .proc[data-paso="2"] .proc__foto[data-i="2"] figcaption,
        .proc[data-paso="3"] .proc__foto[data-i="3"] figcaption {
          transform: none
        }


        .proc__idx {
          position: absolute;
          right: clamp(18px, 2.4vw, 28px);
          top: clamp(16px, 2vw, 22px);
          z-index: 2;
          padding: 7px 11px;
          border-radius: 6px;
          background: rgba(3, 11, 36, .5);
          -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
          font-weight: 600;
          font-size: 12px;
          letter-spacing: .14em;
          color: #fff;
          font-variant-numeric: tabular-nums
        }


        .proc__bar {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 2;
          height: 4px;
          background: rgba(255, 255, 255, .18)
        }


        .proc__bar i {
          position: absolute;
          inset: 0;
          background: var(--gold);
          transform-origin: left center;
          transform: scaleX(1)
        }


        .proc--auto .proc__bar i {
          animation: procBar 5000ms linear forwards
        }


        @keyframes procBar {
          from {
            transform: scaleX(0)
          }

          to {
            transform: scaleX(1)
          }
        }


        @media (max-width:959px) {

          .proc__visor {
            order: -1
          }


          .proc__btn {
            padding: 14px 14px 14px 10px
          }
}


        /* ── EVALUACIÓN: tú nos cuentas, nosotros te orientamos ─────────── */
        .eval {
          display: grid;
          gap: clamp(28px, 4vw, 64px);
          align-items: center
        }


        @media (min-width:960px) {

          .eval {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
          }
}


        .eval__trato {
          margin: 24px 0 0;
          padding: 18px 22px;
          border-radius: 12px;
          background: var(--paper);
          font-size: 16px;
          line-height: 1.6;
          color: var(--ink-2)
        }


        .eval__trato b {
          font-weight: 600;
          color: var(--navy)
        }


        .eval__meta {
          margin: 18px 0 0;
          font-weight: 500;
          font-size: 12.5px;
          letter-spacing: .08em;
          text-transform: uppercase;
          color: var(--mute)
        }


        .quiz {
          position: relative;
          isolation: isolate;
          overflow: hidden;
          background: var(--navy);
          color: #fff;
          border-radius: 22px;
          padding: clamp(24px, 3vw, 40px);
          box-shadow: 0 44px 90px -44px rgba(7, 26, 74, .65);
          min-height: 420px
        }


        .quiz::before {
          content: '';
          position: absolute;
          right: -28%;
          top: -36%;
          width: 72%;
          aspect-ratio: 1;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(38, 84, 196, .5), transparent 68%);
          pointer-events: none;
          z-index: -1
        }


        .quiz__big {
          position: absolute;
          right: 18px;
          top: 6px;
          z-index: -1;
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(110px, 12vw, 160px);
          line-height: 1;
          letter-spacing: -.05em;
          color: rgba(255, 255, 255, .05);
          pointer-events: none;
          user-select: none
        }


        .quiz__top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px
        }


        .quiz__step {
          font-weight: 600;
          font-size: 12px;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: var(--gold);
          font-variant-numeric: tabular-nums
        }


        .quiz__prog {
          display: flex;
          gap: 6px
        }


        .quiz__prog i {
          display: block;
          width: 30px;
          height: 3px;
          border-radius: 2px;
          background: rgba(255, 255, 255, .18);
          transition: background-color 300ms var(--ease)
        }


        .quiz[data-step="0"] .quiz__prog i:nth-child(1),
        .quiz[data-step="1"] .quiz__prog i:nth-child(-n+2),
        .quiz[data-step="2"] .quiz__prog i:nth-child(-n+3),
        .quiz[data-step="3"] .quiz__prog i {
          background: var(--gold)
        }


        .quiz__q {
          margin: 24px 0 0;
          max-width: 18ch;
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(24px, 2.3vw, 31px);
          line-height: 1.18;
          letter-spacing: -.015em;
          color: #fff
        }


        .quiz__opts {
          display: grid;
          gap: 10px;
          margin-top: 22px;
          animation: heroEntra 420ms var(--mo-ease) both
        }


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


        .quiz__opt {
          display: flex;
          align-items: center;
          gap: 12px;
          min-height: 56px;
          padding: 0 18px;
          background: rgba(255, 255, 255, .06);
          border: 1px solid rgba(255, 255, 255, .16);
          border-radius: 12px;
          font-weight: 500;
          font-size: 16px;
          color: #fff;
          text-align: left;
          cursor: pointer;
          transition: background-color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease)
        }


        .quiz__opt:hover {
          background: rgba(255, 255, 255, .12);
          border-color: var(--gold);
          transform: translateX(3px)
        }


        .quiz__opts--n .quiz__opt {
          justify-content: center;
          min-height: 66px;
          padding: 0;
          font-family: var(--serif);
          font-weight: 600;
          font-size: 24px
        }


        .quiz__opts--n .quiz__opt:hover {
          transform: translateY(-2px)
        }


        .quiz__opt .flag {
          box-shadow: 0 0 0 1px rgba(255, 255, 255, .2)
        }


        .quiz__back {
          margin-top: 16px;
          background: none;
          border: 0;
          padding: 8px 0;
          font-weight: 500;
          font-size: 13.5px;
          color: rgba(255, 255, 255, .62);
          cursor: pointer;
          transition: color 200ms var(--ease)
        }


        .quiz__back:hover {
          color: #fff
        }


        .quiz__gracias {
          margin: 24px 0 0;
          font-weight: 600;
          font-size: 12px;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: var(--gold)
        }


        .quiz__res {
          animation: heroEntra 420ms var(--mo-ease) both
        }


        .quiz__res h3 {
          margin: 12px 0 0;
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(22px, 2vw, 27px);
          line-height: 1.22;
          letter-spacing: -.012em;
          color: #fff
        }


        .quiz__res p {
          margin: 12px 0 0;
          font-size: 15.5px;
          line-height: 1.62;
          color: rgba(255, 255, 255, .82)
        }


        .quiz__btn {
          width: 100%;
          margin-top: 22px
        }


        .quiz__again {
          display: block;
          width: 100%;
          margin-top: 8px;
          background: none;
          border: 0;
          padding: 10px;
          font-weight: 500;
          font-size: 13.5px;
          color: rgba(255, 255, 255, .55);
          cursor: pointer
        }


        .quiz__again:hover {
          color: #fff
        }


        /* ── NOSOTROS: fotografía + historia + números ──────────────────── */
        .nos {
          display: grid;
          gap: clamp(32px, 4vw, 64px);
          align-items: center
        }


        @media (min-width:960px) {

          .nos {
            grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr)
          }
}


        .nos__fotos {
          position: relative;
          padding: 0 12% 16% 0
        }


        .nos__f1 {
          margin: 0;
          aspect-ratio: 16 / 11;
          border-radius: 20px;
          overflow: hidden
        }


        .nos__f1 img,
        .nos__f2 img {
          width: 100%;
          height: 100%;
          object-fit: cover
        }


        .nos__f2 {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 46%;
          margin: 0;
          aspect-ratio: 4 / 3;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 34px 70px -34px rgba(7, 26, 74, .55);
          outline: 6px solid var(--paper)
        }


        .nos__p {
          margin: 18px 0 0;
          max-width: 54ch;
          font-size: 16px;
          line-height: 1.65;
          color: var(--ink-2)
        }


        .nos__honesto {
          margin: 24px 0 0;
          max-width: 54ch;
          padding: 16px 20px;
          border-radius: 12px;
          background: #fff;
          font-size: 15px;
          line-height: 1.6;
          color: var(--slate)
        }


        .nos__honesto b {
          font-weight: 600;
          color: var(--navy)
        }


        .nos__cifras {
          grid-column: 1 / -1;
          list-style: none;
          margin: clamp(8px, 2vw, 20px) 0 0;
          padding: 0;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 28px 24px
        }


        @media (min-width:760px) {

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


        .nos__cifras b {
          display: block;
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(40px, 4.8vw, 66px);
          line-height: 1;
          letter-spacing: -.03em;
          color: var(--navy);
          font-variant-numeric: tabular-nums
        }


        .nos__cifras span {
          display: block;
          margin-top: 8px;
          font-weight: 500;
          font-size: 12.5px;
          line-height: 1.4;
          letter-spacing: .08em;
          text-transform: uppercase;
          color: var(--slate)
        }


        .nos__cred {
          grid-column: 1 / -1;
          margin: 4px 0 0;
          max-width: 90ch;
          font-size: 14px;
          line-height: 1.65;
          color: var(--slate)
        }


        .nos__cred b {
          font-weight: 600;
          color: var(--navy)
        }


        .faq {
          grid-column: 1 / -1;
          margin-top: clamp(24px, 3.6vw, 44px);
          max-width: 860px
        }


        .faq__t {
          margin: 0 0 14px;
          font-weight: 600;
          font-size: 12px;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: var(--navy)
        }


        .faq__i {
          background: #fff;
          border-radius: 12px;
          padding: 0 20px;
          transition: box-shadow 300ms var(--ease)
        }


        .faq__i+.faq__i {
          margin-top: 8px
        }


        .faq__i[open] {
          box-shadow: 0 24px 48px -36px rgba(7, 26, 74, .4)
        }


        .faq__i summary {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
          min-height: 58px;
          padding: 8px 0;
          font-weight: 600;
          font-size: 16px;
          line-height: 1.35;
          color: var(--navy)
        }


        .faq__plus {
          position: relative;
          flex: 0 0 auto;
          width: 18px;
          height: 18px
        }


        .faq__plus::before,
        .faq__plus::after {
          content: '';
          position: absolute;
          left: 50%;
          top: 50%;
          width: 14px;
          height: 2px;
          border-radius: 2px;
          background: var(--gold);
          transform: translate(-50%, -50%);
          transition: transform 240ms var(--ease)
        }


        .faq__plus::after {
          transform: translate(-50%, -50%) rotate(90deg)
        }


        .faq__i[open] .faq__plus::after {
          transform: translate(-50%, -50%) rotate(0)
        }


        .faq__i p {
          margin: 0;
          padding: 0 0 18px;
          max-width: 70ch;
          font-size: 15px;
          line-height: 1.62;
          color: var(--slate)
        }


        /* ── TESTIMONIOS: la experiencia, en tres tiempos, y los videos ──── */
        .sec--testi {
          overflow: hidden
        }


        /* El titular de testimonios es el mas grande de la pagina despues del
           banner: aqui es donde hay que detenerse, porque lo que sigue es la
           unica prueba de visado que existe -los videos de las familias-. */
        /* El ancho corto es del titular, no del bloque: puesto en el
           contenedor estrangulaba también la bajada, que quedaba en una
           columna de seis líneas. */
        .testi__head {
          max-width: none
        }


        .testi__head .title {
          max-width: 16ch;
          font-size: clamp(38px, 6vw, 76px);
          line-height: 1.03;
          letter-spacing: -.03em
        }


        .testi__head .lead {
          max-width: 54ch
        }


        .testi__row {
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
          gap: 16px 24px;
          margin-top: clamp(26px, 3.4vw, 44px)
        }


        .sk-nav-btn {
          width: 42px;
          height: 42px;
          display: grid;
          place-items: center;
          background: #fff;
          border: 1px solid var(--hair-2);
          border-radius: 50%;
          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)
        }


        @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

          .testi__row .sk-nav-btn {
            display: none
          }
}


        .sk-shorts {
          list-style: none;
          margin: 20px 0 0;
          padding: 2px 0 10px;
          display: flex;
          gap: clamp(14px, 1.6vw, 20px);
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          scrollbar-width: none
        }


        .sk-shorts::-webkit-scrollbar {
          display: none
        }


        .sk-short {
          position: relative;
          flex: 0 0 clamp(180px, 21vw, 232px);
          aspect-ratio: 9 / 16;
          scroll-snap-align: start;
          border-radius: 14px;
          overflow: hidden;
          background: var(--navy)
        }


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


        .sk-short__play {
          position: absolute;
          inset: 0;
          z-index: 2;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          gap: 10px;
          padding: 16px 14px;
          background: linear-gradient(to top, rgba(3, 11, 36, .82) 0%, rgba(3, 11, 36, .12) 55%);
          border: 0;
          cursor: pointer;
          color: #fff
        }


        .sk-short__disc {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 52px;
          height: 52px;
          display: grid;
          place-items: center;
          border-radius: 50%;
          background: rgba(255, 255, 255, .94);
          color: var(--navy);
          transition: transform 260ms var(--ease)
        }


        .sk-short__play:hover .sk-short__disc {
          transform: translate(-50%, -50%) scale(1.1)
        }


        .sk-short__cap {
          font-weight: 600;
          font-size: 13px;
          line-height: 1.35;
          text-align: center;
          text-shadow: 0 1px 8px rgba(3, 11, 36, .8)
        }


        /* Marquesina en bucle (solo escritorio con puntero fino). La
           distancia y la duración las escribe marquesinas() tras medir. */
        .sk-marq {
          position: relative
        }


        .sk-marq--on {
          overflow: hidden;
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent)
        }


        .sk-marq--on .sk-marq__track {
          overflow: visible;
          width: max-content;
          scroll-snap-type: none;
          animation: marqDesliza var(--marq-dur, 48s) linear infinite;
          will-change: transform
        }


        .sk-marq--on:hover .sk-marq__track,
        .sk-marq--on:focus-within .sk-marq__track,
        .sk-marq--on.marq--quieto .sk-marq__track {
          animation-play-state: paused
        }


        @keyframes marqDesliza {
          from {
            transform: translate3d(0, 0, 0)
          }

          to {
            transform: translate3d(var(--marq-dist, -50%), 0, 0)
          }
        }


        .google {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 14px 24px;
          margin-top: clamp(28px, 3.4vw, 44px)
        }


        .google__score {
          font-family: var(--serif);
          font-weight: 600;
          font-size: 46px;
          line-height: 1;
          color: var(--navy);
          font-variant-numeric: tabular-nums
        }


        .google__col {
          display: grid;
          gap: 5px
        }


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


        .google__meta {
          font-size: 14.5px;
          color: var(--slate)
        }


        .google__meta b {
          font-weight: 600;
          color: var(--navy)
        }


        .google .btn {
          margin-left: auto
        }


        .google__nota {
          flex-basis: 100%;
          margin: 0;
          max-width: 90ch;
          font-size: 13px;
          line-height: 1.55;
          color: var(--mute)
        }


        @media (max-width:600px) {

          .google .btn {
            margin-left: 0;
            width: 100%
          }
}


        /* ── BLOG: tres preguntas reales, sin cuadrícula de tarjetas ────── */
        .posts {
          list-style: none;
          margin: clamp(30px, 4vw, 56px) 0 0;
          padding: 0;
          display: grid;
          gap: clamp(28px, 3.4vw, 48px)
        }


        @media (min-width:800px) {

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


        .post__a {
          display: flex;
          flex-direction: column;
          height: 100%;
          color: inherit
        }


        .post__dest {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          font-weight: 600;
          font-size: 11.5px;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: var(--slate)
        }


        .post__t {
          margin: 16px 0 0;
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(21px, 1.8vw, 26px);
          line-height: 1.22;
          letter-spacing: -.014em;
          color: var(--navy);
          transition: color 200ms var(--ease)
        }


        .post__a:hover .post__t {
          color: var(--navy-hover)
        }


        .post__x {
          margin: 12px 0 0;
          font-size: 15px;
          line-height: 1.6;
          color: var(--slate)
        }


        .post__more {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          margin-top: auto;
          padding-top: 18px;
          font-weight: 600;
          font-size: 14.5px;
          color: var(--navy)
        }


        .post__more svg {
          transition: transform 200ms var(--ease)
        }


        .post__a:hover .post__more svg {
          transform: translateX(4px)
        }


        .blog__cta {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          gap: 16px 28px;
          margin-top: clamp(40px, 5vw, 72px)
        }


        .blog__cta p {
          margin: 0;
          font-family: var(--serif);
          font-weight: 400;
          font-size: clamp(22px, 2vw, 30px);
          line-height: 1.25;
          letter-spacing: -.015em;
          color: var(--navy)
        }


        /* ── CIERRE: dos caminos, una conversación ──────────────────────── */
        .sec--cierre {
          position: relative;
          isolation: isolate;
          background: linear-gradient(168deg, var(--navy-deep) 0%, var(--navy) 55%, #04102F 100%);
          color: #fff
        }


        .cierre__head {
          max-width: 760px;
          margin-inline: auto;
          text-align: center
        }


        .cierre__logo {
          width: clamp(136px, 13vw, 174px);
          height: auto;
          margin: 0 auto 30px
        }


        .title--light {
          color: #fff
        }


        .title--light em {
          color: var(--gold)
        }


        .cierre__grid {
          display: grid;
          gap: clamp(18px, 3vw, 32px);
          margin-top: clamp(36px, 4.6vw, 64px)
        }


        @media (min-width:860px) {

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


        .cierre__col {
          display: flex;
          flex-direction: column;
          padding: clamp(24px, 3vw, 40px);
          border-radius: 20px;
          background: rgba(255, 255, 255, .05)
        }


        .cierre__et {
          margin: 0;
          font-weight: 600;
          font-size: 12px;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: var(--gold)
        }


        .cierre__h {
          margin: 10px 0 0;
          font-family: var(--serif);
          font-weight: 600;
          font-size: clamp(24px, 2.2vw, 30px);
          line-height: 1.2;
          letter-spacing: -.015em;
          color: #fff
        }


        .cierre__p {
          margin: 12px 0 0;
          font-size: 15.5px;
          line-height: 1.6;
          color: rgba(255, 255, 255, .76)
        }


        .cierre__col--dudas {
          justify-content: center
        }


        .cierre__col .btn--gold {
          margin-top: 24px;
          align-self: flex-start
        }


        .cierre__wa {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          margin-top: 18px;
          background: none;
          border: 0;
          padding: 0;
          font-weight: 600;
          font-size: 15px;
          color: #fff;
          cursor: pointer;
          transition: color 200ms var(--ease)
        }


        .cierre__wa:hover {
          color: var(--gold)
        }


        .cierre__pp {
          list-style: none;
          margin: 20px 0 0;
          padding: 0;
          display: grid;
          gap: 10px
        }


        .cierre__pp li {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          gap: 12px 16px;
          padding: 12px 14px;
          border-radius: 12px;
          background: rgba(255, 255, 255, .06)
        }


        .cierre__visa {
          display: flex;
          align-items: center;
          gap: 12px;
          min-width: 0
        }


        .cierre__visa b {
          display: block;
          font-weight: 600;
          font-size: 15px;
          color: #fff
        }


        .cierre__visa span {
          display: block;
          font-weight: 600;
          font-size: 13px;
          color: var(--gold)
        }


        .cierre__pp .sk-pp {
          height: 44px;
          padding: 0 14px;
          font-size: 14px
        }


        .cierre__pie {
          margin: clamp(24px, 3vw, 36px) 0 0;
          text-align: center;
          font-size: 14px;
          color: rgba(255, 255, 255, .6)
        }


        /* ── Barra fija móvil, WhatsApp flotante y botón de subir ───────── */
        .sbar {
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 70;
          display: flex;
          gap: 8px;
          padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
          background: rgba(255, 255, 255, .96);
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
          box-shadow: 0 -10px 30px -14px rgba(7, 26, 74, .3);
          transform: translateY(120%);
          transition: transform 240ms var(--ease)
        }


        .sbar__eval,
        .sbar__wa {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 7px;
          min-height: 48px;
          border: 0;
          border-radius: 10px;
          font-weight: 600;
          font-size: 15.5px;
          color: #fff;
          cursor: pointer
        }


        .sbar__eval {
          flex: 1 1 58%;
          background: var(--navy)
        }


        .sbar__wa {
          flex: 1 1 42%;
          background: var(--wa-deep)
        }


        .subir {
          position: fixed;
          right: clamp(14px, 1.8vw, 26px);
          bottom: 98px;
          z-index: 79;
          display: none;
          place-items: center;
          width: 44px;
          height: 44px;
          background: #fff;
          border: 1px solid var(--hair-2);
          border-radius: 50%;
          color: var(--navy);
          cursor: pointer;
          opacity: 0;
          transform: translateY(8px);
          transition: opacity 240ms var(--ease), transform 240ms var(--ease)
        }


        @media (min-width:1024px) {

          .subir {
            display: grid
          }
}


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


        @keyframes wamVelo {
          from {
            opacity: 0
          }
        }


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


        /* ── Movimiento reducido: nada queda atrapado en opacity:0 ──────── */
        @media (prefers-reduced-motion:reduce) {


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


          .rv,
          .rv-up,
          .rv-left,
          .rv-right,
          .rv-scale,
          .rv-blur {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important
          }
.hero__mapa,
.hero__ln>span,
.hero__eyebrow,
.hero__sub,
.hero__cta,
.hero__foto,
.hero__cifras,
.quiz__opts,
.quiz__res {
            animation: none
          }
.btn:hover,
.sk-pp:hover,
.visa:hover,
.quiz__opt:hover {
            transform: none
          }


          .visa:hover .visa__media img {
            transform: none
          }


          .subir {
            opacity: 1;
            transform: none
          }
}