/* =========================================================
   Desire Curly Hair — hoja de estilos
   Paleta, tipografía y layout. Mobile-first.
   ========================================================= */

:root{
  --ink:        #0A0908;
  --ink-2:      #12100E;
  --ink-3:      #1B1714;
  --cream:      #F3EBE1;
  --cream-dim:  rgba(243,235,225,.62);
  --cream-mute: rgba(243,235,225,.38);
  --gold:       #E0B45C;
  --gold-hi:    #F6DDA0;
  --copper:     #B07B54;
  --line:       rgba(224,180,92,.20);
  --line-soft:  rgba(243,235,225,.09);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1180px;
  --dock-h: 68px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* silueta del icono de WhatsApp, usada como mascara */
  --wa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.7 15l-1.2 4.3 4.4-1.2A10 10 0 1 0 12 2Zm5.2 14.1c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .1-1.6-.1a13 13 0 0 1-5-3.2c-1-1.1-1.7-2.4-1.9-2.8-.2-.4-.6-1.2-.6-2.2s.6-1.6.8-1.8c.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.4.5-.3.3c-.1.1-.2.3-.1.5.2.4.7 1.2 1.4 1.9.9.8 1.6 1 1.9 1.2.2.1.4.1.5-.1l.7-.8c.2-.2.3-.2.5-.1l2 1c.2.1.4.2.4.3.1.2.1.8-.1 1.4Z'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.is-loading{ overflow:hidden; height:100vh; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
figure,blockquote,dl{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--gold); color:var(--ink); }

/* ---------- capas de fondo ---------- */
.bg-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:0;
  transition:opacity 1.6s var(--ease);
}
body.three-ready .bg-canvas{ opacity:1; }

/* respaldo si Three.js no carga */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70% 50% at 78% 8%,  rgba(176,123,84,.16), transparent 70%),
    radial-gradient(60% 45% at 12% 82%, rgba(224,180,92,.12), transparent 70%),
    var(--ink);
}

.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* ---------- barra de progreso de scroll ---------- */
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:rgba(243,235,225,.06);
}
.scrollbar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--copper),var(--gold),var(--gold-hi));
  transition:width .12s linear;
}

/* =========================================================
   INTRO
   ========================================================= */
.intro{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .9s var(--ease), visibility .9s;
}
.intro.is-out{ opacity:0; visibility:hidden; }

.intro__inner{ position:relative; display:grid; place-items:center; text-align:center; padding:0 24px; }

.intro__ring{
  position:absolute; width:min(74vw,300px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--line);
  opacity:0; transform:scale(.6) rotate(-40deg);
  animation:ringIn 2.6s var(--ease) .15s forwards;
}
.intro__ring::after{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(243,235,225,.05);
}
@keyframes ringIn{
  0%{ opacity:0; transform:scale(.6) rotate(-40deg); }
  55%{ opacity:1; }
  100%{ opacity:.9; transform:scale(1) rotate(0deg); }
}

.intro__mono{
  font-family:var(--serif);
  font-size:clamp(56px,17vw,104px);
  font-weight:300;
  letter-spacing:.22em; text-indent:.22em;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--copper));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(18px) scale(.94);
  animation:monoIn 1.5s var(--ease) .5s forwards;
}
@keyframes monoIn{ to{ opacity:1; transform:none; } }

.intro__line{ width:min(60vw,220px); height:1px; margin:20px 0 18px; overflow:hidden; }
.intro__line span{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);
  animation:lineIn 1.4s var(--ease) 1.15s forwards;
}
@keyframes lineIn{ to{ transform:scaleX(1); } }

.intro__name{
  font-family:var(--serif); font-size:clamp(20px,5.5vw,30px);
  letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  color:var(--cream);
  opacity:0; animation:fadeUp 1.2s var(--ease) 1.5s forwards;
}
.intro__role{
  margin-top:12px; font-size:11px; letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase; color:var(--cream-mute);
  opacity:0; animation:fadeUp 1.2s var(--ease) 1.85s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.intro__skip{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  color:var(--cream-mute); padding:10px 18px; border:1px solid var(--line-soft); border-radius:999px;
  opacity:0; animation:fadeUp .8s var(--ease) 2.4s forwards;
  transition:color .3s, border-color .3s;
}
.intro__skip:hover{ color:var(--gold); border-color:var(--line); }

.intro__progress{
  position:absolute; bottom:0; left:0; right:0; height:1px; background:rgba(243,235,225,.07);
}
.intro__progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--copper),var(--gold-hi));
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(16px,4vw,44px);
  transition:background .45s var(--ease), backdrop-filter .45s, border-color .45s, padding .45s var(--ease);
  border-bottom:1px solid transparent;
  transform:translateY(-100%); opacity:0;
}
body.ready .nav{ transform:none; opacity:1; transition:transform 1s var(--ease) .2s, opacity 1s var(--ease) .2s, background .45s, border-color .45s; }
.nav.is-stuck{
  background:rgba(10,9,8,.72); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft); padding-top:11px; padding-bottom:11px;
}

.nav__brand{ display:flex; align-items:center; gap:11px; }
.nav__mono{
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); font-family:var(--serif); font-size:14px;
  letter-spacing:.06em; text-indent:.06em; color:var(--gold);
}
.nav__name{
  font-family:var(--serif); font-size:15px; letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase; white-space:nowrap;
}
.nav__links{ display:none; gap:34px; }
.nav__links a{
  position:relative; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-dim); transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{
  display:none; padding:10px 22px; border:1px solid var(--line); border-radius:999px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  transition:background .35s, color .35s;
}
.nav__cta:hover{ background:var(--gold); color:var(--ink); }

@media (min-width:900px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-block; }
}

/* =========================================================
   TIPOGRAFÍA COMÚN
   ========================================================= */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,44px); }

.eyebrow{
  margin:0 0 18px; font-size:10px; letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase; color:var(--gold);
}
.eyebrow::before{
  content:''; display:inline-block; width:26px; height:1px; background:var(--gold);
  vertical-align:middle; margin-right:14px; opacity:.6;
}

.h2{
  margin:0 0 28px;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(32px,7vw,58px); line-height:1.08; letter-spacing:-.01em;
  white-space:pre-line;
}
.h2--center{ text-align:center; }

.lead{ color:var(--cream-dim); font-size:16px; max-width:56ch; }
.lead--center{ margin:0 auto 46px; text-align:center; }

.section{ position:relative; z-index:3; padding:clamp(88px,15vw,160px) 0; }
.section + .section{ border-top:1px solid var(--line-soft); }

/* ---------- revelado en scroll ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:400;
  transition:transform .35s var(--ease), box-shadow .35s, background .35s, color .35s, border-color .35s;
}
.btn .ic{ width:17px; height:17px; fill:currentColor; }
.btn--gold{
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--copper));
  color:#150F09; box-shadow:0 10px 34px rgba(224,180,92,.22);
}
.btn--gold::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease);
}
.btn--gold:hover::after{ left:120%; }
.btn--ghost{ border:1px solid var(--line); color:var(--cream); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--wide{ width:100%; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; z-index:3;
  min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:120px clamp(20px,5vw,44px) 130px;
}
.hero__inner{ max-width:900px; }
.hero__title{
  margin:0 0 22px;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(46px,13vw,124px); line-height:.98; letter-spacing:-.02em;
}
.hero__title em{
  display:block; font-style:italic;
  background:linear-gradient(120deg,var(--gold-hi),var(--gold) 40%,var(--copper));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{ margin:0 auto 40px; max-width:44ch; color:var(--cream-dim); font-size:clamp(15px,3.6vw,18px); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

.hero__scroll{
  position:absolute; bottom:calc(var(--dock-h) + 26px); left:50%; transform:translateX(-50%);
  display:grid; justify-items:center; gap:10px;
  font-size:9px; letter-spacing:.4em; text-indent:.4em; text-transform:uppercase; color:var(--cream-mute);
}
.hero__scroll i{ display:block; width:1px; height:46px; background:linear-gradient(180deg,var(--gold),transparent); }
@media (min-width:900px){ .hero__scroll{ bottom:34px; } }

/* =========================================================
   SOBRE
   ========================================================= */
.wrap--split{ display:grid; gap:clamp(32px,6vw,80px); }
@media (min-width:900px){ .wrap--split{ grid-template-columns:1fr 1fr; align-items:start; } }

.prose p{ margin:0 0 20px; color:var(--cream-dim); font-size:16.5px; }
.prose p:first-child{ color:var(--cream); font-size:19px; line-height:1.6; }

/* En pantallas angostas los stats se leen mejor en filas que en 3 columnas */
.stats{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:38px; }
.stats > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 20px; border:1px solid var(--line-soft); border-radius:14px;
  background:rgba(243,235,225,.02);
}
@media (min-width:560px){
  .stats{ grid-template-columns:repeat(3,1fr); gap:14px; }
  .stats > div{ display:block; padding:20px 12px; text-align:center; }
}
.stats b{
  display:block; font-family:var(--serif); font-weight:400; font-size:clamp(26px,6vw,36px); line-height:1;
  background:linear-gradient(180deg,var(--gold-hi),var(--copper));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats span{ display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-mute); text-align:right; }
@media (min-width:560px){ .stats span{ margin-top:9px; text-align:center; } }

/* =========================================================
   SERVICIOS
   ========================================================= */
.svc{ display:grid; gap:1px; margin-top:46px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:18px; overflow:hidden; }
@media (min-width:760px){ .svc{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px){ .svc{ grid-template-columns:repeat(3,1fr); } }

.svc__item{
  position:relative; overflow:hidden;
  padding:34px 28px 32px; background:var(--ink-2);
  transition:background .5s var(--ease);
}
.svc__item::before{
  content:''; position:absolute; inset:0; opacity:0;
  background:radial-gradient(120% 100% at 50% 0%, rgba(224,180,92,.11), transparent 68%);
  transition:opacity .5s var(--ease);
}
.svc__item:hover{ background:var(--ink-3); }
.svc__item:hover::before{ opacity:1; }
.svc__num{ position:relative; font-family:var(--serif); font-size:13px; color:var(--gold); letter-spacing:.2em; }
.svc__name{ position:relative; margin:14px 0 10px; font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.2; }
.svc__desc{ position:relative; margin:0 0 22px; color:var(--cream-dim); font-size:15px; }
.svc__meta{
  position:relative; display:flex; align-items:center; gap:12px;
  padding-top:16px; border-top:1px solid var(--line-soft);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.svc__price{ color:var(--gold); }

/* "Consultar" abre WhatsApp: se marca como enlace y con un area
   de toque comoda en movil */
.svc__ask{
  display:inline-flex; align-items:center; gap:8px;
  margin:-8px -10px; padding:8px 10px;
  color:var(--gold); letter-spacing:.14em;
  transition:color .3s;
}
.svc__ask::after{
  content:''; width:13px; height:13px; flex:none;
  background:currentColor;
  -webkit-mask:var(--wa-mask) center/contain no-repeat;
          mask:var(--wa-mask) center/contain no-repeat;
}
.svc__ask:hover{ color:var(--gold-hi); }

/* =========================================================
   GALERÍA — casos antes / después
   ========================================================= */
.gal{ display:grid; gap:clamp(28px,5vw,44px); }
@media (min-width:900px){ .gal{ grid-template-columns:repeat(2,1fr); } }

.case{
  padding:14px 14px 20px; border-radius:20px;
  border:1px solid var(--line-soft); background:rgba(243,235,225,.02);
}
.case__pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.case__shot{
  position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:12px;
  background:var(--ink-2);
}
.case__shot img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.94); transition:transform 1.1s var(--ease), filter .6s;
}
.case:hover .case__shot img{ transform:scale(1.04); filter:saturate(1.04); }
.case__shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,8,.45) 0 22%,transparent 55%);
}

.case__tag{
  position:absolute; top:9px; left:9px; z-index:2;
  padding:5px 11px; border-radius:999px;
  background:rgba(10,9,8,.62); border:1px solid var(--line);
  backdrop-filter:blur(6px);
  font-size:8.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
/* la foto del "después" lleva la etiqueta rellena en dorado */
.case__shot:last-of-type .case__tag{
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  border-color:transparent; color:#150F09;
}

.case__cap{ padding:18px 6px 0; text-align:center; }
.case__cap h3{
  margin:0 0 6px; font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,4.6vw,26px); line-height:1.2;
}
.case__cap p{
  margin:0; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-mute);
}

/* marcador cuando la foto aún no existe */
.gal__ph{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; text-align:center; padding:16px;
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(224,180,92,.14), transparent 70%),
    linear-gradient(150deg,var(--ink-3),var(--ink-2));
}
.gal__ph span{ font-family:var(--serif); font-size:22px; color:var(--gold); opacity:.55; }
.gal__ph small{ font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream-mute); }

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.tst{ display:grid; gap:16px; margin-top:44px; }
@media (min-width:900px){ .tst{ grid-template-columns:repeat(3,1fr); } }

.tst__item{
  position:relative; padding:38px 28px 28px; border-radius:16px;
  border:1px solid var(--line-soft); background:rgba(243,235,225,.02);
}
.tst__item::before{
  content:'\201C'; position:absolute; top:6px; left:22px;
  font-family:var(--serif); font-size:66px; line-height:1; color:var(--gold); opacity:.28;
}
.tst__text{ margin:0 0 20px; font-family:var(--serif); font-size:19px; line-height:1.5; font-style:italic; color:var(--cream); }
.tst__name{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }

/* =========================================================
   CONTACTO
   ========================================================= */
.section--contact{ padding-bottom:calc(clamp(88px,15vw,160px) + var(--dock-h)); }

.card{
  max-width:620px; margin:0 auto; padding:clamp(26px,5vw,40px);
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(160deg,rgba(243,235,225,.045),rgba(243,235,225,.012));
  backdrop-filter:blur(10px);
  box-shadow:0 30px 80px rgba(0,0,0,.42);
}

.info li + li{ border-top:1px solid var(--line-soft); }
.info > li > a, .info > li > div{
  display:flex; align-items:center; gap:16px; padding:16px 2px;
  transition:color .3s;
}
.info a:hover{ color:var(--gold); }
.info svg{ width:19px; height:19px; fill:var(--gold); flex:none; }
.info b{ display:block; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--cream-mute); font-weight:400; margin-bottom:3px; }
.info span{ font-size:15.5px; }

.hours{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line-soft); }
.hours h3{ margin:0 0 14px; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--cream-mute); font-weight:400; }
.hours dl{ margin:0; display:grid; gap:9px; }
.hours .row{ display:flex; justify-content:space-between; gap:16px; font-size:14.5px; }
.hours .row span:first-child{ color:var(--cream-dim); }
.hours .row span:last-child{ color:var(--cream); }

.card__actions{ display:grid; gap:12px; margin-top:30px; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ position:relative; z-index:3; padding:52px 0 calc(52px + var(--dock-h)); border-top:1px solid var(--line-soft); text-align:center; }
.foot__inner{ display:grid; justify-items:center; gap:10px; }
.foot__mono{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); font-family:var(--serif); color:var(--gold); font-size:15px;
  letter-spacing:.06em; text-indent:.06em;
}
.foot p{ margin:6px 0 0; font-family:var(--serif); font-size:16px; letter-spacing:.22em; text-indent:.22em; text-transform:uppercase; }
.foot small{ font-size:10.5px; letter-spacing:.14em; color:var(--cream-mute); }
@media (min-width:900px){ .foot{ padding-bottom:52px; } }

/* =========================================================
   DOCK MÓVIL
   ========================================================= */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(12,10,9,.86); backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--line-soft);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%); transition:transform .8s var(--ease);
}
body.ready .dock{ transform:none; }
.dock__btn{
  display:grid; justify-items:center; gap:5px; padding:11px 4px 12px;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim);
  transition:color .3s;
}
.dock__btn svg{ width:21px; height:21px; fill:currentColor; }
.dock__btn:active{ color:var(--gold); }
.dock__btn:first-child{ color:var(--gold); }
@media (min-width:900px){ .dock{ display:none; } :root{ --dock-h:0px; } }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; z-index:70; left:50%; bottom:calc(var(--dock-h) + 22px);
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  padding:12px 22px; border-radius:999px;
  background:rgba(243,235,225,.95); color:var(--ink);
  font-size:12px; letter-spacing:.08em;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

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

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* =========================================================
   LOGO OPCIONAL (assets/logo.png)
   Si el archivo existe reemplaza al monograma en intro, nav y footer.
   ========================================================= */
.has-logo{ background:none; border:0; padding:0; }
.has-logo img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }

.intro__logo{
  width:min(56vw,220px); height:min(56vw,220px);
  display:block; text-indent:0; letter-spacing:normal;
  animation:monoIn 1.5s var(--ease) .5s forwards;
}
.intro__logo img{ filter:drop-shadow(0 14px 40px rgba(0,0,0,.55)); }

.nav__logo{ width:38px; height:38px; }
.foot__logo{ width:56px; height:56px; }

/* =========================================================
   SCRIM — oscurece el fondo 3D al bajar para que el texto
   de las secciones siempre tenga contraste suficiente.
   La opacidad la controla el scroll (main.js).
   ========================================================= */
.scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(10,9,8,.35), rgba(10,9,8,.78));
}

/* evita que una palabra larga (@usuario) rompa la tarjeta de stats */
.stats span{ overflow-wrap:break-word; }

/* =========================================================
   MAPA EMBEBIDO
   El embed de Google viene en claro; el filtro lo invierte a
   oscuro para que no rompa el resto de la tarjeta.
   ========================================================= */
.map{ margin-top:22px; }
.map iframe{
  display:block; width:100%; height:210px; border:0;
  border-radius:14px; background:var(--ink-2);
  filter:invert(92%) hue-rotate(180deg) saturate(.75) contrast(.92);
}
.map__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .3s;
}
.map__link::after{ content:'↗'; font-size:13px; }
.map__link:hover{ border-bottom-color:var(--gold); }

/* =========================================================
   CRÉDITO — Linkeao Services
   Discreto: gris apagado, y al pasar por encima toma el
   negro y amarillo de la marca.
   ========================================================= */
.credit{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft); width:min(100%,300px); }
.credit__link{
  display:inline-flex; align-items:center; gap:9px;
  opacity:.5; transition:opacity .35s var(--ease);
}
.credit__link:hover, .credit__link:focus-visible{ opacity:1; }

.credit__label{
  font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--cream-mute);
}
.credit__chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 5px 9px; border-radius:999px;
  background:#111111; border:1px solid rgba(245,179,1,.28);
  transition:border-color .35s, box-shadow .35s;
}
.credit__chip svg{ width:12px; height:12px; color:#F5B301; flex:none; }
.credit__chip b{
  font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.02em;
  color:#F5B301;
}
.credit__link:hover .credit__chip{
  border-color:rgba(245,179,1,.6);
  box-shadow:0 0 0 3px rgba(245,179,1,.08);
}