/* ═══════════════════════════════════════════════════════════════════
   Camping Prado Verde · Licán Ray
   Demo de presentación — plantilla base de la tanda T1 (alojamiento)

   La paleta sale del lugar, no de un generador: la arena del Calafquén
   es volcánica y negra, el prado en enero está entre verde y hueso, y
   el naranjo es el del carbón del quincho. Nada de azul turismo.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* superficie */
  --prado:        #E9ECDF;   /* pasto de enero al sol — el fondo */
  --prado-hondo:  #DDE2D0;   /* la misma superficie, un tono adentro */
  --papel:        #F4F6EE;   /* tarjetas */

  /* tinta */
  --arena:        #23261D;   /* arena volcánica: el color del texto */
  --arena-suave:  #5C6152;   /* texto secundario */

  /* acentos */
  --agua:         #2C5754;   /* el Calafquén en sombra */
  --conifera:     #46583A;   /* copa de los árboles */
  --brasa:        #BF4318;   /* carbón encendido del quincho */
  --brasa-texto:  #A83A14;   /* la misma brasa, apta para texto chico */
  --sol:          #E0A03C;   /* luz de las ocho de la tarde */

  /* mapa */
  --sec-a:        #CFD9C4;
  --sec-b:        #B9C7AC;
  --sec-c:        #DFDAC5;
  --sec-d:        #C6D1CD;
  --arena-playa:  #4A4438;
  --prado-mapa:   #DCE2D0;
  --tierra:       #BCB199;
  --tierra-linea: #8C816B;

  /* tipografía */
  --display: "Familjen Grotesk", "Trebuchet MS", sans-serif;
  --cuerpo:  "Instrument Sans", "Segoe UI", sans-serif;
  --dato:    "Spline Sans Mono", ui-monospace, "Consolas", monospace;

  /* medidas */
  --ancho: 1120px;
  --radio: 10px;
  --borde: 1px solid color-mix(in srgb, var(--arena) 16%, transparent);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--prado);
  color:var(--arena);
  font-family:var(--cuerpo);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }
/* Sin esto, el toque en un enlace espera ~300 ms por si viene un doble
   tap de zoom. En una página que se navega a botonazos, se siente lenta. */
a, button{ touch-action:manipulation; }

img,svg{ max-width:100%; }

:focus-visible{
  outline:3px solid var(--brasa);
  outline-offset:3px;
  border-radius:4px;
}

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--arena); color:var(--prado);
  padding:.8rem 1.2rem; font-weight:600; text-decoration:none;
}
.saltar:focus{ left:1rem; top:1rem; }

.caja{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }

.ojo{
  font-family:var(--dato);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--agua);
  margin:0 0 1rem;
}
.ojo--claro{ color:var(--sol); }

/* ── marcador de dato de ejemplo ─────────────────────────────────
   Todo lo que lleva .ej es relleno. Se ve a simple vista para poder
   decir en la reunión "esto se completa con sus datos reales", y se
   borra junto con la clase cuando el dato llega.                    */
.ej{
  position:relative;
  outline:1px dashed color-mix(in srgb, var(--brasa) 45%, transparent);
  outline-offset:10px;
  border-radius:2px;
}
.ej::after{
  content:"ejemplo";
  position:absolute; top:-10px; right:-10px;
  transform:translateY(-100%);
  font-family:var(--dato); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brasa-texto);
  background:var(--prado);
  padding:0 .4rem;
  pointer-events:none;
}
.ej--inline{
  display:inline; outline-offset:3px; color:var(--brasa-texto);
  font-weight:600;
}
.ej--inline::after{ content:none; }

/* ── banda de propuesta ──────────────────────────────────────────── */
.propuesta{ background:var(--arena); color:var(--prado); }
.propuesta__cinta{
  width:min(100% - 2.5rem, var(--ancho));
  margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.1rem;
  padding:.7rem 0;
  font-size:.86rem;
}
.propuesta__marca{
  font-family:var(--dato); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--arena); background:var(--sol);
  padding:.28rem .6rem; border-radius:3px;
  white-space:nowrap;
}
.propuesta__txt{ margin:0; flex:1 1 22rem; color:color-mix(in srgb,var(--prado) 88%, transparent); }
.propuesta__txt strong{ color:var(--prado); }
.propuesta__txt code{ font-family:var(--dato); font-size:.9em; color:var(--sol); }
.propuesta__link{
  font-weight:600; color:var(--sol);
  text-underline-offset:4px; white-space:nowrap;
  /* 44 px es lo que acierta un dedo. Medía 22. */
  display:inline-flex; align-items:center; min-height:44px;
}

/* ── cabecera ────────────────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--prado) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--borde);
}
.cabecera__caja{
  width:min(100% - 2.5rem, var(--ancho));
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 0;
}
.marca{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--conifera); min-height:44px; }
.marca__icono{ width:30px; height:30px; flex:none; }
.marca__txt{
  font-family:var(--display); font-weight:700; font-size:1.08rem;
  line-height:1.05; color:var(--arena);
  display:flex; flex-direction:column;
}
.marca__txt small{
  font-family:var(--dato); font-weight:400; font-size:.6rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--arena-suave);
  margin-top:.18rem;
}
.nav{ display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; }
.nav a{
  text-decoration:none; font-size:.9rem; font-weight:500;
  padding:.45rem .7rem; border-radius:6px; color:var(--arena-suave);
}
.nav a:hover{ color:var(--arena); background:var(--prado-hondo); }
.nav__cta{
  background:var(--arena); color:var(--prado) !important;
  font-weight:600;
}
.nav__cta:hover{ background:var(--brasa-texto); }

/* ── botones ─────────────────────────────────────────────────────── */
.boton{
  display:inline-block;
  font-family:var(--cuerpo); font-weight:600; font-size:.95rem;
  padding:.82rem 1.4rem; border:1px solid transparent; border-radius:7px;
  text-decoration:none; cursor:pointer;
  transition:transform .16s ease, background-color .16s ease, color .16s ease;
}
.boton:hover{ transform:translateY(-2px); }
.boton--brasa{ background:var(--brasa); color:#fff; }
.boton--brasa:hover{ background:var(--brasa-texto); }
.boton--linea{ border-color:color-mix(in srgb,var(--arena) 30%,transparent); color:var(--arena); }
.boton--linea:hover{ background:var(--prado-hondo); }
.boton--sol{ background:var(--sol); color:var(--arena); }
.boton--sol:hover{ background:#EEB255; }
.boton--linea-claro{ border-color:color-mix(in srgb,var(--prado) 40%,transparent); color:var(--prado); }
.boton--linea-claro:hover{ background:color-mix(in srgb,var(--prado) 12%,transparent); }

/* ── portada ─────────────────────────────────────────────────────── */
.portada{ position:relative; padding:clamp(3rem,7vw,5.5rem) 0 0; overflow:hidden; }
.portada__caja{
  width:min(100% - 2.5rem, var(--ancho));
  margin-inline:auto;
  padding-bottom:clamp(5rem,11vw,8rem);
}
.portada__titulo{
  font-size:clamp(2.5rem, 1.4rem + 5.2vw, 5.1rem);
  max-width:16ch;
  margin-bottom:1.5rem;
}
.portada__bajada{
  max-width:52ch; font-size:1.1rem; color:var(--arena-suave);
  margin-bottom:2rem;
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:3rem; }

.credenciales{ display:flex; flex-wrap:wrap; gap:2.5rem; margin:0; }
.credenciales__item dt{
  font-family:var(--dato); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--arena-suave); margin-bottom:.35rem;
}
.credenciales__item dd{
  margin:0; display:flex; align-items:baseline; gap:.55rem;
  font-family:var(--display);
}
.credenciales__item dd strong{ font-size:1.7rem; font-weight:700; line-height:1; }
.credenciales__item dd span{
  font-family:var(--cuerpo); font-size:.86rem; color:var(--arena-suave);
}

.ribera{ position:absolute; inset:auto 0 0 0; line-height:0; pointer-events:none; }
.ribera svg{ width:100%; height:clamp(70px,9vw,120px); display:block; }
.ribera__ola--1{ fill:color-mix(in srgb, var(--agua) 22%, var(--prado)); }
.ribera__ola--2{ fill:color-mix(in srgb, var(--agua) 40%, var(--prado)); }
.ribera__arena{ fill:var(--prado-hondo); }

/* ── secciones ───────────────────────────────────────────────────── */
.seccion{ padding:clamp(3.5rem,7vw,6rem) 0; }
.plano{ background:var(--prado-hondo); }
.reglas{ background:var(--prado-hondo); }
.hablemos{ background:var(--arena); color:var(--prado); }

.titular{ max-width:60ch; margin:0 auto clamp(2.2rem,4vw,3.2rem); text-align:center; }
.titular--izq{ margin-inline:0; text-align:left; }
.titular h2{ font-size:clamp(1.85rem,1.2rem + 2.4vw,2.9rem); margin-bottom:.9rem; }
.titular__bajada{ color:var(--arena-suave); margin:0; }

/* ── el plano ────────────────────────────────────────────────────── */
.plano__pieza{ display:grid; gap:2rem; }
.mapa{ margin:0; background:var(--papel); border:var(--borde); border-radius:var(--radio); padding:.6rem; overflow:hidden; }
.mapa svg{ display:block; width:100%; height:auto; border-radius:6px; }

.mapa__letra{ font-family:var(--display); font-size:34px; font-weight:700; fill:var(--arena); opacity:.32; }
.mapa__nom{ font-family:var(--display); font-size:20px; font-weight:700; fill:var(--arena); }
.mapa__dato{ font-family:var(--cuerpo); font-size:13px; fill:var(--arena-suave); }
.mapa__dist{ font-family:var(--dato); font-size:12px; letter-spacing:.08em; fill:var(--brasa-texto); }
.mapa__serv{ font-family:var(--dato); font-size:11px; letter-spacing:.1em; fill:var(--prado); text-anchor:middle; text-transform:uppercase; }
.mapa__borde{ font-family:var(--dato); font-size:12px; letter-spacing:.22em; fill:var(--prado); opacity:.85; }
.mapa__borde--tierra{ fill:var(--arena-suave); opacity:.7; }

.leyenda{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.leyenda li{ display:flex; align-items:baseline; gap:.7rem; font-size:.93rem; color:var(--arena-suave); }
.leyenda b{ color:var(--arena); }
.leyenda__color{
  flex:none; width:14px; height:14px; border-radius:3px;
  border:1px solid color-mix(in srgb,var(--arena) 35%,transparent);
  transform:translateY(2px);
}

@media (min-width:920px){
  .plano__pieza{ grid-template-columns:1.65fr 1fr; align-items:start; gap:2.6rem; }
  .leyenda{ position:sticky; top:6.5rem; }
}

/* ── tarifas ─────────────────────────────────────────────────────── */
.rejilla-tarifas{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  margin-bottom:2.2rem;
}
.tarifa{
  background:var(--papel); border:var(--borde); border-radius:var(--radio);
  padding:1.5rem 1.35rem;
  display:flex; flex-direction:column;
}
.tarifa--destacada{ border-color:var(--brasa); box-shadow:0 0 0 1px var(--brasa); }
.tarifa__sector{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--agua); margin-bottom:1rem;
}
.tarifa__precio{
  font-family:var(--display); font-size:2.4rem; font-weight:700;
  line-height:1; letter-spacing:-.03em; margin-bottom:1.2rem;
  display:flex; align-items:baseline; gap:.15rem; flex-wrap:wrap;
}
.tarifa__precio span{ font-size:1.3rem; color:var(--arena-suave); }
.tarifa__precio small{
  flex-basis:100%; font-family:var(--cuerpo); font-size:.78rem;
  font-weight:400; color:var(--arena-suave); margin-top:.4rem;
}
.tarifa__lista{ list-style:none; margin:0 0 auto; padding:0; display:grid; gap:.45rem; }
.tarifa__lista li{
  font-size:.9rem; color:var(--arena-suave);
  padding-left:1.1rem; position:relative;
}
.tarifa__lista li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--conifera);
}
.tarifa__nota{
  margin:1.2rem 0 0; padding-top:.9rem;
  border-top:var(--borde);
  font-size:.82rem; color:var(--brasa-texto); font-weight:500;
}

.letra-chica{
  display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  font-size:.88rem; color:var(--arena-suave);
}
.letra-chica p{ margin:0; }
.letra-chica b{ color:var(--arena); }

/* ── qué incluye ─────────────────────────────────────────────────── */
.rejilla-iconos{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.6rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.ficha__icono{ width:38px; height:38px; color:var(--agua); margin-bottom:.7rem; }
.ficha h3{ font-size:1.12rem; margin-bottom:.4rem; }
.ficha p{ margin:0; font-size:.93rem; color:var(--arena-suave); }

/* ── cómo llegar ─────────────────────────────────────────────────── */
.caja--doble{ display:grid; gap:2.5rem; }
@media (min-width:880px){
  .caja--doble{ grid-template-columns:1.15fr 1fr; align-items:center; gap:3.5rem; }
}

.ruta{ list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:0; }
.ruta li{
  display:grid; grid-template-columns:5.5rem 1fr; gap:1rem;
  padding:1rem 0; border-top:var(--borde);
}
.ruta li:last-child{ border-bottom:var(--borde); }
.ruta__km{
  font-family:var(--dato); font-size:.82rem; color:var(--brasa-texto);
  letter-spacing:.05em;
}
.ruta p{ margin:0; font-size:.95rem; color:var(--arena-suave); }
.ruta b{ color:var(--arena); }
.llegar__nota{ font-size:.9rem; color:var(--arena-suave); max-width:46ch; }

.hueco-foto__marco{
  background:var(--prado-hondo);
  border:1px dashed color-mix(in srgb,var(--arena) 28%,transparent);
  border-radius:var(--radio);
  padding:2.5rem 1.8rem; text-align:center;
  min-height:20rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
}
.hueco-foto__marco svg{ width:52px; height:52px; color:var(--arena-suave); opacity:.7; }
.hueco-foto__marco p{ margin:0; }
.hueco-foto__pie{ font-size:.88rem; color:var(--arena-suave); max-width:32ch; }

/* ── reglas ──────────────────────────────────────────────────────── */
.rejilla-reglas{
  margin:0; display:grid; gap:1.4rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.rejilla-reglas dt{
  font-family:var(--display); font-weight:700; font-size:1.08rem;
  margin-bottom:.35rem;
}
.rejilla-reglas dd{ margin:0; font-size:.93rem; color:var(--arena-suave); }

/* ── formulario ──────────────────────────────────────────────────── */
.form{
  background:var(--papel); border:var(--borde); border-radius:var(--radio);
  padding:clamp(1.4rem,3vw,2.2rem);
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-bottom:1.8rem;
}
.campo{ display:flex; flex-direction:column; gap:.35rem; }
.campo--ancho{ grid-column:1/-1; }
.campo label{ font-size:.85rem; font-weight:600; }
.campo__opc{ font-weight:400; color:var(--arena-suave); }
.campo input,.campo select,.campo textarea{
  font-family:var(--cuerpo); font-size:.95rem; color:var(--arena);
  background:var(--prado);
  border:1px solid color-mix(in srgb,var(--arena) 22%,transparent);
  border-radius:6px; padding:.72rem .75rem;
  width:100%;
}
.campo textarea{ resize:vertical; }
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  border-color:var(--brasa);
}
.form__pie{
  grid-column:1/-1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; padding-top:.6rem; border-top:var(--borde);
}
.form__resumen{ margin:0; font-family:var(--dato); font-size:.83rem; color:var(--arena-suave); }

.contacto{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  background:color-mix(in srgb,var(--arena) 14%,transparent);
  border:var(--borde); border-radius:var(--radio); overflow:hidden;
}
.contacto__item{
  background:var(--prado); padding:1.1rem 1.25rem;
  display:flex; flex-direction:column; gap:.25rem; text-decoration:none;
}
a.contacto__item:hover{ background:var(--papel); }
.contacto__item span{
  font-family:var(--dato); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--arena-suave);
}
.contacto__item strong{ font-size:.95rem; font-weight:600; }

/* ── la propuesta ────────────────────────────────────────────────── */
.hablemos__titulo{
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);
  max-width:20ch; margin-bottom:2.5rem;
}
.hablemos__rejilla{
  display:grid; gap:1.8rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-bottom:2.5rem;
}
.hablemos h3{
  font-size:1.05rem; color:var(--sol); margin-bottom:.5rem;
}
.hablemos p{ color:color-mix(in srgb,var(--prado) 82%, transparent); font-size:.95rem; }
.hablemos code{ font-family:var(--dato); font-size:.9em; color:var(--sol); }
.hablemos .ej--inline{ color:var(--sol); outline-color:color-mix(in srgb,var(--sol) 55%,transparent); }
.hablemos__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ── pie ─────────────────────────────────────────────────────────── */
.pie{ background:var(--prado-hondo); padding:2.5rem 0; border-top:var(--borde); }
.caja--pie{ display:grid; gap:.5rem; }
.pie__marca{ font-family:var(--display); font-weight:600; margin:0; }
.pie__nota{ margin:0; font-size:.85rem; color:var(--arena-suave); max-width:62ch; }
.pie__nota a{ color:var(--brasa-texto); font-weight:600; }

/* ── movimiento ──────────────────────────────────────────────────
   Dos mecanismos distintos, y la diferencia importa:

   · La PORTADA entra con @keyframes al cargar. No pasa por el
     IntersectionObserver a propósito. Un observer que no dispare —
     por la razón que sea — dejaría el primer pantallazo en blanco,
     y ese es el único error que un sitio comercial no puede cometer.
   · De la portada hacia abajo sí manda el observer, porque ahí el
     disparo depende del scroll de verdad.

   Los estados ocultos cuelgan de .js: si el script del <head> no
   corre, la página se ve entera, sólo que quieta.                  */

@keyframes entrar{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}

/* Sin clase intermedia y sin JavaScript: la animación arranca sola en
   cuanto el navegador aplica esta hoja. Una versión anterior esperaba
   a que main.js pusiera una clase dentro de requestAnimationFrame, y
   eso se cuelga entero si la pestaña se abre en segundo plano —Chrome
   no corre rAF en pestañas ocultas—. Le mandas el enlace por WhatsApp,
   lo abre en otra pestaña, y ve la portada en blanco. */
.js .portada__titulo,
.js .portada__bajada,
.js .portada__acciones,
.js .credenciales{
  animation:entrar .75s cubic-bezier(.22,.8,.3,1) both;
}
.js .portada__titulo   { animation-delay:.04s; }
.js .portada__bajada   { animation-delay:.16s; }
.js .portada__acciones { animation-delay:.26s; }
.js .credenciales      { animation-delay:.36s; }

.js .revelar{ opacity:0; transform:translateY(22px); }
.js .revelar.visible{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1);
}
.js .revelar.visible.retardo-1{ transition-delay:.08s; }
.js .revelar.visible.retardo-2{ transition-delay:.16s; }
.js .revelar.visible.retardo-3{ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  /* Se apaga lo que se mueve solo. Los fundidos y los hover se dejan:
     apagarlos deja el sitio con cara de muerto — y en Windows esta
     preferencia viene activada de fábrica en muchas máquinas. */
  html{ scroll-behavior:auto; }
  .js .revelar{ transform:none; }
  .js .revelar.visible{ transition-duration:.3s; }
  .js .portada__titulo,
  .js .portada__bajada,
  .js .portada__acciones,
  .js .credenciales{ animation-duration:.3s; animation-delay:0s; }
  .boton:hover{ transform:none; }
}

/* ── móvil ───────────────────────────────────────────────────────── */
@media (max-width:640px){
  /* La cabecera pasa a dos filas y el menú se desliza de lado.
     La versión anterior escondía todo salvo "Reservar", y en un
     teléfono —que es donde se va a abrir este enlace— dejaba a la
     gente sin manera de llegar a Tarifas. */
  .cabecera__caja{ flex-wrap:wrap; gap:.3rem; padding:.6rem 0 .1rem; }
  .marca{ flex:1 1 auto; }
  .nav{
    flex:1 0 100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:-1.25rem;
    padding:.1rem 1.25rem .5rem;
  }
  .nav::-webkit-scrollbar{ display:none; }
  /* 44 px es el mínimo que un dedo acierta sin pelear. Con el padding
     de escritorio estos enlaces quedaban en 38. */
  .nav a{ flex:none; white-space:nowrap; padding:.68rem .8rem; }

  .credenciales{ gap:1.5rem 2rem; }
  .ej{ outline-offset:6px; }
  .ej::after{ top:-6px; right:-6px; }
}

/* ═══════════════════════════════════════════════════════════════════
   LAS FOTOGRAFÍAS
   ──────────────────────────────────────────────────────────────────
   Seis maneras distintas de meter una foto, y ninguna es "tarjeta con
   imagen arriba". El criterio para elegir cuál va en cada sección:

   · difuminada de fondo  → cuando la foto es AMBIENTE y manda el texto
   · panel a sangre       → cuando la foto ES el argumento
   · lateral desbordada   → cuando acompaña a una lista y hay que anclarla
   · mural                → cuando son muchas y ninguna es la principal
   · tira deslizable      → cuando son detalles que se ojean, no se miran
   · par superpuesto      → cuando dos fotos se explican juntas

   Todas las fotos son AVIF: pesan la mitad que un JPEG a igual calidad y
   el soporte hoy es prácticamente universal. El servidor local necesitó
   que se le agregara el mime type; GitHub Pages ya lo sirve bien.

   El parallax va con animaciones ligadas al scroll (`animation-timeline:
   view()`), dentro de @supports y moviendo SÓLO transform. Nada de
   background-attachment:fixed, que está roto en móvil, y nada de mover
   `top` en cada frame, que obliga al navegador a recalcular el layout.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · PORTADA: fondo fotográfico difuminado ────────────────────
   La foto no compite con el titular: entra desenfocada y con un velo
   encima. El desenfoque no es decoración — es lo que permite que un
   texto oscuro se apoye sobre una foto sin medir cada pixel, porque
   elimina el detalle de alta frecuencia que rompe la lectura.
   El SVG dibujado de la ribera sigue mandando abajo: la foto va DETRÁS
   de todo, incluido él. */
.portada__fondo{
  position:absolute; inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.portada__fondo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 62%;
  /* La escala compensa el blur: sin ella el desenfoque deja el borde
     de la foto transparente y se ve el corte. */
  transform:scale(1.12);
  filter:blur(10px) saturate(1.2);
  opacity:.85;
}
/* El velo garantiza el contraste del titular pase lo que pase en la
   foto. Es más denso arriba a la izquierda, que es donde vive el texto. */
.portada__velo{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    /* Denso sobre la columna del texto, casi abierto en el tercio
       derecho: ahí la foto respira y se ve que es una foto. El corte
       está en 58 %, que es donde termina el titular más largo. */
    linear-gradient(100deg,
      color-mix(in srgb, var(--prado) 94%, transparent) 0%,
      color-mix(in srgb, var(--prado) 90%, transparent) 40%,
      color-mix(in srgb, var(--prado) 44%, transparent) 60%,
      color-mix(in srgb, var(--prado) 10%, transparent) 80%,
      color-mix(in srgb, var(--prado)  4%, transparent) 100%),
    /* El de arriba abajo sólo cierra los dos extremos: arriba para que la
       cabecera no flote sobre el follaje, abajo para que la ribera
       dibujada se apoye en color plano y no en una foto. */
    linear-gradient(180deg,
      color-mix(in srgb, var(--prado) 40%, transparent) 0%,
      transparent 26%,
      transparent 62%,
      color-mix(in srgb, var(--prado) 72%, transparent) 100%);
}
/* En pantallas angostas el texto ocupa TODO el ancho, así que el velo en
   diagonal deja de tener sentido: la franja abierta de la derecha quedaría
   con párrafo encima y foto nítida debajo. Acá el velo es parejo y la foto
   pasa a ser textura. */
@media (max-width:879px){
  .portada__velo{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--prado) 92%, transparent) 0%,
        color-mix(in srgb, var(--prado) 88%, transparent) 55%,
        color-mix(in srgb, var(--prado) 93%, transparent) 100%);
  }
}

.portada__caja{ position:relative; z-index:2; }
.portada .ribera{ z-index:2; }

/* ── el polen ─────────────────────────────────────────────────────
   Un canvas con motas de polen a contraluz, dibujado a mano en main.js:
   la firma de movimiento de esta plantilla (una sola por sitio). Vive
   entre el velo y el texto; pointer-events:none para que jamás tape un
   botón. Si el JS no corre, el canvas queda vacío y no se nota. */
.portada__polen{
  position:absolute; inset:0;
  /* Un canvas es un elemento REEMPLAZADO: inset:0 lo posiciona pero NO
     lo dimensiona — sin esto usa su atributo width (los píxeles del
     buffer, que van multiplicados por el DPR) y se pinta al doble del
     tamaño. width/height explícitos separan el tamaño CSS del buffer. */
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
}

/* Parallax de la portada: la foto sube un poco más lento que la página.
   4 % es deliberadamente poco — el parallax que se nota se siente barato. */
@supports (animation-timeline: view()){
  .portada__fondo img{
    animation:foto-sube-poco linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes foto-sube-poco{
    from{ transform:scale(1.12) translateY(-3%); }
    to  { transform:scale(1.12) translateY(3%); }
  }
}

/* ── 2 · PANEL A SANGRE con parallax ──────────────────────────────
   Ocupa el ancho completo de la ventana y se recorta a una franja baja.
   La foto es más alta que la franja a propósito: ese sobrante es el
   recorrido del parallax. */
.panel{
  position:relative;
  margin:0;
  overflow:hidden;              /* acá SÍ se recorta: es un marco */
  background:var(--arena);
  isolation:isolate;
}
.panel__foto{
  width:100%;
  height:clamp(360px, 52vw, 680px);
  object-fit:cover;
  object-position:center 55%;
  display:block;
}
@supports (animation-timeline: view()){
  .panel__foto{
    height:clamp(400px, 58vw, 740px);
    animation:panel-parallax linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes panel-parallax{
    from{ transform:translateY(-6%) scale(1.14); }
    to  { transform:translateY(6%)  scale(1.14); }
  }
}
.panel__pie{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:3.5rem var(--canal-panel, clamp(1.25rem,5vw,3rem)) 1.1rem;
  color:var(--prado);
  /* Medido contra el pixel más claro de la franja del texto, no a ojo. */
  background:linear-gradient(180deg, transparent, rgb(18 20 14 / .82));
}
.panel__pie b{ font-family:var(--display); font-weight:600; }
.panel__pie span{
  display:block;
  font-family:var(--dato); font-size:.72rem; letter-spacing:.1em;
  color:color-mix(in srgb, var(--prado) 82%, transparent);
  margin-top:.2rem;
}

/* ── 3 · LATERAL DESBORDADA ───────────────────────────────────────
   La foto se sale del contenedor hacia el borde de la ventana. Rompe la
   caja sin romper el layout: el ancho extra se calcula con la mitad del
   sobrante entre la ventana y la caja, así que nunca genera scroll
   horizontal por más que se estire la pantalla. */
.lateral{
  position:relative;
  margin:0;
  border-radius:var(--radio);
  overflow:hidden;
}
.lateral img{
  width:100%;
  height:clamp(260px, 46vw, 460px);
  object-fit:cover;
  display:block;
}
.lateral figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.75rem 1.1rem .9rem;
  font-size:.85rem;
  color:var(--prado);
  background:linear-gradient(180deg, transparent, rgb(18 20 14 / .8));
}
@media (min-width:880px){
  .lateral{
    /* Hasta el borde derecho de la ventana. Ojo con 100vw: NO descuenta
       la barra de scroll, así que por sí solo se pasa 15 px y aparece
       scroll horizontal. El guardia es el overflow-x:clip de <main>, que
       recorta el sobrante sin convertirse en contenedor de scroll — con
       overflow:hidden se rompería el sticky de la cabecera. */
    width:calc(100% + max(0px, (100vw - var(--ancho)) / 2));
    border-radius:var(--radio) 0 0 var(--radio);
  }
  .lateral img{ height:clamp(360px, 34vw, 520px); }
}

/* El guardia del sangrado lateral. Va en <main> y no en <body> para no
   tocar el sticky de la cabecera, que vive fuera. */
main{ overflow-x:clip; }

/* ── 4 · MURAL ────────────────────────────────────────────────────
   Rejilla de doce con tres piezas grandes. `dense` deja que las chicas
   retrocedan a tapar los huecos que dejan las grandes; sin eso quedan
   agujeros y parece un error de maquetado. */
.mural{
  list-style:none; margin:0; padding:0;
  display:grid;
  gap:clamp(.5rem, 1.4vw, .85rem);
  grid-template-columns:repeat(2, minmax(0,1fr));
  /* El alto de la fila lo fija el GRID, no el contenido. Con filas
     "auto", cada fila tomaba el alto de su pieza más alta y las celdas
     vecinas quedaban cortas, con aire muerto debajo: el mural se veía
     desnivelado. Con la fila explícita, cada pieza llena su celda y
     todo queda a ras, cargue lo que cargue. */
  grid-auto-rows:clamp(120px, 34vw, 190px);
  grid-auto-flow:dense;
}
@media (min-width:700px){
  .mural{
    grid-template-columns:repeat(4, minmax(0,1fr));
    grid-auto-rows:clamp(140px, 16vw, 230px);
  }
}
/* La proporción la declara el MARCO (el li), nunca la imagen. La imagen
   sólo llena el marco con width/height 100%. La lección que obligó a
   esto: una <img> con atributos width/height del HTML y un CSS que no
   declara height usa el ATRIBUTO como altura — el aspect-ratio de CSS se
   ignora y una foto apaisada de 720×480 se pinta como una columna de
   260×480 deformada. Con el alto amarrado al contenedor no hay caso. */
.mural li{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--radio);
  background:var(--prado-hondo);
}
.mural img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.mural li:hover img{ transform:scale(1.05); }
@media (min-width:700px){
  .mural li.es-alta{ grid-row:span 2; }
  .mural li.es-ancha{ grid-column:span 2; }
}
.mural figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.75rem .7rem .55rem;
  font-family:var(--dato); font-size:.62rem; letter-spacing:.07em;
  color:var(--prado);
  background:linear-gradient(180deg, transparent, rgb(18 20 14 / .78));
  pointer-events:none;
}

/* ── 5 · TIRA DESLIZABLE ──────────────────────────────────────────
   Detalles que se ojean. Se desliza con el dedo y engancha en cada
   foto con scroll-snap: cero JavaScript, cero librería de carrusel. */
/* Una tira de cine de verdad: TODAS las fotos comparten la misma altura
   y cada una toma el ancho que su orientación pide — las apaisadas van
   anchas, las verticales angostas. Antes todas iban en un marco vertical
   fijo y las apaisadas quedaban deformadas o rebanadas. La altura vive
   en una variable y los anchos se derivan de ella, así la fila nunca
   queda dispareja. */
.tira{
  --tira-alto: clamp(200px, 40vw, 280px);
  list-style:none; margin:0 0 .5rem; padding:0 0 .6rem;
  display:flex; gap:.75rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  /* Sale de la caja para que la última foto se asome por el borde y se
     entienda que hay más. El sangrado es 1.25rem porque ese es el canal
     real de .caja (min(100% - 2.5rem, ancho)): con un clamp mayor la
     tira quedaba desalineada del resto del contenido. */
  margin-inline:-1.25rem;
  padding-inline:1.25rem;
}
.tira li{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:calc(var(--tira-alto) * 4 / 3);
}
.tira li.es-vertical{ width:calc(var(--tira-alto) * 3 / 4); }
.tira img{
  width:100%; height:var(--tira-alto);
  object-fit:cover;
  border-radius:var(--radio); display:block;
}
.tira figcaption{
  margin-top:.5rem;
  font-family:var(--dato); font-size:.65rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--arena-suave);
}

/* ── 6 · PAR SUPERPUESTO ──────────────────────────────────────────
   Dos fotos que se explican juntas: una grande de fondo y una chica que
   se le monta encima y se sale de su esquina. La chica lleva un borde
   del color del fondo de la sección, que es lo que produce el recorte
   limpio sin necesidad de un PNG con transparencia. */
.par{
  position:relative;
  margin:0 0 clamp(2rem, 4vw, 3rem);
  padding-bottom:clamp(2.5rem, 7vw, 4.5rem);
}
/* Mismo principio que el mural: la proporción va en el marco y la foto
   lo llena. La grande es un marco APAISADO (16:10) y lleva una foto
   apaisada; la chica es un marco VERTICAL (3:4) y lleva una vertical.
   Antes era al revés en las dos y se veían rebanadas. */
.par__grande{
  margin:0;
  aspect-ratio:16 / 10;
  max-height:520px;
  overflow:hidden;
  border-radius:var(--radio);
}
.par__grande img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.par__chica{
  position:absolute;
  right:clamp(.5rem, 3vw, 2.5rem);
  bottom:0;
  width:clamp(130px, 30vw, 230px);
  aspect-ratio:3 / 4;
  margin:0;
  overflow:hidden;
  border-radius:var(--radio);
  border:6px solid var(--prado);
  box-shadow:0 18px 34px -20px rgb(35 38 29 / .6);
}
.par__chica img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* En la sección de fondo alterno el borde tiene que ser de ESE fondo,
   si no se ve un marco claro flotando sobre uno oscuro. */
.cabanas{ background:var(--prado-hondo); }
.cabanas .par__chica{ border-color:var(--prado-hondo); }
/* La etiqueta "ejemplo" se recorta contra el fondo de SU sección. */
.cabanas .ej::after{ background:var(--prado-hondo); }

/* Nota al pie de una sección, cuando no hay una caja .letra-chica que la
   envuelva. Va debajo de las fotos, no encima: primero se mira, después
   se lee la letra chica. */
.letra-chica-suelta{
  max-width:64ch;
  margin:clamp(1.5rem,3.5vw,2.25rem) 0 0;
  font-size:.86rem; line-height:1.6;
  color:var(--arena-suave);
}

/* Un enlace dentro de una frase no se puede volver ficha sin abrir un
   hueco en el párrafo. El padding vertical sobre inline-block le da los
   44 px de alto tocable, y el margen negativo devuelve el alto que ese
   padding le sumaba a la línea: el texto no se mueve ni un pixel. */
.enlace-suelto{
  display:inline-block;
  padding-block:.75rem;   /* con .65 el blanco quedaba en 43 px, justo bajo el mínimo */
  margin-block:-.75rem;
}

/* ── 7 · FONDO DIFUMINADO DE SECCIÓN ──────────────────────────────
   Igual que la portada pero al servicio de un bloque interior: la foto
   entra muy desenfocada y muy velada, sólo para que el bloque tenga
   temperatura y no sea un rectángulo de color plano. */
.con-foto{ position:relative; isolation:isolate; overflow:hidden; }
.con-foto__fondo{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.con-foto__fondo img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.1);
  filter:blur(22px) saturate(1.1);
  opacity:.5;
}
.con-foto__fondo::after{
  content:""; position:absolute; inset:0;
  background:color-mix(in srgb, var(--prado-hondo) 80%, transparent);
}

/* ── movimiento reducido ──────────────────────────────────────────
   Se apaga el parallax y el zoom del mural. Los fundidos y el velo se
   quedan: son legibilidad, no movimiento. */
@media (prefers-reduced-motion: reduce){
  .portada__fondo img,
  .panel__foto{ animation:none; }
  .mural img{ transition:none; }
  .mural li:hover img{ transform:none; }
}