/* ============================================================
   GC EDIFICACIONES — sistema base
   Negro sobre hueso. Sin color de acento: el acento es el contraste.
   ============================================================ */

@font-face{font-family:'Archivo';src:url('assets/fonts/archivo-var.woff2') format('woff2');
  font-weight:400 900;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-var.woff2') format('woff2');
  font-weight:300 700;font-display:swap;font-style:normal}

:root{
  --ink:#111111; --bone:#F7F5F1; --carbon:#1A1A1A;
  --travertine:#CDC6B7; --stone:#BCB3A2; --sand:#A69A88; --wood:#2F241F;
  --line:rgba(17,17,17,.12); --line-dark:rgba(247,245,241,.16);
  --muted:rgba(17,17,17,.55); --muted-dark:rgba(247,245,241,.60);

  --display:'Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --text:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px;

  --r:20px; --r-sm:12px; --pill:999px;
  --max:1440px; --pad:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:768px){ :root{ --pad:20px; --s7:64px; --s8:80px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--text);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.sec--dark :focus-visible{outline-color:var(--bone)}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.04;
  letter-spacing:-.03em;margin:0}
.h-xl{font-size:clamp(2.9rem,9vw,8rem);font-weight:800;letter-spacing:-.045em}
.h-lg{font-size:clamp(2.1rem,5.2vw,4.2rem);letter-spacing:-.038em}
.h-md{font-size:clamp(1.5rem,2.8vw,2.4rem);letter-spacing:-.03em}
.h-sm{font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.02em;font-weight:600}
p{margin:0 0 var(--s2)}
.lead{font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.55;max-width:56ch;color:var(--muted)}
.sec--dark .lead{color:var(--muted-dark)}
.eyebrow{font-family:var(--text);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3)}
.sec--dark .eyebrow{color:var(--muted-dark)}
.small{font-size:.82rem;line-height:1.5;color:var(--muted)}
.sec--dark .small{color:var(--muted-dark)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:var(--s8)}
.sec--dark{background:var(--carbon);color:var(--bone)}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--bone)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.sec--dark .rule{background:var(--line-dark)}
.grid{display:grid;gap:var(--s3)}
.split{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:start}
  .split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:13px 26px;border-radius:var(--pill);font-family:var(--text);
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  background:var(--ink);color:var(--bone);
  transition:transform .35s var(--ease),background .25s ease,opacity .25s ease;
  will-change:transform}
.btn:hover{background:#000}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{background:var(--ink);color:var(--bone);box-shadow:none}
.sec--dark .btn{background:var(--bone);color:var(--ink)}
.sec--dark .btn--ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-dark)}
.sec--dark .btn--ghost:hover{background:var(--bone);color:var(--ink)}
.btn svg{width:17px;height:17px;flex:none}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;padding:var(--s3) 0;
  transition:padding .4s var(--ease),background .4s ease,backdrop-filter .4s ease}
.nav.is-stuck{padding:10px 0;background:rgba(247,245,241,.88);
  backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
/* sobre hero oscuro: nav en claro hasta que se compacta */
.page-hero-dark .nav:not(.is-stuck){color:var(--bone)}
.page-hero-dark .nav:not(.is-stuck) .burger{--burger:#F7F5F1}
.page-hero-dark .nav:not(.is-stuck) .btn{background:var(--bone);color:var(--ink)}
.nav__logo{display:flex;align-items:center;gap:11px;position:relative}
.nav__logo .is-light{display:none}
.page-hero-dark .nav:not(.is-stuck) .nav__logo .is-dark{display:none}
.page-hero-dark .nav:not(.is-stuck) .nav__logo .is-light{display:block}

.menu .btn{font-family:var(--text);font-size:.95rem;letter-spacing:.01em}
.nav__logo img{height:30px;width:auto;transition:height .4s var(--ease)}
.nav.is-stuck .nav__logo img{height:24px}
.nav__wm{font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.24em;line-height:1;padding-top:2px}
@media (max-width:420px){.nav__wm{display:none}}
.nav__links{display:none;gap:var(--s4);align-items:center}
@media (min-width:900px){.nav__links{display:flex}}
.nav__cta{display:none}
@media (min-width:900px){.nav__cta{display:inline-flex}}

/* CascadeText — cada letra es una columna de dos pisos que sube.
   Sin posiciones absolutas: la letra de abajo ocupa el hueco que deja la de arriba. */
.casc{display:inline-flex;vertical-align:top;font-size:.86rem;font-weight:500;
  line-height:1.35;white-space:nowrap}
.casc__ch{display:inline-block;overflow:hidden;height:1.35em;vertical-align:top}
.casc__ch > span{display:block;height:1.35em;
  transition:transform .38s var(--ease);
  transition-delay:calc(var(--i) * 22ms);will-change:transform}
.casc:hover .casc__ch > span,
.casc:focus-visible .casc__ch > span{transform:translateY(-1.35em)}
.casc[aria-current]{font-weight:700}
@media (prefers-reduced-motion:reduce){
  .casc__ch > span{transition:none}
  .casc:hover .casc__ch > span{transform:none}
  .casc:hover{text-decoration:underline;text-underline-offset:4px}
}

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;align-items:flex-end}
@media (min-width:900px){.burger{display:none}}
.burger i{display:block;height:1.5px;background:var(--burger,#111111);transition:.35s var(--ease)}
.burger i:nth-child(1){width:24px}.burger i:nth-child(2){width:16px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){width:24px;transform:translateY(-3.25px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:99;background:var(--bone);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s2);
  padding:var(--s8) var(--pad) var(--s6);
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);
  visibility:hidden}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu a{font-family:var(--display);font-size:clamp(2rem,10vw,3.4rem);
  font-weight:700;letter-spacing:-.04em;line-height:1.05}
.menu .btn{align-self:flex-start;margin-top:var(--s4)}

/* ---------- pantalla de carga ---------- */
.pre{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(ellipse 90% 70% at 50% 45%,#FBFAF8 0%,var(--bone) 46%,#EFEBE3 100%)}
.pre__mask{position:absolute;inset:0;
  -webkit-mask-image:url("assets/img/gc-lockup-mask.svg");
  mask-image:url("assets/img/gc-lockup-mask.svg");
  -webkit-mask-position:50% 50%;mask-position:50% 50%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:var(--preW,520px) auto;mask-size:var(--preW,520px) auto;
  will-change:-webkit-mask-size,mask-size}
.pre__mask picture,.pre__mask img{width:100%;height:100%;display:block}
.pre__mask img{object-fit:cover;object-position:50% 50%}
.pre__grad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(10,11,13,.86) 0%,rgba(10,11,13,.52) 42%,
    rgba(10,11,13,.62) 72%,rgba(10,11,13,.88) 100%)}
.pre{will-change:filter,opacity}
.pre.is-done{opacity:0;visibility:hidden;transform:scale(1.035);
  filter:blur(20px)!important;
  transition:opacity .3s var(--ease),transform .3s var(--ease),
             filter .3s var(--ease),visibility 0s .3s}
@media (prefers-reduced-motion:reduce){
  .pre.is-done{transform:none;filter:none!important;transition:opacity .2s,visibility 0s .2s}
}

/* ---------- HERO fijo con carrusel ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--carbon)}
.hero__media{position:absolute;inset:0}
.hero__shot{position:absolute;inset:0;opacity:0}
.hero__shot.is-on{opacity:1}
.hero__shot picture,.hero__shot img{width:100%;height:100%;display:block}
.hero__shot img{object-fit:cover;object-position:50% 54%}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(10,11,13,.92) 0%,rgba(10,11,13,.80) 22%,
    rgba(10,11,13,.52) 44%,rgba(10,11,13,.16) 66%,rgba(10,11,13,.58) 100%)}
.hero__copy{position:absolute;inset:auto 0 0 0;z-index:2;padding-block:0 var(--s7)}
.hero__copy h1{margin-top:var(--s1)}
.hero__scroll{position:absolute;z-index:2;right:var(--pad);bottom:26px;margin:0;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,245,241,.6);display:flex;align-items:center;gap:10px}
.hero__scroll::after{content:"";width:1px;height:30px;background:rgba(247,245,241,.4);
  animation:drop 1.9s var(--ease) infinite}
@media (max-width:700px){
  .hero__copy{padding-bottom:var(--s6)}
  .hero__scroll{display:none}
}
@keyframes drop{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}}

.hero__acts{margin-top:var(--s4);display:flex;gap:10px;flex-wrap:wrap}
.hero__ghost{color:var(--bone);box-shadow:inset 0 0 0 1px rgba(247,245,241,.34)}
.hero__ghost:hover{background:var(--bone);color:var(--ink);box-shadow:none}

/* ---------- marquee de clientes ---------- */
.mq{overflow:hidden;padding-block:var(--s5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq__track{display:flex;width:max-content;gap:var(--s6);align-items:center;
  animation:mq 42s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.mq__item{font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.85rem);
  font-weight:600;letter-spacing:-.02em;white-space:nowrap;opacity:.42;
  transition:opacity .3s ease;flex:none}
.mq__item:hover{opacity:1}
/* los logos van monocromos con máscara: entran al sistema negro-sobre-hueso
   sin meter color, y comparten altura óptica con los nombres en texto */
.mq__logo{--h:clamp(22px,2.6vw,34px);
  height:var(--h);width:calc(var(--h) * var(--ar));
  background:var(--ink);
  -webkit-mask:var(--logo) no-repeat center/contain;
          mask:var(--logo) no-repeat center/contain}
.sec--dark .mq__logo{background:var(--bone)}

/* ---------- cifras ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s3)}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr);gap:var(--s4)}}

/* ---------- cifras: la regla negra arriba de cada dato es lo que las saca
   del aire de "plantilla". El número manda, la unidad va a su lado. ---------- */
.cifras{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5) 0}
@media (min-width:900px){.cifras{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}}
.cifras > div{border-top:2px solid var(--ink);padding-top:var(--s3);
  padding-right:var(--s3)}
@media (min-width:900px){
  .cifras > div + div{border-left:1px solid var(--line);padding-left:var(--s3)}
}
.sec--dark .cifras > div{border-top-color:var(--bone)}
.sec--dark .cifras > div + div{border-left-color:var(--line-dark)}
.cifras dt{margin:0;display:flex;align-items:baseline;gap:.28em;
  font-family:var(--display);font-weight:800;letter-spacing:-.055em;line-height:.84;
  font-size:clamp(3.1rem,6.4vw,5.4rem);font-variant-numeric:tabular-nums}
.cifras dt i{font-style:normal;font-size:.2em;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);align-self:flex-start;
  transform:translateY(.5em)}
.sec--dark .cifras dt i{color:var(--muted-dark)}
.cifras dd{margin:var(--s2) 0 0;font-size:.84rem;line-height:1.45;
  color:var(--muted);max-width:24ch}
.sec--dark .cifras dd{color:var(--muted-dark)}
.stat__n{font-family:var(--display);font-size:clamp(2.6rem,5.6vw,4.6rem);
  font-weight:800;letter-spacing:-.05em;line-height:.92;font-variant-numeric:tabular-nums}
.stat__l{margin-top:var(--s2);font-size:.82rem;line-height:1.45;color:var(--muted)}
.sec--dark .stat__l{color:var(--muted-dark)}

/* ---------- tarjetas expansivas (categorías) ---------- */
.exp{display:grid;gap:var(--s1);grid-template-rows:repeat(5,1fr);
  height:min(78svh,760px);
  transition:grid-template-rows .55s var(--ease),grid-template-columns .55s var(--ease)}
@media (min-width:860px){.exp{grid-template-rows:1fr;grid-template-columns:repeat(5,1fr);height:min(72svh,620px)}}
.exp__i{position:relative;overflow:hidden;border-radius:var(--r-sm);
  background:var(--carbon);min-width:0;min-height:0;cursor:pointer;display:block;
  width:100%;text-align:left}
.exp__i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.72);transform:scale(1.12);
  transition:filter .5s var(--ease),transform .6s var(--ease)}
.exp__i[data-on="true"] img{filter:grayscale(0) brightness(.82);transform:scale(1)}
.exp__i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.25) 46%,transparent)}
.exp__c{position:absolute;inset:auto 0 0 0;z-index:2;padding:var(--s3);color:var(--bone)}
.exp__t{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;
  letter-spacing:-.02em;white-space:nowrap;transition:transform .5s var(--ease)}
.exp__d{display:block;margin-top:10px;font-size:.82rem;line-height:1.45;
  color:rgba(247,245,241,.78);max-width:34ch;opacity:0;transform:translateY(8px);
  transition:opacity .35s .12s var(--ease),transform .35s .12s var(--ease)}
.exp__i[data-on="true"] .exp__d{opacity:1;transform:none}
/* colapsada en escritorio: el título gira y se lee en vertical */
@media (min-width:860px){
  .exp__c{transform-origin:left bottom}
  .exp__i:not([data-on="true"]) .exp__t{transform:rotate(-90deg) translateX(6px);
    transform-origin:left bottom;position:absolute;bottom:var(--s3);left:calc(var(--s3) + 2px);
    font-size:.9rem}
  .exp__i:not([data-on="true"]) .exp__d{display:none}
}
.exp__k{position:absolute;top:var(--s3);left:var(--s3);z-index:2;
  font-size:.68rem;letter-spacing:.16em;color:rgba(247,245,241,.6)}

/* ---------- tarjetas de proyecto ---------- */
.cards{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{display:block;group:card}
.card__m{position:relative;overflow:hidden;border-radius:var(--r-sm);
  aspect-ratio:4/5;background:var(--travertine)}
.card__m img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease),filter .5s var(--ease)}
.card:hover .card__m img{transform:scale(1.045)}
.card__t{margin-top:var(--s2);font-family:var(--display);font-weight:600;
  font-size:1rem;letter-spacing:-.02em}
.card__meta{margin-top:4px;font-size:.78rem;color:var(--muted)}
.sec--dark .card__meta{color:var(--muted-dark)}
.card__bar{margin-top:var(--s2);height:1px;background:var(--line);position:relative;overflow:hidden}
.sec--dark .card__bar{background:var(--line-dark)}
.card__bar::after{content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.sec--dark .card__bar::after{background:var(--bone)}
.card:hover .card__bar::after{transform:scaleX(1)}

/* ---------- bento de acabados ---------- */
.bento{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.bento{grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(0,1fr)}}
.bento figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-sm);
  aspect-ratio:3/4;background:var(--wood)}
.bento figure img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.bento figure:hover img{transform:scale(1.05)}
@media (min-width:900px){
  .bento .b-tall{grid-row:span 2;aspect-ratio:auto}
  .bento .b-wide{grid-column:span 2;aspect-ratio:16/9}
}
.bento figcaption{position:absolute;left:14px;bottom:12px;z-index:2;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(247,245,241,.9);text-shadow:0 1px 12px rgba(0,0,0,.6)}

/* ---------- media ancha ---------- */
.media{border-radius:var(--r);overflow:hidden;background:var(--travertine)}
.media img{width:100%;height:auto}
.media--in{margin-inline:var(--pad)}
.rv-line{overflow:hidden;display:block;padding-bottom:.16em;margin-bottom:-.16em}
.rv-line-in{display:block;will-change:transform}
.card[hidden]{display:none}

/* ---------- línea de tiempo ---------- */
.tl{position:relative}
.tl__line{position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl__line i{position:absolute;inset:0 0 auto 0;height:0;background:var(--ink);display:block}
@media (min-width:900px){.tl__line{left:calc(120px + 11px)}}
.tl__i{position:relative;display:grid;grid-template-columns:1fr;gap:var(--s2);
  padding:0 0 var(--s6) 40px}
@media (min-width:900px){
  .tl__i{grid-template-columns:120px 1fr minmax(0,300px);gap:var(--s5);
    padding-left:0;align-items:start}
  .tl__i>.tl__yr{text-align:right;padding-right:var(--s4)}
}
.tl__i::before{content:"";position:absolute;left:7px;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--bone);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (min-width:900px){.tl__i::before{left:calc(120px + 7px)}}
.tl__yr{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.02em}
.tl__m{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;background:var(--travertine)}
.tl__m img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);
  transition:filter .5s var(--ease)}
.tl__i:hover .tl__m img{filter:grayscale(0)}

/* ---------- sección con foto de fondo ---------- */
/* el recorte va en el contenedor de la foto, NO en la sección: un overflow:hidden
   en un ancestro anula cualquier position:sticky de adentro (la pila de obra entregada) */
.bgsec{position:relative;background:var(--carbon)}
.bgsec__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bgsec__bg img{width:100%;height:100%;object-fit:cover;
  /* escala un poco de más para que el desenfoque no deje borde claro */
  filter:blur(1.5px) saturate(.96);transform:scale(1.04)}
.bgsec__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,11,13,.90) 0%,rgba(10,11,13,.78) 46%,
    rgba(10,11,13,.56) 100%)}
.bgsec > .wrap{position:relative;z-index:2}
@media (max-width:700px){
  .bgsec__bg::after{background:linear-gradient(0deg,rgba(10,11,13,.92) 0%,rgba(10,11,13,.74) 60%,
    rgba(10,11,13,.62) 100%)}
}
/* variante centrada: el degradado direccional deja el texto flotando, aquí va parejo */
.bgsec--center .bgsec__bg::after{
  background:linear-gradient(180deg,rgba(10,11,13,.86) 0%,rgba(10,11,13,.74) 50%,rgba(10,11,13,.86) 100%)}
/* la foto se apaga antes del borde: sin esto corta en seco contra el pie de página */
.bgsec--center .bgsec__bg{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%)}
@media (max-width:700px){
  .bgsec--center .bgsec__bg::after{background:rgba(10,11,13,.84)}
}
/* foto detrás de mucho texto: la imagen tiene que ceder, si no compite con la lectura */
.bgsec--dense .bgsec__bg img{filter:blur(2px) saturate(.9)}
.bgsec--dense .bgsec__bg::after{
  background:linear-gradient(100deg,rgba(10,11,13,.90) 0%,rgba(10,11,13,.80) 52%,rgba(10,11,13,.68) 100%)}
/* la foto se apaga antes del borde para no cortar en seco contra la sección de abajo */
.bgsec--dense .bgsec__bg{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 68%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 68%,transparent 100%)}
@media (max-width:700px){
  .bgsec--dense .bgsec__bg::after{background:rgba(10,11,13,.92)}
}

/* variante clara: la foto se lava hasta quedar como textura sobre el hueso */
.bgsec--light{background:var(--bone)}
.bgsec--light .bgsec__bg img{filter:blur(2px) saturate(.42) brightness(1.08) contrast(.92)}
.bgsec--light .bgsec__bg::after{
  background:linear-gradient(180deg,rgba(247,245,241,.95) 0%,rgba(247,245,241,.84) 50%,
    rgba(247,245,241,.95) 100%)}
.bgsec--light .bgsec__bg{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}

/* secciones muy altas: si la foto cubre todo, se estira y solo se ve una franja
   ampliadísima. Se ancla arriba, detrás del encabezado, y se disuelve antes del contenido. */
.bgsec--top .bgsec__bg{height:clamp(460px,58%,940px);bottom:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%)}

/* velo suave y negro: el hueso al 90% tapaba la foto por completo */
.bgsec--suave .bgsec__bg img{filter:blur(1.5px) saturate(.9)}
.bgsec--suave .bgsec__bg::after{
  background:linear-gradient(180deg,rgba(10,11,13,.52) 0%,rgba(10,11,13,.44) 50%,
    rgba(10,11,13,.58) 100%)}
.bgsec--suave .bgsec__bg{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%)}
/* con el velo a la mitad, el gris del párrafo se pierde sobre la foto */
.bgsec--suave .lead{color:rgba(247,245,241,.88)}
.bgsec--suave .eyebrow{color:rgba(247,245,241,.78)}

@media (prefers-reduced-motion:reduce){.bgsec__bg img{transform:none}}

/* ---------- principios ---------- */
/* ---------- "en qué creemos": declaración + principios ---------- */
.creo{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:920px){
  .creo{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--s7);align-items:start}
}
.creo__list{list-style:none;margin:0;padding:0}
.creo__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--line-dark)}
.creo__list li:last-child{border-bottom:1px solid var(--line-dark)}
.creo__n{font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.1em;
  color:var(--muted-dark);padding-top:5px}
.creo__list h3{margin:0 0 6px}
.creo__list .small{margin:0;max-width:46ch}

/* los hechos concretos: rejilla corta, no una lista larga */
.hechos{display:grid;gap:var(--s3) var(--s5);grid-template-columns:1fr}
@media (min-width:640px){.hechos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.hechos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hechos > div{border-top:1px solid var(--line);padding-top:14px}
.sec--dark .hechos > div{border-top-color:var(--line-dark)}
.hechos strong{display:block;font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:-.02em;margin-bottom:5px}
.hechos span{display:block;font-size:.85rem;line-height:1.5;color:var(--muted)}
.sec--dark .hechos span{color:var(--muted-dark)}

/* ---------- proveedores: pasos y categorías ---------- */
.pasos{display:grid;gap:var(--s4);grid-template-columns:1fr;counter-reset:paso}
@media (min-width:760px){.pasos{grid-template-columns:repeat(3,1fr);gap:var(--s5)}}
.pasos > div{border-top:1px solid var(--line-dark);padding-top:var(--s3)}
.pasos__n{font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.1em;
  color:var(--muted-dark);margin:0 0 10px}
.pasos h3{margin:0 0 8px}
.pasos p{margin:0}

.cats{display:grid;gap:0;grid-template-columns:1fr;margin-top:var(--s4)}
@media (min-width:700px){.cats{grid-template-columns:repeat(2,1fr);column-gap:var(--s6)}}
.cats > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);
  align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.cats b{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.cats span{font-size:.86rem;line-height:1.5;color:var(--muted)}

/* formulario sin tarjeta: campos sobre el fondo, subrayados */
.form-flat{max-width:none}
.form-flat .fgrid{display:grid;grid-template-columns:1fr;column-gap:var(--s5)}
@media (min-width:760px){.form-flat .fgrid{grid-template-columns:1fr 1fr}}
.form-flat .field--full{grid-column:1/-1}
.form-flat .field input,.form-flat .field textarea,.form-flat .field select{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:12px 0}
.form-flat .field select{padding-right:24px}
.form-flat .field input:focus,.form-flat .field textarea:focus,
.form-flat .field select:focus{border-bottom-color:var(--ink)}
.form-flat .field textarea{min-height:96px}

/* el formulario plano vive sobre sección oscura: hay que invertir los subrayados */
.sec--dark .form-flat .field input,.sec--dark .form-flat .field textarea,
.sec--dark .form-flat .field select{border-bottom-color:var(--line-dark);color:var(--bone)}
.sec--dark .form-flat .field input:focus,.sec--dark .form-flat .field textarea:focus,
.sec--dark .form-flat .field select:focus{border-bottom-color:var(--bone)}
.sec--dark .form-flat .field input::placeholder,
.sec--dark .form-flat .field textarea::placeholder{color:rgba(247,245,241,.42)}
/* el desplegable nativo se pinta con los colores del sistema: se fuerzan */
.sec--dark .form-flat .field select option{color:var(--ink);background:#fff}
.sec--dark .form-flat .filebox{border-color:var(--line-dark)}
.sec--dark .form-flat .filebox__h{color:var(--muted-dark)}
.sec--dark .form-flat .filebox:hover{border-color:var(--bone);background:rgba(247,245,241,.05)}

/* ---------- filtros ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s1)}
.filters button{padding:10px 18px;border-radius:var(--pill);font-size:.82rem;
  font-weight:500;box-shadow:inset 0 0 0 1px var(--line);transition:.28s var(--ease)}
.filters button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bone);box-shadow:none}
/* sobre sección oscura los chips se invierten */
.sec--dark .filters button{box-shadow:inset 0 0 0 1px var(--line-dark);color:var(--bone)}
.sec--dark .filters button:hover{box-shadow:inset 0 0 0 1px var(--bone)}
.sec--dark .filters button[aria-pressed="true"]{background:var(--bone);color:var(--ink);box-shadow:none}

/* ---------- formulario ---------- */
#form{scroll-margin-top:110px}
/* icono de Instagram en la barra */
.nav__end{display:flex;align-items:center;gap:10px}
.nav__ig{display:none;width:40px;height:40px;border-radius:50%;place-items:center;
  /* el círculo va siempre relleno, no solo al pasar el cursor */
  background:var(--ink);color:var(--bone);
  transition:background .28s var(--ease),color .28s var(--ease),opacity .28s var(--ease)}
@media (min-width:900px){.nav__ig{display:grid}}
.nav__ig svg{width:19px;height:19px}
.nav__ig:hover{opacity:.78}
.page-hero-dark .nav:not(.is-stuck) .nav__ig{background:var(--bone);color:var(--ink)}
.menu__ig{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line);margin-top:var(--s3)}
.menu__ig svg{width:22px;height:22px}

/* adjuntar archivo */
.filebox{display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1px dashed var(--line);border-radius:var(--r-sm);padding:16px;
  transition:border-color .25s ease,background .25s ease}
.filebox:hover{border-color:var(--ink);background:rgba(17,17,17,.02)}
.filebox svg{width:20px;height:20px;flex:none}
.filebox__t{font-size:.9rem;font-weight:600}
.filebox__h{font-size:.76rem;color:var(--muted);margin-left:auto}
.filebox__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.filebox__input:focus-visible + .filebox,
.field:focus-within .filebox{border-color:var(--ink)}
.field{display:block;margin-bottom:var(--s3)}
.field span{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:.95rem;
  padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:#fff;color:var(--ink);transition:border-color .25s ease}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink)}
.field .small{margin-top:6px}

/* ---------- proveedores: la única página con tono cálido ----------
   La marca no tiene color de acento (negro sobre hueso). Aquí se activan los tonos
   de piedra que ya estaban declarados en la paleta, para que la página no sea un
   bloque negro plano. */
/* el encuadre se pega a la izquierda: el logotipo del cliente vive a la derecha
   y no pinta nada en una página de proveedores */
.prov .bgsec__bg img{object-position:left center}
.prov .eyebrow{color:var(--travertine)}
.prov .creo__n{color:var(--sand)}
.prov .creo__list li{border-top-color:rgba(205,198,183,.26)}
.prov .creo__list li:last-child{border-bottom-color:rgba(205,198,183,.26)}
.prov .btn{background:var(--travertine);color:var(--ink)}
.prov .btn:hover{background:var(--bone)}
.prov .form-flat .field input:focus,.prov .form-flat .field textarea:focus,
.prov .form-flat .field select:focus{border-bottom-color:var(--travertine)}
.prov .form-flat .filebox:hover{border-color:var(--travertine);
  background:rgba(205,198,183,.07)}
.prov a[href^="mailto"]{color:var(--travertine)}

/* pareja de apertura de cada obra: dos fotos chicas en vez de una a todo lo ancho.
   La foto grande se comía la pantalla antes de que empezara la pila. */
.par{display:grid;gap:var(--s2);grid-template-columns:1fr;
  max-width:min(100%,720px);margin-bottom:var(--s5)}
@media (min-width:700px){.par{grid-template-columns:1fr 1fr;gap:var(--s3)}}
@media (min-width:1100px){.par{max-width:min(100%,1152px)}}
.par figure{margin:0;position:relative;border-radius:var(--r-sm);overflow:hidden;
  aspect-ratio:4/3;background:var(--travertine)}
.par img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.par figure:hover img{transform:scale(1.04)}
.par figure::after{content:"";position:absolute;inset:auto 0 0 0;height:44%;
  background:linear-gradient(0deg,rgba(10,11,13,.62),transparent);pointer-events:none}
.par figcaption{position:absolute;left:12px;bottom:9px;z-index:2;
  font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone)}

/* ---------- pila de obra entregada ----------
   Las tarjetas se apilan solas con position:sticky, escalonando el `top`.
   GSAP solo añade el encogido y el velo de la que queda debajo; si no carga,
   la pila se sigue viendo bien. */
.pila{margin-top:var(--s4)}
.pila__c{position:sticky;top:calc(var(--pila-top, 96px) + (var(--i) - 1) * 14px);
  height:clamp(380px,56vh,500px);margin-bottom:var(--s3);
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line-dark);
  background:#202022;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  box-shadow:0 -18px 40px -32px rgba(0,0,0,.95);
  transform-origin:center top;will-change:transform}
.pila__c figure{margin:0;overflow:hidden}
.pila__c figure img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease)}
.pila__c:hover figure img{transform:scale(1.045)}
.pila__b{padding:clamp(24px,3.2vw,48px);display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:14px}
.pila__n{margin:0;font-family:var(--display);font-weight:800;font-size:.72rem;
  letter-spacing:.22em;color:var(--muted-dark);font-variant-numeric:tabular-nums}
.pila__n i{font-style:normal;color:rgba(247,245,241,.3)}
.pila__b h4{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.55rem,3.1vw,2.5rem);line-height:1.02;letter-spacing:-.03em;
  color:var(--bone);max-width:14ch}
.pila__b p{margin:0;font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.62;
  color:var(--muted-dark);max-width:38ch}
.pila__m{margin:0;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-dark);padding-top:14px;border-top:1px solid var(--line-dark);
  /* hereda el max-width de .pila__b p, que le corta la línea a media tarjeta */
  max-width:none;align-self:stretch}
.pila__veil{position:absolute;inset:0;background:#0A0B0D;opacity:0;pointer-events:none}
@media (max-width:760px){
  .pila__c{grid-template-columns:1fr;grid-template-rows:minmax(0,1.05fr) auto;
    height:auto;min-height:clamp(430px,70vh,580px)}
  .pila__b{padding:var(--s3);justify-content:flex-start;gap:10px}
  .pila__b h4{font-size:clamp(1.45rem,6.2vw,2rem)}
  .pila__b p{max-width:40ch}
}

/* ---------- pie ---------- */
.foot{background:var(--carbon);color:var(--bone);padding-top:var(--s8);overflow:hidden}
.foot a:hover{opacity:.62}
.foot__grid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:800px){.foot__grid{grid-template-columns:2fr 1fr 1fr}}
.foot__h{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-dark);margin-bottom:var(--s2)}
.foot__l{display:flex;flex-direction:column;gap:10px;font-size:.9rem}
.foot__mark{margin-top:var(--s7);line-height:.82;overflow:hidden;
  container-type:inline-size}
.foot__mark span{display:block;font-family:var(--display);font-weight:800;
  /* atado al ancho del contenedor: siempre cabe completo, en cualquier pantalla */
  font-size:11.2cqw;letter-spacing:-.055em;
  color:var(--bone);white-space:nowrap;transform:translateY(24%)}
@supports not (font-size:1cqw){
  .foot__mark span{font-size:calc((100vw - var(--pad) * 2) / 9)}
}
.foot__end{border-top:1px solid var(--line-dark);margin-top:var(--s4);
  padding-block:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  justify-content:space-between;font-size:.76rem;color:var(--muted-dark)}

/* WhatsApp flotante */
.wa{position:fixed;right:18px;bottom:18px;z-index:90;width:56px;height:56px;
  border-radius:50%;background:var(--ink);color:var(--bone);
  display:grid;place-items:center;box-shadow:0 10px 34px rgba(0,0,0,.26);
  transition:transform .35s var(--ease);will-change:transform}
.wa svg{width:26px;height:26px}
@media (min-width:900px){.wa{right:26px;bottom:26px}}

/* ---------- animación: estados iniciales ---------- */
.js .rv{opacity:0;transform:translateY(22px)}

.no-js .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js .rv{opacity:1!important;transform:none!important}
  .mq__track{animation:none}
  .pre{display:none!important}
  .hero__scroll{display:none}
  .foot__mark span{transform:none}
}

/* ============================================================
   Amada Mía: tarjeta que voltea + baraja
   ============================================================ */
.flip{perspective:2000px;width:min(480px,82vw);aspect-ratio:3/4;margin-inline:auto;
  position:relative;background:none;padding:0;display:block}
.flip__in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.22,.72,.2,1);will-change:transform}
.flip.is-back .flip__in{transform:rotateY(180deg)}
.flip__f,.flip__b{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;background:#000;
  box-shadow:0 42px 90px rgba(0,0,0,.55)}
.flip__b{transform:rotateY(180deg)}
.flip__f img,.flip__b img{width:100%;height:100%;object-fit:cover}
.flip__tag{position:absolute;left:16px;bottom:16px;z-index:2;
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--bone);
  background:rgba(17,17,17,.62);backdrop-filter:blur(6px);padding:7px 13px;border-radius:var(--pill)}
.flip__hint{margin:var(--s3) auto 0;display:block;text-align:center;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}

/* ---------- Amada Mía: tira de obra ---------- */
.am__strip{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.am__strip{grid-template-columns:repeat(3,1fr);gap:var(--s3)}}
.am__strip figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-sm);
  aspect-ratio:4/3;background:var(--travertine)}
/* velo inferior: el pie se lee igual sobre cielo claro que sobre concreto */
.am__strip figure::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(10,11,13,.68) 0%,rgba(10,11,13,.22) 48%,transparent 100%)}
.am__strip img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.am__strip figure:hover img{transform:scale(1.05)}
.am__strip figcaption{position:absolute;left:12px;bottom:10px;z-index:2;
  font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(247,245,241,.94);text-shadow:0 1px 10px rgba(0,0,0,.85)}

/* ---------- Amada Mía: carrusel ---------- */
.car{width:100%}
.car__stage{position:relative;height:0;padding-bottom:calc(70% * .6);min-height:180px;
  perspective:1400px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
@media (min-width:900px){.car__stage{padding-bottom:0;height:232px}}
.car__s{position:absolute;top:50%;left:50%;margin:0;width:70%;aspect-ratio:5/3;
  border-radius:var(--r-sm);overflow:hidden;background:#000;
  transform-origin:center center;will-change:transform,opacity;
  transition:transform .62s var(--ease),opacity .5s var(--ease),filter .5s var(--ease);
  box-shadow:0 14px 40px rgba(0,0,0,.45)}
.car__s img{width:100%;height:100%;object-fit:cover;display:block}
.car__s figcaption{position:absolute;left:12px;bottom:10px;z-index:2;
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(247,245,241,.95);text-shadow:0 1px 10px rgba(0,0,0,.85);
  opacity:0;transition:opacity .4s ease}
.car__s[data-on="true"] figcaption{opacity:1}
.car__nav{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3)}
.car__arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-dark);
  transition:.28s var(--ease);flex:none}
.car__arrow:hover{background:var(--bone);color:var(--ink);box-shadow:none}
.car__arrow svg{width:16px;height:16px}
.car__dots{display:flex;gap:7px;flex:1}
.car__dots button{width:7px;height:7px;border-radius:50%;background:rgba(247,245,241,.3);
  transition:.3s var(--ease);padding:0}
.car__dots button[aria-selected="true"]{background:var(--bone);width:22px;border-radius:99px}

/* ============================================================
   Ficha expandible de proyecto
   ============================================================ */
.card--btn{display:block;width:100%;text-align:left;background:none;padding:0;border:0;
  cursor:pointer;font:inherit;color:inherit}
.card--btn .card__m::after{content:"";position:absolute;inset:auto 12px 12px auto;
  width:34px;height:34px;border-radius:50%;background:rgba(247,245,241,.92);
  z-index:2;opacity:0;transform:scale(.8);transition:.35s var(--ease)}
.card--btn .card__m::before{content:"";position:absolute;inset:auto 12px 12px auto;
  width:34px;height:34px;z-index:3;opacity:0;transition:.35s var(--ease);
  background:var(--ink);
  -webkit-mask:linear-gradient(#000,#000) center/12px 1.5px no-repeat,
          linear-gradient(#000,#000) center/1.5px 12px no-repeat;
  mask:linear-gradient(#000,#000) center/12px 1.5px no-repeat,
       linear-gradient(#000,#000) center/1.5px 12px no-repeat}
.card--btn:hover .card__m::after,.card--btn:focus-visible .card__m::after,
.card--btn:hover .card__m::before,.card--btn:focus-visible .card__m::before{opacity:1;transform:scale(1)}

.sheet{position:fixed;inset:0;z-index:300;visibility:hidden}
.sheet.is-open{visibility:visible}
.sheet__bd{position:absolute;inset:0;background:rgba(17,17,17,.58);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;
  will-change:opacity}
.sheet__panel{position:absolute;left:50%;margin-left:max(-450px,-50vw);
  top:max(24px,4vh);bottom:0;width:min(900px,100%);
  background:var(--bone);border-radius:var(--r) var(--r) 0 0;
  overflow-y:auto;overscroll-behavior:contain;opacity:0;
  contain:paint}
.sheet__hero{position:relative;aspect-ratio:16/9;background:var(--travertine);overflow:hidden}
.sheet__hero img{position:absolute;inset:0;width:100%!important;height:100%!important;
  max-width:none;object-fit:cover;display:block}
/* franja pegajosa de altura cero: el botón no entra al flujo, así el marco de la
   foto no se encoge para esquivarlo */
.sheet__xwrap{position:sticky;top:0;height:0;z-index:5;
  display:flex;justify-content:flex-end;padding:16px 16px 0;pointer-events:none}
.sheet__x{pointer-events:auto;
  width:42px;height:42px;border-radius:50%;background:var(--bone);color:var(--ink);
  display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.22);
  transition:transform .3s var(--ease)}
.sheet__x:hover{transform:rotate(90deg)}
.sheet__x svg{width:17px;height:17px}
.sheet__body{padding:var(--s4) var(--s4) var(--s7)}
@media (min-width:700px){.sheet__body{padding:var(--s5) var(--s6) var(--s8)}}
.sheet__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.sheet__meta span{font-size:.72rem;letter-spacing:.06em;padding:7px 13px;
  border-radius:var(--pill);box-shadow:inset 0 0 0 1px var(--line)}
.sheet__gal{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr);margin-top:var(--s5)}
@media (min-width:700px){.sheet__gal{grid-template-columns:repeat(3,1fr)}}
.sheet__gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm);
  background:var(--travertine)}
html.sheet-open,html.sheet-open body{overflow:hidden}

/* ---------- bloques de entrega ---------- */
.entrega + .entrega{margin-top:var(--s7);padding-top:var(--s6);
  border-top:1px solid var(--line-dark)}
.entrega__head{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);align-items:baseline;
  justify-content:space-between;margin-bottom:var(--s3)}
.entrega__head h3{margin:0}
.entrega__head p{margin:0}

/* ---------- Amada Mía: banda de la azotea + aérea de ubicación ---------- */
/* la banda de la azotea ahora va DESPUÉS de la rejilla: el margen se invierte */
.am__grid + .am__duo{margin:var(--s6) 0}
/* las dos figuras salen de la MISMA altura sin fijarla a mano: las columnas van en
   proporción a su propio aspecto (16/9 = 1.7778 y 9/16 = .5625), y como el gap se
   descuenta antes de repartir los fr, las alturas coinciden exactas */
.am__duo{display:grid;grid-template-columns:minmax(0,1.7778fr) minmax(0,.5625fr);
  gap:var(--s3);align-items:start}
.am__band,.am__loc{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--wood)}
.am__band{aspect-ratio:16/9}
.am__loc{aspect-ratio:9/16}
.am__band img,.am__loc img{width:100%;height:100%;object-fit:cover;display:block}
.am__band::after,.am__loc::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,11,13,.72) 0%,rgba(10,11,13,.18) 34%,transparent 62%)}
.am__band figcaption,.am__loc figcaption{position:absolute;left:var(--s3);bottom:var(--s3);
  right:var(--s3);z-index:2;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,241,.94)}
/* la columna angosta no aguanta la sangría de 24px ni el interletrado ancho */
.am__loc figcaption{left:var(--s2);right:var(--s2);bottom:var(--s2);
  font-size:.6rem;letter-spacing:.09em;line-height:1.55}
@media (max-width:900px){
  /* apiladas: la vertical a 3/4 para que no se coma la pantalla del celular
     (object-fit:cover recorta al centro, que es donde caen el mar y la torre) */
  /* el minmax(0,…) es obligatorio: con un 1fr pelón la columna crece al ancho
     intrínseco de la imagen (1080px) y desborda la pantalla en horizontal */
  .am__duo{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .am__band{aspect-ratio:4/3}
  .am__loc{aspect-ratio:3/4}
}

/* ---------- Amada Mía: compacta, tarjeta a la izquierda ---------- */
.am{padding-block:var(--s6)}
.am__grid{display:grid;gap:var(--s5);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){
  .am__grid{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:var(--s6);align-items:center}
}
.am .flip{margin-inline:0}
.am__side{display:flex;flex-direction:column;gap:var(--s4)}
@media (min-width:900px){
  .am__grid{grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:var(--s6)}
  /* el bloque tiene tope de 560px dentro de una columna mucho más ancha: pegado a la
     izquierda quedaba flotando a media página. Se alinea al borde derecho del contenido. */
  .am__side{width:100%;max-width:560px;margin-left:auto}
}
.am__data{margin:0;display:grid;gap:var(--s3)}
.am__data > div{display:flex;align-items:baseline;gap:var(--s3);
  border-bottom:1px solid var(--line-dark);padding-bottom:var(--s2)}
.am__data dt{font-family:var(--display);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(2rem,3.6vw,3.1rem);line-height:1;color:var(--bone);
  font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:3.2em}
.am__u{font-size:.42em;margin-left:.18em;letter-spacing:0}
.am__data dd{margin:0;font-size:.84rem;line-height:1.4;color:var(--muted-dark)}
.am__note{max-width:44ch}
@media (min-width:900px){
  .am .flip__hint{text-align:left}
}

/* ---------- aviso de privacidad ---------- */
.consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px;font-size:.84rem;line-height:1.5;color:var(--muted);cursor:pointer}
.consent input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal{max-width:70ch}
.legal h2{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.025em;margin:var(--s6) 0 var(--s2)}
.legal p,.legal li{color:rgba(17,17,17,.78)}
.legal ul{padding-left:1.2em;margin:0 0 var(--s2)} .legal li{margin-bottom:6px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .falta{background:#FFE58A;color:var(--ink);padding:1px 6px;border-radius:4px;font-weight:600}