/* ═══ Adenails · Águilas ═══════════════════════════════════════════════
   Dirección: "La pared". Sala clara de galería + una sala oscura donde
   las piezas cuelgan con su cartela. El color lo pone el trabajo, no la web. */

:root{
  /* sala clara */
  --nacar:      #EAECEA;
  --papel:      #F5F6F4;
  --tinta:      #1A1815;
  --tinta-2:    #4E4943;
  --humo:       #5E5952;
  --linea:      rgba(26,24,21,.16);
  --linea-fina: rgba(26,24,21,.09);

  /* sala oscura */
  --laca:       #16130F;
  --laca-2:     #211D18;
  --nacar-d:    #E9E7E2;
  --humo-d:     #9C948A;
  --linea-d:    rgba(233,231,226,.18);

  /* oro (medido de su propio trabajo: obra n.º 01) */
  --oro:        #B8862B;
  --oro-txt:    #8A6418;   /* el mismo oro, legible sobre claro */
  --oro-luz:    #E3B24E;   /* sobre oscuro */

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --sect: clamp(72px, 11vw, 148px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--nacar); color:var(--tinta);
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  font-size:17px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--oro); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.sect{ padding-block:var(--sect); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:200; background:var(--tinta); color:var(--nacar); padding:10px 16px; }

/* ── tipografía ───────────────────────────────────────────────────── */
.h2{
  font-family:"Syne", sans-serif; font-weight:700;
  font-size:clamp(1.95rem, 4.6vw, 4rem); line-height:1.02;
  letter-spacing:-.032em; text-wrap:balance;
}
.h2--light{ color:var(--nacar-d); }
.lede{ font-size:clamp(1.02rem,1.35vw,1.16rem); color:var(--tinta-2); max-width:56ch; margin-top:1.1em; text-wrap:pretty; }

.brow{
  font-family:"DM Mono", ui-monospace, monospace; font-weight:500;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro-txt); display:flex; align-items:center; gap:.85em;
  margin-bottom:1.5rem;
}
.brow--light{ color:var(--oro-luz); }
.brow__rule{ width:clamp(28px,5vw,64px); height:1px; background:currentColor; opacity:.55; flex:none; }

/* ── botones ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.95em 1.6em; border-radius:0; border:1px solid transparent;
  font-weight:600; font-size:.97rem; letter-spacing:-.01em; cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .18s var(--ease);
}
.btn--gold{ background:var(--oro); color:#16130F; }
.btn--ghost{ border-color:rgba(255,255,255,.55); color:#fff; background:rgba(20,16,12,.28); }
.btn--dark{ background:var(--tinta); color:var(--nacar); }
.btn--line{ border-color:var(--linea); color:var(--tinta); }
.btn--full{ width:100%; }
@media (hover:hover){
  .btn--gold:hover{ background:#CC9633; }
  .btn--ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
  .btn--dark:hover{ background:#332E28; }
  .btn--line:hover{ border-color:var(--tinta); background:rgba(26,24,21,.05); }
}
.btn:active{ transform:scale(.975); }

/* ── header ───────────────────────────────────────────────────────── */
/* sin backdrop-filter a propósito: convierte el header en bloque contenedor
   del nav fijo y revienta el menú móvil tras hacer scroll. */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:90; background:transparent; }
.hdr.scrolled{ background:var(--nacar); box-shadow:0 1px 0 var(--linea-fina), 0 10px 30px -22px rgba(0,0,0,.5); }
.hdr__in{
  max-width:var(--maxw); margin-inline:auto; padding:1.1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.mark{ display:inline-flex; align-items:baseline; gap:.18em; font-family:"Syne",sans-serif; font-weight:800; font-size:1.32rem; letter-spacing:-.045em; color:#fff; }
.mark__dot{ width:.3em; height:.3em; background:var(--oro-luz); border-radius:50%; }
.hdr.scrolled .mark{ color:var(--tinta); }
.hdr.scrolled .mark__dot{ background:var(--oro); }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem); }
.nav a{ font-size:.95rem; font-weight:500; color:rgba(255,255,255,.9); position:relative; padding-block:.25rem; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .25s var(--ease); }
.nav a.active::after, .nav a:hover::after{ right:0; }
.hdr.scrolled .nav a{ color:var(--tinta-2); }
.hdr.scrolled .nav a.active{ color:var(--tinta); }
.nav__cta{ background:var(--oro); color:#16130F !important; padding:.6em 1.2em !important; font-weight:600; }
.nav__cta::after{ display:none; }

.burger{ display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; align-items:flex-end; }
.burger span{ display:block; width:24px; height:2px; background:#fff; transition:transform .25s var(--ease), opacity .2s; }
.hdr.scrolled .burger span{ background:var(--tinta); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:0; background:var(--laca); flex-direction:column;
    justify-content:center; gap:1.6rem; transform:translateY(-100%);
    transition:transform .38s var(--ease); z-index:80;
  }
  .nav.open{ transform:none; }
  .nav a{ font-size:1.6rem; font-family:"Syne",sans-serif; font-weight:700; color:var(--nacar-d) !important; }
  .nav__cta{ font-size:1.05rem !important; }
  .burger{ position:relative; z-index:95; }
  .nav.open ~ .burger span{ background:#fff !important; }
}

/* ── portada ──────────────────────────────────────────────────────── */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; isolation:isolate; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 32%; z-index:-2; }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(9,7,5,.94) 0%, rgba(9,7,5,.74) 26%, rgba(9,7,5,.34) 58%, rgba(9,7,5,.18) 78%, rgba(9,7,5,.5) 100%),
    linear-gradient(to right, rgba(9,7,5,.6) 0%, rgba(9,7,5,.1) 55%, rgba(9,7,5,0) 100%);
}
.grain{
  position:absolute; inset:0; z-index:-1; opacity:.16; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero__body{ position:relative; width:100%; max-width:var(--maxw); margin-inline:auto; padding:clamp(96px,14vh,150px) var(--pad) clamp(76px,11vh,132px); }
.hero__h1{
  font-family:"Syne",sans-serif; font-weight:800; color:#fff;
  font-size:clamp(2.85rem, min(9.2vw, 13svh), 7.4rem);
  line-height:.9; letter-spacing:-.05em; margin:0 0 1.1rem;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero__h1b{ display:inline-block; padding-left:.13em; }
.hero__sub{ color:rgba(255,255,255,.88); max-width:46ch; font-size:clamp(1.02rem,1.5vw,1.2rem); }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-top:2rem; color:rgba(255,255,255,.86); font-size:.9rem; }
.gstar{ display:inline-flex; align-items:center; gap:.45em; }
.gstar b{ font-weight:600; }
.gstar i{ font-style:normal; color:rgba(255,255,255,.6); }
.dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.45); }
.live{ display:inline-flex; align-items:center; gap:.55em; }
.live__led{ width:8px; height:8px; border-radius:50%; background:var(--humo-d); flex:none; }
.live__led.open{ background:#4FBF7B; box-shadow:0 0 0 4px rgba(79,191,123,.2); }
.live__led.closed{ background:#C4705C; box-shadow:0 0 0 4px rgba(196,112,92,.18); }
.hero__edge{
  position:absolute; right:var(--pad); top:0; bottom:0; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:flex-end; gap:1.4rem; padding-bottom:clamp(84px,13vh,150px);
  font-family:"DM Mono",monospace; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.62); pointer-events:none;
}
.hero__edge span{ writing-mode:vertical-rl; }
@media (max-width:1080px){ .hero__edge{ display:none; } }

/* ── el estudio ───────────────────────────────────────────────────── */
.estudio{ padding-top:clamp(64px,9vw,116px); }
.estudio__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,72px); align-items:start; }
.estudio__foto{ position:relative; margin-right:calc(var(--pad) * -1 - (100vw - min(100vw, var(--maxw)))/2); }
.estudio__foto img{ width:100%; height:clamp(360px,52vw,620px); object-fit:cover; object-position:center 24%; }
.quote{ margin-top:2.6rem; padding-left:1.4rem; border-left:2px solid var(--oro); }
.quote p{ font-family:"Syne",sans-serif; font-weight:600; font-size:clamp(1.2rem,2.1vw,1.62rem); line-height:1.24; letter-spacing:-.025em; }
.quote cite{ display:block; margin-top:.7rem; font-style:normal; font-family:"DM Mono",monospace; font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; color:var(--humo); }
@media (max-width:880px){
  .estudio__grid{ grid-template-columns:1fr; }
  .estudio__foto{ margin-inline:calc(var(--pad) * -1); }
  .estudio__foto img{ height:min(74vw,460px); }
}

/* ── tres cosas ───────────────────────────────────────────────────── */
.tres{ padding-top:0; }
.pilares{ border-top:1px solid var(--linea); }
.pilar{
  display:grid; grid-template-columns:minmax(0,.3fr) minmax(0,1fr) minmax(0,.22fr);
  gap:clamp(20px,4vw,56px); align-items:start;
  padding-block:clamp(30px,4.5vw,58px); border-bottom:1px solid var(--linea);
}
.pilar__t{ font-family:"Syne",sans-serif; font-weight:700; font-size:clamp(1.5rem,3vw,2.5rem); letter-spacing:-.035em; line-height:1; }
.pilar__b p{ color:var(--tinta-2); max-width:58ch; }
.pilar__cite{ margin-top:1rem; font-family:"DM Mono",monospace; font-size:.8rem; line-height:1.7; color:var(--oro-txt) !important; }
.pilar__m{ font-family:"DM Mono",monospace; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--humo); text-align:right; }
@media (max-width:880px){
  .pilar{ grid-template-columns:1fr; gap:.9rem; }
  .pilar__m{ text-align:left; }
}

/* ── la pared (sala oscura) ───────────────────────────────────────── */
.sala{ background:var(--laca); color:var(--nacar-d); padding-block:var(--sect) clamp(56px,8vw,110px); }
.sala__head{ margin-bottom:clamp(36px,6vw,80px); }
.sala__head .h2{ max-width:20ch; }

.wall{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
.wall__media{ position:relative; }
.wall__fig{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--laca-2); cursor:zoom-in; }
.wall__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%; transform:scale(1.22) translateY(-6%); opacity:0; transition:opacity .55s var(--ease); }
.wall__img.is-on{ opacity:1; }

.wall__list{ list-style:none; }
.cartela{
  min-height:74svh; display:flex; flex-direction:column; justify-content:center;
  padding:8vh clamp(22px,5vw,84px);
  border-left:1px solid var(--linea-d);
  opacity:.34; transition:opacity .5s var(--ease);
}
.cartela.is-on{ opacity:1; }
.cartela__foto{ display:none; }
.cartela__n{ font-family:"DM Mono",monospace; font-size:.78rem; letter-spacing:.22em; color:var(--oro-luz); margin-bottom:1.1rem; }
.cartela__t{ font-family:"Syne",sans-serif; font-weight:700; font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.02; letter-spacing:-.035em; }
.cartela__d{ margin-top:1.1rem; color:var(--humo-d); max-width:44ch; }
.sw{ list-style:none; display:flex; gap:0; margin-top:2rem; border:1px solid var(--linea-d); width:max-content; }
.sw li{ width:clamp(38px,4.4vw,54px); aspect-ratio:1; background:var(--c); }
.sw li + li{ border-left:1px solid var(--linea-d); }

@media (max-width:900px){
  .wall{ grid-template-columns:1fr; }
  .wall__media{ display:none; }
  .cartela{ min-height:0; opacity:1; border-left:0; border-top:1px solid var(--linea-d); padding:2.4rem 0 3.2rem; }
  .cartela__foto{ display:block; margin:0 calc(var(--pad) * -1) 1.8rem; }
  .cartela__foto img{ width:100%; height:min(112vw,540px); object-fit:cover; }
  .wall__list{ padding-inline:var(--pad); max-width:var(--maxw); margin-inline:auto; }
}

.sala__pie{ margin-top:clamp(40px,6vw,80px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; padding-top:clamp(28px,4vw,48px); border-top:1px solid var(--linea-d); }
.sala__nota{ color:var(--humo-d); max-width:48ch; }

/* ── reseñas ──────────────────────────────────────────────────────── */
.res__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(30px,4.5vw,56px); }
.res__nota{ display:flex; align-items:center; gap:1rem; }
.res__num{ font-family:"Syne",sans-serif; font-weight:800; font-size:clamp(3.4rem,7vw,5.6rem); line-height:.85; letter-spacing:-.05em; }
.res__stars{ color:var(--oro); letter-spacing:.12em; font-size:1rem; }
.res__cnt{ font-family:"DM Mono",monospace; font-size:.78rem; letter-spacing:.1em; color:var(--humo); }
.res__h2{ max-width:14ch; text-align:right; margin-left:auto; }
.res__grid{ display:grid; }
.res__grid .track{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--linea); background-clip:content-box; transform:none !important; }
.res{ background:var(--papel); padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; justify-content:space-between; gap:1.6rem; }
.res p{ color:var(--tinta-2); text-wrap:pretty; }
.res footer{ display:flex; align-items:center; gap:.7rem; font-weight:600; font-size:.93rem; }
.av{ width:34px; height:34px; display:grid; place-items:center; background:var(--tinta); color:var(--nacar); font-family:"Syne",sans-serif; font-weight:700; font-size:.9rem; flex:none; }
.res__nav{ display:none; gap:.5rem; margin-top:1.2rem; }
.res__nav button{ width:44px; height:44px; border:1px solid var(--linea); background:none; cursor:pointer; }
@media (max-width:860px){
  .res__h2{ text-align:left; margin-left:0; }
  .res__grid{ overflow:hidden; }
  .res__grid .track{ display:flex; gap:0; background:none; transform:translateX(0); transition:transform .5s var(--ease); }
  .res__grid .track > *{ flex:0 0 100%; }
  .res__nav{ display:flex; }
}

/* ── dónde ────────────────────────────────────────────────────────── */
.donde{ background:var(--papel); }
.donde__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.live--big{ margin-top:1.8rem; font-family:"DM Mono",monospace; font-size:.82rem; letter-spacing:.08em; }
.hours{ width:100%; max-width:370px; border-collapse:collapse; margin-top:1.4rem; }
.hours th, .hours td{ text-align:left; padding:.7rem 0; border-bottom:1px solid var(--linea-fina); font-weight:400; color:var(--tinta-2); font-size:.96rem; }
.hours td{ text-align:right; font-family:"DM Mono",monospace; font-size:.86rem; }
.hours .today th, .hours .today td{ color:var(--tinta); font-weight:600; }
.hours .today th::before{ content:""; display:inline-block; width:6px; height:6px; background:var(--oro); margin-right:.6em; vertical-align:middle; }
.donde__acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.donde__mapa{ height:clamp(320px,46vw,540px); background:var(--nacar); }
.donde__mapa iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(1) contrast(1.05); }
@media (max-width:880px){ .donde__grid{ grid-template-columns:1fr; } }

/* ── cita ─────────────────────────────────────────────────────────── */
.cita{ background:var(--laca); color:var(--nacar-d); }
.cita__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(30px,5vw,80px); align-items:start; }
.cita__p{ margin-top:1.2rem; color:var(--humo-d); max-width:44ch; }
.cita__list{ list-style:none; margin-top:2rem; display:grid; gap:.55rem; font-family:"DM Mono",monospace; font-size:.84rem; color:var(--nacar-d); }
.cita__list a{ border-bottom:1px solid var(--linea-d); }
.form{ display:grid; gap:1.1rem; }
.f{ display:grid; gap:.45rem; }
.f label{ font-family:"DM Mono",monospace; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--humo-d); }
.f input, .f textarea{
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--linea-d);
  padding:.85em 1em; color:var(--nacar-d); border-radius:0; font-size:1rem;
}
.f input::placeholder, .f textarea::placeholder{ color:#968E84; }
.f input:focus-visible, .f textarea:focus-visible{ outline:2px solid var(--oro-luz); outline-offset:1px; }
.f textarea{ resize:vertical; }
.chk{ display:flex; align-items:flex-start; gap:.65rem; font-size:.88rem; color:var(--humo-d); }
.chk input{ margin-top:.3rem; accent-color:var(--oro); width:17px; height:17px; flex:none; }
.form__nota{ font-family:"DM Mono",monospace; font-size:.75rem; line-height:1.7; color:var(--humo-d); }
.form .invalid{ border-color:#C4705C !important; }
@media (max-width:880px){ .cita__grid{ grid-template-columns:1fr; } }

/* ── pie ──────────────────────────────────────────────────────────── */
.ft{ background:var(--laca-2); color:var(--nacar-d); padding-block:clamp(48px,7vw,88px) 1.6rem; }
.ft__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,4vw,56px); }
.mark--ft{ color:var(--nacar-d); font-size:1.5rem; }
.ft__tag{ margin-top:.9rem; color:var(--humo-d); font-size:.92rem; max-width:34ch; }
.ft__nav{ display:grid; gap:.5rem; align-content:start; font-size:.92rem; color:var(--humo-d); }
.ft__nav a:hover{ color:var(--nacar-d); }
.ft__col{ display:grid; gap:.9rem; align-content:start; font-size:.92rem; color:var(--humo-d); }
.ft__col a{ border-bottom:1px solid var(--linea-d); }
.ft__bar{ display:flex; flex-wrap:wrap-reverse; align-items:center; justify-content:space-between; gap:1rem; margin-top:clamp(36px,5vw,64px); padding-top:1.4rem; border-top:1px solid var(--linea-d); }
.ft__legal{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.82rem; color:var(--humo-d); }
.ft__legal a:hover{ color:var(--nacar-d); }
.ft__c{ font-size:.82rem; color:var(--humo-d); }
.demo-aviso{ margin-top:1.1rem; font-size:.74rem; color:#968E84; letter-spacing:.02em; }
@media (max-width:860px){ .ft__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ft__grid{ grid-template-columns:1fr; } }

/* ── barra móvil ──────────────────────────────────────────────────── */
.callbar{ display:none; }
@media (max-width:760px){
  .callbar{
    position:fixed; left:0; right:0; bottom:0; z-index:70; display:grid;
    grid-template-columns:1fr 1fr; border-top:1px solid var(--linea-d);
  }
  .callbar a{ padding:1rem; text-align:center; font-weight:600; font-size:.95rem; background:var(--laca); color:var(--nacar-d); }
  .callbar__wa{ background:var(--oro) !important; color:#16130F !important; }
  body{ padding-bottom:56px; }
}

/* ── lightbox ─────────────────────────────────────────────────────── */
[data-lightbox] img{ max-width:min(92vw,760px); max-height:88vh; width:auto; height:auto; }
.lightbox__close{ position:absolute; top:14px; right:18px; width:44px; height:44px; border:0; background:none; color:#fff; font-size:2rem; line-height:1; cursor:pointer; }

/* ── movimiento ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .cartela{ opacity:1 !important; }
  .wall__img{ transition:none !important; }
}
