/* ═══════════════════════════════════════════════════════════════
   AZHARI DESARROLLOS · sistema de diseño
   Paleta heredada de Torre Nara: canvas, carbón, cobre.
   Tipografía: Cormorant Garamond (display) + Satoshi (cuerpo).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --canvas:#f5f3ee; --paper:#ffffff; --rule:#e7e2d7;
  --carbon:#141417; --grafito:#1b1b20; --ink:#26262b;
  --mute:#7d776c; --mute-dk:#a39c8e;
  --cobre:#b07c46; --cobre-claro:#d9a96f; --cobre-soft:#f4eadc;
  --blanco-dk:rgba(245,243,238,.78);
  --wa:#25d366;
}

@font-face{ font-family:'Satoshi'; src:url('/usuarios/azhari/fonts/Satoshi-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('/usuarios/azhari/fonts/Satoshi-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('/usuarios/azhari/fonts/Satoshi-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ background:var(--canvas); }
body{ font-family:'Satoshi',-apple-system,'Helvetica Neue',sans-serif; color:var(--ink);
      font-weight:400; line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--cobre-claro); color:var(--carbon); }
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.font-display{ font-family:'Cormorant Garamond',Georgia,serif; }

/* util */
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.wrap>*{ min-width:0; }
.eyebrow{ font-size:11px; letter-spacing:.38em; text-transform:uppercase; color:var(--cobre); font-weight:400; }
.dark .eyebrow{ color:var(--cobre-claro); }
h1,h2,h3{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; line-height:1.04; letter-spacing:-.01em; }
.lead{ font-weight:300; font-size:clamp(16px,2vw,19px); color:var(--mute); max-width:56ch; }
.dark .lead{ color:var(--blanco-dk); }
.sec{ padding:clamp(84px,12vh,150px) 0; }
.dark{ background:var(--carbon); color:#f5f3ee; }
.hairline{ height:1px; background:var(--rule); border:0; }

/* reveals */
.reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,.65,.2,1), transform .9s cubic-bezier(.22,.65,.2,1); }
.reveal.vis{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1!important; transform:none!important; } }

/* botones (outline, hover que llena) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 28px; border-radius:999px;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:400;
  border:1px solid rgba(38,38,43,.35); color:var(--ink);
  transition:background .35s ease,color .35s ease,border-color .35s ease; }
.btn:hover{ background:var(--ink); color:var(--canvas); border-color:var(--ink); }
.btn-cobre{ border-color:var(--cobre); color:var(--cobre); }
.btn-cobre:hover{ background:var(--cobre); color:#fff; border-color:var(--cobre); }
.dark .btn, .btn-luz{ border-color:rgba(245,243,238,.45); color:#f5f3ee; }
.dark .btn:hover, .btn-luz:hover{ background:#f5f3ee; color:var(--carbon); border-color:#f5f3ee; }

/* ── nav ── */
#nav{ position:fixed; inset:0 0 auto 0; z-index:90; padding:14px 0;
  transition:background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease, padding .4s ease; }
#nav .bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; min-height:44px; }
.brand img{ height:34px; width:auto; filter:invert(1) brightness(1.7); transition:filter .4s ease; }
.brand .wm{ height:26px; }
#nav .links{ display:flex; align-items:center; gap:26px; }
#nav .links a{ font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.88); padding:15px 2px; transition:color .3s ease; position:relative; }
#nav .links a::after{ content:''; position:absolute; left:0; right:100%; bottom:8px; height:1px;
  background:var(--cobre-claro); transition:right .3s ease; }
#nav .links a:hover::after, #nav .links a.act::after{ right:0; }
#nav .links a.act{ color:var(--cobre-claro); }
#nav .cta{ border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:999px;
  padding:10px 20px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; min-height:44px;
  display:inline-flex; align-items:center; transition:all .3s ease; }
#nav .cta:hover{ background:#fff; color:var(--carbon); }
#nav.solid{ background:rgba(245,243,238,.92); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(27,27,32,.08); }
#nav.solid .brand img{ filter:none; }
#nav.solid .links a{ color:var(--ink); }
#nav.solid .links a.act{ color:var(--cobre); }
#nav.solid .cta{ border-color:rgba(38,38,43,.3); color:var(--ink); }
#nav.solid .cta:hover{ background:var(--ink); color:var(--canvas); }

/* burger + menú móvil */
#burger{ display:none; width:46px; height:46px; border:0; background:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:6px; z-index:96; }
#burger span{ width:24px; height:1.6px; background:#fff; transition:all .35s ease; }
#nav.solid #burger span{ background:var(--ink); }
body.menu-open #burger span{ background:#f5f3ee!important; }
body.menu-open #burger span:nth-child(1){ transform:translateY(7.6px) rotate(45deg); }
body.menu-open #burger span:nth-child(2){ opacity:0; }
body.menu-open #burger span:nth-child(3){ transform:translateY(-7.6px) rotate(-45deg); }
#menu{ position:fixed; inset:0; z-index:94; background:var(--carbon); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; opacity:0; pointer-events:none; transition:opacity .4s ease; }
#menu.open{ opacity:1; pointer-events:auto; }
#menu a{ font-family:'Cormorant Garamond',serif; font-size:clamp(30px,8vw,44px); color:#f5f3ee;
  padding:10px 20px; min-height:48px; }
#menu a.act{ color:var(--cobre-claro); font-style:italic; }
#menu .mini{ margin-top:26px; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--cobre-claro); }
@media (max-width:900px){
  #nav .links, #nav .cta{ display:none; }
  #burger{ display:flex; }
}

/* ── hero genérico ── */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--carbon); color:#f5f3ee; }
.hero .media, .hero .media video, .hero .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero .media video{ opacity:0; transition:opacity 1.2s ease; }
.hero .media video.ready{ opacity:1; }
.hero .grad{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,23,.58) 0%, rgba(20,20,23,.12) 34%, rgba(20,20,23,.28) 62%, rgba(20,20,23,.9) 100%); }
.hero .grad2{ position:absolute; inset:0; background:radial-gradient(110% 75% at 12% 90%, rgba(20,20,23,.62), transparent 55%); }
.hero .content{ position:relative; z-index:2; width:100%; padding-bottom:clamp(56px,9vh,110px); }
.hero .eyebrow{ text-shadow:0 1px 14px rgba(20,20,23,.65); }
.hero h1{ font-size:clamp(2.7rem,7.2vw,5.6rem); font-weight:500; max-width:14ch; }
.hero .sub{ margin-top:18px; font-weight:300; font-size:clamp(15px,1.9vw,19px); color:var(--blanco-dk); max-width:52ch; }
.hero .ctas{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hint{ position:absolute; right:26px; bottom:26px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:rgba(245,243,238,.55); }
.hint .l{ width:1px; height:44px; background:linear-gradient(180deg,var(--cobre-claro),transparent); animation:hint 2.2s ease-in-out infinite; }
@keyframes hint{ 0%,100%{transform:scaleY(.55);opacity:.5} 50%{transform:scaleY(1);opacity:1} }
@media (max-width:640px){ .hint{ display:none; } }

/* stats band */
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.stats>*{ min-width:0; }
.stat{ padding:26px 8px; text-align:center; border-left:1px solid var(--rule); }
.stat:first-child{ border-left:0; }
.stat b{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.7rem,3.4vw,2.6rem); display:block; color:var(--ink); }
.stat span{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); }
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
  .stat{ border-left:0; border-top:1px solid var(--rule); padding:20px 6px; }
  .stat:nth-child(-n+2){ border-top:0; }
}

/* tarjetas de video (loops) */
.vcard{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5; background:var(--grafito); }
.vcard video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; }
.vcard .tag{ position:absolute; left:16px; bottom:16px; right:16px; z-index:2; }
.vcard .tag b{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.25rem,2vw,1.6rem); color:#fff; display:block; line-height:1.1; }
.vcard .tag span{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--cobre-claro); }
.vcard::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(20,20,23,.82)); }
.vcard .tag{ z-index:3; }

/* galería marquee */
.mqwrap{ overflow:hidden; }
.mq{ display:flex; gap:18px; width:max-content; animation:mq 46s linear infinite; }
.mq:hover{ animation-play-state:paused; }
@keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mq figure{ width:clamp(240px,30vw,380px); flex:none; }
.mq img{ width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:14px; }
.mq figcaption{ margin-top:10px; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--mute); }
@media (prefers-reduced-motion:reduce){ .mq{ animation:none; flex-wrap:wrap; width:auto; } }

/* ── bolita WhatsApp ── */
#wa{ position:fixed; right:20px; bottom:20px; z-index:80; width:58px; height:58px; border-radius:99px;
  background:var(--wa); display:grid; place-items:center; box-shadow:0 14px 34px -10px rgba(37,211,102,.55);
  transition:transform .3s ease; }
#wa:hover{ transform:scale(1.07); }
#wa svg{ width:30px; height:30px; fill:#fff; }
#wa .ring{ position:absolute; inset:0; border-radius:99px; border:2px solid var(--wa); animation:waring 2.6s ease-out infinite; }
@keyframes waring{ 0%{transform:scale(1);opacity:.7} 70%{transform:scale(1.65);opacity:0} 100%{opacity:0} }
#waTip{ position:fixed; right:90px; bottom:32px; z-index:80; background:#fff; color:var(--ink);
  font-size:13px; padding:10px 16px; border-radius:14px 14px 4px 14px; box-shadow:0 10px 30px -8px rgba(27,27,32,.25);
  opacity:0; transform:translateY(8px); transition:all .45s ease; pointer-events:none; white-space:nowrap; }
#waTip.on{ opacity:1; transform:none; }
@media (max-width:640px){ #waTip{ display:none; } }

/* ── footer ── */
footer{ background:var(--carbon); color:var(--blanco-dk); padding:70px 0 34px; }
footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
footer .cols>*{ min-width:0; }
footer .brandf img{ height:30px; filter:invert(1) brightness(1.7); }
footer .brandf .wm{ height:38px; margin-top:14px; }
footer h4{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--cobre-claro); font-weight:400; margin-bottom:16px; }
footer li{ list-style:none; margin-bottom:4px; }
footer li a{ display:inline-flex; align-items:center; min-height:38px; font-weight:300; font-size:14.5px; color:var(--blanco-dk); transition:color .3s; }
footer li a:hover{ color:#fff; }
footer .base a, .c-loc li a{ display:inline-block; padding:12px 4px; margin:-12px -4px; }
footer .base{ margin-top:52px; padding-top:22px; border-top:1px solid rgba(245,243,238,.12);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:11.5px; font-weight:300; color:rgba(245,243,238,.45); }
@media (max-width:760px){ footer .cols{ grid-template-columns:1fr; gap:30px; } }

/* preloader (solo portada) */
#pre{ position:fixed; inset:0; z-index:200; background:var(--carbon); display:grid; place-items:center;
  transition:opacity .7s ease; }
#pre.out{ opacity:0; pointer-events:none; }
#pre img{ filter:invert(1) brightness(1.7); opacity:0; animation:preIn 1s .1s forwards cubic-bezier(.22,.65,.2,1); }
#pre .pv{ height:64px; margin:0 auto; }
#pre .pw{ height:44px; margin:18px auto 0; animation-delay:.35s; }
#pre .line{ height:1.5px; width:0; background:linear-gradient(90deg,var(--cobre),var(--cobre-claro)); margin:22px auto 0; animation:preLine 1.3s .4s forwards ease-out; }
@keyframes preIn{ to{opacity:1} }
@keyframes preLine{ to{width:120px} }