/* =============================================================================
   Las Marisas — Hoja de estilos
   Mobile-first. Sin dependencias ni frameworks.
   Lenguaje visual: verde salvia profundo, vidrio esmerilado, titulares en
   serif cálida (Fraunces, de la familia del logotipo) y texto en Inter,
   bordes plenos y movimiento suave.
   ========================================================================== */

:root {
  /* Color — paleta del sistema de diseño */
  --verde-900: #1f2a1d;      /* botones, texto fuerte, pie */
  --verde-850: #2d3a2a;      /* verde medio oscuro */
  --verde-hover: #2a3827;    /* hover de botones */
  --verde-700: #336443;      /* titulares */
  --salvia: #85ab8b;         /* acento de titulares */
  --texto: #4b5b47;          /* texto de lectura */
  --texto-suave: #5f6d5a;
  --arena-50: #f7f5f0;       /* fondo claro */
  --arena-100: #efece4;
  --arena-200: #e0dccf;
  --blanco: #ffffff;
  --tinta: #1f2a1d;
  --crema: #f7f2e8;          /* crema de la marca */

  /* Tipografía */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --tracking-display: -0.035em;
  --tracking-serif: -0.018em;

  /* Medidas */
  --max: 1160px;
  --radio: 18px;
  --radio-chico: 12px;
  --header-h: 4.5rem;
  --sombra: 0 1px 2px rgba(31, 42, 29, 0.05), 0 10px 30px rgba(31, 42, 29, 0.07);
  --sombra-fuerte: 0 18px 50px rgba(31, 42, 29, 0.22);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Evita que el header fijo tape el destino de los enlaces con ancla */
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
}

body {
  margin: 0;
  background: var(--arena-50);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  font-family: var(--sans);
  color: var(--verde-700);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  margin: 0 0 1rem;
  font-weight: 500;
  text-wrap: balance;
}

/* Los titulares grandes llevan la serif de la marca; los h3 siguen en Inter
   para que los bloques de datos se lean rápido. */
h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: var(--tracking-serif);
  line-height: 1.04;
  font-optical-sizing: auto;
}

h1 {
  font-size: clamp(2.4rem, 7.2vw, 5rem);
  max-width: 14ch;
  font-weight: 400;
  /* En la portada el titular va en verde profundo sobre la franja clara del
     velo, como en el template (texto oscuro sobre fondo luminoso). Blanco
     sobre esa franja se perdía contra el verde de la foto. */
  color: var(--verde-900);
}

h2 {
  font-size: clamp(2rem, 5vw, 3.3rem);
  max-width: 16ch;
}

h3 {
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  line-height: 1.15;
}

.suave {
  color: var(--salvia);
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--verde-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--verde-900);
}

strong {
  color: var(--verde-900);
  font-weight: 600;
}

/* Foco visible y con contraste sobre fondos claros y oscuros */
:focus-visible {
  outline: 3px solid #d9a441;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--verde-900);
  border-radius: 6px;
}

.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;
}

.skip-link {
  position: absolute;
  top: -6rem;
  left: 1rem;
  z-index: 100;
  background: var(--blanco);
  color: var(--verde-900);
  font-weight: 600;
  padding: 0.75rem 1.1rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--verde-700);
  margin: 0 0 0.9rem;
}

.note,
.nota {
  font-size: 0.92rem;
  color: var(--texto-suave);
}

/* --- Botones ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.4rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--verde-900);
  color: var(--blanco);
  box-shadow: var(--sombra);
}

.btn--primary:hover {
  background: var(--verde-hover);
  color: var(--blanco);
}

.btn--secondary {
  background: var(--blanco);
  color: var(--verde-900);
  box-shadow: inset 0 0 0 1.5px var(--arena-200);
}

.btn--secondary:hover {
  background: var(--arena-100);
  color: var(--verde-900);
}

/* Botón de la portada: píldora clara sobre el velo (como el CTA del template) */
.btn--hero {
  background: var(--blanco);
  color: var(--verde-900);
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(12, 22, 14, 0.28);
}

.btn--hero:hover {
  background: #f1efe8;
  color: var(--verde-900);
}

.btn--texto {
  background: none;
  color: var(--blanco);
  padding-inline: 0.4rem;
}

.btn--texto:hover {
  color: var(--blanco);
  opacity: 0.82;
}

/* Botón contorneado para fondos oscuros (cierre) */
.btn--contorno {
  background: transparent;
  color: var(--blanco);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}

.btn--contorno:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--blanco);
}

/* Va con .site-footer delante: el color de los enlaces del pie (blanco) le
   ganaba al del botón y el texto quedaba blanco sobre blanco. */
.site-footer .btn--footer {
  background: var(--blanco);
  color: var(--verde-900);
  text-decoration: none;
}

.site-footer .btn--footer:hover {
  background: var(--arena-100);
  color: var(--verde-900);
}

/* --- Header: marca + píldora de vidrio ------------------------------------ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: transparent;
  transition: background-color 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease;
}

/* Al desplazarse, una banda de vidrio clara sostiene la marca y la píldora */
.js .site-header.is-scrolled {
  background: rgba(247, 245, 240, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(31, 42, 29, 0.08);
}

/* Sin JavaScript la banda va sólida: la navegación se lee igual */
html:not(.js) .site-header {
  background: rgba(247, 245, 240, 0.92);
}

.nav-inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: 0.9rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--verde-900);
  text-decoration: none;
  padding: 0.3rem 0.2rem;
  white-space: nowrap;
}

.brand:hover {
  color: var(--verde-900);
}

/* Monograma del logotipo (recortado del original, sin redibujar) */
.brand__mono {
  width: 2.5rem;
  height: auto;
  display: block;
}

/* La píldora de navegación (vidrio esmerilado, como el template) */
.nav-pill {
  display: none;
}

@media (min-width: 900px) {
  .nav-pill {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    padding: 0.3rem 0.3rem 0.3rem 0.75rem;
    box-shadow: 0 4px 18px rgba(31, 42, 29, 0.1);
  }
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.nav__list a {
  display: inline-block;
  padding: 0.55rem 0.85rem;
  color: var(--texto);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav__list a:hover {
  color: var(--verde-900);
  background: rgba(31, 42, 29, 0.06);
}

/* Sección que se está leyendo: fondo + subrayado, no solo color */
.nav__list a[aria-current="location"] {
  color: var(--verde-900);
  background: rgba(31, 42, 29, 0.09);
  box-shadow: inset 0 -2px 0 0 var(--verde-700);
}

.nav-pill__cta {
  margin-left: 0.4rem;
  background: var(--verde-900);
  color: var(--blanco);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.62rem 1.2rem;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}

.nav-pill__cta:hover {
  background: var(--verde-hover);
  color: var(--blanco);
}

/* Botón del menú (solo móvil) con el cruce animado del template */
.nav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--verde-900);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.92);
}

.nav-toggle__icon {
  position: absolute;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-toggle__icon svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.nav-toggle__icon--x {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--menu {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--x {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
}

/* --- Drawer móvil: misma coreografía que el template ---------------------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(31, 42, 29, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(85%, 24rem);
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--sombra-fuerte);
  padding: calc(var(--header-h) + 1.5rem) 2rem 2rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
}

/* Con JavaScript el drawer se abre con la clase; sin JS queda en el flujo
   normal al final de la página, así el menú es alcanzable de todos modos. */
.js .drawer {
  position: fixed;
}

.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.5s var(--ease-out);
}

.drawer-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.drawer__list a {
  display: block;
  padding: 1.05rem 0.25rem;
  border-bottom: 1px solid rgba(31, 42, 29, 0.1);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  color: var(--verde-900);
  text-decoration: none;
  transition: transform 0.5s var(--ease-out), opacity 0.5s ease, color 0.15s ease;
}

.drawer__list a:hover {
  color: var(--verde-700);
}

/* Entrada escalonada de los enlaces (150ms + i * 70ms, como el template) */
.drawer__list a {
  transform: translateX(2rem);
  opacity: 0;
}

.drawer.is-open .drawer__list a {
  transform: translateX(0);
  opacity: 1;
}

.drawer.is-open .drawer__list li:nth-child(1) a { transition-delay: 0.15s; }
.drawer.is-open .drawer__list li:nth-child(2) a { transition-delay: 0.22s; }
.drawer.is-open .drawer__list li:nth-child(3) a { transition-delay: 0.29s; }
.drawer.is-open .drawer__list li:nth-child(4) a { transition-delay: 0.36s; }

/* La sección activa, marcada sin depender solo del color */
.drawer__list a[aria-current="location"] {
  color: var(--verde-700);
  box-shadow: inset 3px 0 0 0 var(--verde-700);
  padding-left: 0.8rem;
}

.drawer__acciones {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transform: translateX(2rem);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s ease;
}

.drawer.is-open .drawer__acciones {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0.4s;
}

.drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--verde-900);
  color: var(--blanco);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
}

.drawer__cta:hover {
  background: var(--verde-hover);
  color: var(--blanco);
}

.drawer__link-sec {
  text-align: center;
  color: var(--texto);
  font-weight: 500;
  font-size: 0.95rem;
}

/* Bloqueo de scroll con el menú abierto (lo activa main.js) */
body.menu-abierto {
  overflow: hidden;
}

/* Sin JavaScript el drawer no queda flotando tapando el contenido */
html:not(.js) .drawer {
  position: static;
  width: auto;
  transform: none;
  visibility: visible;
  box-shadow: none;
  background: var(--arena-100);
  margin: 0 clamp(1.25rem, 4vw, 2.5rem) 2rem;
  border-radius: var(--radio);
  padding: 1.5rem;
}

html:not(.js) .drawer__list a,
html:not(.js) .drawer__acciones {
  transform: none;
  opacity: 1;
}

html:not(.js) .drawer-backdrop {
  display: none;
}

/* --- Portada -------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  overflow: hidden;
  background: var(--verde-900);
  color: var(--blanco);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo en dos tiempos: franja clara arriba para el titular verde (la pareja
   del template) y fondo oscuro abajo para el bloque de texto blanco y las
   tarjetas de vidrio. El tramo medio refuerza la transición para que ninguna
   de las dos zonas se corte antes de tiempo. */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(247, 245, 240, 0.9) 0%,
      rgba(247, 245, 240, 0.82) 34%,
      rgba(247, 245, 240, 0.55) 48%,
      rgba(31, 42, 29, 0.18) 58%,
      rgba(16, 26, 16, 0.66) 80%,
      rgba(16, 26, 16, 0.82) 100%
    );
}

.hero__top {
  position: relative;
  z-index: 1;
  padding: calc(var(--header-h) + clamp(1.5rem, 6vh, 4rem)) clamp(1.25rem, 4vw, 2.5rem) 0;
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
}

.hero__acento {
  color: var(--verde-700);
}

.hero__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 4.5vh, 3rem);
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
}

.hero__marca-block {
  max-width: 24rem;
}

.hero__marca img {
  width: 1.6rem;
  height: auto;
}

.hero__marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.6rem;
}

.hero__bajada {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 1.3rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

/* Tarjetas de vidrio con los datos de lectura rápida */
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.facts li {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.6rem 1.1rem;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radio);
  box-shadow: 0 4px 16px rgba(12, 22, 14, 0.14);
}

.facts__valor {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--verde-900);
  line-height: 1.15;
}

.facts__etiqueta {
  font-size: 0.78rem;
  color: var(--texto);
}

/* Enlace "ver las fotos" del vértice inferior derecho, como el del template */
.hero__video {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.hero__video-bola {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.15s ease;
}

.hero__video:hover .hero__video-bola {
  background: rgba(255, 255, 255, 0.38);
}

.hero__video-bola svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: var(--blanco);
  stroke-width: 2;
}

.hero__video-dato {
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .hero__video {
    display: none;
  }
}

/* --- Secciones ------------------------------------------------------------ */

.section {
  padding-block: clamp(4rem, 10vw, 7rem);
}

.section:focus-visible,
main:focus-visible {
  outline-offset: -4px;
}

.section--alt {
  background: var(--arena-100);
}

.section__head {
  max-width: 52rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.section__lead {
  color: var(--texto-suave);
  margin-bottom: 0;
}

.prose p {
  max-width: 62ch;
}

.subtitle {
  margin-top: 0;
}

.split {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
}

/* --- La casa: texto + mosaico de fotos + cifras ------------------------------ */

.section__head--fila {
  display: grid;
  gap: 0.5rem 3rem;
  max-width: none;
}

@media (min-width: 900px) {
  .section__head--fila {
    grid-template-columns: 1fr minmax(0, 22rem);
    align-items: end;
  }

  .section__head--fila .section__lead {
    margin-bottom: 0.4rem;
  }
}

.casa {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 960px) {
  .casa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
  }
}

.casa__fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.casa__foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--arena-200);
  aspect-ratio: 4 / 3;
}

.casa__foto--grande {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
}

.casa__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Las cifras van en una banda: se leen de un vistazo sin repetir tarjetas */
.stats {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--arena-200);
}

@media (min-width: 760px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stats li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.4rem 1.2rem 0.4rem 0;
}

@media (min-width: 760px) {
  .stats li + li {
    padding-left: 1.4rem;
    border-left: 1px solid var(--arena-200);
  }
}

.stats__valor {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: var(--tracking-serif);
  color: var(--verde-700);
  line-height: 1.05;
}

.stats__etiqueta {
  font-size: 0.88rem;
  color: var(--texto-suave);
}

/* --- Comodidades: dos grupos (afuera / adentro) ------------------------------- */

.comodidades {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .comodidades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
  }
}

.comodidades__grupo {
  background: var(--blanco);
  border: 1px solid var(--arena-200);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}

.comodidades__titulo {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-suave);
  margin: 0 0 0.5rem;
}

.amenities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) and (max-width: 899px) {
  .amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

.amenity {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--arena-100);
}

.amenity:last-child {
  border-bottom: 0;
}

.amenity__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--arena-100);
  color: var(--verde-700);
}

.amenity__icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.amenity__body {
  display: flex;
  flex-direction: column;
}

.amenity__title {
  font-weight: 600;
  color: var(--verde-900);
}

.amenity__note {
  font-size: 0.86rem;
  color: var(--texto-suave);
}

.comodidades__extra {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--arena-50);
  border-radius: var(--radio-chico);
  font-size: 0.92rem;
  color: var(--texto);
}

.comodidades__extra-titulo {
  display: block;
  font-weight: 600;
  color: var(--verde-900);
  margin-bottom: 0.15rem;
}

/* --- Galería en mosaico --------------------------------------------------------- */
/* La primera foto (el parque) va destacada. Las cuentas cierran sin huecos con
   las 12 fotos de la configuración:
   2 columnas: destacada de 2×2 + 10 + la última a lo ancho (8 filas);
   3 columnas: destacada de 2×2 + 11 (5 filas);
   4 columnas: destacada de 2×2 + la segunda a lo ancho + 10 (4 filas). */

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 34vw;
  grid-auto-flow: dense;
  gap: 0.6rem;
}

.gallery li {
  min-width: 0;
}

.gallery li:first-child,
.gallery li:last-child:nth-child(12) {
  grid-column: span 2;
}

.gallery li:first-child {
  grid-row: span 2;
}

@media (min-width: 700px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: clamp(10rem, 20vw, 14rem);
    gap: 0.75rem;
  }

  .gallery li:last-child:nth-child(12) {
    grid-column: auto;
  }
}

@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(11rem, 15vw, 13.5rem);
  }

  .gallery li:nth-child(2) {
    grid-column: span 2;
  }
}

/* Las filas tienen alto fijo: cada foto llena su celda, sea simple, ancha o
   destacada (2×2), sin depender de la proporción del archivo. */
.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radio-chico);
  background: var(--arena-200);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s ease;
}

.gallery__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(31, 42, 29, 0.18);
}

.gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.gallery__item:hover img {
  transform: scale(1.04);
}

.gallery__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.9rem 0.85rem 0.7rem;
  background: linear-gradient(180deg, rgba(16, 26, 16, 0) 0%, rgba(16, 26, 16, 0.82) 68%);
  color: var(--blanco);
  font-size: 0.88rem;
  font-weight: 600;
}

.gallery li:first-child .gallery__label {
  font-size: 1rem;
  padding: 2.4rem 1.1rem 0.95rem;
}

.gallery__badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(16, 26, 16, 0.82);
  color: var(--blanco);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- Ubicación -------------------------------------------------------------- */

.distances {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border-top: 1px solid var(--arena-200);
}

.distances li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--arena-200);
}

.distances__valor {
  font-weight: 600;
  color: var(--verde-700);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Mapa embebido de OpenStreetMap ---------------------------------------- */

.mapa {
  margin: 2.75rem 0 0;
}

.mapa__marco {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--arena-200);
  border: 1px solid var(--arena-200);
  border-radius: var(--radio);
  overflow: hidden;
}

/* Si JavaScript no corre, no queda un recuadro vacío */
.mapa__marco:empty {
  display: none;
}

.mapa__marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 700px) {
  .mapa__marco {
    aspect-ratio: 21 / 9;
  }
}

.mapa__aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
}

.mapa__aviso p {
  margin: 0;
  max-width: 36ch;
}

.mapa__pie {
  margin-top: 0.9rem;
}

.mapa__pie p {
  margin: 0 0 0.4rem;
}

.mapa__creditos {
  font-size: 0.85rem;
}

/* --- Preguntas frecuentes ---------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.6rem;
  max-width: 54rem;
}

.faq details {
  background: var(--blanco);
  border: 1px solid var(--arena-200);
  border-radius: var(--radio);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: 600;
  color: var(--verde-900);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.2rem;
  border-right: 2px solid var(--verde-700);
  border-bottom: 2px solid var(--verde-700);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  color: var(--texto);
  max-width: 68ch;
}

/* --- Reglas de la casa ------------------------------------------------------- */

.normas {
  list-style: none;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 560px) {
  .normas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .normas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.norma {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.1rem 1.2rem;
  background: var(--arena-100);
  border-radius: var(--radio);
  border-left: 3px solid var(--salvia);
}

.norma--no {
  border-left-color: #b8754a;
}

.norma__etiqueta {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
}

.norma__valor {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--verde-900);
}

.norma__nota {
  font-size: 0.88rem;
  color: var(--texto-suave);
}

/* --- Cierre: la última invitación a consultar ----------------------------------- */

.cierre {
  position: relative;
  overflow: hidden;
  background: var(--verde-900);
  color: var(--blanco);
  padding-block: clamp(4.5rem, 12vw, 8rem);
  text-align: center;
}

.cierre__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cierre__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 26, 16, 0.72) 0%, rgba(16, 26, 16, 0.86) 100%);
}

.cierre__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cierre__mono {
  width: 4rem;
  height: auto;
  margin-bottom: 1.25rem;
}

.cierre h2 {
  color: var(--blanco);
  max-width: 18ch;
  font-size: clamp(2.3rem, 6vw, 3.8rem);
}

.cierre__bajada {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
  margin-bottom: 1.8rem;
}

.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 0;
}

/* --- Barra de consulta fija (solo celular) ---------------------------------------- */

.barra-movil {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  background: rgba(31, 42, 29, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  box-shadow: var(--sombra-fuerte);
  color: var(--blanco);
  transform: translateY(160%);
  transition: transform 0.4s var(--ease-out);
}

.barra-movil.is-visible {
  transform: none;
}

.barra-movil__texto {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-movil__cta {
  flex: 0 0 auto;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--verde-900);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.barra-movil__cta:hover {
  color: var(--verde-900);
  background: var(--arena-100);
}

@media (min-width: 900px) {
  .barra-movil {
    display: none;
  }
}

html:not(.js) .barra-movil {
  display: none;
}

/* --- Pie de página ------------------------------------------------------------ */

.site-footer {
  background: var(--verde-900);
  color: #dfe5da;
  padding-block: 3.5rem 1.75rem;
}

.site-footer a {
  color: var(--blanco);
}

.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .footer__grid {
    grid-template-columns: 1.3fr 1fr 1.1fr;
    gap: 3rem;
  }
}

.brand--footer {
  margin: 0 0 1rem;
}

.brand--footer img {
  display: block;
  width: 11rem;
  height: auto;
}

.footer__bajada {
  font-size: 0.95rem;
  color: #c3cbbd;
  max-width: 34ch;
}

.footer__title {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #9fb19a;
  margin: 0 0 0.7rem;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.footer__list a {
  display: inline-block;
  padding-block: 0.6rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  font-weight: 500;
}

.footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.footer__legal p {
  margin: 0;
  font-size: 0.85rem;
  color: #c3cbbd;
}

/* --- Aviso sin JavaScript ------------------------------------------------------- */

.noscript-note {
  max-width: var(--max);
  margin: calc(var(--header-h) + 1rem) auto 0;
  padding: 1rem 1.25rem;
  background: var(--arena-100);
  border: 1px solid var(--arena-200);
  border-radius: var(--radio);
}

/* --- Aparición al desplazarse (main.js agrega .in-view) -------------------------- */
/* Sin JavaScript el contenido nunca queda oculto: solo se anima con la clase js. */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s var(--ease-out);
}

.js .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* --- Visor ampliado de la galería ------------------------------------------------- */

.lightbox {
  width: min(1080px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blanco);
}

.lightbox::backdrop {
  background: rgba(12, 20, 11, 0.9);
}

.lightbox__inner {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  background: var(--verde-900);
  border-radius: var(--radio);
}

.lightbox__figure {
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.lightbox img {
  display: block;
  width: 100%;
  max-height: 66vh;
  object-fit: contain;
  background: #16221a;
  border-radius: var(--radio-chico);
}

.lightbox figcaption {
  font-size: 0.98rem;
  font-weight: 600;
  text-align: center;
}

.lightbox__status {
  margin: 0;
  text-align: center;
  font-size: 0.86rem;
  color: #cdd5c6;
}

.lightbox__pista {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: #a9b3a2;
}

.lightbox__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.lightbox__btn {
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  border: 0;
  background: var(--blanco);
  color: var(--verde-900);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.lightbox__btn:hover {
  background: var(--arena-100);
}

.lightbox__btn--close {
  background: transparent;
  color: var(--blanco);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.lightbox__btn--close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--blanco);
}

/* --- Modo de alto contraste (Windows) ---------------------------------------------- */

@media (forced-colors: active) {
  .btn,
  .nav-pill__cta,
  .drawer__cta,
  .lightbox__btn,
  .nav-toggle {
    border-color: ButtonText;
  }

  .btn--primary,
  .btn--hero,
  .btn--footer,
  .nav-pill__cta,
  .drawer__cta {
    color: ButtonText;
  }

  .comodidades__grupo,
  .norma,
  .faq details,
  .mapa__marco,
  .gallery__item,
  .drawer {
    border-color: CanvasText;
  }

  .cierre__img,
  .cierre__velo {
    display: none;
  }

  .cierre,
  .barra-movil {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }

  .cierre h2,
  .cierre__bajada {
    color: CanvasText;
  }

  /* Estas capas van sobre una foto: fondo plano y texto del sistema */
  .facts li,
  .gallery__label,
  .gallery__badge,
  .lightbox__inner,
  .nav-pill {
    background: Canvas;
    border-color: CanvasText;
    color: CanvasText;
  }

  .hero__velo,
  .drawer-backdrop {
    display: none;
  }

  .hero__img {
    display: none;
  }

  .hero,
  .site-header,
  .site-footer,
  .section--alt,
  .drawer {
    background: Canvas;
  }

  h1,
  .hero__acento,
  .hero__marca,
  .hero__bajada,
  .hero__video {
    color: CanvasText;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Impresión ---------------------------------------------------------------------- */

@media print {
  .site-header,
  .skip-link,
  .nav-pill,
  .nav-toggle,
  .drawer,
  .drawer-backdrop,
  .hero__img,
  .hero__velo,
  .hero__actions,
  .hero__video,
  .gallery,
  /* La figura del mapa se va entera: sin el mapa, el epígrafe "vista aproximada
     de la zona" queda hablando solo. El enlace de Google Maps con su dirección
     ya se imprime en la sección de ubicación. */
  .mapa,
  .lightbox,
  .noscript-note,
  .btn--texto,
  .casa__fotos,
  .cierre,
  .barra-movil {
    display: none !important;
  }

  /* La sección de galería se oculta entera: en papel no aporta nada sin el visor. */
  #galeria {
    display: none !important;
  }

  h1 {
    font-size: 1.7rem;
    color: #000;
  }

  h2 {
    font-size: 1.35rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  html,
  body {
    background: #fff;
    color: #000;
  }

  .hero,
  .section,
  .section--alt,
  .site-footer {
    background: #fff;
    color: #000;
  }

  .hero {
    min-height: auto;
    display: block;
  }

  .hero__top {
    padding: 0;
  }

  .hero__bottom {
    padding: 0.5rem 0 0;
    display: block;
  }

  .hero__marca-block {
    max-width: none;
  }

  .section {
    padding-block: 0.75rem;
  }

  h1,
  h2,
  h3,
  .suave,
  .eyebrow,
  .hero__acento,
  .hero__marca,
  .hero__bajada,
  .section__lead,
  .note,
  .nota,
  .amenity__note,
  .stats__valor,
  .stats__etiqueta,
  .footer__bajada,
  .footer__title,
  .footer__legal p,
  .site-footer,
  .brand--footer,
  strong {
    color: #000;
  }

  .facts li,
  .comodidades__grupo,
  .norma,
  .faq details,
  .btn {
    background: #fff;
    border: 1px solid #666;
    color: #000;
    box-shadow: none;
  }

  .btn {
    padding-inline: 0;
  }

  /* Los enlaces que sirven para llegar se imprimen con su dirección, porque en
     papel no se puede hacer clic. */
  #ubicacion a[href^="http"]::after,
  .site-footer a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .faq details,
  .stats li,
  .norma,
  .amenity {
    break-inside: avoid;
  }

  .norma__valor,
  .norma__etiqueta,
  .norma__nota,
  .comodidades__titulo,
  .comodidades__extra {
    color: #000;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Movimiento reducido -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .gallery__item:hover {
    transform: none;
  }

  .gallery__item:hover img {
    transform: none;
  }

  .amenity:hover {
    transform: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .drawer,
  .drawer__list a,
  .drawer__acciones,
  .drawer-backdrop {
    transition: none;
  }

  .drawer__list a,
  .drawer__acciones {
    transform: none;
    opacity: 1;
  }
}