/* =========================================================================
   MontePeña Propiedades — sistema visual
   Paleta derivada del logo: dorado + carbón cálido. Sin cremas de fondo.
   ========================================================================= */

:root{
  /* superficies */
  --ink:        oklch(0.152 0.008 62);
  --ink-2:      oklch(0.190 0.010 62);
  --surface:    oklch(0.222 0.012 64);
  --surface-2:  oklch(0.262 0.013 66);
  --line:       oklch(0.325 0.014 68);
  --line-soft:  oklch(0.262 0.010 66);

  /* marca */
  --gold:       oklch(0.760 0.118 86);
  --gold-hi:    oklch(0.845 0.090 88);
  --gold-dim:   oklch(0.560 0.090 86);

  /* texto */
  --fg:         oklch(0.960 0.010 88);
  --fg-2:       oklch(0.800 0.012 88);
  --fg-3:       oklch(0.665 0.012 88);

  /* tipografía */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ritmo */
  --gutter: clamp(1.05rem, 4.2vw, 3.25rem);
  --sec-y:  clamp(3.1rem, 7.2vw, 6.6rem);
  --r-s: 8px;  --r-m: 14px;  --r-l: 20px;  --r-xl: 26px;
  --hdr-h: 62px;

  /* movimiento */
  --e: cubic-bezier(.22,.61,.36,1);
  --t-fast: 140ms;
  --t: 210ms;
  --t-slow: 280ms;

  /* capas */
  --z-base: 1;
  --z-fab: 60;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-lightbox: 340;
  --z-loader: 400;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--sans); font-size:clamp(.9rem,.855rem + .19vw,1rem);
  line-height:1.62; font-weight:400; letter-spacing:.002em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{ position:fixed; inset:0 0 auto 0; width:100%; overflow:hidden; }
img,picture,video,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.012em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--gold); color:oklch(0.16 0.01 62); }

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:4px;
}

.wrap{ width:min(100% - (var(--gutter) * 2), 1240px); margin-inline:auto; }
.wrap--narrow{ width:min(100% - (var(--gutter) * 2), 760px); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:calc(var(--z-loader) + 1);
  background:var(--gold); color:oklch(0.16 0.01 62); padding:.7rem 1.1rem; font-weight:600;
}
.skip:focus{ left:.6rem; top:.6rem; }

/* ── Tipografía compartida ────────────────────────────────────────────── */
.eyebrow{
  font-size:.665rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .7rem;
}
.sec__title{ font-size:clamp(1.5rem,1.16rem + 1.42vw,2.55rem); font-variation-settings:'opsz' 42; }
.sec__sub{ color:var(--fg-2); max-width:56ch; margin-top:.7rem; font-size:clamp(.875rem,.845rem + .13vw,.98rem); }

.sec{ padding-block:var(--sec-y); position:relative; scroll-margin-top:calc(var(--hdr-h) + 8px); }
.sec__head{ margin-bottom:clamp(1.4rem,3vw,2.4rem); }
.sec__head--row{ display:grid; gap:.75rem; }
@media (min-width:900px){
  .sec__head--row{ grid-template-columns:1fr auto; align-items:end; gap:2.5rem; }
  .sec__head--row .sec__sub{ margin-top:0; text-align:right; max-width:36ch; }
}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:transparent; --btn-fg:var(--fg);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.15rem; border-radius:999px; border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:600; font-size:.845rem; letter-spacing:.01em; cursor:pointer;
  transition:transform var(--t-fast) var(--e), opacity var(--t-fast) var(--e), background-color var(--t) var(--e), border-color var(--t) var(--e), color var(--t) var(--e);
  min-height:44px; text-align:center;
}
.btn:active{ transform:scale(.97); }
.btn--gold{ --btn-bg:var(--gold); --btn-fg:oklch(0.185 0.018 66); }
.btn--gold:hover{ --btn-bg:var(--gold-hi); }
.btn--ghost{ border-color:oklch(0.72 0.02 80 / .38); color:var(--fg); backdrop-filter:blur(6px); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-hi); }
.btn--full{ width:100%; }
.btn--lg{ padding:.92rem 1.5rem; font-size:.92rem; min-height:52px; }
.ico-wa{ width:18px; height:18px; fill:currentColor; flex:none; }

.iconbtn{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  background:oklch(0.24 0.01 66 / .82); border:1px solid var(--line); border-radius:999px;
  cursor:pointer; transition:transform var(--t-fast) var(--e), background-color var(--t) var(--e);
}
.iconbtn:hover{ background:oklch(0.30 0.012 66 / .95); }
.iconbtn:active{ transform:scale(.94); }
.iconbtn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }

/* ── Loader ───────────────────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:var(--z-loader); background:var(--ink);
  display:grid; place-items:center;
  transition:opacity var(--t-slow) var(--e), visibility var(--t-slow);
}
/* salvavidas: si el JS no corre, el loader se retira igual */
.loader{ animation:loaderFailsafe 340ms var(--e) 2.4s forwards; }
@keyframes loaderFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__inner{ display:grid; justify-items:center; gap:.85rem; padding:1rem; }
.loader__mark{ width:clamp(96px,22vw,140px); height:auto; opacity:0; animation:markIn 420ms var(--e) 60ms forwards; }
.loader__word{
  font-family:var(--serif); font-size:1.06rem; letter-spacing:.08em; color:var(--fg-2);
  opacity:0; animation:markIn 380ms var(--e) 220ms forwards;
}
.loader__bar{ width:132px; height:2px; background:var(--line-soft); border-radius:2px; overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:38%; background:var(--gold); border-radius:2px; animation:sweep 900ms var(--e) infinite; }
@keyframes markIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes sweep{ 0%{transform:translateX(-110%)} 100%{transform:translateX(370%)} }

/* ── Header ───────────────────────────────────────────────────────────── */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-header);
  padding-top:env(safe-area-inset-top);
  transition:background-color var(--t) var(--e), border-color var(--t) var(--e);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:oklch(0.152 0.008 62 / .82); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line-soft);
}
.hdr__in{
  width:min(100% - (var(--gutter) * 2), 1240px); margin-inline:auto;
  height:var(--hdr-h); display:flex; align-items:center; gap:1rem;
  transition:height var(--t) var(--e);
}
.hdr.is-stuck .hdr__in{ height:56px; }
.hdr__logo{ flex:none; display:flex; align-items:center; padding-block:.45rem; }
.hdr__logo img{ height:34px; width:auto; transition:height var(--t) var(--e); }
.hdr.is-stuck .hdr__logo img{ height:29px; }
.hdr__nav{ display:none; }
.hdr__cta{ display:none; }
.hdr__burger{
  margin-left:auto; width:44px; height:44px; display:grid; place-content:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:0;
}
.hdr__burger span{ display:block; width:22px; height:1.6px; background:var(--fg); border-radius:2px; transition:transform var(--t) var(--e), opacity var(--t) var(--e); }
.hdr__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

@media (min-width:960px){
  :root{ --hdr-h:78px; }
  .hdr__logo img{ height:42px; }
  .hdr.is-stuck .hdr__logo img{ height:35px; }
  .hdr__burger{ display:none; }
  .hdr__nav{
    display:flex; gap:clamp(1.1rem,2.1vw,2rem); margin-left:auto; align-items:center;
    font-size:.845rem; font-weight:500; color:var(--fg-2);
  }
  .hdr__nav a{ position:relative; padding-block:.62rem; transition:color var(--t) var(--e); }
  .hdr__nav a::after{
    content:''; position:absolute; left:0; right:0; bottom:.34rem; height:1px; background:var(--gold);
    transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--e);
  }
  .hdr__nav a:hover{ color:var(--fg); }
  .hdr__nav a:hover::after,
  .hdr__nav a.is-active::after{ transform:scaleX(1); }
  .hdr__nav a.is-active{ color:var(--gold); }
  .hdr__cta{ display:inline-flex; margin-left:.4rem; padding:.6rem 1rem; font-size:.8rem; }
}

/* ── Drawer ───────────────────────────────────────────────────────────── */
.drawer{ position:fixed; inset:0; z-index:var(--z-drawer); }
.drawer::before{
  content:''; position:absolute; inset:0; background:oklch(0.10 0.006 60 / .62);
  opacity:0; transition:opacity var(--t) var(--e);
}
.drawer.is-open::before{ opacity:1; }
.drawer__panel{
  position:absolute; inset:0 0 0 auto; width:min(88vw,380px);
  background:var(--ink-2); border-left:1px solid var(--line-soft);
  padding:calc(env(safe-area-inset-top) + 1.05rem) 1.35rem calc(env(safe-area-inset-bottom) + 1.35rem);
  display:flex; flex-direction:column; gap:1.1rem;
  transform:translateX(100%); transition:transform var(--t-slow) var(--e);
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.drawer__top img{ height:36px; width:auto; }
.drawer__nav{ display:grid; gap:.15rem; margin-top:.4rem; }
.drawer__nav a{
  display:flex; align-items:baseline; gap:.85rem; padding:.78rem .25rem;
  border-bottom:1px solid var(--line-soft); font-size:1.02rem; font-family:var(--serif);
  transition:color var(--t) var(--e), transform var(--t) var(--e);
}
.drawer__nav a span{ font-family:var(--sans); font-size:.62rem; letter-spacing:.16em; color:var(--gold); font-weight:700; }
.drawer__nav a:hover{ color:var(--gold-hi); transform:translateX(3px); }
.drawer__panel .btn{ margin-top:auto; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-start; isolation:isolate; overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 100%; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, oklch(0.13 0.008 60 / .78) 0%, oklch(0.13 0.008 60 / .30) 34%, transparent 52%),
    linear-gradient(0deg, oklch(0.12 0.008 60 / .82) 0%, transparent 26%);
}
/* static a propósito: así .hero__facts se ancla al hero, no a este bloque */
.hero__in{
  position:static; width:min(100% - (var(--gutter) * 2), 1240px); margin-inline:auto;
  padding-top:calc(var(--hdr-h) + env(safe-area-inset-top) + clamp(1rem,4vw,2.2rem));
  max-width:none;
}
.hero__eyebrow{ margin-bottom:.85rem; }
.hero__h1{
  font-size:clamp(1.95rem,1.34rem + 2.72vw,4rem);
  font-variation-settings:'opsz' 96; font-weight:400; letter-spacing:-.02em; line-height:1.04;
  max-width:15ch;
}
.hero__h1 em{ font-style:normal; color:var(--gold); font-weight:500; }
.hero__lead{
  margin-top:.95rem; color:var(--fg-2); max-width:44ch;
  font-size:clamp(.9rem,.86rem + .2vw,1.02rem);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.35rem; }
.hero__cta .btn{ flex:1 1 auto; min-width:150px; }
.hero__facts{
  position:absolute; left:var(--gutter); right:var(--gutter);
  bottom:calc(env(safe-area-inset-bottom) + 4.35rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
  border-top:1px solid oklch(0.72 0.02 80 / .22); padding-top:.75rem;
}
.hero__facts li{ display:grid; gap:.1rem; }
.hero__facts b{ font-family:var(--serif); font-size:clamp(1.02rem,.9rem + .55vw,1.4rem); color:var(--gold); font-weight:500; line-height:1; }
.hero__facts span{ font-size:.63rem; letter-spacing:.045em; color:var(--fg-3); line-height:1.25; }
.hero__cue{ display:none; }

@media (min-width:768px) and (min-aspect-ratio:1/1){
  .hero{ min-height:min(94svh,820px); justify-content:center; }
  .hero__media img{ object-position:100% 50%; }
  .hero__scrim{
    background:
      linear-gradient(90deg, oklch(0.13 0.008 60 / .92) 0%, oklch(0.13 0.008 60 / .72) 28%, oklch(0.13 0.008 60 / .18) 50%, transparent 66%),
      linear-gradient(0deg, oklch(0.12 0.008 60 / .55) 0%, transparent 30%);
  }
  .hero__in{ padding-top:calc(var(--hdr-h) + 1rem); }
  .hero__h1{ max-width:13ch; }
  .hero__facts{
    position:static; margin-top:2.1rem; max-width:min(30rem, 46%);
    grid-template-columns:repeat(3,auto); justify-content:start; gap:clamp(1.2rem,3vw,2.6rem);
    padding-top:1rem;
  }
  .hero__cta .btn{ flex:0 0 auto; }
  .hero__cue{
    display:block; position:absolute; left:50%; bottom:1.4rem; translate:-50% 0;
    width:24px; height:38px; border:1px solid oklch(0.72 0.02 80 / .35); border-radius:999px;
  }
  .hero__cue span{
    position:absolute; left:50%; top:8px; translate:-50% 0; width:2px; height:7px;
    background:var(--gold); border-radius:2px; animation:cue 1.5s var(--e) infinite;
  }
  @keyframes cue{ 0%{opacity:0; transform:translateY(0)} 30%{opacity:1} 100%{opacity:0; transform:translateY(13px)} }
}
@media (min-width:1200px){
  .hero__in{ max-width:none; }
  .hero__h1{ font-size:clamp(3rem,2rem + 2.6vw,4.1rem); }
}

/* ── Buscador ─────────────────────────────────────────────────────────── */
/* Sección de conversión: es la que tiene que saltar a la vista.
   Se separa del resto con un fondo cálido y la tarjeta lleva borde dorado. */
.sec--finder{
  background:
    radial-gradient(130% 100% at 50% 0%, oklch(0.315 0.052 74 / .78), transparent 66%),
    linear-gradient(180deg, oklch(0.215 0.020 68), var(--ink-2) 78%);
  border-block:1px solid oklch(0.42 0.055 78 / .5);
  padding-block:clamp(3.5rem,8vw,7rem);
}
.sec--finder .sec__head{ text-align:center; }
.sec--finder .sec__sub{ margin-inline:auto; }
.finder{
  background:linear-gradient(180deg, oklch(0.268 0.020 70), oklch(0.212 0.012 66));
  border:1px solid oklch(0.50 0.070 80 / .6); border-radius:var(--r-xl);
  padding:clamp(1.5rem,3.6vw,2.6rem); position:relative;
  max-width:880px; margin-inline:auto;
  box-shadow:0 26px 60px -34px oklch(0 0 0 / .95), inset 0 1px 0 oklch(0.9 0.03 85 / .09);
}
.finder__badge{
  position:absolute; top:0; left:50%; translate:-50% -50%;
  background:var(--gold); color:oklch(0.185 0.018 66);
  font-size:.645rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase;
  padding:.4rem .95rem; border-radius:999px; margin:0; white-space:nowrap;
  box-shadow:0 6px 18px -10px oklch(0 0 0 / .9);
}
/* progreso por segmentos: se ve de un vistazo cuánto falta */
.finder__bar{ display:flex; gap:.28rem; margin-top:.55rem; }
.finder__bar i{
  flex:1; height:4px; border-radius:99px; background:oklch(0.36 0.014 68);
  transition:background-color var(--t-slow) var(--e), transform var(--t-slow) var(--e);
  transform-origin:center;
}
.finder__bar i.is-on{ background:var(--gold); }
.finder__bar i.is-now{ background:var(--gold-hi); transform:scaleY(1.6); }
.finder__meta{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:.85rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-2); font-weight:700; min-height:32px;
}
.finder__back{
  background:none; border:0; color:var(--gold); cursor:pointer; padding:.3rem .1rem;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  transition:transform var(--t-fast) var(--e), opacity var(--t-fast) var(--e);
}
.finder__back:hover{ opacity:.75; }
.finder__back:active{ transform:scale(.95); }

.fstep{ animation:stepIn var(--t-slow) var(--e) both; }
@keyframes stepIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.fstep__q{ font-size:clamp(1.3rem,1.06rem + 1vw,1.95rem); font-variation-settings:'opsz' 40; }
.fstep__hint{ color:var(--fg-2); font-size:.855rem; margin-top:.45rem; }
.fopts{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; margin-top:1.3rem; }
@media (min-width:640px){ .fopts{ grid-template-columns:repeat(3,1fr); gap:.7rem; } }
.fopt{
  display:flex; align-items:center; text-align:left; gap:.55rem; min-height:70px;
  padding:.85rem 1rem; border-radius:var(--r-m); cursor:pointer;
  background:oklch(0.325 0.016 68 / .6); border:1px solid oklch(0.45 0.020 72 / .55); color:var(--fg);
  font-size:.875rem; font-weight:600; line-height:1.3;
  transition:transform var(--t-fast) var(--e), background-color var(--t) var(--e), border-color var(--t) var(--e), color var(--t) var(--e);
}
.fopt:hover{ border-color:var(--gold); background:oklch(0.365 0.030 76 / .7); }
.fopt:active{ transform:scale(.975); }
.fopt.is-on{ background:oklch(0.42 0.070 82 / .75); border-color:var(--gold); color:var(--fg); }
.fopt.is-on::after{ content:'✓'; margin-left:auto; color:var(--gold-hi); font-weight:800; font-size:1.05rem; }

.field{ margin-top:1.05rem; }
.field label{ display:block; font-size:.745rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); font-weight:700; margin-bottom:.45rem; }
.field .opt{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--fg-3); }
.field input,.field textarea{
  width:100%; padding:.9rem 1rem; border-radius:var(--r-m); resize:vertical;
  background:oklch(0.175 0.010 62); border:1px solid oklch(0.42 0.018 70 / .6); color:var(--fg);
  font-size:1rem;
  transition:border-color var(--t) var(--e), box-shadow var(--t) var(--e);
  min-height:56px;
}
.field input:focus,.field textarea:focus{ box-shadow:0 0 0 3px oklch(0.76 0.118 86 / .22); }
.field input::placeholder,.field textarea::placeholder{ color:oklch(0.52 0.008 80); }
.field input:focus,.field textarea:focus{ border-color:var(--gold); outline:none; }
.field.has-err input,.field.has-err textarea{ border-color:oklch(0.62 0.16 28); }
.field__err{ display:none; color:oklch(0.74 0.14 28); font-size:.74rem; margin-top:.3rem; }
.field.has-err .field__err{ display:block; }
.fstep__legal{ color:var(--fg-3); font-size:.72rem; margin-top:.6rem; text-align:center; }
#finderSend{ margin-top:1.05rem; }

.finder__resume{
  margin-top:1.2rem; border-top:1px dashed oklch(0.45 0.020 72 / .5); padding-top:1rem;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.finder__chip{
  font-size:.73rem; padding:.34rem .7rem; border-radius:999px;
  background:oklch(0.32 0.016 68 / .8); border:1px solid oklch(0.45 0.020 72 / .5); color:var(--fg-2);
}
.finder__chip b{ color:var(--gold); font-weight:600; }

/* ── Obra ─────────────────────────────────────────────────────────────── */
.sec--obra{ background:var(--ink-2); }
.obra{
  display:grid; grid-auto-flow:column; grid-auto-columns:70vw; gap:.7rem;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1);
  padding-bottom:.5rem; scrollbar-width:none;
}
.obra::-webkit-scrollbar{ display:none; }
@media (min-width:720px){
  .obra{ grid-auto-flow:row; grid-template-columns:repeat(2,1fr); grid-auto-columns:auto; gap:1rem; overflow:visible; padding-inline:0; margin-inline:0; }
}
@media (min-width:1060px){ .obra{ grid-template-columns:repeat(4,1fr); gap:.85rem; } }

.ocard{
  position:relative; scroll-snap-align:start; border-radius:var(--r-l); overflow:hidden;
  background:var(--surface); border:1px solid var(--line-soft); cursor:pointer; text-align:left;
  padding:0; display:block; width:100%; aspect-ratio:3/4;
  transition:transform var(--t) var(--e), border-color var(--t) var(--e);
}
.ocard:hover{ border-color:var(--gold-dim); }
@media (hover:hover){ .ocard:hover{ transform:translateY(-4px); } }
.ocard:active{ transform:scale(.985); }
.ocard img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--e);
}
@media (hover:hover){ .ocard:hover img{ transform:scale(1.05); } }
.ocard__grad{
  position:absolute; inset:0;
  background:linear-gradient(0deg, oklch(0.11 0.008 60 / .93) 4%, oklch(0.11 0.008 60 / .45) 34%, transparent 62%);
}
.ocard__body{ position:absolute; inset:auto 0 0 0; padding:1rem .95rem 1.05rem; display:grid; gap:.45rem; }
.ocard__tag{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold);
}
.ocard__name{ font-size:clamp(1.05rem,.95rem + .45vw,1.3rem); font-variation-settings:'opsz' 36; }
.ocard__meta{ display:flex; flex-wrap:wrap; gap:.3rem; }
.ocard__meta span{
  font-size:.645rem; letter-spacing:.04em; padding:.2rem .5rem; border-radius:999px;
  border:1px solid oklch(0.72 0.02 80 / .28); color:var(--fg-2); background:oklch(0.2 0.01 62 / .45);
}
.ocard__go{
  margin-top:.2rem; font-size:.735rem; font-weight:700; color:var(--fg);
  display:inline-flex; align-items:center; gap:.35rem;
}
.ocard__go::after{ content:'→'; color:var(--gold); transition:transform var(--t) var(--e); }
@media (hover:hover){ .ocard:hover .ocard__go::after{ transform:translateX(3px); } }
.obra__note{ margin-top:1.05rem; color:var(--fg-3); font-size:.775rem; max-width:60ch; }

/* ── Trayectoria ──────────────────────────────────────────────────────── */
.sec--tray{ padding-bottom:0; background:var(--ink); }
.tray{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(190px,64vw); gap:.6rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1); padding-bottom:.4rem;
}
.tray::-webkit-scrollbar{ display:none; }
@media (min-width:760px){
  .tray{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto; overflow:visible; padding-inline:0; margin-inline:0; gap:.75rem; }
}
@media (min-width:1100px){ .tray{ grid-template-columns:repeat(6,1fr); gap:.5rem; } }
.tray li{
  scroll-snap-align:start; border-top:2px solid var(--line); padding:.9rem .1rem 0;
  display:grid; gap:.3rem; align-content:start; position:relative;
  transition:border-color var(--t) var(--e);
}
.tray li::before{
  content:''; position:absolute; top:-4px; left:0; width:6px; height:6px; border-radius:999px;
  background:var(--line);
}
.tray li.has-media{ border-top-color:var(--gold-dim); }
.tray li.has-media::before{ background:var(--gold); }
.tray li b{ font-family:var(--serif); font-size:1rem; font-weight:500; line-height:1.2; }
.tray li span{ font-size:.7rem; color:var(--fg-3); letter-spacing:.03em; }
.tray li button{
  margin-top:.2rem; background:none; border:0; padding:.25rem 0; cursor:pointer;
  color:var(--gold); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-align:left;
  transition:opacity var(--t-fast) var(--e);
}
.tray li button:hover{ opacity:.72; }
/* el area tactil cubre toda la tarjeta, no solo el texto */
.tray li button::after{ content:''; position:absolute; inset:0; }

/* Franja aérea: gira sola sin parar y además se puede arrastrar o
   navegar con flechas. El movimiento lo lleva el JS sobre scrollLeft,
   por eso aquí no hay scroll-snap (pelearía con el avance continuo). */
.aereas{ margin-top:clamp(1.7rem,4vw,2.8rem); position:relative; }
.aereas__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:44vw; gap:.4rem;
  overflow-x:auto; scrollbar-width:none; cursor:grab;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.aereas__track.is-grabbing{ cursor:grabbing; }
.aereas__track::-webkit-scrollbar{ display:none; }
@media (min-width:760px){ .aereas__track{ grid-auto-columns:20vw; } }
@media (min-width:1200px){ .aereas__track{ grid-auto-columns:15vw; } }
.aereas__track button{
  padding:0; border:0; background:none; cursor:inherit;
  aspect-ratio:3/4; overflow:hidden; position:relative;
  transition:transform var(--t) var(--e);
}
.aereas__track img{
  width:100%; height:100%; object-fit:cover; pointer-events:none;
  filter:saturate(.86) contrast(1.03);
  transition:filter var(--t-slow) var(--e), transform var(--t-slow) var(--e);
}
@media (hover:hover){ .aereas__track button:hover img{ filter:none; transform:scale(1.04); } }

.aereas__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:44px; height:44px; display:none; place-items:center; cursor:pointer;
  border-radius:999px; border:1px solid var(--line);
  background:oklch(0.19 0.010 62 / .84); backdrop-filter:blur(8px);
  transition:transform var(--t-fast) var(--e), background-color var(--t) var(--e), border-color var(--t) var(--e);
}
.aereas__nav svg{ width:20px; height:20px; fill:none; stroke:var(--fg); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.aereas__nav:hover{ background:oklch(0.26 0.012 64 / .95); border-color:var(--gold-dim); }
.aereas__nav:active{ transform:translateY(-50%) scale(.93); }
.aereas__nav--prev{ left:clamp(.6rem,1.6vw,1.4rem); }
.aereas__nav--next{ right:clamp(.6rem,1.6vw,1.4rem); }
@media (hover:hover) and (pointer:fine){ .aereas__nav{ display:grid; } }

/* ── Sobre ────────────────────────────────────────────────────────────── */
.sec--about{ background:var(--ink-2); border-top:1px solid var(--line-soft); }
.about{ display:grid; gap:clamp(1.4rem,4vw,3.4rem); align-items:center; }
@media (min-width:880px){ .about{ grid-template-columns:0.82fr 1fr; } }
.about__media{ position:relative; border-radius:var(--r-l); overflow:hidden; aspect-ratio:4/5; }
@media (min-width:880px){ .about__media{ aspect-ratio:3/4; } }
.about__media img{ width:100%; height:100%; object-fit:cover; }
.about__stamp{
  position:absolute; right:.85rem; bottom:.85rem; display:grid; justify-items:center;
  background:oklch(0.152 0.008 62 / .84); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:var(--r-m); padding:.55rem .85rem;
}
.about__stamp span{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); }
.about__stamp b{ font-family:var(--serif); font-size:1.4rem; color:var(--gold); font-weight:500; line-height:1.1; }
.about__copy p{ color:var(--fg-2); margin-top:.85rem; max-width:52ch; }
.about__list{ display:grid; gap:.55rem; margin:1.2rem 0 1.4rem; }
.about__list li{
  display:grid; gap:.1rem; padding-left:.85rem; border-left:2px solid var(--gold-dim);
  font-size:.83rem; color:var(--fg-3);
}
.about__list b{ color:var(--fg); font-size:.87rem; font-weight:700; }

/* ── Videos ───────────────────────────────────────────────────────────── */
.sec--videos{ background:var(--ink); }
/* material grabado en vertical: carrusel tipo reel en movil, grid de 3 en escritorio */
.vgrid{
  display:grid; grid-auto-flow:column; grid-auto-columns:58vw; gap:.55rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1); padding-bottom:.4rem;
}
.vgrid::-webkit-scrollbar{ display:none; }
.vgrid .vcard{ scroll-snap-align:start; }
@media (min-width:760px){
  .vgrid{
    grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto;
    gap:.8rem; overflow:visible; padding-inline:0; margin-inline:0;
  }
}
.vcard{
  position:relative; aspect-ratio:4/5; border-radius:var(--r-m); overflow:hidden;
  border:1px solid var(--line-soft); background:var(--surface); cursor:pointer; padding:0;
  transition:transform var(--t) var(--e), border-color var(--t) var(--e);
}
.vcard:hover{ border-color:var(--gold-dim); }
.vcard:active{ transform:scale(.985); }
.vcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--e); }
@media (hover:hover){ .vcard:hover img{ transform:scale(1.05); } }
.vcard__grad{ position:absolute; inset:0; background:linear-gradient(0deg, oklch(0.11 0.008 60 / .9) 6%, transparent 55%); }
.vcard__play{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:52px; height:52px; border-radius:999px; display:grid; place-items:center;
  background:oklch(0.152 0.008 62 / .55); border:1px solid oklch(0.85 0.02 80 / .5);
  backdrop-filter:blur(6px); transition:transform var(--t) var(--e), background-color var(--t) var(--e);
}
.vcard__play svg{ width:17px; height:17px; fill:var(--fg); margin-left:2px; }
@media (hover:hover){ .vcard:hover .vcard__play{ transform:translate(-50%,-50%) scale(1.08); background:oklch(0.76 0.118 86 / .92); } }
@media (hover:hover){ .vcard:hover .vcard__play svg{ fill:oklch(0.185 0.018 66); } }
.vcard__body{ position:absolute; inset:auto 0 0 0; padding:.75rem .8rem; text-align:left; display:grid; gap:.15rem; }
.vcard__proj{ font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.vcard__title{ font-family:var(--serif); font-size:.95rem; font-weight:500; }
.vcard__dur{ font-size:.66rem; color:var(--fg-3); }

/* ── Proceso ──────────────────────────────────────────────────────────── */
.sec--proc{ background:var(--ink-2); border-block:1px solid var(--line-soft); }
.proc{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media (min-width:900px){ .proc{ grid-template-columns:repeat(4,1fr); gap:1rem; } }
.proc li{
  background:oklch(0.222 0.012 64 / .6); border:1px solid var(--line-soft); border-radius:var(--r-m);
  padding:.95rem .85rem; display:grid; gap:.3rem; align-content:start;
  transition:border-color var(--t) var(--e), transform var(--t) var(--e);
}
@media (hover:hover){ .proc li:hover{ border-color:var(--gold-dim); transform:translateY(-3px); } }
.proc b{ font-family:var(--serif); font-size:.95rem; color:var(--gold); font-weight:500; }
.proc h3{ font-size:.94rem; font-family:var(--sans); font-weight:700; letter-spacing:0; }
.proc p{ font-size:.775rem; color:var(--fg-3); line-height:1.5; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.sec--faq{ background:var(--ink); }
.faq{ display:grid; gap:.4rem; }
.faq details{ border:1px solid var(--line-soft); border-radius:var(--r-m); background:oklch(0.222 0.012 64 / .5); overflow:hidden; transition:border-color var(--t) var(--e); }
.faq details[open]{ border-color:var(--gold-dim); }
.faq summary{
  list-style:none; cursor:pointer; padding:.85rem 2.6rem .85rem .95rem; position:relative;
  font-weight:600; font-size:.885rem; min-height:52px; display:flex; align-items:center;
  transition:color var(--t) var(--e);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-hi); }
.faq summary::after{
  content:''; position:absolute; right:1rem; top:50%; width:9px; height:9px;
  border-right:1.7px solid var(--gold); border-bottom:1.7px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform var(--t) var(--e);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.faq .faq__a{ padding:0 .95rem .95rem; color:var(--fg-2); font-size:.845rem; max-width:64ch; }

/* ── Contacto ─────────────────────────────────────────────────────────── */
.sec--contact{
  background:
    radial-gradient(100% 90% at 12% 100%, oklch(0.26 0.030 78 / .55), transparent 60%),
    var(--ink-2);
  border-top:1px solid var(--line-soft);
}
.contact{ display:grid; gap:clamp(1.5rem,4vw,3.2rem); align-items:center; }
@media (min-width:860px){ .contact{ grid-template-columns:1fr 1fr; } }
.contact__copy .btn{ margin-top:1.2rem; }
.contact__data{ display:grid; grid-template-columns:1fr; gap:.5rem; }
@media (min-width:520px){ .contact__data{ grid-template-columns:repeat(2,1fr); } }
.contact__data li{
  position:relative;
  background:oklch(0.222 0.012 64 / .55); border:1px solid var(--line-soft); border-radius:var(--r-m);
  padding:.7rem .8rem; display:grid; gap:.15rem; min-width:0;
}
.contact__data span{ font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-3); font-weight:700; }
.contact__data a,.contact__data b{
  font-size:.8rem; font-weight:600; color:var(--fg); overflow-wrap:anywhere;
  transition:color var(--t) var(--e);
}
.contact__data a:hover{ color:var(--gold-hi); }
.contact__data a::after{ content:''; position:absolute; inset:0; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot{ background:var(--ink); border-top:1px solid var(--line-soft); padding-block:clamp(1.8rem,4vw,2.8rem) calc(env(safe-area-inset-bottom) + 5rem); }
.foot__in{ display:grid; gap:.7rem; justify-items:center; text-align:center; }
.foot__in img{ height:44px; width:auto; }
.foot p{ color:var(--fg-3); font-size:.8rem; max-width:44ch; }
.foot small{ color:oklch(0.5 0.008 80); font-size:.7rem; }
@media (min-width:760px){ .foot{ padding-bottom:clamp(1.8rem,4vw,2.8rem); } }

/* ── FAB WhatsApp ─────────────────────────────────────────────────────── */
.wafab{
  position:fixed; right:clamp(.85rem,3vw,1.5rem);
  bottom:calc(env(safe-area-inset-bottom) + clamp(.85rem,3vw,1.5rem));
  z-index:var(--z-fab); width:52px; height:52px; border-radius:999px; display:grid; place-items:center;
  background:var(--gold); color:oklch(0.185 0.018 66);
  box-shadow:0 10px 26px -12px oklch(0 0 0 / .95);
  transition:transform var(--t) var(--e), background-color var(--t) var(--e);
}
.wafab svg{ width:26px; height:26px; fill:currentColor; }
.wafab:hover{ background:var(--gold-hi); }
.wafab:active{ transform:scale(.94); }
/* se aparta donde ya hay un CTA de WhatsApp grande en pantalla */
.wafab.is-away{ opacity:0; transform:scale(.82); pointer-events:none; }
body.is-locked .wafab{ opacity:0; pointer-events:none; }

/* ── Modales ──────────────────────────────────────────────────────────── */
.modal{ position:fixed; inset:0; z-index:var(--z-modal); display:grid; }
.modal__scrim{
  position:absolute; inset:0; background:oklch(0.09 0.006 60 / .74); backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--t) var(--e);
}
.modal.is-open .modal__scrim{ opacity:1; }
.modal__panel{
  position:relative; margin:auto; width:min(100%,980px); max-height:100svh;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-xl) var(--r-xl) 0 0;
  align-self:end; display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(18px); opacity:0;
  transition:transform var(--t-slow) var(--e), opacity var(--t-slow) var(--e);
}
.modal.is-open .modal__panel{ transform:none; opacity:1; }
@media (min-width:760px){
  .modal__panel{ align-self:center; border-radius:var(--r-xl); max-height:min(92svh,900px); }
}
.modal__x{ position:absolute; top:.7rem; right:.7rem; z-index:2; }
.modal__scroll{ overflow-y:auto; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom); }

.pm__hero{ position:relative; aspect-ratio:16/10; }
@media (min-width:760px){ .pm__hero{ aspect-ratio:21/9; } }
.pm__hero img{ width:100%; height:100%; object-fit:cover; }
.pm__hero .ocard__grad{ background:linear-gradient(0deg, var(--ink-2) 2%, oklch(0.11 0.008 60 / .35) 40%, transparent 75%); }
.pm__head{ position:absolute; inset:auto 0 0 0; padding:1rem clamp(1rem,3vw,1.8rem) .9rem; }
.pm__tag{ font-size:.62rem; letter-spacing:.17em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.pm__name{ font-size:clamp(1.35rem,1.1rem + 1.2vw,2.1rem); margin-top:.2rem; font-variation-settings:'opsz' 42; }
.pm__body{ padding:1rem clamp(1rem,3vw,1.8rem) 1.4rem; display:grid; gap:1.05rem; }
.pm__lead{ color:var(--fg-2); max-width:62ch; font-size:.88rem; }
.pm__chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.pm__chips span{
  font-size:.7rem; padding:.3rem .65rem; border-radius:999px;
  background:oklch(0.262 0.013 66 / .7); border:1px solid var(--line-soft); color:var(--fg-2);
}
.pm__label{ font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:var(--fg-3); font-weight:700; margin-bottom:.5rem; }
.pm__gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem; }
@media (min-width:640px){ .pm__gal{ grid-template-columns:repeat(4,1fr); gap:.4rem; } }
@media (min-width:900px){ .pm__gal{ grid-template-columns:repeat(6,1fr); } }
.pm__gal button{
  padding:0; border:0; background:none; cursor:pointer; aspect-ratio:1; overflow:hidden;
  border-radius:var(--r-s); position:relative;
  transition:transform var(--t-fast) var(--e);
}
.pm__gal button:active{ transform:scale(.96); }
.pm__gal img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--e), filter var(--t) var(--e); }
@media (hover:hover){ .pm__gal button:hover img{ transform:scale(1.08); } }
.pm__vids{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.pm__cta{ display:grid; gap:.5rem; }
@media (min-width:560px){ .pm__cta{ grid-template-columns:1fr 1fr; } }

/* ── Modal video ──────────────────────────────────────────────────────── */
/* el panel se ajusta al video, sea vertical u horizontal */
.vmodal__panel{
  position:relative; margin:auto; width:auto; max-width:min(100% - 1.2rem, 900px);
  transform:scale(.97); opacity:0;
  transition:transform var(--t-slow) var(--e), opacity var(--t-slow) var(--e);
}
.modal--video.is-open .vmodal__panel{ transform:none; opacity:1; }
.vmodal__panel video{
  display:block; width:auto; height:auto; max-width:100%; max-height:78svh;
  margin-inline:auto; border-radius:var(--r-m); background:#000;
  border:1px solid var(--line);
}
.modal--video .modal__x{ top:-52px; right:0; }
@media (max-width:520px){ .modal--video .modal__x{ top:-50px; } }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:var(--z-lightbox); background:oklch(0.085 0.005 60);
  opacity:0; transition:opacity var(--t) var(--e); touch-action:pan-y;
}
.lb.is-open{ opacity:1; }
.lb__fig{
  margin:0; height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.8rem;
  padding:3.4rem .6rem 10rem;
}
.lb__fig img{
  max-width:min(94vw,1400px); max-height:calc(100svh - 15rem); width:auto; height:auto;
  object-fit:contain; border-radius:var(--r-s);
  animation:lbIn var(--t) var(--e);
}

/* rail de miniaturas: convierte el espacio muerto en navegación */
.lb__rail{
  position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + .6rem);
  display:flex; gap:.3rem; overflow-x:auto; scrollbar-width:none;
  padding:.35rem clamp(.6rem,4vw,2rem); scroll-behavior:smooth;
}
.lb__rail::-webkit-scrollbar{ display:none; }
.lb__rail button{
  flex:none; width:54px; height:54px; padding:0; border-radius:var(--r-s); overflow:hidden;
  border:1px solid oklch(0.72 0.02 80 / .18); background:none; cursor:pointer;
  transition:border-color var(--t) var(--e), opacity var(--t) var(--e), transform var(--t-fast) var(--e);
  opacity:.5;
}
.lb__rail button:active{ transform:scale(.94); }
.lb__rail button.is-cur{ opacity:1; border-color:var(--gold); }
.lb__rail img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:900px){
  .lb__rail{ justify-content:center; padding-inline:clamp(4.5rem,9vw,7rem); }
  .lb__rail button{ width:62px; height:62px; }
}
@keyframes lbIn{ from{opacity:0; transform:scale(.985)} to{opacity:1; transform:none} }
.lb__fig figcaption{ color:var(--fg-3); font-size:.755rem; text-align:center; max-width:60ch; padding-inline:.8rem; }
.lb__x{ position:absolute; top:calc(env(safe-area-inset-top) + .7rem); right:.7rem; z-index:3; }
.lb__count{
  position:absolute; top:calc(env(safe-area-inset-top) + .9rem); left:.9rem;
  font-size:.72rem; letter-spacing:.12em; color:var(--fg-3); font-weight:700;
}
.lb__nav{
  position:absolute; z-index:2; width:48px; height:48px;
  bottom:calc(env(safe-area-inset-bottom) + 4.7rem);
  display:grid; place-items:center; border-radius:999px; cursor:pointer;
  background:oklch(0.26 0.011 66 / .9); border:1px solid var(--line);
  transition:transform var(--t-fast) var(--e), background-color var(--t) var(--e);
}
.lb__nav--prev{ left:calc(50% - 58px); }
.lb__nav--next{ left:calc(50% + 10px); }
.lb__nav:hover{ background:oklch(0.34 0.013 66 / .95); }
.lb__nav:active{ transform:scale(.93); }
.lb__nav svg{ width:20px; height:20px; fill:none; stroke:var(--fg); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:900px){
  .lb__nav{ top:50%; bottom:auto; translate:0 -50%; width:52px; height:52px; }
  .lb__nav--prev{ left:clamp(.75rem,2.5vw,2.2rem); }
  .lb__nav--next{ left:auto; right:clamp(.75rem,2.5vw,2.2rem); }
  .lb__fig{ padding:3.6rem clamp(4.5rem,9vw,7rem) 7.4rem; }
  .lb__fig img{ max-height:calc(100svh - 12rem); }
}

/* ── Reveal ───────────────────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(14px); }
.rv.is-in{ opacity:1; transform:none; transition:opacity var(--t-slow) var(--e), transform var(--t-slow) var(--e); }

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