/* ══════════════════════════════════════════════════════════════════
   MIS RAICES · Los Molinos, costa de Valdivia — restaurante
   Demo 141. Identidad: «ROCA, ESPUMA Y MEJILLON».

   LA DIRECCION EN UNA FRASE
   La piedra mojada de la orilla: gris roca, encaje de espuma y el
   azul-negro tornasolado del interior de una concha de chorito.
   Transmite «esto viene de acá, de esta orilla», que es justo lo que
   busca alguien que maneja hasta la costa a comer marisco.

   LA PALETA
   --roca    #262B2C  gris roca, frio con verde adentro
   --espuma  #F1F4F2  blanco de espuma (verdoso, no azul)
   --nacar   #A8C2E0  el destello de la concha (7,8:1 sobre roca)

   DESLINDE OBLIGATORIO — el tornasol de la 132 (Automotriz Coba) era
   PELICULA DE ACEITE sobre negro petroleo: mecanico, sucio, con
   arcoiris completo. Este es NACAR: organico, frio, y el arcoiris
   apenas se insinua en violeta y verde. Y sobre todo: alli el tornasol
   cubria fondos enteros; aca vive en franjas de pocos pixeles —el
   filo de la concha, la linea bajo los titulares— porque una concha
   tornasola en el BORDE, no en toda la superficie.

   EL TRIO
   · display · Lustria — serif de remates anchos, con peso. Nueva en el
     registro. Se eligio ancha a proposito para deslindarse de la 140,
     que es la vecina inmediata y usa una display FINA (Rosarivo).
   · cuerpo  · Catamaran — humanista variable, un solo uso previo.
   · dato    · Nova Mono — A LA ALTURA DE LA DEMO 141 EL CATALOGO DE
     MONOS LEGIBLES ESTA AGOTADO: todas las buenas van entre 5 y 7
     usos. Nova Mono es la menos repetida (3) y ademas es la que
     mejor sirve al calendario: sus formas geometricas de ancho fijo
     hacen que las doce letras de los meses queden como una regla.
     Esto se anota para que la proxima sesion no lo trate como
     descuido.

   LA CABECERA (107ª del oficio) — LA CONCHA
   El abanico: semicirculo con cinco lineas radiales, dibujado con un
   repeating-conic-gradient. Cero imagenes.

   EL FONDO — LA ESPUMA QUE SE RETIRA
   Una lengua de espuma entra en diagonal por la esquina baja y SE
   RECOGE, dejando un brillo que se apaga.
   DESLINDE con la 86 (la marea): alli el nivel del agua SUBIA Y
   BAJABA tras un ojo de buey, como una marca de nivel. Aca es el
   ENCAJE de la orilla: avanza, se detiene y se retira.
   Reduced-motion: se esconde. Una espuma congelada no parece espuma,
   parece una mancha.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --roca:       #262B2C;
  --roca-2:     #333A3B;
  --roca-3:     #434B4C;
  --espuma:     #F1F4F2;
  --espuma-2:   #DDE3E1;
  --claro-2:    #B4C0BE;   /* 9,0:1 sobre roca */
  --nacar:      #A8C2E0;   /* 7,8:1 sobre roca */
  --nacar-osc:  #2C4A72;   /* 8,1:1 sobre espuma */
  --violeta:    #8E7BB5;   /* solo destello decorativo */
  --verde:      #4E9080;   /* solo destello decorativo */
  --linea:      #D3DAD8;
  --linea-osc:  #3A4242;

  --display: 'Lustria', Georgia, 'Times New Roman', serif;
  --cuerpo:  'Catamaran', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Nova Mono', ui-monospace, 'Consolas', monospace;

  /* El filo tornasolado: el unico lugar donde el nacar se ve entero.
     Va en franjas de 2-3 px, nunca de fondo. */
  --filo: linear-gradient(90deg,
    var(--nacar-osc) 0%, var(--violeta) 32%, var(--nacar) 58%,
    var(--verde) 78%, var(--nacar-osc) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--espuma);
  color: var(--roca);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.66;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

::selection { background: var(--nacar-osc); color: var(--espuma); }
a { color: var(--nacar-osc); }
:focus-visible { outline: 2px solid var(--nacar-osc); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--roca);
  color: var(--claro-2);
  padding: .8rem clamp(1rem, 5vw, 4rem);
  font-size: .82rem;
  line-height: 1.5;
}
.propuesta p { margin: 0; }
.propuesta__que { color: var(--espuma); }
.propuesta__que b { font-weight: 700; }
.propuesta__gancho { margin-top: .25rem !important; max-width: 62ch; }

/* ─────────── cabecera fantasma ───────────
   Solida por defecto; el JS le agrega la transparencia. */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 5vw, 4rem);
  background: var(--espuma);
  border-bottom: 1px solid var(--linea);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(241, 244, 242, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--roca); margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.3rem; }

/* ── LA CONCHA — el abanico ──
   Semicirculo (radio completo arriba, plano abajo) relleno con lineas
   radiales cada 36°: cinco lineas dentro de los 180° del abanico. */
.concha {
  position: relative;
  width: 22px; height: 11px;
  flex: 0 0 auto;
  border-radius: 22px 22px 0 0 / 11px 11px 0 0;
  background:
    repeating-conic-gradient(from 180deg at 50% 100%,
      var(--roca) 0deg 1.2deg, transparent 1.2deg 36deg),
    var(--nacar-osc);
  box-shadow: inset 0 0 0 1px var(--roca);
}
.concha::after {          /* la charnela: el punto de union, abajo */
  content: ''; position: absolute;
  left: 50%; bottom: -2px; width: 5px; height: 3px; margin-left: -2.5px;
  border-radius: 0 0 3px 3px;
  background: var(--roca);
}

.cab__nav { display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--roca-3);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.cab__nav a:hover { color: var(--nacar-osc); border-bottom-color: var(--nacar-osc); }
@media (max-width: 48rem) { .cab__nav { display: none; } }

.cab__res {
  text-align: right; text-decoration: none; line-height: 1.15;
  padding-left: 1.1rem; border-left: 1px solid var(--linea);
}
.cab__res-rot {
  display: block; font-family: var(--dato);
  font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--roca-3);
}
.cab__res-num {
  display: block; font-family: var(--display);
  font-size: 1.05rem; color: var(--nacar-osc);
}
.cab__res:hover .cab__res-num { text-decoration: underline; }

/* ═══════════ PORTADA ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--roca);
  color: var(--espuma);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 46rem); }

.sitio {
  font-family: var(--dato);
  font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nacar);
  margin-bottom: 1.4rem;
}
.portada h1 {
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  line-height: 1.0;
  letter-spacing: -.015em;
  margin-bottom: 1.5rem;
  position: relative;
}
.portada h1::after {     /* el filo tornasolado: 3 px, y sólo acá */
  content: ''; display: block;
  width: 6rem; height: 3px; margin-top: 1.4rem;
  background: var(--filo);
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.18rem);
  color: var(--claro-2);
  max-width: min(92vw, 36rem);
  margin-bottom: 2.2rem;
}
.specs { display: flex; flex-wrap: wrap; gap: 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato);
  font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: .2rem;
}
.spec dd {
  margin: 0; font-family: var(--display);
  font-size: 1.7rem; line-height: 1; color: var(--espuma);
}

/* ── LA ORILLA — la espuma que entra y se recoge ──
   Dos capas: la lengua (masa blanca difusa que avanza en diagonal) y
   el brillo (lo que queda mojado y se apaga). */
.orilla {
  position: absolute;
  left: -12%; bottom: -14%;
  width: 78%; height: 52%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.orilla__lengua,
.orilla__brillo {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 100%;
}
.orilla__lengua {
  background:
    radial-gradient(58% 46% at 34% 78%, rgba(241, 244, 242, .30), rgba(241, 244, 242, 0) 72%),
    radial-gradient(40% 34% at 62% 88%, rgba(241, 244, 242, .22), rgba(241, 244, 242, 0) 74%),
    radial-gradient(30% 26% at 18% 92%, rgba(168, 194, 224, .18), rgba(168, 194, 224, 0) 72%);
  transform: translate(-26%, 20%);
}
.orilla__brillo {
  background: radial-gradient(64% 30% at 44% 92%, rgba(168, 194, 224, .22), rgba(168, 194, 224, 0) 70%);
  opacity: 0;
}
.js .orilla__lengua { animation: avanza 11s cubic-bezier(.32, .06, .2, 1) infinite; }
.js .orilla__brillo { animation: seca   11s ease-out infinite; }

/* Avanza rapido (la ola llega de golpe) y se retira lento (el agua se
   escurre). Por eso la curva no es simetrica. */
@keyframes avanza {
  0%      { transform: translate(-26%, 20%); opacity: 0; }
  14%     { transform: translate(4%, -2%);   opacity: 1; }
  26%     { transform: translate(8%, -5%);   opacity: 1; }
  62%     { transform: translate(-22%, 16%); opacity: .5; }
  76%,100%{ transform: translate(-26%, 20%); opacity: 0; }
}
@keyframes seca {
  0%, 18% { opacity: 0; }
  30%     { opacity: 1; }
  70%     { opacity: .35; }
  86%,100%{ opacity: 0; }
}

/* ═══════════ LA PIEZA FIRMA — ESTRUCTURA K ═══════════ */
.mar {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--espuma);
}
.mar__cabecera { max-width: min(100%, 48rem); margin-bottom: 2.6rem; }

.antetitulo {
  font-family: var(--dato);
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--roca-3);
  margin-bottom: .8rem;
}
.antetitulo--claro { color: var(--nacar); }

.mar h2, .vista h2 {
  font-size: clamp(2.1rem, 5.6vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.06rem;
  color: var(--roca-3);
  max-width: min(100%, 38rem);
  margin-bottom: 1.6rem;
}
.entrada em { font-style: italic; }

/* ── la leyenda de los cuatro estados ── */
.leyenda {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  font-family: var(--dato);
  font-size: .74rem;
  color: var(--roca-3);
}
.leyenda li { display: flex; align-items: center; gap: .45rem; }
.leyenda .m { width: 1.15rem; height: 1.15rem; }

/* ── el calendario: doce letras, un mes cada una ── */
.calendario { display: flex; gap: 2px; flex: 0 0 auto; }
.m {
  display: flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem;
  font-family: var(--dato);
  font-size: .68rem;
  line-height: 1;
  border-radius: 2px;
}
.m--si    { background: var(--roca);    color: var(--espuma); }
.m--hay   { background: var(--espuma-2); color: var(--roca-3); }
.m--veda  {                              color: var(--roca-3);
  background: repeating-linear-gradient(-45deg,
    var(--espuma-2) 0 3px, transparent 3px 6px);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.m--falta { color: #5E6867; background: transparent;
  box-shadow: inset 0 0 0 1px var(--linea); }

/* ── las filas ── */
.filas { list-style: none; margin: 0 0 2.4rem; padding: 0; }
.fila { border-top: 1px solid var(--linea); }
.filas li:last-child .fila { border-bottom: 1px solid var(--linea); }

.fila summary {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
}
.fila summary::-webkit-details-marker { display: none; }
.fila summary:hover .fila__nombre { color: var(--nacar-osc); }

.fila__nombre {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  flex: 1 1 auto;
  min-width: 0;
}
.fila__resumen {
  font-family: var(--dato);
  font-size: .76rem;
  color: var(--roca-3);
  text-align: right;
  flex: 0 0 auto;
  width: 8.5rem;
}
/* El triangulito propio: gira al abrir. */
.fila summary::after {
  content: ''; flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--roca-3);
  border-bottom: 1.5px solid var(--roca-3);
  transform: rotate(45deg);
  margin-top: -4px;
}
.js .fila summary::after { transition: transform .2s ease; }
.fila[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }

.fila__cuerpo {
  padding: 0 0 1.4rem;
  max-width: min(100%, 44rem);
  border-left: 3px solid transparent;
  border-image: var(--filo) 1;    /* el filo de nacar marca lo abierto */
  padding-left: 1.1rem;
}
.fila__cuerpo p { color: var(--roca-3); font-size: .98rem; }
.fila__cuerpo p:last-child { margin-bottom: 0; }
.fila__falta { font-size: .94rem !important; }

@media (max-width: 46rem) {
  .fila summary { flex-wrap: wrap; gap: .55rem .8rem; }
  .fila__nombre { flex: 1 1 100%; order: 1; }
  .calendario   { order: 2; }
  .fila__resumen { order: 3; text-align: left; width: auto; flex: 1 1 auto; }
  .fila summary::after { order: 4; }
  .m { width: 1.2rem; height: 1.2rem; font-size: .64rem; }
}

.falta {
  font-family: var(--dato);
  font-size: .9em;
  color: var(--nacar-osc);
  border-bottom: 1px dashed var(--nacar-osc);
}
/* EL FONDO DECIDE EL TONO: sobre roca oscura el azul nacar oscuro
   mide 1,6:1 y desaparece. Toda zona oscura usa la variante clara. */
.portada .falta,
.vista .falta { color: var(--nacar); border-bottom-color: var(--nacar); }

.ojo {
  background: var(--espuma-2);
  border-left: 3px solid var(--roca);
  padding: 1.2rem 1.4rem;
  max-width: min(100%, 46rem);
}
.ojo p { margin: 0; font-size: .96rem; color: var(--roca-2); }

/* ═══════════ LA MESA CON VISTA ═══════════ */
.vista {
  background: var(--roca);
  color: var(--espuma);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.vista__cuerpo { max-width: min(100%, 48rem); }
.vista .entrada { color: var(--claro-2); }

.sub {
  font-size: 1.45rem;
  margin: 2.6rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea-osc);
}

.huecos { margin: 0; }
.hueco {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .3rem 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linea-osc);
}
.hueco:last-child { border-bottom: 1px solid var(--linea-osc); }
.huecos dt {
  font-family: var(--dato);
  font-size: .78rem; letter-spacing: .06em;
  color: var(--claro-2);
  align-self: start;
  padding-top: .15rem;
}
.huecos dd { margin: 0; }
.hueco__pq {
  display: block;
  font-size: .92rem;
  color: var(--claro-2);
  margin-top: .35rem;
}
@media (max-width: 40rem) { .hueco { grid-template-columns: 1fr; } }

/* ── la reserva (T5) ── */
.reservar { margin-top: 1rem; max-width: min(100%, 34rem); }
.reservar__intro { color: var(--claro-2); font-size: .98rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.campo--ancho { grid-column: 1 / -1; }
@media (max-width: 34rem) { .form { grid-template-columns: 1fr; } }

.campo label {
  display: block;
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: .4rem;
}
.opcional { text-transform: none; letter-spacing: .02em; }
.campo input {
  width: 100%;
  font-family: var(--cuerpo);
  font-size: 1rem;
  color: var(--espuma);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--claro-2);
  border-radius: 0;
  padding: .5rem 0;
  -webkit-appearance: none; appearance: none;
}
/* El gris del placeholder medía 4,01:1 sobre --roca: es texto de 1 rem
   y no llegaba al 4,5 de AA. #8A9694 da 4,80:1 y sigue leyéndose como
   pista, no como valor escrito. Corregido el 10-09-2026. */
.campo input::placeholder { color: #8A9694; }
.campo input:focus { outline: none; border-bottom-color: var(--nacar); border-bottom-width: 2px; }

.resumen {
  grid-column: 1 / -1;
  font-family: var(--dato);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--espuma);
  background: var(--roca-2);
  border-left: 2px solid var(--nacar);
  padding: .9rem 1rem;
  margin: .6rem 0 0;
}
.boton {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-block;
  font-family: var(--cuerpo);
  font-weight: 700;
  font-size: .95rem;
  color: var(--roca);
  background: var(--nacar);
  text-decoration: none;
  padding: .8rem 1.6rem;
  border-radius: 2px;
}
.boton:hover { background: var(--espuma); }
.reservar__nota { grid-column: 1 / -1; font-size: .86rem; color: var(--claro-2); margin: 0; }

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno {
  background: var(--espuma-2);
  color: var(--roca);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 2rem; }
.dueno__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.dueno h3 {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nacar-osc);
  margin-bottom: .5rem;
}
.dueno p { color: var(--roca-3); font-size: .96rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 700;
  color: var(--nacar-osc);
  text-decoration: none;
  border-bottom: 1px solid var(--nacar-osc);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--roca); border-bottom-color: var(--roca); }

.pie {
  background: var(--roca);
  color: var(--claro-2);
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  font-size: .8rem;
}
.pie p { margin: 0; max-width: 66ch; }

/* ═══════════ APARICIONES ═══════════ */
.js .rev { opacity: 0; transform: translateY(16px); }
.js .rev.ok { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

@media (prefers-reduced-motion: reduce) {
  /* La espuma SE ESCONDE, no se congela: una ola detenida no parece
     agua, parece una mancha clara sin explicacion. */
  .orilla { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LAS IMÁGENES DE RUBRO — seis tratamientos
   ══════════════════════════════════════════════════════════════════
   La página no puede ser texto sobre fondo plano de arriba abajo. Van
   seis apariciones distintas, para que el ojo no vea siempre lo mismo:
   portada disuelta, aura de color, media pantalla, cita a sangre, tira
   de tres, y la galería con las fotos propias del negocio.

   LA REGLA: la foto no se ensucia para poder leer encima. Lo que
   sostiene el contraste es un gradiente por zona. La ÚNICA excepción es
   el aura, donde el desenfoque no es un parche sino el efecto entero.

   Procedencia de cada archivo: imagenes/FUENTES.txt
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · PORTADA ── */
/* position/isolation acá y no heredadas: hay demos cuya .portada no es
   posicionada, y entonces el .portada__foto absoluto se cuelga del body
   y tapa el titular entero. El z-index del texto va por lo mismo. */
.portada--foto { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { position: relative; z-index: 2; max-width: 40rem; }
.portada__foto { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.portada__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 54%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(38,43,44,1) 0%, rgba(38,43,44,1) 26%,
              rgba(38,43,44,.70) 42%, rgba(38,43,44,.28) 62%, rgba(38,43,44,.08) 80%,
              rgba(38,43,44,0) 94%);
}
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: respira 46s ease-in-out infinite alternate; }
}
@keyframes respira {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.8%, -1.2%, 0); }
}
.js .portada--foto .portada__foto { opacity: 0; }
.js .portada--foto.ok .portada__foto { opacity: 1; transition: opacity 1.1s ease; }
.js .portada.rev,
.js .portada.rev.ok { opacity: 1; transform: none; transition: none; }
@media (max-width: 860px) {
  .portada--foto { padding-top: 36svh; }
  .portada__foto img {
    object-position: 50% 44%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
  }
  /* EL VELO DE MOVIL VA EN ROCA, NO EN ESPUMA.
     Estaba escrito al reves —terminaba en `var(--espuma)` opaco— y el
     resultado era el peor error posible: el tercio de abajo de la
     portada quedaba BLANCO y encima iban el rotulo, el h1 y la bajada
     en --espuma y --claro-2, o sea texto claro sobre fondo claro. En un
     telefono el titular medía 1,05:1: invisible. Y de paso el boton
     secundario, que es de contorno con letra clara, desaparecia entero.

     Va entero en rgba() literal —nunca var()— y arranca en alfa 0, para
     que el tercio de arriba de la foto quede a foco completo.
     Peor caso, con un fotograma BLANCO debajo:
     · al 52 % el fondo compuesto queda en L=0,053 → --espuma 9,2:1
     · del 70 % hacia abajo es roca pura → --espuma 12,6:1
     Con la foto real (choritos oscuros) los dos numeros suben. */
  .portada__foto::after {
    background: linear-gradient(180deg,
        rgba(38,43,44,0)   0%,  rgba(38,43,44,.28) 30%,
        rgba(38,43,44,.72) 52%, rgba(38,43,44,.94) 70%,
        rgba(38,43,44,1)  100%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#mar { position: relative; isolation: isolate; overflow: hidden; }
.aura { position: absolute; z-index: -1; inset: -12% -8% auto -8%; height: 78%; pointer-events: none; }
.aura img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Acá el desenfoque ES el efecto: la foto deja de leerse y queda la luz. */
  filter: blur(64px) saturate(1.45);
  /* OPACIDAD BAJADA DE .38 A .24 EN LA REVISIÓN DEL 10-09-2026.
     A .38 el aura no aportaba luz: RESTABA. Medido sobre la página
     viva (píxeles del render, no cálculo de memoria), el fondo de la
     entradilla y de la leyenda caía de L=0,876 (--espuma pura) a
     L=0,409, y ahí --roca-3 daba 3,9:1 y 4,1:1 — bajo el 4,5 de AA
     en la sección MÁS importante de la página, la que contesta la
     pregunta del rubro. A .24 el mismo píxel queda en L≈0,58 y los
     dos suben por encima de 5:1. El aura sigue viéndose: lo que se
     fue es la mancha que competía con el calendario.
     Se deja en .20 y no en .24 porque el aura DERIVA (68 s, ±3 % y
     escala 1,25→1,38): la zona oscura de la foto pasa por debajo del
     texto y el peor caso no es el del fotograma que uno mide. A .24 la
     entradilla quedaba en 4,69:1 —pasa, pero sin margen para el
     recorrido—; a .20 queda sobre 5:1 en todo el ciclo. */
  opacity: .20;
  transform: scale(1.25);
  /* Y se apaga EN LA IMAGEN, no con un velo encima. Un ::after que pinta
     el fondo apaga solo DENTRO del div: en el borde de abajo queda un
     corte recto a media seccion. Con la mascara la imagen misma se
     desvanece y no hay borde que cortar. */
  -webkit-mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
          mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
}
@media (prefers-reduced-motion: no-preference) {
  .aura img { animation: deriva-aura 68s ease-in-out infinite alternate; }
}
@keyframes deriva-aura {
  from { transform: scale(1.25) translate3d(-3%, 0, 0); }
  to   { transform: scale(1.38) translate3d(3%, -2%, 0); }
}

/* ── 3 · MEDIA PANTALLA ── */
.mitades {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--espuma-2);
  /* overflow hidden porque las entradas son laterales: mientras el texto
     se desliza y la foto entra a escala, ambos se salen unos píxeles y
     aparece scroll horizontal por un segundo. */
  overflow: hidden;
}
.mitades__foto { position: relative; min-height: 62svh; overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mitades__texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--roca);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--roca-3); margin: 0 0 .9rem;
}
.mitades h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08;
  margin: 0 0 1rem; color: var(--roca);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--roca); max-width: 34rem;
}
.js .mitades__texto.rev { opacity: 0; transform: translateX(1.6rem); }
.js .mitades__foto.rev  { opacity: 0; transform: scale(1.04); }
.js .mitades__texto.rev.ok,
.js .mitades__foto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 780px) {
  .mitades { grid-template-columns: 1fr; }
  .mitades__foto { min-height: 44svh; }
}

/* ── 4 · LA CITA A SANGRE ── */
.cita {
  position: relative; isolation: isolate; min-height: 70svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--espuma); overflow: hidden;
}
.cita__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
/* Velo PLANO (no lateral) porque el texto va centrado: con un gradiente
   de costado, un texto centrado queda medio sobre .9 y medio sobre .3 y
   falla AA en la mitad derecha.

   Bajado de .72-.90 a .62-.80 el 09-09-2026: a .90 la foto del ostion
   desaparecia del todo y la banda se leia como un rectangulo vacio —480
   KB de imagen que nadie ve. A .62 el ostion se adivina y la banda deja
   de ser un hueco.

   PEOR CASO, calculado con un fotograma NEGRO debajo (la foto real es
   clara, asi que el numero de verdad es mejor):
   · a .62 el fondo compuesto queda en L=0,36 → --roca da 5,5:1 (el
     titular, ademas texto grande).
   · a .76, que es donde cae el eco, L=0,52 → --nacar-osc da 4,8:1, que
     es AA de texto normal.
   Con un fotograma BLANCO debajo el fondo sube y los dos mejoran. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(241,244,242,.62) 0%,
              rgba(241,244,242,.76) 52%, rgba(241,244,242,.84) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--roca); }
.cita__texto p {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.16;
  margin: 0; color: var(--roca);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nacar-osc);
}
.js .cita__texto.rev { opacity: 0; transform: translateY(16px); }
.js .cita__texto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
  .cita__foto img { animation: respira-cita 58s ease-in-out infinite alternate; }
}
@keyframes respira-cita {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(1.4%, -1%, 0); }
}

/* ── 5 · LA TIRA ── */
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--linea); }
.tira__pieza { margin: 0; overflow: hidden; height: 34svh; min-height: 220px; }
.tira__pieza img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) and (pointer: fine) {
  .tira__pieza:hover img { transform: scale(1.05); }
}
.js .tira__pieza.rev { opacity: 0; transform: translateY(1.4rem); }
.js .tira__pieza.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .tira__pieza.rev.ok:nth-child(2) { transition-delay: .1s; }
.js .tira__pieza.rev.ok:nth-child(3) { transition-delay: .2s; }
@media (max-width: 700px) {
  .tira { grid-template-columns: 1fr 1fr; }
  .tira__pieza:last-child { grid-column: 1 / -1; height: 28svh; }
}

@media (prefers-reduced-motion: reduce) {
  .js .portada--foto .portada__foto,
  .js .mitades__texto.rev, .js .mitades__foto.rev,
  .js .cita__texto.rev, .js .tira__pieza.rev { opacity: 1; transform: none; }
}

/* ── TAJO: LA FRANJA A SANGRE ──
   Una franja de foto entre dos secciones. No lleva texto encima, asi
   que no lleva velo: se ve la foto y punto. Es la aparicion que mas
   llena la pagina por el peso que cuesta. */
/* La clase es .tajo y no .banda ni .franja: hay demos que ya usan esos
   dos nombres para secciones propias, y chocaban. */
.tajo {
  position: relative; overflow: hidden;
  height: clamp(180px, 30svh, 340px);
  background: var(--espuma-2);
}
.tajo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .tajo img { animation: deriva-tajo 54s ease-in-out infinite alternate; }
}
@keyframes deriva-tajo {
  from { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.2%, -1.4%, 0); }
}
.js .tajo { opacity: 0; }
.js .tajo.ok { opacity: 1; transition: opacity 1s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .tajo { opacity: 1; }
}

/* ── TELON: la foto detras de una seccion entera ──
   No es el aura. El aura va reventada a 64 px y se lee como mancha de
   color; el telon va NITIDO y bajo de opacidad, y se lee como foto.
   El texto encima se sostiene porque la foto esta al .15, no porque
   este sucia — que es la regla de siempre. */
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.telon img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%;
  opacity: .15;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .telon img { animation: deriva-telon 76s ease-in-out infinite alternate; }
}
@keyframes deriva-telon {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.6%, -1%, 0); }
}

/* ── MOSAICO ──
   Seis piezas en grilla. Es la unica parte de la pagina donde una
   imagen puede repetirse con otro recorte: a este tamano no se lee
   como repeticion sino como serie. */
/* El mosaico trae su propio fondo: sus colores salen del bloque de
   .mitades y hay demos donde ese fondo es el contrario al del body —
   el titulo quedaba a 1,00:1, invisible. Con fondo propio el contraste
   esta garantizado en todas. */
.mos {
  background: var(--espuma-2);
  padding: clamp(2.6rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.mos__titulo {
  max-width: 82rem; margin-left: auto; margin-right: auto;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.08;
  margin: 0 0 .5rem; color: var(--roca);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(--roca-3); font-size: .94rem; line-height: 1.6;
}
.mos__grilla {
  display: grid; gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 82rem; margin: 0 auto;
}
.mos__p { margin: 0; overflow: hidden; height: clamp(140px, 20svh, 220px); background: var(--espuma-2); }
.mos__p img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) {
  .mos__p:hover img { transform: scale(1.06); }
}
.js .mos__p { opacity: 0; transform: translateY(1.2rem); }
.js .mos__p.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .mos__p.ok:nth-child(2) { transition-delay: .06s; }
.js .mos__p.ok:nth-child(3) { transition-delay: .12s; }
.js .mos__p.ok:nth-child(4) { transition-delay: .18s; }
.js .mos__p.ok:nth-child(5) { transition-delay: .24s; }
.js .mos__p.ok:nth-child(6) { transition-delay: .30s; }
@media (max-width: 760px) {
  .mos__grilla { grid-template-columns: 1fr 1fr; }
  .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mos__p { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LAS CUATRO CIFRAS — la repisa bajo la portada
   ══════════════════════════════════════════════════════════════════
   Va en roca-2, un escalón MÁS CLARA que la portada: así la banda se
   lee como una repisa apoyada debajo y no como la continuación del
   fondo oscuro. El filo tornasolado de 3 px arriba es la misma pieza
   de identidad que va bajo el h1 de la portada — aparece dos veces en
   toda la página y nunca de fondo, porque una concha tornasola en el
   BORDE.

   Contraste medido sobre roca-2 (#333A3B):
   · --espuma   (#F1F4F2) sobre roca-2 → 12,1:1   (la cifra y el rótulo)
   · --claro-2  (#B4C0BE) sobre roca-2 →  6,2:1   (el porqué, .86 rem)
   · --nacar    (#A8C2E0) sobre roca-2 →  6,3:1   (el contorno del cero)
   ══════════════════════════════════════════════════════════════════ */
.cifras {
  position: relative;
  background: var(--roca-2);
  color: var(--espuma);
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem);
}
.cifras::before {          /* el filo: la segunda y ultima vez en la pagina */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--filo);
}
.cifras__lista {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem 2.4rem;
  max-width: 82rem; margin: 0 auto 1.6rem;
}
.cifras__lista > li {
  border-top: 1px solid var(--linea-osc);
  padding-top: 1rem;
}
.cifras__n {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4rem); line-height: .95;
  color: var(--espuma);
  font-variant-numeric: tabular-nums;
}
/* EL CERO HUECO — el numero de la herida se dibuja en contorno, no
   relleno: un cero vacio ES lo que dice la cifra. Relleno mas oscuro
   que la banda y contorno de nacar, como un grabado en la roca.
   El auditor de contraste da falso positivo aca (lee el relleno y no
   el trazo): el trazo mide 6,3:1 sobre roca-2 y es texto grande. */
.cifras__n--hueca {
  color: rgba(30, 34, 35, .92);
  -webkit-text-stroke: 2px var(--nacar);
  paint-order: stroke fill;
}
.cifras__q {
  display: block; margin-top: .5rem;
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--espuma);
}
.cifras__pq {
  display: block; margin-top: .6rem;
  font-size: .86rem; line-height: 1.55;
  color: var(--claro-2);
}
.cifras__herida .cifras__q { color: var(--nacar); }
.cifras__pie {
  max-width: 82rem; margin: 0 auto;
  font-size: .82rem; color: var(--claro-2);
  padding-top: 1.2rem; border-top: 1px solid var(--linea-osc);
}
@media (max-width: 60rem) { .cifras__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .cifras__lista { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ══════════════════════════════════════════════════════════════════
   LO QUE MANDA — el inventario del oficio, sobre telón
   ══════════════════════════════════════════════════════════════════
   Banda oscura: es la unica de la mitad de arriba que lleva telon
   (telon-02, la roca vista desde el aire) y la luminancia tenia que ser
   la contraria a la del calendario, que va sobre espuma.

   Los grises de la paleta clara NO se heredan aca: --roca-3 sobre roca
   da 1,3:1 y desaparece. Por eso .entrada, .ficha p y el antetitulo se
   reescriben uno por uno.
   Medido sobre roca (#262B2C): --claro-2 7,6:1 · --nacar 7,8:1.
   ══════════════════════════════════════════════════════════════════ */
.oficio {
  background: var(--roca);
  color: var(--espuma);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
/* alineado a la IZQUIERDA, no centrado: toda la pagina arranca en el
   mismo filo (.mar__cabecera, .filas, .vista__cuerpo). Un bloque
   centrado en medio de una pagina alineada se lee como descuido. */
.oficio__cuerpo { max-width: min(100%, 62rem); margin: 0; }
.oficio h2 {
  font-size: clamp(1.9rem, 4.8vw, 3.2rem);
  line-height: 1.06; letter-spacing: -.012em;
  margin-bottom: 1.1rem; color: var(--espuma);
}
.oficio .entrada { color: var(--claro-2); max-width: min(100%, 42rem); }
.oficio .entrada em { color: var(--nacar); font-style: italic; }

/* Son CINCO fichas en una grilla de tres columnas: la sexta celda queda
   vacia. Por eso el filete NO se pinta con el fondo del contenedor y el
   gap (ahi la celda vacia sale como un rectangulo gris colgando); cada
   ficha lleva su propio filete de 1 px por box-shadow y los de dos
   fichas vecinas se solapan en el gap dando una sola linea. */
.fichas {
  list-style: none; margin: 2.4rem 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.ficha {
  position: relative;
  background: rgba(38, 43, 44, .82);   /* deja pasar el telon, no lo tapa */
  box-shadow: 0 0 0 1px var(--linea-osc);
  padding: 1.5rem 1.4rem 1.6rem;
}
/* EL NUMERO GRABADO: relleno casi negro y contorno de nacar. Es
   aria-hidden, asi que no es texto que haya que leer: es la textura
   que ordena la serie. */
.ficha__n {
  display: block;
  font-family: var(--display);
  font-size: 2.6rem; line-height: 1;
  color: rgba(30, 34, 35, .9);
  -webkit-text-stroke: 1.5px rgba(168, 194, 224, .55);
  paint-order: stroke fill;
  margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.ficha h3 {
  font-family: var(--dato);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nacar);
  margin: 0 0 .6rem;
}
.ficha p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--claro-2); }
/* El filo tornasolado marca la ficha que se mira, igual que marca la
   fila abierta del calendario. Mismo gesto, dos sitios. */
.ficha::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--filo); opacity: 0;
}
.js .ficha::after { transition: opacity .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .ficha:hover::after { opacity: 1; }
}
.oficio__salida {
  max-width: min(100%, 42rem); margin: 0;
  font-family: var(--display); font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.4; color: var(--espuma);
}
.oficio__salida em { font-style: italic; color: var(--nacar); }

/* ══════════════════════════════════════════════════════════════════
   LA LÍNEA DEL DÍA — la pizarra
   ══════════════════════════════════════════════════════════════════
   Seccion clara con una PIZARRA oscura adentro: tres niveles de
   luminancia en una sola banda (espuma, roca, y el nacar del rotulo).
   Es lo que la saca de bloque de color, y ademas es la metafora
   correcta: lo que se escribe cada manana se escribe en una pizarra.
   ══════════════════════════════════════════════════════════════════ */
.linea {
  background: var(--espuma);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.linea__cuerpo { max-width: min(100%, 52rem); margin: 0; }
.linea h2 {
  font-size: clamp(1.9rem, 4.8vw, 3.2rem);
  line-height: 1.06; letter-spacing: -.012em; margin-bottom: 1.1rem;
}

.pizarra {
  position: relative;
  background: var(--roca);
  color: var(--espuma);
  padding: 1.8rem clamp(1.2rem, 4vw, 2.2rem) 1.6rem;
  border-radius: 2px;
  margin: 2rem 0 2.4rem;
  overflow: hidden;
}
.pizarra::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--filo);
}
.pizarra__rot {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--nacar); margin: 0 0 .9rem;
}
.pizarra__linea {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.25;
  margin: 0 0 1.1rem;
}
/* sobre la pizarra el azul oscuro del falta mide 1,7:1: va el claro */
.pizarra .falta { color: var(--nacar); border-bottom-color: var(--nacar); }
.pizarra__pie {
  margin: 0; padding-top: 1rem;
  border-top: 1px solid var(--linea-osc);
  font-size: .86rem; line-height: 1.55; color: var(--claro-2);
}

/* Las tres reglas, numeradas a mano: el contador va en la mono, para
   que la numeracion se lea como una regla y no como una lista. */
.reglas { list-style: none; margin: 0; padding: 0; counter-reset: regla; }
.reglas li {
  counter-increment: regla;
  position: relative;
  padding: .9rem 0 .9rem 3rem;
  border-top: 1px solid var(--linea);
  font-size: .96rem; color: var(--roca-3);
}
.reglas li:last-child { border-bottom: 1px solid var(--linea); }
.reglas li::before {
  content: counter(regla, decimal-leading-zero);
  position: absolute; left: 0; top: .95rem;
  font-family: var(--dato); font-size: .8rem;
  letter-spacing: .06em; color: var(--nacar-osc);
}
.reglas b { color: var(--roca); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   CASCADA — los hijos de una grilla entran escalonados
   ══════════════════════════════════════════════════════════════════
   El CONTENEDOR se neutraliza y animan los hijos. Si no se neutraliza,
   contenedor e hijos bajan a la vez y el grupo entero se desplaza 40 px.
   El --i va por nth-child en el CSS y NUNCA en un atributo style: la
   CSP con style-src self lo bloquea sin un solo error visible.
   ══════════════════════════════════════════════════════════════════ */
.js .cascada.rev      { opacity: 1; transform: none; transition: none; }
.js .cascada.rev > *  { opacity: 0; transform: translateY(22px); }
.js .cascada.rev.ok > * {
  opacity: 1; transform: none;
  transition: opacity .35s ease-out, transform .65s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.cascada > :nth-child(1) { --i: 0; }
.cascada > :nth-child(2) { --i: 1; }
.cascada > :nth-child(3) { --i: 2; }
.cascada > :nth-child(4) { --i: 3; }
.cascada > :nth-child(5) { --i: 4; }
.cascada > :nth-child(6) { --i: 5; }

/* Reduced-motion: se apaga el DESPLAZAMIENTO, no el fundido. Un salto
   de 22 px es movimiento; una opacidad que sube no lo es, y si se apaga
   tambien, en la mitad de los Windows del cliente la pagina se ve muerta. */
@media (prefers-reduced-motion: reduce) {
  .js .rev, .js .cascada.rev > * { transform: none; }
  .ficha::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
   ══════════════════════════════════════════════════════════════════
   Boton fijo abajo a la derecha, 56 px de alto (por encima de los 44
   del minimo tactil). Verde de WhatsApp a proposito: se reconoce sin
   leerlo, y eso es lo que hace que se toque.

   La direccion del truco importa: el boton se ve SIEMPRE por defecto y
   el JS solo lo aparta mientras el visitante mira la portada, para no
   tapar el titular. Al reves —oculto por defecto y revelado por JS—
   un fallo del script se lleva el CTA principal.

   OJO CON EL DESTINO: este negocio no tiene numero publicado. El boton
   lleva al formulario de reserva, no al WhatsApp de CristalWeb: mandar
   los clientes del cliente al telefono del que hizo la pagina seria
   peor que no tener boton. Cuando el local de su numero se cambia el
   href del HTML y la constante NUMERO de js/main.js.
   Contraste del rotulo: #07310F sobre #25D366 → 9,4:1.
   ══════════════════════════════════════════════════════════════════ */
.wapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex; align-items: center; gap: .55rem;
  height: 56px; padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  background: #25D366; color: #07310F;
  text-decoration: none;
  font-family: var(--cuerpo);
  font-size: .95rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2);
}
.js .wapp { transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease; }
.wapp__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wapp:hover,
.wapp:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .34); }
/* mientras se esta arriba del todo, el boton se aparta */
.js .wapp--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }
/* que el pie no quede tapado por el boton */
.pie { padding-bottom: 5.5rem; }

@media (max-width: 520px) {
  /* en un telefono el circulo verde ya dice que es: se va el rotulo */
  .wapp { width: 56px; padding: 0; justify-content: center; }
  .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .js .wapp { transition: opacity .28s ease; }
  .wapp:hover, .wapp:focus-visible { transform: none; }
  .js .wapp--arriba { transform: none; }
}



/* ══════════════════════════════════════════════════════════════════
   ARREGLOS DE LA REVISIÓN DEL 09-09-2026
   ══════════════════════════════════════════════════════════════════ */

/* ── Los dos botones de la portada ──
   .boton--luz y .boton--filo estaban escritos en el HTML y no existían
   en el CSS: los dos salían iguales, con el mismo relleno de nácar. Una
   acción principal y una alternativa no pueden verse igual — el ojo no
   sabe cuál tocar y el par se lee como plantilla.
   El secundario lleva el filo tornasolado de borde: es la misma pieza
   de identidad del h1 y del calendario, y no cuesta un byte.
   Contraste: --espuma sobre la portada (--roca) → 12,6:1. */
.portada__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.boton--luz  { background: var(--nacar); color: var(--roca); }
.boton--filo {
  background: transparent; color: var(--espuma);
  border: 1px solid transparent;
  border-image: var(--filo) 1;
}
.boton--filo:hover { background: rgba(241, 244, 242, .12); color: var(--espuma); }

/* ── Objetivos táctiles de 44 px ──
   El CTA de la cabecera y las flechas del pie median 31 y 28 px de alto.
   Son los dos únicos enlaces que quedan visibles a 375 px además de los
   del cuerpo, así que son los dos que había que subir. */
.cab__res {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px;
}
.flecha { display: inline-flex; align-items: center; min-height: 44px; }

/* ── El mes «falta» del calendario ──
   #5E6867 sobre la espuma con el telón detrás da 4,4:1 y a .68 rem eso
   no pasa AA: las doce letras del erizo quedaban casi invisibles.
   --roca-3 sobre el mismo fondo da 6,8:1. */
.m--falta { color: var(--roca-3); }


/* ══════════════════════════════════════════════════════════════════
   ARREGLOS DE LA REVISIÓN DEL 10-09-2026
   Todo medido sobre la página servida en localhost:8801, no de memoria.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · EL HUECO DEL MOSAICO ──
   Seis piezas en tres columnas con la 1 y la 6 a `span 2` suman ocho
   celdas: la última fila quedaba con la foto de los botes ocupando dos
   columnas y la tercera VACÍA, un rectángulo de --espuma-2 colgando al
   final de la página. Se leía como grilla rota, no como composición.
   La 6 pasa a ancho completo: es la más apaisada del lote (1200×481),
   así que a sangre de las tres columnas se lee como cierre de serie y
   la retícula queda cerrada. Es además la misma regla que ya corría
   bajo 760 px, así que móvil y escritorio se comportan igual. */
.mos__p:nth-child(6) { grid-column: 1 / -1; }

/* ── 2 · LA MEDIA PANTALLA MEDÍA 1.212 px ──
   `.mitades__foto img` llevaba `height: 100%`, pero el porcentaje no
   resuelve contra un padre de altura automática: la imagen caía a su
   alto intrínseco (959×1600 a 720 px de ancho = 1.201 px) y arrastraba
   la fila entera de la grilla. Resultado en un portátil de 900 px: una
   foto de 1,35 pantallas con el texto flotando en medio de un vacío de
   --espuma-2. El `min-height: 62svh` no servía de nada porque la
   imagen siempre lo superaba.
   Se saca la imagen del flujo (absoluta, como ya lo hacen .portada__foto
   y .cita__foto) y entonces el contenedor sí manda: 62svh, con techo
   para que nunca pase de una pantalla. El encuadre sube a 34 % porque
   el letrero del local vive en el tercio alto y un recorte centrado se
   lo comía. */
.mitades__foto { min-height: 62svh; max-height: 78svh; }
.mitades__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 34%;
}
@media (max-width: 780px) {
  .mitades__foto { min-height: 44svh; max-height: 56svh; }
}

/* ── 3 · EL VACÍO DE «LA MESA CON VISTA» ──
   Es la sección más larga de la página (dos listas de huecos más el
   formulario) y la que llevaba el cuerpo más angosto: 48 rem dentro de
   una banda oscura de 1.440 px dejaba ~600 px de negro muerto a la
   derecha durante ~1.700 px de scroll. Se alinea con .oficio__cuerpo
   (62 rem) y la columna del rótulo crece a 17 rem, que es lo que pide
   «Cuánto se demora desde Valdivia» para no partirse en dos líneas.
   El `max-width` del dd es lo que impide que la línea de texto se
   estire a 90 caracteres al ensanchar. */
.vista__cuerpo { max-width: min(100%, 62rem); }
.hueco { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
.huecos dd { max-width: 46rem; }
@media (max-width: 40rem) { .hueco { grid-template-columns: 1fr; } }

/* ── 4 · EL MAPA DE UBICACIÓN ──
   «Cómo llegar» eran tres filas que decían «falta» y nada más: la
   sección que contesta la segunda pregunta de un cliente que maneja
   una hora era la más vacía de la página. El mapa es la parte que SÍ
   se puede contestar sin inventar nada, porque Los Molinos es un
   hecho aunque la calle no esté publicada.
   Va como JPEG propio (mosaicos de OSM pegados por mapa-negocio.ps1):
   con img-src 'self' un mapa de terceros no cargaría, y así tampoco
   se le filtra la visita del cliente a ningún servidor ajeno.
   Contraste sobre --roca-2 (#333A3B): --claro-2 6,2:1 · --nacar 6,3:1.
   El mapa es claro y la banda es oscura: la inversión de luminancia la
   pone la propia imagen, sin gastar un byte de más. */
.mapa {
  margin: 1.6rem 0 2.2rem;
  max-width: min(100%, 34rem);
  background: var(--roca-2);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7);
}
.mapa img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
}
.mapa__pie { padding: .9rem 1.1rem 1rem; }
.mapa__aviso {
  margin: 0 0 .7rem;
  font-size: .9rem; line-height: 1.55; color: var(--claro-2);
}
.mapa__aviso b { color: var(--espuma); font-weight: 700; }
.mapa__linea {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .4rem 1.2rem;
  margin: 0; padding-top: .7rem;
  border-top: 1px solid var(--linea-osc);
}
.mapa__cred {
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .04em; color: var(--claro-2);
}
.mapa__cred a { color: var(--nacar); }
.mapa__ir {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  font-weight: 700; font-size: .9rem;
  color: var(--nacar); text-decoration: none;
  border-bottom: 1px solid var(--nacar);
}
.mapa__ir span { transition: transform .25s ease; }
.mapa__ir:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .mapa__ir span { transition: none; }
  .mapa__ir:hover span { transform: none; }
}
/* En escritorio el mapa se abre a dos columnas —lámina y ficha— en vez
   de quedar como un cuadrado solo a la izquierda de una banda de 1.440
   px. El recorte pasa a 4:3 y el marcador, que vive en la mitad de la
   imagen, no se pierde. */
@media (min-width: 48rem) {
  .mapa {
    max-width: min(100%, 52rem);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
    align-items: stretch;
  }
  .mapa img { aspect-ratio: 4 / 3; height: 100%; }
  .mapa__pie { display: flex; flex-direction: column; justify-content: center; }
  .mapa__linea { flex-direction: column; align-items: flex-start; gap: .7rem; }
}