/* Hallmark · Rinsa Experiences · MOTOR ÚNICO de las tres capas
 * capa 1 Catalogue · capa 2 Split Studio · capa 3 Long Document
 * Sistema bloqueado por CORE/web/exp/DESIGN.md — consistencia > variedad.
 * pre-emit critique: P5 H5 E5 S5 R4 V4
 */

:root{
  --color-navy:#1A3A6B; --color-navy-deep:#0F2547; --color-crimson:#B01C2E;
  --color-crimson-hover:#9A1828;
  --color-gold:#C9A227;  --color-green:#1E7A4F;
  --color-ink:#16233a;   --color-ink-2:#5a6b85;
  /* El blanco puro es el papel del sistema gráfico Rinsa: lo comparten los 26 subdominios.
     Los demás neutros SÍ van tintados hacia el navy (218°). */
  --color-rule:#e6ebf2;  --color-paper:#ffffff; --color-paper-2:#f6f8fc;
  --color-focus:#1A3A6B; --color-velo:rgba(15,37,71,.55);
  --color-sello-fondo:rgba(255,255,255,.94);

  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:20px;
  --space-lg:32px; --space-xl:48px; --space-2xl:72px; --space-3xl:104px;

  --text-display:clamp(2.3rem,4.6vw,3.5rem);
  --text-xl:clamp(1.12rem,1.9vw,1.3rem);
  --text-price:clamp(2.2rem,4.2vw,3rem);

  --rule:1px solid var(--color-rule);
  --radius:14px; --radius-sm:9px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:180ms; --dur-mid:340ms;
  /* El fundido a modo premium dura lo MISMO que la cuenta atrás del precio: si el
     color llega antes, se ve como un parpadeo y la cifra sigue corriendo sola. El
     valor real lo fija `exp.js` en runtime desde su constante, para que no puedan
     divergir; esto es solo el respaldo si el JS no llegara a hacerlo.
     La curva es `ease-in-out` y no la del sistema: la de sistema (`--ease-out`)
     arranca disparada y el color estaría casi puesto a la cuarta parte del tiempo. */
  --dur-premium:1100ms; --ease-fundido:ease-in-out;
  --wrap:1160px; --barra:64px;
  --sombra-card:0 1px 2px rgba(15,37,71,.04),0 8px 24px rgba(15,37,71,.06);
  --sombra-card-hover:0 2px 4px rgba(15,37,71,.06),0 14px 36px rgba(15,37,71,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--color-ink);background:var(--color-paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-style:normal;line-height:1.14;letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(1rem,4vw,1.5rem)}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink-2)}

/* ══ NAV · el mismo en las tres capas ══════════════════════════════ */
/* El nav se fija en pantalla: se retiró la barra inferior y el regreso + el CTA viven aquí.
   z-index por encima del índice de la capa 3, que también es sticky. */
.nav-fijo{position:sticky;top:0;z-index:80;background:var(--color-sello-fondo);
          backdrop-filter:blur(10px);border-bottom:var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
     padding:var(--space-sm) 0;min-height:var(--barra)}
.nav-fijo + * , .nav-fijo ~ main{scroll-margin-top:var(--barra)}
.nav-marca{font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:.14em;
           text-transform:uppercase;color:var(--color-navy);text-decoration:none;white-space:nowrap}
.nav-marca span{color:var(--color-ink-2);font-weight:600}
.nav-links{display:flex;align-items:center;gap:var(--space-sm)}
.chip{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px;padding:0 var(--space-md);
      border:1px solid var(--color-rule);border-radius:999px;text-decoration:none;font-size:.88rem;
      font-weight:600;color:var(--color-navy);white-space:nowrap;background:var(--color-paper);
      transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.chip:hover{border-color:var(--color-navy);background:var(--color-paper-2)}
.chip:active{transform:translateY(1px)}
/* El regreso a la capa anterior es una acción de primer orden: se marca, no se esconde. */
.chip--volver{border-color:var(--color-navy);color:var(--color-navy)}
/* CTA del nav: mismo peso que el botón principal, en formato chip para no romper la barra. */
.chip--cta{background:var(--color-crimson);border-color:var(--color-crimson);color:#fff}
.chip--cta:hover{background:var(--color-crimson-hover);border-color:var(--color-crimson-hover);color:#fff}

/* ══ BOTONES ═══════════════════════════════════════════════════════ */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--space-xl);
     background:var(--color-crimson);color:#fff;border:0;border-radius:var(--radius-sm);
     font-family:var(--font-display);font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;
     transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.cta:hover{background:var(--color-crimson-hover)}
.cta:active{transform:translateY(1px)}
.cta:disabled{opacity:.5;cursor:default}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--space-lg);
           border:1px solid var(--color-navy);border-radius:var(--radius-sm);color:var(--color-navy);
           text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:.95rem;
           background:var(--color-paper);cursor:pointer;
           transition:background-color var(--dur-fast) var(--ease-out)}
.btn-ghost:hover{background:var(--color-paper-2)}
.btn-ghost:active{transform:translateY(1px)}
.salida{color:var(--color-navy);font-weight:600;font-size:.9rem;text-decoration:none;
        border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease-out)}
.salida:hover{border-bottom-color:var(--color-navy)}
.salida::after{content:" →"}

/* ══ CAPA 1 · catálogo ═════════════════════════════════════════════ */
.intro{padding-block:clamp(var(--space-lg),3.4vw,var(--space-xl)) var(--space-lg)}
.intro h1{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;color:var(--color-navy-deep)}
.intro p{margin-top:var(--space-xs);color:var(--color-ink-2);max-width:56ch}

.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
          gap:clamp(var(--space-md),2.2vw,var(--space-lg));
          padding-bottom:clamp(var(--space-2xl),6vw,var(--space-3xl))}
/* La tarjeta es un OBJETO, no texto flotando: tiene borde, fondo y peso propio. */
.tarjeta{display:flex;flex-direction:column;min-width:0;background:var(--color-paper);
         border:var(--rule);border-radius:var(--radius);overflow:hidden;
         box-shadow:var(--sombra-card);
         transition:box-shadow var(--dur-mid) var(--ease-out),border-color var(--dur-mid) var(--ease-out)}
.tarjeta:hover{box-shadow:var(--sombra-card-hover);border-color:#d5deeb}
.t-foto{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--color-paper-2)}
.t-foto img{width:100%;height:100%;object-fit:cover;display:block}
.t-cuerpo{padding:var(--space-md);display:flex;flex-direction:column;flex:1}
.t-lugar{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-2)}
.t-tema{margin-top:var(--space-2xs);font-size:1.14rem;font-weight:700;color:var(--color-navy-deep);line-height:1.25}
.t-tema a{text-decoration:none}
.t-fechas{margin-top:var(--space-xs);font-size:.9rem;color:var(--color-ink-2)}
/* `margin-top:auto` empuja el precio y el pie al fondo: con títulos de 1 o de 2 líneas,
   TODAS las tarjetas alinean su precio y su botón a la misma altura. */
.t-precio{margin-top:auto;padding-top:var(--space-md);display:flex;align-items:baseline;gap:var(--space-xs);flex-wrap:wrap}
.t-precio .tachado{font-size:.86rem;color:var(--color-ink-2);text-decoration:line-through}
.t-precio b{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--color-navy-deep)}
.t-nota{margin-top:2px;font-size:.78rem;color:var(--color-ink-2)}
/* El «Ver más» deja de ser un texto suelto: es una barra propia, sobre papel secundario. */
.t-ver{margin-top:var(--space-md);margin-inline:calc(var(--space-md) * -1);margin-bottom:calc(var(--space-md) * -1);
       padding:var(--space-sm) var(--space-md);border-top:var(--rule);background:var(--color-paper-2);
       display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}
.t-ver .salida{font-size:.92rem}
.t-ver .cupos{font-size:.76rem;color:var(--color-ink-2)}

/* Respaldo cuando la foto no carga: papel secundario con una trama muy tenue,
   nunca el icono de imagen rota. Lo marca `exp.js` al detectar el fallo. */
.t-foto.sin-foto,.foto.sin-foto{background:
  repeating-linear-gradient(135deg,var(--color-paper-2) 0 10px,#eef2f8 10px 20px)}

/* ── Bloques del hub ────────────────────────────────────────────────
   El catálogo se parte en «Destacadas» y «Todo el calendario»: la jerarquía se
   LEE en el encabezado, no hay que deducirla del grosor de un borde. */
.bloque-tit{font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.16em;
            text-transform:uppercase;color:var(--color-ink-2);
            padding-bottom:var(--space-sm);border-bottom:var(--rule);margin-bottom:var(--space-lg)}
.bloque-tit--resto{margin-top:clamp(var(--space-xl),4vw,var(--space-2xl))}
.bloque-tit + .catalogo{padding-bottom:0}

/* La tarjeta destacada se marca con el NAVY de la marca y un filo dorado arriba.
   ⚠️ No lleva crimson: el sistema lo reserva para el CTA y usarlo aquí pondría a
   competir la tarjeta con el botón de la página siguiente. El dorado es el
   marcador mínimo que el sistema ya usa para el precio con beca y el sello. */
.tarjeta--destacada{border-color:var(--color-navy);box-shadow:var(--sombra-card-hover)}
.tarjeta--destacada .t-foto{position:relative}
.tarjeta--destacada .t-foto::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
                                    background:var(--color-gold);z-index:1}
.tarjeta--destacada:hover{border-color:var(--color-navy-deep)}
.tarjeta--destacada .t-tema{color:var(--color-navy)}

/* ── Insignia de bandera ────────────────────────────────────────────
   Medalla en la esquina inferior derecha de la portada: identifica el país sin
   que haya que leer nada, que es lo que pide una rejilla de trece tarjetas.
   El anillo blanco la despega de la foto; sin él, una bandera clara sobre cielo
   claro desaparece. Y la sombra corta le da el peso de objeto, no de pegatina. */
/* ⚠️ El selector va CUALIFICADO (`.t-foto img.bandera`) y no `.bandera` a secas.
   El sistema ya tiene `.t-foto img{width:100%;height:100%}` para la foto de la
   tarjeta, que es MÁS específico que una clase suelta y gana: con `.bandera` la
   insignia salía de 350 px, tapando la tarjeta entera. Se vio mirándolo, no en
   ninguna métrica. */
.t-foto img.bandera,.foto img.bandera{
         position:absolute;right:var(--space-sm);bottom:var(--space-sm);
         width:56px;height:56px;border-radius:50%;object-fit:cover;
         border:3px solid var(--color-paper);
         box-shadow:0 2px 10px rgba(15,37,71,.28);
         background:var(--color-paper);z-index:2}
/* La foto de la tarjeta es el ancla de posición de su insignia. */
.t-foto{position:relative}
/* En la capa 2 respira más: abajo a la izquierda vive el sello, y los dos
   comparten banda. */
.foto img.bandera{right:var(--space-md);bottom:var(--space-md);width:64px;height:64px}
@media (max-width:560px){
  .t-foto img.bandera,.foto img.bandera{width:46px;height:46px;border-width:2px}
  .foto img.bandera{width:52px;height:52px}
}

/* ══ CAPA 2 · decisión ═════════════════════════════════════════════ */
.decision{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
          gap:clamp(var(--space-lg),5vw,var(--space-2xl));align-items:center;
          padding-block:clamp(var(--space-lg),3.4vw,var(--space-xl))
                        clamp(var(--space-2xl),6vw,var(--space-3xl))}
.titulo{font-size:var(--text-display);font-weight:800;color:var(--color-navy-deep);margin-bottom:var(--space-md)}
.cuando{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-sm);margin-bottom:var(--space-md);
        padding-bottom:var(--space-md);border-bottom:var(--rule)}
.cuando b{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--color-ink)}
.cuando .sep{color:var(--color-rule)}
.cuando .meta{color:var(--color-ink-2);font-size:.95rem}
.lead{font-size:var(--text-xl);color:var(--color-ink-2);max-width:46ch;margin-bottom:var(--space-lg)}
.precios{margin-bottom:var(--space-lg)}
.precio-regular{display:flex;align-items:baseline;gap:var(--space-xs);font-size:.92rem;color:var(--color-ink-2)}
.precio-regular b{font-weight:600;color:var(--color-ink)}
.precio-club{display:flex;align-items:baseline;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-2xs)}
.precio-club .cifra{font-family:var(--font-display);font-weight:800;font-size:var(--text-price);
                    color:var(--color-navy-deep);line-height:1;letter-spacing:-.03em}
.precio-club .moneda{font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--color-ink-2)}
.precio-nota{margin-top:var(--space-xs);font-size:.86rem;color:var(--color-ink-2);display:flex;align-items:center;gap:var(--space-xs)}
.precio-nota .llave{width:8px;height:8px;border-radius:50%;background:var(--color-gold);flex:none}
.cta-nota{margin-top:var(--space-sm);font-size:.84rem;color:var(--color-ink-2)}
.foto{position:relative;aspect-ratio:4/4.6;border-radius:var(--radius);overflow:hidden;background:var(--color-paper-2)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.sello{position:absolute;left:var(--space-md);bottom:var(--space-md);background:var(--color-sello-fondo);
       backdrop-filter:blur(6px);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);
       font-size:.82rem;font-weight:600;color:var(--color-navy-deep);display:flex;align-items:center;gap:var(--space-xs)}
.sello .punto{width:6px;height:6px;border-radius:50%;background:var(--color-gold);flex:none}

.pliego{border-top:var(--rule);padding-block:clamp(var(--space-xl),5vw,var(--space-2xl))}
.pliego-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--space-lg),4vw,var(--space-2xl))}
.pliego h2{font-size:1.02rem;font-weight:700;letter-spacing:.04em;margin-bottom:var(--space-md);color:var(--color-navy-deep)}
.pliego h2 .n{color:var(--color-ink-2);font-weight:600}
.lista{list-style:none;display:flex;flex-direction:column;gap:var(--space-sm)}
.lista li{display:flex;gap:var(--space-sm);font-size:.96rem;line-height:1.5}
.lista .mk{flex:none;width:18px;color:var(--color-green);font-weight:700}
.lista--no .mk{color:var(--color-ink-2)}
.lista--no li{color:var(--color-ink-2)}
.pliego-salida{margin-top:var(--space-lg)}

.cierre{border-top:var(--rule);padding-block:clamp(var(--space-xl),5vw,var(--space-2xl));
        display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-lg)}
.cierre h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;color:var(--color-navy-deep);margin-bottom:var(--space-xs)}
.cierre p{color:var(--color-ink-2);font-size:.98rem;max-width:48ch}
.cierre-acciones{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}

/* ══ CAPA 3 · documento ════════════════════════════════════════════ */
.cabecera{padding-block:clamp(var(--space-lg),4vw,var(--space-2xl)) var(--space-lg);border-bottom:var(--rule)}
.cabecera h1{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;color:var(--color-navy-deep)}
.cabecera .resumen{margin-top:var(--space-sm);color:var(--color-ink-2);max-width:62ch}
.doc{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
     gap:clamp(var(--space-lg),4vw,var(--space-2xl));
     padding-block:clamp(var(--space-xl),5vw,var(--space-2xl))}
/* gate 56 · dos sticky a top:0 se solapan. El índice se ancla BAJO el nav. */
.indice{position:sticky;top:calc(var(--barra) + var(--space-md));align-self:start}
.indice h2{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
           color:var(--color-ink-2);margin-bottom:var(--space-md)}
.indice ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2xs)}
.indice li a{display:block;padding:var(--space-xs) 0 var(--space-xs) var(--space-sm);font-size:.92rem;
             text-decoration:none;color:var(--color-ink-2);border-left:2px solid var(--color-rule);
             transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.indice li a:hover{color:var(--color-navy)}
.indice li a[aria-current="page"]{color:var(--color-navy-deep);font-weight:600;border-left-color:var(--color-navy)}
/* El CTA del índice NO hereda el gris de los enlaces del índice: es un botón, no un enlace de lista.
   (Antes lo heredaba y el texto salía gris sobre crimson: ilegible.) */
.indice .cta{color:#fff;width:100%;min-height:46px;padding:0 var(--space-md);font-size:.92rem;margin-top:var(--space-lg)}
.indice .cta:hover{color:#fff}

.jornada{padding-block:var(--space-xl);border-bottom:var(--rule)}
.jornada:first-child{padding-top:0}
.jornada:last-of-type{border-bottom:0}
.jornada .n{display:block;font-family:var(--font-display);font-weight:700;font-size:.78rem;
            letter-spacing:.16em;text-transform:uppercase;color:var(--color-gold);margin-bottom:var(--space-xs)}
.jornada h3{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;color:var(--color-navy-deep)}
.jornada .fecha{margin-top:var(--space-2xs);font-size:.94rem;color:var(--color-ink-2)}
.bloques{margin-top:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}
.bloque{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:var(--space-md);align-items:baseline}
.bloque dt{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-2)}
.bloque dd{font-size:.98rem;line-height:1.55;max-width:62ch}
.bloque dd b{font-weight:600;color:var(--color-navy-deep)}
.enfoque{margin-top:var(--space-lg);padding:var(--space-md);background:var(--color-paper-2);
         border-radius:var(--radius-sm);font-size:.92rem;color:var(--color-ink-2);max-width:64ch}
.enfoque b{color:var(--color-navy-deep);font-weight:600}
.prosa{max-width:66ch}
.prosa p{margin-bottom:var(--space-md)}
.tarjetas-mod{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-md);margin-top:var(--space-lg)}
.mod{border:var(--rule);border-radius:var(--radius);padding:var(--space-md);background:var(--color-paper)}
.mod .n{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold)}
.mod h3{margin-top:var(--space-2xs);font-size:1.02rem;font-weight:700;color:var(--color-navy-deep)}
.faq{border-bottom:var(--rule);padding-block:var(--space-lg)}
.faq h3{font-size:1.04rem;font-weight:700;color:var(--color-navy-deep);margin-bottom:var(--space-xs)}
.faq p{color:var(--color-ink-2);max-width:66ch}


/* ══ MODAL de captación ════════════════════════════════════════════ */
.modal[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
       padding:var(--space-md);background:var(--color-velo);backdrop-filter:blur(3px)}
.modal-caja{background:var(--color-paper);border-radius:var(--radius);width:min(560px,100%);
            max-height:92vh;overflow-y:auto;padding:clamp(var(--space-lg),4vw,var(--space-xl));
            box-shadow:0 30px 80px rgba(15,37,71,.28)}
.modal-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-md)}
.modal-cab h2{font-size:1.5rem;font-weight:800;color:var(--color-navy-deep)}
.modal-cab p{margin-top:var(--space-2xs);font-size:.94rem;color:var(--color-ink-2)}
.cerrar{flex:none;width:40px;height:40px;border:1px solid var(--color-rule);border-radius:50%;background:var(--color-paper);
        color:var(--color-ink-2);font-size:1.1rem;line-height:1;cursor:pointer;
        transition:border-color var(--dur-fast) var(--ease-out)}
.cerrar:hover{border-color:var(--color-navy);color:var(--color-navy)}
/* Recordatorio del precio dentro del modal: la persona entra aquí con una cifra en la cabeza. */
.modal-precio{display:flex;align-items:baseline;gap:var(--space-sm);flex-wrap:wrap;padding:var(--space-md);
              background:var(--color-paper-2);border-radius:var(--radius-sm);margin-bottom:var(--space-lg)}
.modal-precio .tachado{font-size:.9rem;color:var(--color-ink-2);text-decoration:line-through}
.modal-precio .vivo{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--color-navy-deep);
                    line-height:1;
                    transition:color var(--dur-premium) var(--ease-fundido),
                               font-size var(--dur-premium) var(--ease-fundido)}
.modal-precio.rebajado .vivo{color:var(--color-green)}
.modal-precio .etiqueta{font-size:.8rem;color:var(--color-ink-2);width:100%}

/* ══ MODO PREMIUM ════════════════════════════════════════════════════════════
   La segunda bajada, hasta el Precio Interno. Solo se activa cuando el SERVIDOR
   devuelve un precio menor que el que ya está en pantalla (canon: el precio interno
   no viaja en el HTML). Cambia la caja ENTERA del modal a oscuro y agranda la cifra:
   el objetivo es que no pase desapercibido, porque ocurre una vez y a poca gente.

   ⚠️ Todo lo que informa sigue siendo legible sobre el fondo oscuro: los errores de
   campo, el aviso de envío y el estado del código. Un formulario que avisa en rojo
   sangre sobre navy incumple FORM-SIN-SILENCIO igual que si no avisara.
   ⚠️ La transición va en `background`/`color`, no en `transform`: nada se mueve, así
   que el bloque de `prefers-reduced-motion` la acorta sin dejar el diseño a medias. */
/* Todo lo que cambia en modo premium transiciona a la vez y con la misma duración.
   Va en los selectores BASE (no dentro de `.premium`) para que el fundido exista en
   los dos sentidos y no dependa del orden en que se apliquen las reglas.
   ⚠️ `border-color` se deja aparte donde ya tenía transición rápida: es lo que da el
   hover de los campos, y alargarlo a un segundo haría que el formulario se sintiera
   pastoso al pasar el ratón. */
.modal-caja{transition:background-color var(--dur-premium) var(--ease-fundido)}
.modal-cab h2,.modal-cab p,.campo label,.cta-nota,
.modal-precio .tachado,.modal-precio .etiqueta,
.codigo-estado.ok,.codigo-estado.mal,.codigo-estado.dudoso,.campo .err{
  transition:color var(--dur-premium) var(--ease-fundido)}
.modal-precio{transition:background-color var(--dur-premium) var(--ease-fundido),
                         border-color var(--dur-premium) var(--ease-fundido),
                         box-shadow var(--dur-premium) var(--ease-fundido)}
.campo--codigo{transition:background-color var(--dur-premium) var(--ease-fundido),
                          border-color var(--dur-premium) var(--ease-fundido)}
.modal .campo input,.modal .campo select,.modal .btn-validar,.modal .cerrar{
  transition:border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-premium) var(--ease-fundido),
             color var(--dur-premium) var(--ease-fundido)}
.aviso{transition:background-color var(--dur-premium) var(--ease-fundido),
                  border-color var(--dur-premium) var(--ease-fundido),
                  color var(--dur-premium) var(--ease-fundido)}
.modal-caja.premium{background:var(--color-navy-deep)}
.modal-caja.premium .modal-cab h2{color:#fff}
.modal-caja.premium .modal-cab p,
.modal-caja.premium .campo label,
.modal-caja.premium .cta-nota{color:#c7d4e8}
.modal-caja.premium .cerrar{background:transparent;border-color:rgba(255,255,255,.28);color:#c7d4e8}
.modal-caja.premium .cerrar:hover{border-color:#fff;color:#fff}

.modal-caja.premium .modal-precio{background:rgba(255,255,255,.06);
       border:1px solid var(--color-gold);box-shadow:0 0 0 4px rgba(201,162,39,.10)}
.modal-caja.premium .modal-precio .tachado{color:#8ea3c2}
.modal-caja.premium .modal-precio .etiqueta{color:var(--color-gold);font-weight:600}
/* La cifra crece: es la señal de que ha pasado algo distinto, no un detalle. */
.modal-caja.premium .modal-precio .vivo{color:var(--color-gold);font-size:2.6rem}

/* El bloque del código tiene fondo propio: sin esto queda como una caja BLANCA
   flotando sobre el modal oscuro. Solo se ve mirando la pantalla, nunca en el CSS. */
.modal-caja.premium .campo--codigo{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}

.modal-caja.premium .campo input,
.modal-caja.premium .campo select{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fff}
.modal-caja.premium .campo input::placeholder{color:#8ea3c2}
.modal-caja.premium .campo input:hover,
.modal-caja.premium .campo select:hover{border-color:rgba(255,255,255,.42)}
.modal-caja.premium .campo input:focus-visible,
.modal-caja.premium .campo select:focus-visible{border-color:var(--color-gold);outline-color:var(--color-gold)}
/* Un `select` oscuro deja sus opciones con el fondo del sistema: se fijan a mano o
   en algunos navegadores sale texto blanco sobre blanco al desplegarlo. */
.modal-caja.premium .campo select option{background:var(--color-navy-deep);color:#fff}
.modal-caja.premium .btn-validar{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.modal-caja.premium .btn-validar:hover{background:rgba(255,255,255,.10)}

/* Lo que informa, legible sobre oscuro (FORM-SIN-SILENCIO). */
.modal-caja.premium .campo .err{color:#ffb3b3}
.modal-caja.premium .codigo-estado.ok{color:#7ee0a8}
.modal-caja.premium .codigo-estado.mal{color:#ffb3b3}
.modal-caja.premium .codigo-estado.dudoso{color:#c7d4e8}
.modal-caja.premium .aviso{background:rgba(255,120,120,.12);border-color:#ff8f8f;color:#ffd5d5}

.rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-md)}
.campo{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:.82rem;font-weight:600;color:var(--color-ink)}
.campo input,.campo select{min-height:46px;padding:0 var(--space-sm);border:1px solid var(--color-rule);
       border-radius:var(--radius-sm);font:inherit;font-size:.94rem;color:var(--color-ink);background:var(--color-paper);
       transition:border-color var(--dur-fast) var(--ease-out)}
.campo input:hover,.campo select:hover{border-color:#cfd9e8}
.campo input:focus-visible,.campo select:focus-visible{border-color:var(--color-navy);outline:2px solid var(--color-focus);outline-offset:1px}
.campo input:disabled,.campo select:disabled{background:var(--color-paper-2);color:var(--color-ink-2);cursor:not-allowed}
.campo.invalido input,.campo.invalido select{border-color:var(--color-crimson)}
.campo .err{font-size:.78rem;color:var(--color-crimson);min-height:1em}
/* El código de acceso es UN CAMPO MÁS del formulario, no una puerta previa (decisión del CEO). */
/* El bloque del código va PRIMERO: al aplicarlo, la cifra que baja queda a la vista.
   Abajo del formulario la animación ocurría fuera de la pantalla y no se veía. */
.campo--codigo{grid-column:1/-1;order:-1;padding:var(--space-md);background:var(--color-paper-2);
               border-radius:var(--radius-sm);border:1px solid var(--color-rule)}
.codigo-fila{display:flex;gap:var(--space-sm);align-items:flex-start}
.codigo-fila input{flex:1;min-width:0;text-transform:uppercase}
.btn-validar{flex:none;min-height:46px;padding:0 var(--space-md);border:1px solid var(--color-navy);
             background:var(--color-paper);color:var(--color-navy);border-radius:var(--radius-sm);
             font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;white-space:nowrap;
             transition:background-color var(--dur-fast) var(--ease-out)}
.btn-validar:hover{background:var(--color-paper-2)}
.btn-validar:disabled{opacity:.5;cursor:default}
.codigo-estado{margin-top:var(--space-xs);font-size:.84rem;min-height:1.2em}
.codigo-estado.ok{color:var(--color-green);font-weight:600}
.codigo-estado.mal{color:var(--color-crimson)}
.codigo-estado.dudoso{color:var(--color-ink-2)}
.modal .cta{width:100%;margin-top:var(--space-lg)}
.aviso{margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);
       background:#fdeaea;border:1px solid #f5c2c2;color:#a01919;font-size:.88rem}
.exito{text-align:center;padding:var(--space-lg) 0}
.exito .marca{width:52px;height:52px;border-radius:50%;background:var(--color-green);color:#fff;
              display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto var(--space-md)}
.exito h3{font-size:1.3rem;font-weight:700;color:var(--color-navy-deep);margin-bottom:var(--space-xs)}
.exito p{color:var(--color-ink-2);max-width:44ch;margin:0 auto}

/* ══ PIE · con cuerpo, no una línea suelta ═════════════════════════ */
.pie{border-top:var(--rule);background:var(--color-paper-2);margin-top:var(--space-2xl)}
.pie-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-xl);
        padding-block:clamp(var(--space-xl),4vw,var(--space-2xl))}
.pie-marca{font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:.14em;
           text-transform:uppercase;color:var(--color-navy)}
.pie-marca span{color:var(--color-ink-2);font-weight:600}
.pie-tag{margin-top:var(--space-sm);color:var(--color-ink-2);font-size:.92rem;max-width:46ch}
.pie-cont{display:flex;flex-direction:column;gap:var(--space-xs);font-size:.92rem}
.pie-cont a{display:inline-flex;align-items:center;gap:var(--space-xs);text-decoration:none;
            color:var(--color-navy);font-weight:600;border-bottom:1px solid transparent}
.pie-cont a svg{flex:none}
.pie-cont a:hover{border-bottom-color:var(--color-navy)}
.pie-cont .rot{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-2)}
.pie-legal{border-top:var(--rule);padding-block:var(--space-md);font-size:.8rem;color:var(--color-ink-2);
           display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:space-between}

/* ══ RESPONSIVE ════════════════════════════════════════════════════ */
@media (max-width:900px){
  .decision{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .foto{aspect-ratio:16/10;order:-1}
  .pliego-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .cierre{flex-direction:column;align-items:flex-start}
  .doc{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .indice{position:static;border-bottom:var(--rule);padding-bottom:var(--space-md)}
  .indice ul{flex-direction:row;flex-wrap:wrap;gap:var(--space-xs)}
  .indice li a{border-left:0;border:1px solid var(--color-rule);border-radius:999px;
               padding:var(--space-xs) var(--space-md);white-space:nowrap}
  .indice li a[aria-current="page"]{border-color:var(--color-navy)}
  .indice .cta{display:none}
  .bloque{grid-template-columns:minmax(0,1fr);gap:var(--space-2xs)}
  .pie-in{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
}
/* El nav de las capas 2 y 3 lleva TRES piezas: marca, regreso y CTA. A 375 px no
   caben: medido, el chip «Inscríbete» terminaba en el píxel 440 sobre un viewport
   de 375 — o sea, el botón principal FUERA DE LA PANTALLA. Y no se delata con la
   prueba habitual, porque `overflow-x:clip` lo recorta sin generar scroll lateral.
   Se resuelve acortando el TEXTO, no escondiendo el regreso: el DESIGN dice que
   volver es una acción de primer orden. */
.nav-corto{display:none}
@media (max-width:620px){
  .nav-marca span{display:none}      /* «RINSA Experiences» → «RINSA» */
  .nav-largo{display:none}
  .nav-corto{display:inline}
}
@media (max-width:560px){
  .catalogo{grid-template-columns:minmax(0,1fr)}
  .rejilla{grid-template-columns:minmax(0,1fr)}
  .cierre-acciones{width:100%;flex-direction:column;align-items:stretch}
  .cierre-acciones .cta,.cierre-acciones .btn-ghost{width:100%}
  .nav{gap:var(--space-xs)}
  .nav-marca{font-size:.78rem}
  .chip{padding:0 var(--space-sm);font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}