/* ============================================================
   BUCHI AIRPORT SUITES — hoja de estilo del sitio
   Consume los tokens de css/tokens.css. Los nombres cortos de abajo
   (--bg, --ink, --green…) son alias históricos: se mantienen para no
   reescribir 700 líneas, pero apuntan todos al design system.
   ============================================================ */

:root{
  /* --- Alias → design system --- */
  --bg:var(--ivory);              /* fondo de página */
  --bg-alt:var(--cream);          /* secciones alternas */
  --card:var(--surface-raised);
  --ink:var(--green-900);         /* texto y titulares */
  --muted:var(--stone-600);
  --line:var(--sand);
  --accent:var(--gold-700);       /* oro oscuro: legible sobre marfil */
  --gold:var(--gold-500);         /* oro de marca: filetes y marcas */
  --green:var(--green-700);       /* botones y bloques sólidos */
  --green-deep:var(--green-500);  /* hover: el sistema ACLARA un paso */

  --serif:var(--font-display);
  --sans:var(--font-ui);

  --pad:var(--page-margin);
  --section:var(--section-y);
  --ease:var(--ease-brand);
}
*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  font-feature-settings:"kern" 1, "liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

::selection{background:var(--gold-300);color:var(--green-900);}

/* ---------- Typography ---------- */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:var(--fw-light);
  margin:0;
  letter-spacing:var(--ls-heading);
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:clamp(2.8rem, 7vw, var(--fs-display));line-height:var(--lh-display);letter-spacing:var(--ls-display);}
h2{font-size:clamp(2rem, 4.5vw, var(--fs-h1));line-height:var(--lh-heading);}
h3{font-size:clamp(1.25rem, 2vw, var(--fs-h3));line-height:var(--lh-snug);font-weight:var(--fw-regular);}
h1 em, h2 em, h3 em{font-style:italic;}

p{margin:0;}
a{color:inherit;}

.measure{max-width:64ch;}
.lead{
  max-width:60ch;
  font-size:var(--fs-body-lg);
  line-height:var(--lh-body);
  color:var(--muted);
}
.lead strong{color:var(--ink);font-weight:500;}

/* Eyebrow / overline / labels — Inter, uppercase, tracked */
.overline{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 22px;
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-accent);
}
.overline .ov-line{width:26px;height:1px;background:var(--line-gold);flex:0 0 auto;}

.small-note{
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--muted);
}

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{padding-block:var(--section);}
.section.alt{background:var(--bg-alt);}
section[id],.hero{scroll-margin-top:90px;}

.section-head{max-width:820px;}
.section-head .overline{margin-bottom:22px;}
.section-head .lead{margin-top:24px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  min-height:48px;
  padding:15px 30px;
  font-family:var(--sans);
  font-size:var(--fs-button);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-button);
  text-transform:uppercase;
  line-height:1;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  cursor:pointer;
  background:none;
  color:inherit;
  white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-primary{background:var(--green);color:var(--bg);}
.btn-primary:hover{background:var(--green-deep);}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-secondary:hover{background:var(--green);border-color:var(--green);color:var(--ivory);}
.btn-light{background:var(--bg);color:var(--ink);}
.btn-light:hover{background:var(--surface-raised);}
.btn-ghost{background:transparent;color:var(--bg);border-color:var(--line-on-dark);}
.btn-ghost:hover{background:rgba(251,248,242,.12);border-color:var(--bg);}

/* ---------- Focus ---------- */
:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-xs);}
.no-outline:focus-visible{outline:none;}

/* ---------- Skip link ---------- */
.skip{
  position:fixed;top:10px;left:10px;z-index:400;
  background:var(--ink);color:var(--bg);
  padding:12px 18px;border-radius:3px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transform:translateY(-160%);transition:transform .25s var(--ease);
}
.skip:focus{transform:none;}

/* ---------- Framed image slots (real photography) ---------- */
.slot{
  position:relative;
  aspect-ratio:var(--ar, 16/10);
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:2px;
  width:100%;
}
.slot::after{ /* inset hairline frame over the photo */
  content:"";position:absolute;inset:12px;
  border:1px solid rgba(251,248,242,.55);
  pointer-events:none;z-index:2;
}
.slot img,.gitem img,.hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- Header / Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:72px;
}
/* Márgenes propios: con los de página (hasta 96px) el contenido del nav no
   cabía dentro del contenedor de 1320px y el botón se salía por la derecha. */
.nav .container{padding-inline:clamp(20px,2.4vw,36px);}
/* ---------- Logo ----------
   El design system no dispone de logo vectorial: el mockup entregado es
   una foto. La solución oficial (components/brand/Logo.jsx) es componer
   el wordmark en tipografía — Cormorant Garamond, versales, tracking .34em —
   con un filete oro separando el descriptor. Variante "horizontal". */
.wordmark{
  display:inline-flex;align-items:center;gap:16px;
  font-family:var(--serif);
  line-height:1;
  text-decoration:none;
  color:var(--bg);
  transition:color var(--dur-slow) var(--ease);
}
.wm-name{
  font-family:var(--serif);
  font-weight:var(--fw-regular);
  font-size:1.6rem;
  line-height:1;
  letter-spacing:var(--ls-wordmark);
  text-indent:var(--ls-wordmark);   /* compensa el tracking del último carácter */
  text-transform:uppercase;
}
.wm-rule{
  width:1px;align-self:stretch;flex:none;
  background:var(--gold-400);
  opacity:.7;
  transition:background var(--dur-slow) var(--ease);
}
.wm-kicker{
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:var(--fw-medium);
  letter-spacing:.36em;
  text-indent:.36em;
  text-transform:uppercase;
  color:var(--text-on-dark-muted);
  transition:color var(--dur-slow) var(--ease);
  white-space:nowrap;
}
.nav-links{display:flex;gap:18px;}
.nav-links a{
  font-size:var(--fs-caption);letter-spacing:var(--ls-button);text-transform:uppercase;white-space:nowrap;
  text-decoration:none;color:var(--bg);
  position:relative;padding:6px 0;
  transition:color .4s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-loc{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,248,242,.72);
  transition:color .4s var(--ease);white-space:nowrap;
}
.btn-nav{
  min-height:auto;padding:11px 18px;font-size:12px;
  background:var(--green);color:var(--bg);
  border:1px solid var(--green);border-radius:3px;
}
.btn-nav:hover{background:var(--green-deep);border-color:var(--green-deep);}

/* scrolled state — solid, ink on ivory */
.nav.scrolled{background:rgba(251,248,242,.9);border-bottom-color:var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.nav.scrolled .wordmark,.nav.scrolled .nav-links a,.nav.scrolled .nav-loc{color:var(--ink);}
.nav.scrolled .wm-kicker{color:var(--muted);}
.nav.scrolled .wm-rule{background:var(--gold-600);}
.nav.scrolled .btn-nav{background:var(--green);color:var(--bg);border-color:var(--green);}
.nav.scrolled .btn-nav:hover{background:var(--green-deep);border-color:var(--green-deep);}

/* menu-open — force ink over the ivory overlay */
body.menu-open .nav{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}
body.menu-open .wordmark,body.menu-open .nav .nav-loc{color:var(--ink);}
body.menu-open .wm-kicker{color:var(--muted);}
body.menu-open .wm-rule{background:var(--gold-600);}

/* Hamburger */
.hamburger{
  display:none;
  width:46px;height:46px;
  align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:0;
}
.hamburger .bars{position:relative;width:24px;height:12px;}
.hamburger .bars span{
  position:absolute;left:0;height:1.5px;width:100%;background:var(--bg);
  transition:transform .35s var(--ease), opacity .2s var(--ease), background .4s var(--ease);
}
.nav.scrolled .hamburger .bars span,body.menu-open .hamburger .bars span{background:var(--ink);}
.hamburger .bars span:nth-child(1){top:0;}
.hamburger .bars span:nth-child(2){top:5.5px;}
.hamburger .bars span:nth-child(3){top:11px;}
body.menu-open .hamburger .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
body.menu-open .hamburger .bars span:nth-child(2){opacity:0;}
body.menu-open .hamburger .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* Mobile menu overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:88px var(--pad) calc(40px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mobile-menu.open{opacity:1;visibility:visible;transform:none;}
.mm-links{display:flex;flex-direction:column;gap:4px;margin-top:auto;}
.mm-links a{
  font-size:clamp(1.6rem,7vw,2.2rem);
  font-family:var(--serif);
  text-decoration:none;color:var(--ink);
  padding:10px 0;border-bottom:1px solid var(--line);
}
.mm-foot{margin-top:32px;margin-bottom:auto;display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.mm-foot .btn{width:100%;}
.mm-loc{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--green-900);
}
.hero-media{position:absolute;inset:0;}
.hero-img{transform-origin:60% 40%;will-change:transform;}
.hero-scrim{
  position:absolute;inset:0;
  background:var(--overlay-scrim);
}
/* En móvil el titular ocupa casi toda la altura del hero y el degradado del
   sistema (pensado para texto abajo) no lo protege: se refuerza el velo. */
@media(max-width:900px){
  .hero-scrim{
    background:linear-gradient(to top,
      rgba(22,38,30,.88) 0%,
      rgba(22,38,30,.70) 45%,
      rgba(22,38,30,.52) 100%);
  }
}
.hero-content{
  position:relative;z-index:3;
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
  padding-bottom:clamp(56px, 10vh, 120px);
  color:var(--bg);
}
.hero .overline{color:rgba(251,248,242,.82);}
.hero .overline .ov-line{background:rgba(251,248,242,.6);}
.hero h1{color:var(--bg);max-width:16ch;}
.hero h1 em{color:var(--bg);}
.hero-sub{
  margin-top:26px;max-width:46ch;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:rgba(251,248,242,.9);
}
.chips{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:24px 0 0;padding:0;
}
.chips li{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 14px;border:1px solid rgba(251,248,242,.30);border-radius:var(--radius-xs);
  color:rgba(251,248,242,.9);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;}

/* ---------- Concept ---------- */
.concept-grid{
  display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,72px);
  align-items:center;
}
@media(min-width:900px){.concept-grid{grid-template-columns:1.05fr .95fr;}}
.concept-copy .lead{margin-top:26px;}
.stat-row{
  list-style:none;padding:24px 0 0;margin:26px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}

/* ---------- Building / units ---------- */
.unit{
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);
  align-items:center;
  padding-block:clamp(40px,6vh,80px);
  border-top:1px solid var(--line);
}
.unit:first-of-type{border-top:none;}
@media(min-width:900px){
  .unit{grid-template-columns:1.05fr .95fr;}
  .unit:nth-child(even) .unit-media{order:2;}
}
.unit-body h3{margin-bottom:14px;}
.unit-line{color:var(--muted);font-size:1.1rem;max-width:42ch;}
.features{
  list-style:none;padding:22px 0 0;margin:22px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;
  color:var(--muted);font-size:14px;
}
.features li{position:relative;padding-left:18px;}
.features li::before{content:"+";position:absolute;left:0;top:0;color:var(--accent);}
.building-foot{
  margin-top:44px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}

/* ---------- The Space / Gallery ---------- */
.filters{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:36px 0 40px;
}
.filter{
  background:none;border:1px solid var(--line);border-radius:var(--radius-xs);
  padding:9px 18px;min-height:40px;cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.filter:hover{color:var(--ink);border-color:var(--ink);}
.filter[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--bg);}

.gallery{column-count:1;column-gap:16px;}
@media(min-width:640px){.gallery{column-count:2;}}
@media(min-width:900px){.gallery{column-count:3;}}
.gitem{
  display:block;width:100%;margin:0 0 16px;padding:0;
  border:1px solid var(--line);background:var(--card);
  border-radius:2px;overflow:hidden;cursor:pointer;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  position:relative;aspect-ratio:var(--ar,16/10);
  transition:border-color .3s var(--ease);
}
.gitem:hover{border-color:var(--stone-400);}
.gitem[hidden]{display:none;}

/* ---------- Amenities / services ---------- */
.amenities{
  list-style:none;padding:0;margin:40px 0 0;
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--line);
}
@media(min-width:640px){.amenities{grid-template-columns:1fr 1fr;column-gap:56px;}}
@media(min-width:1000px){.amenities{grid-template-columns:repeat(3,1fr);}}
.amenities li{
  display:flex;align-items:baseline;gap:14px;
  padding:20px 0;border-bottom:1px solid var(--line);
  font-size:1.15rem;
}
.amenities .plus{color:var(--accent);font-size:.95rem;line-height:1;transform:translateY(-1px);}

/* ---------- Location ---------- */
.loc-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px);align-items:start;}
@media(min-width:900px){.loc-grid{grid-template-columns:1.1fr .9fr;}}
.map-link{
  display:inline-flex;align-items:center;gap:.5em;margin-top:18px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.map-link:hover{border-color:var(--accent);color:var(--ink);}
.loc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;}
.loc-tile-fig{margin:0;}
.loc-tile{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line);border-radius:2px;background:var(--card);
}
.loc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.loc-tile-label{
  margin-top:10px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:center;
}
.nearby{list-style:none;padding:0;margin:0;}
.nearby li{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.nearby li:first-child{border-top:1px solid var(--line);}
.nearby .place{font-size:1.05rem;}
.nearby .val{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}

/* ---------- Who is it for ---------- */
.who-grid{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line);
}
@media(min-width:640px){.who-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.who-grid{grid-template-columns:repeat(4,1fr);}}
.who{
  padding:36px 0;border-bottom:1px solid var(--line);
}
@media(min-width:640px){
  .who{padding:40px 32px 40px 0;border-right:1px solid var(--line);}
  .who:nth-child(2n){padding-right:0;border-right:none;padding-left:32px;}
}
@media(min-width:1000px){
  .who{padding:8px 32px;border-right:1px solid var(--line);border-bottom:none;}
  .who:nth-child(2n){padding:8px 32px;border-right:1px solid var(--line);}
  .who:first-child{padding-left:0;}
  .who:last-child{border-right:none;padding-right:0;}
}
.who h3{margin-bottom:12px;}
.who p{color:var(--muted);}

/* ---------- Experience ---------- */
.exp-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,72px);align-items:center;}
@media(min-width:900px){.exp-grid{grid-template-columns:.9fr 1.1fr;}}
.exp-list{list-style:none;padding:0;margin:30px 0 0;}
.exp-list li{
  font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;
  padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink);
}
.exp-list li:last-child{border-bottom:none;}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin-top:44px;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 0;text-align:left;
  font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.55rem);color:var(--ink);
}
.faq-icon{position:relative;width:16px;height:16px;flex:0 0 auto;}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;background:var(--accent);transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.faq-icon::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%);}
.faq-icon::after{left:50%;top:0;height:100%;width:1.5px;transform:translateX(-50%);}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:translateX(-50%) scaleY(0);opacity:0;}
.faq-panel{overflow:hidden;height:0;}
.faq-panel-inner{padding:0 0 28px;color:var(--muted);max-width:62ch;font-size:1.05rem;}

/* ---------- Contact / Form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,72px);align-items:start;}
@media(min-width:900px){.contact-grid{grid-template-columns:.85fr 1.15fr;}}
.contact-list{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-direction:column;gap:22px;}
.contact-list .lbl{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.contact-list a{
  color:var(--ink);text-decoration:none;font-size:1.1rem;
  border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.contact-list a:hover{border-color:var(--accent);color:var(--accent);}
.contact-list .addr{font-size:1.05rem;color:var(--ink);}
.form{margin-top:8px;}
.field-row{display:grid;grid-template-columns:1fr;gap:22px 28px;}
@media(min-width:640px){.field-row.two{grid-template-columns:1fr 1fr;}}
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:22px;}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--card);
  border:1px solid var(--line);border-radius:3px;
  padding:14px 15px;min-height:48px;width:100%;
  transition:border-color .3s var(--ease);
}
.field textarea{min-height:130px;resize:vertical;line-height:1.55;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--stone-400);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);}
.form .btn-primary{margin-top:8px;}
.form-privacy{margin-top:18px;font-size:12.5px;color:var(--muted);max-width:52ch;}
.form-privacy a{color:var(--accent);text-underline-offset:3px;}
/* Consentimiento RGPD */
.field-consent{flex-direction:row;align-items:flex-start;gap:11px;margin-bottom:6px;}
.field-consent input[type=checkbox]{
  width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--green);
  border:1px solid var(--line);border-radius:2px;
}
.field-consent label{
  font-size:13px;letter-spacing:normal;text-transform:none;line-height:1.55;
  color:var(--muted);max-width:52ch;
}
.field-consent label a{color:var(--accent);text-underline-offset:3px;}
/* Errores de validación */
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#9B3A2E;}
.field-error{display:none;font-size:12.5px;color:#9B3A2E;letter-spacing:normal;text-transform:none;}
.field.invalid .field-error{display:block;}
.form-error{
  display:none;margin-top:16px;font-size:13px;color:#9B3A2E;line-height:1.6;
  border-left:2px solid #9B3A2E;padding-left:14px;
}
.form-error.show{display:block;}
/* Honeypot antispam: oculto para personas, visible para bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-thanks{
  display:none;
  border:1px solid var(--line);border-radius:3px;background:var(--card);
  padding:40px;font-family:var(--serif);font-size:1.6rem;line-height:1.25;color:var(--ink);
}
.form-thanks.show{display:block;}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--bg);padding-block:clamp(64px,9vh,120px);}
.footer a{color:rgba(251,248,242,.78);text-decoration:none;transition:color .3s var(--ease);}
.footer a:hover{color:var(--bg);}
.footer-top{
  display:grid;grid-template-columns:1fr;gap:44px;
  padding-bottom:56px;border-bottom:1px solid rgba(251,248,242,.14);
}
@media(min-width:900px){.footer-top{grid-template-columns:1.3fr 1fr 1fr;}}
.footer .wordmark{color:var(--bg);}
.footer .wm-name{font-size:2.4rem;}
.footer .wm-kicker{font-size:11.5px;color:var(--text-on-dark-muted);}
/* El wordmark del pie, con tracking .34em, desbordaba la rejilla en móvil. */
.footer-top > *{min-width:0;}
.footer .wordmark{flex-wrap:wrap;max-width:100%;}
@media(max-width:640px){
  .footer .wm-name{font-size:1.9rem;}
}
.footer-brand p{margin-top:16px;color:rgba(251,248,242,.7);max-width:34ch;}
.footer-col h4{
  font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,248,242,.5);margin:0 0 18px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center;
  padding-top:32px;
  font-size:12.5px;letter-spacing:.04em;color:rgba(251,248,242,.55);
}
.footer-bottom .legal{display:flex;flex-wrap:wrap;gap:22px;align-items:center;}

/* ---------- Mobile sticky CTA ---------- */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:180;
  display:none;
}
.sticky-cta{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:.6em;
  height:calc(56px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--ink);color:var(--bg);text-decoration:none;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  border-top:1px solid rgba(251,248,242,.12);
}
.sticky-cta .arrow{font-size:1.1em;}
.sticky-call{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:64px;
  height:calc(56px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--green);color:var(--bg);
  border-top:1px solid rgba(251,248,242,.12);
  border-left:1px solid rgba(251,248,242,.18);
}
.sticky-call:hover{background:var(--green-deep);}
@media(max-width:900px){
  .sticky-bar{display:flex;}
  body{padding-bottom:56px;}
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(22,38,30,.94);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.lightbox.open{opacity:1;visibility:visible;}
.lb-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:100%;}
.lb-img{
  display:block;
  max-width:min(92vw,1100px);max-height:78vh;
  width:auto;height:auto;
  border:1px solid var(--line-on-dark);border-radius:var(--radius-xs);
  background:var(--card);
  transition:opacity .25s var(--ease);
}
.lb-caption{color:rgba(251,248,242,.8);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;text-align:center;max-width:60ch;}
.lb-btn{
  position:absolute;z-index:2;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(251,248,242,.08);border:1px solid rgba(251,248,242,.25);
  color:var(--bg);cursor:pointer;font-size:26px;line-height:1;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.lb-btn:hover{background:rgba(251,248,242,.18);border-color:rgba(251,248,242,.5);}
.lb-close{top:clamp(16px,4vw,40px);right:clamp(16px,4vw,40px);font-size:22px;}
.lb-prev{left:clamp(10px,3vw,32px);top:50%;transform:translateY(-50%);}
.lb-next{right:clamp(10px,3vw,32px);top:50%;transform:translateY(-50%);}
@media(max-width:640px){
  .lb-prev{left:12px;}.lb-next{right:12px;}
  .lb-btn{width:46px;height:46px;}
}

/* ============================================================
   MOTION — only when the user allows it
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .js .reveal.in-view{opacity:1;transform:none;}
  .js .stagger > *{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .js .stagger.in-view > *{opacity:1;transform:none;}
  .js .stagger.in-view > *:nth-child(1){transition-delay:0s;}
  .js .stagger.in-view > *:nth-child(2){transition-delay:.08s;}
  .js .stagger.in-view > *:nth-child(3){transition-delay:.16s;}
  .js .stagger.in-view > *:nth-child(4){transition-delay:.24s;}
  .js .stagger.in-view > *:nth-child(5){transition-delay:.32s;}
  .js .stagger.in-view > *:nth-child(6){transition-delay:.40s;}
  .js .stagger.in-view > *:nth-child(7){transition-delay:.48s;}
  .js .stagger.in-view > *:nth-child(8){transition-delay:.56s;}

  .hero-img{animation:kenburns 20s ease-in-out infinite alternate;}
  @keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.08);}}

  .js .hero-content > *{opacity:0;animation:heroIn 1s var(--ease) forwards;}
  .js .hero-content > *:nth-child(1){animation-delay:.15s;}
  .js .hero-content > *:nth-child(2){animation-delay:.28s;}
  .js .hero-content > *:nth-child(3){animation-delay:.41s;}
  .js .hero-content > *:nth-child(4){animation-delay:.54s;}
  .js .hero-content > *:nth-child(5){animation-delay:.67s;}
  @keyframes heroIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

  .slot img,.gitem img,.loc-tile img{transition:transform 1s var(--ease);}
  .hoverable:hover img{transform:scale(1.04);}

  .faq-panel{transition:height .4s var(--ease);}
  .sticky-bar{transition:transform .4s var(--ease);}
  .sticky-bar.hide{transform:translateY(110%);}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .sticky-bar.hide{display:none;}
}

/* ---------- Responsive nav ---------- */
/* "Madrid · Barajas" es decorativo: cae antes que nada para dar aire. */
@media(max-width:1500px){
  .nav-loc{display:none;}
}
@media(max-width:1240px){
  /* El manual permite "BUCHI" solo a partir de la primera mención: cuando el
     nav se estrecha, cae el descriptor antes que cualquier enlace útil. */
  .nav .wm-kicker,.nav .wm-rule{display:none;}
  .nav-links{gap:16px;}
  .nav-right{gap:12px;}
}
@media(max-width:1080px){
  .nav-links,.nav-loc,.btn-nav,.nav .lang{display:none;}
  .hamburger{display:inline-flex;}
}

/* ============================================================
   Selector de idioma — pestaña desplegable con bandera
   ============================================================ */
.flag{
  width:20px;height:13px;flex:none;
  border-radius:1px;
  box-shadow:0 0 0 1px rgba(22,38,30,.18);
}
.lang{position:relative;}
.lang-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;
  background:none;cursor:pointer;
  border:1px solid var(--line-on-dark);
  border-radius:var(--radius-xs);
  color:var(--text-on-dark-muted);
  font-family:var(--sans);
  font-size:var(--fs-caption);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-button);
  text-transform:uppercase;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lang-btn:hover{color:var(--bg);border-color:var(--gold-400);}
.lang-chev{
  width:7px;height:7px;flex:none;margin-left:1px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur-base) var(--ease);
}
.lang-btn[aria-expanded="true"] .lang-chev{transform:rotate(225deg) translate(-2px,-2px);}

.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  min-width:184px;margin:0;padding:6px;
  list-style:none;
  background:var(--surface-raised);
  border:var(--border-soft);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}
.lang-menu[hidden]{display:none;}
.lang-menu a{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;
  color:var(--ink);
  font-size:var(--fs-body-sm);
  text-decoration:none;border:0;
  border-radius:var(--radius-xs);
  transition:background var(--dur-fast) var(--ease);
}
.lang-menu a:hover{background:var(--surface-muted);}
.lang-menu a[aria-current="true"]{color:var(--accent);font-weight:var(--fw-medium);}

/* Sobre marfil, el botón cambia de tono */
.nav.scrolled .lang-btn{color:var(--muted);border-color:var(--line);}
.nav.scrolled .lang-btn:hover{color:var(--ink);border-color:var(--accent);}
body.menu-open .nav .lang{opacity:0;pointer-events:none;}
body.menu-open .sticky-bar{display:none !important;}

/* En el menú móvil, lista con bandera */
.mm-lang{
  display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;
  width:100%;
  margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line);
}
.mm-lang a{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;
  color:var(--muted);text-decoration:none;
  font-family:var(--sans);
  font-size:var(--fs-body-sm);
  letter-spacing:var(--ls-caption);
}
.mm-lang a[aria-current="true"]{color:var(--accent);font-weight:var(--fw-medium);}

/* Aviso de idioma sugerido — aparece una sola vez, no redirige nunca */
.lang-hint{
  position:fixed;left:50%;transform:translateX(-50%) translateY(16px);
  bottom:22px;z-index:200;
  display:none;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:min(560px,calc(100vw - 32px));
  padding:14px 20px;
  background:var(--surface-dark);
  color:var(--text-on-dark);
  border:var(--border-on-dark);
  border-radius:var(--radius-xs);
  box-shadow:var(--shadow-md);
  font-size:var(--fs-body-sm);
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.lang-hint.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0);}
.lang-hint a{
  color:var(--text-on-dark-accent);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-button);
  text-transform:uppercase;
  font-size:var(--fs-button);
  text-decoration:none;
  border-bottom:1px solid var(--line-gold);
  white-space:nowrap;
}
.lang-hint button{
  background:none;border:0;cursor:pointer;
  color:var(--text-on-dark-muted);
  font-family:var(--sans);font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption);
  padding:4px;
}
.lang-hint button:hover{color:var(--text-on-dark);}
@media(max-width:640px){
  .lang-hint{bottom:auto;top:78px;}
}

/* ============================================================
   Bloque de estancias individuales (posicionamiento secundario)
   ============================================================ */
.stays{
  margin-top:56px;
  display:grid;grid-template-columns:1fr;gap:28px;
}
@media(min-width:860px){.stays{grid-template-columns:1fr 1fr;gap:40px;}}
.stay{
  padding:34px 32px;
  background:var(--surface-raised);
  border:var(--border-soft);
  border-radius:var(--radius-md);
}
.stay.is-primary{border-top:2px solid var(--line-gold);}
.stay h3{margin-bottom:12px;}
.stay p{color:var(--muted);max-width:46ch;}
.stay .stay-list{
  list-style:none;margin:20px 0 26px;padding:0;
  display:flex;flex-direction:column;gap:10px;
  font-size:var(--fs-body-sm);color:var(--muted);
}
.stay .stay-list li{padding-left:18px;position:relative;}
.stay .stay-list li::before{
  content:"";position:absolute;left:0;top:.68em;
  width:8px;height:1px;background:var(--line-gold);
}
.stay .btn{margin-top:4px;}

/* ============================================================
   Vídeo — recorridos verticales, grabados con el móvil.
   Sin autoplay: 30 s con sonido saltando solo sería intrusivo, y
   el sistema de marca prohíbe el movimiento agresivo.
   ============================================================ */
.videos{
  margin-top:52px;
  display:grid;grid-template-columns:1fr;gap:22px;
}
@media(min-width:700px){.videos{grid-template-columns:repeat(3,1fr);gap:26px;}}
.video-item{margin:0;}
.video-item video{
  width:100%;
  aspect-ratio:9/16;
  display:block;
  background:var(--green-900);
  border:var(--border-soft);
  border-radius:var(--radius-md);
  object-fit:cover;
}
.video-item figcaption{
  margin-top:12px;
  font-size:var(--fs-caption);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--muted);
}