/* Casa Porã · demo de la web
   Celular primero. Colores y tipografía en tokens; cada temporada pisa cuatro. */

:root {
  --azul: #23456A;
  --azul-rgb: 35, 69, 106;
  --azul-hondo: #1B3452;
  --noche: #13263A;
  --tinta: #1C2733;
  --tinta-suave: #4C5866;
  --blanco: #FFFFFF;
  --papel: #FBF9F5;
  --linea: rgba(28, 39, 51, .14);
  --linea-clara: rgba(255, 255, 255, .28);

  /* azul y blanco, como pide el brief */
  --fondo: #FAFAF7;
  --fondo-2: #EDF1F5;

  /* los dos que cambian con la temporada */
  --acento: #C46A88;
  --acento-texto: #93405D;
  /* el anillo del teclado: el acento sobre papel, blanco sobre foto o azul (ver más abajo) */
  --foco: var(--acento-texto);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* escala de títulos: la foto manda y el título acompaña */
  --t-h3: clamp(22px, 1.25rem + .4vw, 26px);
  --t-h2: clamp(28px, 1.3rem + 1.1vw, 38px);
  --t-h1: clamp(36px, 1.6rem + 2.4vw, 60px);
  --t-portada: clamp(32px, 1.5rem + 1.8vw, 52px);

  /* sombra azul noche de los velos sobre foto */
  --sombra-rgb: 10, 20, 30;

  --margen: 20px;
  --ancho: 1240px;
  --alto-cabecera: 64px;
  --seccion: 72px;
  --curva: cubic-bezier(.22, .61, .36, 1);

  /* movimiento: la entrada de los bloques y la respuesta al toque */
  --curva-entrada: cubic-bezier(.22, 1, .36, 1);
  --curva-toque: cubic-bezier(.2, 0, 0, 1);
  --toque: 120ms;
  --pulsado: .96;
  --pulsado-foto: .985;

  /* la cortina: cuánto se monta Experiencias sobre la naturaleza */
  --solape: 96px;
  --radio-tapa: 18px;

  /* hojas (Reservar, la ficha del evento): el velo de atrás y el alto de la cabecera, que es el asa */
  --hoja-velo: rgba(var(--sombra-rgb), .55);
  --hoja-cabeza: 48px;

  /* fotos grandes: el fondo y el aire de arriba, donde van el contador y la X */
  --lb-fondo: rgb(var(--sombra-rgb));
  --lb-aire: 60px;
  --lb-pie: 84px;
  --lb-costado: 0px;
}

/* Primavera: lapacho */
[data-temporada="primavera"] { --acento: #C46A88; --acento-texto: #93405D; }
/* Verano: monte */
[data-temporada="verano"] { --acento: #5E8C62; --acento-texto: #3B6142; }
/* Otoño: tierra colorada */
[data-temporada="otono"] { --acento: #B85B32; --acento-texto: #8A3F1E; }
/* Invierno: fogón */
[data-temporada="invierno"] { --acento: #C2924A; --acento-texto: #7A561C; }

@media (min-width: 900px) {
  :root { --margen: 40px; --alto-cabecera: 76px; --seccion: 120px; --solape: clamp(80px, 12vh, 140px); --radio-tapa: 28px; --lb-aire: 76px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--alto-cabecera); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 16px/1.7 var(--sans);
  letter-spacing: .01em;
  transition: background-color .6s var(--curva);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }

/* Cada toque responde: sin el resaltado del navegador, el :active es la única señal.
   Se anima scale, que es una propiedad suelta: no pisa los transform de la hamburguesa
   ni del carrusel. .boton y .flecha suman scale a su propia transición. */
:where(button, a, summary, label, [role=button]) { -webkit-tap-highlight-color: transparent; }
:where(.filtros button, a.opcion, .temporadas button, .idiomas button, .panel__cerrar, .hoja__cerrar, .cabecera__menu, .demo__boton, .lb__cerrar) {
  transition: scale var(--toque) var(--curva-toque);
}
:where(.boton, .flecha, .filtros button, a.opcion, .temporadas button, .idiomas button, .panel__cerrar, .hoja__cerrar, .cabecera__menu, .demo__boton, .lb__cerrar, .lb__flecha):active { scale: var(--pulsado); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
/* Sobre foto, azul o noche el acento no llega a 3:1: el anillo va en blanco. */
.demo, .hero, :root:not(.menu-abierto) .cabecera:not(.solida), .naturaleza, .destino, .huella, .novedades, .lb, .barra-edicion { --foco: var(--blanco); }
/* Las hojas reciben el foco ellas mismas cuando se abren con el dedo o el mouse:
   así la X no aparece enmarcada (Safari la marcaba con cada toque). */
.hoja:focus, .lb:focus, .panel:focus { outline: none; }
html.bloqueado { overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- marca ---------- */
.logo {
  display: block;
  width: 132px;
  aspect-ratio: 962 / 244;
  background: currentColor;
  -webkit-mask: url(../img/marca/logo.png) center / contain no-repeat;
          mask: url(../img/marca/logo.png) center / contain no-repeat;
}
.hoja-marca, .novedades__hoja {
  display: block;
  background: var(--acento);
  -webkit-mask: url(../img/marca/helecho.png) center / contain no-repeat;
          mask: url(../img/marca/helecho.png) center / contain no-repeat;
  transition: background-color .6s var(--curva);
}

/* ---------- tipografía ---------- */
.titulo {
  font: 500 var(--t-h2)/1.08 var(--serif);
  letter-spacing: -.005em;
  color: var(--azul);
  text-wrap: balance;
}
.titulo--claro { color: var(--blanco); }
/* solo en las cabeceras alineadas a la izquierda: en las centradas lo correría.
   La intro no lo lleva: con 18ch su título quedaba en tres renglones en es y pt. */
.seccion__cabeza .titulo { max-width: 18ch; }

.enlace, .boton, .filtros button, .cabecera__rotulo, .idiomas button {
  font: 500 12.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--azul);
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 11px) / 100% 1px no-repeat;
  transition: background-size .35s var(--curva), opacity var(--toque) var(--curva-toque);
}
.enlace:active { opacity: .6; }
.enlace--claro { color: var(--blanco); }
button.enlace { border: 0; padding: 0; cursor: pointer; }
@media (hover: hover) { .enlace:hover { background-size: 40% 1px; } }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s, color .3s, border-color .3s, scale var(--toque) var(--curva-toque);
}
.boton--claro { color: var(--blanco); }
.boton--lleno { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
@media (hover: hover) {
  .boton--claro:hover { background: var(--blanco); color: var(--azul); border-color: var(--blanco); }
  .boton--lleno:hover { background: var(--azul-hondo); }
}

/* ---------- franja de la demo ---------- */
.demo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--margen);
  background: var(--noche);
  color: rgba(255, 255, 255, .78);
  font-size: 12.5px;
  line-height: 1.3;
}
.demo__boton {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .2);
  background: none;
  color: var(--blanco);
  font-size: 12.5px;
}

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--alto-cabecera);
  padding: 0 calc(var(--margen) - 10px);
  color: var(--blanco);
  transition: background-color .35s var(--curva), color .35s var(--curva), box-shadow .35s;
}
.cabecera.solida, .menu-abierto .cabecera {
  background: var(--fondo);
  color: var(--azul);
  box-shadow: 0 1px 0 var(--linea);
}
.menu-abierto .cabecera { box-shadow: none; }
.cabecera__menu {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: none;
}
.hamburguesa { position: relative; width: 22px; height: 12px; }
.hamburguesa i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--curva);
}
.hamburguesa i:first-child { top: 0; }
.hamburguesa i:last-child { top: 10.5px; }
.menu-abierto .hamburguesa i:first-child { transform: translateY(5.25px) rotate(45deg); }
.menu-abierto .hamburguesa i:last-child { transform: translateY(-5.25px) rotate(-45deg); }
.cabecera__rotulo { display: none; }
.cabecera__logo { display: block; color: inherit; padding: 8px 0; }
.cabecera__logo .logo { width: 118px; }
.cabecera__der { justify-self: end; display: flex; align-items: center; gap: 18px; padding-right: 10px; }
.cabecera .idiomas { display: none; }
.cabecera__reservar { min-height: 44px; padding: 0 14px; }
@media (min-width: 900px) {
  .cabecera__rotulo { display: inline; }
  .cabecera__logo .logo { width: 150px; }
  .cabecera .idiomas { display: flex; }
  .cabecera__reservar { min-height: 44px; padding: 0 22px; }
}
@media (hover: hover) {
  .cabecera:not(.solida) .cabecera__reservar:hover { background: var(--blanco); color: var(--azul); border-color: var(--blanco); }
  .cabecera.solida .cabecera__reservar:hover { background: var(--azul); color: var(--blanco); }
}

.idiomas { display: flex; gap: 2px; }
.idiomas button {
  min-width: 36px;
  min-height: 44px;
  border: 0;
  background: none;
  opacity: .6;
}
.idiomas button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }

/* ---------- menú ---------- */
.menu {
  position: fixed;
  inset: var(--alto-cabecera) 0 0;
  z-index: 29;
  display: grid;
  background: var(--fondo);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: aparecer .35s var(--curva);
}
.menu[hidden] { display: none; }
.menu__lista { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 16px var(--margen) 32px; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { border-bottom: 1px solid var(--linea); }
.menu li a {
  display: flex;
  align-items: center;
  min-height: 60px;
  font: 500 28px/1.1 var(--serif);
  color: var(--azul);
  text-decoration: none;
}
.idiomas--menu { flex-wrap: wrap; gap: 4px 16px; }
.idiomas--menu button { font-size: 12px; padding: 0; }
.menu__firma { margin-top: 8px; font: italic 400 17px/1.4 var(--serif); color: var(--tinta-suave); }
.menu__foto { display: none; }
@media (min-width: 900px) {
  .menu { grid-template-columns: minmax(360px, 5fr) 7fr; }
  .menu__lista { padding: 40px var(--margen) 40px; }
  .menu li a { min-height: 72px; font-size: 34px; }
  @media (hover: hover) { .menu li a:hover { color: var(--acento-texto); } }
  .menu__foto { display: block; overflow: hidden; }
  .menu__foto img { width: 100%; height: 100%; object-fit: cover; animation: acercar 1.2s var(--curva); }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--alto-cabecera));
  height: 86svh;
  min-height: 560px;
  overflow: hidden;
  color: var(--blanco);
  background: var(--noche);
}
.hero__foto, .hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__foto img { object-fit: cover; object-position: 50% 40%; animation: respirar 16s var(--curva) both; }
/* El velo lo calibra js/sitio.js (medirVelo) con la foto que haya:
   --velo es la opacidad que deja el texto a 4.5:1 sobre la peor zona,
   --velo-tope, hasta dónde sube el texto, y --velo-arriba, la de la cabecera.
   Sin JS, o con una foto que no se deja medir, quedan los valores de acá. */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(var(--sombra-rgb), var(--velo-arriba, .45)) 0,
      rgba(var(--sombra-rgb), calc(var(--velo-arriba, .45) * .8)) var(--alto-cabecera),
      rgba(var(--sombra-rgb), 0) calc(var(--alto-cabecera) + 14%)),
    linear-gradient(to top,
      rgba(var(--sombra-rgb), var(--velo, .66)) 0,
      rgba(var(--sombra-rgb), calc(var(--velo, .66) * .9)) calc(var(--velo-tope, 52%) * .5),
      rgba(var(--sombra-rgb), calc(var(--velo, .66) * .78)) var(--velo-tope, 52%),
      rgba(var(--sombra-rgb), 0) calc(var(--velo-tope, 52%) + 16%));
}
.hero__contenido {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  bottom: 36px;
  max-width: 760px;
}
.hero__aviso { margin-bottom: 12px; max-width: 34ch; font: italic 400 17px/1.35 var(--serif); color: rgba(255, 255, 255, .92); text-wrap: balance; }
.hero__titulo { font: 500 var(--t-h1)/1.02 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.hero__bajada { margin-top: 14px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .9); max-width: 34ch; }
.hero__aviso, .hero__titulo, .hero__bajada { text-shadow: 0 1px 24px rgba(var(--sombra-rgb), .35); }
.hero__acciones { display: flex; align-items: center; gap: 28px; margin-top: 22px; }
.hero__acciones .boton { display: none; }
.hero__pie { display: none; }
@media (min-width: 900px) {
  .hero { height: calc(100svh - 40px); min-height: 640px; }
  .hero__contenido { bottom: 72px; left: 50%; right: auto; width: min(900px, calc(100% - 2 * var(--margen))); transform: translateX(-50%); text-align: center; }
  .hero__bajada, .hero__aviso { margin-left: auto; margin-right: auto; }
  .hero__aviso { font-size: 19px; }
  .hero__acciones { justify-content: center; }
  .hero__bajada { font-size: 18px; max-width: none; }
  .hero__acciones .boton { display: inline-flex; }
  .hero__pie {
    display: block;
    position: absolute;
    right: var(--margen);
    bottom: 64px;
    font: italic 400 16px/1.3 var(--serif);
    color: rgba(255, 255, 255, .8);
  }
}

/* celular bajo: el texto no pasa de la mitad de abajo de la foto */
@media (max-width: 899px) and (max-height: 700px) and (orientation: portrait) {
  .hero__contenido { bottom: 24px; }
  .hero__aviso { margin-bottom: 8px; }
  .hero__bajada { margin-top: 10px; }
  .hero__acciones { margin-top: 14px; }
}
/* celular apaisado: la portada entra en la primera pantalla */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .hero { height: 88svh; min-height: 0; }
  .hero__contenido { bottom: 20px; }
  .hero__acciones { margin-top: 12px; }
}

/* ---------- secciones ---------- */
.seccion { padding: var(--seccion) 0; }
.seccion--papel { background: var(--fondo-2); transition: background-color .6s var(--curva); }
/* el mismo ancho que las grillas de abajo: con max-width: var(--ancho) el padding lo achicaba
   y en escritorio el título arrancaba 40 px más adentro que las fotos */
.seccion__cabeza { padding: 0 var(--margen); margin: 0 auto 36px; max-width: calc(var(--ancho) + 2 * var(--margen)); }
.seccion__cabeza p { margin-top: 14px; max-width: 52ch; color: var(--tinta-suave); }
@media (min-width: 900px) {
  .seccion__cabeza { display: grid; grid-template-columns: 6fr 5fr; gap: 40px; align-items: end; margin-bottom: 56px; }
  /* ancho fijo de 52ch pegado a la derecha: una bajada corta arranca donde las otras */
  .seccion__cabeza p { margin-top: 0; justify-self: end; width: 100%; max-width: 52ch; }
}

/* ---------- intro ---------- */
/* overflow-x: clip, no hidden: recorta la entrada de costado sin crear un contenedor de scroll.
   Padding de un solo lado: el aire de abajo lo pone Los lodges, que tiene el mismo fondo.
   En el celular arriba va poco, así la foto asoma en la primera pantalla.
   Menú > La historia: en el celular el salto deja el título arriba y no la foto
   (--intro-foto es el alto de la foto a lo ancho, 4:5). */
.intro {
  --intro-arriba: var(--margen);
  --intro-foto: calc((100vw - 2 * var(--margen)) * 1.25);
  display: grid;
  gap: 32px;
  padding: var(--intro-arriba) var(--margen) 0;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  overflow-x: clip;
  scroll-margin-top: calc(-1 * (var(--intro-arriba) + var(--intro-foto) + 32px - 16px));
}
.intro__foto, .tarjeta__foto, .idea__foto, .nota__foto { position: relative; }
.intro__foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fondo-2); }
.intro__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.intro__texto .hoja-marca { width: 26px; height: 34px; margin-bottom: 20px; }
.intro__texto p { margin: 18px 0 14px; color: var(--tinta-suave); max-width: 46ch; }
@media (min-width: 900px) {
  .intro { --intro-arriba: var(--seccion); grid-template-columns: 5fr 6fr; gap: 9vw; align-items: center; scroll-margin-top: 0; }
  .intro__foto { aspect-ratio: 4 / 5; }
  .intro__texto .titulo { font-size: clamp(30px, 1.4rem + 1.6vw, 44px); }
}

/* ---------- lodges ---------- */
.lodges { display: grid; gap: 40px; padding: 0 var(--margen); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.lodge { min-width: 0; }
.lodge__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; color: var(--blanco); background: var(--fondo-2); }
.lodge__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.lodge__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 20, 30, .6), rgba(10, 20, 30, 0) 45%); }
.lodge__nombre { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; font: 500 28px/1.05 var(--serif); }
.lodge__estado { display: block; margin-top: 6px; font: italic 400 17px/1.3 var(--serif); opacity: .9; }
.lodge p { margin: 18px 0 6px; color: var(--tinta-suave); max-width: 44ch; }
@media (min-width: 900px) {
  .lodges { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lodge:nth-child(2) { margin-top: 96px; }
  .lodge__nombre { font-size: 34px; left: 28px; bottom: 26px; }
}
@media (hover: hover) { .lodge:hover .lodge__foto img { transform: scale(1.04); } }

/* ---------- naturaleza: la selva entera y el texto sobre azul liso ----------
   Sin velo: la foto se ve con su color y el texto va al lado (abajo en el celular).
   Blanco sobre --azul-hondo da cerca de 12:1. */
.naturaleza { position: relative; display: grid; color: var(--blanco); background: var(--azul-hondo); }
.naturaleza__foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--noche); }
.naturaleza__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.naturaleza__contenido { position: relative; width: 100%; padding: var(--seccion) var(--margen) calc(var(--seccion) + var(--solape)); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; text-align: center; }
.pilares { display: grid; gap: 40px; margin-top: 44px; }
.pilar h3 { font: 500 var(--t-h3)/1.1 var(--serif); }
.pilar p { margin: 12px auto 0; max-width: 34ch; color: rgba(255, 255, 255, .86); }
.pilar .hoja-marca { width: 16px; height: 21px; margin: 0 auto 14px; }
@media (min-width: 900px) {
  /* foto a sangre a la izquierda y el panel azul a la derecha; el solape de abajo lo tapa la cortina */
  .naturaleza { grid-template-columns: 7fr 5fr; min-height: 88svh; }
  .naturaleza__foto { aspect-ratio: auto; }
  /* el aire se achica con la pantalla: así título y pilares entran enteros debajo de la cabecera */
  .naturaleza__contenido { --aire-nat: clamp(48px, 7vh, 120px); align-self: center; max-width: none; margin: 0; padding: var(--aire-nat) 56px calc(var(--aire-nat) + var(--solape)); text-align: left; }
  .pilares { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
  .pilar .hoja-marca { margin: 0 0 14px; }
  .pilar p { margin-left: 0; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .pilares { gap: 24px; margin-top: 32px; }
}

/* ---------- la cortina: Experiencias tapa a la naturaleza ----------
   .cortina envuelve a las dos secciones y es el límite del sticky: sin él, la naturaleza
   quedaría pegada detrás de todo lo que sigue, que no tiene fondo. Ningún ancestro puede
   llevar overflow hidden o auto (html usa overflow-x: clip, que no lo rompe).
   --tope-cortina lo pone js/sitio.js: si la naturaleza es más alta que la pantalla, se
   pega por el pie y se lee entera antes de que la tapen. */
.cortina__fondo { position: sticky; top: var(--tope-cortina, 0px); z-index: 0; }
/* si ni así entra con el título a la vista (pantalla muy baja), no se pega: baja como cualquier sección */
.cortina__fondo--suelta { position: relative; }
.cortina__tapa {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--solape));
  overflow-x: clip; /* el carrusel entra de costado: que no asome scroll lateral */
  border-radius: var(--radio-tapa) var(--radio-tapa) 0 0;
  background: var(--fondo);
  box-shadow: 0 -24px 60px rgba(var(--sombra-rgb), .35);
}

/* ---------- carrusel ---------- */
.carrusel { max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.carrusel__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 16px;
  padding: 0 var(--margen);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--margen);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__control { display: flex; align-items: center; gap: 16px; padding: 24px var(--margen) 0; }
.carrusel__barra { flex: 1; height: 1px; background: var(--linea); position: relative; }
.carrusel__barra i { position: absolute; left: 0; top: -1px; height: 3px; width: 20%; background: var(--azul); transition: transform .3s var(--curva); }
.flecha {
  width: 44px;
  height: 44px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: none;
  color: var(--azul);
  font-size: 18px;
  transition: border-color .3s, background-color .3s, scale var(--toque) var(--curva-toque);
}
.flecha:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .flecha:not(:disabled):hover { border-color: var(--azul); } }
@media (min-width: 600px) { .carrusel__pista { grid-auto-columns: 46%; } }
@media (min-width: 900px) { .carrusel__pista { grid-auto-columns: calc((100% - 2 * var(--margen) - 48px) / 3.25); gap: 24px; } }

.tarjeta { scroll-snap-align: start; min-width: 0; }
.tarjeta__foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--fondo-2); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva), scale var(--toque) var(--curva-toque); }
.tarjeta h3 { margin-top: 18px; font: 500 var(--t-h3)/1.1 var(--serif); color: var(--azul); }
.tarjeta p { margin-top: 8px; color: var(--tinta-suave); font-size: 15.5px; }
@media (hover: hover) { .tarjeta:hover .tarjeta__foto img { transform: scale(1.04); } }

/* ---------- agenda: lista de revista ---------- */
.filtros {
  display: flex;
  gap: 6px;
  padding: 0 var(--margen) 20px;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  overflow-x: auto;
  scroll-padding-inline: var(--margen);
  scrollbar-width: none;
}
/* no entran: el borde que corta se desvanece, así se nota que la fila sigue */
.filtros--desliza:not(.filtros--al-final) {
  -webkit-mask-image: linear-gradient(to right, var(--azul) calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, var(--azul) calc(100% - 48px), transparent);
}
.filtros::-webkit-scrollbar { display: none; }
.filtros button {
  flex: none;
  min-height: 44px;
  padding: 0 11px;
  letter-spacing: .12em;
  border: 1px solid var(--linea);
  background: none;
  color: var(--tinta);
  font-size: 12px;
}
.filtros button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.agenda { max-width: var(--ancho); margin: 0 var(--margen); border-top: 1px solid var(--linea); }
.evento {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 72px;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--linea);
  min-width: 0;
}
.evento__fecha {
  align-self: start;
  padding-top: 2px;
  color: var(--azul);
  text-align: center;
  font: 500 11px/1.2 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.evento__fecha b { display: block; margin: 2px 0; font: 500 34px/1 var(--serif); letter-spacing: 0; }
.evento__fecha .hoja-marca { width: 20px; height: 26px; margin: 4px auto 0; background: var(--acento-texto); }
.evento h3 { font: 500 22px/1.15 var(--serif); color: var(--azul); text-wrap: balance; }
.evento__lugar { margin-top: 6px; font: italic 400 16px/1.3 var(--serif); color: var(--acento-texto); transition: color .6s var(--curva); }
.evento__cuando { margin-top: 2px; font-size: 14px; color: var(--tinta-suave); }
.evento__foto { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--fondo); }
.evento__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva), scale var(--toque) var(--curva-toque); }
/* la fila entera abre la ficha; editando queda debajo de los textos, que se tocan para cambiarlos */
.evento__abrir { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.evento__abrir:focus-visible { outline-offset: -2px; }
.evento h3 { transition: opacity var(--toque) var(--curva-toque); }
.evento:has(.evento__abrir:active) h3 { opacity: .6; }
.evento:has(.evento__abrir:active) .evento__foto img { scale: var(--pulsado-foto); }
.editando .evento__abrir { z-index: 0; }
.editando .evento [data-editable] { position: relative; z-index: 1; }
.evento.nuevo { animation: aparecer .6s var(--curva); }
.evento.nuevo .evento__fecha { color: var(--acento-texto); }
@media (hover: hover) { .evento:hover .evento__foto img { transform: scale(1.06); } }
.agenda__mas { display: flex; justify-content: center; padding-top: 24px; }
.agenda__vacio { padding: 24px var(--margen) 0; text-align: center; color: var(--tinta-suave); }
@media (min-width: 900px) {
  .agenda { margin: 0 auto; width: calc(100% - 2 * var(--margen)); }
  .filtros { padding-bottom: 28px; }
  .evento { grid-template-columns: 110px minmax(0, 1fr) 220px; gap: 40px; padding: 28px 0; }
  .evento__fecha b { font-size: 40px; }
  .evento h3 { font-size: 28px; }
  .evento__lugar { font-size: 19px; }
  .evento__foto { aspect-ratio: 3 / 2; }
}

/* ---------- el mes en la casa: abre la agenda ---------- */
.mes { max-width: var(--ancho); margin: 0 var(--margen) 28px; padding-top: 20px; border-top: 1px solid var(--azul); }
.mes__titulo { font: 500 var(--t-h3)/1.1 var(--serif); color: var(--azul); }
.mes__texto { margin-top: 8px; max-width: 46ch; font: italic 400 19px/1.4 var(--serif); color: var(--tinta); text-wrap: pretty; }
.mes__lista { margin: 14px 0 0; }
.mes__lista:empty { display: none; }
/* La columna de los rótulos toma el ancho del más largo: "EN LA HUERTA" o "IN THE KITCHEN"
   entran en un renglón en los tres idiomas (con 96 px fijos se partían en es y en). */
.mes__renglon { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--linea); }
@supports (grid-template-columns: subgrid) {
  .mes__lista { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; }
  .mes__renglon { grid-column: 1 / -1; grid-template-columns: subgrid; gap: normal; }
}
.mes__renglon dt { font: 500 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: var(--acento-texto); transition: color .6s var(--curva); }
.mes__renglon dd { margin: 0; font: 400 17px/1.4 var(--serif); color: var(--tinta); }
.mes__renglon--vacio { opacity: .55; }
.editando .mes__renglon dd:empty::before { content: "Escribí qué hay este mes"; }
.editando .mes__texto:empty::before { content: "Escribí la nota del mes"; opacity: .55; }
@media (min-width: 900px) {
  .mes { margin: 0 auto 44px; width: calc(100% - 2 * var(--margen)); padding-top: 28px; }
  .mes:has(.mes__lista:not(:empty)) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .mes__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; }
  .mes__renglon { display: block; grid-column: auto; padding: 14px 0 0; }
  .mes__renglon dt { white-space: normal; }
  .mes__renglon dd { margin-top: 8px; }
}

/* ---------- ideas ---------- */
.ideas { display: grid; gap: 20px; padding: 0 var(--margen); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.idea { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; min-width: 0; }
.idea__foto { aspect-ratio: 1; overflow: hidden; background: var(--fondo-2); }
.idea__foto img { width: 100%; height: 100%; object-fit: cover; }
.idea h3 { font: 500 var(--t-h3)/1.1 var(--serif); color: var(--azul); }
.idea p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--tinta-suave); }
/* En escritorio, grilla de revista: 12 columnas, 7/5 y después 5/7, y un filete sobre el
   texto, como pie de lámina. Las dos fotos de cada fila tienen el mismo alto (la ancha queda
   apaisada y la angosta casi cuadrada), así los títulos de la fila quedan a la misma altura y
   no sobra hueco debajo de la ancha. La segunda fila es más baja: las proporciones no se
   repiten seguidas. align-content: start deja cada título pegado a su foto.
   En el celular sigue la lista de miniaturas. */
@media (min-width: 900px) {
  .ideas { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 64px; }
  .idea { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 0; }
  .idea__foto { margin-bottom: 16px; }
  .idea__foto + div { border-top: 1px solid var(--linea); padding-top: 14px; }
  .idea__foto { aspect-ratio: auto; height: var(--alto-idea, clamp(320px, 34vw, 520px)); }
  .idea:nth-child(4n+3), .idea:nth-child(4n+4) { --alto-idea: clamp(280px, 28vw, 440px); }
  .idea:nth-child(4n+1) { grid-column: 1 / span 7; }
  .idea:nth-child(4n+2) { grid-column: 8 / span 5; }
  .idea:nth-child(4n+3) { grid-column: 1 / span 5; }
  .idea:nth-child(4n+4) { grid-column: 6 / span 7; }
  .idea p { max-width: 44ch; }
}

/* ---------- destino ---------- */
.destino { position: relative; overflow: hidden; overflow: clip; color: var(--blanco); background: var(--noche); }
.destino__foto, .destino__foto img, .destino__velo { position: absolute; inset: 0; width: 100%; height: 100%; }
.destino__foto img { object-fit: cover; }
.destino__velo { background: linear-gradient(to bottom, rgba(10, 20, 30, .7), rgba(10, 20, 30, .55)); }
.destino__contenido { position: relative; padding: var(--seccion) var(--margen); max-width: 760px; margin: 0 auto; }
.destino__bajada { margin: 16px 0 32px; color: rgba(255, 255, 255, .88); }
.acordeon details { border-top: 1px solid var(--linea-clara); }
.acordeon details:last-child { border-bottom: 1px solid var(--linea-clara); }
.acordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  font: 500 24px/1.1 var(--serif);
  list-style: none;
  cursor: pointer;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; font: 300 26px/1 var(--sans); transition: transform .35s var(--curva); }
.acordeon details[open] summary::after { transform: rotate(45deg); }
/* Se abre sin medir alturas: la fila del grid va de 0fr a 1fr y la respuesta entra 60 ms
   después, así llega el cajón y después lo de adentro. El aire de abajo va en un ::after:
   un padding no se recorta con la fila en 0fr. */
.faq-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s var(--curva-toque); }
.acordeon details[open] .faq-cuerpo { grid-template-rows: 1fr; }
.faq-cuerpo > p {
  min-height: 0;
  overflow: hidden;
  max-width: 52ch;
  color: rgba(255, 255, 255, .88);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease .06s, transform .2s var(--curva-toque) .06s;
}
.faq-cuerpo > p::after { content: ""; display: block; height: 22px; }
.acordeon details[open] .faq-cuerpo > p { opacity: 1; transform: none; }
/* al abrir, lo de adentro venía sin estilo (estaba oculto): sin esto aparece de golpe */
@starting-style {
  .acordeon details[open] .faq-cuerpo { grid-template-rows: 0fr; }
  .acordeon details[open] .faq-cuerpo > p { opacity: 0; transform: translateY(-4px); }
}
/* al cerrar, el contenido sigue a la vista mientras la fila se pliega */
@supports selector(::details-content) {
  .acordeon details::details-content { transition: content-visibility .22s allow-discrete; }
}
/* editando: las preguntas sin respuesta se ven atenuadas, para completarlas */
.faq--vacia summary { opacity: .55; }
.editando .faq-cuerpo > p { outline-offset: -1px; }
.editando .faq-cuerpo > p:empty::before { content: "Escribí la respuesta. Sin texto, no se publica."; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .faq-cuerpo, .faq-cuerpo > p { transition: none; } }
@media (min-width: 900px) {
  .destino__contenido { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; max-width: calc(var(--ancho) + 2 * var(--margen)); padding: 150px var(--margen); text-align: left; }
  .destino__cabeza { position: sticky; top: calc(var(--alto-cabecera) + 28px); align-self: start; }
  .destino__bajada { margin-bottom: 0; }
}

/* ---------- cuaderno ---------- */
.cuaderno { display: grid; gap: 28px; padding: 0 var(--margen); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.nota { min-width: 0; }
.nota__foto { aspect-ratio: 3 / 2; overflow: hidden; background: var(--fondo-2); }
.nota__foto img { width: 100%; height: 100%; object-fit: cover; }
.nota__seccion { display: block; margin-top: 16px; font: italic 400 17px/1.2 var(--serif); color: var(--acento-texto); }
.nota h3 { margin-top: 4px; font: 500 28px/1.1 var(--serif); color: var(--azul); text-wrap: balance; }
.nota p { margin: 10px 0 4px; color: var(--tinta-suave); }
.nota--chica { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding-top: 24px; border-top: 1px solid var(--linea); }
.nota--chica .nota__foto { aspect-ratio: 1; }
.nota--chica .nota__seccion { margin-top: 0; }
.nota--chica h3 { font-size: 22px; }
.nota--chica p, .nota--chica .enlace { display: none; }
@media (min-width: 900px) {
  .cuaderno { grid-template-columns: 7fr 5fr; gap: 24px 64px; }
  .nota--grande { grid-row: span 3; }
  .nota--grande h3 { font-size: 32px; }
  .nota--chica { grid-template-columns: 140px minmax(0, 1fr); gap: 24px; }
  .nota--chica h3 { font-size: 26px; }
  .nota--chica p { display: block; font-size: 15px; }
}

/* ---------- huella: los objetos ---------- */
.huella { position: relative; display: grid; place-items: center; min-height: 78svh; overflow: hidden; color: var(--blanco); background: var(--noche); text-align: center; }
.huella__foto, .huella__foto img, .huella__velo { position: absolute; inset: 0; width: 100%; height: 100%; }
.huella__foto img { object-fit: cover; }
.huella__velo { background: rgba(10, 20, 30, .46); }
.huella__contenido { position: relative; padding: 96px var(--margen); max-width: 760px; }
.huella__rotulo { font: italic 400 19px/1.3 var(--serif); color: rgba(255, 255, 255, .9); }
.huella .titulo { margin-top: 10px; font-size: var(--t-portada); }
.huella__texto { margin: 16px auto 28px; max-width: 40ch; color: rgba(255, 255, 255, .9); }
.boton--blanco { background: var(--blanco); border-color: var(--blanco); color: var(--azul); }
@media (hover: hover) { .boton--blanco:hover { background: transparent; color: var(--blanco); } }
@media (min-width: 900px) { .huella { min-height: 88svh; } }

/* ---------- instagram: los rincones ---------- */
.instagram { padding: var(--seccion) 0; text-align: center; }
.instagram__cabeza { padding: 0 var(--margen); margin: 0 auto 32px; max-width: 760px; }
.instagram__cabeza p { margin: 14px auto 0; max-width: 44ch; color: var(--tinta-suave); }
.instagram__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.rincon { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--fondo-2); }
.instagram__fotos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva), opacity .4s, scale var(--toque) var(--curva-toque); }
.instagram__seguir { margin-top: 24px; }
@media (hover: hover) { .rincon:hover img { transform: scale(1.05); opacity: .9; } }
@media (min-width: 900px) {
  .instagram__cabeza { margin-bottom: 48px; }
  .instagram__fotos { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .rincon { aspect-ratio: 4 / 5; }
}

/* ---------- novedades ---------- */
.novedades {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 28px;
  padding: var(--seccion) var(--margen);
  background: var(--azul);
  color: var(--blanco);
}
/* el helecho va en blanco: el acento de la temporada sobre el azul daba malva, marrón u oliva */
.novedades__hoja { position: absolute; right: -60px; top: -40px; width: 260px; height: 340px; background: var(--blanco); opacity: .12; transform: rotate(-18deg); }
.novedades__texto, .formulario { position: relative; }
.novedades__texto p { margin-top: 14px; color: rgba(255, 255, 255, .86); max-width: 44ch; }
.formulario { display: grid; gap: 18px; }
.formulario label span { display: block; font-size: 13px; letter-spacing: .06em; opacity: .8; }
.formulario input {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--linea-clara);
  background: none;
  color: var(--blanco);
  font-size: 17px;
  border-radius: 0;
}
.formulario input:focus { outline: none; border-bottom-color: var(--blanco); }
.formulario input:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.formulario .boton { justify-self: start; margin-top: 6px; }
.formulario__gracias { font: italic 400 20px/1.3 var(--serif); }
@media (min-width: 900px) {
  .novedades { grid-template-columns: 6fr 5fr; gap: 9vw; align-items: end; padding-left: max(var(--margen), calc((100% - var(--ancho)) / 2)); padding-right: max(var(--margen), calc((100% - var(--ancho)) / 2)); }
  .novedades__hoja { right: 4%; top: -60px; width: 380px; height: 500px; }
}

/* ---------- pie ---------- */
/* sin logo: la cabecera fija ya lo muestra en esta misma pantalla */
.pie { padding: 56px var(--margen) 40px; text-align: center; color: var(--azul); }
.pie__frase { font: italic 400 22px/1.3 var(--serif); }
.pie__enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; list-style: none; margin: 24px 0 0; padding: 0; }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: none; }
@media (hover: hover) { .pie__enlaces a:hover { text-decoration: underline; text-underline-offset: 5px; } }
.pie__firma { margin-top: 20px; font-size: 13px; letter-spacing: .08em; color: var(--tinta-suave); }
.pie__fotos { margin-top: 6px; font-size: 12px; color: var(--tinta-suave); }

/* ---------- hojas: Reservar y la ficha del evento ----------
   En el celular, hoja al pie: cabecera fija con el asa y la X (de ahí se arrastra para
   cerrarla), cuerpo que scrollea y, en la ficha, el botón siempre a la vista. La animación
   de entrada no corre mientras sale (data-cerrando): al soltarla no repite la subida.
   Desde 600 px, ventana centrada. */
.hoja {
  width: 100%;
  max-width: 100%;
  max-height: min(92svh, calc(100svh - 24px));
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radio-tapa) var(--radio-tapa) 0 0;
  overflow: hidden;
  background: var(--fondo);
  color: var(--tinta);
}
.hoja[open] { display: flex; flex-direction: column; }
.hoja[open]:not([data-cerrando]) { animation: subir .4s var(--curva); }
.hoja::backdrop { background: var(--hoja-velo); opacity: calc(1 - var(--arrastre, 0)); transition: opacity .2s var(--curva-toque); }
.hoja[data-arrastrando]::backdrop { transition: none; }
.hoja[data-cerrando]::backdrop { opacity: 0; }
.hoja__cabeza { position: relative; flex: none; min-height: var(--hoja-cabeza); padding: 0 var(--margen); }
[data-asa] { touch-action: none; }
.hoja__asa { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--linea); }
.hoja__cerrar { position: absolute; top: 2px; right: 6px; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--azul); }
.hoja__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hoja__pie { flex: none; padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--fondo); }
.hoja__pie .boton { width: 100%; }

.reserva .hoja__cabeza { padding-bottom: 4px; }
.reserva .titulo { margin-top: 10px; padding-right: 44px; font-size: 26px; }
.reserva .hoja__cuerpo { padding: 0 var(--margen) calc(24px + env(safe-area-inset-bottom)); }
.reserva__opciones { display: grid; gap: 12px; margin: 16px 0 18px; }
.opcion {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: inherit;
  text-decoration: none;
}
.opcion--pronto { opacity: .62; }
.opcion img { width: 76px; height: 76px; object-fit: cover; }
.opcion b { display: block; font: 500 22px/1.1 var(--serif); color: var(--azul); }
.opcion span { display: block; margin-top: 4px; font-size: 14px; color: var(--tinta-suave); }
.opcion em { display: block; margin-top: 6px; font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--acento-texto); }
@media (hover: hover) { .opcion:hover { border-color: var(--azul); } }
.reserva__nota { font-size: 14px; color: var(--tinta-suave); }

/* la ficha: la foto queda quieta y el detalle la tapa al bajar */
.ficha__foto { position: sticky; top: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fondo-2); }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha__detalle { position: relative; z-index: 1; padding: 20px var(--margen) 22px; background: var(--fondo); }
.ficha .titulo { font-size: var(--t-h2); }
.ficha__lugar { margin-top: 6px; font: italic 400 18px/1.3 var(--serif); color: var(--acento-texto); }
.ficha__cuando { margin-top: 2px; font-size: 15px; color: var(--tinta-suave); }
.ficha__texto { margin-top: 14px; max-width: 52ch; color: var(--tinta-suave); }
.ficha__texto:empty { display: none; }
.editando .ficha__texto:empty { display: block; }
.editando .ficha__texto:empty::before { content: "Escribí un texto corto del evento (opcional)"; opacity: .6; }
.ficha__calendario { margin-top: 6px; }

@media (min-width: 600px) {
  .hoja { width: 520px; max-height: min(88vh, 760px); margin: auto; border-radius: 0; }
  .hoja[open]:not([data-cerrando]) { animation: aparecer .35s var(--curva); }
  .hoja__asa { display: none; }
  [data-asa] { touch-action: auto; }
  .hoja__cerrar { top: 10px; right: 10px; }
  .reserva .hoja__cabeza { padding: 36px 36px 0; }
  .reserva .titulo { margin-top: 0; }
  .reserva .hoja__cuerpo { padding: 0 36px 36px; }
  .ficha .hoja__cabeza { position: absolute; top: 0; right: 0; z-index: 2; min-height: 0; padding: 0; }
  .ficha .hoja__cerrar { position: relative; top: auto; right: auto; display: block; margin: 12px; background: var(--fondo); }
  .ficha__detalle { padding: 28px 36px 26px; }
  .hoja__pie { padding: 16px 36px 20px; }
  .hoja__pie .boton { width: auto; }
}
/* Celular apaisado (o una ventana muy baja): menos aire y las dos casas lado a lado,
   así Reservar entra entera y la nota no queda cortada contra el borde. */
@media (min-width: 600px) and (max-height: 520px) {
  .hoja { max-height: calc(100svh - 24px); }
  .reserva { width: min(680px, calc(100vw - 48px)); }
  .reserva .hoja__cabeza { padding: 22px 28px 0; }
  .reserva .hoja__cuerpo { padding: 0 28px 22px; }
  .reserva__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0; }
}

/* ---------- fotos grandes ----------
   Pantalla completa sobre fondo casi negro. Se pasan con el dedo (scroll-snap), la X y el
   contador van arriba y las flechas solo aparecen con mouse. Entra con un fundido. */
.lb {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--lb-fondo);
  color: var(--blanco);
  opacity: 0;
  transition: opacity .26s var(--curva-toque), display .26s allow-discrete, overlay .26s allow-discrete;
}
@supports (height: 100dvh) { .lb { height: 100dvh; } }
.lb[open] { opacity: 1; }
@starting-style { .lb[open] { opacity: 0; } }
.lb:not([open]) { transition-duration: .18s; }
.lb::backdrop { background: transparent; }
.lb__pista {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.lb__pista::-webkit-scrollbar { display: none; }
.lb__foto {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--lb-aire) + env(safe-area-inset-top)) var(--lb-costado) calc(20px + env(safe-area-inset-bottom));
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* el alto sale de la pantalla y deja lugar para el pie, que va pegado abajo de la foto */
.lb__foto img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - var(--lb-aire) - var(--lb-pie));
  object-fit: contain;
}
@supports (height: 100dvh) {
  .lb__foto img { max-height: calc(100dvh - var(--lb-aire) - var(--lb-pie) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
.lb__foto figcaption { max-width: 46ch; padding: 14px var(--margen) 0; text-align: center; font: italic 400 18px/1.35 var(--serif); color: rgba(255, 255, 255, .86); text-wrap: balance; }
.lb__foto figcaption:empty { display: none; }
.editando .lb__foto figcaption:empty { display: block; min-width: 14ch; }
.editando .lb__foto figcaption:empty::before { content: "Escribí un epígrafe (opcional)"; opacity: .55; }
.lb__cerrar {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: 8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--blanco);
  font-size: 30px;
  line-height: 1;
}
.lb__contador {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 44px;
  font: 500 12px/1 var(--sans);
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .78);
}
.lb__flecha {
  display: none;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--linea-clara);
  border-radius: 50%;
  background: none;
  color: var(--blanco);
  font-size: 18px;
  transition: border-color .3s, opacity .3s, scale var(--toque) var(--curva-toque);
}
.lb__flecha--antes { left: 24px; }
.lb__flecha--despues { right: 24px; }
.lb__flecha[aria-disabled="true"] { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) and (min-width: 700px) { :root { --lb-costado: 104px; } }
@media (hover: hover) and (pointer: fine) {
  .lb__flecha { display: grid; }
  .lb__flecha:not([aria-disabled="true"]):hover { border-color: var(--blanco); }
  .lb__cerrar { right: 16px; }
}

/* la foto que se amplía: el botón es la foto misma */
.lb-abrir { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lb-abrir:active img { scale: var(--pulsado-foto); }
.lb-abrir:focus-visible { outline: 3px solid var(--acento-texto); outline-offset: -3px; }

/* ---------- panel de edición (demo) ---------- */
.panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-height: 62svh;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 -12px 40px rgba(10, 20, 30, .22);
  font-size: 15px;
  animation: subir .4s var(--curva);
}
.panel[hidden] { display: none; }
.panel__cabeza { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px var(--margen); border-bottom: 1px solid var(--linea); }
.panel__titulo { font: 500 22px/1.1 var(--serif); color: var(--azul); }
.panel__cerrar { width: 44px; height: 44px; border: 0; background: none; font-size: 26px; color: var(--azul); }
.panel__cuerpo { flex: 1; overflow-y: auto; padding: 4px var(--margen) 16px; overscroll-behavior: contain; }
.panel__bloque { padding: 18px 0; border-bottom: 1px solid var(--linea); }
.panel__bloque h3 { font: 500 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
.panel__ayuda { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--tinta-suave); }
.temporadas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.temporadas button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--linea); background: var(--blanco); font-size: 14px; }
.temporadas button[aria-pressed="true"] { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.temporadas i { width: 18px; height: 18px; border-radius: 50%; }
[data-temporada-btn="primavera"] i { background: #C46A88; }
[data-temporada-btn="verano"] i { background: #5E8C62; }
[data-temporada-btn="otono"] i { background: #B85B32; }
[data-temporada-btn="invierno"] i { background: #C2924A; }
.interruptor { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 8px; cursor: pointer; }
.interruptor input { width: 22px; height: 22px; accent-color: var(--azul); }
.panel textarea, .panel input:not([type="checkbox"]), .panel select { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--linea); background: var(--blanco); font-size: 16px; border-radius: 0; }
.panel__form { display: grid; gap: 12px; margin-top: 12px; }
.panel__form label { font-size: 13.5px; color: var(--tinta-suave); }
.panel__form .boton { justify-self: start; }
.panel__pie { padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
.panel__publicar { width: 100%; }
/* el idioma que se está editando: cada uno se escribe aparte */
.panel__idiomas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.panel__idiomas button { min-height: 44px; padding: 0 8px; border: 1px solid var(--linea); background: var(--blanco); font-size: 14px; transition: scale var(--toque) var(--curva-toque); }
.panel__idiomas button:active { scale: var(--pulsado); }
.panel__idiomas button[aria-pressed="true"] { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); color: var(--azul); }
/* En el celular el panel es una hoja más: el asa arriba, se cierra arrastrando la cabecera y
   ni la cabecera ni la barra de Publicar le pasan el gesto a la página de atrás. */
@media (max-width: 899px) {
  .panel__cabeza { padding-top: 14px; touch-action: none; }
  .panel__cabeza::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--linea); }
  .panel__pie { touch-action: none; }
  /* arrastrado una vez, la entrada no vuelve a correr al soltar */
  .panel[data-arrastrado] { animation: none; }
  /* la página de atrás queda velada, como detrás de las otras hojas: tocarla cierra el panel */
  body.con-panel::after { content: ""; position: fixed; inset: 0; z-index: 49; background: var(--hoja-velo); animation: aparecer .3s var(--curva); }
}
@media (min-width: 900px) {
  .panel { left: auto; top: 0; width: 380px; max-height: none; box-shadow: -12px 0 40px rgba(10, 20, 30, .18); animation: entrar .4s var(--curva); }
  body.con-panel { padding-right: 380px; }
  /* los avisos salen sobre el panel, que es de donde vienen: así no tapan la página que se edita */
  body.con-panel .aviso-flotante { left: calc(100% - 190px); bottom: 96px; max-width: 340px; }
}
/* Notebook con el panel abierto: la página queda en 644 px pero las @media leen 1024.
   Lo que chocaba en ese ancho se acomoda: los idiomas (también están en el panel),
   el pie de foto del hero y el cuaderno, que pasa a una columna. */
@media (min-width: 900px) and (max-width: 1279px) {
  .con-panel .cabecera .idiomas, .con-panel .hero__pie { display: none; }
  .con-panel .cuaderno { grid-template-columns: minmax(0, 1fr); }
  .con-panel .nota--grande { grid-row: auto; }
}

/* modo edición: se ve qué se puede tocar */
.editando [data-editable] { outline: 1px dashed var(--acento); outline-offset: 4px; cursor: text; }
.editando [data-editable]:focus { outline: 2px solid var(--acento); background: rgba(255, 255, 255, .06); }
.foto-acciones {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: calc(100% - 24px);
}
.hero .foto-acciones { top: calc(var(--alto-cabecera) + 12px); }
/* miniaturas: uno abajo del otro, a lo ancho de la foto */
.foto-acciones--chica { top: 4px; right: 4px; left: 4px; max-width: none; flex-direction: column; gap: 4px; }
.foto-acciones--chica .cambiar-foto { justify-content: center; min-height: 30px; padding: 0 4px; font-size: 10px; letter-spacing: .06em; }
.cambiar-foto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: var(--papel);
  color: var(--azul);
  font: 500 12px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(10, 20, 30, .2);
}
/* eligiendo el centro: la foto se marca y el texto de encima no se deja tocar */
.eligiendo-centro { cursor: crosshair; }
.eligiendo-centro::before { content: ""; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 3px var(--acento); pointer-events: none; }
.eligiendo [data-editable] { pointer-events: none; }
.foco-marca {
  position: absolute;
  z-index: 4;
  width: 28px;
  height: 28px;
  translate: -50% -50%;
  border: 2px solid var(--blanco);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(var(--sombra-rgb), .45);
  pointer-events: none;
  animation: marca-foco 1.6s var(--curva) both;
}
@keyframes marca-foco { 0% { opacity: 0; transform: scale(1.6); } 20%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* barra de edición en el celular: el panel se esconde para ver la página */
.barra-edicion {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom));
  background: var(--noche);
  color: var(--blanco);
  font-size: 14px;
  line-height: 1.4;
  animation: subir .35s var(--curva);
}
.barra-edicion p { flex: 1; }
.barra-edicion b { font-weight: 500; }
.editando .aviso-flotante { bottom: 96px; }
/* con el menú abierto la barra se va: tapaba los idiomas */
.menu-abierto .barra-edicion { display: none; }

/* aviso flotante */
.aviso-flotante {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 2 * var(--margen));
  padding: 14px 18px;
  background: var(--noche);
  color: var(--blanco);
  font-size: 14.5px;
  line-height: 1.45;
  transform: translateX(-50%);
  animation: aparecer .3s var(--curva);
  /* como popover el navegador le pone inset 0, margen y borde */
  top: auto;
  right: auto;
  height: auto;
  margin: 0;
  border: 0;
  overflow: visible;
}
/* con una hoja abierta el aviso va arriba: abajo tapaba los botones de la hoja */
html:has(dialog[open]) .aviso-flotante { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }

/* ---------- movimiento ---------- */
/* La entrada de los bloques ([data-revelar]) la escribe js/sitio.js, nunca esta hoja:
   si el script falla, todo se ve. Al imprimir se muestra todo. */
@media print {
  [data-revelar] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* Fotos que respiran al bajar: atadas al scroll, se acercan mientras pasan por la pantalla.
   Sin soporte de animation-timeline quedan quietas. Las secciones pasan de overflow hidden
   a clip: hidden las vuelve contenedor de scroll, y view() mediría la foto contra su propia
   sección, que no se mueve, en vez de contra la página. */
@keyframes acercar-al-bajar { from { transform: scale(1.04); } to { transform: scale(1.14) translate3d(0, -2%, 0); } }
@supports (animation-timeline: view()) {
  .naturaleza__foto, .destino, .huella { overflow: clip; }
  .naturaleza__foto img, .destino__foto img, .huella__foto img {
    animation: acercar-al-bajar linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .naturaleza__foto img, .destino__foto img, .huella__foto img { animation: none; transform: none; }
}
@keyframes respirar { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes acercar { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
@keyframes entrar { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}