/* Glamping Niebla Alta · "El cartel fijo" (Taste: pinned-poster)
   La frase de la portada queda quieta y el día pasa por el marco.
   Para otro cliente: cambiar :root, las fuentes, las fotos (FOTOS.md) y los textos. */

@font-face {
  font-family: "Besley";
  src: url("/fonts/besley-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/besley-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color: niebla de la mañana, bosque de noche, brasa de la fogata solo en las acciones */
  --niebla: #dde2de;          /* fondo */
  --niebla-2: #ccd4cf;        /* superficie: formulario, mapa, cuenta */
  --tinta: #14211b;           /* texto, 12,7:1 sobre niebla */
  --musgo: #3d4c44;           /* notas, 6,9:1 sobre niebla */
  --bosque: #1c2e26;          /* campos oscuros: el día, WhatsApp */
  --sobre-bosque: #e6ebe7;    /* texto sobre bosque, 11,9:1 */
  --sobre-bosque-suave: #a9b8af; /* notas sobre bosque, 6,9:1 */
  --brasa: #b0431c;           /* botones (blanco encima 5,7:1) y foco */
  --brasa-honda: #933515;
  --brasa-noche: #f0a27f;     /* enlaces sobre bosque, 6,9:1 */
  --blanco: #ffffff;
  --velo: rgb(8 14 11 / 0.42); /* velo neutro bajo texto sobre foto */

  /* Tipo: Besley (serif cálida de letrero de posada) para titulares; Libre Franklin para leer */
  --f-titulo: "Besley", Georgia, "Times New Roman", serif;
  --f-texto: "Libre Franklin", "Segoe UI", Arial, sans-serif;
  --t-chica: 0.9375rem;
  --t-cuerpo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --t-sub: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  --t-titulo: clamp(2.5rem, 1.3rem + 4.6vw, 5.5rem);
  --t-gigante: clamp(3.5rem, 1rem + 11vw, 13rem);

  /* Espacio */
  --margen: 16px;
  --seccion: clamp(96px, 12vw, 200px);
  --cabecera: 60px;

  /* Movimiento */
  --salida: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 700px) { :root { --margen: 24px; --cabecera: 68px; } }
@media (min-width: 1200px) { :root { --margen: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--niebla);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: text-underline-offset 160ms ease-out; }
a:hover { text-underline-offset: 0.32em; }
h1, h2, h3, p, ul, ol, figure, table { margin: 0; }
p, li, figcaption, td { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--brasa); color: var(--blanco); }
:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: var(--t-titulo); line-height: 0.98; }
h3 { font-size: var(--t-lead); line-height: 1.15; }

.marco { padding-inline: var(--margen); }

.saltar { position: absolute; left: 16px; top: 0; transform: translateY(-120%); z-index: 50; background: var(--brasa); color: var(--blanco); padding: 12px 16px; }
.saltar:focus { transform: translateY(16px); }

/* Aviso de demo */
.aviso-demo { background: var(--bosque); color: var(--sobre-bosque); font-size: var(--t-chica); padding: 10px var(--margen); text-align: center; }
.aviso-demo a { font-weight: 600; color: var(--brasa-noche); }

/* Cabecera: barra plana, reservar siempre a la vista */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  height: var(--cabecera);
  display: flex; align-items: center; gap: 24px;
  padding-inline: var(--margen);
  background: var(--niebla);
}
.logo { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-lead); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; margin-right: auto; }
.menu { display: none; gap: 28px; font-size: var(--t-chica); }
.menu a { text-decoration: none; padding: 8px 0; }
.menu a:hover { text-decoration: underline; }
@media (min-width: 900px) { .menu { display: flex; } }

/* Botones: rectos, un solo relleno (brasa) */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  background: var(--brasa); color: var(--blanco);
  font: 600 var(--t-cuerpo)/1 var(--f-texto);
  border: 0; border-radius: 0; cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color 160ms ease-out, transform 160ms var(--salida);
}
.boton:hover { background: var(--brasa-honda); }
.boton:active { transform: scale(0.97); }
.boton-cabecera { min-height: 44px; padding: 0 18px; font-size: var(--t-chica); }
.boton-ancho { width: 100%; }
.enlace { font-weight: 600; }

/* ───────── Portada: la frase partida y el día pasando por el marco ───────── */
.portada { position: relative; }
.escenario {
  min-height: calc(100svh - var(--cabecera));
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 16px;
  padding: 24px var(--margen) 32px;
}
.frase { display: grid; gap: 2px; font-weight: 600; font-size: clamp(2.5rem, 12vw, 4.5rem); line-height: 0.95; letter-spacing: -0.03em; }
.frase-a, .frase-b { display: block; }
.frase-b { text-align: right; }
.marco-dia { position: relative; aspect-ratio: 4 / 3; background: var(--niebla-2); overflow: clip; }
.cuadro { position: absolute; inset: 0; }
.cuadro img { width: 100%; height: 100%; object-fit: cover; }
.cuadro figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 14px 12px;
  color: var(--blanco); font-size: var(--t-chica); line-height: 1.4;
  background: linear-gradient(to top, rgb(8 14 11 / 0.72), rgb(8 14 11 / 0)); /* velo neutro bajo texto sobre foto: la única excepción permitida · taste-skill-ignore */
}
.hora { font-weight: 700; margin-right: 6px; font-variant-numeric: tabular-nums; }
.cuadro:not(:first-child) { display: none; }   /* sin JS: solo la primera foto */
.portada-lede { font-size: var(--t-cuerpo); max-width: 46ch; }
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.portada-precio { font-size: var(--t-chica); color: var(--musgo); padding-right: 64px; }
@media (min-width: 900px) { .portada-precio { padding-right: 0; } }

@media (min-width: 900px) {
  .escenario {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 28px; row-gap: 0;
    align-content: stretch;
    padding-block: 24px;
  }
  .frase { grid-column: 1 / 4; grid-row: 2; grid-template-columns: subgrid; align-items: center; font-size: clamp(2.5rem, 3.4vw, 5rem); position: relative; z-index: 2; }
  .frase-a { grid-column: 1; justify-self: end; text-align: right; }
  .frase-b { grid-column: 3; justify-self: start; text-align: left; }
  .escenario { --ancho-marco: min(58vw, 1100px); }
  .marco-dia { grid-column: 2; grid-row: 2; aspect-ratio: 16 / 10; z-index: 1; width: var(--ancho-marco); }
  .cuadro figcaption { padding: 56px 20px 16px; }
  .portada-pie { grid-column: 1 / 4; justify-self: center; width: var(--ancho-marco); grid-row: 3; margin-top: 32px; min-width: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
  .portada-pie { flex-wrap: wrap; row-gap: 20px; }
  .portada-lede { max-width: 40ch; flex: 1 1 300px; }
  .portada-acciones { margin-top: 0; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
  .portada-precio { text-align: right; }
}
@media (min-width: 900px) and (max-height: 900px) {
  .escenario { --ancho-marco: max(420px, min(58vw, 1100px, calc((100svh - var(--cabecera) - 250px) * 1.6))); }
}

/* Con JS: la portada se alarga y el escenario queda fijo mientras pasan las horas del día */
.js .portada { height: 300svh; }
.js .escenario { position: sticky; top: var(--cabecera); height: calc(100svh - var(--cabecera)); min-height: 0; }
.js .cuadro:not(:first-child) { display: block; }
.js .cuadro { opacity: 0; transition: opacity 700ms ease-out; }
.js .cuadro img { transform: scale(1.06); transition: transform 1400ms var(--salida); }
.js .cuadro.activo { opacity: 1; }
.js .cuadro.activo img { transform: none; }
/* Pantallas bajas (o con mucho zoom): sin escenario fijo, para que nada se monte sobre la sección siguiente */
@media (max-height: 720px) {
  .js .portada { height: auto; }
  .js .escenario { position: relative; top: auto; height: auto; min-height: 0; }
}

/* ───────── Dónde dormir: cada alojamiento a sangre, su ficha se corre una columna ───────── */
.dormir { padding-top: var(--seccion); }
.dormir-cabeza { padding-inline: var(--margen); margin: 0 0 clamp(48px, 6vw, 96px); display: grid; gap: 20px; }
.dormir-cabeza p { max-width: 52ch; font-size: var(--t-lead); line-height: 1.4; }
.refugio { position: relative; display: grid; overflow: clip; }
.refugio-foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ficha { background: var(--tinta); color: var(--sobre-bosque); padding: 28px var(--margen) 32px; display: grid; gap: 10px; align-content: start; }
.ficha h3 { font-size: var(--t-sub); color: var(--blanco); }
.ficha-para { color: var(--sobre-bosque-suave); }
.ficha-precio { font-size: var(--t-lead); color: var(--blanco); }
.ficha-precio strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha-lista { display: grid; gap: 10px; margin: 8px 0 18px; font-size: var(--t-chica); }
.ficha-lista li { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; }
.ficha-lista li span:first-child { font-weight: 700; color: var(--blanco); }
.refugio + .refugio { margin-top: 0; }

@media (min-width: 900px) {
  .dormir-cabeza { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: last baseline; }
  .dormir-cabeza h2 { grid-column: 1 / 8; }
  .dormir-cabeza p { grid-column: 8 / 13; font-size: var(--t-cuerpo); line-height: 1.55; }
  .refugio { min-height: 100svh; grid-template-columns: repeat(3, 1fr); padding-inline: var(--margen); column-gap: 24px; align-items: center; isolation: isolate; }
  .refugio-foto { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; z-index: -1; }
  .ficha { grid-row: 1; padding: 36px 32px; min-height: 52svh; max-width: 440px; }
  .refugio-1 .ficha { grid-column: 1; }
  .refugio-2 .ficha { grid-column: 2; }
  .refugio-3 .ficha { grid-column: 3; }
  .ficha .boton { align-self: end; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .refugio { grid-template-columns: repeat(3, 1fr); }
  .refugio-1 .ficha { grid-column: 1 / 3; }
  .refugio-2 .ficha { grid-column: 2 / 4; }
  .refugio-3 .ficha { grid-column: 1 / 3; }
}

/* ───────── Un día en Niebla Alta: horario de montaña, un solo tamaño ───────── */
.dia { background: var(--bosque); color: var(--sobre-bosque); padding-block: var(--seccion); margin-top: 0; }
.dia h2 { color: var(--blanco); margin-bottom: clamp(40px, 5vw, 72px); }
.horario { width: 100%; border-collapse: collapse; font-size: var(--t-cuerpo); }
.horario caption { caption-side: bottom; text-align: left; font-size: var(--t-chica); color: var(--sobre-bosque-suave); padding-top: 28px; max-width: 60ch; }
.horario thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.horario tr { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding-block: 14px; }
.horario th, .horario td { padding: 0; text-align: left; font-weight: 400; vertical-align: baseline; }
.horario tbody th { font-family: var(--f-titulo); font-size: var(--t-lead); line-height: 1.2; color: var(--blanco); grid-column: 1; }
.horario td:nth-child(2) { grid-column: 1 / -1; color: var(--sobre-bosque); }
.horario td:nth-child(3) { grid-column: 1; color: var(--sobre-bosque-suave); font-size: var(--t-chica); }
.horario td:empty { display: none; }
.horario td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; font-variant-numeric: tabular-nums; color: var(--brasa-noche); font-size: var(--t-chica); font-weight: 600; white-space: nowrap; }

@media (min-width: 900px) {
  .horario { font-size: var(--t-lead); }
  .horario tr { display: table-row; padding: 0; }
  .horario th, .horario td { padding-block: 0.32em; }
  .horario tbody th { font-size: inherit; width: 30%; }
  .horario td:nth-child(2) { width: 34%; }
  .horario td:nth-child(3) { width: 18%; font-size: inherit; color: var(--sobre-bosque); }
  .horario td:empty { display: table-cell; }
  .horario td:nth-child(4) { font-size: inherit; color: var(--brasa-noche); font-weight: 400; }
}

.aves { margin-top: clamp(72px, 9vw, 160px); display: grid; gap: 28px; }
.aves-foto { aspect-ratio: 4 / 5; overflow: clip; }
.aves-foto img { width: 100%; height: 100%; object-fit: cover; }
.aves-texto { display: grid; gap: 18px; align-content: center; }
.aves-texto h3 { font-size: var(--t-sub); color: var(--blanco); line-height: 1.05; }
.aves-texto p { max-width: 46ch; }
@media (min-width: 900px) {
  .aves { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .aves-foto { grid-column: 1 / 6; }
  .aves-texto { grid-column: 7 / 12; }
}

/* ───────── Cómo llegar: ficha + mapa, y tres verbos fijos sobre la foto ───────── */
.llegar { padding-top: var(--seccion); }
.llegar-rejilla { display: grid; gap: 40px; padding-bottom: var(--seccion); }
.llegar-texto { display: grid; gap: 22px; align-content: start; }
.llegar-dir { font-size: var(--t-lead); line-height: 1.35; }
.ruta { display: grid; gap: 0; background: var(--niebla-2); }
.ruta li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; }
.ruta li:nth-child(even) { background: #c3ccc6; }
.ruta li span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.llegar-acciones { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.mapa svg { width: 100%; height: auto; display: block; }
.mapa figcaption { font-size: var(--t-chica); color: var(--musgo); margin-top: 12px; }
@media (min-width: 900px) {
  .llegar-rejilla { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .llegar-texto { grid-column: 1 / 6; }
  .mapa { grid-column: 7 / 13; }
}

.pasos { display: block; }
.paso { position: relative; min-height: 110svh; isolation: isolate; color: var(--blanco); overflow: clip; }
.paso img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.paso::after { content: ""; position: absolute; inset: 0; background: var(--velo); z-index: -1; }
.paso-pin { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; pointer-events: none; }
.paso-verbo { font-size: clamp(5rem, 24vw, 17rem); line-height: 0.9; letter-spacing: -0.04em; font-weight: 700; color: var(--blanco); }
.paso-frase { position: absolute; left: var(--margen); right: var(--margen); bottom: 28px; max-width: 46ch; font-size: var(--t-cuerpo); line-height: 1.45; }
@media (min-width: 900px) { .paso-frase { bottom: 40px; font-size: var(--t-lead); line-height: 1.35; } }

/* ───────── Preguntas: grandes a la izquierda, respuesta al lado ───────── */
.preguntas { padding-block: var(--seccion); }
.pregunta { display: grid; gap: 12px; }
.pregunta + .pregunta { margin-top: 56px; }
.pregunta-q { font-size: var(--t-sub); line-height: 1.1; font-weight: 600; }
.pregunta-titulo { color: var(--musgo); }
.pregunta p { max-width: 42ch; }
@media (min-width: 900px) {
  .pregunta { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: baseline; }
  .pregunta + .pregunta { margin-top: 80px; }
  .pregunta-q { grid-column: 1 / 7; }
  .pregunta p { grid-column: 8 / 13; }
}

/* ───────── Reserva ───────── */
.reserva { background: var(--niebla-2); padding-block: var(--seccion); }
.reserva-rejilla { display: grid; gap: 48px; }
.reserva-lede { font-size: var(--t-lead); line-height: 1.35; margin-top: 22px; max-width: 32ch; }
.cuenta { margin-top: 36px; background: var(--tinta); color: var(--sobre-bosque); padding: 24px; }
.cuenta-total { font-family: var(--f-titulo); font-size: var(--t-lead); line-height: 1.1; color: var(--blanco); font-variant-numeric: tabular-nums; }
.cuenta-detalle { margin-top: 10px; font-size: var(--t-chica); }
.cuenta-alerta .cuenta-total { color: var(--brasa-noche); }
.formulario { display: grid; gap: 22px; }
.fila-fechas { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 520px) { .fila-fechas { grid-template-columns: 1fr 1fr; gap: 16px; } }
.campo { display: grid; gap: 8px; min-width: 0; }
label { font-weight: 600; font-size: var(--t-cuerpo); }
input, textarea, select {
  width: 100%; min-width: 0; min-height: 56px; padding: 14px 16px;
  font: 400 var(--t-cuerpo)/1.3 var(--f-texto); color: var(--tinta);
  background: var(--blanco); border: 2px solid var(--blanco); border-radius: 0;
  transition: border-color 160ms ease-out;
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314211b' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; padding-right: 44px; }
input:hover, textarea:hover, select:hover { border-color: #9fb3ab; }
input:focus, textarea:focus, select:focus { border-color: var(--tinta); outline: none; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }
textarea { resize: vertical; min-height: 110px; }
.pista { font-size: var(--t-chica); font-weight: 600; margin-top: -8px; }
.pista-alerta { color: var(--brasa-honda); }
.ayuda { font-size: var(--t-chica); color: var(--musgo); margin-top: -10px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: var(--t-chica); }
.casilla input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--brasa); flex: none; }
.trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.formulario-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.formulario-acciones .boton { min-height: 60px; padding: 0 36px; }
@media (min-width: 900px) {
  .reserva-rejilla { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .reserva-lado { grid-column: 1 / 6; position: sticky; top: calc(var(--cabecera) + 32px); }
  .formulario { grid-column: 7 / 13; }
}

/* ───────── Escríbenos: WhatsApp como letra grande ───────── */
.escribenos { background: var(--bosque); color: var(--sobre-bosque); padding: 56px var(--margen) 32px; display: grid; grid-template-rows: auto 1fr auto; gap: 56px 32px; }
@media (min-width: 900px) { .escribenos { min-height: 86svh; padding-top: 48px; } }
.escribenos-frase { font-size: var(--t-lead); line-height: 1.35; max-width: 30ch; }
.escribenos h2 { align-self: end; font-size: clamp(2.75rem, 11.5vw, 13rem); line-height: 1; letter-spacing: -0.04em; font-weight: 600; padding-bottom: 0.08em; }
@media (min-width: 900px) { .escribenos h2 { font-size: clamp(3.5rem, 9.6vw, 13rem); } }
.escribenos h2 a { color: var(--blanco); text-decoration: none; transition: color 200ms ease-out; }
.escribenos h2 a:hover { color: var(--brasa-noche); }
.escribenos-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--t-chica); color: var(--sobre-bosque-suave); }

/* ───────── Pie: el nombre primero ───────── */
.pie { background: var(--tinta); color: var(--sobre-bosque); padding: 48px var(--margen) 28px; overflow: clip; }
.pie-nombre { font-family: var(--f-titulo); font-weight: 700; font-size: calc((100vw - 2 * var(--margen)) / 5.8); line-height: 0.9; letter-spacing: -0.045em; color: var(--sobre-bosque); white-space: nowrap; }
.pie-fila { display: grid; gap: 40px; margin-top: 56px; }
.pie-lugares { display: grid; gap: 8px; font-family: var(--f-titulo); font-size: var(--t-sub); line-height: 1.15; }
.pie-lugares a { color: var(--brasa-noche); text-decoration: none; }
.pie-lugares a:hover { text-decoration: underline; }
.pie-enlaces { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: var(--t-chica); }
.pie-abajo { margin-top: 72px; display: grid; gap: 8px; font-size: var(--t-chica); color: var(--sobre-bosque-suave); }
.pie-abajo a { color: var(--sobre-bosque); }
@media (min-width: 900px) {
  .pie-fila { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .pie-lugares { grid-column: 1 / 6; }
  .pie-enlaces { grid-column: 7 / 13; grid-template-columns: repeat(3, 1fr); }
  .pie-abajo { grid-template-columns: 1fr auto; column-gap: 32px; }
  .pie-abajo a { grid-column: 2; grid-row: 1; }
}

/* WhatsApp flotante */
.whatsapp {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--tinta); color: var(--blanco);
  text-decoration: none;
  transition: transform 160ms var(--salida);
}
.whatsapp svg { width: 26px; height: 26px; }
.whatsapp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.whatsapp:hover { transform: translateY(-2px); }
.whatsapp:active { transform: scale(0.97); }

/* ───────── Páginas secundarias ───────── */
.hoja { position: relative; isolation: isolate; min-height: 80svh; padding: clamp(64px, 10vw, 140px) var(--margen); color: var(--blanco); }
.hoja-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hoja::after { content: ""; position: absolute; inset: 0; background: var(--velo); z-index: -1; }
.hoja h1 { font-size: clamp(3rem, 1.4rem + 6vw, 7rem); line-height: 0.95; max-width: 14ch; }
.hoja-lede { font-size: var(--t-lead); line-height: 1.35; max-width: 40ch; margin-top: 28px; }
.hoja .acciones { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 36px; }
.legal { padding: clamp(64px, 8vw, 120px) var(--margen); }
.legal-rejilla { display: grid; gap: 32px; }
.legal-rejilla > h1 { font-size: clamp(3rem, 1.4rem + 5vw, 6rem); line-height: 0.95; }
.legal-texto { max-width: 62ch; }
.legal-texto h2 { font-size: var(--t-lead); line-height: 1.2; margin: 40px 0 10px; }
.legal-texto p + p { margin-top: 12px; }
.legal-texto .boton { margin-top: 40px; }
.hoja-lede-legal { font-size: var(--t-lead); line-height: 1.35; }
.fecha-legal { color: var(--musgo); margin-top: 8px; }
@media (min-width: 900px) {
  .legal-rejilla { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .legal-rejilla > h1 { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--cabecera) + 32px); }
  .legal-texto { grid-column: 7 / 13; }
}

/* ───────── Movimiento ───────── */
@media (prefers-reduced-motion: no-preference) {
  .frase-a, .frase-b { animation: aparecer 900ms var(--salida) both; }
  .frase-b { animation-delay: 140ms; }
  .marco-dia { animation: aparecer 900ms var(--salida) 240ms both; }
  .portada-pie { animation: aparecer 700ms var(--salida) 420ms both; }
  .hoja h1, .hoja-lede, .hoja .acciones { animation: aparecer 700ms var(--salida) both; }
  .hoja-lede { animation-delay: 90ms; }
  .hoja .acciones { animation-delay: 180ms; }
  .ficha .boton, .ficha-lista li { transition: transform 200ms var(--salida); }

  /* Entradas al hacer scroll: solo si movimiento.js cargó */
  .js [data-revela] { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--salida), transform 600ms var(--salida); }
  .js [data-revela].visible { opacity: 1; transform: none; }
  .js .paso-verbo { opacity: 0.001; transform: translateY(0.12em); transition: opacity 700ms var(--salida), transform 900ms var(--salida); }
  .js .paso.visible .paso-verbo { opacity: 1; transform: none; }
  .js .paso img { transform: scale(1.08); transition: transform 1800ms var(--salida); }
  .js .paso.visible img { transform: none; }
  .js .refugio-foto { transform: scale(1.04); transition: transform 1800ms var(--salida); }
  .js .refugio.visible .refugio-foto { transform: none; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Aviso que agrega construir.mjs debajo del formulario (igual en todas las demos) */
.aviso-vitrina { grid-column: 1 / -1; margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid #2340ff; background: rgba(35, 64, 255, 0.08); border-radius: 0 8px 8px 0; font-size: 0.9rem; line-height: 1.45; }
.aviso-vitrina a { font-weight: 700; color: inherit; text-underline-offset: 3px; }