/* FIBRA: estilos comunes (base, cabecera, menú, pie, botones, páginas internas).
   Dueño: frente PUBLICA. Tokens en tokens.css (no se tocan). Dirección: EXPERIENCIA.md §2, §4 y §5.
   Regla de rendimiento: solo se animan transform, opacity, clip-path y stroke-dashoffset; nada de
   filter, mix-blend-mode ni backdrop-filter sobre elementos grandes. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--noche);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: var(--pantalla);
  background: var(--noche);
  color: var(--hueso);
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  line-height: var(--interlinea);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, h4, dl, dd, figure, blockquote { margin: 0; }
/* Especificidad 0 (:where): el reset no le gana a la clase de cada lista (antes pisaba el padding
   de las estaciones del recorrido y el margen de los hitos de carne propia). */
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--sangre); outline-offset: 2px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.saltar {
  position: fixed; left: var(--e-4); top: var(--e-4); z-index: 200;
  padding: var(--e-3) var(--e-4);
  background: var(--hueso); color: var(--noche);
  border-radius: var(--r-m);
  font-weight: 600; text-decoration: none;
  max-width: calc(100vw - 2 * var(--e-4));
  transform: translateY(-160%);
  transition: transform var(--d-hover) var(--ease-suave);
}
.saltar:focus { transform: none; }

/* Márgenes que respetan la muesca y las esquinas del celular apaisado (viewport-fit=cover): el
   token --margen no cambia; acá se toma el mayor entre él y el área segura. */
:root {
  --margen-seguro: max(var(--margen), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --ancho-seguro: min(1240px, 100% - 2 * var(--margen-seguro));
}
.marco { width: var(--ancho-seguro); margin-inline: auto; }

.titulo-seccion {
  font-family: var(--f-titular);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  /* tope en vw: con el texto al 200 % la palabra más larga ("ADIVINAMOS.") entra a 375 px */
  font-size: min(var(--t-h2), 13vw);
  line-height: var(--interlinea-titular);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

strong { font-weight: 600; }

/* ---------- Botones y enlaces ---------- */
.boton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: var(--r-m);
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms var(--ease-suave), background-color var(--d-hover) var(--ease-suave);
}
.boton--principal { background: var(--sangre); color: var(--sobre-sangre); }
/* La hebra de luz que cruza en diagonal al pasar el puntero. */
.boton--principal::after {
  content: "";
  position: absolute; z-index: -1;
  top: -30%; bottom: -30%; left: 0;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.18), transparent);
  transform: translateX(-140%) skewX(-8deg);
  pointer-events: none;
}
.boton--chico { min-height: 44px; padding: 0.6rem 1rem; font-size: 0.9375rem; }
.boton--grande { min-height: 56px; padding: 1rem 1.8rem; font-size: 1.0625rem; }
.boton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .boton--principal:hover::after { transform: translateX(460%) skewX(-8deg); transition: transform 220ms var(--ease-suave); }
}

/* Enlace secundario: se ve subrayado en reposo (en táctil no hay hover) y al pasar el puntero
   se dibuja la línea roja encima. */
.enlace-secundario {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--hueso);
  font-weight: 500;
  text-decoration: none;
}
.enlace-secundario::before, .enlace-secundario::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 10px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.enlace-secundario::after {
  height: 2px; bottom: 9.5px;
  background: var(--sangre);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 200ms var(--ease-suave);
}
@media (hover: hover) and (pointer: fine) {
  .enlace-secundario:hover::after { transform: scaleX(1); }
}
.enlace-secundario:focus-visible::after { transform: scaleX(1); }
.enlace-secundario, .nav__enlace, .cabecera__logo, .pie__pausa, .menu-movil__cerrar { -webkit-tap-highlight-color: transparent; }
.enlace-secundario:active, .nav__enlace:active, .pie__pausa:active, .menu-movil__cerrar:active { transform: scale(0.97); transition: transform 100ms var(--ease-suave); }

/* ---------- Cabecera ---------- */
/* width con tope en 100vw: si algo de la página desborda (texto al 200 %), el viewport de layout
   del celular se agranda y una barra fija a lo ancho dejaba el menú fuera de la pantalla. */
.cabecera {
  position: fixed; inset: 0 auto auto 0; z-index: 50;
  width: min(100%, 100vw);
  transition: transform 320ms var(--ease-suave);
}
.cabecera::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--noche);
  border-bottom: 1px solid var(--linea-noche);
  opacity: 0;
  transition: opacity 220ms var(--ease-suave);
  z-index: -1;
}
.cabecera--solida::before { opacity: 1; }
.cabecera--oculta { transform: translateY(-100%); }
.cabecera__barra {
  display: flex; align-items: center; gap: var(--e-4);
  height: 64px;
  padding-inline: max(var(--margen), env(safe-area-inset-left, 0px)) max(var(--margen), env(safe-area-inset-right, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: content-box;
}
/* Con el texto al 200 % el botón crece: el logo cede ancho y nada empuja el menú fuera. */
.cabecera__logo {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  min-width: 44px; flex: 0 1 auto;   /* objetivo táctil de 44 px también a lo ancho (el logo mide 40) */
  transition: opacity var(--d-hover) var(--ease-suave), transform 100ms var(--ease-suave);
}
.cabecera__logo img { height: 28px; width: auto; min-width: 0; max-width: 100%; object-fit: contain; object-position: left center; }
.cabecera__logo:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cabecera__logo:hover { opacity: 0.85; } }
.cabecera__postula { flex: none; white-space: nowrap; }
.cabecera__menu { flex: none; }
.nav { display: none; }
.nav__lista { display: flex; gap: clamp(1.25rem, 2vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.nav__enlace {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--hueso-2);
  font-size: var(--t-chico);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--d-hover) var(--ease-suave);
}
.nav__enlace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: var(--sangre);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 200ms var(--ease-suave);
}
@media (hover: hover) and (pointer: fine) {
  .nav__enlace:hover { color: var(--hueso); }
  .nav__enlace:hover::after { transform: scaleX(1); }
}
.cabecera__menu {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0; background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cabecera__menu-lineas { display: grid; gap: 6px; width: 22px; }
.cabecera__menu-lineas span {
  display: block; height: 2px; background: var(--hueso); border-radius: 1px;
  transform: skewX(-8deg);
}
.cabecera__menu-lineas span:last-child { width: 70%; justify-self: end; }

@media (min-width: 1024px) {
  .cabecera__barra { height: 76px; gap: clamp(1.5rem, 3vw, 3rem); }
  .cabecera__logo img { height: 34px; }
  .nav { display: block; }
  .cabecera__menu { display: none; }
}

/* ---------- Menú móvil (pantalla completa) ---------- */
.menu-movil {
  position: fixed; inset: 0 auto 0 0; z-index: 80;
  width: min(100%, 100vw);
  background: var(--noche);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-movil[hidden] { display: none; }
.menu-movil__marco {
  display: flex; flex-direction: column; gap: var(--e-6);
  min-height: 100%;
  padding: calc(var(--e-4) + env(safe-area-inset-top, 0px)) max(var(--margen), env(safe-area-inset-right, 0px)) calc(var(--e-7) + env(safe-area-inset-bottom, 0px)) max(var(--margen), env(safe-area-inset-left, 0px));
}
.menu-movil__cerrar {
  align-self: flex-end;
  min-height: 44px; min-width: 44px;
  padding: 0 var(--e-2);
  border: 0; background: none;
  color: var(--hueso-2);
  font-weight: 500;
  cursor: pointer;
}
.menu-movil__lista { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.menu-movil__lista .nav__enlace {
  font-family: var(--f-titular);
  font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: 1;
  color: var(--hueso);
  min-height: 56px;
}
.menu-movil__lista .nav__enlace::after { bottom: 6px; height: 2px; }
.menu-movil__postula { align-self: flex-start; margin-top: auto; }
.menu-movil.menu-movil--abierto .menu-movil__lista li { animation: menu-item 380ms var(--ease-salida) both; }
.menu-movil.menu-movil--abierto .menu-movil__lista li:nth-child(2) { animation-delay: 40ms; }
.menu-movil.menu-movil--abierto .menu-movil__lista li:nth-child(3) { animation-delay: 80ms; }
.menu-movil.menu-movil--abierto .menu-movil__lista li:nth-child(4) { animation-delay: 120ms; }
@keyframes menu-item { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.calmo .menu-movil.menu-movil--abierto .menu-movil__lista li { animation-name: menu-fundido; }
@keyframes menu-fundido { from { opacity: 0; } to { opacity: 1; } }

/* Bloqueo de scroll (menú, visor): lo pone sitio.js con dueño. */
html.scroll-bloqueado, html.scroll-bloqueado body { overflow: hidden; }

/* ---------- Pie ---------- */
.pie {
  position: relative;
  background: var(--noche);
  border-top: 1px solid var(--linea-noche);
  padding: var(--e-8) 0 calc(var(--e-5) + env(safe-area-inset-bottom, 0px));
  font-size: var(--t-chico);
  color: var(--hueso-2);
}
.pie__marco {
  width: var(--ancho-seguro); margin-inline: auto;
  display: grid; gap: var(--e-6);
}
.pie__marca {
  font-family: var(--f-titular); font-weight: 800; font-style: italic;
  font-size: 2rem; line-height: 1; color: var(--hueso);
}
.pie__lugar { margin-top: var(--e-3); max-width: 28ch; }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.pie__lista .nav__enlace { font-size: var(--t-chico); }
.pie__base {
  width: var(--ancho-seguro); margin: var(--e-7) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea-noche);
}
.pie__copy { color: var(--hueso-3); font-size: var(--t-nota); }
/* pie corto (/ficha/): solo la línea de base, sin filete doble */
.pie--corto { padding-top: var(--e-5); }
.pie--corto .pie__base { margin-top: 0; padding-top: 0; border-top: 0; }
.pie__pausa {
  min-height: 44px;
  padding: 0 var(--e-4);
  border: 1px solid var(--linea-noche);
  border-radius: var(--r-m);
  background: transparent;
  color: var(--hueso-2);
  font-size: var(--t-nota);
  cursor: pointer;
  transition: border-color var(--d-hover) var(--ease-suave), color var(--d-hover) var(--ease-suave), transform 100ms var(--ease-suave);
}
@media (hover: hover) and (pointer: fine) {
  .pie__pausa:hover { border-color: var(--hueso-3); color: var(--hueso); }
}
@media (min-width: 768px) {
  .pie__marco { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ---------- Calificar y cupos (portada y /postular/) ----------
   Se ve el mensaje de calificar; el contador de cupos está apagado (hidden) salvo que ajustes/publico
   traiga un tope activo con "mostrar". */
.cupos { display: grid; gap: var(--e-3); }
.cupos__texto { font-weight: 600; color: var(--hueso); }
.cupos__contador { color: var(--hueso-2); }
.cupos__contador[hidden] { display: none; }
.cupos__marcas { display: flex; flex-wrap: wrap; gap: 7px; }
.cupos__marcas[hidden] { display: none; }
.cupos__marca {
  width: 5px; height: 30px;
  border: 1px solid var(--hueso-3);
  border-radius: 1px;
}
.cupos__marca--ocupada { background: var(--sangre); border-color: var(--sangre); }

/* ---------- Páginas internas (/postular/, /ficha/, 404) ---------- */
.interna {
  min-height: var(--pantalla);
  padding: calc(64px + var(--e-8)) 0 var(--e-9);
  background:
    linear-gradient(180deg, rgb(61 3 4 / 0.28), transparent 42%),
    var(--noche);
}
.interna:focus { outline: none; }
.interna__marco { width: min(760px, 100% - 2 * var(--margen-seguro)); margin-inline: auto; display: grid; gap: var(--e-5); }
.interna__marco + .interna__marco { margin-top: var(--e-7); }
.interna__titulo {
  font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 5.5rem);
  line-height: var(--interlinea-titular);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.interna__titulo2 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); font-weight: 500; color: var(--hueso-2); }
.interna__bajada { max-width: 60ch; color: var(--hueso-2); }
.interna__respaldo { padding-top: var(--e-6); border-top: 1px solid var(--linea-noche); justify-items: start; }
.interna__respaldo p { max-width: 56ch; color: var(--hueso-2); }
.postulacion__datos { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); color: var(--hueso-2); font-size: var(--t-chico); }
@media (min-width: 1024px) { .interna { padding-top: calc(76px + var(--e-9)); } }
/* /ficha/ no lleva la cabecera fija: menos aire arriba */
.interna.interna--ficha { padding-top: var(--e-7); }

/* /postular/: el precio y para quién es, antes del formulario (una franja del informe, sobria) */
.postular-valor { padding: var(--e-7) 0 var(--e-8); background: var(--noche); border-top: 1px solid var(--linea-noche); }
.postular-valor__marco { width: min(760px, 100% - 2 * var(--margen-seguro)); margin-inline: auto; display: grid; gap: var(--e-4); justify-items: start; }
.postular-valor__planes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin: 0; width: 100%; }
.postular-valor__plan { display: grid; gap: 2px; min-width: 0; }
.postular-valor__plan dt { font-size: var(--t-nota); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hueso-3); }
.postular-valor__plan dd { margin: 0; color: var(--hueso-2); overflow-wrap: anywhere; }
.postular-valor__plan dd > span:first-child { font-family: var(--f-titular); font-weight: 800; font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--hueso); }
.postular-valor__plan--recomendado dd > span:first-child { color: var(--sangre); }
.postular-valor__ahorro { color: var(--hueso); font-weight: 600; white-space: nowrap; }
.postular-valor__para { display: grid; gap: var(--e-2); max-width: 60ch; color: var(--hueso-2); font-size: var(--t-chico); }
.postular-valor__rotulo { color: var(--hueso); font-weight: 600; }
.postular-valor__lista { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.postular-valor__lista li { position: relative; padding-left: calc(18px + var(--e-3)); }
/* la fibra corta de los datos de Miguel, una por ítem */
.postular-valor__lista li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 18px; height: 1.5px; background: var(--fibra-brillo); }
/* el formulario va primero (la invitación) y la franja de precios después: sin el alto de pantalla */
.interna--postular { min-height: 0; padding-bottom: var(--e-6); }
@media (min-width: 640px) { .postular-valor__planes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--e-6); } }


/* Aviso de privacidad: prosa del informe, sobria (mismo marco que las demás internas) */
.privacidad { gap: var(--e-6); }
.privacidad__bloque { display: grid; gap: var(--e-3); max-width: 64ch; }
.privacidad__titulo {
  font-family: var(--f-titular); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.05; color: var(--hueso);
}
.privacidad__bloque p, .privacidad__lista { color: var(--hueso-2); }
.privacidad__lista { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e-2); }
.privacidad__lista--limpia { padding-left: 0; list-style: none; }
.privacidad__lista strong { color: var(--hueso); font-weight: 600; }
.privacidad a, .pie__enlace { color: var(--hueso); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.privacidad__fecha { color: var(--hueso-3); font-size: var(--t-nota); }
.pie__enlace { color: var(--hueso-3); font-size: var(--t-nota); min-height: 44px; display: inline-flex; align-items: center; }

/* 404: una fibra cortada */
.nada { justify-items: start; }
.nada__fibra { width: min(560px, 100%); height: auto; margin-bottom: var(--e-5); overflow: visible; }
.nada__hebra { fill: none; stroke: var(--fibra-brillo); stroke-width: 3; stroke-linecap: round; }
.nada__hebra--2 { stroke: var(--fibra); stroke-width: 4; }
.nada__hebra--3 { stroke: var(--sangre); stroke-width: 2; }

/* ---------- Avisos ---------- */
.avisos { position: fixed; left: 50%; bottom: var(--e-5); z-index: 120; transform: translateX(-50%); display: grid; gap: var(--e-2); width: min(420px, 100% - 2 * var(--margen)); pointer-events: none; }
.avisos:empty { display: none; }
.aviso { padding: var(--e-3) var(--e-4); background: var(--noche-3); border: 1px solid var(--linea-noche); border-radius: var(--r-m); color: var(--hueso); pointer-events: auto; }

/* ---------- Modo calmo sin JS (el JS decide con ?movimiento) ---------- */
@media (prefers-reduced-motion: reduce) {
  html.sin-js *, html.sin-js *::before, html.sin-js *::after { transition-duration: 1ms !important; }
}

/* ---------- Revelados por tipo (sitio.js): la clase rev-pendiente pone el estado de partida y el
   gesto es una transición de CSS (EXPERIENCIA §5: un gesto por tipo de elemento). Sin JS no hay
   clases: todo se ve. En el modo calmo, solo opacidad. ---------- */
[data-rev="titular"].rev-pendiente { clip-path: polygon(-12% -25%, -12% -25%, -20% 125%, -20% 125%); transform: translateY(20px); }
[data-rev="texto"].rev-pendiente { opacity: 0; transform: translateY(12px); }
[data-rev="foto"].rev-pendiente { clip-path: polygon(0% 0%, 0% 0%, -14% 100%, -14% 100%); transform: scale(1.06); }
[data-rev="linea"].rev-pendiente { transform: scaleX(0); transform-origin: 0 50%; }
html.calmo [data-rev].rev-pendiente { opacity: 0; transform: none; clip-path: none; }
/* respaldo de accesibilidad (WCAG 2.4.7 y 2.4.11): lo que recibe el foco se ve aunque todavía no se
   haya revelado (sitio.js lo revela además al recibir el foco) */
[data-rev].rev-pendiente:focus-within { opacity: 1; transform: none; clip-path: none; }
[data-rev="titular"].rev-anim { clip-path: polygon(-12% -25%, 120% -25%, 112% 125%, -20% 125%); transition: clip-path 600ms var(--ease-salida), transform 600ms var(--ease-salida); }
[data-rev="texto"].rev-anim { transition: opacity var(--d-texto) var(--ease-texto), transform var(--d-texto) var(--ease-texto); }
[data-rev="foto"].rev-anim { clip-path: polygon(0% 0%, 114% 0%, 100% 100%, -14% 100%); transition: clip-path 900ms var(--ease-salida), transform 900ms var(--ease-salida); }
[data-rev="linea"].rev-anim { transform-origin: 0 50%; transition: transform 600ms var(--ease-salida); }
html.calmo [data-rev].rev-anim { clip-path: none; transition: opacity 400ms ease-out; }