/* ============================================================
   ESTILOS — Glamping Salento
   ------------------------------------------------------------
   CSS = cómo se VE la página (colores, tamaños, posiciones).
   Está ordenado de lo general a lo particular:
     1. Variables (colores y tamaños de la marca)
     2. Base (reglas para toda la página)
     3. Piezas reutilizables (botones, títulos, etiquetas)
     4. Secciones de la página de inicio
     5. Página de cada cabaña
     6. Adaptación a celular
   ============================================================ */

/* ---------- 1. VARIABLES ----------
   Se definen una vez y se usan en todo el archivo con var(--nombre).
   Si cambias un color aquí, cambia en toda la página. */
:root {
  /* Colores del manual de marca */
  --bosque:   #0D2601;   /* verde profundo */
  --petroleo: #005354;   /* color principal del logo */
  --cielo:    #2469A6;   /* azul */
  --blanco:   #FFFFFF;

  /* Neutros derivados (con un toque de verde) */
  --niebla:   #EEF3EF;   /* fondo de secciones alternas */
  --linea:    #D3DDD6;   /* bordes suaves */
  --tinta:    #14251C;   /* texto principal */
  --musgo:    #4C5D54;   /* texto secundario */

  /* Tipografías: Arima (marca) para títulos, Jost para leer */
  --f-titulo: "Arima", "Trebuchet MS", serif;
  --f-texto:  "Jost", "Segoe UI", system-ui, sans-serif;

  /* Escala de tamaños de letra. clamp(mínimo, ideal, máximo)
     hace que el texto crezca con la pantalla sin pasarse. */
  --t-xs:   .78rem;
  --t-sm:   .92rem;
  --t-base: 1.05rem;
  --t-lg:   1.25rem;
  --t-xl:   clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem);
  --t-2xl:  clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  --t-hero: clamp(2.7rem, 1.4rem + 5.5vw, 6.2rem);

  /* Espacios */
  --borde-lateral: clamp(16px, 4vw, 48px);
  --seccion: clamp(4.5rem, 3rem + 6vw, 8rem);
  --radio: 6px;
  --curva: cubic-bezier(.22, .61, .36, 1);   /* suavidad de las animaciones */
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-2xl); color: var(--bosque); }
h3 { font-size: var(--t-lg); color: var(--bosque); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--cielo); outline-offset: 3px; }

/* Contenedor centrado con márgenes laterales */
.contenedor { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--borde-lateral); }
.seccion { padding-block: var(--seccion); }
.seccion--niebla { background: var(--niebla); }

/* ---------- 3. PIEZAS REUTILIZABLES ---------- */
.antetitulo {
  font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--petroleo); margin-bottom: 1rem;
}
.antetitulo--claro { color: rgba(255,255,255,.85); }

.encabezado { max-width: 680px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.encabezado h2 { margin-bottom: 1rem; }
.encabezado p { color: var(--musgo); }
.encabezado--fila { max-width: none; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: end; }
.encabezado--fila h2 { margin: 0; max-width: 16ch; }
.encabezado--fila p { max-width: 44ch; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.7rem; border-radius: 999px; border: 1px solid transparent;
  font: 500 var(--t-sm)/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .3s var(--curva), color .3s var(--curva), transform .3s var(--curva);
}
.boton:hover { transform: translateY(-2px); }
.boton--principal { background: var(--petroleo); color: var(--blanco); }
.boton--principal:hover { background: var(--bosque); }
.boton--claro { background: var(--blanco); color: var(--bosque); }
.boton--claro:hover { background: var(--niebla); }
.boton--borde { border-color: rgba(255,255,255,.6); color: var(--blanco); }
.boton--borde:hover { background: rgba(255,255,255,.12); }
.boton--linea { border-color: var(--petroleo); color: var(--petroleo); }
.boton--linea:hover { background: var(--petroleo); color: var(--blanco); }
.boton svg { width: 18px; height: 18px; fill: currentColor; }

.enlace-flecha {
  display: inline-flex; gap: .5rem; align-items: center;
  color: var(--petroleo); font-weight: 500; text-decoration: none;
  font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: .15rem;
}
.enlace-flecha::after { content: "→"; transition: transform .3s var(--curva); }
.enlace-flecha:hover::after { transform: translateX(4px); }

.etiquetas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.etiquetas li { font-size: var(--t-sm); padding: .35rem .85rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); }

/* ---------- Navegación ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s var(--curva), box-shadow .4s; }
.nav__fila {
  max-width: 1240px; margin-inline: auto; padding-inline: var(--borde-lateral);
  height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: height .4s var(--curva);
}
.nav__logo { position: relative; width: 108px; flex: none; transition: width .4s var(--curva); }
.nav__logo img { display: block; }
.nav__logo img { width: 100%; transition: opacity .4s; }
.nav__logo .logo-verde { position: absolute; inset: 0; opacity: 0; }
.nav__menu { display: flex; align-items: center; gap: 1.8rem; }
.nav__menu a:not(.boton) { color: var(--blanco); text-decoration: none; font-size: var(--t-sm); letter-spacing: .03em; }
.nav__menu a:not(.boton):hover { text-decoration: underline; text-underline-offset: 6px; }
.nav__boton-menu { display: none; }
/* Estado "sólido": cuando bajas, la barra se vuelve blanca */
.nav.solida { background: var(--blanco); box-shadow: 0 1px 0 var(--linea); }
.nav.solida .nav__fila { height: 66px; }
/* Al bajar, el logo se achica para caber completo en la barra */
.nav.solida .nav__logo { width: 76px; }
.nav.solida .logo-blanco { opacity: 0; }
.nav.solida .logo-verde { opacity: 1; }
.nav.solida .nav__menu a:not(.boton) { color: var(--tinta); }
.nav.solida .nav__menu .boton { background: var(--petroleo); color: var(--blanco); }

/* ---------- 4. INICIO: HERO ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--blanco);
  min-height: clamp(640px, 96svh, 940px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 120px max(var(--borde-lateral), calc((100% - 1240px) / 2 + var(--borde-lateral))) 6rem;
  background: var(--bosque);
}
.hero .contenedor { padding: 0; max-width: none; }
/* Fondo difuminado */
.hero__fondo { position: absolute; inset: 0; z-index: -1; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.1); transform: scale(1.15); }
.hero__fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,38,1,.88) 0%, rgba(13,38,1,.6) 55%, rgba(13,38,1,.35) 100%);
}
/* Marco vertical del video */
.hero__video {
  position: relative;
  width: clamp(260px, 26vw, 380px); aspect-ratio: 9 / 16; max-height: 76svh;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); background: var(--bosque);
  animation: subir 1.1s .2s var(--curva) both;
}
.hero__video video { width: 100%; height: 100%; object-fit: cover; }
/* Botón de sonido */
.hero__sonido {
  position: absolute; z-index: 3; left: 50%; translate: -50% 0; bottom: 1.2rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.1rem; border-radius: 999px; cursor: pointer;
  background: rgba(13,38,1,.55); color: var(--blanco); border: 1px solid rgba(255,255,255,.4);
  font: 500 var(--t-sm) var(--f-texto); letter-spacing: .03em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .3s;
}
.hero__sonido:hover { background: rgba(13,38,1,.8); }
.hero__sonido svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero h1 { font-size: var(--t-hero); line-height: 1; letter-spacing: -.02em; max-width: 12ch; }
.hero__texto { font-size: var(--t-lg); max-width: 46ch; margin-top: 1.4rem; color: rgba(255,255,255,.9); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero__sello {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-top: 2rem;
  font-size: var(--t-sm); color: rgba(255,255,255,.9); text-decoration: none;
}
.hero__sello strong { font-family: var(--f-titulo); font-size: var(--t-lg); color: var(--blanco); }
.hero__sello span { opacity: .6; }
/* Animación de entrada del texto */
.hero__contenido > * { animation: subir .9s var(--curva) both; }
.hero__contenido > :nth-child(2) { animation-delay: .1s; }
.hero__contenido > :nth-child(3) { animation-delay: .2s; }
.hero__contenido > :nth-child(4) { animation-delay: .3s; }
.hero__contenido > :nth-child(5) { animation-delay: .4s; }
@keyframes subir { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Buscador de reserva ---------- */
.buscador { position: relative; z-index: 5; margin-top: -3.4rem; }
.buscador__form {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, 1fr) auto;
  background: var(--blanco); border-radius: var(--radio); padding: .55rem;
  box-shadow: 0 24px 60px -24px rgba(13,38,1,.4);
}
.campo { display: flex; flex-direction: column; gap: .1rem; padding: .65rem 1.15rem; border-right: 1px solid var(--linea); min-width: 0; }
.campo label { font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--musgo); }
.campo input, .campo select { border: 0; background: transparent; padding: .2rem 0; width: 100%; font: 400 var(--t-base) var(--f-texto); color: var(--tinta); }
.campo input:focus, .campo select:focus { outline: none; }
.campo:focus-within { background: var(--niebla); border-radius: 4px; }
.buscador__boton { margin: .15rem; border-radius: 4px; }
.buscador .campo { padding-inline: .95rem; }
.buscador__nota { margin-top: .9rem; font-size: var(--t-sm); color: var(--musgo); text-align: center; }

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: clamp(3.5rem, 6vw, 5rem) 0; }
.cifra { border-top: 1px solid var(--linea); padding-top: 1.2rem; }
.cifra strong { display: block; font-family: var(--f-titulo); font-size: var(--t-2xl); line-height: 1; color: var(--petroleo); font-weight: 400; }
.cifra span { display: block; margin-top: .5rem; color: var(--musgo); font-size: var(--t-sm); }

/* ---------- Historia ---------- */
.historia { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.historia h2 { margin-bottom: 1.4rem; max-width: 15ch; }
.historia__texto p { color: var(--musgo); max-width: 56ch; }
.historia__texto p + p { margin-top: 1rem; }
.historia__fotos { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; }
.historia__fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio); }
.historia__fotos .grande { grid-column: 1 / 10; grid-row: 1; aspect-ratio: 4 / 5; }
.historia__fotos .chica { grid-column: 8 / 13; grid-row: 1; aspect-ratio: 3 / 4; transform: translateY(16%); border: 8px solid var(--blanco); }

/* ---------- Marquesina de valores ---------- */
.marquesina { overflow: hidden; border-block: 1px solid var(--linea); padding-block: 1.3rem; }
.marquesina__pista { display: flex; gap: 2.5rem; width: max-content; animation: deslizar 40s linear infinite; }
.marquesina span { font-family: var(--f-titulo); font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.6rem); line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--petroleo); }
.marquesina span:nth-child(4n+1), .marquesina span:nth-child(4n+3) { color: var(--petroleo); -webkit-text-stroke: 0; }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* ---------- Vitrina de cabañas ----------
   Muestra una cabaña a la vez. Al cambiar, cambia el color
   de fondo, la palabra gigante y la foto. */
.vitrina {
  --fondo: var(--bosque);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--fondo); color: var(--blanco);
  padding-block: var(--seccion);
  transition: background-color 1s var(--curva);
}
.vitrina__palabra {
  position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%;
  font-family: var(--f-titulo); font-weight: 700; white-space: nowrap; pointer-events: none;
  font-size: clamp(5rem, 1.5rem + 16vw, 18rem); line-height: .8; letter-spacing: -.03em;
  color: rgba(255,255,255,.08);
  transition: opacity .6s var(--curva), transform .9s var(--curva);
}
.vitrina__rejilla { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.vitrina__info { min-width: 0; }
.vitrina__texto { transition: opacity .45s var(--curva), transform .45s var(--curva); }
.vitrina h2 { color: var(--blanco); margin-bottom: .6rem; }
.vitrina__sello { font-size: var(--t-lg); color: rgba(255,255,255,.88); max-width: 34ch; }
.vitrina__datos { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.6rem 0 2rem; padding: 0; list-style: none; }
.vitrina__datos li { font-size: var(--t-sm); padding: .35rem .85rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; }
.vitrina__precio { font-size: var(--t-sm); color: rgba(255,255,255,.75); margin-bottom: 1.6rem; }
.vitrina__precio strong { font-family: var(--f-titulo); font-size: var(--t-xl); color: var(--blanco); font-weight: 400; }
.vitrina__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

.vitrina__media { position: relative; min-width: 0; }
.vitrina__marco {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); background: rgba(0,0,0,.2);
}
.vitrina__marco img, .vitrina__marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vitrina__marco img { transition: clip-path 1s var(--curva), transform 1.4s var(--curva); clip-path: inset(0); }
.vitrina__marco video { opacity: 0; transition: opacity .6s; }
.vitrina__marco.con-video:hover video, .vitrina__marco.viendo video { opacity: 1; }
.vitrina__marco.viendo .vitrina__pista-video { opacity: 0; }
.vitrina__pista-video {
  position: absolute; left: 50%; bottom: 1.2rem; translate: -50% 0;
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  background: rgba(13,38,1,.55); padding: .35rem .8rem; border-radius: 999px; pointer-events: none;
  transition: opacity .3s;
}
.vitrina__marco:hover .vitrina__pista-video { opacity: 0; }

/* Clase que se pone mientras cambia de cabaña */
.saliendo { opacity: 0 !important; transform: translateY(14px); }
.vitrina__marco img.saliendo { opacity: 1 !important; clip-path: inset(0 0 100% 0); transform: scale(1.1); }

.vitrina__control { display: flex; align-items: center; gap: 1.2rem; margin-top: clamp(2.5rem, 5vw, 4rem); flex-wrap: wrap; }
.vitrina__contador { font-family: var(--f-titulo); font-size: var(--t-xl); font-variant-numeric: tabular-nums; min-width: 5ch; }
.boton-redondo {
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  background: transparent; color: var(--blanco); font-size: 1.15rem; cursor: pointer;
  transition: background .3s, color .3s;
}
.boton-redondo:hover { background: var(--blanco); color: var(--bosque); }
.vitrina__miniaturas { display: flex; gap: .55rem; overflow-x: auto; padding: 4px; scrollbar-width: none; flex: 1; justify-content: flex-end; }
.vitrina__miniaturas::-webkit-scrollbar { display: none; }
.vitrina__miniaturas button {
  flex: none; width: 64px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radio);
  outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .3s, opacity .3s; opacity: .5;
}
.vitrina__miniaturas img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--radio); }
.vitrina__miniaturas [aria-selected="true"] { opacity: 1; outline-color: var(--blanco); }

/* ---------- Tarjetas de cabañas ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2.2rem 1.6rem; }
.tarjeta { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tarjeta__foto { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio); background: var(--niebla); margin-bottom: 1rem; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
.tarjeta:hover .tarjeta__foto img { transform: scale(1.05); }
.tarjeta h3 { font-size: var(--t-xl); margin-bottom: .3rem; }
.tarjeta__sello { color: var(--musgo); font-size: var(--t-sm); margin-bottom: .8rem; }
.tarjeta__pie { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--linea); font-size: var(--t-sm); color: var(--musgo); }
.tarjeta__pie strong { font-family: var(--f-titulo); font-size: var(--t-lg); color: var(--tinta); font-weight: 400; }

/* ---------- Incluido en todas ---------- */
.incluye { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.incluye li { display: flex; gap: .8rem; align-items: center; padding: 1.1rem 1.2rem; background: var(--blanco); border-radius: var(--radio); }
.incluye svg, .icono { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--petroleo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Tabla de tarifas ---------- */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; min-width: 820px; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: 1rem 1.2rem; text-align: right; border-bottom: 1px solid var(--linea); }
.tabla th:first-child, .tabla td:first-child { text-align: left; }
.tabla thead th { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--musgo); background: var(--niebla); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--niebla); }
.tabla td a { font-family: var(--f-titulo); font-size: var(--t-lg); color: var(--bosque); text-decoration: none; }
.tabla td a:hover { text-decoration: underline; }
.tabla td small { display: block; color: var(--musgo); font-size: var(--t-xs); }
.tabla .si { color: var(--petroleo); font-weight: 600; }
.tabla .no { color: var(--linea); }
.nota a { color: var(--petroleo); }
.nota { margin-top: 1rem; font-size: var(--t-sm); color: var(--musgo); }

/* ---------- Cómo llegar ---------- */
.llegar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.pasos { list-style: none; padding: 0; margin: 0 0 2rem; counter-reset: paso; }
.pasos li { position: relative; padding: 0 0 1.6rem 3.4rem; counter-increment: paso; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -.15rem;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--petroleo); color: var(--blanco); font-family: var(--f-titulo); font-size: var(--t-lg);
}
.pasos li:not(:last-child)::after { content: ""; position: absolute; left: 1.13rem; top: 2.4rem; bottom: .3rem; width: 1px; background: var(--linea); }
.pasos h3 { margin-bottom: .25rem; }
.pasos p { color: var(--musgo); }
.aviso { display: flex; gap: .8rem; padding: 1rem 1.2rem; border-left: 3px solid var(--cielo); background: var(--blanco); border-radius: 0 var(--radio) var(--radio) 0; font-size: var(--t-sm); margin-bottom: 1.8rem; }
.distancias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.distancias div { background: var(--blanco); border-radius: var(--radio); padding: 1rem; }
.distancias strong { display: block; font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 400; color: var(--petroleo); }
.distancias span { font-size: var(--t-sm); color: var(--musgo); }
.llegar__video { border-radius: var(--radio); overflow: hidden; background: var(--bosque); aspect-ratio: 16 / 9; position: sticky; top: 100px; }
.llegar__video video { width: 100%; height: 100%; object-fit: cover; }
.llegar__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Llamado final ---------- */
.llamado { background: var(--petroleo); color: var(--blanco); }
.llamado__fila { padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: center; }
.llamado h2 { color: var(--blanco); max-width: 17ch; margin-bottom: .8rem; }
.llamado p { color: rgba(255,255,255,.85); max-width: 46ch; }

/* ---------- Pie de página ---------- */
.pie { background: var(--bosque); color: rgba(255,255,255,.78); font-size: var(--t-sm); }
.pie__rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 3rem; padding-block: 4.5rem 3rem; }
.pie__marca img { width: 140px; margin-bottom: 1.2rem; }
.pie__marca p { max-width: 32ch; }
.pie h4 { font-family: var(--f-texto); color: var(--blanco); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; margin-bottom: 1rem; }
.pie__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.4rem; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--t-xs); }

/* Botón flotante de WhatsApp */
.whatsapp-flotante {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--petroleo); color: var(--blanco); box-shadow: 0 12px 30px -10px rgba(13,38,1,.6);
  transition: transform .3s var(--curva), background .3s;
}
.whatsapp-flotante:hover { transform: scale(1.07); background: var(--bosque); }
.whatsapp-flotante svg { width: 28px; height: 28px; fill: currentColor; }

/* Aparición suave al hacer scroll */
/* Solo se desplaza un poco: el contenido siempre es visible aunque la animación no corra */
.aparecer { transition: transform 1s var(--curva); }
.aparecer.oculto { transform: translateY(36px); }

/* ---------- 5. PÁGINA DE CABAÑA ---------- */
.ficha-hero { position: relative; isolation: isolate; color: var(--blanco); min-height: clamp(480px, 78svh, 780px); display: flex; align-items: flex-end; padding-block: 140px 4rem; background: var(--bosque); overflow: hidden; }
.ficha-hero img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.ficha-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,38,1,.88) 0%, rgba(13,38,1,.2) 60%, rgba(13,38,1,.45) 100%); }
.ficha-hero h1 { font-size: var(--t-hero); line-height: 1; letter-spacing: -.02em; }
.ficha-hero p { font-size: var(--t-lg); max-width: 40ch; margin-top: 1rem; color: rgba(255,255,255,.9); }
.migas { font-size: var(--t-sm); margin-bottom: 1.2rem; color: rgba(255,255,255,.75); }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }

.datos-rapidos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--linea); }
.datos-rapidos div { padding: 1.4rem 1.2rem; border-right: 1px solid var(--linea); }
.datos-rapidos div:last-child { border-right: 0; }
.datos-rapidos span { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--musgo); }
.datos-rapidos strong { display: block; margin-top: .3rem; font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 400; color: var(--bosque); line-height: 1.25; }

.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.ficha__texto > p:not(.antetitulo) { font-size: var(--t-lg); color: var(--tinta); max-width: 60ch; }
.detalle { display: grid; gap: 1.6rem; margin: 2.5rem 0; }
.detalle div { border-top: 1px solid var(--linea); padding-top: 1.2rem; }
.detalle h3 { margin-bottom: .4rem; }
.detalle p { color: var(--musgo); max-width: 62ch; }
.ficha__experiencia { font-family: var(--f-titulo); font-size: var(--t-xl); line-height: 1.3; color: var(--petroleo); border-left: 3px solid var(--petroleo); padding-left: 1.4rem; margin: 2.5rem 0; }
.amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .7rem 1.4rem; list-style: none; padding: 0; margin: 1.4rem 0 0; }
.amenities li { display: flex; gap: .6rem; align-items: center; font-size: var(--t-sm); }
.amenities li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--petroleo); flex: none; }

/* Tarjeta de precios (se queda pegada al hacer scroll) */
.reserva { position: sticky; top: 90px; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.6rem; background: var(--blanco); box-shadow: 0 20px 50px -30px rgba(13,38,1,.35); }
.reserva__desde { font-size: var(--t-sm); color: var(--musgo); }
.reserva__desde strong { font-family: var(--f-titulo); font-size: var(--t-2xl); font-weight: 400; color: var(--bosque); }
.temporadas { display: grid; gap: 0; margin: 1.2rem 0; border-top: 1px solid var(--linea); }
.temporadas div { display: flex; justify-content: space-between; padding: .65rem 0; border-bottom: 1px solid var(--linea); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.temporadas dt { color: var(--musgo); }
.temporadas dd { margin: 0; font-weight: 500; }
.reserva .campo { border: 1px solid var(--linea); border-radius: 4px; margin-bottom: .6rem; }
.reserva__fila { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.reserva__total { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0; font-size: var(--t-sm); color: var(--musgo); }
.reserva__total strong { font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 400; color: var(--bosque); }
.reserva .boton { width: 100%; }
.reserva__letra { font-size: var(--t-xs); color: var(--musgo); margin-top: .8rem; line-height: 1.5; }

.galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 230px); gap: .8rem; }
.galeria button { padding: 0; border: 0; background: var(--niebla); border-radius: var(--radio); overflow: hidden; cursor: zoom-in; min-width: 0; }
.galeria button:first-child { grid-column: span 2; grid-row: span 2; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.galeria button:hover img { transform: scale(1.05); }
.ficha__video { max-width: 960px; margin-inline: auto; border-radius: var(--radio); overflow: hidden; background: var(--bosque); }

.visor { position: fixed; inset: 0; z-index: 100; background: rgba(13,38,1,.95); display: grid; place-items: center; padding: 4rem var(--borde-lateral); }
.visor[hidden] { display: none; }
.visor img { max-height: 100%; width: auto; border-radius: var(--radio); }
.visor button { position: absolute; background: none; border: 0; color: var(--blanco); cursor: pointer; font-size: 2.2rem; line-height: 1; padding: .6rem; }
.visor__cerrar { top: 1rem; right: 1rem; }
.visor__ant { left: .5rem; top: 50%; translate: 0 -50%; }
.visor__sig { right: .5rem; top: 50%; translate: 0 -50%; }

/* ---------- 6. ADAPTACIÓN A CELULAR Y TABLET ----------
   @media aplica estas reglas solo cuando la pantalla
   mide menos del ancho indicado. */
@media (max-width: 1024px) {
  .buscador__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo:nth-child(2) { border-right: 0; }
  .campo:nth-child(4) { border-right: 0; }
  .campo:nth-child(-n+4) { border-bottom: 1px solid var(--linea); }
  .campo:nth-child(5) { grid-column: 1 / -1; border-right: 0; }
  .buscador__boton { grid-column: 1 / -1; margin-top: .5rem; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha { grid-template-columns: 1fr; }
  .reserva { position: static; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; align-items: end; padding-top: 110px; padding-bottom: 6.5rem; }
  .hero__video { position: absolute; inset: 0; z-index: -1; width: auto; max-height: none; border-radius: 0; box-shadow: none; animation: none; }
  .hero__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,38,1,.92) 0%, rgba(13,38,1,.35) 55%, rgba(13,38,1,.45) 100%); }
  .hero { padding-top: 140px; }
  .hero__sonido { top: calc(84px + env(safe-area-inset-top, 0px)); bottom: auto; left: auto; right: var(--borde-lateral); translate: none; }
  .nav__boton-menu {
    display: grid; gap: 6px; place-content: center; position: relative; z-index: 2;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  }
  .nav__boton-menu span { display: block; width: 24px; height: 1.5px; background: var(--blanco); transition: transform .3s, background .3s; }
  .nav.solida .nav__boton-menu span, .nav.abierta .nav__boton-menu span { background: var(--bosque); }
  .nav.abierta .nav__boton-menu span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav.abierta .nav__boton-menu span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav__menu {
    position: fixed; inset: 0; background: var(--blanco); flex-direction: column; justify-content: center; gap: 1.5rem;
    transform: translateY(-100%); visibility: hidden; transition: transform .5s var(--curva), visibility .5s;
  }
  .nav.abierta .nav__menu { transform: none; visibility: visible; }
  .nav__menu a:not(.boton) { color: var(--bosque) !important; font-family: var(--f-titulo); font-size: var(--t-xl); }
  .nav__menu .boton { background: var(--petroleo); color: var(--blanco); }
  .nav.abierta .logo-blanco { opacity: 0; }
  .nav.abierta .logo-verde { opacity: 1; }
  .nav__logo { z-index: 2; }

  .historia, .llegar, .vitrina__rejilla { grid-template-columns: 1fr; }
  .historia__fotos { margin-bottom: 2.5rem; }
  .vitrina__media { order: -1; width: min(82%, 380px); margin-inline: auto; }
  .vitrina__palabra { top: 26%; }
  .vitrina__miniaturas { justify-content: flex-start; flex-basis: 100%; }
  .datos-rapidos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos-rapidos div:nth-child(2) { border-right: 0; }
  .datos-rapidos div:nth-child(-n+2) { border-bottom: 1px solid var(--linea); }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria button:last-child { grid-column: auto !important; }
  .llegar__video { position: static; }
}
@media (max-width: 560px) {
  .buscador__form { grid-template-columns: 1fr; }
  .campo { border-right: 0; border-bottom: 1px solid var(--linea); }
  .hero__acciones .boton, .llamado .boton { flex: 1 1 100%; }
  .distancias { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .galeria { grid-auto-rows: 140px; }
}

/* Si la persona pidió "reducir movimiento" en su equipo, se quitan las animaciones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .aparecer.oculto { transform: none; }
}

/* =========================================================
   ETAPA 2 · Contacto, políticas y preguntas
   ========================================================= */
.icono { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--petroleo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Portada corta para páginas internas */
.ficha-hero--corta { min-height: clamp(380px, 52svh, 520px); }

/* Aviso suave (ej. "sin malla") */
.aviso--suave { margin-top: 1.4rem; border-left-color: var(--musgo); background: var(--niebla); color: var(--tinta); }

/* Casilla de mascota en la tarjeta de reserva */
.casilla { display: flex; align-items: center; gap: .6rem; padding: .7rem .2rem; font-size: var(--t-sm); cursor: pointer; }
.casilla input { width: 18px; height: 18px; accent-color: var(--petroleo); }

/* Bloque "Antes de reservar" en la ficha */
.condiciones { display: grid; gap: 1.4rem; margin-top: 1.2rem; }
.condiciones h3 { font-size: var(--t-base); font-family: var(--f-texto); font-weight: 600; color: var(--tinta); }
.condiciones__horas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.condiciones__horas div { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; padding: 1rem 1.2rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.condiciones__horas .icono { grid-row: span 2; }
.condiciones__horas span { font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--musgo); }
.condiciones__horas strong { font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 400; color: var(--bosque); }
.condiciones__horas--grande { margin-top: 1.6rem; }
.condiciones__horas--grande strong { font-size: var(--t-xl); }
.condiciones__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.condiciones__lista li { display: flex; gap: .7rem; align-items: center; font-size: var(--t-sm); }

/* Tramos de cancelación (versión compacta en la ficha) */
.tramos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.tramo { border-radius: var(--radio); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.tramo strong { font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 400; line-height: 1; }
.tramo span, .tramo small { font-size: var(--t-xs); line-height: 1.4; }
.tramo--100 { background: var(--petroleo); color: var(--blanco); }
.tramo--50 { background: #4F8A8B; color: var(--blanco); }
.tramo--0 { background: var(--niebla); color: var(--tinta); border: 1px solid var(--linea); }

/* Línea de cancelación grande (página de contacto) */
.linea-cancelacion { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.linea-cancelacion .tramo { padding: 1.4rem; gap: .35rem; }
.linea-cancelacion .tramo strong { font-size: var(--t-2xl); }
.linea-cancelacion .tramo span { font-size: var(--t-sm); }
.linea-cancelacion .tramo small { font-size: var(--t-sm); opacity: .85; margin-top: .4rem; }

/* Bloques de política */
.politica { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); padding-block: 2.2rem; border-top: 1px solid var(--linea); }
.politica:last-child { border-bottom: 1px solid var(--linea); }
.politica__titulo h3 { font-size: var(--t-xl); margin-bottom: .4rem; }
.politica__titulo p, .politica > p { color: var(--musgo); max-width: 60ch; }
.politica__notas { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--musgo); }
.politica__notas--iconos { list-style: none; padding: 0; }
.politica__notas--iconos li { display: flex; gap: .8rem; align-items: flex-start; }

/* Formas de contacto */
.contacto-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.via { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.via__icono { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--niebla); margin-bottom: .6rem; }
.via__icono svg { width: 24px; height: 24px; }
.via__icono > svg:not(.icono) { fill: var(--petroleo); }
.via h3 { font-size: var(--t-lg); }
.via__valor { font-weight: 500; overflow-wrap: anywhere; }
.via__texto { color: var(--musgo); font-size: var(--t-sm); margin-bottom: .8rem; }
.via .enlace-flecha { margin-top: auto; align-self: flex-start; }
.boton-copiar { background: none; border-width: 0 0 1px; cursor: pointer; font: inherit; font-weight: 500; font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--petroleo); }

/* Preguntas frecuentes */
.faq-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq { display: grid; gap: .6rem; }
.pregunta { background: var(--blanco); border-radius: var(--radio); }
.pregunta summary { cursor: pointer; list-style: none; padding: 1.15rem 3.2rem 1.15rem 1.3rem; position: relative; font-family: var(--f-titulo); font-size: var(--t-lg); color: var(--bosque); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; position: absolute; right: 1.3rem; top: 50%; translate: 0 -50%; font-family: var(--f-texto); font-size: 1.5rem; color: var(--petroleo); transition: transform .3s var(--curva); }
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta p { padding: 0 1.3rem 1.3rem; color: var(--musgo); max-width: 62ch; }
.pregunta a { color: var(--petroleo); }

@media (max-width: 1024px) {
  .contacto-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .faq-rejilla, .politica { grid-template-columns: 1fr; }
  .linea-cancelacion, .tramos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contacto-rejilla, .condiciones__horas { grid-template-columns: 1fr; }
}

/* =========================================================
   ETAPA 3 · Reseñas
   ========================================================= */
.estrellas { color: #C9962B; letter-spacing: .12em; font-size: var(--t-sm); }
.resumen-resenas { display: flex; align-items: center; gap: 1rem; max-width: 30rem; }
.resumen-resenas > strong { font-family: var(--f-titulo); font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 1; font-weight: 400; color: var(--bosque); }
.resumen-resenas div { display: flex; flex-direction: column; gap: .2rem; }
.resumen-resenas div > span:last-child { color: var(--musgo); font-size: var(--t-sm); }
.resenas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.resenas__columna { display: grid; gap: 1.2rem; min-width: 0; }
.resena { margin: 0; padding: 1.6rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); display: flex; flex-direction: column; gap: .9rem; }
.resenas__columna:first-child .resena:first-child { background: var(--bosque); border-color: var(--bosque); color: var(--blanco); }
.resenas__columna:first-child .resena:first-child blockquote { color: var(--blanco); }
.resenas__columna:first-child .resena:first-child figcaption span { color: rgba(255,255,255,.7); }
.resena blockquote { margin: 0; font-family: var(--f-titulo); font-size: var(--t-lg); line-height: 1.45; color: var(--tinta); }
.resena blockquote::before { content: "“"; }
.resena blockquote::after { content: "”"; }
.resena figcaption { display: flex; flex-direction: column; font-size: var(--t-sm); }
.resena figcaption span { color: var(--musgo); }
.resenas-cortas { list-style: none; padding: 0; margin: 1rem 0 2rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.resenas-cortas li { padding: .55rem 1rem; border-radius: 999px; background: var(--niebla); font-size: var(--t-sm); }
.resenas-cortas span { color: var(--musgo); }
@media (max-width: 1024px) {
  .resenas { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .resumen-resenas > strong { font-size: 3rem; }
}

/* Reseñas y tarifas son dos secciones blancas seguidas: se juntan
   con menos espacio y una línea fina para que no quede un hueco vacío */
#resenas-seccion { padding-bottom: 2.5rem; }
#resenas-seccion + #tarifas { padding-top: 2.5rem; border-top: 1px solid var(--linea); }