/* Costa Patagonia — sitio de Vibrando con el Código (paleta «Roble y grafito» elegida por Aquiles, 02/11/2026)
   Dirección: «bosque, piedra y madera, el sur de Chile en Pichilemu» (Aquiles en la reunión del 02/11).
   Hueso de fondo, grafito como la piedra, bosque para las secciones de agua, roble como la madera de la tina,
   turquesa tenue como el agua de la piscina (solo sobre oscuro). Sello: el termómetro (afuera · piscina · tina). */
@font-face { font-family: 'Young Serif'; src: url(../fonts/youngserif-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(../fonts/figtree.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
  --bosque: #304B3B;
  --bosque-2: #3B5A48;
  --niebla: #E8E3D8;
  --niebla-2: #DDD6C8;
  --piedra: #CFC8BA;
  --texto: #292D2E;
  --texto-2: #555A57;
  --brote: #8EADA7;
  --agua: #7A5536;
  --agua-claro: #8EADA7;
  --brasa: #9C7048;
  --blanco: #F5F2EC;
  --grafito: #292D2E;
  --roble: #9C7048;
  --serif: 'Young Serif', Georgia, serif;
  --sans: 'Figtree', system-ui, sans-serif;
  --ancho: 1240px;
  --lado: 16px;
  --radio: 4px;
}
@media (min-width: 760px) { :root { --lado: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--niebla); color: var(--texto); font: 400 1rem/1.55 var(--sans); font-variant-numeric: lining-nums; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--agua); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.25rem); }
h2 { font-size: clamp(2rem, 1.5rem + 1.9vw, 2.75rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; max-width: 64ch; }
.lead { font-size: 1.125rem; color: var(--texto-2); }
.chico { font-size: .875rem; color: var(--texto-2); }
:focus-visible { outline: 3px solid var(--agua-claro); outline-offset: 2px; }
.saltar { position: absolute; left: 8px; top: 8px; background: var(--blanco); padding: 8px 12px; z-index: 99; clip-path: inset(50%); white-space: nowrap; }
.saltar:focus { clip-path: none; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }
.seccion { padding: clamp(56px, 8vw, 112px) 0; }
.oscuro { background: var(--bosque); color: var(--niebla); }
.oscuro a { color: var(--niebla); }
.oscuro .lead, .oscuro .chico { color: #C4BDB0; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: var(--radio);
  font: 600 1rem/1.2 var(--sans); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .2s, color .2s; }
.boton-brote { background: var(--brote); color: var(--grafito); }
.boton-brote:hover { background: #A3BFB9; }
.boton-bosque { background: var(--bosque); color: var(--niebla); }
.boton-bosque:hover { background: var(--bosque-2); }
.boton-linea { border-color: currentColor; color: inherit; background: transparent; }
.oscuro .boton-brote { color: var(--grafito); }
.oscuro .boton-linea { color: var(--niebla); }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 30; background: var(--bosque); color: var(--niebla); }
.cabecera .envoltura { display: flex; align-items: center; gap: 16px; min-height: 64px; max-width: none; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--niebla); text-decoration: none; margin-right: auto; }
.marca img { width: 54px; height: auto; }
@media (min-width: 900px) { .marca img { width: 66px; } }
.marca span { font: 400 1.1875rem/1 var(--serif); white-space: nowrap; }
.marca small { display: block; margin-top: 4px; font: 500 .6875rem/1 var(--sans); letter-spacing: .04em; color: #C4BDB0; }
@media (min-width: 900px) { .marca span { font-size: 1.375rem; } .marca small { font-size: .75rem; } }
@media (max-width: 400px) { .marca small { display: none; } .marca img { width: 46px; } .marca span { font-size: 1.0625rem; } .marca { gap: 8px; } }
@media (max-width: 480px) { .cabecera .idioma { display: none; } .cabecera .envoltura { gap: 10px; } }
.menu { display: none; gap: 22px; }
.menu a { color: var(--niebla); text-decoration: none; font-size: .9375rem; }
.menu a:hover, .menu a[aria-current] { color: var(--blanco); text-decoration: underline; text-decoration-color: var(--brote); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.idioma { color: var(--niebla); font-size: .875rem; text-decoration: none; padding: 8px 4px; }
.cabecera .boton { min-height: 40px; padding: 8px 16px; }
@media (min-width: 1000px) { .menu { display: flex; } }
.abrir-menu { display: inline-flex; background: none; border: 0; color: var(--niebla); padding: 8px; min-width: 44px; min-height: 44px; cursor: pointer; align-items: center; justify-content: center; }
@media (min-width: 1000px) { .abrir-menu { display: none; } }
.menu-movil { display: none; background: var(--bosque); padding: 8px var(--lado) 20px; }
.menu-movil.abierto { display: grid; }
.menu-movil a { color: var(--niebla); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--bosque-2); font-size: 1.0625rem; }

/* Portada dividida: el panel de bosque con el buscador y la foto de las cabañas al anochecer */
.portada { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--bosque); color: var(--niebla); }
.portada-foto { position: relative; overflow: hidden; height: 44svh; min-height: 250px; }
.portada-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.portada-foto figcaption { position: absolute; left: 16px; bottom: 12px; font-size: .8125rem; color: #E8E3D8; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.portada-panel { padding: 28px var(--lado) 36px; }
.portada-panel h1 { color: var(--blanco); }
.portada-panel .lead { color: #DCD5C7; }
@media (min-width: 900px) {
  .portada { grid-template-columns: minmax(420px, 5fr) 7fr; min-height: calc(100svh - 64px); }
  .portada-foto { order: 2; height: auto; }
  .portada-panel { order: 1; padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .portada-foto img { animation: anochecer 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .portada-panel > * { animation: subir .7s ease-out both; }
  .portada-panel > :nth-child(2) { animation-delay: .08s; }
  .portada-panel > :nth-child(3) { animation-delay: .16s; }
}
@keyframes anochecer { from { transform: scale(1.06); filter: brightness(1.25) saturate(.8); } to { transform: none; filter: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Buscador */
.buscador { background: var(--niebla); color: var(--texto); border-radius: var(--radio); padding: 16px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-top: 8px; max-width: 520px; }
.buscador label { display: block; font-size: .8125rem; font-weight: 600; color: var(--texto-2); margin-bottom: 4px; }
.buscador input, .buscador select { min-width: 0; width: 100%; min-height: 48px; border: 1px solid var(--piedra); border-radius: var(--radio); background: var(--blanco); color: var(--texto);
  font: 500 1rem var(--sans); padding: 10px 12px; cursor: pointer; }
.buscador .boton { align-self: end; width: 100%; }
.buscador .nota { grid-column: 1 / -1; margin: 0; font-size: .8125rem; color: var(--texto-2); }
.buscador-ancho { max-width: none; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .buscador-ancho { grid-template-columns: repeat(3, 1fr) auto; } .buscador-ancho .nota { grid-column: 1 / -1; } }
/* Calendario único de llegada y salida */
.fechas { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; }
@media (min-width: 760px) { .buscador-ancho .fechas { grid-column: span 2; } }
.campo-fecha { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 58px; padding: 8px 12px; text-align: left; cursor: pointer;
  background: var(--blanco); color: var(--texto); border: 1px solid var(--piedra); font: inherit; }
.campo-fecha:first-of-type { border-radius: var(--radio) 0 0 var(--radio); }
.campo-fecha:last-of-type { border-radius: 0 var(--radio) var(--radio) 0; border-left: 0; }
.campo-fecha .et { font-size: .75rem; font-weight: 600; color: var(--texto-2); }
.campo-fecha .valor { font: 600 1rem/1.2 var(--sans); }
.campo-fecha.vacio .valor { font-weight: 400; color: var(--texto-2); }
.campo-fecha.activo { box-shadow: inset 0 0 0 2px var(--agua); position: relative; z-index: 1; }
.calendario { position: absolute; z-index: 50; top: calc(100% + 8px); left: 0; width: min(660px, calc(100vw - 32px)); background: var(--blanco); color: var(--texto);
  border-radius: 12px; padding: 16px 18px 14px; box-shadow: 0 18px 50px rgba(28,31,32,.28), 0 0 0 1px rgba(41,45,46,.08); }
.calendario[hidden] { display: none; }
.cal-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-guia { margin: 0; font-weight: 600; font-size: .9375rem; text-align: center; }
.cal-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--piedra); background: var(--blanco); font-size: 1.375rem; line-height: 1; cursor: pointer; color: var(--texto); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.meses { display: grid; gap: 16px 24px; margin-top: 8px; }
@media (min-width: 760px) { .meses { grid-template-columns: 1fr 1fr; } }
.mes-nombre { margin: 4px 0 8px; text-align: center; font: 400 1.0625rem var(--serif); }
.semana, .dias { display: grid; grid-template-columns: repeat(7, 1fr); }
.semana span { text-align: center; font-size: .75rem; color: var(--texto-2); padding: 4px 0; }
.dias button { height: 40px; border: 0; background: none; font: 500 .9375rem var(--sans); color: var(--texto); cursor: pointer; border-radius: 50%; position: relative; }
.dias button:hover:not(:disabled) { background: var(--niebla-2); }
.dias button:disabled { color: #A8A398; text-decoration: line-through; cursor: default; }
.dias button.hoy { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dias button.entre { background: rgba(122,85,54,.13); border-radius: 0; }
.dias button.inicio, .dias button.fin, .dias button.inicio:hover, .dias button.fin:hover { background: var(--bosque); color: var(--blanco); border-radius: 50%; }
.dias button.entre:hover { background: rgba(122,85,54,.22); }
.buscador { position: relative; z-index: 5; }
.buscador:has(.calendario:not([hidden])) { z-index: 60; }
.dias button:focus-visible { outline: 2px solid var(--agua); outline-offset: 1px; }
.cal-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--niebla-2); }
.cal-borrar { background: none; border: 0; font: 600 .9375rem var(--sans); text-decoration: underline; color: var(--texto); cursor: pointer; padding: 10px 4px; }
.cal-listo { width: auto; min-height: 44px; padding: 10px 22px; }
@media (max-width: 759px) {
  .calendario { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 88svh; overflow-y: auto; border-radius: 16px 16px 0 0;
    padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 0 0 100vmax rgba(28,31,32,.5); }
  .cal-abierto .barra-movil, .cal-abierto .wa-flotante { display: none; }
}
.datos-rapidos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: .875rem; color: #C4BDB0; }
.datos-rapidos strong { color: var(--blanco); font-weight: 600; }

/* Termómetro — el sello del sitio */
.termo { margin: 40px 0 8px; }
.termo-escala { position: relative; height: 112px; }
.termo-barra { position: absolute; left: 0; right: 0; top: 56px; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #4F6F78 0%, #6F8F94 30%, #8EADA7 55%, #A9C3BD 70%, #C9A27A 88%, #9C7048 100%); }
.termo-marcas { position: absolute; left: 0; right: 0; top: 70px; height: 24px; }
.termo-marcas span { position: absolute; transform: translateX(-50%); font-size: .75rem; color: #C4BDB0; font-variant-numeric: tabular-nums; }
.termo-marcas span::before { content: ''; position: absolute; left: 50%; top: -6px; width: 1px; height: 5px; background: #5E6B63; }
.termo-punto { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.termo-punto b { display: block; font: 400 1.5rem/1 var(--serif); color: var(--blanco); font-variant-numeric: tabular-nums; }
.termo-punto small { display: block; font-size: .75rem; color: #C4BDB0; margin-top: 4px; }
.termo-punto::after { content: ''; position: absolute; left: 50%; top: 50px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 3px solid var(--bosque); }
.termo-afuera::after { background: var(--niebla); }
.termo-piscina { left: 72.5%; }
.termo-piscina::after { background: var(--agua-claro); width: 34px; margin-left: -17px; border-radius: 9px; }
.termo-tina { left: 95%; }
.termo-tina::after { background: var(--brasa); }
.termo-afuera[hidden] { display: none; }
@media (max-width: 560px) {
  .termo-punto b { font-size: 1.125rem; }
  .termo-punto small { font-size: .75rem; }
  .termo-tina { left: 93%; }
  .termo-tina { transform: translateX(-75%); }
}
.agua-grid { display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 900px) { .agua-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.agua-ficha { display: grid; gap: 16px; }
.agua-ficha h3 { color: var(--blanco); margin: 0; }
.agua-ficha dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .9375rem; }
.agua-ficha dt { color: #C4BDB0; }
.agua-ficha dd { margin: 0; color: var(--niebla); }
.agua-fotos { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.agua-fotos .foto:first-child { grid-row: span 2; }

/* Fotos y visor */
.foto { display: block; position: relative; overflow: hidden; padding: 0; border: 0; background: var(--bosque-2); cursor: zoom-in; border-radius: var(--radio); width: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .foto:hover img { transform: scale(1.04); } }
.visor { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(28,31,32,.96); color: var(--niebla); }
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor::backdrop { background: rgba(28,31,32,.96); }
.visor img { max-width: 94vw; max-height: 86dvh; width: auto; height: auto; object-fit: contain; }
.visor button { position: absolute; background: rgba(41,45,46,.8); color: var(--niebla); border: 1px solid #4A5E52; border-radius: 50%; width: 48px; height: 48px; font-size: 1.375rem; cursor: pointer; }
.visor .cerrar { top: 12px; right: 12px; }
.visor .ant { left: 12px; top: 50%; transform: translateY(-50%); }
.visor .sig { right: 12px; top: 50%; transform: translateY(-50%); }
.visor .cuenta { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: .875rem; color: #C4BDB0; }

/* Cabañas: comparación lado a lado */
.cabanas-cabeza { display: grid; gap: 8px; margin-bottom: 36px; }
@media (min-width: 900px) { .cabanas-cabeza { grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; } }
.comparar { display: grid; gap: 40px; }
@media (min-width: 900px) { .comparar { grid-template-columns: 1fr 1fr; gap: 32px; } }
.cabana h3 { font-size: 1.875rem; margin: 16px 0 6px; }
.cabana h3 a { color: inherit; text-decoration: none; }
.cabana .principal { aspect-ratio: 3 / 2; }
.miniaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.miniaturas .foto { aspect-ratio: 4 / 3; }
.ficha { margin: 14px 0 20px; padding: 0; list-style: none; border-top: 1px solid var(--piedra); }
.ficha li { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--piedra); font-size: .9375rem; }
.ficha li span:first-child { color: var(--texto-2); }
.comunes { margin-top: 40px; padding: 20px 0 0; border-top: 2px solid var(--roble); display: grid; gap: 8px 32px; }
@media (min-width: 760px) { .comunes { grid-template-columns: 220px 1fr; } }
.comunes h3 { font-size: 1.25rem; margin: 0; }
.comunes p { margin: 0; color: var(--texto-2); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Madera, piedra y fogón */
.historia { display: grid; gap: 32px; }
@media (min-width: 900px) { .historia { grid-template-columns: 5fr 7fr; align-items: center; gap: 56px; } }
.cita { margin: 0; }
.cita p { font: 400 clamp(1.5rem, 1.2rem + 1.1vw, 2rem)/1.3 var(--serif); max-width: 24ch; margin-bottom: 14px; }
.cita cite { display: block; font-style: normal; font-size: .9375rem; color: var(--texto-2); }
/* El único bloque de madera del sitio (Agatha, 02/11/2026): roble oscuro con texto hueso 5,2:1. No sumar otro fondo roble. */
.madera { background: var(--agua); color: var(--niebla); }
.madera .lead, .madera .cita cite { color: var(--niebla); }
.madera a { color: var(--niebla); }
.mosaico { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; aspect-ratio: 5 / 4; }
.mosaico .foto:first-child { grid-row: span 2; }

/* Masajes */
.masajes { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .masajes { grid-template-columns: 6fr 5fr; gap: 56px; } }
.masajes .foto { aspect-ratio: 4 / 5; max-height: 640px; }

/* Opiniones: el puntaje manda */
.opiniones { display: grid; gap: 40px; }
@media (min-width: 900px) { .opiniones { grid-template-columns: 4fr 8fr; gap: 64px; } }
.puntaje { font: 400 clamp(5rem, 3rem + 8vw, 8.5rem)/.9 var(--serif); color: var(--bosque); font-variant-numeric: tabular-nums; }
.puntaje-fuente { margin: 10px 0 18px; font-size: 1rem; }
.categorias { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; font-size: .9375rem; max-width: 320px; }
.categorias dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.categorias dt { color: var(--texto-2); }
.voces { display: grid; gap: 28px; align-items: start; align-content: start; }
@media (min-width: 760px) { .voces { grid-template-columns: 1fr 1fr; } }
.voz { margin: 0; padding-top: 14px; border-top: 1px solid var(--piedra); }
.voz p { font-size: 1.0625rem; margin-bottom: 8px; }
.voz cite { display: block; font-style: normal; font-size: .875rem; color: var(--texto-2); }

/* Ubicación */
.ubicacion { display: grid; gap: 32px; }
@media (min-width: 900px) { .ubicacion { grid-template-columns: 5fr 7fr; gap: 56px; } }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radio); background: var(--niebla-2); }
.cerca { list-style: none; margin: 20px 0; padding: 0; border-top: 1px solid var(--piedra); }
.cerca li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--piedra); align-items: center; }
.cerca a { font-weight: 600; }
.cerca span { color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Reservar aquí: lo que viene */
.pasos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; counter-reset: paso; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.pasos li { counter-increment: paso; padding-top: 16px; border-top: 2px solid var(--brote); }
.pasos li::before { content: counter(paso); display: block; font: 400 2rem/1 var(--serif); color: #D4B08A; margin-bottom: 10px; }
.pasos h3 { font-size: 1.25rem; color: var(--blanco); }
.pasos p { font-size: .9375rem; color: #C4BDB0; margin: 0; }
.medios { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.medios li { border: 1px solid #4A5E52; border-radius: 999px; padding: 6px 14px; font-size: .875rem; }
.aviso-viene { display: inline-block; font-size: .875rem; background: var(--agua); color: var(--niebla); padding: 6px 12px; border-radius: var(--radio); margin-bottom: 16px; }

/* Preguntas */
.preguntas { max-width: 820px; }
.preguntas details { border-bottom: 1px solid var(--piedra); }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 600; font-size: 1.0625rem; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; position: absolute; right: 6px; top: 12px; font: 400 1.75rem/1 var(--serif); color: var(--agua); }
.preguntas details[open] summary::after { content: '–'; }
.preguntas details p { color: var(--texto-2); }

/* Resultados del motor */
.resultados { margin-top: 32px; display: grid; gap: 24px; }
.estado { padding: 16px; border-radius: var(--radio); background: var(--niebla-2); }
.tipo { background: var(--blanco); border: 1px solid var(--piedra); border-radius: var(--radio); display: grid; overflow: hidden; }
@media (min-width: 760px) { .tipo { grid-template-columns: 320px 1fr; } }
.tipo .foto { aspect-ratio: 16 / 10; border-radius: 0; height: 100%; max-height: 260px; }
.tipo-cuerpo { padding: 18px 20px; }
.tipo-cuerpo h3 { margin-bottom: 4px; }
.plan { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--piedra); }
.plan:first-of-type { border-top: 0; }
.plan b { font: 400 1.5rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.plan .chico { grid-column: 1 / -1; margin: 0; }
@media (max-width: 520px) { .plan { grid-template-columns: 1fr; } .plan .boton { width: 100%; } }

/* Páginas interiores */
.cabeza-pagina { padding-top: clamp(40px, 6vw, 80px); padding-bottom: 24px; }
.migas { font-size: .875rem; color: var(--texto-2); margin-bottom: 12px; }
.migas a { color: var(--texto-2); }
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 900px) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.galeria .foto { aspect-ratio: 4 / 3; }
.galeria .foto.ancha { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.dos-col { display: grid; gap: 32px; }
@media (min-width: 900px) { .dos-col { grid-template-columns: 1fr 1fr; gap: 56px; } }
.texto-largo { columns: 1; }
@media (min-width: 900px) { .texto-largo { columns: 2; column-gap: 56px; } .texto-largo > * { break-inside: avoid; } }
.texto-largo h2 { font-size: 1.5rem; margin-top: 0; }
.texto-largo ul { padding-left: 1.1em; margin: 0 0 1.2em; }
.texto-largo li { margin-bottom: 4px; }

/* Cierre y pie */
.cierre { position: relative; color: var(--blanco); background: var(--bosque); }
.cierre .foto-fondo { position: absolute; inset: 0; }
.cierre .foto-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.cierre .foto-fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,31,32,.86) 0%, rgba(28,31,32,.55) 55%, rgba(28,31,32,.2) 100%); }
.cierre .envoltura { position: relative; padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(72px, 10vw, 140px); }
.cierre h2 { max-width: 15ch; color: var(--blanco); }
.cierre p { color: #DCD5C7; }
.pie { background: var(--grafito); color: #C4BDB0; font-size: .9375rem; padding: 36px 0 110px; }
@media (min-width: 900px) { .pie { padding-bottom: 36px; } }
.pie .envoltura { display: grid; gap: 24px; }
@media (min-width: 900px) { .pie .envoltura { grid-template-columns: 2fr 1fr 1fr; } }
.pie a { color: var(--niebla); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie .firma { grid-column: 1 / -1; border-top: 1px solid var(--bosque-2); padding-top: 18px; font-size: .875rem; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* Barra fija en celular y WhatsApp en computador */
.barra-movil { transition: transform .25s ease; }
.con-buscador-arriba .barra-movil { transform: translateY(110%); }
.con-buscador-arriba.barra-lista .barra-movil { transform: none; }
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(41,45,46,.97); }
.barra-movil .boton { min-height: 46px; }
@media (min-width: 900px) { .barra-movil { display: none; } }
.wa-flotante { display: none; }
@media (min-width: 900px) {
  .wa-flotante { display: inline-flex; position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #1f7a4a; color: #fff; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  .wa-flotante svg { width: 28px; height: 28px; }
}
.icono { width: 20px; height: 20px; flex: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.buscador { border: 1px solid var(--piedra); }
.pie p.firma { margin: 0; border: 0; padding: 0; display: block; font-size: inherit; }
.pie .aviso-legal { flex-basis: 100%; margin: 0 !important; color: #C4BDB0; }
@media (min-width: 1600px) { :root { --ancho: 1440px; } }

/* ===== Propuestas de portada (A–D) ===== */
.hero { position: relative; overflow: hidden; }
.hero h1 { font-size: clamp(2.35rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 16px; }
.hero .lead { max-width: 34em; margin: 0 0 8px; }
.hero-fondo { position: absolute; inset: 0; }
.hero-fondo img { width: 100%; height: 100%; object-fit: cover; }
.hero-tarjeta .buscador { margin: 0; max-width: none; background: var(--blanco); border: 0; box-shadow: 0 24px 60px rgba(28,31,32,.28); }
.hero-tarjeta .datos-rapidos, .hero-b .datos-rapidos, .hero-d .datos-rapidos { color: var(--texto-2); }
.hero-tarjeta .datos-rapidos strong, .hero-b .datos-rapidos strong, .hero-d .datos-rapidos strong { color: var(--texto); }
.hero-sello { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: var(--brote); color: var(--grafito); font-weight: 600; font-size: .875rem; }

/* A · Ventanal */
.hero-a { background: var(--bosque); color: var(--blanco); }
.hero-a .hero-fondo { bottom: auto; height: 74svh; }
.hero-a .hero-fondo img { object-position: 40% 50%; }
.hero-a .hero-fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,31,32,.1) 0%, rgba(28,31,32,.35) 50%, var(--bosque) 100%); }
.hero-a-grid { position: relative; display: grid; gap: 20px; padding-top: 22svh; padding-bottom: 40px; }
@media (max-width: 899px) { .hero-a .lead { font-size: 1rem; } .hero-a .hero-sello { margin-bottom: 12px; } }
.hero-a h1 { color: var(--blanco); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero-a .lead { color: #E8E3D8; }
.hero-a .hero-texto .datos-rapidos { color: #DCD5C7; }
.hero-a .hero-tarjeta .datos-rapidos { display: none; }
@media (min-width: 900px) {
  .hero-a { min-height: calc(100svh - 64px); display: flex; align-items: flex-end; }
  .hero-a .hero-fondo { height: auto; bottom: 0; }
  .hero-a .hero-fondo::after { background: linear-gradient(90deg, rgba(28,31,32,.8) 0%, rgba(28,31,32,.4) 50%, rgba(28,31,32,.05) 100%), linear-gradient(0deg, rgba(28,31,32,.55), transparent 45%); }
  .hero-a-grid { width: 100%; grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr); align-items: end; gap: 56px; padding-top: 140px; padding-bottom: 64px; }
}

/* B · Tríptico */
.hero-b { background: var(--niebla); padding-bottom: 40px; }
.triptico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 46svh; min-height: 300px; }
.triptico figure { margin: 0; position: relative; overflow: hidden; }
.triptico img { width: 100%; height: 100%; object-fit: cover; }
.triptico figure:nth-child(1) img { object-position: 30% 50%; }
.triptico figcaption { position: absolute; left: 0; right: 0; top: 0; padding: 14px 12px 40px; color: var(--blanco); font: 400 1rem/1.1 var(--serif);
  background: linear-gradient(180deg, rgba(28,31,32,.6), transparent); }
.hero-b-panel { position: relative; margin-top: -56px; background: var(--blanco); border-radius: 14px; padding: 22px 18px; box-shadow: 0 24px 60px rgba(28,31,32,.18); display: grid; gap: 18px; }
.hero-b h1 { color: var(--bosque); font-size: clamp(2rem, 4.2vw, 3.6rem); }
.hero-b .buscador { margin: 0; }
@media (min-width: 900px) {
  .triptico { height: 66svh; max-height: 720px; gap: 6px; }
  .triptico figcaption { padding: 26px 28px 80px; font-size: 1.75rem; }
  .hero-b-panel { margin-top: -150px; padding: 40px 48px 32px; gap: 24px; }
  .hero-b .hero-texto { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: end; }
  .hero-b .hero-texto h1 { margin: 0; }
}

/* C · Horizonte */
.hero-c { background: var(--niebla); }
.hero-c .hero-fondo { bottom: auto; height: 66svh; }
.hero-c .hero-fondo img { object-position: 50% 30%; }
.hero-c .hero-fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(232,227,216,.95) 0%, rgba(232,227,216,.85) 38%, rgba(232,227,216,0) 62%), linear-gradient(0deg, var(--niebla) 0%, rgba(232,227,216,0) 22%); }
.hero-c-grid { position: relative; display: grid; gap: 20px; padding-top: 28px; padding-bottom: 40px; }
.hero-c h1 { color: var(--bosque); max-width: 13em; }
.hero-c .lead { color: var(--texto); }
.hero-c .hero-tarjeta { margin-top: 12svh; }
@media (min-width: 900px) {
  .hero-c { min-height: calc(100svh - 64px); }
  .hero-c .hero-fondo { height: auto; bottom: 0; }
  .hero-c .hero-fondo::after { background: linear-gradient(180deg, rgba(232,227,216,.94) 0%, rgba(232,227,216,.8) 30%, rgba(232,227,216,0) 52%); }
  .hero-c-grid { min-height: calc(100svh - 64px); grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); grid-template-rows: auto 1fr; gap: 0 56px; padding-top: 56px; padding-bottom: 56px; }
  .hero-c .hero-texto { grid-column: 1 / -1; }
  .hero-c .hero-tarjeta { grid-column: 2; align-self: end; margin-top: 0; }
  .hero-c .hero-tarjeta .datos-rapidos { background: rgba(255,255,255,.88); padding: 10px 14px; border-radius: 8px; }
}

/* D · Ventana de piedra */
.hero-d { background: var(--niebla); padding: 20px 0 48px; }
.hero-d-grid { display: grid; gap: 28px; }
.hero-d h1 { color: var(--bosque); }
.hero-d .buscador { background: var(--blanco); margin-top: 20px; }
.arco { position: relative; order: -1; }
.arco > img { width: 100%; height: 44svh; object-fit: cover; object-position: 30% 50%; border-radius: 999px 999px 14px 14px; display: block; }
.arco-chico { position: absolute; right: 10px; bottom: -22px; width: 34%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid var(--niebla); }
.arco-chico img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .hero-d { padding: 56px 0 72px; }
  .hero-d-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 72px; align-items: center; min-height: calc(100svh - 64px - 128px); }
  .arco { order: 0; }
  .arco > img { height: auto; aspect-ratio: 4 / 5; max-height: 78svh; }
  .arco-chico { right: auto; left: -48px; bottom: 40px; width: 36%; border-width: 8px; }
}
/* Sin cupo: fechas cercanas que sí tienen */
.sin-cupo .estado { margin-bottom: 14px; }
.cercanas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .cercanas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cercana { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--piedra); border-radius: var(--radio); background: var(--blanco); color: var(--texto); text-decoration: none; }
.cercana:hover { border-color: var(--agua); box-shadow: inset 0 0 0 1px var(--agua); }
.cercana b { font: 600 1.0625rem var(--sans); }
.cercana span { font-size: .9375rem; color: var(--texto-2); }

/* Utilidades: reemplazan estilos en línea para que cada bloque quede editable en WordPress (02/11/2026) */
.m0 { margin: 0 !important; } .mt-6 { margin-top: 6px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.pb-64 { padding-bottom: 64px; } .pt-16 { padding-top: 16px !important; }
.fondo-2 { background: var(--niebla-2); } .ar-32 { aspect-ratio: 3 / 2; } .r-2-3 { aspect-ratio: 2 / 3; }
figure.foto { margin: 0; }

/* ── Plugin de reservas (pd-reservas, compartido con Domos) ─────────────────────────────────────────────
   Con el plugin activo, la página Reservas trae #pd-reservar: el carro (buscador, tarjetas, pago) es del plugin y
   el buscador propio y los resultados de la demo se apagan. En la postal de cierre se esconden la barra y el WhatsApp. */
main:has(#pd-reservar) .zona-reservas > .buscador, main:has(#pd-reservar) #resultados { display: none; }
body:has(#pd-reservar.pdr-con-postal) :is(.barra-movil, .wa-flotante) { display: none !important; }

/* Tokens del plugin traducidos a la paleta de Costa: el plugin lee los nombres del tema de Domos (--parra, --tinta,
   --display…). Ojo: en el plugin --texto es la LETRA del cuerpo y en Costa es un color; por eso se redefine solo dentro
   de los elementos del plugin (clases pdr-*), donde ninguna regla del tema lo usa como color. */
#pd-reservar { --display: var(--sans); --tinta: var(--grafito); --tinta-2: var(--texto-2); --linea: var(--piedra);
  --parra: var(--bosque); --parra-2: var(--bosque-2); --hilera: #D4B08A; --hilera-2: #D4B08A; --cal: var(--blanco); --cal-2: var(--niebla); --aire: var(--lado); }
#pd-reservar[class*="pdr"], #pd-reservar [class*="pdr-"] { --texto: var(--sans); }
#pd-reservar input[type=radio], #pd-reservar input[type=checkbox] { accent-color: var(--bosque); }
#pd-reservar:not(.pdr-con-postal) { padding-top: 32px; }
#pd-reservar .boton:not([class*="boton-"]) { background: var(--terracota); color: #fff; }
#pd-reservar .boton:not([class*="boton-"]):hover { background: var(--terracota-osc); }
#pd-reservar .boton:focus-visible, #pd-reservar .pdr-busca :is(input, select):focus-visible { outline: 2px solid var(--roble); outline-offset: 2px; }

/* Buscador del plugin (form.pdr-busca): misma caja que el buscador propio del sitio */
#pd-reservar .pdr-busca { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; align-items: end; margin: 0 0 8px;
  padding: 16px; background: var(--niebla); border: 1px solid var(--piedra); border-radius: var(--radio); }
#pd-reservar .pdr-busca label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; margin: 0; }
#pd-reservar .pdr-busca label > i { font: 600 .8125rem/1.3 var(--sans); font-style: normal; color: var(--texto-2); }
#pd-reservar .pdr-busca :is(input, select) { min-width: 0; width: 100%; min-height: 48px; margin: 0; padding: 10px 12px; border: 1px solid var(--piedra);
  border-radius: var(--radio); background: var(--blanco); color: var(--grafito); font: 500 1rem var(--sans); }
#pd-reservar .pdr-busca :is(input[type=date], select) { cursor: pointer; }
#pd-reservar .pdr-busca .pdr-promo input { width: 100%; }
#pd-reservar .pdr-busca .boton { grid-column: 1 / -1; width: 100%; }
@media (min-width: 760px) {
  #pd-reservar .pdr-busca { grid-template-columns: repeat(4, minmax(0,1fr)) auto; padding: 20px; }
  #pd-reservar .pdr-busca .boton { grid-column: auto; width: auto; padding-inline: 28px; }
}

/* Con pagos apagados el carro termina en «Reservar por WhatsApp»: es la acción principal, va llena y debajo del texto */
#pd-reservar .pdr-sin-pagos { grid-template-columns: 1fr; align-content: start; }
#pd-reservar .pdr-sin-pagos p { margin: 0; }
#pd-reservar .pdr-sin-pagos .pdr-wa-btn { min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--radio); background: var(--bosque); color: var(--blanco); font: 600 1rem/1.2 var(--sans); text-decoration: none; }
#pd-reservar .pdr-sin-pagos .pdr-wa-btn:hover, #pd-reservar .pdr-sin-pagos .pdr-wa-btn:focus-visible { background: var(--bosque-2); }

/* Ficha de cada cabaña en ventana (la abre el plugin desde sus tarjetas; mismas clases que Domos) */
.pieza-dialogo { border: 0; padding: 0; width: min(960px, 94vw); max-height: 92dvh; border-radius: 6px; background: var(--blanco); color: var(--grafito); overflow: auto; }
.pieza-dialogo::backdrop { background: rgba(28,31,32,.72); }
.pieza-dialogo .pd-cuerpo { display: grid; gap: 0; }
@media (min-width: 48rem) { .pieza-dialogo .pd-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pieza-dialogo .pd-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-content: start; }
.pieza-dialogo .pd-fotos .principal { grid-column: 1 / -1; }
.pieza-dialogo .pd-fotos img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pieza-dialogo .pd-texto { position: relative; padding: 1.4rem 1.5rem 1.5rem; }
.pieza-dialogo .pd-texto h2 { margin: 0 0 .4rem; }
.pieza-dialogo .rotulo { color: var(--roble); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .2rem; }
.pieza-dialogo .ficha { list-style: none; padding: 0; margin: .8rem 0; display: grid; gap: .35rem; }
.pieza-dialogo .ficha li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; font-size: .9375rem; }
.pieza-dialogo .ficha li span:first-child { color: var(--texto-2); }
.pieza-dialogo .equipo { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.pieza-dialogo .equipo li { border: 1px solid var(--piedra); border-radius: 999px; padding: .2rem .65rem; font-size: .875rem; }
.pieza-dialogo .cerrar { position: absolute; top: .6rem; right: .6rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--piedra); background: var(--blanco); color: var(--texto); font-size: 1.125rem; cursor: pointer; }
/* en celular la ficha se desplaza: la ✕ queda fija arriba a la derecha de la ventana, sobre la foto */
@media (max-width: 47.99rem) { .pieza-dialogo .cerrar { position: fixed; top: calc(4dvh + .5rem); right: calc(3vw + .5rem); z-index: 2; background: rgba(245,242,236,.94); } }

/* Galería: mosaico por tema (sin carrusel). La primera foto de cada tema va grande. */
.galeria-indice ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.galeria-indice a { display: inline-block; padding: 8px 14px; border: 1px solid var(--piedra); border-radius: 999px; color: var(--texto); text-decoration: none; font-size: .9375rem; min-height: 44px; line-height: 26px; }
.galeria-indice a:hover { border-color: var(--roble); color: var(--roble); }
.galeria-tema { padding-top: 40px; padding-bottom: 8px; }
.galeria-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.galeria-cabeza h2 { margin: 0; }
.galeria-mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.galeria-mosaico .foto { margin: 0; aspect-ratio: 4/3; overflow: hidden; border-radius: 3px; cursor: zoom-in; }
.galeria-mosaico .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-mosaico .g-grande { grid-column: span 2; }
@media (min-width: 760px) { .galeria-mosaico { grid-template-columns: repeat(3, 1fr); } .galeria-mosaico .g-grande { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; position: relative; } .galeria-mosaico .g-grande img { position: absolute; inset: 0; } }
.galeria-mosaico .g-m2 { grid-column: span 2; aspect-ratio: 8/3; }
@media (min-width: 760px) {
  .galeria-mosaico .g-m2 { grid-column: auto; aspect-ratio: 4/3; }
  .galeria-mosaico .g-d2 { grid-column: span 2; aspect-ratio: 8/3; }
  .galeria-mosaico .g-d3 { grid-column: 1 / -1; aspect-ratio: 4/1; }
}
/* la galería no pasa de 1240 px (en pantallas grandes las fotos de 720 px se verían estiradas en celdas de 455 px) */
.galeria-tema, .galeria-indice { --ancho: 1240px; }
@media (min-width: 760px) { .galeria-mosaico .g-full { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 2/1; } }

/* ---------- 03/11/2026 · Cabecera y portada «Piedra y madera» (Agatha, opción B; elegida por Martin 19:50) ---------- */
:root { --roble-osc: #7A5536; }
.cabecera { background: var(--grafito); }
.menu-movil { background: var(--grafito); }
.menu-movil a { border-bottom-color: #3A3F40; }
.menu a:hover, .menu a[aria-current] { text-decoration-color: var(--roble); }
.boton-roble { background: var(--roble); color: var(--blanco); }
.boton-roble:hover { background: var(--roble-osc); }
.hero-e { background: var(--niebla); padding: 0 0 48px; overflow: visible; }
.hero-e h1, .hero-e .lead { margin-bottom: 0; }
.hero-e-grid { display: grid; gap: 28px; }
.hero-e-foto { position: relative; margin: 0 calc(-1 * var(--lado)); }
.hero-e-foto > img { width: 100%; aspect-ratio: 4 / 3.4; height: auto; object-fit: cover; object-position: 40% 50%; display: block; }
.hero-e-chica { position: absolute; right: 16px; bottom: -32px; width: 44%; aspect-ratio: 1; border: 6px solid var(--niebla); overflow: hidden; }
.hero-e-chica img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-e-foto figcaption { position: absolute; left: 16px; top: 12px; font-size: .75rem; color: var(--blanco); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.hero-e .hero-texto { padding-top: 12px; }
.hero-e .rotulo { margin: 0; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--roble-osc); }
.hero-e h1 { margin-top: 14px; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1.06; color: var(--grafito); text-wrap: balance; }
.hero-e .lead { margin-top: 18px; max-width: 46ch; }
.hero-e .temps { display: flex; margin-top: 26px; border-top: 1px solid var(--piedra); border-bottom: 1px solid var(--piedra); }
.hero-e .temps div { flex: 1; padding: 14px 0; }
.hero-e .temps div + div { border-left: 1px solid var(--piedra); padding-left: 18px; }
.hero-e .temps b { display: block; font: 400 2.75rem/1 var(--serif); color: var(--bosque); }
.hero-e .temps span { display: block; margin-top: 6px; font-size: .875rem; color: var(--texto-2); }
.hero-e .buscador { margin-top: 24px; max-width: none; background: transparent; border: 0; padding: 0; }
.hero-e .datos-rapidos { color: var(--texto-2); }
.hero-e .datos-rapidos strong { color: var(--texto); }
@media (min-width: 960px) {
  .hero-e { padding: 48px 0 80px; }
  .hero-e-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  .hero-e .hero-texto { order: 1; padding-top: 0; }
  .hero-e-foto { order: 2; margin: 0; isolation: isolate; }
  .hero-e-foto::before { content: ''; position: absolute; inset: 20px -20px -20px 20px; border: 2px solid var(--terracota); z-index: -1; }
  .hero-e-foto > img { aspect-ratio: 3 / 2; object-position: 0% 50%; }
  .hero-e-chica { right: -32px; bottom: -88px; width: 32%; }
  .hero-e-foto figcaption { left: 16px; right: auto; top: auto; bottom: 12px; }
}

/* ---------- 03/11/2026 · Módulo 3 piscina y tina «Tablilla y vale» (Agatha; elegido por Martin 20:05) ---------- */
.agua-v { background: var(--niebla); color: var(--texto); padding: 64px 0 80px; }
.agua-v .rotulo { margin: 0; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--roble-osc); }
.agua-v h2 { margin: 10px 0 0; max-width: 22ch; color: var(--grafito); text-wrap: balance; }
.agua-v .lead { margin-top: 14px; max-width: 60ch; }
.agua-v-grid { display: grid; gap: 64px; margin-top: 40px; }
@media (min-width: 900px) { .agua-v-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; } }
.agua-v-marco { position: relative; isolation: isolate; }
.agua-v-marco::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.agua-v-marco .foto { margin: 0; }
.agua-v-marco img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.agua-v-tina img { object-position: 50% 40%; }
.agua-v .etiqueta { position: absolute; left: 0; bottom: 0; margin: 0; background: var(--niebla); padding: 12px 18px 4px 0; }
.agua-v .cifra { font: 400 clamp(3rem, 2rem + 3vw, 4.5rem)/1 var(--serif); color: var(--bosque); white-space: nowrap; }
.agua-v .etiqueta small { display: block; margin-top: 4px; font-size: .8125rem; color: var(--texto-2); }
.agua-v-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
.agua-v-minis .foto { margin: 0; }
.agua-v-minis img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.agua-v-ficha h3 { margin: 28px 0 0; font: 400 1.5rem/1.2 var(--serif); color: var(--grafito); }
.agua-v .ic { width: 28px; height: 28px; flex: none; }
.tablilla { position: relative; margin: 18px 0 14px; padding: 20px 22px 18px; border-radius: 6px; color: var(--blanco);
  background: var(--terracota); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(41,45,46,.14); }
.tablilla::before, .tablilla::after { content: ''; position: absolute; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: #5C3F26; box-shadow: inset 0 1px 1px rgba(0,0,0,.4); }
.tablilla::before { left: 12px; } .tablilla::after { right: 12px; }
.tablilla .rot, .vale .rot { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.tablilla .rot { color: #F1E6D6; padding-left: 10px; }
.tablilla .rot .ic, .vale .rot .ic { width: 20px; height: 20px; }
.tablilla .horas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 10px; font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.15 var(--serif); }
.tablilla .horas i { font: 400 1rem/1 var(--sans); font-style: normal; color: #F1E6D6; }
.tablilla p:not(.rot) { margin: 8px 0 0; font-size: .9375rem; color: #F5EDE1; }
.fichitas { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 6px; }
.fichitas-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.fichita { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 12px; border-radius: 6px; background: var(--blanco); color: var(--grafito); box-shadow: 0 1px 0 var(--piedra); }
.fichita .ic { color: var(--bosque); }
.fichita b { font-weight: 700; font-size: .9375rem; }
.fichita span { font-size: .8125rem; color: var(--texto-2); line-height: 1.35; }
@media (max-width: 420px) { .fichitas:not(.fichitas-2) { grid-template-columns: 1fr 1fr; } .fichitas:not(.fichitas-2) .fichita:nth-child(3):last-child { grid-column: 1 / -1; } }
.vale { position: relative; display: grid; grid-template-columns: 1fr auto; margin: 18px 0 14px; border-radius: 8px; background: var(--blanco); box-shadow: 0 6px 18px rgba(41,45,46,.12); overflow: hidden; }
.vale .izq { padding: 20px 20px 18px 22px; border-right: 2px dashed var(--piedra); }
.vale .rot { color: var(--roble-osc); }
.vale h4 { margin: 10px 0 6px; font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.15 var(--serif); color: var(--grafito); }
.vale .izq p:not(.rot) { margin: 0; font-size: .9375rem; color: var(--texto-2); }
.vale .der { display: grid; place-items: center; min-width: 108px; padding: 16px 20px; background: var(--bosque); color: var(--niebla); text-align: center; }
.vale .der b { display: block; font: 400 2.25rem/1 var(--serif); }
.vale .der span { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #C9D6D2; }
.vale::before, .vale::after { content: ''; position: absolute; right: 97px; width: 22px; height: 22px; border-radius: 50%; background: var(--niebla); }
.vale::before { top: -11px; } .vale::after { bottom: -11px; }
.agua-v .ver { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: var(--roble-osc); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Módulo 4 «Postales» (Agatha, elegido por Martin 03/11/2026): cada cabaña es una postal con su sello; lo común en una franja de bosque ---------- */
.postales-v .rotulo { margin: 0; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--roble-osc); }
.postales-v h2 { margin: 10px 0 0; max-width: 22ch; text-wrap: balance; }
.postales-v .lead { margin-top: 14px; max-width: 62ch; }
.postales-v .ic { width: 24px; height: 24px; flex: none; }
.postales { display: grid; gap: 40px; margin-top: 44px; }
@media (min-width: 900px) { .postales { grid-template-columns: 1fr 1fr; gap: 40px; } }
.postal { background: var(--blanco); padding: 16px 16px 22px; box-shadow: 0 10px 30px rgba(41,45,46,.12); position: relative; }
@media (min-width: 900px) { .postal:nth-child(1) { transform: rotate(-.6deg); } .postal:nth-child(2) { transform: rotate(.6deg); } }
@media (prefers-reduced-motion: no-preference) { .postal { transition: transform .4s ease; } .postal:hover { transform: none; } }
.postal-foto { position: relative; }
.postal-foto .foto { margin: 0; border-radius: 0; }
.postal-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.sello { position: absolute; right: 14px; top: 14px; margin: 0; width: 96px; height: 96px; border-radius: 50%; background: var(--niebla); color: var(--roble-osc);
  display: grid; place-items: center; text-align: center; border: 2px solid var(--roble); box-shadow: inset 0 0 0 4px var(--niebla), inset 0 0 0 5px var(--roble);
  transform: rotate(-8deg); pointer-events: none; font: 600 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.sello b { display: block; font: 400 2.25rem/1 var(--serif); letter-spacing: 0; text-transform: none; }
@media (max-width: 599px) { .sello { width: 76px; height: 76px; right: 10px; top: 10px; font-size: .625rem; } .sello b { font-size: 1.75rem; } }
.postal-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.postal-minis .foto { margin: 0; border-radius: 0; }
.postal-minis img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.postal h3 { font-size: 1.75rem; margin: 20px 4px 12px; }
.postal h3 a { color: inherit; text-decoration: none; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 4px; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--niebla); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: .875rem; line-height: 1.3; }
.chip .ic { color: var(--bosque); }
.postal .acciones { margin: 18px 4px 0; }
.franja { margin-top: 56px; background: var(--bosque); color: var(--niebla); border-radius: 6px; padding: 28px 26px; display: grid; gap: 22px; }
@media (min-width: 900px) { .franja { grid-template-columns: 240px 1fr; align-items: center; } }
.franja h3 { color: var(--blanco); margin: 0; font-size: 1.75rem; }
.franja .grande { display: flex; gap: 18px; margin-top: 12px; }
.franja .grande b { display: block; font: 400 1.75rem/1 var(--serif); color: var(--blanco); }
.franja .grande span { font-size: .75rem; color: #C9D6D2; }
.franja ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (min-width: 760px) { .franja ul { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .franja ul { grid-template-columns: repeat(4, 1fr); } }
.franja li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; }
.franja li:nth-last-child(-n+2) { grid-column: span 2; }
.franja .ic { color: var(--brote); }

/* ---------- Módulo 5 «Postal de Aquiles» (Agatha, elegido por Martin 03/11/2026): la guitarra en marco de roble, la cita en una postal con sello, tres muestras redondas ---------- */
.materiales-v .rotulo { margin: 0; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--roble-osc); }
.materiales-v h2 { margin: 10px 0 0; max-width: 20ch; text-wrap: balance; }
.materiales-v .lead { margin-top: 14px; max-width: 54ch; }
.materiales-grid { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 960px) { .materiales-grid { grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; } }
.materiales-foto { position: relative; isolation: isolate; }
.materiales-foto::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.materiales-foto .foto { margin: 0; border-radius: 0; }
.materiales-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.postal-cita { background: var(--blanco); padding: 26px 24px 22px; box-shadow: 0 10px 30px rgba(41,45,46,.14); transform: rotate(-.8deg); position: relative; margin: -56px 12px 0 24px; z-index: 1; }
@media (min-width: 960px) { .postal-cita { margin: 0 0 0 -110px; } }
.postal-cita .cita { margin: 0; padding: 0; border: 0; }
.postal-cita .cita p { font: 400 1.25rem/1.4 var(--serif); padding-right: 64px; margin: 0; max-width: none; color: var(--texto); }
.postal-cita .cita cite { display: block; margin-top: 14px; font: 600 .9375rem/1.3 var(--sans); font-style: normal; color: var(--texto); }
.postal-cita .cita cite span { display: block; font-weight: 400; font-size: .8125rem; color: var(--texto-2); margin-top: 2px; }
.sello-cita { position: absolute; right: 14px; top: -30px; margin: 0; width: 100px; height: 100px; border-radius: 50%; background: var(--niebla); color: var(--roble-osc);
  display: grid; place-items: center; text-align: center; border: 2px solid var(--roble); box-shadow: inset 0 0 0 4px var(--niebla), inset 0 0 0 5px var(--roble);
  transform: rotate(9deg); font: 600 .75rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.sello-cita b { display: block; font: 400 1.0625rem/1.05 var(--serif); letter-spacing: 0; text-transform: none; }
.fila-muestras { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 44px; margin-top: 64px; }
.muestra { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 0; }
.muestra img { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; border: 4px solid var(--blanco); box-shadow: 0 0 0 2px var(--roble), 0 8px 20px rgba(41,45,46,.18); }
.muestra figcaption { font: 600 .875rem/1.3 var(--sans); max-width: 15ch; }
@media (max-width: 599px) {
  .postal-cita .cita p { padding-right: 0; margin-top: 46px; }
  .fila-muestras { gap: 14px; flex-wrap: nowrap; }
  .muestra img { width: 92px; height: 92px; }
  .muestra figcaption { font-size: .8125rem; }
}

/* ---------- Módulo 6 «Postal en pareja» (Agatha, elegido por Martin 03/11/2026): el masaje apaisado en marco de roble y una postal girada con la tarifa en pareja y su sello ---------- */
.masajes-v .rotulo { margin: 0; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--roble-osc); }
.masajes-v h2, .masajes-v h1 { margin: 10px 0 0; max-width: 18ch; text-wrap: balance; }
.masajes-v .lead { margin-top: 14px; max-width: 50ch; }
.masajes-grid { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 960px) { .masajes-grid { grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; } }
.masajes-foto { position: relative; isolation: isolate; width: calc(100% - 14px); }
.masajes-foto::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.masajes-foto .foto { margin: 0; border-radius: 0; aspect-ratio: auto; max-height: none; }
.masajes-foto img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 72%; display: block; }
.postal-pareja { background: var(--blanco); padding: 12px 12px 22px; box-shadow: 0 10px 30px rgba(41,45,46,.16); transform: rotate(-1.2deg); position: relative; margin: -70px 10px 0 30px; max-width: 420px; z-index: 1; }
@media (min-width: 960px) { .postal-pareja { margin: 0 0 0 -120px; } }
.postal-pareja .foto { margin: 0; border-radius: 0; }
.postal-pareja img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; display: block; }
.postal-pareja > p:last-child { font: 400 1.1875rem/1.4 var(--serif); margin: 16px 8px 0; max-width: none; color: var(--texto); }
.postal-pareja .sello-cita { right: -14px; top: -40px; z-index: 2; }
.masajes-v .acciones { margin-top: 32px; }
@media (max-width: 599px) { .postal-pareja .sello-cita { right: -6px; width: 88px; height: 88px; } }

/* ---------- Módulo 7 «La tina de Camila» (Agatha, elegido por Martin 04/11/2026): la tina del bosque en marco de roble con el sello 8,8 y la voz de Camila encima; notas en barras y las otras voces al lado ---------- */
.resenas-v .rotulo { margin: 0; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--roble-osc); }
.resenas-v h2 { margin: 10px 0 0; max-width: 18ch; text-wrap: balance; }
.resenas-grid { display: grid; gap: 56px; margin-top: 36px; }
@media (min-width: 960px) { .resenas-grid { grid-template-columns: 6fr 5fr; gap: 72px; align-items: start; } }
.resenas-foto { position: relative; padding-bottom: 120px; }
.resenas-marco { position: relative; isolation: isolate; width: calc(100% - 14px); }
.resenas-marco::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.resenas-marco .foto { margin: 0; border-radius: 0; }
.resenas-marco img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sello-nota { position: absolute; top: -26px; right: -4px; z-index: 2; width: 150px; height: 150px; border-radius: 50%; background: var(--niebla); color: var(--roble-osc);
  display: grid; place-items: center; text-align: center; border: 2px solid var(--roble); box-shadow: inset 0 0 0 5px var(--niebla), inset 0 0 0 6px var(--roble); transform: rotate(-6deg); }
.sello-nota span { display: block; font: 600 .75rem/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.sello-nota b { display: block; font: 400 3rem/1 var(--serif); color: var(--texto); }
.sello-nota i { display: block; font: 400 1rem/1.2 var(--serif); font-style: normal; margin-top: 2px; }
.resena { margin: 0; background: var(--blanco); padding: 22px 22px 18px; box-shadow: 0 10px 28px rgba(41,45,46,.12); border: 0; }
.resena p { font: 400 1.125rem/1.45 var(--serif); margin: 0; max-width: none; color: var(--texto); }
.resena cite { display: block; margin-top: 12px; font: 600 .875rem/1.3 var(--sans); font-style: normal; color: var(--texto-2); }
.resena-camila { position: absolute; left: 18px; right: 30px; bottom: 0; z-index: 1; }
@media (min-width: 960px) { .resena-camila { left: 40px; right: -40px; } }
.resenas-v .nota-total { font-size: .9375rem; color: var(--texto-2); margin: 0 0 22px; }
.barras { display: grid; gap: 12px; }
.barra { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.barra span { font-size: .9375rem; }
.barra b { font: 600 .9375rem/1 var(--sans); }
.barra i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--piedra); position: relative; overflow: hidden; }
.barra i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--roble); border-radius: 4px; }
.resenas-otras { display: grid; gap: 20px; margin-top: 36px; }
.resenas-v .fuente { font-size: .875rem; color: var(--texto-2); margin-top: 18px; }
@media (max-width: 599px) {
  .resenas-foto { padding-bottom: 300px; }
  .sello-nota { width: 124px; height: 124px; top: -34px; right: 6px; }
  .sello-nota b { font-size: 2.4rem; } .sello-nota span { font-size: .75rem; letter-spacing: 0; } .sello-nota i { font-size: .875rem; }
  .resena-camila { left: 8px; right: 8px; }
}

/* ---------- Módulo 8 «Postal aérea con letrero» (Agatha, elegido por Martin 04/11/2026: «A con letreros de c»): vista aérea en marco de roble, sello 1 km, mapa como postal y un poste con 6 flechas de madera ---------- */
.ubic-v .rotulo { margin: 0; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--roble-osc); }
.ubic-v h2 { margin: 10px 0 0; max-width: 18ch; text-wrap: balance; }
.ubic-v .lead { margin-top: 14px; max-width: 50ch; }
.ubic-grid { display: grid; gap: 56px; }
@media (min-width: 960px) { .ubic-grid { grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; } }
.ubic-fotos { position: relative; padding-bottom: 210px; max-width: 580px; }
.ubic-marco { position: relative; isolation: isolate; width: 76%; }
.ubic-marco::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.ubic-marco .foto { margin: 0; border-radius: 0; }
.ubic-marco img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.sello-km { position: absolute; top: -24px; left: calc(76% - 96px); z-index: 2; margin: 0; width: 128px; height: 128px; border-radius: 50%; background: var(--niebla); color: var(--roble-osc);
  display: grid; place-items: center; text-align: center; border: 2px solid var(--roble); box-shadow: inset 0 0 0 5px var(--niebla), inset 0 0 0 6px var(--roble); transform: rotate(8deg);
  font: 600 .75rem/1.2 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.sello-km span { display: block; max-width: 9ch; }
.sello-km b { display: block; white-space: nowrap; font: 400 2.25rem/1 var(--serif); color: var(--texto); letter-spacing: 0; text-transform: none; margin-bottom: 2px; }
.postal-mapa { position: absolute; right: 0; bottom: 0; width: 64%; z-index: 1; background: var(--blanco); padding: 10px 10px 12px; box-shadow: 0 12px 30px rgba(41,45,46,.16); margin: 0; transform: rotate(2deg); }
.mapa-postal { width: 100%; height: 260px; border: 0; display: block; background: var(--niebla-2); }
.postal-mapa figcaption { margin-top: 8px; font-size: .875rem; color: var(--texto-2); }
.letrero { margin-top: 46px; }
.poste { position: relative; display: grid; gap: 12px; max-width: 420px; margin: 0; }
.poste::before { content: ''; position: absolute; left: 50%; top: -18px; bottom: -18px; width: 14px; margin-left: -7px; background: #5C3F26; border-radius: 3px; }
.flecha { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--blanco);
  background: var(--terracota); padding: 13px 22px; min-height: 52px; width: 86%;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.flecha.izq { margin-left: auto; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); padding-left: 34px; }
.flecha.der { padding-right: 34px; }
.flecha span { font: 600 .9375rem/1.2 var(--sans); }
.flecha b { font: 400 1.25rem/1 var(--serif); white-space: nowrap; }
.flecha:nth-child(odd) { transform: rotate(-1.5deg); } .flecha:nth-child(even) { transform: rotate(1.2deg); }
.flecha:hover, .flecha:focus-visible { background: #7F5838; color: var(--blanco); }
.ubic-nota { margin-top: 32px; }
@media (max-width: 599px) {
  .ubic-fotos { padding-bottom: 170px; }
  .postal-mapa { width: 74%; } .mapa-postal { height: 220px; }
  .sello-km { width: 112px; height: 112px; left: auto; right: 6px; } .sello-km b { font-size: 1.9rem; }
  .ubic-v .acciones .boton { flex: 1 1 auto; }
}

/* ---------- Módulo 10 «Libreta de recepción» (Agatha, elegido por Martin 04/11/2026): terraza en marco de roble, letrero como postal, sello de horario y las 9 preguntas numeradas en una hoja blanca, sin líneas ---------- */
.libreta-v .rotulo { margin: 0; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--roble-osc); }
.libreta-v h2 { margin: 10px 0 0; max-width: 18ch; text-wrap: balance; }
.libreta-grid { display: grid; gap: 56px; margin-top: 36px; }
@media (min-width: 960px) { .libreta-grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } .libreta-fotos { position: sticky; top: 96px; } }
.libreta-fotos { position: relative; padding-bottom: 150px; max-width: 560px; }
.libreta-marco { position: relative; isolation: isolate; width: 88%; }
.libreta-marco::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.libreta-marco .foto, .libreta-postal .foto { margin: 0; border-radius: 0; }
.libreta-marco img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.libreta-postal { position: absolute; right: 0; bottom: 0; width: 40%; z-index: 1; background: var(--blanco); padding: 10px 10px 12px; box-shadow: 0 12px 30px rgba(41,45,46,.16); transform: rotate(3deg); }
.libreta-postal img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.sello-hora { position: absolute; left: -10px; bottom: 34px; z-index: 2; margin: 0; width: 136px; height: 136px; border-radius: 50%; background: var(--niebla); color: var(--roble-osc);
  display: grid; place-items: center; text-align: center; border: 2px solid var(--roble); box-shadow: inset 0 0 0 5px var(--niebla), inset 0 0 0 6px var(--roble); transform: rotate(-7deg);
  font: 600 .75rem/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.sello-hora b { display: block; font: 400 2.25rem/1 var(--serif); color: var(--texto); margin: 2px 0; letter-spacing: 0; }
.libreta-v .hoja { max-width: none; background: var(--blanco); padding: 18px 28px 22px; box-shadow: 0 12px 30px rgba(41,45,46,.10); display: grid; gap: 4px; }
.libreta-v .hoja details { border: 0; padding: 12px 0; }
.libreta-v .hoja summary { padding: 4px 36px 4px 46px; line-height: 1.35; }
.libreta-v .hoja summary::after { right: 0; top: 50%; transform: translateY(-52%); color: var(--roble-osc); }
.libreta-v .hoja summary i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 var(--serif); font-style: normal; color: var(--roble-osc); }
.libreta-v .hoja details p { padding-left: 46px; margin-top: 8px; }
.libreta-pol { margin-top: 24px; }
.libreta-pol a { color: var(--texto); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--roble); }
@media (max-width: 599px) {
  .libreta-v .hoja { padding: 10px 18px 14px; } .libreta-v .hoja summary { padding-left: 38px; } .libreta-v .hoja details p { padding-left: 38px; }
  .libreta-fotos { padding-bottom: 120px; } .sello-hora { width: 112px; height: 112px; letter-spacing: 0; } .sello-hora b { font-size: 1.8rem; }
}
.sello-hora-en span { line-height: 1.1; }
.sello-hora-en b { margin: 1px 0 3px; }

/* ---------- Módulo 11 «Postal de despedida» (Agatha, elegido por Martin 04/11/2026): cierre en bosque con el brindis en marco de roble y las cabañas al anochecer como postal; el pie sin línea sobre la firma ---------- */
.despedida-v { overflow: hidden; }
.despedida-v .envoltura.despedida-grid { display: grid; gap: 56px; padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(72px, 10vw, 140px); }
@media (min-width: 900px) { .despedida-v .envoltura.despedida-grid { grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; } }
.despedida-v p { margin-top: 16px; max-width: 46ch; font-size: 1.0625rem; }
.despedida-fotos { position: relative; padding-bottom: 120px; max-width: 620px; justify-self: end; width: 100%; }
.despedida-marco { position: relative; isolation: isolate; width: 86%; }
.despedida-marco::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.despedida-marco .foto { margin: 0; border-radius: 0; }
.despedida-marco img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.despedida-postal { position: absolute; right: 0; bottom: 0; width: 46%; z-index: 1; margin: 0; background: var(--blanco); padding: 10px 10px 12px; box-shadow: 0 14px 32px rgba(0,0,0,.28); transform: rotate(3deg); }
.despedida-postal img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.despedida-postal figcaption { margin-top: 8px; font-size: .875rem; color: var(--texto-2); }
.pie .firma { border-top: 0; margin-top: 8px; }
@media (max-width: 599px) { .despedida-fotos { padding-bottom: 90px; } .despedida-postal { width: 54%; } .despedida-v .acciones .boton { flex: 1 1 auto; } }

/* ---------- Interiores I1 «Postal de la cabaña» (Agatha, elegido por Martin 04/11/2026): nombre y precio arriba, la foto en marco de roble con sello de pisos y 2 postales; chips, lo común en bosque, el Incluye en roble y el recorrido en postales numeradas ---------- */
.cab-v { padding-top: clamp(32px, 5vw, 56px); }
.cab-v .migas { font-size: .875rem; color: var(--texto-2); margin: 0; } .cab-v .migas a { color: var(--roble-osc); }
.cab-v h1 { margin-top: 10px; }
.cab-v .lead { margin-top: 14px; max-width: 46ch; }
.cab-top { display: grid; gap: 48px; }
.cab-top > .cab-res { order: 3; }
@media (min-width: 960px) {
  .cab-top { grid-template-columns: 5fr 7fr; grid-template-areas: 'cab fotos' 'res fotos'; column-gap: 64px; row-gap: 28px; align-items: start; }
  .cab-cab { grid-area: cab; } .cab-fotos { grid-area: fotos; } .cab-top > .cab-res { grid-area: res; }
}
.cab-fotos { position: relative; padding-bottom: 130px; }
.cab-marco { position: relative; isolation: isolate; width: 84%; }
.cab-marco::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.cab-marco .foto, .cab-postal .foto, .cab-rec-postal .foto { margin: 0; border-radius: 0; aspect-ratio: auto; }
.cab-marco img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.cab-fotos .cab-sello { top: -26px; right: auto; left: calc(84% - 92px); width: 120px; height: 120px; z-index: 2; transform: rotate(8deg); }
.cab-fotos .cab-sello b { font-size: 2.75rem; }
.cab-postal { position: absolute; z-index: 1; margin: 0; background: var(--blanco); padding: 8px 8px 10px; box-shadow: 0 12px 30px rgba(41,45,46,.16); }
.cab-postal img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cab-p1 { right: 0; bottom: 0; width: 38%; transform: rotate(3deg); }
.cab-p2 { left: 8%; bottom: 10px; width: 30%; transform: rotate(-3deg); }
.cab-res { background: var(--blanco); padding: 24px; box-shadow: 0 12px 30px rgba(41,45,46,.10); }
.cab-res h2 { font-size: 1.625rem; margin: 0; }
.cab-res > p { color: var(--texto-2); font-size: .9375rem; margin: 8px 0 14px; }
.cab-res .buscador { box-shadow: none; padding: 12px 14px 14px; background: none; }
.cab-otra { margin-top: 12px; font-size: .9375rem; } .cab-otra a { color: var(--roble-osc); font-weight: 600; }
.cab-dentro { margin-top: 72px; display: grid; gap: 20px; }
.cab-dentro h2 { margin: 0 0 6px; }
.cab-dentro .chips { margin: 0; }
.cab-dentro .chip { background: var(--blanco); font-size: .9375rem; box-shadow: 0 4px 12px rgba(41,45,46,.06); }
.cab-dentro .chip .icono, .cab-dentro .chip svg { color: var(--roble-osc); }
.cab-fila2 { display: grid; gap: 18px; } .cab-fila2 > * { min-width: 0; }
@media (min-width: 900px) { .cab-fila2 { grid-template-columns: 2fr 1fr; align-items: start; } }
.cab-tienen { background: var(--bosque); color: var(--niebla); padding: 26px 28px; border-radius: 4px; display: grid; gap: 18px; }
.cab-tienen h3 { font: 400 1.5rem/1.1 var(--serif); margin: 0; color: var(--blanco); }
.cab-tienen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px 20px; }
.cab-tienen li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; }
.cab-v .ic { width: 22px; height: 22px; flex: none; }
.cab-tienen li svg { color: var(--brote); }
.cab-vale { display: flex; gap: 14px; align-items: flex-start; background: var(--terracota); color: var(--blanco); padding: 18px 22px; border-radius: 6px; }
.cab-vale svg { color: var(--blanco); width: 26px; height: 26px; flex: 0 0 auto; }
.cab-vale b { display: block; font: 600 .8125rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.cab-vale p { margin: 4px 0 0; color: var(--blanco); }
.cab-recorre { margin-top: 72px; }
.cab-recorre h2 { margin: 0 0 28px; }
.cab-recorrido { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .cab-recorrido { grid-template-columns: repeat(var(--col, 3), 1fr); gap: 28px; } }
.cab-rec-postal { margin: 0; background: var(--blanco); padding: 8px 8px 10px; box-shadow: 0 12px 30px rgba(41,45,46,.14); }
.cab-rec-postal img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cab-rec-postal figcaption { margin-top: 7px; font-size: .875rem; color: var(--texto-2); line-height: 1.3; }
.cab-rec-postal i { font: 400 1rem/1 var(--serif); font-style: normal; color: var(--roble-osc); margin-right: 6px; }
.cab-rec-postal:nth-child(4n+1) { transform: rotate(-1.2deg); } .cab-rec-postal:nth-child(4n+2) { transform: rotate(.8deg); }
.cab-rec-postal:nth-child(4n+3) { transform: rotate(-.5deg); } .cab-rec-postal:nth-child(4n) { transform: rotate(1.1deg); }
@media (max-width: 599px) {
  .cab-fotos { padding-bottom: 96px; } .cab-p2 { display: none; } .cab-p1 { width: 52%; }
  .cab-fotos .cab-sello { left: auto; right: 0; width: 104px; height: 104px; } .cab-fotos .cab-sello b { font-size: 2.3rem; } .cab-fotos .cab-sello span { font-size: .75rem; }
  .cab-rec-postal { transform: none !important; }
  .cab-res .buscador { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Interiores I2 «Postal de la piscina» (Agatha, elegido por Martin 04/11/2026): misma línea que la cabaña; horario en tablilla de roble, 3 fichas, «Antes de entrar» y la piscina larga a lo ancho ---------- */
.pis-horario { margin-top: 26px; background: var(--terracota); color: var(--blanco); padding: 16px 22px; border-radius: 6px; display: inline-flex; gap: 14px; align-items: center; box-shadow: 0 10px 24px rgba(41,45,46,.16); transform: rotate(-.8deg); }
.pis-v .pis-horario .ic { color: var(--blanco); width: 28px; height: 28px; }
.pis-horario span { display: block; font: 600 .75rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.pis-horario b { display: block; font: 400 1.5rem/1.15 var(--serif); margin-top: 4px; } .pis-horario b i { font-style: normal; font-family: var(--sans); font-size: 1rem; opacity: .85; }
.pis-fichas { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.pis-fichas li { display: flex; gap: 12px; align-items: flex-start; background: var(--blanco); padding: 14px 16px; box-shadow: 0 4px 12px rgba(41,45,46,.06); }
.pis-v .pis-fichas .ic { color: var(--roble-osc); }
.pis-fichas b { display: block; font-weight: 600; } .pis-fichas small { display: block; font-size: .9375rem; color: var(--texto-2); margin-top: 2px; }
.pis-cta { margin: 24px 0 0; } .pis-cta .boton { min-height: 52px; }
.pis-v .cab-sello b { font-size: 1.9rem; white-space: nowrap; }
.pis-hoja { background: var(--blanco); padding: 24px 26px; box-shadow: 0 12px 30px rgba(41,45,46,.10); }
.pis-hoja h2 { font: 400 1.5rem/1.1 var(--serif); margin: 0 0 12px; }
.pis-hoja ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: r; }
.pis-hoja li { counter-increment: r; padding-left: 34px; position: relative; color: var(--texto-2); }
.pis-hoja li::before { content: counter(r); position: absolute; left: 0; top: -2px; font: 400 1.375rem/1 var(--serif); color: var(--roble-osc); }
.pis-fila2 { margin-top: 72px; }
.pis-larga { position: relative; isolation: isolate; margin: 0 14px 40px 0; }
.pis-larga::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.pis-larga .foto { margin: 0; border-radius: 0; aspect-ratio: auto; }
.pis-larga img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.pis-larga figcaption { padding: 12px 0 0 22px; font-size: .875rem; color: var(--texto-2); }
.agua-v-solo { grid-template-columns: minmax(0, 1fr) !important; max-width: 760px; }
@media (max-width: 599px) { .pis-v .cab-sello b { font-size: 1.6rem; } .pis-horario b { font-size: 1.25rem; } .pis-larga img { aspect-ratio: 4 / 3; } }
.pis-v .nw, .agua-v .nw { white-space: nowrap; }
@media (max-width: 899px) { .pis-v .cab-rec-postal:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- Interiores I3 «Vale de regalo» (Agatha, elegido por Martin 04/11/2026): el regalo de 45 minutos como cupón de roble junto al atardecer en marco, con el sello 38° en su esquina ---------- */
.tin-cab { max-width: 760px; }
.tin-top { display: grid; gap: 40px; margin-top: 36px; }
@media (min-width: 960px) { .tin-top { grid-template-columns: 5fr 4fr; gap: 56px; align-items: center; } }
.tin-foto { position: relative; max-width: 560px; padding-top: 26px; }
.tin-marco { position: relative; isolation: isolate; width: calc(100% - 14px); }
.tin-marco::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.tin-marco .foto { margin: 0; border-radius: 0; aspect-ratio: auto; }
.tin-marco img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.tin-foto .tin-sello { top: 0; right: -18px; left: auto; width: 120px; height: 120px; z-index: 2; transform: rotate(8deg); }
.tin-foto .tin-sello b { font-size: 2.6rem; }
.tin-der { display: grid; gap: 24px; justify-items: start; }
.tin-regalo { display: flex; gap: 22px; align-items: center; background: var(--terracota); color: var(--blanco); padding: 30px; border-radius: 6px; box-shadow: 0 10px 24px rgba(41,45,46,.16); transform: rotate(-1.5deg); }
.tin-min { flex: 0 0 auto; width: 108px; height: 108px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.7); display: grid; place-items: center; text-align: center; }
.tin-min b { display: block; font: 400 2.75rem/1 var(--serif); } .tin-min span { display: block; margin-top: 4px; font: 600 .6875rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.tin-regalo small { display: block; font: 600 .75rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.tin-regalo strong { display: block; font: 400 2rem/1.15 var(--serif); margin-top: 4px; }
.tin-regalo p { margin: 6px 0 0; font-size: .9375rem; color: var(--blanco); }
.tin-der .pis-cta { margin: 0; }
.tin-medio { margin-top: 64px; display: grid; gap: 22px; }
@media (min-width: 900px) { .tin-medio { grid-template-columns: 1fr 1fr; align-items: start; } }
.tin-medio .pis-fichas { margin: 0; }
.tin-fila { margin-top: 56px; max-width: 1100px; }
@media (max-width: 599px) {
  .tin-regalo { flex-direction: column; align-items: flex-start; padding: 22px; } .tin-regalo strong { font-size: 1.6rem; }
  .tin-foto .tin-sello { right: -4px; width: 104px; height: 104px; } .tin-foto .tin-sello b { font-size: 2.2rem; }
}
@media (max-width: 899px) { .tin-v .cab-rec-postal:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- Interiores I4 «Postal del masaje» (Agatha, elegido por Martin 04/11/2026): título, tipos y dos botones; el masaje en marco con sello «Masaje en pareja» y la tina como postal; pasos y la tarifa con masaje ---------- */
.mas-top { display: grid; gap: 48px; }
@media (min-width: 960px) { .mas-top { grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; } .mas-top > .cab-cab { grid-area: auto; } }
.mas-tipos { margin-top: 22px; }
.mas-tipos .chip { background: var(--blanco); box-shadow: 0 4px 12px rgba(41,45,46,.06); }
.mas-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.mas-botones .boton { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mas-botones .icono { width: 22px; height: 22px; flex: none; }
.mas-fotos { position: relative; padding: 26px 0 70px; max-width: 520px; width: 100%; }
@media (min-width: 960px) { .mas-fotos { justify-self: end; } }
.mas-marco { position: relative; isolation: isolate; width: 78%; }
.mas-marco::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.mas-marco .foto { margin: 0; border-radius: 0; aspect-ratio: auto; }
.mas-marco img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.mas-fotos .mas-sello { top: 0; left: calc(78% - 92px); right: auto; width: 120px; height: 120px; z-index: 2; transform: rotate(8deg); }
.mas-sello span { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.mas-sello b { display: block; font: 400 1.75rem/1 var(--serif); letter-spacing: 0; text-transform: none; margin-top: 2px; }
.mas-p1 { right: 0; bottom: 0; width: 44%; transform: rotate(3deg); }
.mas-p1 img { aspect-ratio: 4 / 5; }
.mas-fila2 { margin-top: 72px; display: grid; gap: 22px; }
@media (min-width: 900px) { .mas-fila2 { grid-template-columns: 1fr 1fr; align-items: center; } }
.mas-tarifa { padding: 22px 26px; transform: rotate(-.8deg); }
.mas-tarifa .tin-min { width: 84px; height: 84px; } .mas-tarifa .tin-min b { font-size: 1.9rem; }
@media (max-width: 599px) {
  .mas-fotos { padding-bottom: 50px; } .mas-fotos .mas-sello { left: auto; right: 0; width: 104px; height: 104px; } .mas-sello b { font-size: 1.5rem; }
  .mas-p1 { width: 46%; } .mas-botones .boton { flex: 1 1 100%; } .mas-tarifa { flex-direction: column; align-items: flex-start; }
}

/* ---------- Interiores I5 «Postal de llegada» (Agatha, elegido por Martin 04/11/2026): 3 fichas y botones; el letrero de la entrada en marco con el sello de llegada ---------- */
.lle-top { display: grid; gap: 48px; }
@media (min-width: 960px) { .lle-top { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; } }
.lle-texto .pis-fichas { max-width: 560px; margin-top: 28px; }
.lle-foto { position: relative; max-width: 420px; width: 100%; justify-self: center; padding-top: 26px; }
.lle-marco { position: relative; isolation: isolate; width: calc(100% - 14px); }
.lle-marco::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--terracota); z-index: -1; }
.lle-marco .foto { margin: 0; border-radius: 0; aspect-ratio: auto; }
.lle-marco img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.lle-foto .lle-sello { top: 0; right: -26px; left: auto; width: 120px; height: 120px; z-index: 2; transform: rotate(8deg); }
.lle-sello span { font: 600 .6875rem/1.25 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.lle-sello b { display: block; font: 400 1.9rem/1 var(--serif); letter-spacing: 0; text-transform: none; margin: 2px 0; }
@media (max-width: 599px) { .lle-foto { max-width: 300px; } .lle-foto .lle-sello { right: -6px; width: 108px; height: 108px; } .lle-sello b { font-size: 1.6rem; } .lle-sello span { letter-spacing: 0; } }

/* ---------- Interiores I6 «Tablero de la casa» (Agatha, elegido por Martin 04/11/2026): tablero de roble con 4 cifras y los 9 bloques en desplegables, pago y cancelación abiertos ---------- */
.pol-top { display: grid; gap: 32px; }
@media (min-width: 960px) { .pol-top { grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; } }
.pol-fuente { font-size: 1rem; max-width: 62ch; }
.pol-tablero { position: relative; background: var(--terracota); color: var(--blanco); padding: 24px 24px 22px; border-radius: 6px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; box-shadow: 0 12px 28px rgba(41,45,46,.18); transform: rotate(-.6deg); }
@media (min-width: 600px) { .pol-tablero { grid-template-columns: repeat(4, auto); } }
.pol-tablero::before, .pol-tablero::after { content: ''; position: absolute; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #5C3F26; } .pol-tablero::before { left: 10px; } .pol-tablero::after { right: 10px; }
.pol-tablero b { display: block; font: 400 1.875rem/1 var(--serif); white-space: nowrap; }
.pol-tablero span { display: block; font: 600 .75rem/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; margin-top: 6px; }
.pol-tablero small { display: block; font-size: .8125rem; margin-top: 4px; opacity: .95; max-width: 16ch; }
.pol-temas { margin-top: 48px; display: grid; gap: 14px; }
@media (min-width: 800px) { .pol-temas { grid-template-columns: 1fr 1fr; align-items: start; } }
.pol-temas details { background: var(--blanco); box-shadow: 0 8px 22px rgba(41,45,46,.07); border: 0; padding: 0; scroll-margin-top: 90px; }
.pol-temas summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 18px 22px; min-height: 64px; font: 400 1.375rem/1.15 var(--serif); color: var(--texto); }
.pol-temas summary::-webkit-details-marker { display: none; }
.pol-temas summary::after { content: '+'; margin-left: auto; font: 400 1.75rem/1 var(--sans); color: var(--roble-osc); }
.pol-temas details[open] summary::after { content: '–'; }
.pol-v .pol-temas summary .ic { width: 26px; height: 26px; flex: none; color: var(--roble-osc); }
.pol-temas ul { margin: 0; padding: 0 22px 22px 60px; list-style: disc; display: grid; gap: 8px; color: var(--texto-2); }
.pol-temas li::marker { color: var(--roble); }
.pol-temas a { color: var(--roble-osc); font-weight: 600; }
@media (max-width: 599px) { .pol-tablero b { font-size: 1.5rem; } .pol-temas ul { padding-left: 42px; } }

/* ---------- Interiores I7 «Mosaico vestido» (Agatha, elegido por Martin 04/11/2026): índice en tablillas de roble con ícono y cuenta; cada tema con ícono, tablilla «N fotos» y botón «Ver la página». El mosaico no cambia ---------- */
/* I7-B «Portada por tema» (Martin cambió de A a B, 04/11/2026): el índice son 5 postales blancas giradas con foto 4:3, nombre y cuenta */
.gal-portadas ul { margin-top: 20px; display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .gal-portadas ul { grid-template-columns: repeat(5, 1fr); gap: 22px; } }
.gal-portadas li:first-child { grid-column: 1 / -1; } @media (min-width: 900px) { .gal-portadas li:first-child { grid-column: auto; } }
.gal-portadas a { display: block; height: 100%; background: var(--blanco); padding: 8px 8px 12px; border: 0; border-radius: 0; box-shadow: 0 10px 24px rgba(41,45,46,.14); text-decoration: none; color: var(--grafito); line-height: 1.2; transition: transform .2s; }
.gal-portadas li:nth-child(odd) a { transform: rotate(-1.2deg); } .gal-portadas li:nth-child(even) a { transform: rotate(1deg); }
.gal-portadas a:hover, .gal-portadas a:focus-visible { transform: rotate(0) translateY(-3px); color: var(--grafito); border: 0; }
.gal-portadas .foto { margin: 0; border-radius: 0; aspect-ratio: auto; }
.gal-portadas img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gal-portadas b { display: block; font: 400 1.25rem/1.15 var(--serif); margin-top: 10px; } .gal-portadas small { display: block; font-size: .875rem; color: var(--texto-2); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .gal-portadas a { transition: none; } }
.gal-cab { align-items: center; justify-content: flex-start; gap: 14px; margin-bottom: 18px; }
.gal-cab h2 { display: flex; align-items: center; gap: 12px; } .gal-cab h2 .ic { width: 30px; height: 30px; flex: none; color: var(--roble-osc); }
.gal-cuenta { font: 600 .75rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; background: var(--terracota); color: var(--blanco); padding: 8px 12px; border-radius: 4px; transform: rotate(-2deg); }
.gal-ver { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--grafito); color: var(--grafito); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.gal-ver:hover, .gal-ver:focus-visible { background: var(--grafito); color: var(--blanco); }
@media (max-width: 599px) { .gal-ver { margin-left: 0; } }

/* ---------- Interiores I8-C «Conoce las dos» (Agatha, elegido por Martin 04/11/2026): buscador en hoja blanca, las 2 cabañas como postal con sello de pisos y las 3 condiciones; las postales se ocultan cuando hay cabañas en los resultados ---------- */
.res-hoja { margin-top: 28px; background: var(--blanco); padding: 18px 20px; box-shadow: 0 12px 28px rgba(41,45,46,.10); position: relative; z-index: 5; }
.res-hoja .buscador { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }
.res-dos { margin-top: 48px; display: grid; gap: 36px; }
@media (min-width: 800px) { .res-dos { grid-template-columns: 1fr 1fr; gap: 40px; } }
.res-marco { position: relative; background: var(--blanco); padding: 8px; box-shadow: 0 12px 30px rgba(41,45,46,.14); }
.res-postal:nth-child(1) .res-marco { transform: rotate(-1deg); } .res-postal:nth-child(2) .res-marco { transform: rotate(.8deg); }
.res-marco .foto { margin: 0; border-radius: 0; aspect-ratio: auto; }
.res-marco img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.res-v .res-sello { top: -22px; right: 6px; left: auto; width: 92px; height: 92px; z-index: 2; transform: rotate(8deg); }
.res-v .res-sello b { font-size: 1.9rem; }
.res-postal h2 { font-size: 1.75rem; margin: 16px 0 0; } .res-postal > p { color: var(--texto-2); margin: 4px 0 0; }
.res-postal .gal-ver { margin: 12px 0 0; }
.res-cond { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .res-cond { grid-template-columns: repeat(3, 1fr); } }
.res-cond a { display: flex; gap: 12px; align-items: flex-start; height: 100%; background: var(--blanco); padding: 14px 16px; box-shadow: 0 4px 12px rgba(41,45,46,.06); text-decoration: none; color: var(--grafito); }
.res-cond .ic { width: 22px; height: 22px; flex: none; color: var(--roble-osc); }
.res-cond b { display: block; font-weight: 600; } .res-cond small { display: block; font-size: .9375rem; color: var(--texto-2); margin-top: 2px; }
.res-v .resultados:empty { display: none; }
.res-v:has(#resultados .foto) .res-dos { display: none; }
@media (max-width: 599px) { .res-v .res-sello { width: 80px; height: 80px; right: 4px; } .res-v .res-sello b { font-size: 1.6rem; } }
/* En WordPress los resultados los pinta el plugin (#pd-reservar, fuera de .res-v): con cabañas en su lista, también se ocultan las postales */
body:has(#pd-reservar .pdr-tipo) .res-dos { display: none; }
/* En WordPress el buscador del plugin (#pd-reservar, arriba) es el que reserva y cobra: el de la hoja se oculta para no mostrar dos (Martin, 04/11/2026) */
body:has(#pd-reservar) .res-hoja { display: none; }

/* ---------- 04/11/2026 · Portada con 3 fotos y buscador arriba (pedido de Aquiles por WhatsApp 19:42) ---------- */
.hero-e3 { padding: 0 0 40px; }
.hero-e3 .hero-e-fotos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; margin: 0 calc(-1 * var(--lado)); height: 230px; }
.hero-e3 .hero-e-f1 { grid-row: 1 / 3; }
.hero-e3 .hero-e-fotos > * { overflow: hidden; margin: 0; min-height: 0; }  /* en WordPress cada foto llega como <figure class="wp-block-image"> */
.hero-e3 .hero-e-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-e3 .hero-texto { padding-top: 0; }
.hero-e3 h1 { margin-top: 10px; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.hero-e3 .lead { margin-top: 12px; }
.hero-e3 .buscador { margin-top: 18px; }
.hero-e3 .temps { margin-top: 22px; }
.hero-e3 .temps b { font-size: 2.25rem; }
@media (min-width: 960px) {
  .hero-e3 { padding: 32px 0 64px; }
  .hero-e3 .hero-e-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
  .hero-e3 .hero-texto { order: 1; }
  .hero-e3 .hero-e-fotos { order: 2; margin: 0; height: min(64vh, 600px); gap: 10px; position: relative; isolation: isolate; }
  .hero-e3 .hero-e-fotos::before { content: ''; position: absolute; inset: 20px -20px -20px 20px; border: 2px solid var(--terracota); z-index: -1; }
}
/* Aquiles 04/11 20:01–20:04: formulario en blanco cálido sobre el greige, y el botón alineado abajo con el selector */
.hero-e3 .buscador { background: #F7F5F2; padding: 18px; border-radius: var(--radio); box-shadow: 0 6px 20px rgba(41,45,46,.06); }
.hero-e3 .buscador .campo-fecha, .hero-e3 .buscador select { background: var(--blanco, #F5F2EC); }
.buscador.frase > div:has(> .boton) { align-self: end; }

/* Aquiles 04/11 20:21: «cambiar café por el terracota del botón». Terracota exacto de Aquiles (#B65335, WhatsApp 20:01; texto blanco puro: 4,91:1): botón Reservar, buscador y las placas café */
:root { --terracota: #B65335; --terracota-osc: #9C4529; }
.boton-roble { background: var(--terracota); color: #fff; } .boton-roble:hover { background: var(--terracota-osc); }
.buscador .boton-bosque[type=submit] { background: var(--terracota); border-color: var(--terracota); color: #fff; }
.buscador .boton-bosque[type=submit]:hover { background: var(--terracota-osc); }

/* Texto blanco puro sobre terracota #B65335 (4,91:1; con --blanco daría 4,39) */
.tablilla, .tablilla > p, .tablilla .rot, .tablilla .horas, .flecha, .cab-vale, .cab-vale p, .pis-horario, .pis-horario *, .tin-regalo, .tin-regalo *, .tin-regalo p, .pis-horario p, .pol-tablero, .pol-tablero *, .pol-tablero p, .gal-cuenta { color: #fff; }
.agua-v .tablilla > p { color: #fff; }

/* Aquiles 04/11 20:03: destacar «Piscina climatizada» y «Tina con hidromasaje»; los grados, como detalle */
.hero-e3 .temps b { font: 400 1.25rem/1.2 var(--serif); }
.agua-v .etiqueta { padding: 8px 14px 2px 0; }
.agua-v .etiqueta small { margin-top: 0; }
@media (min-width: 600px) { .postal-cita .cita p { padding-right: 104px; } }
.agua-v .tablilla .horas i { color: #fff; }

/* Aquiles 06/11 22:10: en celular el selector de fechas debe verse sin bajar (fotos más bajas, título y textos más compactos) */
@media (max-width: 759px) {
  .hero-e3 .hero-e-fotos { height: 168px; }
  .hero-e3 .hero-texto { padding-top: 14px; }
  .hero-e3 h1 { margin-top: 6px; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem); line-height: 1.1; }
  .hero-e3 .lead { margin-top: 8px; font-size: 1rem; line-height: 1.45; }
  .hero-e3 .buscador { margin-top: 12px; }
}

/* Pop-up de la promoción: 3 diseños con el mismo contenido. a = postal, b = hoja inferior (no bloquea), c = vale de bosque */
.promo { border: 0; padding: 0; margin: auto; max-width: min(92vw, 780px); background: transparent; color: var(--texto); overflow: visible; }
.promo::backdrop { background: rgba(28,31,32,.62); }
.promo-caja { position: relative; display: grid; background: var(--blanco); box-shadow: 0 24px 60px rgba(28,31,32,.35); }
.promo-foto { margin: 0; overflow: hidden; }
.promo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-cuerpo { padding: 22px 22px 20px; }
.promo-rot { margin: 0; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--roble-osc); }
.promo h2 { margin: 8px 0 0; font: 400 1.75rem/1.12 var(--serif); color: var(--grafito); text-wrap: balance; }
.promo-txt { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--texto-2); }
.promo-cta { margin-top: 16px; width: 100%; background: var(--terracota); color: #fff; }
.promo-cta:hover { background: var(--terracota-osc); }
.promo-no { display: block; margin: 8px auto 0; padding: 10px 12px; min-height: 44px; background: none; border: 0; font: inherit; font-size: .9375rem; color: var(--texto-2); text-decoration: underline; cursor: pointer; }
.promo-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(245,242,236,.94); color: var(--grafito); font-size: 1.75rem; line-height: 1; cursor: pointer; z-index: 2; }
.promo-x:focus-visible, .promo-no:focus-visible { outline: 3px solid var(--bosque); outline-offset: 2px; }
/* a · Postal: foto arriba (móvil) o al lado (escritorio), marco de roble con filo terracota */
.promo[data-v="a"] .promo-caja { border: 8px solid var(--blanco); outline: 2px solid var(--terracota); outline-offset: 6px; }
.promo[data-v="a"] .promo-foto { height: 170px; }
@media (min-width: 760px) {
  .promo[data-v="a"] { width: 760px; }
  .promo[data-v="a"] .promo-caja { grid-template-columns: 330px 1fr; }
  .promo[data-v="a"] .promo-foto { height: auto; min-height: 380px; }
  .promo[data-v="a"] .promo-cuerpo { padding: 36px 32px 28px; align-self: center; }
  .promo[data-v="a"] h2 { font-size: 2.25rem; }
}
/* b · Hoja inferior: no tapa el selector de fechas (diálogo sin fondo oscuro) */
.promo[data-v="b"] { position: fixed; inset: auto 12px 76px 12px; margin: 0; max-width: none; width: auto; z-index: 90; }
.promo[data-v="b"]::backdrop { background: transparent; }
.promo[data-v="b"] .promo-caja { grid-template-columns: 88px 1fr; border-radius: var(--radio); overflow: hidden; border-left: 5px solid var(--terracota); }
.promo[data-v="b"] .promo-foto { height: 100%; }
.promo[data-v="b"] .promo-cuerpo { padding: 14px 44px 12px 14px; }
.promo[data-v="b"] h2 { font-size: 1.25rem; margin-top: 4px; }
.promo[data-v="b"] .promo-txt { display: none; }
.promo[data-v="b"] .promo-cta { margin-top: 10px; min-height: 44px; padding: 8px 16px; width: auto; }
.promo[data-v="b"] .promo-no { display: none; }
.promo[data-v="b"] .promo-x { top: 4px; right: 4px; width: 40px; height: 40px; background: transparent; }
@media (min-width: 760px) { .promo[data-v="b"] { inset: auto auto 24px 24px; width: 420px; } .promo[data-v="b"] .promo-caja { grid-template-columns: 120px 1fr; } .promo[data-v="b"] .promo-txt { display: block; font-size: .9375rem; } }
/* c · Vale: fondo bosque, sello con el 1, borde punteado de ticket */
.promo[data-v="c"] { width: min(92vw, 440px); }
.promo[data-v="c"] .promo-caja { background: var(--bosque); color: var(--niebla); border-radius: var(--radio); padding: 10px; }
.promo[data-v="c"] .promo-caja::before { content: ''; position: absolute; inset: 10px; border: 2px dashed rgba(232,227,216,.55); border-radius: 4px; pointer-events: none; }
.promo[data-v="c"] .promo-foto { height: 120px; margin: 0 0 0; border-radius: 4px 4px 0 0; }
.promo[data-v="c"] .promo-cuerpo { padding: 22px 26px 22px; text-align: center; }
.promo[data-v="c"] .promo-rot { color: var(--piedra); }
.promo[data-v="c"] h2 { color: var(--niebla); font-size: 2rem; }
.promo[data-v="c"] .promo-txt { color: var(--niebla-2); }
.promo[data-v="c"] .promo-no { color: var(--niebla-2); }
.promo[data-v="c"] .promo-x { background: rgba(28,31,32,.7); color: var(--niebla); }
.promo[data-v="c"] .promo-x:focus-visible, .promo[data-v="c"] .promo-no:focus-visible { outline-color: var(--niebla); }
@media (prefers-reduced-motion: no-preference) { .promo[open] .promo-caja { animation: promo-sube .35s ease-out; } @keyframes promo-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } }

.promo:focus { outline: none; }

/* Guía de huéspedes (QR de las cabañas): lista de accesos grandes, pensada para celular */
.guia { background: var(--niebla); padding: 36px 0 56px; }
.guia .rotulo { margin: 0; font: 600 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--roble-osc); }
.guia h1 { margin: 10px 0 0; font: 400 clamp(2rem, 1.4rem + 2.4vw, 3rem)/1.1 var(--serif); color: var(--grafito); }
.guia .lead { margin: 10px 0 0; max-width: 46ch; }
.guia-lista { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; max-width: 640px; }
.guia-lista a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; background: var(--blanco); border-left: 4px solid var(--terracota); border-radius: var(--radio); color: var(--texto); text-decoration: none; box-shadow: 0 2px 10px rgba(41,45,46,.06); }
.guia-lista a:hover { box-shadow: 0 6px 18px rgba(41,45,46,.12); }
.guia-lista a:focus-visible { outline: 3px solid var(--bosque); outline-offset: 2px; }
.guia-lista svg { flex: none; width: 26px; height: 26px; color: var(--bosque); }
.guia-lista b { display: block; font-size: 1.0625rem; }
.guia-wifi { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; padding: 14px 16px; max-width: 640px; box-sizing: border-box; background: var(--blanco); border-left: 4px solid var(--bosque); border-radius: var(--radio); box-shadow: 0 2px 10px rgba(41,45,46,.06); }
.guia-wifi svg { flex: none; width: 26px; height: 26px; color: var(--bosque); }
.guia-wifi b { display: block; font-size: 1.0625rem; }
.guia-wifi span { display: block; margin-top: 2px; }
.guia-wifi code { font: 600 1.0625rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--grafito); user-select: all; }
.guia-wifi + .guia-lista { margin-top: 10px; }
.guia-lista small { display: block; margin-top: 2px; font-size: .9375rem; color: var(--texto-2); }
.guia-contacto { margin: 22px 0 0; max-width: 640px; font-size: 1rem; line-height: 1.6; color: var(--texto-2); }

/* WordPress: los bloques no agregan márgenes ni envoltorios propios */
.wp-block-image{margin:0}.wp-block-image img{display:block}.wp-element-caption{margin:0}
.wp-block-group{box-sizing:border-box}
.m0{margin:0!important}.mosaico .s6{grid-column:span 6!important}.mosaico .s12{grid-column:span 12!important}.pt-tramo{padding-top:var(--tramo)!important}