/* ============================================================================
   SITIO — composición.
   La retícula va sobria a propósito: toda la sorpresa vive en la marea.
   ========================================================================== */

/* ══ la marea ═══════════════════════════════════════════════════════════════
   Lienzo fijo al viewport, por detrás de todo el contenido y por delante del
   fondo. Las secciones NO llevan fondo propio justamente para que el agua se
   vea a través de ellas; el único que la tapa es el pie, que es donde el mar
   ya no llega. */
.marea {
  position: fixed;
  inset: 0;
  z-index: var(--z-corriente);
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.seccion, .estancia, .hero, .pie { position: relative; z-index: var(--z-contenido); }

/* ══ navegación ════════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--margen-x);
  color: var(--blanco);
  /* solo color y sombra: animar padding movería la caja en cada cuadro */
  transition:
    background-color var(--t-medio) var(--curva-suave),
    color var(--t-medio) var(--curva-suave),
    box-shadow var(--t-medio) var(--curva-suave);
}

.nav.esta-posada {
  background: rgb(246 250 251 / 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--texto);
  box-shadow: 0 1px 0 var(--linea);
}

.nav__marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  min-width: 0;
}
.nav__marca img {
  width: clamp(30px, 3.4vw, 40px);
  height: auto;
  transition: filter var(--t-medio) var(--curva-suave);
}
.nav.esta-posada .nav__marca img {
  /* el logo es blanco: sobre el fondo claro se tiñe del azul de marca */
  filter: brightness(0) saturate(100%) invert(30%) sepia(84%) saturate(1900%) hue-rotate(184deg) brightness(92%) contrast(92%);
}

.nav__nombre {
  font-family: var(--fuente-display);
  font-size: var(--paso--1);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}
.nav__nombre em {
  font-style: normal;
  /* Montserrat delgada, no Cinzel: así es el logotipo de verdad */
  font-family: var(--fuente-marca-2);
  font-size: 0.66em;
  font-weight: 300;
  letter-spacing: 0.26em;
  opacity: 0.8;
}

.nav__menu { display: flex; align-items: center; gap: clamp(var(--e-3), 1.7vw, var(--e-5)); }
.nav__menu > a:not(.boton) {
  font-size: var(--paso--1);
  text-decoration: none;
  padding-block: var(--e-1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-presion) var(--curva-suave), opacity var(--t-presion) var(--curva-suave);
  opacity: 0.9;
}
.nav__menu > a:not(.boton):hover { border-bottom-color: currentColor; opacity: 1; }

.nav:not(.esta-posada) .boton--marca {
  --boton-fondo: rgb(255 255 255 / 0.14);
  --boton-borde: rgb(255 255 255 / 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.nav:not(.esta-posada) .boton--marca:hover { --boton-fondo: rgb(255 255 255 / 0.26); --boton-borde: var(--blanco); }

@media (max-width: 860px) { .nav__menu > a:not(.boton) { display: none; } }
@media (max-width: 640px) { .nav__nombre { display: none; } }

/* ══ hero ══════════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--e-10) var(--margen-x) var(--e-9);
  isolation: isolate;
}

.hero__fondo { position: absolute; inset: 0; z-index: -2; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; }

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgb(8 19 28 / 0.62) 0%, rgb(8 19 28 / 0.18) 34%, rgb(8 19 28 / 0.30) 62%, rgb(8 19 28 / 0.80) 100%),
    radial-gradient(ellipse 70% 55% at 50% 52%, rgb(8 19 28 / 0.42), transparent 72%);
}

.hero__cuerpo {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--e-5);
  color: var(--blanco);
  max-width: 44rem;
}

.hero__logo {
  width: clamp(74px, 9vw, 116px);
  height: auto;
  filter: drop-shadow(0 3px 18px rgb(8 19 28 / 0.55));
}

.hero__titulo {
  font-size: var(--paso-6);
  font-weight: var(--peso-display);
  line-height: var(--alto-apretado);
  letter-spacing: var(--track-display);
  /* el tracking abre las capitales; este margen compensa el hueco que la
     última letra deja colgando, para que el bloque quede ópticamente centrado */
  margin-inline-end: calc(var(--track-display) * -1);
  text-shadow: 0 2px 30px rgb(8 19 28 / 0.45);
}

.hero__bajada {
  font-size: var(--paso-1);
  line-height: 1.55;
  max-width: 32ch;
  color: rgb(255 255 255 / 0.92);
  text-shadow: 0 1px 14px rgb(8 19 28 / 0.55);
}

.hero__explora {
  display: inline-grid;
  justify-items: center;
  gap: var(--e-3);
  margin-top: var(--e-3);
  padding: var(--e-2) var(--e-4);
  font-size: var(--paso--2);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-ancho);
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(255 255 255 / 0.9);
  transition: color var(--t-presion) var(--curva-suave);
}
.hero__explora:hover { color: var(--blanco); }

/* la flecha cae y se rehace, como una gota */
.hero__explora svg { animation: gotear 2.6s var(--curva-suave) infinite; }
@keyframes gotear {
  0%, 68%, 100% { transform: translateY(0); opacity: 0.75; }
  34%           { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero__explora svg { animation: none; } }

/* ══ redes ═════════════════════════════════════════════════════════════════ */
.social { display: flex; gap: var(--e-2); }
.social a {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radio-redondo);
  color: currentColor;
  transition: background-color var(--t-presion) var(--curva-suave), transform var(--t-instante) var(--curva-suave);
}
.social a:hover { background: rgb(255 255 255 / 0.16); }
.social a:active { transform: translateY(1px); }

.social--hero {
  position: absolute;
  inset-block-start: max(var(--e-10), 5.2rem);
  inset-inline-end: var(--margen-x);
  color: var(--blanco);
  flex-direction: column;
}
/* medido: el peor fondo bajo los iconos daba 3.87:1; la sombra los despega */
.social--hero a { filter: drop-shadow(0 1px 6px rgb(8 19 28 / 0.75)); }
@media (max-width: 640px) {
  .social--hero { flex-direction: row; inset-block-start: auto; inset-block-end: var(--e-5); inset-inline: 0; justify-content: center; }
}

.social--pie { margin-top: var(--e-3); color: var(--texto-invertido-suave); }
.social--pie a:hover { background: rgb(255 255 255 / 0.10); color: var(--blanco); }

/* ══ secciones de texto ════════════════════════════════════════════════════ */
.seccion { padding-block: var(--seccion-y); }

.seccion--entrada {
  text-align: center;
  padding-block: var(--seccion-y) clamp(2rem, 1rem + 3vw, 3.5rem);
}
.seccion--entrada .titulo, .seccion--entrada .entrada { margin-inline: auto; }

.titulo {
  font-size: var(--paso-4);
  /* las capitales con tracking ocupan bastante más que su cuenta de
     caracteres: 22ch partía «NUESTRAS / OPCIONES PARA TI» en seco */
  max-width: 28ch;
  letter-spacing: var(--track-display);
}

.entrada {
  margin-top: var(--e-5);
  max-width: 46ch;
  font-size: var(--paso-1);
  line-height: 1.6;
  color: var(--texto-suave);
}

/* ══ las cuatro estancias, una por sección ═════════════════════════════════
   Recorrido largo a propósito: le da a la marea el espacio que necesita para
   subir con calma. Alternan de lado para que el ojo baje en zigzag. */
.estancia { padding-block: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); }

.estancia__reja {
  display: grid;
  gap: clamp(var(--e-5), 4vw, var(--e-8));
  align-items: center;
}
@media (min-width: 900px) {
  .estancia__reja { grid-template-columns: 1fr 1fr; }
  .estancia--invertida .estancia__foto { order: 2; }
}

.estancia__foto {
  position: relative;
  border-radius: var(--radio-3);
  background: var(--agua-100);
  aspect-ratio: 4 / 5;
  /* que nunca sea más alta que la pantalla: si la foto no cabe de un vistazo,
     el ojo deja de leerla como una imagen y empieza a leerla como un muro */
  max-height: 76svh;
  max-width: 100%;   /* con aspect-ratio + max-height, el ancho se deriva de la
                        altura y a 320 px se salía de la columna */
  margin-inline: auto;
  box-shadow: var(--sombra-2);
}
@media (max-width: 899px) { .estancia__foto { aspect-ratio: 5 / 4; max-height: 62svh; } }

.estancia__foto picture {
  display: block;
  width: 100%; height: 100%;
  /* recorta el acercamiento del hover sin crear un contenedor que atrape a
     la cumbrera de al lado */
  clip-path: inset(0 round var(--radio-3));
}
.estancia__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-lento) var(--curva-salida);
}
.estancia:hover .estancia__foto img { transform: scale(1.03); }

/* la cumbrera: el mismo ángulo del logo y de todos los techos del lugar */
.estancia__foto::after {
  content: '';
  position: absolute;
  inset-block-start: var(--e-3);
  inset-inline-start: var(--e-3);
  width: 30px;
  height: 21px;
  border-block-start: 1.5px solid rgb(255 255 255 / 0.85);
  border-inline-start: 1.5px solid rgb(255 255 255 / 0.85);
  transform: rotate(45deg) skewX(-12deg);
  transform-origin: top left;
  pointer-events: none;
}

.estancia__texto { display: grid; gap: var(--e-3); align-content: center; justify-items: start; }

.estancia__nombre {
  font-size: var(--paso-5);
  letter-spacing: var(--track-display);
  line-height: 1.1;
}

.estancia__lema {
  font-size: var(--paso-1);
  color: var(--acento-calido);
  max-width: 24ch;
}

/* ══ contacto ══════════════════════════════════════════════════════════════ */
.seccion--contacto {
  text-align: center;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--e-10);
}
.seccion--contacto .titulo, .seccion--contacto .entrada { margin-inline: auto; }

.contacto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-7);
  justify-content: center;
}
.contacto .boton { max-width: 100%; overflow-wrap: anywhere; }

/* ══ el sonido del mar ═════════════════════════════════════════════════════
   Discreto y siempre a mano. NUNCA arranca solo. */
.mar {
  position: fixed;
  inset-block-end: var(--e-5);
  inset-inline-end: var(--e-5);
  z-index: var(--z-flotante);
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.6em 1.05em;
  background: rgb(246 250 251 / 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--marca-honda);
  border: 1px solid var(--linea);
  border-radius: var(--radio-redondo);
  font-size: var(--paso--2);
  font-weight: var(--peso-medio);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--sombra-1);
  transition:
    background-color var(--t-presion) var(--curva-suave),
    border-color var(--t-presion) var(--curva-suave),
    transform var(--t-instante) var(--curva-suave);
}
.mar:hover { background: var(--blanco); border-color: var(--marca-clara); }
.mar:active { transform: translateY(1px); }

/* tres barritas que solo ondulan cuando el mar está sonando */
.mar__ondas { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.mar__ondas i {
  display: block;
  width: 3px;
  height: 14px;
  border-radius: var(--radio-redondo);
  background: currentColor;
  opacity: 0.55;
  /* se escala en vez de cambiar de altura: `height` provoca recálculo de
     layout en cada cuadro, `transform` no toca el layout */
  transform: scaleY(0.36);
  transform-origin: bottom center;
  transition: transform var(--t-rapido) var(--curva-suave), opacity var(--t-rapido) var(--curva-suave);
}
.mar[aria-checked='true'] .mar__ondas i {
  opacity: 1;
  animation: ondear 2.9s var(--curva-suave) infinite;
}
.mar[aria-checked='true'] .mar__ondas i:nth-child(2) { animation-delay: 0.42s; animation-duration: 3.7s; }
.mar[aria-checked='true'] .mar__ondas i:nth-child(3) { animation-delay: 0.91s; animation-duration: 2.3s; }
@keyframes ondear {
  0%, 100% { transform: scaleY(0.36); }
  22%      { transform: scaleY(1); }     /* sube rápido, como la ola */
  70%      { transform: scaleY(0.5); }   /* y se retira despacio */
}
@media (prefers-reduced-motion: reduce) {
  .mar[aria-checked='true'] .mar__ondas i { animation: none; transform: scaleY(0.7); }
}
@media (max-width: 640px) {
  .mar { inset-block-end: var(--e-3); inset-inline-end: var(--e-3); padding: 0.55em 0.8em; }
  .mar__texto { display: none; }
}

/* ══ pie ═══════════════════════════════════════════════════════════════════ */
.pie {
  background: var(--fondo-hondo-alt);
  color: var(--texto-invertido-suave);
  padding-block: var(--e-8) var(--e-5);
  font-size: var(--paso--1);
}

.pie__reja {
  display: grid;
  gap: var(--e-7);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.pie__marca img { width: 44px; margin-bottom: var(--e-3); }
.pie__nombre {
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blanco);
  line-height: 1.2;
}
.pie__nombre em {
  display: block;
  font-style: normal;
  font-family: var(--fuente-marca-2);
  font-size: 0.58em;
  font-weight: 300;
  letter-spacing: 0.28em;
  opacity: 0.78;
}
.pie__lugar { margin-top: var(--e-3); max-width: 22ch; }

.pie__col { display: grid; gap: var(--e-2); align-content: start; }
.pie__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--paso--2);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-ancho);
  text-transform: uppercase;
  color: var(--marca-clara);
  margin-bottom: var(--e-1);
}
.pie__col a {
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--t-presion) var(--curva-suave);
}
.pie__col a:hover { color: var(--blanco); }

.pie__linea {
  max-width: var(--ancho-max);
  margin: var(--e-8) auto 0;
  padding: var(--e-4) var(--margen-x) 0;
  border-top: 1px solid var(--linea-honda);
  font-size: var(--paso--2);
  opacity: 0.7;
}

/* ══ aparición al entrar en cuadro ═════════════════════════════════════════
   Sube 14 px y se asienta. Nada rebota. */
[data-sube] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--t-lento) var(--curva-suave),
    transform var(--t-lento) var(--curva-salida);
}
[data-sube].esta-dentro { opacity: 1; transform: none; }

.estancia__texto[data-sube] { transition-delay: 90ms; }

@media (prefers-reduced-motion: reduce) {
  [data-sube] { opacity: 1; transform: none; transition-delay: 0ms !important; }
}

/* En pantallas muy angostas, «RESTAURANTE» en capitales con tracking mide más
   que la columna (medido: 342 px contra 280 disponibles) y empujaba el ancho
   del documento. Se reduce el cuerpo y se le permite partir. */
@media (max-width: 400px) {
  .estancia__nombre {
    font-size: var(--paso-3);
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
  }
  .hero__titulo { font-size: var(--paso-5); letter-spacing: 0.06em; }
  .titulo { letter-spacing: 0.05em; }
}

/* y ningún ítem de la reja puede empujar la columna más allá de su sitio */
.estancia__reja > * { min-width: 0; }