/* Archivo Variable (SIL Open Font License), self-hosted so the page has no external dependency. */
@font-face{
  font-family:'Archivo Variable';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  font-stretch:62% 125%;
  src:url('../fonts/archivo-var.woff2') format('woff2-variations');
}

:root{
  color-scheme: light;
  /* Brand orange is a FILL colour. At 2.5:1 against these light grounds it fails
     WCAG as text, so text and focus rings use the deepened ramp below instead.
     The fill itself never changes, in either theme. */
  --orange:#FD5F04;
  --orange-2:#FF8434;         /* only ever used over the dark photo scrims */
  --orange-ink:#A83B00;       /* text under 24px on a light ground: 5.3:1 */
  --orange-display:#C24500;   /* display-scale text and focus rings: 4.5:1 */
  --orange-display-2:#E85A0A; /* lighter half of the two-tone wordmark: 3.2:1 */
  --on-orange:#FFFFFF;        /* display-scale type on orange only: 3.08:1, AA large */
  --on-orange-ink:#280E00;    /* everything under 24px on orange: 6.7:1, AA body */
  --bg:#F7F5F2;
  --bg-2:#ECE7E1;
  --ink:#14110F;
  --ink-2:#5C544D;
  --line:rgba(20,17,15,.15);
  --scrim:rgba(8,7,6,.62);
  --shadow:0 24px 60px rgba(20,17,15,.14);
  --band:#14110F;              /* statement band: inverts on light, lifts on dark */
  --band-ink:#F4F0EB;
  --band-ink-2:#A9A099;
  --nav-h:68px;
  --pad:clamp(20px,5vw,72px);
  --maxw:1400px;
}
/* La portada y las paginas legales se comprometen a tema claro. No siguen la
   preferencia del sistema: la marca debe verse igual para todos, y de otro modo
   la mitad de la gente veria una version y la mitad otra.
   Las paginas de lugar son la excepcion y llevan su propio tema oscuro, mas
   abajo en el bloque PAGINAS DE LUGAR. */


*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
/* the nav is sticky, so anchor targets must clear it when jumped to */
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
:where(a,button,summary,[role="button"]){
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(253,95,4,.22);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo Variable','Archivo',system-ui,-apple-system,'Segoe UI Variable','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:where(a,button,summary):focus-visible{
  outline:3px solid var(--orange-display);
  outline-offset:3px;
  border-radius:2px;
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--orange);color:var(--on-orange-ink);
  padding:10px 18px;border-radius:999px;font-weight:700;text-decoration:none;
  transition:top .18s ease;
}
.skip:focus{top:12px}

/* ---------- type ---------- */
.display{
  font-weight:900;
  font-stretch:112%;
  line-height:.88;
  letter-spacing:-.028em;
  text-wrap:balance;
  margin:0;
}
.h2{font-size:clamp(2.5rem,6.2vw,5.6rem)}
.lede{
  font-size:clamp(1.05rem,1.5vw,1.32rem);
  line-height:1.5;color:var(--ink-2);
  max-width:60ch;margin:0;
  text-wrap:pretty;
}
.eyebrow{
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;color:var(--orange-ink);margin:0 0 1.1rem;
}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);width:100%}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;flex-shrink:0}
.nav-logo img{width:38px;height:39px}
.nav-logo b{font-weight:900;font-stretch:112%;letter-spacing:-.02em;font-size:1.02rem;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-links a{
  text-decoration:none;font-weight:600;font-size:.94rem;white-space:nowrap;
  color:var(--ink-2);transition:color .18s ease;
}
.nav-links a:hover{color:var(--ink)}

/* Mobile menu: a native <details> disclosure, so it is keyboard accessible
   and works with no JavaScript. */
.nav-menu{display:none;margin-left:auto;position:relative}
.nav-menu summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.5em;
  font-weight:700;font-size:.95rem;
  padding:.55em 1.05em;border:1px solid var(--line);border-radius:999px;
}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary .bars{display:grid;gap:3px}
.nav-menu summary .bars i{display:block;width:15px;height:2px;background:currentColor;border-radius:2px}
.nav-menu[open] summary{border-color:var(--orange-display);color:var(--orange-ink)}
.nav-panel{
  position:absolute;right:0;top:calc(100% + 12px);z-index:60;
  min-width:min(66vw,230px);
  display:grid;
  background:var(--bg);border:1px solid var(--line);
  box-shadow:var(--shadow);
  overscroll-behavior:contain;
}
.nav-panel a{
  padding:.9em 1.15em;text-decoration:none;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.nav-panel a:last-child{border-bottom:0}
.nav-panel a:hover{background:var(--bg-2);color:var(--orange-ink)}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-menu{display:block}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.92em 1.6em;border-radius:999px;
  font-weight:800;font-size:1rem;white-space:nowrap;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .16s cubic-bezier(.16,1,.3,1),background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--orange);color:var(--on-orange-ink)}
.btn-primary:hover{background:#FF7526;transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0) scale(.985)}
.arrow{font-weight:700}

/* ---------- hero ----------
   Una sola fotografia a sangre con el texto encima. La imagen es una superficie
   de medio, no un cambio de tema: el hero se mantiene claro sobre oscuro en
   ambos temas, igual que la banda de vision. Por eso los colores van fijos y no
   por token, que aqui invertirian el texto y lo volverian ilegible.            */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:calc(100dvh - var(--nav-h));
  display:flex;align-items:center;
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,
    rgba(6,6,7,.95) 0%,
    rgba(6,6,7,.88) 36%,
    rgba(6,6,7,.62) 70%,
    rgba(6,6,7,.46) 100%);
}
.hero-copy{padding-block:clamp(48px,9vh,120px);width:100%}
.hero-word{display:block}
.hero h1{font-size:clamp(3.6rem,11.5vw,9.6rem)}
.hero .w1{color:#B7B1AA} /* aclarado desde #A9A29B: sobre la bandera amarilla de la foto daba 2.93:1, debajo del minimo de 3 */
.hero .w2{color:#F7F5F2}
.hero .lede{color:rgba(247,245,242,.9);max-width:34ch}
.hero p{margin:clamp(20px,3vh,32px) 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(22px,3.4vh,36px)}

@media (max-width:760px){
  /* En movil el texto ocupa todo el ancho, asi que se ancla abajo y el velo
     pasa de horizontal a vertical: la fotografia respira en la mitad superior
     y la tipografia se apoya en la parte firme. */
  .hero{align-items:flex-end}
  .hero::after{
    background:linear-gradient(178deg,
      rgba(6,6,7,.22) 0%,
      rgba(6,6,7,.52) 34%,
      rgba(6,6,7,.9) 70%,
      rgba(6,6,7,.97) 100%);
  }
  .hero-bg{object-position:center 34%}
  .hero-copy{padding-block:clamp(38px,7vh,64px)}
  .hero .lede{max-width:none}
}

/* ---------- purpose (orange block) ---------- */
.purpose{background:var(--band);color:var(--band-ink);padding:clamp(64px,10vh,140px) 0}
.purpose .wrap{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,60px)}
.purpose-grid{display:grid;grid-template-columns:1.06fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.purpose blockquote{
  margin:0;font-weight:900;font-stretch:112%;letter-spacing:-.026em;line-height:1.04;
  font-size:clamp(1.55rem,2.85vw,2.6rem);text-wrap:balance;
  /* the orange rule beside a quote is lifted straight from their own
     Filosofia Corporativa document, where orange is only ever a marker */
  border-left:6px solid var(--orange);
  padding-left:clamp(18px,2.2vw,32px);
}
.purpose .body{font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.62;color:var(--band-ink-2);text-wrap:pretty}
.purpose .body p{margin:0 0 1.05em}
.purpose .body p:last-child{margin-bottom:0}
.split-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,48px);margin-top:clamp(30px,4vw,50px)}
.split-cols h3{font-size:1.06rem;font-weight:800;margin:0 0 .85rem;letter-spacing:-.01em;color:var(--band-ink)}
.split-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.split-cols li{display:flex;gap:.6em;line-height:1.5;font-size:.99rem;color:var(--band-ink-2)}
.split-cols li .arrow{flex-shrink:0;color:var(--orange-2)}
@media (max-width:840px){ .purpose-grid,.split-cols{grid-template-columns:1fr} }

/* ---------- concepts (4-cell bento) ---------- */
.concepts{padding:clamp(70px,11vh,150px) 0}
.concepts-head{max-width:var(--maxw);margin:0 auto clamp(34px,5vw,60px);padding-inline:var(--pad)}
.concepts-head p{margin-top:1.1rem}
.bento{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.5vw,20px);
}
.tile{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(360px,48vh,520px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,2.6vw,40px);
  color:#F7F5F2;text-decoration:none;
  background:#111;
}
.tile:nth-child(1){grid-column:span 7}
.tile:nth-child(2){grid-column:span 5}
.tile:nth-child(3){grid-column:span 5}
.tile:nth-child(4){grid-column:span 7}
.tile img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
/* Darkened at the top (logo sits there) and at the bottom (copy sits there),
   left open through the middle so the photograph still reads. */
.tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,
    rgba(8,7,6,.62) 0%,
    rgba(8,7,6,.24) 26%,
    rgba(8,7,6,.55) 58%,
    rgba(8,7,6,.93) 100%);
}
/* Safaera has not opened, so the only photograph that exists is a daytime facade.
   Rather than let a flat grey shot sit beside three rooms full of people, it is
   pushed almost to black and read as a teaser: the mark and the status carry it. */
.tile-bright::after{
  background:linear-gradient(178deg,
    rgba(8,7,6,.9) 0%,
    rgba(8,7,6,.76) 30%,
    rgba(8,7,6,.86) 62%,
    rgba(8,7,6,.97) 100%);
}
.tile-bright img.bg{filter:grayscale(.55) contrast(1.15)}
.tile-bright .tile-logo{
  height:clamp(66px,7vw,102px);
  filter:drop-shadow(0 0 26px rgba(253,95,4,.5)) drop-shadow(0 2px 10px rgba(0,0,0,.9));
}
.tile:hover img.bg{transform:scale(1.055)}
/* Logos differ wildly in aspect ratio (wide wordmarks vs square marks), so they
   are normalised into one box and contained, not scaled by a single dimension. */
.tile-logo{
  width:clamp(112px,13vw,182px);height:clamp(52px,5.4vw,74px);
  object-fit:contain;object-position:left center;
  align-self:flex-start;margin-bottom:auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.85));
}
.tile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .85rem;margin:0 0 .6rem}
.tile-kind{
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.19em;
  color:var(--orange-2);margin:0;
}
.tile h3{font-size:clamp(1.6rem,2.6vw,2.5rem);margin:0 0 .55rem;font-weight:900;font-stretch:112%;letter-spacing:-.024em;line-height:1}
.tile p{margin:0;font-size:.99rem;line-height:1.5;color:rgba(247,245,242,.87);max-width:46ch;text-wrap:pretty}
.tile .addr{margin-top:.9rem;font-size:.86rem;color:rgba(247,245,242,.66);line-height:1.45}
.tile .soon{
  display:inline-block;margin:0;
  background:var(--orange);color:var(--on-orange-ink);
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  padding:.42em .9em;border-radius:999px;
}
@media (max-width:900px){
  .tile:nth-child(n){grid-column:span 12}
  .tile{min-height:clamp(330px,52vh,430px)}
}

/* ---------- values ---------- */
.values{background:var(--bg-2);padding:clamp(70px,11vh,150px) 0}
/* the ch cap belongs on the body copy, not on the wrapper: a ch on the wrapper is
   measured at body size and would wrap the display headline far too early */
.values-head{max-width:min(100%,52rem)}
.values-head p{margin-top:1.1rem}
.vgrid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(34px,4.6vw,72px) clamp(30px,5vw,90px);
  margin-top:clamp(44px,6vw,80px);
}
.vitem{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,26px);align-items:start;
  border-left:4px solid var(--orange);padding-left:clamp(14px,1.8vw,22px)}
.vnum{
  font-size:clamp(1.5rem,2.2vw,2rem);font-weight:900;font-stretch:112%;
  line-height:1;color:var(--orange-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.05em;
}
.vitem h3{font-size:clamp(1.15rem,1.7vw,1.5rem);margin:0 0 .5rem;font-weight:800;letter-spacing:-.018em;line-height:1.15}
.vitem p{margin:0;color:var(--ink-2);line-height:1.55;font-size:1rem;max-width:40ch;text-wrap:pretty}
@media (max-width:780px){ .vgrid{grid-template-columns:1fr} }

/* ---------- vision (full bleed) ---------- */
.vision{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(84vh,720px);display:flex;align-items:center;
  padding:clamp(70px,12vh,140px) 0;color:#F7F5F2;
}
.vision img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vision::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* the crowd shot carries bright sparklers that punched through the old scrim and
     dropped the orange 2030 to 2.5:1, so the copy side is held much darker */
  background:linear-gradient(96deg,rgba(8,7,6,.965) 0%,rgba(8,7,6,.93) 34%,rgba(8,7,6,.72) 66%,rgba(8,7,6,.44) 100%);
}
.vision blockquote{
  margin:0;max-width:19ch;
  font-size:clamp(2.4rem,6.4vw,5.8rem);
  font-weight:900;font-stretch:112%;line-height:.94;letter-spacing:-.03em;text-wrap:balance;
}
.vision .year{color:var(--orange-2)}
.vision p{margin:clamp(22px,3vw,34px) 0 0;max-width:52ch;font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.6;color:rgba(247,245,242,.86);text-wrap:pretty}

/* ---------- crecimiento (closing statement) ---------- */
.crecimiento{background:var(--bg-2);padding:clamp(72px,12vh,150px) 0}
.crecimiento .wrap{
  max-width:min(100%,62rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(20px,3vw,30px);
}
.crecimiento .mark{width:clamp(60px,7vw,86px);height:auto}
.crecimiento h2{font-size:clamp(2.1rem,5vw,4.2rem)}
.crecimiento p{
  margin:0;max-width:56ch;
  font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;
  color:var(--ink-2);text-wrap:pretty;
}
.crecimiento .gracias{
  margin-top:clamp(6px,1.4vw,14px);
  font-size:clamp(1.35rem,2.7vw,2.2rem);
  font-weight:900;font-stretch:110%;letter-spacing:-.024em;line-height:1.1;
  color:var(--orange-display);max-width:22ch;text-wrap:balance;
}

/* ---------- contacto ---------- */
.contacto{background:var(--bg-2);padding:clamp(70px,11vh,140px) 0}
.contacto-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.contacto h2{margin-bottom:1.1rem}
.contact-card{background:var(--bg);padding:clamp(26px,3vw,42px);border:1px solid var(--line)}
.contact-card dl{margin:0;display:grid;gap:1.35rem}
.contact-card dt{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-2);margin-bottom:.3rem}
.contact-card dd{margin:0;font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
.contact-card dd small{display:block;font-weight:500;font-size:.9rem;color:var(--ink-2);margin-top:.25rem;letter-spacing:0}
.pending{color:var(--orange-ink);font-weight:800}
@media (max-width:860px){ .contacto-grid{grid-template-columns:1fr} }

/* ---------- footer ---------- */
footer.site{padding:clamp(46px,6vw,72px) 0 calc(clamp(30px,4vw,48px) + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand img{width:52px;height:54px}
.foot-brand b{display:block;font-weight:900;font-stretch:112%;letter-spacing:-.02em;font-size:1.06rem}
.foot-brand span{font-size:.9rem;color:var(--ink-2)}
.foot-venues{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.9rem;color:var(--ink-2);font-weight:600}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion: no-preference){
  .reveal{transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .tile:hover img.bg{transform:none}
}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--band);color:var(--band-ink);
  border-top:4px solid var(--orange);
  padding:clamp(18px,2.4vw,26px) var(--pad);
  padding-bottom:calc(clamp(18px,2.4vw,26px) + env(safe-area-inset-bottom));
  box-shadow:0 -18px 44px rgba(0,0,0,.34);
}
.cookie-in{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,32px);
}
.cookie p{
  margin:0;flex:1 1 min(100%,42rem);
  font-size:.96rem;line-height:1.55;color:var(--band-ink-2);text-wrap:pretty;
}
.cookie p a{color:var(--band-ink);text-underline-offset:3px}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie .btn{font-size:.94rem;padding:.72em 1.35em}
.btn-quiet{
  background:transparent;color:var(--band-ink);
  border-color:rgba(244,240,235,.32);
}
.btn-quiet:hover{border-color:var(--band-ink);transform:translateY(-2px)}
.btn-quiet:active{transform:translateY(0) scale(.985)}
@media (max-width:620px){
  .cookie-actions{width:100%}
  .cookie-actions .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- legal / 404 pages ---------- */
.page{padding:clamp(52px,9vh,110px) 0 clamp(64px,10vh,130px)}
.page .wrap{max-width:min(100%,58rem)}
.page h1{font-size:clamp(2.2rem,5.4vw,4.2rem);margin:0 0 .6rem}
.page .updated{
  margin:0 0 clamp(30px,4vw,48px);
  font-size:.9rem;color:var(--ink-2);
  border-left:4px solid var(--orange);padding-left:14px;
}
.page h2{
  font-size:clamp(1.2rem,1.9vw,1.55rem);font-weight:800;letter-spacing:-.018em;
  margin:clamp(34px,4vw,52px) 0 .8rem;line-height:1.25;
}
.page h3{font-size:1.02rem;font-weight:800;margin:1.6rem 0 .5rem}
.page p,.page li{color:var(--ink-2);line-height:1.65;font-size:1rem;max-width:68ch;text-wrap:pretty}
.page p{margin:0 0 1rem}
.page ul,.page ol{margin:0 0 1.1rem;padding-left:1.3rem;display:grid;gap:.5rem}
.page a{color:var(--ink);text-underline-offset:3px}
.page strong{color:var(--ink)}
.page dl{margin:0 0 1.2rem;display:grid;gap:.7rem}
.page dt{font-weight:800;color:var(--ink);font-size:.95rem}
.page dd{margin:0;color:var(--ink-2);line-height:1.6}

/* Datos que el negocio todavia debe proporcionar. Se marcan a proposito
   para que nadie los pase por alto al publicar. */
.todo{
  background:var(--orange);color:var(--on-orange-ink);
  font-weight:800;padding:.08em .45em;border-radius:3px;
  font-size:.92em;white-space:nowrap;
}

/* ---------- 404 ---------- */
.err{
  min-height:calc(100dvh - var(--nav-h) - 190px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(52px,10vh,120px) 0;
}
.err .code{
  font-size:clamp(4.5rem,15vw,11rem);font-weight:900;font-stretch:112%;
  line-height:.82;letter-spacing:-.04em;color:var(--orange-display);
  font-variant-numeric:tabular-nums;margin:0 0 .3rem;
}
.err h1{font-size:clamp(1.9rem,4.4vw,3.4rem);margin:0 0 1rem}
.err p{max-width:48ch;margin:0 0 clamp(26px,3.4vw,38px)}
.err-links{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- footer additions ---------- */
.foot-legal{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  margin-top:22px;font-size:.88rem;
}
.foot-legal a{color:var(--ink-2);text-decoration:none}
.foot-legal a:hover{color:var(--ink);text-decoration:underline}
.foot-copy{margin-top:14px;font-size:.85rem;color:var(--ink-2)}

.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,32px)}
@media (max-width:520px){ .contact-actions .btn{flex:1 1 auto;justify-content:center} }

/* =================================================================
   PAGINAS DE LUGAR
   Cada lugar se compromete a fondo oscuro: la fotografia es toda de
   interior nocturno y los logotipos son blancos, dorados o de neon,
   asi que un fondo claro los dejaria sin apoyo. Los tokens se
   redefinen sobre <body>, de modo que todo el sistema de la casa
   sigue funcionando sin duplicar una sola regla.
   Los acentos salen de los propios activos de cada marca, no de una
   paleta inventada.
   ================================================================= */
body[class*="v-"]{
  color-scheme:dark;
  --ink:#F4F1EC;
  --ink-2:#ABA49C;
  --line:rgba(244,241,236,.17);
  --on-orange-ink:#0B0A09;
  --band-ink:#F4F1EC;
  --band-ink-2:#ABA49C;
  --shadow:0 24px 60px rgba(0,0,0,.6);
}

/* Not In The Mood: amarillo acido de los smileys, rojo de los laseres */
body.v-mood{
  --bg:#0A0A0B; --bg-2:#15151A; --band:#15151A;
  --orange:#FCFC00; --orange-2:#FFFF4D;
  --orange-ink:#FCFC00; --orange-display:#FCFC00; --orange-display-2:#FF2436;
  --accent-2:#FF2436;
}
/* Canta y No Llores: amarillo y verde */
body.v-canta{
  --bg:#0D0C08; --bg-2:#17160E; --band:#17160E;
  --orange:#F5C518; --orange-2:#FFD95C;
  --orange-ink:#F5C518; --orange-display:#F5C518; --orange-display-2:#3FBF6A;
  --accent-2:#3FBF6A;
}
/* Cantina Del Desierto: madera y laton, muestreados del salon */
body.v-cantina{
  --bg:#120C06; --bg-2:#1E1409; --band:#1E1409;
  --orange:#D19A62; --orange-2:#E8B77F;
  --orange-ink:#D19A62; --orange-display:#D19A62; --orange-display-2:#E8B77F;
  --accent-2:#E8B77F;
}
/* Safaera: negro, blanco y naranja */
body.v-safaera{
  --bg:#0A0908; --bg-2:#151310; --band:#151310;
  --orange:#FC3000; --orange-2:#FF6236;
  --orange-ink:#FF6236; --orange-display:#FC3000; --orange-display-2:#FFFFFF;
  --accent-2:#FFFFFF;
}

/* ---------- portada del lugar ---------- */
.vhero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(88vh,760px);
  display:flex;align-items:flex-end;
  padding:clamp(48px,10vh,110px) 0 clamp(40px,7vh,80px);
}
.vhero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vhero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Claro arriba para que la fotografia se lea, y firme desde la mitad hacia
     abajo, que es donde se posan el logotipo y toda la tipografia. */
  background:linear-gradient(182deg,
    rgba(6,6,7,.52) 0%,
    rgba(6,6,7,.28) 24%,
    rgba(6,6,7,.74) 56%,
    rgba(6,6,7,.93) 84%,
    var(--bg) 100%);
}
.vhero-logo{
  /* La caja es alta a proposito: los logotipos casi cuadrados (Canta, Safaera)
     se limitan por altura y salian mucho mas chicos que los apaisados. */
  width:clamp(160px,26vw,320px);height:clamp(104px,14vw,176px);
  object-fit:contain;object-position:left bottom;
  margin-bottom:clamp(20px,2.6vw,32px);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.9)) drop-shadow(0 6px 28px rgba(0,0,0,.75));
}
.vkind{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:.73rem;font-weight:800;text-transform:uppercase;letter-spacing:.19em;
  color:var(--accent-2);margin:0 0 1rem;
}
.vkind .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.vhero h1{font-size:clamp(2.4rem,6.6vw,5.4rem);margin:0 0 1rem;color:#F7F5F2}
.vhero .lede{color:rgba(247,245,242,.9);max-width:44ch}
.vsoon{
  display:inline-block;margin:0 0 1rem;
  background:var(--orange);color:var(--on-orange-ink);
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  padding:.45em .95em;border-radius:999px;
}

/* ---------- cuerpo del lugar ---------- */
.vsection{padding:clamp(58px,9vh,120px) 0}
.vsection.alt{background:var(--bg-2)}
.vsection h2{font-size:clamp(1.9rem,4.4vw,3.4rem);margin:0 0 1.15rem}
.vlead{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.vlead p{color:var(--ink-2);line-height:1.66;font-size:clamp(1rem,1.3vw,1.13rem);margin:0 0 1.05em;text-wrap:pretty}
.vlead p:last-child{margin-bottom:0}
.vlead .rule{border-left:5px solid var(--accent-2);padding-left:clamp(16px,2vw,26px)}
@media (max-width:840px){ .vlead{grid-template-columns:1fr} }

/* ---------- lista de caracteristicas ---------- */
.vfeat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);margin-top:clamp(34px,4.4vw,58px)}
.vfeat > div{border-top:3px solid var(--orange);padding-top:1.1rem}
.vfeat h3{font-size:1.08rem;font-weight:800;margin:0 0 .45rem;letter-spacing:-.014em}
.vfeat p{margin:0;color:var(--ink-2);line-height:1.55;font-size:.98rem;text-wrap:pretty}
@media (max-width:760px){ .vfeat{grid-template-columns:1fr} }

/* ---------- galeria ---------- */
.vgal{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.3vw,18px);margin-top:clamp(34px,4.4vw,56px);
}
.vgal figure{margin:0;position:relative;overflow:hidden;background:var(--bg-2)}
.vgal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.vgal figure:hover img{transform:scale(1.05)}
.vgal figure:nth-child(1){grid-column:span 4;aspect-ratio:4/3}
.vgal figure:nth-child(2){grid-column:span 2;aspect-ratio:3/4}
.vgal figure:nth-child(3){grid-column:span 2;aspect-ratio:3/4}
.vgal figure:nth-child(4){grid-column:span 2;aspect-ratio:3/4}
.vgal figure:nth-child(5){grid-column:span 2;aspect-ratio:3/4}
@media (max-width:860px){
  .vgal{grid-template-columns:repeat(2,1fr)}
  .vgal figure:nth-child(n){grid-column:span 1;aspect-ratio:3/4}
  .vgal figure:nth-child(1){grid-column:span 2;aspect-ratio:4/3}
}
@media (prefers-reduced-motion: reduce){ .vgal figure:hover img{transform:none} }

/* ---------- datos practicos ---------- */
.vinfo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:start}
.vinfo dl{margin:0;display:grid;gap:1.4rem}
.vinfo dt{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--orange);margin-bottom:.35rem}
.vinfo dd{margin:0;font-size:1.06rem;line-height:1.5;font-weight:600}
.vinfo dd small{display:block;font-weight:400;font-size:.92rem;color:var(--ink-2);margin-top:.3rem}
@media (max-width:760px){ .vinfo{grid-template-columns:1fr} }

/* ---------- pie del lugar, regreso al grupo ---------- */
.vback{
  border-top:1px solid var(--line);
  padding:clamp(40px,6vw,70px) 0;
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
}
.vback-in{display:flex;align-items:center;gap:14px}
.vback img{width:46px;height:48px}
.vback b{display:block;font-weight:900;font-stretch:112%;letter-spacing:-.02em}
.vback span{font-size:.92rem;color:var(--ink-2)}

/* ---------- los tiles de la portada ahora son enlaces ---------- */
a.tile{cursor:pointer}
a.tile h3{transition:color .2s ease}
a.tile:hover h3{color:var(--orange-2)}
.tile-go{
  display:inline-flex;align-items:center;gap:.5em;
  margin-top:1rem;font-weight:800;font-size:.95rem;color:var(--orange-2);
}
a.tile:hover .tile-go .arrow{transform:translateX(4px)}
.tile-go .arrow{transition:transform .2s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion: reduce){ .tile-go .arrow{transition:none} }

/* Safaera todavia no abre y solo existe una foto del inmueble, asi que
   su galeria es una sola imagen a lo ancho en vez de una rejilla coja. */
.vgal.one figure:nth-child(1){grid-column:1 / -1;aspect-ratio:16/9}
.vgal figcaption{
  margin-top:.7rem;font-size:.88rem;color:var(--ink-2);line-height:1.5;
}

/* Los destacados se adaptan a cuantos haya: con dos, dos columnas anchas
   en vez de tres con un hueco al final. En movil siempre una sola, o el
   texto queda en lineas de tres palabras. */
@media (min-width:761px){
  .vfeat:has(> div:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
}

/* =================================================================
   CAPA DE ESTILO DE LAS PAGINAS DE LUGAR
   ================================================================= */

/* Grano fino sobre toda la ventana. Va en un pseudo-elemento fijo y sin
   eventos de puntero: sobre un contenedor con scroll obligaria a repintar
   en cada cuadro y tiraria los fps en movil. */
body::after{
  content:"";position:fixed;inset:0;z-index:70;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce){ body::after{display:none} }
body:not([class*="v-"])::after{opacity:.035}

/* Tira de datos bajo la portada: lo que la gente pregunta antes de ir,
   como banda tipografica en vez de escondido al final de la pagina. */
.vstrip{background:var(--bg-2);border-bottom:1px solid var(--line)}
.vstrip .wrap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(16px,3vw,48px);padding-block:clamp(22px,3vw,34px);
}
.vstrip dt{
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-2);margin:0 0 .4rem;
}
.vstrip dd{
  margin:0;font-weight:900;font-stretch:110%;letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.9vw,1.5rem);line-height:1.15;color:var(--orange-display);
}
@media (max-width:680px){
  .vstrip .wrap{grid-template-columns:1fr;gap:16px}
  .vstrip dd{font-size:1.15rem}
}

/* El titulo de seccion se queda fijo mientras corre el texto de al lado.
   Antes esa columna quedaba vacia media pantalla. */
@media (min-width:841px){
  .vlead{align-items:start}
  .vlead > h2{position:sticky;top:calc(var(--nav-h) + clamp(28px,5vh,64px))}
}

/* Destacados numerados: el numeral da peso a una seccion que antes era
   solo una linea de color y texto chico. */
.vfeat{counter-reset:feat}
.vfeat > div{counter-increment:feat;position:relative}
.vfeat > div::before{
  content:counter(feat,decimal-leading-zero);
  display:block;margin-bottom:.55rem;
  font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:900;font-stretch:112%;
  line-height:1;letter-spacing:-.04em;color:var(--orange);
  font-variant-numeric:tabular-nums;
}

/* Una sola marquesina por pagina, entre el cuerpo y la galeria. Existe
   porque el nombre repetido es lenguaje de antro, no por rellenar. */
.vmarquee{
  overflow:hidden;border-block:1px solid var(--line);
  padding-block:clamp(14px,2vw,22px);background:var(--bg);
  --speed:38s;
}
.vmarquee-track{display:flex;width:max-content;will-change:transform}
.vmarquee span{
  display:inline-block;padding-inline:clamp(18px,2.6vw,40px);
  font-size:clamp(2rem,5.4vw,4.4rem);font-weight:900;font-stretch:118%;
  letter-spacing:-.03em;line-height:1;color:transparent;white-space:nowrap;
  /* Sobre fondo oscuro un trazo fino y gris se lee bien. Sobre el hueso de la
     portada se veia descolorido, asi que ahi va mas grueso y con la tinta
     del texto, no con la del texto secundario. */
  -webkit-text-stroke:2.5px var(--ink);
}
body[class*="v-"] .vmarquee span{-webkit-text-stroke:1.5px var(--ink-2)}
.vmarquee span:nth-child(even){color:var(--orange-display);-webkit-text-stroke:0}
@media (prefers-reduced-motion: no-preference){
  .vmarquee-track{animation:vmarq var(--speed) linear infinite}
  .vmarquee:hover .vmarquee-track{animation-play-state:paused}
}
@keyframes vmarq{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }

/* =================================================================
   CORRECCIONES DE MOVIL
   Detectadas midiendo el DOM real en iPhone SE y 14, no a ojo.
   ================================================================= */

/* 1. Piso de 12px en las etiquetas chicas. Varias caian en 10.9 y 11.7px,
      que en un telefono en la calle y de noche no se leen. */
.eyebrow,.tile-kind,.vkind,.vstrip dt,.vinfo dt,.contact-card dt{
  font-size:max(.74rem,12px);
}
.tile .soon,.vsoon{font-size:max(.72rem,12px)}

/* 2. Objetivos tactiles. El boton del menu media 97x35 y los enlaces del
      pie 122x15: imposibles de atinar con el pulgar. El minimo comodo es
      44px de alto, que es lo que recomiendan Apple y Google. */
.nav-menu summary{min-height:44px}
.nav-logo{min-height:44px}
.skip{padding:13px 20px}
.foot-legal{gap:2px 20px}
.foot-legal a{
  display:inline-flex;align-items:center;
  min-height:44px;padding-block:2px;
}
.nav-panel a{min-height:48px;display:flex;align-items:center}

/* 3. La marquesina se acorta en movil: a pantalla chica el nombre pasa
      demasiado rapido y marea mas que ambientar. */
@media (max-width:760px){
  .vmarquee{--speed:26s}
  .vmarquee span{-webkit-text-stroke-width:1.6px}
}

/* En la tira, los valores de dos lineas se reparten parejo en vez de
   dejar una palabra suelta abajo. */
.vstrip dd{text-wrap:balance}

/* Los telefonos dentro de los bloques de datos son enlaces que se tocan con
   el pulgar, no texto. Necesitan alto suficiente como cualquier otro boton. */
.vinfo dd a,.contact-card dd a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--orange-ink);font-weight:800;
  text-decoration-thickness:2px;text-underline-offset:4px;
}
.vinfo dd a:hover,.contact-card dd a:hover{color:var(--ink)}

/* ============================================================
   PREGUNTAS FRECUENTES (portada)
   Fondo claro entre dos bloques en --bg-2, para que no se fundan.
   Cada pregunta es un <details>: funciona sin JavaScript, y el texto
   de la respuesta esta en el HTML aunque este cerrada, que es lo que
   leen Google y los buscadores con IA.
   ============================================================ */
.faq{background:var(--bg);padding:clamp(70px,11vh,140px) 0}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,80px);align-items:start}
.faq-head p{margin-top:1.1rem}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:44px;padding:1.15rem 0;
  font-size:clamp(1.02rem,1.4vw,1.2rem);font-weight:800;letter-spacing:-.012em;line-height:1.3;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--orange-ink)}
.faq-item summary i{position:relative;flex:none;width:16px;height:16px}
.faq-item summary i::before,.faq-item summary i::after{
  content:"";position:absolute;left:0;top:7px;width:16px;height:2px;border-radius:2px;background:var(--orange-display);
}
.faq-item summary i::after{transform:rotate(90deg)}
.faq-item[open] summary i::after{transform:rotate(0)}
.faq-item p{margin:0 0 1.35rem;color:var(--ink-2);line-height:1.6;font-size:1rem;max-width:62ch;text-wrap:pretty}
@media (prefers-reduced-motion: no-preference){
  .faq-item summary i::after{transition:transform .25s ease}
}
@media (max-width:860px){ .faq-grid{grid-template-columns:1fr} }