/* 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(--bosque); color: var(--blanco); }
#pd-reservar .boton:not([class*="boton-"]):hover { background: var(--bosque-2); }
#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; } }

/* 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}