/* =========================================================================
   MALU — Galle Fort
   Paleta tomada del rótulo oficial (SIGN 500MM.pdf): azul #152F4C sobre
   crema #F2EAE1. Todos los contrastes de texto están CALCULADOS, no
   estimados. Los valores están en el README.
   ========================================================================= */

:root{
  /* Marca */
  --ink:          #152F4C;   /* azul del rótulo · 11,43:1 sobre crema */
  --ink-deep:     #0E2137;   /* azul profundo para fondos y pie */
  --cream:        #F2EAE1;   /* crema del rótulo */
  --cream-soft:   #FAF7F3;   /* crema alto, para alternar secciones */

  /* Texto */
  --body:         #3D4F63;   /* 7,06:1 sobre crema */
  --on-dark:      #F2EAE1;   /* 11,43:1 sobre --ink */
  --on-dark-mute: #C6C0BA;   /* 7,55:1 sobre --ink */

  /* Acento latón: NUNCA como texto sobre crema (2,68:1) */
  --brass:        #B8873F;   /* solo filetes y adornos sin texto */
  --brass-text:   #8A5F22;   /* 4,71:1 sobre crema — antetítulos */
  --brass-light:  #D8A860;   /* 6,28:1 sobre --ink · 7,50:1 sobre --ink-deep */

  /* Aviso de pendiente (solo en desarrollo) */
  --pending-bg:   #FDF2D4;
  --pending-ink:  #6B4E00;
  --pending-line: #C99A16;

  --maxw: 1180px;
  --gut: clamp(1.25rem, 5vw, 4rem);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--sans);
  font-weight:400;              /* Jost en 300 queda demasiado fina sobre crema */
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1.15em; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}
.section--dark :focus-visible,
.floor--dark :focus-visible,
.footer :focus-visible,
.hero :focus-visible{ outline-color:var(--brass-light); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:var(--cream);
  padding:.75rem 1.25rem; font-family:var(--sans); letter-spacing:.08em;
}
.skip-link:focus{ left:0; }

/* --------------------------------------------------------------- layout */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap--split{ display:grid; gap:clamp(2rem,5vw,4.5rem); }
@media (min-width:900px){
  .wrap--split{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; }
}

.split__main{ min-width:0; }
.split__aside{ min-width:0; }
.split__aside .h2{ font-size:clamp(1.85rem,1.3rem + 2.2vw,2.9rem); }
@media (min-width:900px){
  .split__aside{ position:sticky; top:6rem; }
}

.section{ padding-block:clamp(4rem,9vw,7.5rem); }
.section--cream{ background:var(--cream); }
.section--soft { background:var(--cream-soft); }
.section--dark { background:var(--ink); color:var(--on-dark); }

.section__head{ max-width:46rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section__sub{ color:var(--body); max-width:38rem; }
.section--dark .section__sub{ color:var(--on-dark-mute); }

/* ------------------------------------------------------------ tipografía */
.h2{
  font-family:var(--serif);
  font-size:clamp(2rem,1.35rem + 2.9vw,3.6rem);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 1rem;
}
.h2 em{ font-style:italic; color:var(--ink); opacity:.85; }
.h2--light{ color:var(--cream); }
.h2--light em{ color:var(--cream); }

.eyebrow{
  font-family:var(--sans);
  font-size:.75rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass-text);
  margin:0 0 1rem;
}
.eyebrow--light{ color:var(--brass-light); }

.lede{
  font-size:clamp(1.075rem,1rem + .35vw,1.25rem);
  line-height:1.6;
  color:var(--ink);
}
.lede strong{ font-weight:400; font-family:var(--serif); font-size:1.08em; }

/* --------------------------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:.85rem 2rem;
  font-family:var(--sans); font-size:.8125rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; border-radius:2px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform 160ms var(--ease);
}
.btn--primary{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{ background:transparent; color:var(--cream); }
}
.btn--ghost{ background:transparent; color:var(--cream); border-color:rgba(242,234,225,.45); }
@media (hover:hover) and (pointer:fine){
  .btn--ghost:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
}
.btn:active{ transform:scale(.97); }

/* ------------------------------------------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1.1rem var(--gut);
  transform-origin:top;
  transition:background .4s var(--ease), transform .25s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-stuck{
  background:var(--cream);
  transform:scaleY(.88);
  box-shadow:0 1px 0 rgba(21,47,76,.12);
}
.nav__logo{ display:block; line-height:0; color:var(--cream); }
.nav__logo-img{
  height:clamp(24px,3.4vw,32px); width:auto;
  aspect-ratio:1081.59/382;
  transition:color .4s var(--ease);
}
.nav.is-stuck .nav__logo{ color:var(--ink); }

.nav__menu{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.25rem); }
.nav__link{
  font-size:.8125rem; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  color:var(--cream);
  padding:.5rem 0;
  transition:color .3s var(--ease), opacity .3s var(--ease);
}
.nav.is-stuck .nav__link{ color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .nav__link:hover{ opacity:.65; }
}
.nav__cta{
  border:1px solid rgba(242,234,225,.5);
  padding:.55rem 1.25rem; border-radius:2px;
  transition:transform 160ms var(--ease);
}
.nav.is-stuck .nav__cta{ border-color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .nav__cta:hover{ opacity:1; background:var(--cream); color:var(--ink); }
  .nav.is-stuck .nav__cta:hover{ background:var(--ink); color:var(--cream); }
}
.nav__cta:active{ transform:scale(.97); }

.nav__burger{
  display:none; position:relative;
  width:32px; height:22px; padding:0;
  background:none; border:0; cursor:pointer;
}
.nav__burger::after{ content:""; position:absolute; inset:-11px; }
.nav__burger span{
  display:block; height:1.5px; width:100%; background:var(--cream);
  transition:transform .35s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.nav__burger span+span{ margin-top:8px; }
.nav.is-stuck .nav__burger span{ background:var(--ink); }
.nav.is-open .nav__burger span{ background:var(--ink); }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(9.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg); }

@media (max-width:900px){
  .nav__burger{ display:block; }
  .nav__menu{
    position:fixed; inset:0;
    flex-direction:column; justify-content:center;
    gap:1.75rem;
    background:var(--cream);
    transform:translateY(-100%);
    transition:transform .5s var(--ease);
  }
  .nav.is-open .nav__menu{ transform:translateY(0); }

  .nav__menu .nav__link{
    opacity:0; transform:translateY(8px);
    transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .nav.is-open .nav__menu .nav__link{ opacity:1; transform:none; }

  .nav__menu .nav__link:nth-child(1){ transition-delay:80ms; }
  .nav__menu .nav__link:nth-child(2){ transition-delay:120ms; }
  .nav__menu .nav__link:nth-child(3){ transition-delay:160ms; }
  .nav__menu .nav__link:nth-child(4){ transition-delay:200ms; }
  .nav__menu .nav__link:nth-child(5){ transition-delay:240ms; }
  .nav__menu .nav__link:nth-child(6){ transition-delay:280ms; }
  .nav__link{ color:var(--ink); font-size:1rem; letter-spacing:.14em; }
  .nav__cta{ border-color:var(--ink); }
}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;
  min-height:clamp(30rem,78svh,46rem);
  display:grid; place-items:center;
  padding:7rem var(--gut) 5rem;
  background:var(--ink-deep);
  color:var(--cream);
  overflow:hidden;
  text-align:center;
}
/* Telón mientras no hay fotografía: azul sólido, sin trama, que se
   degrada hacia crema al pie para que no lea como un bloque plano y
   funda con la sección siguiente. */
.hero__media{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, transparent 85%, var(--cream-soft) 100%),
    radial-gradient(120% 90% at 50% 0%, #1B3C60 0%, transparent 60%),
    radial-gradient(90% 70% at 50% 110%, #16334F 0%, transparent 65%),
    var(--ink-deep);
}
.hero__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.55;
}
.hero__inner{ position:relative; z-index:2; max-width:52rem; }
.hero__wordmark{
  width:min(78vw,620px); height:auto; margin:0 auto;
  aspect-ratio:1081.59/382;
  color:var(--cream);
}
.hero__claim{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,1rem + 1.1vw,1.85rem);
  color:var(--cream);
  margin:clamp(1.5rem,3vw,2.25rem) 0 .75rem;
}
.hero__where{
  font-size:.75rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass-light);
  margin:0 0 clamp(2rem,4vw,3rem);
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

.hero__scroll{
  position:absolute; left:50%; bottom:2.25rem; z-index:2;
  transform:translateX(-50%);
  width:44px; height:44px;
  display:grid; place-items:center;
}
.hero__scroll span{
  display:block; width:1px; height:34px;
  background:linear-gradient(to bottom, transparent, var(--brass-light));
  animation:drip 2.4s var(--ease) infinite;
}
@keyframes drip{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ------------------------------------------------------------ la espina */
.bone{
  width:clamp(48px,6vw,84px); height:auto;
  aspect-ratio:128.93/382;
  margin-top:2rem;
  color:var(--brass);
  opacity:.7;
}

/* -------------------------------------------------------------- dos pisos */
.floors{ display:block; }
.floor{
  display:grid;
  align-items:center;
}
@media (min-width:900px){
  .floor{ grid-template-columns:1fr 1fr; }
}
.floor--dark{ background:var(--ink); color:var(--on-dark); }
.floor--light{ background:var(--cream); }
.floor__body{ padding:clamp(3.5rem,7vw,6.5rem) var(--gut); }
@media (min-width:900px){
  .floor--dark .floor__body{ padding-left:max(var(--gut), calc((100vw - var(--maxw))/2 + var(--gut))); }
  .floor--light .floor__body{ padding-right:max(var(--gut), calc((100vw - var(--maxw))/2 + var(--gut))); }
}
.floor__text{ max-width:34rem; }
.floor--dark .floor__text{ color:var(--on-dark-mute); }
.floor__media{ padding:0; }
@media (max-width:899px){
  .floor__media{ order:-1; }
  .floor--light .floor__media{ order:-1; }
}

.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem; }
.tags li{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem .9rem;
  border:1px solid rgba(21,47,76,.22); border-radius:2px;
  color:var(--ink);
}
.floor--dark .tags li{ border-color:rgba(242,234,225,.28); color:var(--on-dark); }

/* ---------------------------------------------------------- hueco de foto */
.slot{
  position:relative;
  aspect-ratio:4/3;
  background:
    linear-gradient(135deg, rgba(21,47,76,.07), rgba(21,47,76,.03));
  border:1px dashed rgba(21,47,76,.28);
  display:grid; place-items:center;
  padding:1.5rem; text-align:center;
}
.slot--tall{
  aspect-ratio:3/4; max-height:86svh;
  border:0; border-left:1px dashed rgba(242,234,225,.22);
}
.floor--dark .slot,
.slot--tall{
  background:linear-gradient(135deg, rgba(242,234,225,.06), rgba(242,234,225,.02));
}
.floor--light .slot--tall{
  background:linear-gradient(135deg, rgba(21,47,76,.07), rgba(21,47,76,.03));
  border-left:1px dashed rgba(21,47,76,.22);
}
.slot::after{
  content:attr(data-slot);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pending-ink);
  background:var(--pending-bg);
  border:1px solid var(--pending-line);
  padding:.4rem .75rem; border-radius:2px;
  max-width:88%;
}

/* hueco ya cubierto con fotografía real: quita el telón y el aviso */
.slot--photo{
  border:0; padding:0; background:none; overflow:hidden;
}
.slot--photo::after{ content:none; }
.slot--photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* -------------------------------------------------------------- tarjetas */
.cards{
  display:grid; gap:1px;
  background:rgba(21,47,76,.14);
  border:1px solid rgba(21,47,76,.14);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.card{
  background:var(--cream-soft);
  padding:clamp(1.75rem,3vw,2.5rem);
  transition:background .4s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{ background:var(--cream); }
}
.card__title{
  font-family:var(--serif);
  font-size:1.3rem; color:var(--ink);
  margin:0 0 .6rem;
}
.card__text{ margin:0; font-size:.95rem; line-height:1.65; }

.menu-cta{ margin-top:2.5rem; text-align:center; }

/* --------------------------------------------------------------- reseñas */
.rating{ text-align:center; }
.rating__score{
  font-family:var(--serif);
  font-size:clamp(3.5rem,2rem + 7vw,7rem);
  line-height:1; color:var(--cream);
  margin:0;
}
.reveals-on .rating__score{
  opacity:0; transform:scale(.94);
  transition:opacity .5s var(--ease) .15s, transform .5s var(--ease) .15s;
}
.reveals-on .wrap.reveal.is-in .rating__score{ opacity:1; transform:none; }
.rating__score span{ font-size:.3em; color:var(--brass-light); letter-spacing:.02em; }
.rating__meta{
  font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-mute); margin:1rem 0 0;
}
.rating__meta a{ color:var(--brass-light); text-underline-offset:4px; }
.rating__quote{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.1rem,1rem + .7vw,1.5rem);
  line-height:1.55; text-align:center;
  max-width:38rem; margin:2.5rem auto 0;
  color:var(--cream);
}

/* --------------------------------------------------------------- galería */
/* 20rem de mínimo → tres columnas a 1180 px, seis fotos en dos filas iguales */
.grid{
  display:grid; gap:clamp(.75rem,1.5vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
}

/* ----------------------------------------------------------------- datos */
.facts{ margin:0; display:grid; gap:0; }
.fact{
  display:grid; gap:.35rem;
  padding:1.35rem 0;
  border-top:1px solid rgba(21,47,76,.16);
}
.fact:last-child{ border-bottom:1px solid rgba(21,47,76,.16); }
@media (min-width:640px){
  .fact{ grid-template-columns:9rem 1fr; gap:1.5rem; align-items:baseline; }
}
.fact dt{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass-text);
}
.fact dd{ margin:0; color:var(--ink); }
.fact dd a{ text-underline-offset:4px; }

/* ------------------------------------------------------------- pendiente */
.pending{
  display:inline-block;
  background:var(--pending-bg);
  color:var(--pending-ink);
  border:1px solid var(--pending-line);
  border-radius:2px;
  padding:.15rem .5rem;
  font-size:.85em;
  letter-spacing:.01em;
}

/* ----------------------------------------------------------------- grupo */
.group{ padding-block:clamp(3rem,6vw,4.5rem); text-align:center; }
.group__text{
  max-width:40rem; margin-inline:auto;
  font-family:var(--serif); font-size:1.15rem; line-height:1.7;
  color:var(--ink);
}
.group__text a{ text-underline-offset:4px; }

/* ------------------------------------------------------------------- pie */
.footer{ background:var(--ink-deep); color:var(--on-dark); }
.footer a{ color:var(--on-dark); text-underline-offset:4px; transition:color .3s var(--ease); }
@media (hover:hover) and (pointer:fine){
  .footer a:hover{ color:var(--brass-light); }
}
.footer__inner{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  padding-block:clamp(3.5rem,7vw,5.5rem);
}
@media (min-width:800px){
  .footer__inner{ grid-template-columns:1fr 1.4fr; align-items:start; }
}
.footer__wordmark{
  width:min(60vw,220px); height:auto;
  aspect-ratio:1081.59/382;
  color:var(--cream);
}
.footer__claim{
  font-family:var(--serif); font-style:italic;
  color:var(--brass-light); margin:1rem 0 0; font-size:1rem;
}
.footer__cols{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));
}
.footer__cols p{ margin:0; color:var(--on-dark-mute); line-height:1.9; }
.footer__label{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-light) !important; margin-bottom:.5rem !important;
}
.footer__base{
  border-top:1px solid rgba(242,234,225,.14);
  padding:1.5rem var(--gut);
  text-align:center;
}
.footer__base p{
  margin:0; font-size:.75rem; letter-spacing:.1em;
  color:var(--on-dark-mute);
}

/* ------------------------------------------------------------- revelados */
/* El estado oculto SOLO existe si el <head> ha confirmado que hay
   IntersectionObserver para devolverlo. Sin JS, o con JS roto, el contenido
   se pinta normal: nunca una página en blanco. */
.reveals-on .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveals-on .reveal.is-in{ opacity:1; transform:none; }

.reveals-on .cards.reveal,
.reveals-on .grid.reveal{
  opacity:1; transform:none; transition:none;
}
.reveals-on .cards.reveal .card,
.reveals-on .grid.reveal .slot{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.cards.reveal.is-in .card,
.grid.reveal.is-in .slot{ opacity:1; transform:none; }

.cards.reveal .card:nth-child(1), .grid.reveal .slot:nth-child(1){ transition-delay:0ms; }
.cards.reveal .card:nth-child(2), .grid.reveal .slot:nth-child(2){ transition-delay:50ms; }
.cards.reveal .card:nth-child(3), .grid.reveal .slot:nth-child(3){ transition-delay:100ms; }
.cards.reveal .card:nth-child(4), .grid.reveal .slot:nth-child(4){ transition-delay:150ms; }
.cards.reveal .card:nth-child(5), .grid.reveal .slot:nth-child(5){ transition-delay:200ms; }
.cards.reveal .card:nth-child(6), .grid.reveal .slot:nth-child(6){ transition-delay:250ms; }

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

/* --------------------------------------------------------- fab whatsapp */
/* Verde universal de WhatsApp a propósito, no la paleta de Malu — mismo
   patrón que Kabala y The Roost, para que se reconozca de un vistazo. */
.fab{
  position:fixed; bottom:24px; right:24px; z-index:95;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.5);
  transition:transform .3s var(--ease);
  opacity:0; transform:scale(.9);
  animation:fab-in .5s var(--ease) .6s forwards;
}
@media (hover:hover) and (pointer:fine){
  .fab:hover{ transform:scale(1.08); }
}
.fab:active{ transform:scale(.95); }

@keyframes fab-in{
  to{ opacity:1; transform:scale(1); }
}
.fab svg{ width:28px; height:28px; }
@media (max-width:600px){
  .fab{ bottom:16px; right:16px; width:54px; height:54px; }
}
@media (prefers-reduced-motion:reduce){
  .fab{ transition:none; animation:none; opacity:1; transform:none; }
}