/* ═══════════════════════════════════════════════════════════════
   GOQRONA · SISTEMA WEB INSTITUCIONAL v1.0
   Fuente única de verdad del sitio goqrona.com (público: inversionistas,
   operadores, aliados, gremios, gobierno, prensa).

   El turista vive en app.goqrona.com y usa otro sistema.

   CÓMO SE USA
   Toda página institucional carga, en este orden y sin excepciones:
     <link rel="stylesheet" href="/assets/css/goqrona-tokens.css?v=20260823">
     <link rel="stylesheet" href="/assets/css/institucional.css?v=20260823">
   Ninguna página redefine aquí dentro. Si un patrón falta, se agrega
   a este archivo, no al <style> de la página.

   REGLAS QUE NO SE NEGOCIAN
   1. Esmeralda solo en piezas pequeñas: etiquetas, líneas, subrayados.
      Los botones se resuelven por contraste, nunca por color de marca.
   2. Radios: 14px en bloques, 8px en botones. Sin excepciones.
   3. Tema claro fijo. Ninguna sección se invierte a modo oscuro; las
      bandas oscuras son parte del ritmo, no un cambio de tema.
   4. Prosa en peso 300. Titulares en 700. No hay pesos intermedios
      salvo en botones y etiquetas (600).
   5. Máximo 3 etiquetas en versalitas (eyebrow) por página completa.
   Referencia del manual: docs/SISTEMA-WEB-INSTITUCIONAL.md
   ═══════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--hueso);
  color:var(--bosque-700);
  font-family:var(--texto);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.06rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  text-wrap:balance;margin:0;color:var(--bosque-700);
}
p{margin:0}
img{max-width:100%}

/* El contenedor. Todo el contenido de toda sección vive dentro de .marco.
   Nada toca el borde de la ventana. */
.marco{max-width:1240px;margin-inline:auto;padding-inline:clamp(1.5rem,5vw,4rem)}

/* ── Navegación ───────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:40;
  height:72px;display:flex;align-items:center;
  background:rgba(250,248,243,.88);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--linea);
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;width:100%}
.nav__logo img{display:block;height:44px;width:auto}
.nav__links{display:none;gap:2.25rem;list-style:none;margin:0;padding:0}
.nav__links a{
  font-size:.94rem;color:var(--bosque-700);text-decoration:none;
  padding-block:.35rem;border-bottom:1.5px solid transparent;
  transition:border-color .18s ease-out;
}
.nav__links a:hover,.nav__links a:focus-visible{border-bottom-color:var(--esmeralda-500)}
/* La página actual se marca con la línea puesta, no con color distinto. */
.nav__links a[aria-current="page"]{border-bottom-color:var(--esmeralda-500)}
@media(min-width:1000px){.nav__links{display:flex}}

/* ── Botones. Radio 8px, siempre. ─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--texto);font-weight:600;font-size:.97rem;
  padding:.85rem 1.55rem;border-radius:var(--radio-s);
  text-decoration:none;white-space:nowrap;border:1.5px solid transparent;
  transition:background .18s ease-out,transform .18s ease-out,box-shadow .18s ease-out,border-color .18s ease-out;
}
/* El botón principal es SIEMPRE el máximo contraste contra su fondo, no un
   golpe de color. El esmeralda al 98% de saturación vibra sobre fondo claro y
   compite con el texto; funciona en la app, donde el botón debe gritar dentro
   de un flujo de compra, pero aquí resta autoridad. El verde de marca se
   conserva en piezas pequeñas (etiquetas, líneas, subrayados) donde no vibra. */
.btn--principal{background:var(--bosque-700);color:#fff;border-color:var(--bosque-700)}
.btn--principal:hover{background:var(--bosque-900);border-color:var(--bosque-900);transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,52,40,.24)}

/* Sobre fondo oscuro se invierte: blanco sólido, texto verde profundo. */
.btn--luz{background:#fff;color:var(--bosque-900);border-color:#fff}
.btn--luz:hover{background:var(--hueso);border-color:var(--hueso);transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.22)}

.btn--fantasma{background:transparent;color:var(--bosque-700);border-color:var(--bosque-700)}
.btn--fantasma:hover{background:var(--bosque-700);color:var(--hueso)}
.btn--claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.58)}
.btn--claro:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn:focus-visible{outline:2px solid var(--reserva-600);outline-offset:3px}
.btn:active{transform:scale(.985)}
.btn svg{width:15px;height:15px;flex:none}

/* Pares de botones. Nunca más de dos por bloque. */
.ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.8rem,3.5vw,2.4rem)}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 1 · HERO CON VIDEO
   Abre toda página institucional. Estructura fija:
   etiqueta + h1 (máx 2 líneas) + entrada (máx 20 palabras) + 2 botones.
   Nada más entra aquí: ni logos de confianza, ni notas al pie.
   ═══════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:min(88svh,46rem);
  display:flex;align-items:flex-end;
  padding-block:clamp(4rem,10vw,6rem) clamp(3rem,7vw,5rem);
  overflow:hidden;
  background:var(--bosque-900);
}
.hero__video,.hero__foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
/* El velo tiene que cubrir TODA la zona de texto, no solo el borde inferior.
   El video es verde y azul en casi todo su rango, así que sin esto cualquier
   texto claro compite con el agua y el follaje. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,31,62,.45) 0%,transparent 30%),
    linear-gradient(6deg,rgba(4,31,62,.93) 6%,rgba(4,31,62,.74) 34%,rgba(4,31,62,.34) 62%,transparent 84%);
}
.hero__in{position:relative;z-index:2;width:100%}
/* Sobre video, el verde de marca cae encima del agua y del follaje: mismo
   rango de color, contraste casi nulo. Va en blanco, con más cuerpo y menos
   separación entre letras para que los trazos se lean como una palabra y no
   como caracteres sueltos. La sombra es mínima y solo compensa los fotogramas
   donde el agua se aclara. */
.hero__marca{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(.76rem,.73rem + .12vw,.84rem);
  letter-spacing:.2em;
  text-transform:uppercase;color:#fff;
  text-shadow:0 1px 12px rgba(4,31,62,.75);
  margin-bottom:clamp(1.1rem,2.5vw,1.6rem);
}
.hero h1{
  color:#fff;
  font-size:clamp(2.15rem,1.25rem + 3.9vw,4.15rem);
  line-height:1.05;max-width:19ch;
}
.hero h1 em{font-style:normal;color:var(--esmeralda-500)}
.hero__lede{
  margin-top:clamp(1.1rem,2.5vw,1.5rem);
  max-width:46ch;font-weight:300;
  font-size:clamp(1rem,.97rem + .3vw,1.16rem);
  color:rgba(255,255,255,.9);line-height:1.55;
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.8rem,3.5vw,2.4rem)}

/* ═══════════════════════════════════════════════════════════
   RITMO DE FONDOS
   Las secciones alternan hueso y papel. Las bandas oscuras
   (cifras, cierre) son los dos acentos del recorrido: una arriba
   para dar autoridad, otra al final para cerrar. Nunca tres.
   ═══════════════════════════════════════════════════════════ */
.seccion{padding-block:clamp(4.5rem,9vw,8rem);background:var(--hueso)}
.seccion--papel{background:var(--papel);border-block:1px solid var(--linea)}
.seccion--corta{padding-block:clamp(3rem,6vw,4.5rem)}

/* Encabezado de sección. La etiqueta es opcional y escasa (máx 3 por página). */
.rotulo{
  display:block;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--esmeralda-500);margin-bottom:.9rem;
}
.titulo-2{font-size:clamp(1.85rem,1.4rem + 2.1vw,3.05rem);line-height:1.1}
.titulo-3{font-size:clamp(1.75rem,1.35rem + 1.9vw,2.7rem);line-height:1.14}
.titulo-2 em,.titulo-3 em{font-style:normal;color:var(--verde-marca)}
/* Cuando el titular abre la sección y debajo viene una retícula, necesita
   medida corta y aire propio. Cuando va dentro de una columna, no. */
.titulo-2.abre{max-width:16ch;margin-bottom:clamp(2.25rem,4.5vw,3.25rem)}
.titulo-3.abre{max-width:20ch;margin-bottom:clamp(2rem,4vw,3rem)}

/* Prosa. Peso 300 y medida corta: el texto largo se lee, no se escanea. */
.prosa{display:flex;flex-direction:column;gap:1.35rem}
.prosa p{font-size:clamp(1.02rem,1rem + .35vw,1.19rem);font-weight:300;line-height:1.62;max-width:60ch}
.prosa strong{font-weight:600;color:var(--bosque-900)}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 2 · BANDA DE CIFRAS
   Verde profundo, cuatro datos duros. Va inmediatamente
   después del hero. Es el bloque de credibilidad.
   ═══════════════════════════════════════════════════════════ */
.cifras{background:var(--bosque-700);color:var(--hueso);padding-block:clamp(2.5rem,5vw,3.5rem)}
.cifras__rotulo{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--esmeralda-500);margin-bottom:1.75rem;
}
.cifras__grid{
  display:grid;gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:860px){.cifras__grid{grid-template-columns:repeat(4,1fr)}}
.cifra__n{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.3rem,1.7rem + 2.4vw,3.4rem);
  line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.035em;
}
.cifra__t{margin-top:.6rem;font-size:.93rem;font-weight:300;color:rgba(250,248,243,.82);line-height:1.45;max-width:22ch}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 3 · TESIS (titular a la izquierda, cuerpo a la derecha)
   Para el argumento central de la página. Una vez por página.
   ═══════════════════════════════════════════════════════════ */
.tesis__grid{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr}
@media(min-width:940px){.tesis__grid{grid-template-columns:5fr 6fr;align-items:start}}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 4 · PARTIDO CON FOTO
   Foto a un lado, argumento al otro. El dato de cierre lleva
   la línea esmeralda encima: es el único subrayado de la sección.
   ═══════════════════════════════════════════════════════════ */
.partido{display:grid;gap:clamp(2.25rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
@media(min-width:940px){.partido{grid-template-columns:6fr 5fr}}
/* Invierte el orden en pantalla ancha sin tocar el orden del documento. */
@media(min-width:940px){.partido--espejo .partido__foto{order:2}}
.partido__foto{
  position:relative;overflow:hidden;border-radius:var(--radio-m);
  aspect-ratio:4/3;background:var(--hueso-2);
}
.partido__foto img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06)}
.partido h2{margin-bottom:1.2rem}
.partido p{font-size:clamp(1rem,.98rem + .3vw,1.14rem);font-weight:300;line-height:1.62;max-width:52ch}
.partido p + p{margin-top:1.1rem}
.dato-cierre{
  margin-top:2rem;padding-top:1.5rem;border-top:2px solid var(--esmeralda-500);
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,1rem + .4vw,1.25rem);line-height:1.4;max-width:44ch;
  color:var(--bosque-900);
}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 5 · BIFURCACIÓN (dos caminos)
   Uno apagado, uno vivo. Para contrastar antes/después,
   con nosotros/sin nosotros. Una vez por página.
   ═══════════════════════════════════════════════════════════ */
.bifurca{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:880px){.bifurca{grid-template-columns:1fr 1fr}}
.futuro{padding:clamp(1.6rem,3.5vw,2.6rem);border-radius:var(--radio-m);display:flex;flex-direction:column;gap:.95rem}
/* Sin mayúsculas ni tracking a propósito: son parte del contenido de la
   tarjeta, no una etiqueta decorativa más sobre un titular. */
.futuro__r{font-family:var(--texto);font-weight:600;font-size:.87rem;letter-spacing:0}
.futuro h3{font-size:clamp(1.32rem,1.2rem + .7vw,1.8rem);line-height:1.18}
.futuro p{font-size:.99rem;font-weight:300;line-height:1.58}
.futuro--gris{background:var(--hueso-2);border:1px solid var(--linea)}
.futuro--gris .futuro__r,.futuro--gris h3,.futuro--gris p{color:var(--piedra)}
.futuro--vivo{background:var(--bosque-700);box-shadow:var(--sombra-2)}
.futuro--vivo .futuro__r{color:var(--esmeralda-500)}
.futuro--vivo h3{color:#fff}
.futuro--vivo p{color:rgba(250,248,243,.86)}
.veredicto{
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
  font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.4rem,1.15rem + 1.4vw,2.35rem);line-height:1.24;max-width:26ch;
}
.veredicto em{font-style:normal;color:var(--verde-marca)}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 6 · BENTO
   Celdas con foto o video de fondo y texto abajo. La celda ancha
   marca jerarquía. Tantas celdas como contenido real: nunca una vacía.
   ═══════════════════════════════════════════════════════════ */
.bento{display:grid;gap:1.25rem;grid-template-columns:1fr;grid-auto-rows:minmax(0,auto)}
@media(min-width:720px) and (max-width:899px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento__a{grid-column:span 2}
}
@media(min-width:900px){
  .bento{grid-template-columns:repeat(3,1fr)}
  .bento__a{grid-column:span 2}
}
.celda{position:relative;overflow:hidden;border-radius:var(--radio-m);min-height:17rem;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.4rem,3vw,2rem)}
.celda__medio{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.celda::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,52,40,.88) 6%,rgba(20,52,40,.28) 52%,transparent 82%)}
.celda__txt{position:relative;z-index:2}
.celda h3{color:#fff;font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);line-height:1.2;margin-bottom:.45rem}
.celda p{color:rgba(255,255,255,.86);font-size:.94rem;font-weight:300;line-height:1.5;max-width:34ch}
.celda--plana{background:var(--bosque-900);justify-content:center}
.celda--plana::after{display:none}
.celda--plana h3{margin-bottom:.7rem}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 7 · LISTA DE DATOS EN COLUMNAS
   Para repartos, planes, requisitos. Sin cajas: la separación
   la hace el espacio, no un borde. Máximo 4 columnas.
   ═══════════════════════════════════════════════════════════ */
.columnas{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:1fr;margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:720px){.columnas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.columnas--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:940px){.columnas--4{grid-template-columns:repeat(4,1fr)}}
.columna__r{
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--piedra);margin-bottom:.7rem;
}
.columna__n{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,1.5rem + 1.4vw,2.5rem);
  line-height:1;color:var(--bosque-900);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;margin-bottom:.55rem;
}
/* La columna puede encabezarse con una cifra o con un título, no con ambos. */
.columna h3{font-size:clamp(1.12rem,1.05rem + .4vw,1.35rem);line-height:1.22;margin-bottom:.55rem}
.columna h3 a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--esmeralda-500)}
.columna h3 a:hover{color:var(--verde-marca)}
.columna p{font-size:.97rem;font-weight:300;line-height:1.55;color:var(--piedra);max-width:32ch}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 8 · BLOQUE DESTACADO
   Fondo hueso-2 sobre sección papel. Para condiciones, letra
   pequeña con peso, requisitos legales.
   ═══════════════════════════════════════════════════════════ */
.destacado{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding:clamp(1.6rem,3.5vw,2.6rem);
  background:var(--hueso-2);border:1px solid var(--linea);
  border-radius:var(--radio-m);
}
.destacado h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);line-height:1.2;margin-bottom:1.1rem}
.destacado ul{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.6rem}
.destacado li{font-size:.99rem;font-weight:300;line-height:1.55;color:var(--piedra)}
.destacado li::marker{color:var(--esmeralda-500)}
.aviso{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--linea);font-size:.9rem;font-weight:300;line-height:1.55;color:var(--piedra)}
.aviso strong{font-weight:600;color:var(--bosque-700)}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 10 · PASOS
   Para procesos reales de tres o cuatro tiempos. El número va
   pequeño porque el verbo es la etiqueta, no el número.
   ═══════════════════════════════════════════════════════════ */
.pasos{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr;margin-top:clamp(2rem,4vw,3rem);counter-reset:paso}
@media(min-width:820px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{counter-increment:paso;padding-top:1.1rem;border-top:2px solid var(--esmeralda-500)}
.paso::before{
  content:counter(paso,decimal-leading-zero);
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  color:var(--esmeralda-500);margin-bottom:.7rem;
}
.paso h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);line-height:1.2;margin-bottom:.5rem}
.paso p{font-size:.97rem;font-weight:300;line-height:1.55;color:var(--piedra);max-width:34ch}
/* Cuando los pasos comparten fila con otra cosa (un formulario, una foto),
   se apilan aunque haya ancho de sobra. */
.pasos--apilados{grid-template-columns:1fr}
@media(min-width:820px){.pasos--apilados{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 11 · CANALES DE CONTACTO
   Sin cajas: separa el espacio y una línea fina, no un borde
   alrededor de cada dato.
   ═══════════════════════════════════════════════════════════ */
.canales{display:grid;gap:0;grid-template-columns:1fr;margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--linea)}
@media(min-width:820px){.canales{grid-template-columns:repeat(3,1fr)}}
.canal{padding-block:1.6rem;border-bottom:1px solid var(--linea)}
@media(min-width:820px){
  .canal{padding:1.8rem 0 1.8rem 1.75rem;border-bottom:0;border-left:1px solid var(--linea)}
  .canal:first-child{padding-left:0;border-left:0}
}
.canal__r{
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--piedra);margin-bottom:.6rem;
}
.canal p{font-size:1.02rem;font-weight:300;line-height:1.5;color:var(--bosque-700)}
.canal p + p{margin-top:.3rem}
.canal a{color:var(--bosque-700);text-decoration:none;border-bottom:1.5px solid var(--esmeralda-500)}
.canal a:hover{color:var(--verde-marca)}
.canal small{display:block;margin-top:.45rem;font-size:.87rem;font-weight:300;color:var(--piedra)}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 12 · FORMULARIO
   Etiqueta arriba, ayuda debajo de la etiqueta, error debajo del
   campo. Nunca la etiqueta dentro del campo: al escribir se pierde.
   ═══════════════════════════════════════════════════════════ */
.forma{display:flex;flex-direction:column;gap:1.4rem;max-width:38rem;margin-top:clamp(2rem,4vw,2.75rem)}
.forma__fila{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:640px){.forma__fila{grid-template-columns:1fr 1fr}}
.campo{display:flex;flex-direction:column;gap:.5rem}
.campo label{font-size:.92rem;font-weight:600;color:var(--bosque-700)}
.campo label .req{color:var(--verde-marca);font-weight:400}
.campo small{font-size:.85rem;font-weight:300;color:var(--piedra);margin-top:-.15rem}
.campo input,.campo select,.campo textarea{
  font-family:var(--texto);font-size:1rem;font-weight:400;color:var(--bosque-700);
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-s);
  padding:.8rem .95rem;width:100%;
  transition:border-color .18s ease-out,box-shadow .18s ease-out;
}
.campo textarea{min-height:8rem;resize:vertical;line-height:1.55}
/* El gris del marcador tiene que pasar contraste igual que el texto:
   un marcador más claro que el borde no se lee en pantalla exterior. */
.campo input::placeholder,.campo textarea::placeholder{color:var(--piedra);opacity:1}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--reserva-600);
  box-shadow:0 0 0 3px rgba(1,90,156,.16);
}
.campo--check{flex-direction:row;align-items:flex-start;gap:.7rem}
.campo--check input{width:1.15rem;height:1.15rem;flex:none;margin-top:.2rem;accent-color:var(--reserva-600)}
.campo--check label{font-size:.9rem;font-weight:300;line-height:1.5;color:var(--piedra)}
.campo--check label a{color:var(--bosque-700);text-decoration:underline}
/* El error y el acuse nacen ocultos y los muestra el manejador compartido. */
.forma__error{display:none;font-size:.9rem;line-height:1.5;color:var(--error-texto);background:var(--error-bg);border-radius:var(--radio-s);padding:.8rem 1rem}
.forma__ok{
  display:none;
  padding:clamp(1.5rem,3vw,2.2rem);background:var(--exito-bg);
  border-radius:var(--radio-m);max-width:38rem;margin-top:clamp(2rem,4vw,2.75rem);
}
.forma__ok h3{color:var(--exito-texto);font-size:1.35rem;margin-bottom:.6rem}
.forma__ok p{font-size:.99rem;font-weight:300;line-height:1.6;color:var(--exito-texto)}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 13 · CABECERA INTERNA
   Para páginas legales y de contacto, donde un hero de video de
   88svh sería desproporcionado. Misma banda oscura, altura corta.
   ═══════════════════════════════════════════════════════════ */
.cabecera{background:var(--bosque-900);padding-block:clamp(3.5rem,7vw,5.5rem)}
.cabecera__r{
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--esmeralda-500);margin-bottom:.9rem;
}
.cabecera h1{color:#fff;font-size:clamp(1.9rem,1.45rem + 2.1vw,3.05rem);line-height:1.08;max-width:22ch}
.cabecera p{margin-top:1.1rem;color:rgba(255,255,255,.85);font-weight:300;font-size:clamp(1rem,.98rem + .3vw,1.14rem);max-width:52ch;line-height:1.58}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 14 · DOCUMENTO LEGAL
   Medida larga y jerarquía plana: se consulta, no se escanea.
   El texto legal no se reescribe nunca por motivos de diseño.
   ═══════════════════════════════════════════════════════════ */
.legal{max-width:68ch;display:flex;flex-direction:column;gap:1.1rem}
.legal h2{font-size:clamp(1.2rem,1.1rem + .5vw,1.5rem);line-height:1.25;margin-top:1.6rem}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:1rem;font-weight:300;line-height:1.68;color:var(--piedra)}
.legal strong{font-weight:600;color:var(--bosque-700)}
.legal ul,.legal ol{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.55rem}
.legal li::marker{color:var(--esmeralda-500)}
.legal a{color:var(--bosque-700);text-decoration:underline}
.legal__fecha{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--piedra);margin-bottom:.6rem}

/* ═══════════════════════════════════════════════════════════
   PATRÓN 9 · CIERRE
   Cierra toda página. Video de fondo, texto a la izquierda,
   dos botones. Mismo bloque en todas las subpáginas.
   ═══════════════════════════════════════════════════════════ */
.cierre{position:relative;overflow:hidden;background:var(--bosque-900);padding-block:clamp(5rem,10vw,8.5rem)}
.cierre__video,.cierre__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.cierre::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,52,40,.94) 12%,rgba(20,52,40,.6) 66%,transparent 100%);pointer-events:none}
.cierre__in{position:relative;z-index:2;max-width:34rem}
.cierre h2{color:#fff;font-size:clamp(1.9rem,1.45rem + 2.1vw,3.05rem);line-height:1.1}
.cierre p{margin-top:1.15rem;color:rgba(255,255,255,.85);font-weight:300;font-size:clamp(1rem,.98rem + .3vw,1.14rem);max-width:42ch;line-height:1.58}
.cierre__ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.9rem,3.5vw,2.5rem)}
.cierre__horario{margin-top:1.3rem;font-family:var(--mono);font-size:.75rem;color:rgba(255,255,255,.62);letter-spacing:.04em}

/* ── Pie ──────────────────────────────────────────────────── */
.pie{background:var(--hueso);border-top:1px solid var(--linea);padding-block:2.75rem 3.5rem}
.pie__in{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between;align-items:flex-start}
.pie__nav{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;list-style:none;margin:0;padding:0}
.pie__nav a{font-size:.9rem;color:var(--piedra);text-decoration:none}
.pie__nav a:hover{color:var(--verde-marca)}
.pie__legal{font-family:var(--mono);font-size:.72rem;color:var(--piedra);letter-spacing:.03em}

/* ── Movimiento. Cada uno con un motivo. ──────────────────── */
/* Revelado al entrar: jerarquiza la lectura por secciones. */
.rev{opacity:0;transform:translateY(18px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.rev.visible{opacity:1;transform:none}
.rev[data-r="1"]{transition-delay:.08s}
.rev[data-r="2"]{transition-delay:.16s}
.rev[data-r="3"]{transition-delay:.24s}

/* Acercamiento lento sobre la foto: le da al plano fijo la misma
   vida que tiene el video del hero, sin pedir otro archivo. */
@keyframes derivar{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.partido__foto img{animation:derivar 22s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .partido__foto img{animation:none}
  .btn{transition:none}
  .btn:hover{transform:none}
}