/* ==========================================================================
   0. Fuentes — uso autorizado por la UP para este proyecto (registro: BRIEF B11, 2026-09-24).
   ========================================================================== */
@font-face { font-family: "Panamericana"; src: url("fonts/Panamericana-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Panamericana"; src: url("fonts/Panamericana-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Panamericana"; src: url("fonts/Panamericana-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Seravek"; src: url("fonts/Seravek-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Seravek"; src: url("fonts/Seravek-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Seravek"; src: url("fonts/Seravek-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Seravek"; src: url("fonts/Seravek-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

/* ==========================================================================
   1. Tokens — nombres y valores de TOKENS.md. Nada visual fuera de aquí.
   ========================================================================== */
:root {
  /* Color · superficie */
  --superficie-base: #F7F5F0;
  --superficie-elevada: #FFFFFF;
  --superficie-marca: #00685E;
  --superficie-marca-atenuada: #408E86;
  --superficie-marca-tinte: #E3EEEB;
  --superficie-profunda: #14211F;
  --superficie-velo: rgba(20, 33, 31, 0.6);
  /* Color · contenido */
  --contenido-primario: #14211F;
  --contenido-secundario: #3A4A47;
  --contenido-terciario: #5C6B68;
  --contenido-marca: #00685E;
  --contenido-inverso: #F7F5F0;
  --contenido-acento-inverso: #B9975B;
  --contenido-error: #A83A2D;
  /* Color · borde y acento */
  --borde-suave: #C9D6D3;
  --borde-campo: #5C6B68;
  --borde-marca: #00685E;
  --acento-ceremonial: #B9975B;
  --acento-ceremonial-metalico: #AB8855;
  /* Tipografía */
  --fuente-titulos: "Panamericana", Georgia, "Times New Roman", serif;
  --fuente-texto: "Seravek", Verdana, "Helvetica Neue", Arial, sans-serif;
  --texto-display: clamp(2.5rem, 1.45rem + 4.35vw, 4rem);
  --texto-h1: clamp(1.875rem, 1.26rem + 2.5vw, 2.75rem);
  --texto-h2: clamp(1.5rem, 1.15rem + 1.45vw, 2rem);
  --texto-contador: clamp(2rem, 1.65rem + 1.45vw, 2.5rem);
  --texto-cifra: clamp(1.375rem, 1.2rem + 0.75vw, 1.625rem);
  --texto-h3: clamp(1.125rem, 1.04rem + 0.36vw, 1.25rem);
  --texto-cuerpo-grande: clamp(1.125rem, 1.08rem + 0.18vw, 1.1875rem);
  --texto-cuerpo: 1rem;
  --texto-etiqueta: 0.875rem;
  --texto-pequeno: 0.875rem;
  --texto-boton: 1rem;
  --medida-texto: 36rem;
  /* Espaciado */
  --espacio-hilo: 4px; --espacio-compacto: 8px; --espacio-base: 16px; --espacio-bloque: 24px;
  --espacio-grupo: 32px; --espacio-modulo: 48px;
  --espacio-seccion-compacta: 48px; --espacio-seccion: 64px; --espacio-seccion-amplia: 80px;
  /* Grid */
  --contenedor-maximo: 1200px; --contenedor-lectura: var(--medida-texto); --contenedor-formulario: 32rem;
  --margen-lateral: 20px; --canal: var(--espacio-bloque);
  /* Sistema gráfico */
  --tahali-angulo: 60deg; --tahali-ancho: 48px; --franco-cuartel-relleno: var(--espacio-modulo);
  /* Radios · bordes · elevación */
  --radio-nulo: 0; --radio-campo: 2px; --radio-pastilla: 999px;
  --borde-fino: 1px; --borde-medio: 1.5px; --borde-grueso: 2px; --borde-acento: 4px;
  --sombra-nula: none; --sombra-flotante: 0 8px 24px rgba(20, 33, 31, 0.16);
  /* Movimiento */
  --duracion-instante: 120ms; --duracion-base: 200ms; --duracion-contador: 400ms;
  --curva-estandar: cubic-bezier(0.2, 0, 0, 1); --curva-salida: cubic-bezier(0.4, 0, 1, 1);
  --desplazamiento-entrada: 8px;
  --duracion-revelado: 400ms; --retardo-escalon: 60ms; --escala-hover: 1.03;
  /* Capas */
  --capa-base: 0; --capa-relieve: 1; --capa-fija: 10; --capa-desplegable: 20; --capa-banner: 30; --capa-velo: 40; --capa-modal: 50;
  /* Foco */
  --foco-anillo: 3px solid var(--contenido-marca);
  --foco-anillo-inverso: 3px solid var(--contenido-inverso);
}
@media (min-width: 600px) { :root { --margen-lateral: 32px; } }
@media (min-width: 900px) { :root { --margen-lateral: 48px; --tahali-ancho: 72px; --espacio-seccion-compacta: 64px; --espacio-seccion: 96px; --espacio-seccion-amplia: 128px; } }
@media (min-width: 1200px) { :root { --tahali-ancho: 96px; } }
@media (prefers-reduced-motion: reduce) { :root { --duracion-instante: 1ms; --duracion-base: 1ms; --duracion-contador: 1ms; --duracion-revelado: 1ms; --retardo-escalon: 0ms; --desplazamiento-entrada: 0px; --escala-hover: 1; } }

/* ==========================================================================
   2. Normalización y elementos
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--superficie-base); color: var(--contenido-primario); font-family: var(--fuente-texto); font-size: var(--texto-cuerpo); line-height: 1.6; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: var(--contenido-marca); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; transition: color var(--duracion-instante) var(--curva-estandar), text-decoration-thickness var(--duracion-instante) var(--curva-estandar); }
a:hover { color: var(--contenido-primario); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--foco-anillo); outline-offset: 2px; }
.inverso :focus-visible, .inverso:focus-visible { outline: var(--foco-anillo-inverso); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Escala tipográfica */
.t-display { font-family: var(--fuente-titulos); font-size: var(--texto-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.t-h1 { font-family: var(--fuente-titulos); font-size: var(--texto-h1); font-weight: 600; line-height: 1.1; letter-spacing: -0.005em; }
.t-h2 { font-family: var(--fuente-titulos); font-size: var(--texto-h2); font-weight: 400; line-height: 1.15; }
.t-contador { font-family: var(--fuente-titulos); font-size: var(--texto-contador); font-weight: 400; line-height: 1; }
.t-cifra { font-family: var(--fuente-titulos); font-size: var(--texto-cifra); font-weight: 400; line-height: 1.2; }
.t-h3 { font-family: var(--fuente-texto); font-size: var(--texto-h3); font-weight: 700; line-height: 1.3; }
.t-cuerpo-grande { font-size: var(--texto-cuerpo-grande); line-height: 1.55; }
.t-cuerpo { font-size: var(--texto-cuerpo); line-height: 1.6; }
.t-etiqueta { font-size: var(--texto-etiqueta); font-weight: 500; line-height: 1.4; }
.t-pequeno { font-size: var(--texto-pequeno); line-height: 1.5; }
.t-boton { font-size: var(--texto-boton); font-weight: 500; line-height: 1; }

/* ==========================================================================
   3. Composición de la página de muestra (no es parte del sistema)
   ========================================================================== */
.ds { display: grid; grid-template-columns: 1fr; }
.ds__nav { display: none; }
.ds__cuerpo { padding: 0 var(--margen-lateral) var(--espacio-seccion-amplia); max-width: var(--contenedor-maximo); min-width: 0; }
.ds { overflow-x: clip; }
.ds__seccion { padding-top: var(--espacio-seccion-amplia); border-top: var(--borde-fino) solid var(--borde-suave); margin-top: var(--espacio-seccion-amplia); }
.ds__seccion:first-of-type { border-top: 0; margin-top: 0; }
.ds__sub { margin-top: var(--espacio-seccion-compacta); }
.ds__nota { color: var(--contenido-terciario); font-size: var(--texto-pequeno); max-width: var(--contenedor-lectura); margin-top: var(--espacio-compacto); }
.ds__meta { display: flex; flex-wrap: wrap; gap: var(--espacio-compacto) var(--espacio-bloque); color: var(--contenido-terciario); font-size: var(--texto-pequeno); margin-top: var(--espacio-base); }
.ds__meta strong { color: var(--contenido-primario); font-weight: 500; }
.ds__tag { display: inline-block; font-size: var(--texto-pequeno); font-weight: 500; padding: 2px 8px; border: var(--borde-fino) solid var(--borde-campo); border-radius: var(--radio-campo); color: var(--contenido-secundario); }
.ds__tag--placeholder { border-style: dashed; }
.ds__lienzo { background: var(--superficie-elevada); border: var(--borde-fino) solid var(--borde-suave); padding: var(--espacio-bloque); margin-top: var(--espacio-bloque); }
.ds__lienzo--papel { background: var(--superficie-base); }
.ds__lienzo--sangre { padding: 0 0 var(--espacio-modulo); overflow: hidden; }
.ds__fila { display: flex; flex-wrap: wrap; gap: var(--espacio-base); align-items: flex-start; }
.ds__col { display: grid; gap: var(--espacio-base); }
.ds__estado { font-size: var(--texto-pequeno); color: var(--contenido-terciario); margin-bottom: var(--espacio-hilo); }
.ds__scroll { overflow-x: auto; margin-top: var(--espacio-bloque); }
.ds__tabla { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--texto-pequeno); }
.ds__tabla th, .ds__tabla td { text-align: left; vertical-align: top; padding: var(--espacio-compacto) var(--espacio-base) var(--espacio-compacto) 0; border-bottom: var(--borde-fino) solid var(--borde-suave); }
.ds__tabla th { font-weight: 500; color: var(--contenido-secundario); }
code { font-family: ui-monospace, Menlo, monospace; font-size: 0.85em; background: var(--superficie-marca-tinte); padding: 1px 5px; border-radius: var(--radio-campo); }
@media (min-width: 900px) {
  .ds { grid-template-columns: 220px 1fr; }
  .ds__nav { display: block; position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto; padding: var(--espacio-grupo) var(--espacio-bloque); border-right: var(--borde-fino) solid var(--borde-suave); }
  .ds__nav a { display: block; color: var(--contenido-secundario); text-decoration: none; padding: 6px 0; font-size: var(--texto-pequeno); }
  .ds__nav a:hover { color: var(--contenido-primario); text-decoration: underline; text-decoration-thickness: 2px; }
  .ds__nav a[aria-current="location"] { color: var(--contenido-marca); font-weight: 500; border-left: var(--borde-grueso) solid var(--contenido-marca); padding-left: 10px; margin-left: -12px; }
  .ds__nav strong { display: block; font-weight: 500; margin: var(--espacio-base) 0 var(--espacio-hilo); color: var(--contenido-terciario); font-size: var(--texto-pequeno); }
}

/* Color: muestras */
.muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--espacio-base); margin-top: var(--espacio-bloque); }
.muestra { border: var(--borde-fino) solid var(--borde-suave); }
.muestra__color { height: 72px; }
.muestra__info { padding: var(--espacio-compacto) var(--espacio-base); font-size: var(--texto-pequeno); background: var(--superficie-elevada); }
.muestra__info code { display: block; margin-top: 2px; }
.pares { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--espacio-base); margin-top: var(--espacio-bloque); }
.par { padding: var(--espacio-base); border: var(--borde-fino) solid var(--borde-suave); display: grid; gap: var(--espacio-hilo); }
.par__ratio { font-family: var(--fuente-titulos); font-size: var(--texto-cifra); }
.par__uso { font-size: var(--texto-pequeno); opacity: 0.85; }

/* Espaciado */
.escala-espacio { display: grid; gap: var(--espacio-compacto); margin-top: var(--espacio-bloque); }
.escala-espacio__fila { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--espacio-hilo) var(--espacio-base); font-size: var(--texto-pequeno); }
@media (min-width: 600px) { .escala-espacio__fila { grid-template-columns: 220px 1fr; } }
.escala-espacio__barra { height: 12px; background: var(--superficie-marca); }
.ritmo { display: grid; gap: 0; margin-top: var(--espacio-bloque); }
.ritmo__bloque { background: var(--superficie-elevada); border: var(--borde-fino) solid var(--borde-suave); padding: var(--espacio-base); font-size: var(--texto-pequeno); }
.ritmo__hueco { display: grid; place-items: center; color: var(--contenido-terciario); font-size: var(--texto-pequeno); background: repeating-linear-gradient(0deg, transparent 0 7px, var(--superficie-marca-tinte) 7px 8px); }

/* Grid */
.rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--canal); margin-top: var(--espacio-bloque); }
.rejilla > span { background: var(--superficie-marca-tinte); height: 64px; display: grid; place-items: center; font-size: var(--texto-pequeno); color: var(--contenido-marca); }
@media (max-width: 899px) { .rejilla { grid-template-columns: repeat(6, 1fr); } .rejilla > span:nth-child(n+7) { display: none; } }
@media (max-width: 599px) { .rejilla { grid-template-columns: 1fr; } .rejilla > span:nth-child(n+2) { display: none; } }

/* Radios · bordes · elevación */
.forma { width: 120px; height: 72px; background: var(--superficie-elevada); border: var(--borde-medio) solid var(--borde-campo); display: grid; place-items: center; font-size: var(--texto-pequeno); }
.forma--flotante { box-shadow: var(--sombra-flotante); border-color: var(--borde-suave); }

/* ==========================================================================
   4. Componentes — clases por rol, especificidad plana
   ========================================================================== */
/* Botón */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-compacto); min-height: 48px; padding: 12px 24px; border-radius: var(--radio-campo); border: var(--borde-medio) solid transparent; font-size: var(--texto-boton); font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color var(--duracion-instante) var(--curva-estandar), outline-color var(--duracion-instante) var(--curva-estandar), transform var(--duracion-instante) var(--curva-estandar); }
.boton--primario { background: var(--superficie-marca); color: var(--contenido-inverso); border-color: var(--superficie-marca); }
.boton--primario:hover { outline: 2px solid var(--acento-ceremonial); outline-offset: 2px; }
.boton--primario:focus-visible { outline: var(--foco-anillo); outline-offset: 2px; }
.boton--secundario { background: transparent; color: var(--contenido-marca); border-color: var(--borde-marca); }
.boton--secundario:hover { background: var(--superficie-marca-tinte); }
.boton--enlace { background: transparent; color: var(--contenido-marca); text-decoration: underline; text-underline-offset: 0.15em; padding-left: 8px; padding-right: 8px; }
.boton--enlace:hover { color: var(--contenido-primario); text-decoration-thickness: 2px; }
.boton:active { transform: translateY(1px); }
.boton[aria-disabled="true"] { background: var(--superficie-marca-tinte); color: var(--contenido-terciario); border-color: transparent; cursor: default; }
.boton[aria-disabled="true"]:hover { outline: 0; }
.boton--bloque { width: 100%; }
.inverso .boton--secundario { color: var(--contenido-inverso); border-color: var(--contenido-inverso); }
.inverso .boton--secundario:hover { background: rgba(247, 245, 240, 0.12); }
.inverso .boton--primario { background: var(--superficie-base); color: var(--contenido-marca); border-color: var(--superficie-base); }

/* Chip */
.chip { display: inline-flex; align-items: center; gap: var(--espacio-compacto); min-height: 44px; padding: 8px 16px; border-radius: var(--radio-pastilla); border: var(--borde-medio) solid var(--borde-marca); color: var(--contenido-marca); background: transparent; font-size: var(--texto-etiqueta); font-weight: 500; cursor: pointer; transition: background-color var(--duracion-instante) var(--curva-estandar), color var(--duracion-instante) var(--curva-estandar); }
.chip:hover { background: var(--superficie-marca-tinte); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip__ok { display: none; width: 14px; height: 14px; transform: scale(0.6); }
@keyframes chip-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.chip:has(input:checked) .chip__ok { animation: chip-pop var(--duracion-base) var(--curva-estandar) forwards; }
.chip--activo, .chip:has(input:checked) { background: var(--superficie-marca); color: var(--contenido-inverso); border-color: var(--superficie-marca); }
.chip--activo .chip__ok, .chip:has(input:checked) .chip__ok { display: block; }
.chip:has(input:focus-visible) { outline: var(--foco-anillo); outline-offset: 2px; }
.chip--nivel { min-height: 0; padding: 2px 10px; border: 0; background: var(--superficie-marca-tinte); color: var(--contenido-marca); cursor: default; font-weight: 500; }

/* Campo de formulario */
.campo { display: grid; gap: var(--espacio-hilo); }
.campo__etiqueta { font-size: var(--texto-etiqueta); font-weight: 500; }
.campo__etiqueta span { font-weight: 400; color: var(--contenido-terciario); }
.campo__control { min-height: 48px; width: 100%; padding: 12px 16px; font: inherit; color: var(--contenido-primario); background: var(--superficie-elevada); border: var(--borde-medio) solid var(--borde-campo); border-radius: var(--radio-campo); transition: border-color var(--duracion-instante) var(--curva-estandar); }
.campo__control::placeholder { color: var(--contenido-terciario); }
.campo__control:focus-visible { border-color: var(--borde-marca); border-width: var(--borde-grueso); outline: var(--foco-anillo); outline-offset: 2px; }
.campo--error .campo__control { border-color: var(--contenido-error); border-width: var(--borde-grueso); }
.campo__ayuda { font-size: var(--texto-pequeno); color: var(--contenido-terciario); }
.campo__error { font-size: var(--texto-pequeno); color: var(--contenido-error); display: flex; gap: var(--espacio-hilo); align-items: flex-start; }
.campo--casilla { grid-template-columns: 24px 1fr; gap: var(--espacio-compacto); align-items: start; }
.campo--casilla input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--superficie-marca); }
.campo--casilla label { font-size: var(--texto-pequeno); }
.formulario { display: grid; gap: var(--espacio-bloque); max-width: var(--contenedor-formulario); }
.formulario__fila { display: grid; gap: var(--espacio-bloque); }
@media (min-width: 600px) { .formulario__fila { grid-template-columns: 1fr 1fr; } }

/* Mensaje de estado */
.mensaje { display: grid; grid-template-columns: 24px 1fr; gap: var(--espacio-compacto); padding: var(--espacio-base); border-radius: var(--radio-campo); font-size: var(--texto-cuerpo); }
.mensaje svg { width: 24px; height: 24px; }
.mensaje__titulo { font-weight: 700; display: block; }
.mensaje--exito { background: var(--superficie-marca-tinte); color: var(--contenido-marca); }
.mensaje--error { background: var(--superficie-elevada); color: var(--contenido-error); border: var(--borde-grueso) solid var(--contenido-error); }
.mensaje--advertencia { background: var(--superficie-elevada); color: var(--contenido-primario); border-left: var(--borde-acento) solid var(--acento-ceremonial); }
.mensaje--advertencia svg { color: var(--acento-ceremonial-metalico); }
.mensaje--informacion { background: var(--superficie-marca-tinte); color: var(--contenido-primario); }

/* Encabezado de sección */
.encabezado { display: grid; gap: var(--espacio-compacto); }
.encabezado--filete::after { content: ""; display: block; width: 48px; height: var(--borde-fino); background: var(--acento-ceremonial); }
.encabezado__apoyo { color: var(--contenido-secundario); max-width: var(--contenedor-lectura); }

/* Franco cuartel + Tahalí */
.franco { position: relative; display: grid; background: var(--superficie-base); overflow-x: clip; }
.franco__bloque { position: relative; background: var(--superficie-marca); color: var(--contenido-inverso); padding: var(--franco-cuartel-relleno) var(--margen-lateral); display: grid; gap: var(--espacio-bloque); align-content: center; z-index: var(--capa-base); }
.franco__foto { position: relative; }
.franco__foto { overflow: hidden; }
.franco__foto .tahali { top: 0; height: var(--tahali-alto, 78%); left: var(--tahali-x, 0); }
.franco__foto img { object-position: var(--foco-movil, var(--foco, 50% 50%)); }
.franco__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.franco__apoyo { font-size: var(--texto-cuerpo-grande); max-width: var(--contenedor-lectura); }
.franco__meta { display: flex; flex-wrap: wrap; gap: var(--espacio-compacto) var(--espacio-base); font-size: var(--texto-pequeno); }
.franco__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-base); }
.tahali { position: absolute; z-index: var(--capa-relieve); width: var(--tahali-ancho); background: var(--superficie-marca); pointer-events: none; transform-origin: top left; transform: skewX(calc(90deg - var(--tahali-angulo))); }
.tahali--atenuado { background: var(--superficie-marca-atenuada); }
.tahali--multiply { mix-blend-mode: multiply; }
.tahali--contorno { background: transparent; border: var(--borde-fino) solid var(--acento-ceremonial); }
@media (min-width: 900px) {
  .franco { grid-template-columns: 5fr 7fr; }
  .franco__foto img { aspect-ratio: 3 / 2; height: 100%; }
  .franco__foto .tahali { left: var(--tahali-x, 0); }
  .franco__foto img { object-position: var(--foco, 50% 50%); }
  .franco--campana { grid-template-columns: 7fr 5fr; }
  .franco--campana .franco__bloque { padding-right: var(--espacio-grupo); }
  .franco--campana .t-display { font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem); max-width: 12ch; }
}
.franco--sinfoto { grid-template-columns: 1fr; }
.franco--sinfoto { overflow: hidden; }
.franco--sinfoto .franco__bloque { padding-right: calc(var(--margen-lateral) + var(--tahali-ancho) * 2); min-height: 320px; }
.franco--sinfoto .tahali { top: 0; height: 100%; left: auto; right: calc(var(--tahali-ancho) * 2.4); }
.datos { display: grid; gap: var(--espacio-base); }
.datos__fila { display: grid; gap: var(--espacio-hilo); }
.datos dt { font-size: var(--texto-etiqueta); font-weight: 500; opacity: 0.85; }
.datos dd { font-family: var(--fuente-titulos); font-size: var(--texto-cifra); line-height: 1.2; }
.datos dd.datos--largo { font-family: var(--fuente-texto); font-size: var(--texto-cuerpo); line-height: 1.5; }
.datos--papel { background: var(--superficie-marca-tinte); padding: var(--espacio-bloque); }
@media (min-width: 600px) { .datos--papel { grid-template-columns: 1fr 1fr; } }

/* Revelado al cargar (variante campaña y cabecera de ficha): una sola vez */
.revela > * { opacity: 0; transform: translateY(var(--desplazamiento-entrada)); }
.revela.revelado > * { opacity: 1; transform: none; transition: opacity var(--duracion-revelado) var(--curva-estandar), transform var(--duracion-revelado) var(--curva-estandar); }
.revela.revelado > *:nth-child(2) { transition-delay: calc(var(--retardo-escalon) * 1); }
.revela.revelado > *:nth-child(3) { transition-delay: calc(var(--retardo-escalon) * 2); }
.revela.revelado > *:nth-child(4) { transition-delay: calc(var(--retardo-escalon) * 3); }
.revela.revelado > *:nth-child(5) { transition-delay: calc(var(--retardo-escalon) * 4); }
.franco.revela .tahali { transform: skewX(calc(90deg - var(--tahali-angulo))) scaleY(0); }
.franco.revela.revelado .tahali { transform: skewX(calc(90deg - var(--tahali-angulo))) scaleY(1); transition: transform calc(var(--duracion-revelado) * 1.5) var(--curva-estandar) calc(var(--retardo-escalon) * 3); }
.franco.revela .franco__foto img { transform: scale(1.04); }
.franco.revela.revelado .franco__foto img { transform: scale(1); transition: transform calc(var(--duracion-revelado) * 2) var(--curva-estandar); }

/* Cabecera */
.cabecera { background: var(--superficie-base); border-bottom: var(--borde-fino) solid var(--borde-suave); }
.cabecera__util { display: none; }
.cabecera__barra { display: flex; align-items: center; gap: var(--espacio-bloque); min-height: 56px; padding: 0 var(--margen-lateral); }
.cabecera__logo { display: flex; align-items: center; gap: var(--espacio-compacto); text-decoration: none; color: var(--contenido-primario); margin-right: auto; }
.cabecera__logo img { height: 40px; width: auto; }
.cabecera__nav { display: none; }
.cabecera__nav a { color: var(--contenido-primario); text-decoration: none; padding: 8px 0; border-bottom: var(--borde-grueso) solid transparent; }
.cabecera__nav a:hover { border-bottom-color: var(--borde-suave); }
.cabecera__nav a[aria-current="page"] { color: var(--contenido-marca); font-weight: 500; border-bottom-color: var(--contenido-marca); }
.cabecera__menu { min-height: 44px; min-width: 44px; background: transparent; border: var(--borde-medio) solid var(--borde-marca); border-radius: var(--radio-campo); color: var(--contenido-marca); font-weight: 500; padding: 0 12px; }
@media (min-width: 900px) {
  .cabecera__util { display: flex; justify-content: flex-end; gap: var(--espacio-bloque); padding: 0 var(--margen-lateral); min-height: 32px; align-items: center; font-size: var(--texto-pequeno); border-bottom: var(--borde-fino) solid var(--borde-suave); }
  .cabecera__util a { color: var(--contenido-secundario); text-decoration: none; }
  .cabecera__util a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
  .cabecera__barra { min-height: 72px; }
  .cabecera__logo img { height: 56px; }
  .cabecera__nav { display: flex; gap: var(--espacio-bloque); }
  .cabecera__menu { display: none; }
}

/* Menú móvil */
.menu-movil { position: fixed; inset: 0; z-index: var(--capa-modal); background: var(--superficie-velo); display: grid; align-items: start; }
.menu-movil[hidden] { display: none; }
.menu-movil__panel { background: var(--superficie-base); padding: var(--espacio-bloque) var(--margen-lateral) var(--espacio-grupo); display: grid; gap: var(--espacio-base); box-shadow: var(--sombra-flotante); transform: translateY(calc(-1 * var(--desplazamiento-entrada))); opacity: 0; animation: menu-entra var(--duracion-base) var(--curva-estandar) forwards; }
@keyframes menu-entra { to { transform: none; opacity: 1; } }
.menu-movil__cerrar { justify-self: end; }
.menu-movil nav a { display: block; padding: 12px 0; color: var(--contenido-primario); text-decoration: none; border-bottom: var(--borde-fino) solid var(--borde-suave); }
.menu-movil nav a[aria-current="page"] { color: var(--contenido-marca); font-weight: 500; }
.menu-movil .primaria a { font-size: var(--texto-h3); font-weight: 700; }

/* Filtros · Contador · Tarjeta de programa */
.filtros { background: var(--superficie-marca-tinte); padding: var(--espacio-bloque) var(--espacio-base); display: grid; gap: var(--espacio-bloque); }
.filtros fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--espacio-compacto); }
.filtros legend { font-size: var(--texto-etiqueta); font-weight: 500; padding: 0; margin-bottom: var(--espacio-compacto); }
.filtros__chips { display: flex; gap: var(--espacio-compacto); overflow-x: auto; padding-bottom: 2px; }
.filtros__chips .chip { position: relative; flex: 0 0 auto; }
@media (min-width: 600px) { .filtros { grid-template-columns: 1fr 1fr; } .filtros__chips { flex-wrap: wrap; overflow: visible; } .filtros__acciones { grid-column: 1 / -1; } }
.contador { display: flex; align-items: baseline; gap: var(--espacio-compacto); flex-wrap: wrap; margin: var(--espacio-grupo) 0 var(--espacio-bloque); }
.contador__n { font-family: var(--fuente-titulos); font-size: var(--texto-contador); line-height: 1; font-variant-numeric: tabular-nums; }
.contador__apoyo { color: var(--contenido-terciario); font-size: var(--texto-pequeno); }
.lista-programas { display: grid; gap: 0; }
.programa { position: relative; display: grid; gap: var(--espacio-compacto); padding: var(--espacio-bloque) var(--espacio-base); border-bottom: var(--borde-fino) solid var(--borde-suave); transition: background-color var(--duracion-instante) var(--curva-estandar); }
.programa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--borde-grueso); background: var(--contenido-marca); transform: scaleY(0); transform-origin: top; transition: transform var(--duracion-base) var(--curva-estandar); }
.programa:hover { background: var(--superficie-elevada); }
.programa:hover::before, .programa:focus-within::before { transform: scaleY(1); }
.programa:hover .programa__nombre { text-decoration-thickness: 2px; }
.programa__nombre { font-size: var(--texto-h3); font-weight: 700; line-height: 1.3; color: var(--contenido-primario); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; }
.programa__nombre::after { content: ""; position: absolute; inset: 0; }
.programa:focus-within { outline: var(--foco-anillo); outline-offset: -3px; }
.programa__meta { display: flex; flex-wrap: wrap; gap: var(--espacio-hilo) var(--espacio-base); font-size: var(--texto-pequeno); color: var(--contenido-terciario); align-items: center; }
.programa--destacado { background: var(--superficie-elevada); border-top: var(--borde-acento) solid var(--acento-ceremonial); border-bottom: 0; }
.programa--oculto { display: none; }
@media (min-width: 600px) { .lista-programas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .lista-programas { grid-template-columns: 1fr 1fr 1fr; } }
.vacio { background: var(--superficie-marca-tinte); padding: var(--espacio-modulo) var(--espacio-bloque); display: grid; gap: var(--espacio-base); max-width: var(--contenedor-lectura); }

/* Bloque de asesor · RVOE */
.asesor { display: grid; gap: var(--espacio-bloque); background: var(--superficie-elevada); border: var(--borde-fino) solid var(--borde-suave); padding: var(--espacio-bloque); }
.asesor__foto { width: 96px; aspect-ratio: 1; object-fit: cover; }
.asesor__acciones { display: grid; gap: var(--espacio-compacto); }
@media (min-width: 600px) { .asesor { grid-template-columns: 96px 1fr; } .asesor__acciones { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--espacio-base); } }
.rvoe { padding-top: var(--espacio-grupo); border-top: var(--borde-fino) solid var(--borde-suave); font-size: var(--texto-pequeno); color: var(--contenido-terciario); max-width: var(--contenedor-lectura); }

/* Tarjeta de sede · Mosaico · Tarjeta de contenido */
.sedes { display: grid; gap: var(--espacio-bloque); }
@media (min-width: 600px) { .sedes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .sedes { grid-template-columns: repeat(4, 1fr); } }
.sede { position: relative; background: var(--superficie-elevada); border: var(--borde-fino) solid var(--borde-suave); display: grid; }
.sede__foto { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.sede__franja { aspect-ratio: 3 / 2; background: var(--superficie-marca); color: var(--contenido-inverso); display: grid; align-content: end; padding: var(--espacio-base); font-family: var(--fuente-titulos); font-size: var(--texto-cifra); line-height: 1.1; position: relative; overflow: hidden; }
.sede__franja span { position: relative; z-index: 2; }
.sede__franja .tahali { top: 0; height: 100%; right: 34%; left: auto; width: 32px; background: var(--superficie-marca-atenuada); transition: transform var(--duracion-base) var(--curva-estandar); }
.sede:hover .sede__franja .tahali { transform: skewX(calc(90deg - var(--tahali-angulo))) translateX(12px); }
.sede__foto { transition: transform var(--duracion-base) var(--curva-estandar); }
.sede { overflow: hidden; }
.sede:hover .sede__foto { transform: scale(var(--escala-hover)); }
.sede__cuerpo { padding: var(--espacio-base); display: grid; gap: var(--espacio-hilo); }
.sede__nombre { font-size: var(--texto-h3); font-weight: 700; }
.sede__nombre a { color: inherit; text-decoration: none; }
.sede__nombre a::after { content: ""; position: absolute; inset: 0; }
.sede:hover .sede__nombre a { text-decoration: underline; text-decoration-thickness: 2px; }
.sede address { font-style: normal; font-size: var(--texto-pequeno); color: var(--contenido-terciario); }
.mosaico { display: grid; gap: var(--espacio-grupo); }
.mosaico__texto { display: grid; gap: var(--espacio-base); max-width: var(--contenedor-lectura); align-content: start; }
.mosaico__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-compacto); }
.mosaico__fotos li:first-child { grid-column: 1 / -1; }
.mosaico__fotos li:nth-child(n+4) { display: none; }
.mosaico__fotos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.mosaico__fotos li:first-child img { aspect-ratio: 3 / 2; }
.mosaico__vacio { position: relative; overflow: hidden; background: var(--superficie-marca); color: var(--contenido-inverso); min-height: 280px; display: grid; align-content: end; padding: var(--espacio-grupo); font-family: var(--fuente-titulos); font-size: var(--texto-display); line-height: 1.05; }
.mosaico__vacio .tahali { top: 0; height: 100%; right: 30%; left: auto; background: var(--superficie-marca-atenuada); }
.mosaico__fotos figure { overflow: hidden; margin: 0; height: 100%; }
.mosaico__fotos img { transition: transform var(--duracion-base) var(--curva-estandar); }
.mosaico__fotos li:hover img { transform: scale(var(--escala-hover)); }
@media (min-width: 600px) { .mosaico__fotos { grid-template-columns: repeat(3, 1fr); } .mosaico__fotos li:first-child { grid-column: 1 / 3; grid-row: 1 / 3; } .mosaico__fotos li:nth-child(n+4) { display: block; } .mosaico__fotos li:first-child img { aspect-ratio: auto; } }
@media (min-width: 900px) { .mosaico { grid-template-columns: 5fr 7fr; } }
.contenidos { display: grid; gap: var(--espacio-bloque); }
@media (min-width: 600px) { .contenidos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .contenidos { grid-template-columns: repeat(3, 1fr); } }
.contenido { position: relative; display: grid; gap: var(--espacio-compacto); padding: var(--espacio-bloque) 0; border-top: var(--borde-fino) solid var(--borde-suave); }
.contenido time { font-size: var(--texto-pequeno); color: var(--contenido-terciario); }
.contenido__titulo { font-size: var(--texto-h3); font-weight: 700; }
.contenido__titulo a { color: inherit; text-decoration: none; }
.contenido__titulo a::after { content: ""; position: absolute; inset: 0; }
.contenido:hover .contenido__titulo a { text-decoration: underline; text-decoration-thickness: 2px; }
.contenido--evento { grid-template-columns: 64px 1fr; column-gap: var(--espacio-base); }
.contenido--evento .fecha { display: grid; text-align: left; line-height: 1; }
.contenido--evento .fecha b { font-family: var(--fuente-titulos); font-size: var(--texto-cifra); font-weight: 400; }
.contenido--evento .fecha span { font-size: var(--texto-pequeno); color: var(--contenido-terciario); }
.contenido--evento > *:not(.fecha) { grid-column: 2; }

/* Paso · Acordeón · Migas · Anclas */
.pasos { display: grid; gap: var(--espacio-grupo); counter-reset: paso; max-width: var(--contenedor-lectura); }
.paso { display: grid; grid-template-columns: 48px 1fr; gap: var(--espacio-base); counter-increment: paso; position: relative; }
.paso::before { content: counter(paso, decimal-leading-zero); font-family: var(--fuente-titulos); font-size: var(--texto-cifra); color: var(--contenido-marca); line-height: 1.2; }
.paso:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 36px; bottom: calc(-1 * var(--espacio-grupo)); width: var(--borde-fino); background: var(--borde-suave); }
.paso h3 { font-size: var(--texto-h3); font-weight: 700; }
.acordeon { border-top: var(--borde-fino) solid var(--borde-suave); max-width: var(--contenedor-lectura); }
.acordeon__item { border-bottom: var(--borde-fino) solid var(--borde-suave); }
.acordeon__boton { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-base); padding: var(--espacio-base) 0; background: transparent; border: 0; text-align: left; font-size: var(--texto-h3); font-weight: 700; cursor: pointer; }
.acordeon__boton:hover { background: var(--superficie-marca-tinte); }
.acordeon__boton svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform var(--duracion-base) var(--curva-estandar); }
.acordeon__boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.acordeon__panel { display: grid; grid-template-rows: 1fr; color: var(--contenido-secundario); transition: grid-template-rows var(--duracion-base) var(--curva-estandar); }
.acordeon__panel > div { overflow: hidden; padding: 0 0 var(--espacio-base); }
.acordeon__panel[data-cerrado] { grid-template-rows: 0fr; }
.acordeon__panel[data-cerrado] > div { padding-bottom: 0; }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--espacio-compacto); font-size: var(--texto-pequeno); color: var(--contenido-terciario); }
.migas a { color: var(--contenido-secundario); text-decoration: none; }
.migas a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.migas li + li::before { content: "›"; margin-right: var(--espacio-compacto); }
.anclas { border-bottom: var(--borde-fino) solid var(--borde-suave); background: var(--superficie-base); }
.anclas ul { display: flex; gap: var(--espacio-bloque); overflow-x: auto; padding: 0 var(--espacio-base); }
.anclas a { display: block; white-space: nowrap; padding: 12px 0; font-size: var(--texto-etiqueta); font-weight: 500; color: var(--contenido-secundario); text-decoration: none; border-bottom: var(--borde-grueso) solid transparent; }
.anclas a[aria-current="location"] { color: var(--contenido-marca); border-bottom-color: var(--contenido-marca); }

/* Banner de cookies · WhatsApp · Pie */
.cookies { background: var(--superficie-elevada); border-top: var(--borde-fino) solid var(--borde-suave); box-shadow: var(--sombra-flotante); padding: var(--espacio-bloque) var(--margen-lateral); display: grid; gap: var(--espacio-base); }
.cookies__acciones { display: grid; gap: var(--espacio-compacto); }
@media (min-width: 600px) { .cookies { grid-template-columns: 1fr auto; align-items: center; } .cookies__acciones { display: flex; } }
.whatsapp { display: inline-flex; align-items: center; gap: var(--espacio-compacto); min-height: 56px; min-width: 56px; padding: 0 20px; border-radius: var(--radio-pastilla); background: var(--superficie-marca); color: var(--contenido-inverso); text-decoration: none; font-weight: 500; box-shadow: var(--sombra-flotante); }
.whatsapp svg { width: 24px; height: 24px; }
.pie { background: var(--superficie-profunda); color: var(--contenido-inverso); padding: var(--espacio-seccion) var(--margen-lateral) var(--espacio-grupo); border-top: var(--borde-fino) solid var(--acento-ceremonial); display: grid; gap: var(--espacio-grupo); }
.pie h3 { color: var(--contenido-acento-inverso); font-family: var(--fuente-titulos); font-weight: 400; font-size: var(--texto-h3); margin-bottom: var(--espacio-compacto); }
.pie a { color: var(--contenido-inverso); }
.pie address { font-style: normal; font-size: var(--texto-pequeno); line-height: 1.5; }
.pie__cols { display: grid; gap: var(--espacio-grupo); }
.pie__legal { font-size: var(--texto-pequeno); opacity: 0.85; display: flex; flex-wrap: wrap; gap: var(--espacio-base); padding-top: var(--espacio-bloque); border-top: 1px solid rgba(247,245,240,0.2); }
@media (min-width: 600px) { .pie__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .pie__cols { grid-template-columns: 2fr 2fr 1fr 1fr; } }

/* Movimiento: demo */
.demo-mov { display: grid; gap: var(--espacio-base); }
.demo-mov__caja { width: 64px; height: 64px; background: var(--superficie-marca); transition: transform var(--duracion-base) var(--curva-estandar), opacity var(--duracion-base) var(--curva-estandar); }
.demo-mov__caja.fuera { transform: translateY(var(--desplazamiento-entrada)); opacity: 0; }