/* El Macaco del Abuelo
   Crema cálido, fotos con luz de tarde, verde oliva para lo que se pulsa.
   Una página corta: cada bloque cabe más o menos en una pantalla. */

@font-face {
  font-family: "Instrument Sans";
  src: url("fuentes/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

.dia-aire .texto { grid-column: 1 / 6; min-width: 0; }
.dia-aire > .foto-grande { grid-column: 7 / -1; min-width: 0; }
.dia-aire .foto-grande img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); }
.dia-aire figcaption { font-size: .95rem; color: var(--tinta-2); margin-top: .8rem; font-style: italic; }
.antetitulo-aire { font: 500 .7rem/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.aire-nota { font: 400 .8rem/1.6 var(--sans); color: var(--tinta-2); max-width: 25rem; margin-top: 1rem; }
.tarifas-dia { margin: 1.5rem 0; font: 400 .85rem/1.5 var(--sans); }
.tarifas-dia summary { padding: .7rem 0; cursor: pointer; border-bottom: 1px solid var(--oro); }
.tarifas-dia table { border-collapse: collapse; width: 100%; margin-top: .6rem; }
.tarifas-dia caption { text-align: left; padding: .5rem 0; color: var(--tinta-2); font-size: .75rem; }
.tarifas-dia th, .tarifas-dia td { padding: .55rem 0; border-bottom: 1px solid var(--crema-2); font-weight: 400; text-align: left; }
.tarifas-dia td:last-child, .tarifas-dia thead th:last-child { text-align: right; white-space: nowrap; }
.horario-dia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.promociones-publicas { margin: 0 var(--margen); }
.promocion-publica { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--oro); }
.promocion-publica h2 { font-size: 1.9rem; margin: .3rem 0; }
.promocion-publica p { margin: .3rem 0; }
.promocion-publica small { display: block; font: 400 .75rem/1.5 var(--sans); color: var(--tinta-2); max-width: 50rem; }
.promocion-publica button { flex-shrink: 0; }
.carpa-opciones { border: 0; margin: 0; padding: 1rem 0; }
.carpa-opciones legend { font-size: 1.25rem; line-height: 1.3; }
.carpa-opciones label { display: flex; align-items: center; gap: .6rem; font: 400 .9rem/1.5 var(--sans); padding: .65rem 0; cursor: pointer; min-height: 44px; }
.carpa-opciones input { width: 18px; height: 18px; accent-color: var(--oliva); flex-shrink: 0; }
.carpa-opciones p { font: 400 .8rem/1.5 var(--sans); color: var(--tinta-2); margin-top: .5rem; }
.reserva-promocion { border-bottom: 1px solid var(--clara-2); padding-bottom: 1.2rem; margin-bottom: 1.4rem; }
.reserva-promocion details { margin: .7rem 0; font: 400 .8rem/1.6 var(--sans); color: var(--tinta-2); }
.reserva-promocion summary { cursor: pointer; padding: .4rem 0; }
.reserva-promocion details p { margin-top: .5rem; }
#r-cotizacion-estado { font: 400 .8rem/1.6 var(--sans); margin: .7rem 0 0; }
.precio-desglose { margin: 0 0 1rem; font: 400 .85rem/1.5 var(--sans); }
.precio-desglose div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.precio-desglose dd { margin: 0; white-space: nowrap; }
@media (max-width: 64rem) { .dia-aire > .texto, .dia-aire > .foto-grande { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .promocion-publica { align-items: flex-start; flex-direction: column; gap: 1rem; } .opciones { grid-template-columns: 1fr; } }

:root {
  --crema: #f4eee4;
  --crema-2: #ece3d5;
  --papel: #faf6ef;
  --tinta: #2a2520;
  --tinta-2: #6d6357;
  --oliva: #2f3a2b;
  --oliva-2: #3d4a37;
  --oro: #b08a55;

  /* nombres que usa la reserva */
  --noche: var(--oliva);
  --clara: #f6f0e6;
  --clara-2: #c9c1b3;
  --luz: #ead3a6;
  --almagra: #9a6a3a;
  --agua: #4d6b5a;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margen: clamp(1.25rem, 5vw, 5rem);
  --hueco: clamp(1rem, 2.4vw, 2.5rem);
  --radio: 14px;
  --curva: cubic-bezier(.2, .75, .15, 1);
  --curva-media: cubic-bezier(.45, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--crema); color: var(--tinta); font-family: var(--serif); font-size: clamp(1.05rem, 1rem + .2vw, 1.2rem); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -.02em; }
p { margin: 0 0 1em; text-wrap: pretty; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--oliva); color: var(--crema); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
.saltar { position: fixed; left: 1rem; top: -5rem; z-index: 300; background: var(--oliva); color: var(--crema); padding: .7rem 1rem; border-radius: 6px; font-family: var(--sans); transition: top .2s; }
.saltar:focus { top: 1rem; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 2.9rem; padding: .75rem 1.4rem; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  font-family: var(--sans); font-size: .9rem; font-weight: 500; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background-color .45s var(--curva-media), color .45s var(--curva-media), border-color .45s, transform .5s var(--curva), box-shadow .45s;
}
.boton svg { width: 20px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .5s var(--curva); }
.boton:hover svg { transform: translateX(4px); }
.boton:active { transform: scale(.97); }
.boton-oscuro, .boton-tinta { background: var(--oliva); color: var(--crema); }
.boton-oscuro:hover, .boton-tinta:hover { background: var(--oliva-2); box-shadow: 0 10px 24px -14px rgba(47, 58, 43, .7); }
.boton-claro { background: var(--papel); color: var(--tinta); }
.boton-claro:hover { background: #fff; }
.boton-linea { border-color: color-mix(in srgb, var(--tinta) 35%, transparent); color: var(--tinta); }
.boton-linea:hover { border-color: var(--tinta); }
.boton-fantasma { background: transparent; color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 22%, transparent); }
.boton-fantasma:hover { border-color: var(--tinta); }
.boton[disabled] { opacity: .35; pointer-events: none; }
.enlace { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.enlace-linea { font-family: var(--sans); font-size: .9rem; background: none; border: 0; padding: .2rem 0; cursor: pointer; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .5s var(--curva); }
.enlace-linea:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; z-index: 60; inset: 12px 12px auto;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.15rem clamp(1.25rem, 3.5vw, 3rem); border-radius: 14px;
  color: var(--clara);
  transition: color .5s var(--curva-media), background-color .5s var(--curva-media), padding .5s var(--curva), box-shadow .5s, transform .6s var(--curva), inset .5s var(--curva);
}
.cabecera.solida { color: var(--tinta); background: color-mix(in srgb, var(--papel) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); padding-block: .7rem; box-shadow: 0 1px 0 color-mix(in srgb, var(--tinta) 8%, transparent), 0 12px 30px -24px rgba(42, 37, 32, .45); }
.cabecera.escondida { transform: translateY(calc(-100% - 20px)); }
.firma { font-size: 1.3rem; line-height: 1; text-decoration: none; letter-spacing: -.015em; white-space: nowrap; }
.nav { display: flex; gap: clamp(1.25rem, 2.6vw, 2.6rem); margin: 0 auto; font-family: var(--sans); font-size: .86rem; }
.nav a { position: relative; text-decoration: none; padding: .35rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--curva); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.boton-cabecera { min-height: 2.5rem; padding: .5rem 1.25rem; background: var(--papel); color: var(--tinta); }
.cabecera.solida .boton-cabecera { background: var(--oliva); color: var(--crema); }
.menu-boton { display: none; position: relative; width: 2.75rem; height: 2.75rem; margin-left: auto; border: 0; background: none; cursor: pointer; }
.menu-boton span, .menu-boton span::before { position: absolute; left: 50%; width: 22px; height: 1.5px; margin-left: -11px; background: currentColor; transition: transform .5s var(--curva); }
.menu-boton span { top: calc(50% - 4px); }
.menu-boton span::before { content: ""; top: 8px; left: 0; margin: 0; }
.menu-boton[aria-expanded="true"] span { transform: translateY(4px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span::before { transform: translateY(-8px) rotate(-90deg); }

.menu { position: fixed; inset: 0; z-index: 55; background: var(--oliva); color: var(--clara); display: flex; flex-direction: column; justify-content: center; gap: 2.4rem; padding: 6rem var(--margen) 3rem;
  clip-path: circle(0% at calc(100% - 3rem) 3rem); transition: clip-path .8s var(--curva); }
.menu[hidden] { display: none; }
.menu.abierto { clip-path: circle(150% at calc(100% - 3rem) 3rem); }
.menu ul li { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--curva), transform .8s var(--curva); }
.menu.abierto ul li { opacity: 1; transform: none; }
.menu.abierto ul li:nth-child(2) { transition-delay: .05s } .menu.abierto ul li:nth-child(3) { transition-delay: .1s }
.menu.abierto ul li:nth-child(4) { transition-delay: .15s } .menu.abierto ul li:nth-child(5) { transition-delay: .2s } .menu.abierto ul li:nth-child(6) { transition-delay: .25s }
.menu ul a { display: block; padding: .3rem 0; font-size: 2.1rem; text-decoration: none; letter-spacing: -.02em; }
.menu .boton { align-self: flex-start; }
.menu-pie { font-family: var(--sans); font-size: .9rem; color: var(--clara-2); margin: 0; }
.menu-pie a { color: var(--clara); text-decoration: none; }
body.menu-abierto .cabecera { color: var(--clara); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-abierto .boton-cabecera { visibility: hidden; }

/* ---------- Inicio ---------- */
.inicio { padding: 12px; }
.inicio-marco { position: relative; height: calc(100vh - 24px); height: calc(100svh - 24px); min-height: 32rem; border-radius: 20px; overflow: hidden; color: var(--clara); isolation: isolate; }
.inicio-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; z-index: -2; transform: scale(1.08) translate3d(0, var(--baja, 0px), 0); }
.js .inicio-foto { animation: acerca 2.8s var(--curva) backwards; }
@keyframes acerca { from { transform: scale(1.16); filter: brightness(.7); } to { transform: scale(1.08); } }
.inicio-marco::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(20, 18, 14, .62) 0%, rgba(20, 18, 14, .3) 38%, rgba(20, 18, 14, 0) 62%),
  linear-gradient(180deg, rgba(20, 18, 14, .35) 0%, rgba(20, 18, 14, 0) 22%, rgba(20, 18, 14, 0) 70%, rgba(20, 18, 14, .35) 100%); }
.inicio-texto { position: absolute; left: clamp(1.5rem, 7vw, 7rem); right: 1.5rem; top: 50%; transform: translateY(-42%); max-width: 40rem; }
.inicio h1 { font-size: clamp(3.4rem, 1.4rem + 6.4vw, 7.6rem); line-height: .95; letter-spacing: -.03em; margin-bottom: 1.4rem; text-shadow: 0 2px 40px rgba(0, 0, 0, .25); }
.inicio h1 span { display: block; }
.inicio-texto > p { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); max-width: 30ch; margin-bottom: 2rem; opacity: .95; }
.inicio-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.js .inicio h1 span, .js .inicio-texto > p, .js .inicio-acciones { opacity: 0; animation: sube 1.4s var(--curva) forwards; }
.js .inicio h1 span:nth-child(1) { animation-delay: .25s; } .js .inicio h1 span:nth-child(2) { animation-delay: .38s; }
.js .inicio-texto > p { animation-delay: .6s; } .js .inicio-acciones { animation-delay: .75s; }
@keyframes sube { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.bajar { position: absolute; left: clamp(1.5rem, 7vw, 7rem); bottom: 2rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(246, 240, 230, .45); transition: border-color .4s, background-color .4s; }
.bajar:hover { border-color: var(--clara); background: rgba(246, 240, 230, .1); }
.bajar svg { width: 12px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.js .bajar svg { animation: respira 2.6s var(--curva-media) 2s infinite; }
@keyframes respira { 50% { transform: translateY(4px); } }

/* ---------- Bloques ---------- */
.bloque { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 2.5rem; align-items: center; max-width: 92rem; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) var(--margen); }
h2 { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.4rem); line-height: 1; margin-bottom: 1.4rem; }
.entrada { font-size: clamp(1.15rem, 1.05rem + .35vw, 1.4rem); line-height: 1.45; color: var(--tinta); max-width: 34ch; }
.texto p:not(.entrada):not(.precio) { color: var(--tinta-2); max-width: 40ch; }

.marco { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--crema-2); border-radius: var(--radio); overflow: hidden; cursor: zoom-in; }
.marco img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); }
.marco:hover img { transform: scale(1.04); }

/* Apariciones */
.js .aparece { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--curva), transform 1.3s var(--curva); }
.js .aparece.visto { opacity: 1; transform: none; }
.js .aparece-foto { clip-path: inset(7% 7% 7% 7% round var(--radio)); opacity: .001; transition: clip-path 1.5s var(--curva), opacity .8s var(--curva-media); }
.js .aparece-foto img { transform: scale(1.12); transition: transform 2s var(--curva); }
.js .aparece-foto.visto { clip-path: inset(0 0 0 0 round var(--radio)); opacity: 1; }
.js .aparece-foto.visto img { transform: none; }
.js .aparece-foto.visto .marco:hover img { transform: scale(1.04); transition-duration: 1.4s; }

/* ---------- Alojamiento ---------- */
.alojamiento .texto { grid-column: 1 / 6; }
.alojamiento-fotos { grid-column: 7 / 13; }
.alojamiento .foto-grande .marco { aspect-ratio: 4 / 3.3; }
.alojamiento .foto-grande img { object-position: 50% 62%; }
.rasgos { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2rem; margin: 2.2rem 0; font-family: var(--sans); font-size: .82rem; color: var(--tinta-2); }
.rasgos li { display: flex; flex-direction: column; gap: .6rem; }
.rasgos svg { width: 30px; height: 30px; fill: none; stroke: var(--tinta); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.precio { font-size: 1.15rem; margin-bottom: 1.8rem; }
.precio b { font-weight: 400; font-size: 1.9rem; letter-spacing: -.02em; }
.precio span { color: var(--tinta-2); font-size: 1rem; }
.miniaturas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-top: .9rem; }
.miniaturas li { min-width: 0; }
.miniaturas .marco { aspect-ratio: 4 / 3; border-radius: 10px; }
.miniaturas span { display: block; margin-top: .45rem; font-family: var(--sans); font-size: .78rem; color: var(--tinta-2); }

/* ---------- Banda ---------- */
.banda { padding: 0 12px; }
.banda-marco { position: relative; height: min(88vh, 56rem); min-height: 28rem; border-radius: 20px; overflow: hidden; color: var(--clara); isolation: isolate; }
.banda-foto { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 55%; z-index: -2; transform: translate3d(0, var(--desliza, 0px), 0); will-change: transform; }
.banda-marco::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 18, 14, 0) 45%, rgba(20, 18, 14, .62) 100%); }
.banda-texto { position: absolute; left: clamp(1.5rem, 6vw, 6rem); right: 1.5rem; bottom: clamp(2rem, 6vw, 5rem); max-width: 40rem; }
.banda-texto h2 { font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem); line-height: 1.04; margin-bottom: .9rem; }
.banda-texto p { font-family: var(--sans); font-size: .95rem; opacity: .85; margin: 0; }

/* ---------- Eventos ---------- */
.eventos .foto-grande { grid-column: 1 / 7; }
.eventos .foto-grande .marco { aspect-ratio: 4 / 3.3; }
.eventos .texto { grid-column: 8 / 13; position: relative; }
.dibujo-carpa { width: 7.5rem; height: auto; fill: none; stroke: var(--tinta); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .55; margin-bottom: 1.6rem; }
.js .dibujo-carpa path { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.4s var(--curva) .3s; }
.js .visto .dibujo-carpa path { stroke-dashoffset: 0; }
.lista-iconos { display: grid; gap: .9rem; margin: 2rem 0 2.2rem; font-family: var(--sans); font-size: .9rem; color: var(--tinta-2); }
.lista-iconos li { display: flex; align-items: center; gap: .9rem; }
.lista-iconos b { font-weight: 500; color: var(--tinta); }
.lista-iconos svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--tinta); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Galería ---------- */
.galeria { align-items: start; }
.galeria-cabeza { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.galeria-cabeza h2 { margin: 0; }
.mosaico { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: .9rem; height: clamp(26rem, 46vw, 44rem); }
.mosaico figure { min-height: 0; min-width: 0; }
.m1 { grid-column: 1 / 5; grid-row: 1 / 3; }
.m2 { grid-column: 5 / 8; grid-row: 1; }
.m3 { grid-column: 5 / 8; grid-row: 2; }
.m4 { grid-column: 8 / 13; grid-row: 1 / 3; }
.m3 img { object-position: 50% 70%; }

/* ---------- Nosotros ---------- */
.nosotros .foto-grande { grid-column: 1 / 7; }
.nosotros .foto-grande .marco { aspect-ratio: 4 / 3.4; }
.nosotros .texto { grid-column: 8 / 13; }
.nosotros .boton { margin-top: 1rem; }

/* ---------- Contacto ---------- */
.contacto { align-items: start; border-top: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); }
.contacto .texto { grid-column: 1 / 6; }
.datos { display: grid; gap: 1rem; margin-top: 2rem; font-family: var(--sans); font-size: .92rem; }
.datos li { display: flex; align-items: center; gap: .9rem; }
.datos svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--tinta); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.datos a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 30%, transparent); }
.formulario { grid-column: 7 / 13; display: grid; gap: 1.1rem; padding-top: .4rem; }
.campo-c { display: grid; gap: .4rem; }
.campo-c span { font-family: var(--sans); font-size: .8rem; color: var(--tinta-2); }
.campo-c input, .campo-c textarea { font: inherit; font-size: 1.05rem; color: var(--tinta); background: rgba(255, 255, 255, .45); border: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent); border-radius: 8px; padding: .8rem 1rem; transition: border-color .3s, background-color .3s, box-shadow .3s; resize: vertical; }
.campo-c input:focus, .campo-c textarea:focus { outline: none; border-color: var(--oliva); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--oliva) 14%, transparent); }
.campo-c [aria-invalid="true"] { border-color: var(--almagra); }
.aviso-c { margin: 0; font-family: var(--sans); font-size: .88rem; color: var(--almagra); }
.formulario-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; font-family: var(--sans); font-size: .8rem; color: var(--tinta-2); }

/* ---------- Pie ---------- */
.pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 2rem; max-width: 92rem; margin: 0 auto; padding: 2.5rem var(--margen) calc(2.5rem + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); font-family: var(--sans); font-size: .82rem; color: var(--tinta-2); }
.pie p { margin: 0; }
.pie-firma { font-family: var(--serif); font-size: 1.25rem; color: var(--tinta); }
.pie ul { display: flex; gap: 1.4rem; margin-left: auto; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--tinta); }

/* ---------- Visor ---------- */
.visor { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(28, 25, 20, .96); color: var(--clara); }
.visor[open] { display: grid; place-items: center; animation: aparece-fondo .45s var(--curva-media); }
@keyframes aparece-fondo { from { opacity: 0; } }
.visor::backdrop { background: transparent; }
.visor figure { padding: 4rem 1rem 3.5rem; display: flex; flex-direction: column; align-items: center; max-width: min(94vw, 1500px); }
.visor img { max-height: calc(100dvh - 9rem); width: auto; object-fit: contain; border-radius: 10px; transition: opacity .35s; }
.visor img.cargando { opacity: 0; }
.visor figcaption { font-size: 1rem; opacity: .8; text-align: center; margin-top: 1rem; max-width: 60ch; }
.visor-cuenta { position: absolute; top: 1.4rem; left: 1.5rem; margin: 0; font-family: var(--sans); font-size: .82rem; opacity: .7; }
.visor-boton { position: absolute; width: 3rem; height: 3rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(246, 240, 230, .08); cursor: pointer; transition: background-color .3s; }
.visor-boton:hover { background: rgba(246, 240, 230, .18); }
.visor-boton svg, .reserva-cerrar svg, .cal-flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.visor-cerrar { top: 1rem; right: 1rem; }
.visor-ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.visor-sig { right: 1rem; top: 50%; transform: translateY(-50%); }
.visor-boton[hidden] { display: none; }

/* ---------- Tableta y móvil ---------- */
@media (max-width: 64rem) {
  .nav, .boton-cabecera { display: none; }
  .menu-boton { display: block; }
  .cabecera { gap: 1rem; padding: .9rem 1.1rem; }
  .bloque > *, .alojamiento .texto, .alojamiento-fotos, .eventos .foto-grande, .eventos .texto, .nosotros .foto-grande, .nosotros .texto, .contacto .texto, .formulario { grid-column: 1 / -1; }
  .bloque { row-gap: 2.2rem; padding-block: clamp(4rem, 12vw, 6rem); }
  .eventos .texto, .nosotros .texto { order: -1; }
  .mosaico { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; height: auto; gap: .6rem; }
  .mosaico figure .marco { aspect-ratio: 1; }
  .m1 { grid-column: 1; grid-row: 1 / 3; }
  .m1 .marco { aspect-ratio: auto; }
  .m2 { grid-column: 2; grid-row: 1; }
  .m3 { grid-column: 2; grid-row: 2; }
  .m4 { grid-column: 1 / -1; grid-row: 3; }
  .m4 .marco { aspect-ratio: 4 / 3; }
}
@media (max-width: 34rem) {
  .inicio-texto { top: auto; bottom: 6rem; transform: none; }
  .inicio-marco::before { background: linear-gradient(180deg, rgba(20, 18, 14, .35) 0%, rgba(20, 18, 14, 0) 25%, rgba(20, 18, 14, .2) 45%, rgba(20, 18, 14, .75) 100%); }
  .bajar { bottom: 1.4rem; }
  .rasgos { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .galeria-cabeza { flex-direction: column; }
  .pie ul { margin-left: 0; }
}

/* ---------- Sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .aparece, .js .aparece-foto, .js .aparece-foto img, .js .inicio h1 span, .js .inicio-texto > p, .js .inicio-acciones { opacity: 1; transform: none; clip-path: none; animation: none; }
  .js .dibujo-carpa path { stroke-dashoffset: 0; }
  .banda-foto { transform: none; }
}

/* =================================================================
   RESERVA
   ================================================================= */
.reserva { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--tinta); overflow: hidden; }
.reserva[open] { display: grid; grid-template-columns: 1fr min(42rem, 100%); }
.reserva::backdrop { background: rgba(9, 11, 16, .55); }
.reserva[open]::backdrop { animation: aparece-fondo .6s var(--curva-media); }
@keyframes aparece-fondo { from { opacity: 0; } }

.reserva-foto { position: relative; overflow: hidden; background: var(--noche); }
.reserva-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s var(--curva-media), transform 2.6s var(--curva); }
.reserva-foto img.activa { opacity: 1; transform: none; }
.reserva-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(9, 11, 16, .65)); }
.reserva-foto-pie { position: absolute; z-index: 2; left: clamp(1.5rem, 4vw, 3.5rem); right: clamp(1.5rem, 4vw, 3.5rem); bottom: clamp(1.5rem, 4vw, 3rem); margin: 0; color: var(--clara);
  font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 1rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -.03em; transition: opacity .5s; }
.reserva-foto-pie em { color: var(--luz); }
.reserva-foto-pie small { display: block; font-family: var(--sans); font-size: .9rem; letter-spacing: 0; color: var(--clara-2); margin-top: .9rem; }
.reserva[open] .reserva-foto { animation: foto-entra 1s var(--curva); }
@keyframes foto-entra { from { opacity: 0; } }

.reserva-panel { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; background: var(--papel); box-shadow: -30px 0 80px rgba(0, 0, 0, .2); }
.reserva[open] .reserva-panel { animation: panel-entra .85s var(--curva); }
.reserva.cerrando .reserva-panel { animation: panel-sale .5s var(--curva-media) forwards; }
.reserva.cerrando .reserva-foto, .reserva.cerrando::backdrop { animation: desvanece .5s var(--curva-media) forwards; }
@keyframes panel-entra { from { transform: translateX(100%); } }
@keyframes panel-sale { to { transform: translateX(100%); } }
@keyframes desvanece { to { opacity: 0; } }

.reserva-cabeza { display: flex; align-items: center; gap: 1.5rem; padding: 1.2rem clamp(1.25rem, 3.5vw, 2.5rem); border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); }
.reserva-titulo { margin: 0; font-family: var(--serif); font-size: 1.1rem; white-space: nowrap; }
.pasos { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: .3rem; counter-reset: paso; }
.pasos li { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--tinta-2); padding: .3rem .55rem; border-radius: 999px; transition: color .4s, background-color .4s; }
.pasos li::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid currentColor; font-size: .7rem; transition: background-color .4s, color .4s, border-color .4s; }
.pasos li.actual { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.pasos li.actual::before { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.pasos li.hecho::before { content: "✓"; background: var(--almagra); border-color: var(--almagra); color: var(--papel); }
.pasos li:not(.actual) span { display: none; }
.reserva-cerrar { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .3s, transform .5s var(--curva); }
.reserva-cerrar:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); transform: rotate(90deg); }
.reserva-cerrar svg, .cal-flecha svg, .visor-boton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

.reserva-cuerpo { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3.5vw, 2.5rem) 2rem; }
.paso-titulo { font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.6rem); line-height: 1; letter-spacing: -.035em; margin-bottom: .8rem; }
.paso-ayuda { color: var(--tinta-2); margin-bottom: 1.6rem; }
.paso.entra { animation: paso-entra .7s var(--curva); }
.paso.entra-atras { animation: paso-entra-atras .7s var(--curva); }
@keyframes paso-entra { from { opacity: 0; transform: translateX(28px); } }
@keyframes paso-entra-atras { from { opacity: 0; transform: translateX(-28px); } }
[data-plan-actual="estancia"] [data-solo="evento"], [data-plan-actual="evento"] [data-solo="estancia"], [data-plan-actual="estancia"] [data-solo="dia"], [data-plan-actual="evento"] [data-solo="dia"], [data-plan-actual="dia"] [data-solo="estancia"], [data-plan-actual="dia"] [data-solo="evento"] { display: none !important; }

/* Paso 1 */
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.opcion { position: relative; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; cursor: pointer; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 12%, transparent); transition: box-shadow .4s, transform .6s var(--curva); }
.opcion:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 30%, transparent), 0 18px 40px -20px rgba(29, 25, 21, .35); }
.opcion input { position: absolute; opacity: 0; }
.opcion img { aspect-ratio: 4 / 3.3; width: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.opcion:hover img { transform: scale(1.04); }
.opcion-texto { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.opcion-texto b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.opcion-texto span { font-size: .88rem; color: var(--tinta-2); line-height: 1.45; }
.opcion:has(input:checked) { box-shadow: 0 0 0 2px var(--tinta); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--almagra); outline-offset: 3px; }
.opcion::after { content: "✓"; position: absolute; top: .8rem; right: .8rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--tinta); color: var(--papel); font-size: .85rem; transform: scale(0); transition: transform .5s var(--curva); }
.opcion:has(input:checked)::after { transform: scale(1); }

/* Paso 2: calendario */
.calendario { position: relative; }
.cal-mandos { position: absolute; top: -.35rem; right: 0; display: flex; gap: .25rem; z-index: 2; }
.cal-flecha { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--tinta) 15%, transparent); border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .3s, border-color .3s; }
.cal-flecha:hover { border-color: var(--tinta); }
.cal-flecha[disabled] { opacity: .25; pointer-events: none; }
.cal-meses { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.cal-meses.mueve-sig { animation: meses-sig .6s var(--curva); }
.cal-meses.mueve-ant { animation: meses-ant .6s var(--curva); }
@keyframes meses-sig { from { opacity: 0; transform: translateX(20px); } }
@keyframes meses-ant { from { opacity: 0; transform: translateX(-20px); } }
.cal-mes h3 { font-size: 1.35rem; font-weight: 400; margin: 0 0 1rem; line-height: 2.5rem; text-transform: capitalize; }
.cal-semana, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-semana span { text-align: center; font-size: .68rem; letter-spacing: .1em; color: var(--tinta-2); padding-bottom: .5rem; }
.cal-dia { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.cal-dia::before { content: ""; position: absolute; inset: 12% 0; background: transparent; transition: background-color .25s; }
.cal-dia.en-rango::before { background: color-mix(in srgb, var(--almagra) 13%, transparent); }
.cal-dia.previa::before { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.cal-dia.ini.con-fin::before, .cal-dia.ini.con-previa::before { left: 50%; background: color-mix(in srgb, var(--almagra) 13%, transparent); }
.cal-dia.ini.con-previa::before { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.cal-dia.fin::before { right: 50%; background: color-mix(in srgb, var(--almagra) 13%, transparent); }
.cal-dia button { position: relative; width: 88%; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: .92rem; transition: background-color .25s, color .25s, transform .4s var(--curva); }
.cal-dia button:hover:not([disabled]) { background: color-mix(in srgb, var(--tinta) 10%, transparent); }
.cal-dia button[disabled] { color: color-mix(in srgb, var(--tinta) 28%, transparent); cursor: default; }
.cal-dia.hoy button::after { content: ""; position: absolute; left: 50%; bottom: 16%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--almagra); }
.cal-dia.ini button, .cal-dia.fin button, .cal-dia.unico button { background: var(--tinta); color: var(--papel); }
.cal-dia.ini button::after, .cal-dia.fin button::after { background: var(--papel); }
.cal-dia.ini button, .cal-dia.unico button { animation: pulso .5s var(--curva); }
@keyframes pulso { from { transform: scale(.82); } }
.cal-resumen { min-height: 1.6em; margin: 1.4rem 0 0; font-family: var(--serif); font-size: 1.25rem; }
.cal-resumen em { color: var(--almagra); }

/* Paso 3 */
.fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); }
.fila-texto { margin: 0; display: flex; flex-direction: column; }
.fila-texto b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.fila-texto span { font-size: .88rem; color: var(--tinta-2); }
.contador { display: flex; align-items: center; gap: .6rem; }
.contador button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tinta) 20%, transparent); background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: border-color .3s, background-color .3s; }
.contador button:hover:not([disabled]) { border-color: var(--tinta); }
.contador button[disabled] { opacity: .3; cursor: default; }
.contador output { min-width: 2.5ch; text-align: center; font-family: var(--serif); font-size: 1.9rem; }
.contador output.salta { animation: salta .45s var(--curva); }
@keyframes salta { from { transform: translateY(-6px); opacity: .3; } }
.chips { border: 0; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips legend { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .8rem; padding: 0; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .5rem 1.05rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tinta) 18%, transparent); font-size: .92rem; transition: background-color .35s, color .35s, border-color .35s; }
.chips input:checked + span { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.chips input:focus-visible + span { outline: 2px solid var(--almagra); outline-offset: 2px; }
.interruptor { cursor: pointer; position: relative; }
.interruptor input { position: absolute; opacity: 0; width: 3.2rem; height: 1.9rem; right: 0; margin: 0; cursor: pointer; }
.interruptor i { flex: none; position: relative; width: 3.2rem; height: 1.9rem; border-radius: 999px; background: color-mix(in srgb, var(--tinta) 18%, transparent); transition: background-color .35s; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.9rem - 6px); height: calc(1.9rem - 6px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .45s var(--curva); }
.interruptor input:checked + i { background: var(--almagra); }
.interruptor input:checked + i::after { transform: translateX(1.3rem); }
.interruptor input:focus-visible + i { outline: 2px solid var(--almagra); outline-offset: 3px; }
.campos { display: grid; gap: 1.4rem; margin-top: 2rem; }
.campo { display: grid; gap: .35rem; min-width: 0; }
.campo > span { font-size: .85rem; color: var(--tinta-2); }
.campo small { opacity: .7; margin-left: .3rem; }
.campo input, .campo textarea { font: inherit; color: var(--tinta); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 25%, transparent); border-radius: 0; padding: .45rem 0; width: 100%; min-width: 0; transition: border-color .3s; }
.campo input { font-family: var(--serif); font-size: 1.5rem; }
.campo textarea { resize: vertical; min-height: 3.2rem; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--tinta); }
.campo input[aria-invalid="true"] { border-bottom-color: var(--almagra); }

/* Paso 4: billete */
.billete { position: relative; margin-top: 1.4rem; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 8%, transparent), 0 24px 50px -30px rgba(29, 25, 21, .35); overflow: hidden; }
.billete-cabeza { padding: 1.5rem 1.6rem 1.3rem; background: var(--noche); color: var(--clara); }
.billete-que { margin: 0 0 .3rem; font-family: var(--serif); font-size: 1.7rem; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.billete-que em { color: var(--luz); }
.billete-nombre { margin: 0; font-size: .88rem; color: var(--clara-2); }
.billete-datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; padding: 1.4rem 1.6rem; }
.billete-datos dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: .2rem; }
.billete-datos dd { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; text-transform: none; }
.billete-datos dd::first-letter { text-transform: uppercase; }
.billete-precio { position: relative; padding: 1.3rem 1.6rem; border-top: 1px dashed color-mix(in srgb, var(--tinta) 22%, transparent); }
.billete-precio::before, .billete-precio::after { content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 8%, transparent); }
.billete-precio::before { left: -11px; } .billete-precio::after { right: -11px; }
.billete-precio:empty { display: none; }
.billete-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.billete-total span { font-size: .9rem; }
.billete-total strong { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; letter-spacing: -.02em; }
.billete-precio ul { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .84rem; color: var(--tinta-2); }
.billete-precio li + li { margin-top: .2rem; }
.billete-nota { margin: 0; padding: 0 1.6rem 1.4rem; font-size: .84rem; color: var(--tinta-2); }
.mensaje { margin-top: 1.4rem; font-size: .9rem; }
.mensaje summary { cursor: pointer; color: var(--tinta-2); padding: .4rem 0; }
.mensaje-texto { white-space: pre-line; margin: .6rem 0 0; padding: 1rem 1.1rem; background: color-mix(in srgb, var(--tinta) 5%, transparent); border-radius: 6px; }

.paso-hecho .paso-titulo { margin-top: 2rem; }
.paso-hecho .grande { margin: 1rem 0 1.6rem; }
.estado { font-size: .9rem; color: var(--agua); min-height: 1.4em; }

.reserva-pie { display: flex; align-items: center; gap: 1rem; padding: 1rem clamp(1.25rem, 3.5vw, 2.5rem) calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); background: var(--papel); }
.reserva-cuenta { margin: 0; flex: 1; font-size: .9rem; color: var(--tinta-2); line-height: 1.35; }
.reserva-cuenta b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--tinta); }
.aviso { margin: 0; flex: 1; font-size: .9rem; color: var(--almagra); }
.aviso:not([hidden]) + .reserva-botones { margin-left: auto; }
.aviso:not([hidden]) ~ * { }
.reserva-pie:has(.aviso:not([hidden])) .reserva-cuenta { display: none; }
.reserva-botones { display: flex; gap: .6rem; margin-left: auto; }
.reserva-botones [hidden] { display: none; }

.reserva { font-family: var(--sans); }

@media (max-width: 64rem) {
  .reserva[open] { grid-template-columns: 1fr; }
  .reserva-foto { display: none; }
  .reserva-panel { box-shadow: none; }
  @keyframes panel-entra { from { transform: translateY(100%); } }
  @keyframes panel-sale { to { transform: translateY(100%); } }
  .reserva-titulo { display: none; }
  .pasos { margin-left: 0; }
}
@media (max-width: 34rem) {
  .opciones { grid-template-columns: 1fr; }
  .opcion { flex-direction: row; }
  .opcion img { width: 38%; aspect-ratio: auto; }
  .cal-meses { grid-template-columns: 1fr; }
  .cal-meses .cal-mes:nth-child(2) { display: none; }
  .reserva-botones .boton { padding-inline: 1.1rem; }
  .reserva-pie { flex-wrap: wrap; gap: .6rem; }
  .reserva-cuenta, .reserva-pie .aviso { flex-basis: 100%; font-size: .8rem; }
  .reserva-cuenta b { font-size: 1.05rem; }
  .reserva-botones { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .reserva-botones:has([data-atras][hidden]) { grid-template-columns: 1fr; }
  .reserva-botones .boton { white-space: normal; text-align: center; min-width: 0; }
  .billete-que, .billete-nombre, .billete-precio { overflow-wrap: anywhere; }
  .billete-total { flex-wrap: wrap; gap: .3rem 1rem; }
  .eventos .boton { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .reserva-panel, .reserva-foto, .paso { animation: none !important; }
}

/* =================================================================
   Versión final: detalles
   ================================================================= */
.inicio-lugar { position: absolute; right: clamp(1.5rem, 4vw, 3rem); bottom: 2.6rem; margin: 0; font-family: var(--sans); font-size: .78rem; letter-spacing: .06em; opacity: .85; }
.incluye { font-family: var(--sans); font-size: .82rem; line-height: 1.7; color: var(--tinta-2); max-width: 44ch; margin: -.6rem 0 1.6rem; }

/* Las dos ramas, cada una una sola vez */
.rama { display: block; height: auto; pointer-events: none; user-select: none; }
.rama-olivo { width: min(18rem, 70%); margin: 0 0 1.4rem -.4rem; opacity: .85; }
.js .rama-olivo { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--curva) .2s; }
.js .visto .rama-olivo { clip-path: inset(0 0 0 0); }
.contacto { position: relative; }
.rama-hojas { position: absolute; top: clamp(1.5rem, 4vw, 3rem); right: var(--margen); width: clamp(9rem, 20vw, 19rem); opacity: .5; }
.js .rama-hojas.aparece { transform: translateY(-14px); transition: opacity 1.6s var(--curva), transform 2s var(--curva); }
.js .rama-hojas.aparece.visto { opacity: .5; transform: none; }
.contacto .formulario { position: relative; z-index: 1; margin-top: clamp(3rem, 8vw, 6rem); }

.cita { margin: 1.8rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--oro); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: var(--tinta); max-width: 34ch; }

/* Pie */
.pie { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem var(--hueco); align-items: start; padding-top: 3.5rem; }
.pie-marca p:not(.pie-firma) { max-width: 34ch; margin-top: .5rem; }
.pie-nav, .pie-contacto { display: grid; gap: .55rem; }
.pie-legal { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent); }

/* Barra fija en móvil */
.barra-movil { display: none; }
@media (max-width: 64rem) {
  .barra-movil { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .55rem .55rem .55rem 1.2rem; border-radius: 14px; background: color-mix(in srgb, var(--papel) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 8%, transparent), 0 14px 34px -18px rgba(42, 37, 32, .5);
    transform: translateY(calc(100% + 30px)); transition: transform .6s var(--curva); }
  body.con-barra:not(.menu-abierto) .barra-movil { transform: none; }
  .barra-wa { font-family: var(--sans); font-size: .9rem; text-decoration: none; }
  .pie { grid-template-columns: 1fr 1fr; padding-bottom: 6rem; }
  .pie-marca { grid-column: 1 / -1; }
  .inicio-lugar { display: none; }
  .rama-hojas { width: 8.5rem; top: 1rem; opacity: .4; }
  .js .rama-hojas.aparece.visto { opacity: .4; }
  .contacto .formulario { margin-top: 0; }
}

.billete-total strong small { font-size: .9rem; color: var(--tinta-2); }

/* Reserva conectada: días ocupados y confirmación */
.cal-dia.ocupado button { color: color-mix(in srgb, var(--tinta) 32%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tinta) 40%, transparent); }
.cal-dia.ocupado::before { background: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--tinta) 6%, transparent) 4px 8px); inset: 12% 4%; border-radius: 6px; }
.hecho-ref { margin: 1.2rem 0 .6rem; font-size: .85rem; color: var(--tinta-2); }
.hecho-ref b { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--tinta); background: var(--crema-2); padding: .15rem .5rem; border-radius: 6px; margin-left: .3rem; }
.paso-hecho .paso-titulo { margin-top: 0; }
.hecho-pasos { margin: 0 0 1.6rem; padding-left: 1.2rem; display: grid; gap: .45rem; color: var(--tinta-2); }
.hecho-pasos b { color: var(--tinta); font-weight: 500; }
.hecho-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.aviso-c.ok { color: var(--agua); }

.pista { font-size: .82rem; color: var(--almagra); min-height: 1em; }
.pista:empty { display: none; }

/* =================================================================
   Lanzamiento: valoraciones, carpa incluida, mensaje final, privacidad
   ================================================================= */
.nota-resenas { font-family: var(--sans); font-size: .9rem; color: var(--tinta-2); margin-top: 1.4rem; }
.nota-resenas b { color: var(--tinta); }
.estrellas { color: var(--oro); letter-spacing: .12em; }
.resenas { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco); margin-top: clamp(1rem, 3vw, 2.5rem); }
.resena { display: flex; flex-direction: column; gap: .8rem; padding: 1.6rem 1.5rem 1.4rem; background: var(--papel); border-radius: var(--radio); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 6%, transparent); }
.resena .estrellas { margin: 0; font-size: .95rem; }
.resena blockquote { margin: 0; font-size: 1.08rem; line-height: 1.5; font-style: italic; flex: 1; }
.resena .autor { display: flex; align-items: center; gap: .7rem; margin: 0; font-family: var(--sans); font-size: .82rem; color: var(--tinta-2); }
.inicial { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--oliva); color: var(--crema); font-size: .72rem; font-weight: 600; letter-spacing: .04em; flex: none; }
.js .resena.aparece:nth-child(2) { transition-delay: .1s; }
.js .resena.aparece:nth-child(3) { transition-delay: .2s; }
@media (max-width: 64rem) {
  .resenas { grid-template-columns: 1fr; }
}

.fila-incluida { margin: 0; }
.incluida { font-size: .8rem; font-weight: 600; color: var(--agua); background: color-mix(in srgb, var(--agua) 12%, transparent); padding: .3rem .7rem; border-radius: 999px; }

.mensaje-final { margin: 0 0 1rem; padding: 1rem 1.1rem; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 10%, transparent); display: grid; gap: .8rem; }
.mensaje-final-texto { margin: 0; white-space: pre-line; font-size: .9rem; line-height: 1.5; max-height: 11rem; overflow-y: auto; user-select: all; -webkit-user-select: all; }
.mensaje-final .boton { justify-self: start; }
.boton-ancho { width: 100%; }

.privacidad-nota { margin: 0; font-family: var(--sans); font-size: .8rem; color: var(--tinta-2); }
.privacidad-nota a, .pie-legal a, .formulario-pie a { color: inherit; }

/* Precio de la noche en el calendario (solo fines de semana y días especiales) */
.cal-dia button[data-precio]::before { content: attr(data-precio) "€"; position: absolute; left: 0; right: 0; bottom: 9%; font-size: .56rem; line-height: 1; color: var(--almagra); font-weight: 600; letter-spacing: .02em; }
.cal-dia.ini button[data-precio]::before, .cal-dia.fin button[data-precio]::before { color: var(--crema); }
.cal-dia.cara button { padding-bottom: .55rem; }
.cal-leyenda-precio { margin: .6rem 0 0; font-family: var(--sans); font-size: .8rem; color: var(--tinta-2); }

/* Invitados: número que se puede escribir */
.contador-num { width: 3.2ch; min-width: 3.2ch; text-align: center; font-family: var(--serif); font-size: 1.9rem; color: var(--tinta); background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.contador-num::-webkit-inner-spin-button, .contador-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.contador-num:focus { outline: none; border-bottom-color: var(--tinta); }
.contador-num.salta { animation: salta .45s var(--curva); }