/* ==========================================================================
   Casa del Bosque Pinal - hoja de estilos principal
   Orden: fuentes > variables > base > utilidades > componentes > secciones > responsive
   ========================================================================== */

/* --- Fuentes ------------------------------------------------------------
   Antes venian de Google Fonts, y eso costaba dos conexiones a otro dominio
   en el camino critico: el navegador no puede pintar texto hasta resolverlas.
   Ahora viven en assets/fonts/ y salen del mismo servidor que todo lo demas.
   De paso, nadie le avisa a Google quien visita el sitio.

   Las dos son fuentes variables, asi que un archivo cubre todos los pesos
   que usa el sitio: Fraunces 500 y 700, Inter 400, 500 y 600. Por eso van
   con rango de font-weight en vez de un bloque por peso.

   Solo se guardan los subconjuntos latin y latin-ext. El griego, el
   cirilico y el vietnamita que servia Google no los necesita un sitio en
   espanol e ingles. Los unicode-range son los mismos que mandaba Google:
   si un caracter no esta en latin, el navegador baja latin-ext y ya.

   Ambas son de licencia SIL Open Font, que permite alojarlas asi.
   -------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Variables ---------------------------------------------------------- */
:root {
  /* ===== Principal: rosa #ee005a =====
     El color de la marca. Vive en --primario-600, que es el que se ve;
     los demás tonos son derivados para hover, textos y fondos suaves. */
  --primario-800: #a3003c;   /* texto rosa sobre fondo claro (7.5:1) */
  --primario-700: #c70049;   /* hover de botones, enlaces, etiquetas (5.6:1) */
  --primario-600: #ee005a;   /* <== EL COLOR PRINCIPAL, sin modificar */
  --primario-400: #ff7ba8;   /* rosa claro: sobre fondos oscuros */
  --primario-100: #ffe3ec;   /* fondo rosa muy tenue */

  /* ===== Secundario: azul marino #012641 =====
     Da toda la estructura oscura: hero, secciones densas y pie. */
  --secundario-900: #00101c;
  --secundario-800: #012641;  /* <== EL COLOR SECUNDARIO, sin modificar */
  --secundario-700: #0a3d66;
  --secundario-400: #6f9ab8;
  --secundario-100: #e4eef5;

  /* ===== Dorado: estrellas de calificación ===== */
  --dorado:    #f5b82e;

  /* ===== Neutros ===== */
  --fondo:     #f5f6f9;
  --fondo-osc: #e9ecf2;
  --tinta:     #13202b;
  --tinta-sua: #4f5a66;
  --blanco:    #ffffff;

  /* Verde oficial de WhatsApp: el logotipo se reconoce por el color. */
  --whatsapp:  #25d366;
  --whatsapp-osc: #075e54;   /* verde profundo del encabezado del modal */

  --borde:     #d6dde5;
  --sombra-sm: 0 1px 3px rgba(0, 16, 28, .10);
  --sombra-md: 0 8px 24px rgba(0, 16, 28, .14);
  --sombra-lg: 0 20px 50px rgba(0, 16, 28, .20);

  --radio:     14px;
  --radio-sm:  8px;
  --ancho:     1180px;
  --gutter:    24px;
  --cabecera-h: 74px;

  --fuente-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fuente-texto:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --transicion: .25s cubic-bezier(.4, 0, .2, 1);
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera-h) + 12px); }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  color: var(--secundario-800);
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
a { color: var(--primario-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--primario-700);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Utilidades --------------------------------------------------------- */
.contenedor {
  width: min(100% - (var(--gutter) * 2), var(--ancho));
  margin-inline: auto;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--secundario-800); color: var(--blanco);
  padding: 12px 20px; border-radius: 0 0 var(--radio-sm) 0;
}
.saltar:focus { left: 0; }

.seccion { padding: clamp(64px, 9vw, 110px) 0; }
.seccion--fondo { background: var(--fondo-osc); }
.seccion--oscura { background: var(--secundario-800); color: var(--fondo); }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--fondo); }

.seccion__encabezado { max-width: 680px; margin-bottom: 52px; }
.seccion__encabezado--centro { margin-inline: auto; text-align: center; }

.etiqueta {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primario-700);
  margin-bottom: 14px;
}
.seccion--oscura .etiqueta { color: var(--primario-400); }

.entradilla { font-size: 1.1rem; color: var(--tinta-sua); }
.seccion--oscura .entradilla { color: var(--secundario-100); }

/* --- Botones ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--primario-600);
  --btn-fg: rgba(255, 255, 255, .95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  font-size: .97rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.btn:hover { background: var(--primario-700); transform: translateY(-2px); box-shadow: var(--sombra-md); }
.btn:active { transform: translateY(0); }

.btn--sm    { padding: 12px 24px; font-size: .9rem; }
.btn--linea { --btn-bg: transparent; --btn-fg: var(--fondo); border-color: rgba(245,246,249,.45); }
.btn--linea:hover { background: rgba(245,246,249,.12); }
.btn--bloque { width: 100%; }

/* --- Cabecera ----------------------------------------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--cabecera-h);
  display: flex;
  align-items: center;
  transition: background var(--transicion), box-shadow var(--transicion);
}
.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}

.cabecera.is-fija {
  background: rgba(245, 246, 249, .94);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-sm);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fondo);
  transition: color var(--transicion);
}
.cabecera.is-fija .marca { color: var(--primario-600); }
/* La bajada del logo es pequena: azul secundario y sin opacidad para que se lea */
.cabecera.is-fija .marca__texto small { color: var(--secundario-800); opacity: 1; }
.marca__icono { width: 30px; height: 30px; flex: none; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__texto strong { font-family: var(--fuente-titulo); font-size: 1.12rem; }
.marca__texto small { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }

.menu { display: flex; align-items: center; gap: 28px; order: 2; margin-left: auto; }
.menu ul {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a:not(.btn) {
  color: var(--fondo);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.menu a:not(.btn):hover,
.menu a:not(.btn)[aria-current="page"] { border-color: var(--primario-600); }
.cabecera.is-fija .menu a:not(.btn) { color: var(--secundario-900); }

/* Selector de idioma: pastilla con la bandera del otro idioma como globito.
   Vive en la barra, no dentro del menu, para que en el celular se vea sin
   abrirlo. En escritorio el order lo manda despues del menu, donde estaba. */
.idioma {
  order: 3;
  position: relative;
  padding: 6px 12px;
  border: 1px solid rgba(245,246,249,.45);
  border-radius: 999px;
  color: var(--fondo);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--transicion), border-color var(--transicion);
}
.idioma:hover { border-color: var(--primario-600); }
.cabecera.is-fija .idioma { color: var(--secundario-900); border-color: var(--borde); }
.cabecera.is-fija .idioma:hover { border-color: var(--primario-600); }
.idioma__corto { display: none; }
.idioma__bandera {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 18px;
  height: 18px;
  overflow: hidden;
  border: 2px solid var(--blanco);
  border-radius: 50%;
  box-shadow: var(--sombra-sm);
}
.idioma__bandera svg { display: block; width: 100%; height: 100%; }

/* Con el menu desplegado la barra toma el fondo del panel y se leen como una
   sola pieza. Va despues de .is-fija a proposito: si el visitante ya bajo y
   la barra esta blanca, al abrir el menu tiene que oscurecerse igual. */
.cabecera.is-menu-abierto { background: var(--secundario-800); backdrop-filter: none; box-shadow: none; }
.cabecera.is-menu-abierto .marca,
.cabecera.is-menu-abierto .marca__texto small,
.cabecera.is-menu-abierto .idioma { color: var(--fondo); }
.cabecera.is-menu-abierto .idioma { border-color: rgba(245,246,249,.45); }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 0; background: transparent;
  cursor: pointer;
  position: relative;
}
.menu-toggle__barra,
.menu-toggle__barra::before,
.menu-toggle__barra::after {
  position: absolute;
  left: 11px;
  width: 22px; height: 2px;
  background: var(--fondo);
  transition: transform var(--transicion), opacity var(--transicion), background var(--transicion);
}
.menu-toggle__barra { top: 21px; }
.menu-toggle__barra::before { content: ''; top: -7px; left: 0; }
.menu-toggle__barra::after  { content: ''; top:  7px; left: 0; }
.cabecera.is-fija .menu-toggle__barra,
.cabecera.is-fija .menu-toggle__barra::before,
.cabecera.is-fija .menu-toggle__barra::after { background: var(--secundario-900); }
.menu-toggle[aria-expanded="true"] .menu-toggle__barra { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__barra::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__barra::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  color: var(--fondo);
  isolation: isolate;
  overflow: hidden;
}
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--secundario-800);
}
.hero__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Foto vertical: se muestra completa y los lados se rellenan con la misma
   imagen ampliada y desenfocada para no dejar franjas vacías. */
.hero__relleno { object-fit: cover; filter: blur(28px) saturate(1.1); transform: scale(1.15); }
.hero__foto { object-fit: contain; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,16,28,.72) 0%, rgba(0,16,28,.45) 45%, rgba(0,16,28,.85) 100%);
}
.hero__contenido { max-width: 700px; padding: 140px 0 100px; }
.hero h1 { color: var(--fondo); margin-bottom: .35em; text-wrap: balance; }
/* Segunda linea del titular: dice que es y donde esta. La frase de arriba
   invita, esta ubica, y al buscador le llegan las dos en el mismo h1. */
.hero__h1-que {
  display: block;
  margin-top: .3em;
  font-family: var(--fuente-texto);
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(245, 246, 249, .82);
  text-wrap: balance;
}
.hero__lead { font-size: clamp(1.05rem, 2vw, 1.28rem); color: rgba(245,246,249,.9); max-width: 54ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid rgba(245,246,249,.22);
}
.hero__dato strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;
  line-height: 1.1;
}
.hero__dato > span { font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }

/* Calificación con estrellas: la capa dorada se recorta al porcentaje de la nota */
.hero__dato strong.hero__calif { display: flex; align-items: center; gap: 10px; }
.calif-estrellas {
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 2px;
  color: rgba(245,246,249,.3);
  white-space: nowrap;
}
.calif-estrellas__llenas {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--dorado);
}

/* --- Rejillas genericas ------------------------------------------------- */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Bloque intro (texto + imagen) -------------------------------------- */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.intro__figura {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  aspect-ratio: 4 / 5;
}
.intro__figura img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.intro__sello {
  position: absolute;
  right: 18px; bottom: 18px;
  background: var(--fondo);
  color: var(--primario-800);
  padding: 12px 18px;
  border-radius: var(--radio-sm);
  font-size: .85rem;
  font-weight: 600;
  box-shadow: var(--sombra-md);
}

/* --- Tarjetas de cabana ------------------------------------------------- */
.cabana {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.cabana:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); }
.cabana__foto { aspect-ratio: 3 / 2; overflow: hidden; background: var(--primario-100); }
.cabana__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cabana:hover .cabana__foto img { transform: scale(1.05); }
.cabana__cuerpo { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.cabana__desc { color: var(--tinta-sua); font-size: .97rem; }

.cabana__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.cabana__specs li {
  font-size: .82rem;
  background: var(--primario-100);
  color: var(--primario-700);
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 500;
}

.cabana__pie {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cabana__precio strong {
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
  color: var(--primario-800);
  display: block;
  line-height: 1;
}
.cabana__precio span { font-size: .8rem; color: var(--tinta-sua); }

/* Una sola cabaña: tarjeta horizontal, foto a la izquierda */
.cabana--destacada {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  max-width: 1000px;
  margin-inline: auto;
}
.cabana--destacada:hover { transform: none; }
.cabana--destacada .cabana__foto { aspect-ratio: auto; min-height: 100%; }
.cabana--destacada .cabana__foto img { object-position: center 30%; }
.cabana--destacada .cabana__cuerpo { padding: 36px; }

/* --- Destacados --------------------------------------------------------- */
.destacados {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  align-items: start;
}
.destacado {
  padding: 8px 12px;
  border-radius: var(--radio);
  text-align: center;
}
.destacado__icono {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
  border-radius: 50%;
  /* Degradado sutil en el mismo rosa: más claro arriba, más profundo abajo */
  background: linear-gradient(135deg, #ff3d7f 0%, var(--primario-600) 55%, var(--primario-700) 100%);
  color: var(--blanco);
  box-shadow: 0 12px 30px rgba(238, 0, 90, .30);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
/* Aro exterior: separa el circulo del fondo gris sin cargar el diseno */
.destacado__icono::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--primario-400);
  opacity: .5;
  transition: inset var(--transicion), opacity var(--transicion);
}
.destacado__icono svg {
  width: 74px;
  height: 74px;
  transition: transform var(--transicion);
}
.destacado h3 { margin: 0 0 8px; font-size: 1.15rem; }
.destacado p {
  margin: 0;
  color: var(--tinta-sua);
  font-size: .97rem;
}
.destacado:hover .destacado__icono { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(238, 0, 90, .42); }
.destacado:hover .destacado__icono::after { inset: -14px; opacity: .85; }
.destacado:hover .destacado__icono svg { transform: scale(1.08); }

@media (max-width: 1040px) {
  .destacados { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .destacados { grid-template-columns: 1fr; max-width: 420px; }
  .destacado__icono { width: 128px; height: 128px; }
  .destacado__icono svg { width: 64px; height: 64px; }
}

/* Quien pidio menos animacion no ve el rebote del circulo ni el zoom del icono */
@media (prefers-reduced-motion: reduce) {
  .destacado__icono, .destacado__icono::after, .destacado__icono svg { transition: none; }
  .destacado:hover .destacado__icono { transform: none; }
  .destacado:hover .destacado__icono svg { transform: none; }
}

/* --- Amenidades --------------------------------------------------------- */
/* Flex y no grid: con 13 amenidades la ultima fila quedaba coja y pegada a
   la izquierda. Asi se centra sola, con cualquier cantidad. El ancho es un
   cuarto menos su parte del hueco: 4 caben justo y la sobrante se acomoda. */
.amenidades {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.amenidades .amenidad { flex: 0 1 calc(25% - 21px); }
.amenidad {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(245,246,249,.07);
  border: 1px solid rgba(245,246,249,.16);
  border-radius: var(--radio-sm);
  font-weight: 500;
  font-size: .95rem;
}
.amenidad svg { width: 24px; height: 24px; flex: none; color: var(--secundario-400); }
/* --- Galeria ------------------------------------------------------------ */
.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 14px;
}
.galeria__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-sm);
  border: 0;
  padding: 0;
  background: var(--primario-100);
  cursor: zoom-in;
}
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.galeria__item:hover img { transform: scale(1.07); }
/* La rejilla ensena siete fotos; las demas viven en el DOM solo para el visor. */
.galeria__item--grande { grid-column: span 2; grid-row: span 2; }
.galeria__item--ancha { grid-column: span 2; }
.galeria__item--oculta { display: none; }

.galeria__pie { margin: 22px 0 0; text-align: center; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  /* minmax(0,...) evita que una foto alta empuje su fila y tape las miniaturas. */
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  padding: 72px 24px 16px;
  background: rgba(0, 16, 28, .93);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicion), visibility var(--transicion);
}
.lightbox.is-abierto { opacity: 1; visibility: visible; }

.lightbox__figura {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  /* Se estira a su fila: asi la foto tiene una altura real contra la que medirse. */
  align-self: stretch;
  min-height: 0;
}
.lightbox__figura img {
  max-width: min(1100px, 92vw);
  /* Sin min-height la foto se niega a encogerse y se sale de su fila. */
  min-height: 0;
  border-radius: var(--radio-sm);
  object-fit: contain;
}
.lightbox__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 14px;
  color: var(--fondo);
  text-align: center;
}
.lightbox__contador {
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: rgba(245, 246, 249, .65);
}

.lightbox__cerrar,
.lightbox__nav {
  position: absolute;
  background: rgba(245,246,249,.12);
  color: var(--fondo);
  border: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--transicion);
}
.lightbox__cerrar:hover, .lightbox__nav:hover { background: rgba(245,246,249,.28); }
.lightbox__cerrar { top: 22px; right: 22px; }
.lightbox__nav--prev { left: 22px; top: calc(50% - 50px); transform: translateY(-50%); }
.lightbox__nav--next { right: 22px; top: calc(50% - 50px); transform: translateY(-50%); }

/* Tira de miniaturas */
.lightbox__tira {
  display: flex;
  gap: 8px;
  max-width: min(1100px, 92vw);
  padding: 4px 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,246,249,.35) transparent;
}
.lightbox__mini {
  flex: none;
  width: 86px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .5;
  transition: opacity var(--transicion), border-color var(--transicion);
}
.lightbox__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__mini:hover { opacity: .85; }
.lightbox__mini.is-activa { opacity: 1; border-color: var(--primario-400); }

/* --- Tarifas ------------------------------------------------------------ */
.tabla-envoltura { overflow-x: auto; }
.tarifas {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}
.tarifas th, .tarifas td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--borde);
}
.tarifas thead th {
  background: var(--secundario-800);
  color: var(--fondo);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
.tarifas tbody tr:last-child td { border-bottom: 0; }
.tarifas td strong { font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--primario-800); }
.tarifas small { font-size: .8rem; color: var(--tinta-sua); }
.tarifas thead small { color: var(--secundario-100); letter-spacing: 0; text-transform: none; font-weight: 400; }

.bloque-tabla { margin-top: 28px; }
.bloque-tabla h3 { font-size: 1.05rem; margin-bottom: 12px; }
.tabla-simple {
  width: 100%;
  min-width: 300px;
  border-collapse: collapse;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}
.tabla-simple th, .tabla-simple td {
  padding: 13px 20px;
  text-align: left;
  font-size: .93rem;
  border-bottom: 1px solid var(--borde);
}
.tabla-simple thead th {
  background: var(--secundario-800);
  color: var(--fondo);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
.tabla-simple tbody th { font-weight: 600; }
.tabla-simple tbody td { color: var(--tinta-sua); white-space: nowrap; }
.tabla-simple tbody tr:last-child th,
.tabla-simple tbody tr:last-child td { border-bottom: 0; }
/* La aclaracion bajo el concepto y bajo el precio: mas chica y sin negrita */
.tabla-simple small { font-size: .8rem; font-weight: 400; color: var(--tinta-sua); white-space: normal; }
.tabla-simple td strong { font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--primario-800); }

.notas {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 10px;
}
.notas li {
  position: relative;
  padding-left: 26px;
  font-size: .93rem;
  color: var(--tinta-sua);
}
.notas li::before {
  content: '';
  position: absolute;
  left: 4px; top: .6em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primario-600);
}

/* --- Formularios -------------------------------------------------------- */
.tarjeta-form {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(26px, 4vw, 42px);
  box-shadow: var(--sombra-md);
}

.campos { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo--ancho { grid-column: 1 / -1; }

.campo label { font-size: .88rem; font-weight: 600; color: var(--secundario-900); }
.campo label .req { color: var(--primario-700); }

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: .97rem;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo);
  color: var(--tinta);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  width: 100%;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--primario-600);
  box-shadow: 0 0 0 3px rgba(238, 0, 90, .20);
  outline: none;
}
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: #c0392b; }

.campo__error { font-size: .82rem; color: #c0392b; min-height: 1em; }
.campo__ayuda { font-size: .82rem; color: var(--tinta-sua); }

.resumen {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--primario-100);
  border-radius: var(--radio-sm);
  font-size: .93rem;
  color: var(--primario-800);
}
.resumen strong { font-family: var(--fuente-titulo); font-size: 1.2rem; }

/* trampa para bots: invisible para personas, tentadora para spam */
.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; }

.alerta {
  padding: 14px 18px;
  border-radius: var(--radio-sm);
  margin: 18px 0;
  font-size: .95rem;
  border: 1px solid transparent;
}
.alerta--exito { background: #e6f4ea; color: #1e4620; border-color: #bcdfc6; }
.alerta--error { background: #fdecea; color: #7b241c; border-color: #f5c6c0; }

/* --- Ubicacion ---------------------------------------------------------- */
.mapa {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-md);
  aspect-ratio: 16 / 10;
  background: var(--primario-100);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  color: var(--tinta-sua);
}
/* Con el iframe puesto, el mapa ocupa toda la caja: sin padding ni fondo de aviso */
.mapa--vivo { padding: 0; background: var(--secundario-100); }
.mapa iframe { width: 100%; height: 100%; border: 0; }

.dato-contacto {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--borde);
}
.dato-contacto:last-of-type { border-bottom: 0; }
.dato-contacto svg { width: 22px; height: 22px; flex: none; color: var(--primario-600); margin-top: 3px; }
.dato-contacto strong { display: block; font-size: .88rem; color: var(--secundario-900); }
.dato-contacto a { color: var(--tinta-sua); text-decoration: none; }
.dato-contacto a:hover { color: var(--primario-700); text-decoration: underline; }
/* Banderita junto al numero: decorativa, por eso el alt va vacio. El display
   es necesario porque arriba todas las imagenes son block y se iria sola a
   otro renglon, dejando la bandera encima del telefono. */
.bandera {
  display: inline-block;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  margin-right: 7px;
  vertical-align: -2px;
}

/* --- Testimonios -------------------------------------------------------- */
.testimonio {
  background: rgba(245,246,249,.07);
  border: 1px solid rgba(245,246,249,.16);
  border-radius: var(--radio);
  padding: 30px;
  margin: 0;
}
.testimonio blockquote { margin: 0 0 18px; font-size: 1.02rem; line-height: 1.7; }
.testimonio figcaption { font-size: .88rem; color: var(--secundario-400); font-weight: 500; }
.estrellas { color: var(--dorado); letter-spacing: 2px; margin-bottom: 14px; }

/* --- Pie ---------------------------------------------------------------- */
.pie {
  background: var(--secundario-900);
  color: rgba(245,246,249,.78);
  padding: 72px 0 28px;
  font-size: .94rem;
}
.pie__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
.marca--pie { color: var(--fondo); margin-bottom: 16px; }
.pie__texto { max-width: 42ch; }
.pie__titulo { font-size: 1rem; color: var(--fondo); margin-bottom: 14px; }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pie__lista a { color: inherit; text-decoration: none; }
.pie__lista a:hover { color: var(--fondo); text-decoration: underline; }
/* Logotipo de WhatsApp junto al numero del pie. */
.pie__icono { display: inline-block; width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px; color: var(--whatsapp); }
.pie__redes { display: flex; gap: 10px; margin-bottom: 14px; }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: rgba(245,246,249,.14);
  transition: transform .2s, filter .2s;
}
.pie__redes a:hover { transform: translateY(-2px); filter: brightness(1.1); }
/* Colores oficiales de cada red */
.pie__redes .pie__red--facebook  { background: #1877f2; }
.pie__redes .pie__red--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.pie__redes svg { width: 20px; height: 20px; }
.pie__redes .pie__red--facebook svg { width: 26px; height: 26px; margin-top: 3px; }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(245,246,249,.14);
  font-size: .86rem;
}
.pie__legal p { margin: 0; }
.pie__legal a { color: inherit; }

/* --- WhatsApp flotante -------------------------------------------------- */
.wa-flotante {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--blanco);
  box-shadow: var(--sombra-md);
  transition: transform var(--transicion);
}
.wa-flotante:hover { transform: scale(1.08); }

/* --- Modal de reserva por WhatsApp -------------------------------------- */
.modal-wa {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 16, 28, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicion), visibility var(--transicion);
}
.modal-wa.is-abierto { opacity: 1; visibility: visible; }

.modal-wa__caja {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  transform: translateY(16px);
  transition: transform var(--transicion);
}
.modal-wa.is-abierto .modal-wa__caja { transform: none; }

.modal-wa__cabecera {
  position: relative;
  padding: 24px 68px 22px 26px;
  background: var(--whatsapp-osc);
  color: var(--blanco);
  border-radius: var(--radio) var(--radio) 0 0;
}
.modal-wa__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  color: inherit;
}
.modal-wa__subtitulo {
  margin: 6px 0 0;
  font-size: .95rem;
  color: rgba(255, 255, 255, .82);
}
.modal-wa__icono {
  flex: none;
  width: 30px; height: 30px;
  color: var(--whatsapp);
}
.modal-wa__cerrar {
  position: absolute;
  top: 22px; right: 22px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: var(--blanco);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--transicion);
}
.modal-wa__cerrar:hover { background: rgba(255, 255, 255, .3); }

.modal-wa__cuerpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  padding: 26px;
}
.modal-wa__campo--ancho { grid-column: 1 / -1; }

.modal-wa__campo label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--tinta);
}
.modal-wa__campo input,
.modal-wa__campo select,
.modal-wa__campo textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.modal-wa__campo textarea { resize: vertical; min-height: 84px; }
.modal-wa__campo input:focus,
.modal-wa__campo select:focus,
.modal-wa__campo textarea:focus {
  outline: 0;
  border-color: var(--whatsapp-osc);
  box-shadow: 0 0 0 3px rgba(7, 94, 84, .18);
}
.modal-wa__campo [aria-invalid="true"] { border-color: var(--primario-700); }

.modal-wa__error {
  display: block;
  margin-top: 5px;
  font-size: .85rem;
  color: var(--primario-800);
}

.modal-wa__pie { padding: 0 26px 26px; }
.modal-wa__enviar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blanco);
  background: var(--whatsapp);
  border: 0;
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.modal-wa__enviar .modal-wa__icono { width: 26px; height: 26px; color: currentColor; }
.modal-wa__enviar:hover {
  background: #1eb955;
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}
.modal-wa__enviar:active { transform: none; }

@media (max-width: 520px) {
  .modal-wa { padding: 12px; }
  .modal-wa__cabecera { padding: 20px 60px 18px 20px; }
  .modal-wa__cerrar { top: 18px; right: 16px; width: 40px; height: 40px; }
  .modal-wa__cuerpo { padding: 20px; gap: 14px; }
  .modal-wa__pie { padding: 0 20px 20px; }
}

/* --- Animacion de entrada ----------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.revelar.is-visible { opacity: 1; transform: none; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .amenidades .amenidad { flex-basis: calc(50% - 14px); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .intro { grid-template-columns: 1fr; }
  .intro__figura { aspect-ratio: 16 / 11; }
  .pie__grid { grid-template-columns: repeat(2, 1fr); }
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .galeria__item--grande { grid-column: span 2; grid-row: auto; }
  .galeria__item--ancha { grid-column: span 2; }

  .menu-toggle { display: block; order: 3; }
  .menu {
    position: fixed;
    inset: var(--cabecera-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--secundario-800);
    padding: 16px var(--gutter) 28px;
    box-shadow: var(--sombra-lg);
    transform: translateY(-120%);
    transition: transform var(--transicion);
  }
  .menu.is-abierto { transform: translateY(0); }
  .menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a:not(.btn) { color: var(--fondo); padding: 14px 0; border-bottom: 1px solid rgba(245,246,249,.12); }
  .cabecera.is-fija .menu a:not(.btn) { color: var(--fondo); }
  /* En pantalla chica la pastilla se queda junto al logo, antes del boton del
     menu, con el texto corto ("ENG") y la bandera dentro: como globito en la
     esquina se salia de la barra, que aqui no tiene alto de sobra. */
  .idioma { order: 2; margin-left: auto; padding: 5px 11px; font-size: .8rem; display: inline-flex; align-items: center; gap: 7px; }
  .idioma__bandera { position: static; width: 16px; height: 16px; border-width: 1px; box-shadow: none; }
  .idioma__largo { display: none; }
  .idioma__corto { display: inline; }
  .menu .btn { margin-top: 18px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --gutter: 18px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .amenidades .amenidad { flex-basis: 100%; }
  .cabana--destacada { grid-template-columns: 1fr; }
  .cabana--destacada .cabana__foto { aspect-ratio: 3 / 2; }
  .cabana--destacada .cabana__cuerpo { padding: 26px; }
  .campos { grid-template-columns: 1fr; }
  .pie__grid { grid-template-columns: 1fr; }
  .hero__datos { gap: 26px; }
  .hero__acciones .btn { width: 100%; }
  .cabana__pie { flex-direction: column; align-items: stretch; }
  .cabana__pie .btn { width: 100%; }
  .lightbox { padding: 62px 12px 12px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__cerrar { top: 14px; right: 14px; }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
  .lightbox__mini { width: 64px; height: 48px; }

  /* --- Tablas en movil -------------------------------------------------
     La de tarifas tiene 5 columnas y una sola fila (se renta una cabana):
     a 680px obligaba a arrastrar de lado, peor aun desde que los precios
     llevan centavos y MXN. En pantalla chica se apila: cada celda es un
     renglon "concepto / precio" y el encabezado se oculta, porque la
     etiqueta la pone data-etiqueta. */
  .tabla-envoltura { overflow-x: visible; }
  .tarifas {
    display: block;
    min-width: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .tarifas thead { display: none; }
  .tarifas tbody { display: block; }
  .tarifas tbody tr {
    display: block;
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
    margin-bottom: 14px;
  }
  .tarifas tbody tr:last-child { margin-bottom: 0; }
  .tarifas tbody th {
    display: block;
    background: var(--secundario-800);
    color: var(--fondo);
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    padding: 12px 18px;
    border-bottom: 0;
  }
  .tarifas tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 12px 18px;
    text-align: right;
  }
  .tarifas tbody td::before {
    content: attr(data-etiqueta);
    flex: none;
    text-align: left;
    font-size: .88rem;
    font-weight: 600;
    color: var(--tinta);
  }
  .tarifas tbody td small { display: block; }
  .tarifas tbody tr:last-child td:last-child { border-bottom: 0; }

  /* Las de temporadas y cargos si caben: solo hay que dejarlas encoger */
  .tabla-simple { min-width: 0; }
  .tabla-simple th, .tabla-simple td { padding: 11px 14px; }
  .tabla-simple tbody td { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

@media print {
  .cabecera, .wa-flotante, .menu-toggle, .hero__acciones, .lightbox, .modal-wa { display: none !important; }
  body { background: #fff; color: #000; }
}