/* DeHache Studio · web nueva (2026-10). Dirección de arte: 00-empresa/web-interno/DIRECCION.md
   Concepto: «la puerta de un local cerrado que da a un horizonte en calma».
   Base = versión fija (sin JS o con movimiento reducido). La animación del portal solo se activa
   con html.portal-activo, que pone main.js si el navegador la permite. */

/* ---------- Fuentes propias (subconjunto latino, OFL) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens (contraste medido con scripts/contraste.py) ---------- */
:root {
  --noche: #14141B;             /* fondo de portada y cierre */
  --texto-claro: #F2ECDD;       /* 15,55:1 sobre --noche */
  --texto-claro-suave: #A39C8C; /* 6,71:1 sobre --noche · solo sobre --noche */
  --oro: #C8A24E;               /* 7,62:1 sobre --noche; relleno del botón (texto --noche 7,62:1) */
  --oro-claro: #DDBE6E;         /* 10,18:1 sobre --noche · solo sobre --noche (antetítulo sobre el vídeo: peor caso medido ≥ 4,5) */
  --fondo: #F5F0E6;             /* crema de la marca */
  --superficie: #FBF8F1;
  --texto: #1B1B22;             /* 15,07:1 sobre --fondo */
  --texto-suave: #5C574D;       /* 6,31:1 sobre --fondo · solo sobre --fondo */
  --acento-linea: #A9802C;      /* 3,18:1 sobre --fondo (filetes y bordes, nunca texto) */
  --acento-texto: #8A6620;      /* 4,61:1 sobre --fondo · solo sobre --fondo */

  --serif: "Fraunces", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margen: clamp(1.25rem, 5vw, 4.5rem);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--noche); }
body {
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  color: var(--texto); background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--texto-claro); color: var(--noche); padding: .7rem 1rem; font-weight: 600;
}
.saltar:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: .8rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: 1rem;
  text-decoration: none; letter-spacing: .01em;
  transition: box-shadow .3s var(--curva), background-color .3s var(--curva);
}
.boton-oro { background: var(--oro); color: var(--noche); }
.boton-oro:hover, .boton-oro:focus-visible { box-shadow: 0 0 0 6px rgba(200, 162, 78, .22), 0 10px 40px rgba(200, 162, 78, .45); }
.boton-noche { background: var(--noche); color: var(--texto-claro); }
.boton-noche:hover, .boton-noche:focus-visible { box-shadow: 0 0 0 6px rgba(20, 20, 27, .14), 0 10px 40px rgba(200, 162, 78, .55); }
.enlace { font-weight: 500; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.enlace:hover { text-decoration-thickness: 2px; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem var(--margen);
}
.marca { display: block; width: clamp(132px, 15vw, 176px); }
/* Pastilla detrás del logo y de los capítulos: el fondo del vídeo cambia en cada fotograma (de
   negro a casi blanco), así que el contraste no puede depender de él. Calculado para el peor caso:
   noche (.88 sobre blanco puro ≈ #303037): crema 10:1, gris suave 4,75:1, oro 5,5:1; día (.9 sobre
   negro ≈ #DDD8CF): tinta 12:1, gris suave 5,0:1. Los capítulos no se atenúan con opacidad. Medido el 2-oct: sin pastilla, 1,64:1 y 1,29:1 al 75 % del recorrido. */
.marca, .menu, .portal-activo .portal-capitulos {
  padding: .45rem .8rem; border-radius: 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .4s var(--curva);
}
.cabecera[data-tema="noche"] .marca, .cabecera[data-tema="noche"] .menu,
.portal-activo .portal-capitulos[data-tema="noche"] { background: rgba(20, 20, 27, .88); }
.cabecera:not([data-tema="noche"]) .marca, .cabecera:not([data-tema="noche"]) .menu,
.portal-activo .portal-capitulos[data-tema="dia"] { background: rgba(245, 240, 230, .9); }

/* Menú de secciones: en escritorio, en una pastilla como el logo. En móvil no hay menú: la barra del
   pulgar lleva a la revisión y la página es una sola columna (reference/03). */
.menu { display: none; gap: 1.4rem; font-size: .9rem; font-weight: 500; }
.menu a { text-decoration: none; padding: .35rem 0; color: var(--texto); }
.menu a:hover { text-decoration: underline; text-underline-offset: .3em; }
.cabecera[data-tema="noche"] .menu a { color: var(--texto-claro); }
@media (min-width: 960px) { .menu { display: flex; } }
.marca img { width: 100%; height: auto; }
.marca-noche { display: none; }
.cabecera[data-tema="noche"] .marca-noche { display: block; }
.cabecera[data-tema="noche"] .marca-dia { display: none; }
.cabecera[data-tema="noche"] :focus-visible { outline-color: var(--oro); }

/* ---------- Portal: versión fija (base) ---------- */
.portal { position: relative; background: var(--noche); }
.portal-escena { position: relative; min-height: 100svh; overflow: hidden; display: grid; }
.portal-fondo, .portal-fondo img, .portal-lienzo, .portal-velo { position: absolute; inset: 0; width: 100%; height: 100%; }
.portal-fondo img { object-fit: cover; object-position: 50% 50%; }
.portal-fondo-inicio, .portal-lienzo, .portal-mar, .portal-linterna, .portal-luz, .portal-velo, .portal-crema, .portal-pista, .portal-capitulos, .portal-salida { display: none; }

.portal-texto {
  position: relative; z-index: 2; align-self: start;
  padding: clamp(7rem, 16vh, 10rem) var(--margen) 3rem; max-width: 52rem;
}
.antetitulo { font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acento-texto); }
.titular {
  font-family: var(--serif); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -.02em;
  margin: .8rem 0 1.2rem; color: var(--texto); text-wrap: balance;
}
.entradilla { max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--texto); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.8rem; }
.frase-final {
  font-family: var(--serif); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: 1.05; letter-spacing: -.02em; color: var(--texto);
}

/* ---------- Portal: animación por scroll (solo con html.portal-activo) ---------- */
.portal-activo .portal { height: 560vh; }   /* 3-oct: +transición del cielo (antes 420vh) */
.portal-activo .portal-escena { position: sticky; top: 0; height: 100svh; min-height: 0; }
.portal-activo .portal-fondo-inicio, .portal-activo .portal-lienzo,
.portal-activo .portal-velo, .portal-activo .portal-pista { display: block; }
.portal-activo .portal-capitulos { display: flex; }
.portal-activo .portal-fondo-final { display: none; }
.portal-activo .portal-lienzo { z-index: 1; object-fit: cover; object-position: 50% 50%; }
.portal-activo [data-apagado] { display: none !important; }
/* Bucle del mar: encima del lienzo, mismo encuadre («cover» centrado), entra con un fundido */
.portal-activo .portal-mar {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity .8s var(--curva);
}
.portal-activo .portal-mar[data-visible] { opacity: 1; }
.portal-activo .portal-crema {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--fondo); opacity: var(--crema, 0);
}
/* Linterna: solo con ratón (hover + puntero fino) y cuando main.js la enciende (data-linterna).
   Intensidad baja y apagada sobre el texto: no puede bajarle el contraste. */
@media (hover: hover) and (pointer: fine) {
  .portal-activo[data-linterna] .portal-linterna {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(circle 260px at var(--lx, 50%) var(--ly, 50%),
                rgba(255, 214, 150, .34) 0%, rgba(232, 186, 110, .14) 45%, rgba(200, 162, 78, 0) 100%);
    mix-blend-mode: screen; opacity: var(--linterna, 0); transition: opacity .4s var(--curva);
    /* Se apaga sobre la columna del texto de entrada (medido: sin esto, el antetítulo bajaba a 4,04:1 a 1280×720) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 48%, #000 68%);
            mask-image: linear-gradient(90deg, transparent 0, transparent 48%, #000 68%);
  }
}
/* Luz de la puerta: resplandor cálido centrado en la puerta, en modo «screen» (solo aclara).
   Intensidad máxima .6 al abrirse del todo la puerta: se nota sin quemar la imagen. */
.portal-activo .portal-luz {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 30% 48% at 50% 52%, rgba(255, 228, 172, 1) 0%,
              rgba(242, 202, 128, .55) 22%, rgba(200, 162, 78, .12) 45%, rgba(200, 162, 78, 0) 62%);
  mix-blend-mode: screen; opacity: var(--luz, 0);
}
.portal-pausa {
  position: absolute; z-index: 3; left: var(--margen); bottom: 1.4rem; min-height: 44px;
  display: inline-flex; align-items: center; padding: .45rem 1rem; border-radius: 999px;
  border: 1px solid var(--acento-linea); background: rgba(245, 240, 230, .9); color: var(--texto);
  font: 600 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.portal-pausa[hidden] { display: none; }
/* Velo oscuro de noche bajo el texto de entrada: se apaga al cruzar la puerta. 2-oct (v5): más
   denso porque la puerta iluminada de la izquierda caía bajo el titular (2,75:1 a 1280x720). */
.portal-activo .portal-velo {
  z-index: 1; opacity: var(--velo, 1);
  background: linear-gradient(90deg, rgba(20, 20, 27, .86) 0%, rgba(20, 20, 27, .76) 40%, rgba(20, 20, 27, .36) 60%, rgba(20, 20, 27, 0) 80%);
}
.portal-activo .portal-texto { position: absolute; inset: 0 auto auto 0; }
.portal-activo .portal-entrada { opacity: var(--entrada, 1); }
.portal-activo .portal-entrada .antetitulo { color: var(--oro-claro); }
.portal-activo .portal-entrada .titular,
.portal-activo .portal-entrada .entradilla { color: var(--texto-claro); }
.portal-activo .portal-entrada .enlace { color: var(--texto-claro); }
.portal-activo .portal-entrada :focus-visible { outline-color: var(--oro); }
.portal-activo .portal-salida { display: block; opacity: var(--salida, 0); }
.portal-activo [data-oculto] { visibility: hidden; }

.portal-pista {
  position: absolute; z-index: 2; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-claro-suave);
  opacity: var(--pista, 1); transition: opacity .4s;
}
.portal-capitulos {
  position: absolute; z-index: 2; right: var(--margen); bottom: 1.4rem; list-style: none; padding: 0; margin: 0;
  display: flex; gap: 1.2rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-claro-suave);
}
.portal-capitulos li { transition: color .4s; }
.portal-capitulos li[data-activo] { color: var(--oro); font-weight: 600; text-decoration: underline; text-underline-offset: .35em; }
.portal-capitulos[data-tema="dia"] { color: var(--texto-suave); }
.portal-capitulos[data-tema="dia"] li[data-activo] { color: var(--texto); }

/* ---------- Secciones (ritmo noche / día: DIRECCION.md · Escala y ritmo) ---------- */
.seccion { padding: clamp(4.5rem, 10vw, 8rem) var(--margen); scroll-margin-top: 4.5rem; }
.envoltura { max-width: 72rem; margin: 0 auto; }
.envoltura-estrecha { max-width: 46rem; }
.dia { background: var(--fondo); color: var(--texto); }
.seccion-superficie { background: var(--superficie); }
.noche { background: var(--noche); color: var(--texto-claro); }
.noche .antetitulo { color: var(--oro); }
.noche :focus-visible { outline-color: var(--oro); }
.antetitulo-dia { color: var(--acento-texto); }
.titulo-dia, .titulo-noche {
  text-wrap: balance;
  font-family: var(--serif); font-weight: 500; font-optical-sizing: auto;
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.015em; margin: .8rem 0 1.2rem; max-width: 24ch;
}
.texto-dia { max-width: 40rem; color: var(--texto-suave); }
.texto-noche { max-width: 40rem; color: var(--texto-claro); }
.texto-pequeno { font-size: .92rem; color: var(--texto-claro-suave); margin-top: 1rem; }
.noche .enlace, .noche a.correo { color: var(--texto-claro); }
h3 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.2; }

/* Lo que hacemos: tres líneas con filete que se enciende */
.lineas { list-style: none; padding: 0; margin: 2.6rem 0 0; display: grid; gap: 2rem; }
@media (min-width: 800px) { .lineas { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; } }
@media (min-width: 1100px) { .lineas-servicios { grid-template-columns: repeat(4, 1fr); } }
.nota-presupuesto { margin-top: 2rem; }
.linea { border-top: 2px solid #D9D1C1; padding-top: 1.2rem; transition: border-color .5s var(--curva); }
.linea p { margin-top: .6rem; color: var(--texto-suave); }
.nota-clinicas { margin-top: 2.6rem; max-width: 44rem; padding: 1rem 1.2rem; border-left: 2px solid var(--acento-linea); background: var(--fondo); }

/* Encendido: el filete gris pasa a oro (sin JS ya está encendido) */
.encendido-activo [data-encender] { border-color: #D9D1C1; }
.linea, .encendido-activo [data-encender][data-encendido] { border-color: var(--acento-linea); }

/* Precios */
.tarifas { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 1.2rem; }
@media (min-width: 800px) { .tarifas { grid-template-columns: repeat(2, 1fr); } }
.tarifa { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid #E3DBCB; border-radius: 16px; padding: 1.5rem 1.4rem; }
.tarifa p { color: var(--texto-suave); margin-top: .5rem; }
.tarifa-destacada { border-color: var(--acento-linea); border-width: 2px; }
.tarifa-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tarifa-cabeza h3 { font-size: 1.3rem; }
.tarifa .tarifa-precio { margin: 0; font-family: var(--serif); font-size: 1.9rem; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarifa .tarifa-alternativa { color: var(--texto); }
.tarifa .tarifa-acciones { margin-top: auto; padding-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.2rem; }
.boton-pequeno { min-height: 44px; padding: .55rem 1.1rem; font-size: .92rem; }
.boton-borde { border: 1.5px solid var(--texto); color: var(--texto); background: transparent; }
.boton-borde:hover, .boton-borde:focus-visible { background: var(--texto); color: var(--fondo); }
.condiciones { margin: 2rem 0 0; padding-left: 1.2rem; max-width: 46rem; color: var(--texto-suave); display: grid; gap: .5rem; }

/* La revisión gratuita (noche): tres pasos en fila */
.revision-intro { margin-bottom: 2.4rem; }
.revision-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; }
@media (min-width: 860px) { .revision-pasos { grid-template-columns: repeat(3, 1fr); gap: 2.6rem; } }
.revision-pasos > li { border-top: 1px solid #3A3A44; padding-top: 1.2rem; }
.revision-num {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: 50%; border: 1px solid var(--oro); color: var(--oro); font-weight: 600; font-size: .9rem;
}
.subtitulo-noche { color: var(--texto-claro); margin: .9rem 0 .5rem; font-size: 1.25rem; }
.lista-noche { padding-left: 1.1rem; display: grid; gap: .4rem; color: var(--texto-claro); }
.revision-pie { margin-top: 2.6rem; display: grid; gap: 1rem; align-items: center; }
@media (min-width: 860px) { .revision-pie { grid-template-columns: auto 1fr; gap: 2.4rem; } }
.revision-pie .acciones { margin: 0; }
.revision-pie .texto-pequeno { margin: 0; max-width: 46rem; }

/* Escaparates (componente propio: DIRECCION.md) */
.escaparates { display: grid; gap: 3rem; margin-top: 2.4rem; }
@media (min-width: 800px) { .escaparates { grid-template-columns: 1fr 1fr; gap: 2.6rem; } }
.escaparate { margin: 0; }
.escaparate-toldo {
  height: 22px; border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(90deg, var(--acento-linea) 0 28px, var(--superficie) 28px 56px);
  border: 1px solid var(--acento-linea); border-bottom: 0;
}
.escaparate-cristal {
  position: relative; background: var(--noche); border: 1px solid var(--acento-linea);
  padding: 10px; padding-bottom: 2.6rem; border-radius: 0 0 6px 6px;
}
.escaparate-escritorio { width: 100%; height: auto; border-radius: 3px; transition: filter .6s var(--curva); }
.escaparate-movil {
  position: absolute; right: 14px; bottom: 12px; width: 26%; max-width: 120px; height: auto;
  border-radius: 10px; border: 3px solid var(--noche); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: filter .6s var(--curva);
}
.encendido-activo .escaparate:not([data-encendido]) img { filter: brightness(.5) saturate(.4); }
.escaparate figcaption { margin-top: 1rem; color: var(--texto-suave); max-width: 36rem; }
.escaparate figcaption strong { color: var(--texto); }
.escaparate-etiqueta {
  display: inline-block; margin-right: .5rem; padding: .15rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--acento-texto); color: var(--acento-texto);
}
.escaparate-enlace { display: block; width: fit-content; margin-top: .5rem; padding: .35rem 0; color: var(--texto); font-weight: 600; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.escaparate-etiqueta-demo { background: var(--texto); color: var(--fondo); border-color: var(--texto); }

/* Cómo trabajamos */
.pasos { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 1.6rem; counter-reset: paso; }
@media (min-width: 800px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.pasos li { counter-increment: paso; border-top: 2px solid var(--acento-linea); padding-top: 1rem; transition: border-color .5s var(--curva); }
.pasos li::before { content: "0" counter(paso); display: block; font-size: .8rem; font-weight: 600; letter-spacing: .14em; color: var(--acento-texto); margin-bottom: .4rem; }
.pasos p { margin-top: .5rem; color: var(--texto-suave); }

/* Preguntas */
.preguntas { margin-top: 2rem; border-top: 1px solid #D9D1C1; }
.preguntas details { border-bottom: 1px solid #D9D1C1; }
.preguntas summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.2rem 1.1rem 0; position: relative;
  font-weight: 600; font-size: 1.05rem; min-height: 48px;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--acento-texto);
}
.preguntas details[open] summary::after { content: "–"; }
/* El navegador ya oculta la respuesta cerrada; display:none lo deja explícito para los medidores,
   que si no la miden contra lo que haya en esa posición de la pantalla (falso fallo A3, 2-oct). */
.preguntas details:not([open]) > p { display: none; }
.preguntas details p { padding: 0 0 1.2rem; color: var(--texto-suave); max-width: 40rem; }

/* Cierre y pie */
.seccion-cierre { text-align: left; }
.seccion-cierre .acciones { margin: 1.6rem 0 1.2rem; }
.titulo-cierre { max-width: 16ch; }

/* ---------- Formulario de solicitud (#contacto, sobre --noche). Netlify Forms; plantilla de la skill
   (templates/formulario.css) adaptada al fondo oscuro. Contraste medido: --error 9,03:1 sobre --noche
   y 8,24:1 sobre --campo; borde de los campos 3,6:1 (no es texto: mínimo 3:1). ---------- */
.formulario {
  --campo: #1D1D26; --borde-campo: #7A7466; --error: #FF9C85;
  display: grid; gap: 1.15rem; margin: 2rem 0 1.6rem; color-scheme: dark; scroll-margin-top: 6rem;
}
.campos-dos { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .campos-dos { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: .35rem; align-content: start; }
.campo label { font-weight: 600; }
.campo-opcional, .campo-ayuda, .formulario-rgpd { font-weight: 400; color: var(--texto-claro-suave); font-size: .9375rem; }
.campo-ayuda, .formulario-rgpd { margin: 0; }
.formulario > .campo-ayuda { margin-top: -.6rem; }
.campo input:not([type="checkbox"]), .campo select, .campo textarea {
  font: inherit; color: var(--texto-claro); background: var(--campo);
  border: 1.5px solid var(--borde-campo); border-radius: .5rem; padding: .7rem .85rem; min-height: 48px; width: 100%;
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--texto-claro-suave); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--oro); outline-offset: 2px; border-color: var(--oro);
}
.campo [aria-invalid="true"] { border-color: var(--error); border-width: 2.5px; }
.campo-error { color: var(--error); font-weight: 600; margin: 0; }
.campo-error:empty { display: none; }
.campo-casilla { grid-template-columns: auto 1fr; align-items: start; column-gap: .75rem; }
.campo-casilla input { width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; accent-color: var(--oro); }
.campo-casilla label { font-weight: 400; }
.campo-casilla .campo-error { grid-column: 1 / -1; }
.formulario a { display: inline-block; min-height: 24px; }
.formulario .formulario-acciones { margin: .4rem 0 0; }
.formulario button[disabled] { opacity: .7; cursor: progress; }
.formulario-estado { font-weight: 600; margin: 0; }
.formulario-estado:empty { display: none; }
.formulario[data-enviado] .formulario-estado { color: var(--oro-claro); }
.formulario-trampa { display: none !important; }
.formulario-alternativa { color: var(--texto-claro-suave); }
.pie { background: var(--noche); color: var(--texto-claro-suave); padding: 2.4rem var(--margen); border-top: 1px solid #2A2A33; font-size: .92rem; }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.pie-legal { display: flex; gap: 1.4rem; }
.pie-legal a { display: inline-block; padding: .7rem 0; }
.pie a { color: var(--texto-claro); }
.pie :focus-visible { outline-color: var(--oro); }
.pie-copia { margin-left: auto; }

/* Páginas legales y 404 */
.pagina-legal { background: var(--fondo); }
.legal-cabecera { padding: 1.4rem var(--margen); }
.legal { max-width: 44rem; margin: 0 auto; padding: 1rem var(--margen) 4rem; }
.legal h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 5vw, 3rem); margin: 1rem 0 1.4rem; }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; margin: 2rem 0 .6rem; }
.legal p, .legal li { color: var(--texto); margin-bottom: .6rem; }
.legal-datos { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; }
.legal-datos dt { font-weight: 600; }
.legal-datos dd { margin: 0; }
.legal-fecha { color: var(--texto-suave); margin-top: 2rem; }
.legal-pie { padding: 2rem var(--margen); text-align: center; color: var(--texto-suave); }

/* ---------- Barra del pulgar (móvil) ---------- */
.barra-pulgar { display: none; }
@media (max-width: 700px) {
  .barra-pulgar {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 40;
    padding: .65rem var(--margen) calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(20, 20, 27, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .barra-pulgar .boton { flex: 1; min-height: 48px; }
  .pie { padding-bottom: 6.5rem; }      /* que la barra no tape el final */
  html { scroll-padding-bottom: 6rem; }  /* ni el foco al tabular (A6b) */
  .portal-pista { bottom: 5.4rem; }
  .portal-capitulos { bottom: 8rem; }
  .portal-pausa { left: auto; right: var(--margen); bottom: 11rem; }
}
@media (max-width: 700px) {
  .portal-texto { padding-top: 6.5rem; }
  .portal-capitulos { left: var(--margen); right: auto; gap: .9rem; flex-wrap: nowrap; }
  .boton-cabecera { padding: .6rem 1rem; font-size: .92rem; }
  .portal-activo .portal-velo {
    background: linear-gradient(180deg, rgba(20, 20, 27, .8) 0%, rgba(20, 20, 27, .66) 60%, rgba(20, 20, 27, .2) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}