:root{
  --hero:#CBCBC6;
  --ground:#F3EEE2;
  --surface:#FBF9F3;
  --cream:#FFF8EC;
  --ink:#15130F;
  --ink-2:#4A453C;
  --ink-3:#6E6A61;
  --line:rgba(21,19,15,.13);
  --line-2:rgba(21,19,15,.26);
  --gold:#006837;   /* verde de marca, tomado del logo */
  --gold-2:#63BE93; /* su versión clara, para los paneles oscuros */
  --dark:#050506;
  --on-dark:#F3EEE2;
  --on-dark-2:#A8A49A;

  --f-d:"Fraunces","Cormorant Garamond",Georgia,serif;
  --f-b:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --fs-hero:clamp(2.45rem,6vw,5.4rem);
  --fs-h2:clamp(1.85rem,3.2vw,2.875rem);
  --fs-h2s:clamp(1.5rem,2.3vw,2rem);
  --fs-h3:clamp(1.18rem,1.6vw,1.5rem);
  --fs-body:1.0625rem;
  --fs-sm:.95rem;
  --fs-label:.7rem;

  --wrap:1200px;
  --pad:clamp(20px,4vw,44px);
  --r:28px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--hero);color:var(--ink);
  font-family:var(--f-b);font-size:var(--fs-body);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:var(--f-d);font-weight:360;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%}
button{font:inherit}
::selection{background:var(--gold);color:var(--cream)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ===== saltar al contenido ===== */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:100;
  background:var(--ink);color:var(--ground);padding:12px 20px;border-radius:10px;
  font-size:.875rem;text-decoration:none;transition:top .2s;
}
.skip-link:focus{top:16px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.display{font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.022em}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3)}
.label{
  font-family:var(--f-b);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.24em;font-weight:500;color:var(--gold);line-height:1.5;
}
.label--mute{color:var(--ink-2);letter-spacing:.26em}
.body{color:var(--ink-2);max-width:60ch}
.sm{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.62}

/* ===== marcador de contenido pendiente ===== */
.pendiente{
  display:block;background:rgba(0,104,55,.1);border-left:2px solid var(--gold);
  color:var(--ink-2);font-size:.78rem;line-height:1.6;padding:13px 18px;border-radius:14px;
}
.panel--dark .pendiente{background:rgba(99,190,147,.16);color:var(--on-dark-2)}

/* ===== paneles apilados ===== */
.panel{
  position:relative;background:var(--ground);
  border-radius:var(--r) var(--r) 0 0;
  margin-top:-56px;
  padding-block:clamp(56px,7vw,104px) calc(clamp(56px,7vw,104px) + 56px);
  box-shadow:0 -26px 52px -34px rgba(21,19,15,.5);
}
.panel.is-sticky{
  position:sticky;top:0;transform-origin:center top;
  transform:scale(calc(1 - var(--cover,0) * .035));
  filter:brightness(calc(1 - var(--cover,0) * .09));
}
@media (prefers-reduced-motion: reduce){.panel.is-sticky{transform:none;filter:none}}
.panel--surface{background:var(--surface)}
.panel--cream{background:var(--cream)}
.panel--dark{background:var(--dark);color:var(--on-dark);box-shadow:0 -26px 60px -34px rgba(0,0,0,.85)}
.panel--dark .body,.panel--dark .sm{color:var(--on-dark-2)}
.panel--dark .label{color:var(--gold-2)}
.panel--dark .idx .n{color:var(--gold-2)}
.panel--dark .tag:hover{color:var(--gold-2);border-color:var(--gold-2)}
.panel--flush{padding-block:0;overflow:hidden}
.panel--tight{padding-block:clamp(38px,4.5vw,64px) calc(clamp(38px,4.5vw,64px) + 56px)}

/* ===== cabecera ===== */
.header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:rgba(203,203,198,.82);backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.header .wrap{display:flex;align-items:center;gap:22px;min-height:76px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:7px;text-decoration:none;margin-right:auto;line-height:1}
.brand .logo{display:block;width:134px;height:auto}
.brand span{font-size:.58rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-2)}
.footer .brand .logo{width:152px}
.nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav a{position:relative;font-size:.875rem;text-decoration:none;color:var(--ink-2);padding-block:5px;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.34,.1,.2,1)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--ink)}

/* ===== botones ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:.875rem;letter-spacing:.01em;text-decoration:none;
  padding:14px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:background .24s cubic-bezier(.34,.1,.2,1),color .24s,border-color .24s,
             transform .24s cubic-bezier(.34,.1,.2,1),box-shadow .24s;
}
.btn--ink{background:var(--ink);color:var(--ground)}
.btn--ink:hover{background:var(--gold);color:var(--cream);transform:translateY(-2px) scale(1.035);box-shadow:0 12px 26px -14px rgba(0,104,55,.85)}
.btn--line{border-color:var(--line-2);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--ground);border-color:var(--ink);transform:translateY(-2px) scale(1.035);box-shadow:0 12px 26px -16px rgba(21,19,15,.8)}
.btn:active{transform:translateY(0) scale(.99);box-shadow:none}
.panel--dark .btn--ink{background:var(--on-dark);color:var(--ink)}
.panel--dark .btn--ink:hover{background:var(--gold-2);color:var(--dark)}
.panel--dark .btn--line{border-color:rgba(243,238,226,.32);color:var(--on-dark)}
.panel--dark .btn--line:hover{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.link{
  display:inline-flex;align-items:center;gap:8px;font-size:.875rem;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:3px;
  transition:border-color .22s,color .22s;
}
.link:hover{border-bottom-color:var(--gold);color:var(--gold)}
.link::after{content:"→";transition:transform .28s cubic-bezier(.34,.1,.2,1)}
.link:hover::after{transform:translateX(5px)}
.panel--dark .link{color:var(--on-dark);border-bottom-color:rgba(243,238,226,.35)}

/* ===== hero ===== */
.hero{
  position:relative;z-index:0;background:var(--hero);
  padding-block:clamp(66px,10vw,136px) clamp(88px,11vw,152px);
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero::before{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(58% 48% at 50% 22%, rgba(255,250,238,.95), rgba(255,250,238,0) 70%);
  pointer-events:none;animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.08)}}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .wrap{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:26px}
.hero .display{max-width:16ch}
.hero .body{text-align:center;max-width:58ch}
.hero .btn-row{margin-top:10px}
.hero-note{font-size:var(--fs-sm);color:var(--ink-2)}

/* ===== titular cinético (entrada palabra a palabra + subrayado) ===== */
.hero-kinetic .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.hero-kinetic .word-inner{display:inline-block;animation:word-in .9s cubic-bezier(.19,1,.22,1) both}
@keyframes word-in{from{transform:translateY(115%) rotate(4deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
.hero-kinetic .word:nth-child(1) .word-inner{animation-delay:.02s}
.hero-kinetic .word:nth-child(2) .word-inner{animation-delay:.09s}
.hero-kinetic .word:nth-child(3) .word-inner{animation-delay:.16s}
.hero-kinetic .word:nth-child(4) .word-inner{animation-delay:.23s}
.hero-kinetic .word:nth-child(5) .word-inner{animation-delay:.30s}
.hero-kinetic .word:nth-child(6) .word-inner{animation-delay:.37s}
.hero-kinetic .word:nth-child(7) .word-inner{animation-delay:.44s}
.hero-kinetic .word:nth-child(8) .word-inner{animation-delay:.51s}
.hero-kinetic .word:nth-child(9) .word-inner{animation-delay:.58s}
.hero-kinetic .word:nth-child(10) .word-inner{animation-delay:.65s}
.hero-kinetic .word:nth-child(11) .word-inner{animation-delay:.72s}
.hero-kinetic .word:nth-child(12) .word-inner{animation-delay:.79s}
.hero-kinetic .word--accent{position:relative}
.hero-kinetic .word--accent::after{
  content:"";position:absolute;left:2%;right:2%;bottom:.05em;height:.055em;
  background:var(--gold);border-radius:2px;transform-origin:left;
  animation:underline-in .7s cubic-bezier(.34,.1,.2,1) both;animation-delay:var(--accent-delay,1.05s);
}
@keyframes underline-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .hero-kinetic .word-inner,.hero-kinetic .word--accent::after{animation:none}
}

/* ===== puerta de "el despacho" (el-despacho.html) ===== */
.escena{position:relative;width:100%;aspect-ratio:1.3355;max-height:86vh;
  margin-inline:auto;overflow:hidden;background:var(--ground);
  perspective:2200px;perspective-origin:30% 50%;--p:0}
.escena .capa{position:absolute;top:0;bottom:0;overflow:hidden}
.escena img{display:block;width:100%;height:100%;object-fit:cover}

.detras{position:absolute;inset:0;display:grid;align-content:center;
  padding-inline:clamp(70px,12vw,190px);padding-block:clamp(30px,6vh,70px);
  background:var(--ground);gap:clamp(16px,2.4vh,26px);
  --r:min(1, max(0, (var(--p) - .16) / .34));--shift:1cm;
  opacity:var(--r);
  transform:translate(var(--shift), calc((1 - var(--r)) * 18px))}
@media (max-width:900px){
  .detras{--shift:.5cm}
}

.interior{left:calc(73.016% + var(--p) * 21.5%);
  width:calc(26.984% - var(--p) * 21.5%);z-index:4}
.interior img{transform:scale(calc(1 + var(--p) * .55));transform-origin:22% 50%}

.planta{left:0;
  width:calc(18.081% - min(1, max(0, (var(--p) - .58) / .42)) * 12.6%);
  z-index:5}
.planta img{transform:scale(calc(1 + var(--p) * .22));transform-origin:80% 50%}

.hoja{left:18.081%;width:54.934%;z-index:3;
  transform-origin:left center;
  transform:rotateY(calc(var(--p) * -88deg));
  opacity:calc(1 - min(1, max(0, (var(--p) - .60) / .40)));
  will-change:transform,opacity;backface-visibility:hidden;
  box-shadow:calc(var(--p) * 30px) 0 calc(26px + var(--p) * 120px)
             calc(var(--p) * -26px) rgba(21,19,15,calc(.16 + var(--p) * .40))}
.hoja::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(98deg,
    rgba(21,19,15,calc(var(--p) * .52)) 0%,
    rgba(21,19,15,calc(var(--p) * .14)) 48%,
    rgba(255,255,255,calc(var(--p) * .12)) 100%)}
.canto{position:absolute;top:0;bottom:0;right:0;width:13px;
  transform:rotateY(90deg);transform-origin:right center;
  background:linear-gradient(90deg,#3A403A,#151815);
  opacity:calc(min(1, var(--p) * 2.5))}
.hoja .filo{position:absolute;top:0;bottom:0;right:0;width:2px;
  background:linear-gradient(180deg,rgba(255,252,244,.85),rgba(255,252,244,.25));
  opacity:calc(min(1, var(--p) * 3))}

.hueco{position:absolute;inset:0;pointer-events:none;z-index:6;
  box-shadow:inset 0 0 140px 26px rgba(21,19,15,calc(.24 * (1 - var(--p) * .75)))}

@media (prefers-reduced-motion: reduce){
  .escena{--p:1 !important}
  .hoja,.canto,.hoja .filo{display:none}
}
/* en pantallas estrechas, la proporción 1.3355 deja muy poca altura:
   se fuerza un mínimo para que el texto de detrás nunca se recorte */
@media (max-width:640px){
  .escena{min-height:600px}
}

/* ===== "para quién" (para-quien.html) — rediseño aprobado a partir
   de para-quien-referencia.html. .pq-hero, .pq-shot y .pq-wa van con
   prefijo porque .hero, .shot y .wa ya existen en el resto del sitio
   con otro propósito; el resto de clases no colisiona con nada. ===== */
.pq-hero{display:grid;grid-template-columns:1fr 42%;align-items:start;gap:0;
  border-bottom:1px solid var(--line)}
.pq-hero .txt{padding:clamp(34px,5vw,74px) clamp(24px,4vw,60px) clamp(46px,6vw,86px) var(--pad);display:grid;gap:22px;align-content:start}
.pq-hero h1{max-width:11ch;margin-top:8px}
.pq-hero .body{font-size:1.02rem}
.pq-hero .body b{color:var(--ink);font-weight:600}
.pq-hero .pq-shot{position:relative;align-self:stretch;min-height:clamp(280px,34vw,440px);overflow:hidden}
.pq-hero .pq-shot img{width:100%;height:100%;object-fit:cover}
.pq-hero .pq-shot .cap{position:absolute;left:clamp(14px,2vw,30px);bottom:clamp(20px,4vw,52px);
  background:rgba(243,238,226,.9);padding:10px 14px;max-width:16ch}

.cap{font-size:.62rem;text-transform:uppercase;letter-spacing:.24em;line-height:2.1;color:var(--ink-3);font-weight:500}

/* índice de los tres perfiles */
.indice{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,44px);
  padding-block:clamp(26px,3.4vw,46px)}
.ix{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.ix .n{font-family:var(--f-d);font-weight:300;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1;color:var(--ink)}
.ix b{display:block;font-weight:600;font-size:.92rem}
.ix span{font-size:.84rem;color:var(--ink-3)}
.ix::after{content:"";height:1px;background:var(--line);align-self:center}
.indice .ix:last-child::after{display:none}

/* bloques alternados izquierda-derecha */
.bloque{position:relative;overflow:hidden;border-radius:26px 26px 0 0;margin-top:-26px;
  box-shadow:0 -24px 46px -34px rgba(21,19,15,.45)}
.bloque--a{background:var(--surface)}
.bloque--b{background:#E7E2D6}
.bloque--c{background:var(--cream)}
.rejilla{display:grid;grid-template-columns:1fr 46%;min-height:clamp(420px,46vw,620px)}
.bloque--rev .rejilla{grid-template-columns:46% 1fr}
.bloque--rev .col-txt{order:2}
.bloque--rev .col-img{order:1}
.col-txt{position:relative;z-index:2;padding:clamp(44px,5.4vw,84px) clamp(28px,4vw,64px) clamp(44px,5.4vw,84px) var(--pad);
  display:grid;gap:20px;align-content:center}
.bloque--rev .col-txt{padding-left:clamp(28px,4vw,64px);padding-right:var(--pad)}
.col-txt h2{font-size:clamp(1.8rem,3.5vw,2.8rem);max-width:15ch}
.col-txt .body b{color:var(--ink);font-weight:600}
.col-img{position:relative;overflow:hidden;min-height:260px}
.col-img img{width:100%;height:100%;object-fit:cover}
.col-img .cap{position:absolute;top:clamp(20px,3vw,44px);max-width:14ch;
  background:rgba(251,249,243,.9);padding:10px 13px}
.bloque:not(.bloque--rev) .col-img .cap{right:clamp(14px,2vw,30px)}
.bloque--rev .col-img .cap{left:clamp(14px,2vw,30px)}

/* número gigante de fondo, con paralaje muy leve por JS */
.ghost{position:absolute;top:clamp(-10px,-1vw,0px);font-family:var(--f-d);font-weight:300;
  font-size:clamp(9rem,20vw,20rem);line-height:.78;color:rgba(21,19,15,.055);
  pointer-events:none;user-select:none;z-index:1;letter-spacing:-.04em}
.bloque:not(.bloque--rev) .ghost{left:calc(var(--pad) - .06em)}
.bloque--rev .ghost{right:calc(var(--pad) - .06em)}
@media (max-width:1000px){
  /* en móvil el número gigante nunca puede tapar el titular: se
     reduce bastante y el texto, con z-index:2, siempre va encima */
  .ghost{font-size:clamp(4.5rem,22vw,7rem);top:clamp(4px,1vw,10px)}
}

/* lista numerada de cada bloque */
.lista{list-style:none;margin:6px 0 0;padding:0;display:grid}
.lista li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding-block:11px;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-2)}
.lista li .n{font-size:.72rem;letter-spacing:.1em;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* botón de WhatsApp propio de esta página: pill verde con icono,
   distinto del globo flotante .wa que ya existe en todo el sitio */
.pq-wa{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  background:var(--gold);color:var(--cream);padding:14px 24px;border-radius:999px;font-size:.84rem;
  justify-self:start;margin-top:8px;
  transition:background .25s,transform .25s cubic-bezier(.34,.1,.2,1),box-shadow .25s}
.pq-wa:hover{background:#0A7C46;transform:translateY(-2px) scale(1.02);box-shadow:0 14px 30px -16px rgba(0,104,55,.8)}
.pq-wa svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pq-wa .fl{transition:transform .28s cubic-bezier(.34,.1,.2,1)}
.pq-wa:hover .fl{transform:translateX(4px)}
.pq-wa--ghost{background:transparent;border:1px solid rgba(239,234,222,.4);color:#EFEADE}
.pq-wa--ghost:hover{background:#EFEADE;color:#24392E;border-color:#EFEADE}

/* banda final */
.banda{background:#24392E;color:#EFEADE;padding-block:clamp(48px,6vw,86px);
  border-radius:26px 26px 0 0;margin-top:-26px;position:relative;z-index:3}
.banda .wrap{display:grid;grid-template-columns:1.25fr auto auto;gap:clamp(24px,4vw,56px);align-items:center}
.banda .label{color:rgba(239,234,222,.6)}
.banda h2{font-size:clamp(1.5rem,2.9vw,2.3rem);max-width:18ch;margin-top:14px;color:#EFEADE}
.banda .cap{color:rgba(239,234,222,.55);border-left:1px solid rgba(239,234,222,.25);padding-left:22px;max-width:14ch}

/* entradas al hacer scroll, solo activas si el JS añade html.js */
.js .rev{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.22,.7,.25,1),transform .9s cubic-bezier(.22,.7,.25,1)}
.js .rev.in{opacity:1;transform:none}
.js .rev-d1{transition-delay:.08s}.js .rev-d2{transition-delay:.16s}
.js .rev-d3{transition-delay:.24s}.js .rev-d4{transition-delay:.32s}
.js .mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s cubic-bezier(.22,.7,.25,1)}
.js .mask.in{clip-path:inset(0 0 0 0)}
.js .mask img{transform:scale(1.1);transition:transform 1.6s cubic-bezier(.22,.7,.25,1)}
.js .mask.in img{transform:scale(1)}
@media (prefers-reduced-motion: reduce){
  .js .rev,.js .mask{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .js .mask img{transform:none!important;transition:none!important}
}

@media (max-width:1000px){
  .pq-hero{grid-template-columns:1fr}
  .pq-hero .txt{padding-inline:var(--pad)}
  .pq-hero .pq-shot{min-height:300px}
  .indice{grid-template-columns:1fr;gap:0}
  .ix{padding-block:16px;border-top:1px solid var(--line)}
  .ix::after{display:none}
  .rejilla,.bloque--rev .rejilla{grid-template-columns:1fr}
  .bloque--rev .col-txt{order:1;padding-inline:var(--pad)}
  .bloque--rev .col-img{order:2}
  .col-txt{padding-inline:var(--pad)}
  .col-img{min-height:300px}
  .banda .wrap{grid-template-columns:1fr;gap:26px}
  .banda .cap{border-left:0;padding-left:0}
}

/* ===== cifras ===== */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.cifras div{background:var(--ground);padding:26px 22px;display:grid;gap:6px}
.cifras b{font-family:var(--f-d);font-weight:360;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;letter-spacing:-.02em}
.cifras span{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3)}

/* ===== rejilla editorial ===== */
.split{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.idx{display:grid;gap:12px}
.idx .n{font-family:var(--f-d);font-weight:360;font-size:2.2rem;line-height:1;color:var(--gold)}

/* ===== marcos de foto ===== */
.shot{position:relative;overflow:hidden;background:#DED8CA;display:grid;place-items:center;border-radius:16px}
.shot::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 26% 14%, rgba(255,248,236,.9), rgba(255,248,236,0) 62%),
    linear-gradient(160deg, rgba(0,104,55,.14), rgba(21,19,15,.08));
  transition:transform .7s cubic-bezier(.3,.1,.2,1);
}
.shot:hover::before{transform:scale(1.07)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.3,.1,.2,1)}
.shot:hover img{transform:scale(1.045)}
.shot span{position:relative;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3);text-align:center;padding:14px}
.shot--wide{aspect-ratio:2/1}
.shot--tall{aspect-ratio:1/2}
.shot--area{aspect-ratio:4/5}
.shot--land{aspect-ratio:4/3}
.panel--dark .shot{background:#17161A}
.panel--dark .shot::before{background:radial-gradient(120% 90% at 26% 14%, rgba(99,190,147,.2), rgba(0,0,0,0) 62%)}
.panel--dark .shot span{color:var(--on-dark-2)}
.panel--flush .shot{border-radius:0}

/* ===== bloques de área ===== */
.area{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.area--rev{direction:rtl}
.area--rev > *{direction:ltr}
.area .h2{margin-block:16px 18px}
.checks{list-style:none;margin:26px 0 0;padding:0;display:grid}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;padding-block:12px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2)}
.checks li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);margin-top:9px}
.panel--dark .checks li{border-top-color:rgba(243,238,226,.16)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.tag{font-size:.68rem;letter-spacing:.06em;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;transition:color .2s,border-color .2s}
.tag:hover{color:var(--gold);border-color:var(--gold)}
.panel--dark .tag{color:var(--on-dark-2);border-color:rgba(243,238,226,.24)}
.area .btn-row{margin-top:30px}

/* ===== tarjetas ===== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 24px;
  display:grid;gap:10px;align-content:start;
  transition:transform .28s cubic-bezier(.34,.1,.2,1),border-color .28s,box-shadow .28s;
}
.card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 18px 36px -24px rgba(21,19,15,.5)}
.panel--surface .card,.panel--cream .card{background:var(--ground)}
.card .h3{font-size:1.15rem}
.card p{font-size:var(--fs-sm);color:var(--ink-2)}

/* ===== cita ===== */
.pull{
  font-family:var(--f-d);font-weight:360;font-size:clamp(1.45rem,2.8vw,2.1rem);
  line-height:1.24;letter-spacing:-.018em;max-width:24ch;
}
.pull::before{content:"";display:block;width:38px;height:1px;background:var(--gold);margin-bottom:22px}

/* ===== clientes ===== */
.clientes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:34px}
.cliente{background:var(--surface);padding:24px 22px;display:grid;gap:5px;align-content:start;transition:background .24s}
.cliente:hover{background:var(--cream)}
.cliente-logo{height:30px;margin-bottom:9px;display:flex;align-items:center}
.cliente-logo img{max-height:100%;max-width:132px;width:auto;height:auto;object-fit:contain}
.cliente b{font-family:var(--f-d);font-weight:360;font-size:1.18rem;letter-spacing:-.015em;line-height:1.15}
.cliente span{font-size:var(--fs-sm);color:var(--ink-3)}
.cliente--more{align-content:center}

/* ===== equipo ===== */
.equipo{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
.persona{display:grid;gap:14px}
.persona b{font-family:var(--f-d);font-weight:360;font-size:1.32rem;letter-spacing:-.015em;line-height:1.1}
.persona .rol{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.2em;color:var(--gold)}
.persona p{font-size:var(--fs-sm);color:var(--ink-2)}
.colabs{list-style:none;margin:26px 0 0;padding:0;display:grid}
.colab{display:grid;grid-template-columns:230px 1fr;gap:clamp(14px,3vw,36px);padding-block:18px;border-top:1px solid var(--line)}
.colab b{font-family:var(--f-d);font-weight:360;font-size:1.2rem;letter-spacing:-.015em}
.colab span{font-size:var(--fs-sm);color:var(--ink-2)}

/* ===== acordeón ===== */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  cursor:pointer;list-style:none;padding:22px 0;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  font-family:var(--f-d);font-weight:360;font-size:clamp(1.12rem,1.8vw,1.4rem);letter-spacing:-.015em;line-height:1.25;
  transition:color .2s;
}
.acc summary:hover{color:var(--gold)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--f-b);color:var(--gold);font-size:1.15rem}
.acc details[open] summary::after{content:"−"}
.acc p{padding-bottom:26px;color:var(--ink-2);font-size:var(--fs-sm);max-width:70ch}

/* ===== formulario ===== */
.contacto{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start}
.form{display:grid;gap:22px;max-width:580px}
.field{display:grid;gap:8px}
.field label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:var(--f-b);font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line-2);padding:11px 2px;width:100%;border-radius:0;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field textarea{min-height:110px;resize:vertical}
.field :focus{outline:0;border-bottom-color:var(--gold)}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.8rem;color:var(--ink-3);line-height:1.55}
.consent input{margin-top:4px;accent-color:var(--gold)}
.form-ok{display:none;padding:14px 18px;border-radius:14px;background:rgba(0,104,55,.1);color:var(--gold);font-size:var(--fs-sm)}
.form-ok.show{display:block}
.form-error{display:none;padding:14px 18px;border-radius:14px;background:rgba(178,40,40,.1);color:#8a1f1f;font-size:var(--fs-sm)}
.form-error.show{display:block}
.datos{display:grid}
.dato{display:grid;gap:4px;padding-block:18px;border-top:1px solid var(--line)}
.dato b{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3);font-weight:500}
.dato span{font-size:1.05rem}

/* ===== pie ===== */
.footer{
  position:relative;z-index:2;background:var(--dark);color:var(--on-dark);
  border-radius:var(--r) var(--r) 0 0;margin-top:-56px;padding-block:clamp(52px,6vw,80px) 28px;
  box-shadow:0 -26px 60px -34px rgba(0,0,0,.85);
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,40px)}
.footer h4{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.24em;color:var(--on-dark-2);margin-bottom:18px;font-family:var(--f-b);font-weight:500}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer a{font-size:var(--fs-sm);color:var(--on-dark-2);text-decoration:none;transition:color .2s}
.footer a:hover{color:var(--gold-2)}
.footer .brand span{color:var(--on-dark-2)}
.footer-bottom{margin-top:clamp(36px,4vw,56px);padding-top:20px;border-top:1px solid rgba(243,238,226,.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.75rem;color:var(--on-dark-2)}

/* ===== whatsapp flotante ===== */
.wa{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:85;
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--ink);color:var(--ground);padding:14px 20px;border-radius:999px;
  font-size:.85rem;box-shadow:0 14px 32px -16px rgba(21,19,15,.75);
  transition:transform .26s cubic-bezier(.34,.1,.2,1),background .26s,color .26s,box-shadow .26s;
}
.wa:hover{background:var(--gold);color:var(--cream);transform:translateY(-3px) scale(1.05);box-shadow:0 18px 38px -18px rgba(0,104,55,.9)}
.wa:active{transform:translateY(0) scale(.99)}
.wa svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.wa .wa-txt{display:none}.wa{padding:14px}}

/* ===== responsive ===== */
@media (max-width:1000px){
  .split,.area,.contacto{grid-template-columns:1fr}
  .area--rev{direction:ltr}
  .idx{grid-auto-flow:column;justify-content:start;align-items:center;gap:14px}
  .cards,.cards--3,.equipo,.clientes{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .colab{grid-template-columns:1fr;gap:8px}
  .cifras{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .header .wrap{min-height:auto}
  .nav{width:100%;gap:20px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .cards,.cards--3,.equipo,.clientes,.row-2{grid-template-columns:1fr}
  .panel,.footer{margin-top:-36px}
}
[hidden]{display:none!important}

/* =====================================================================
   ÁREAS (portada) — acordeón editorial: ensanche horizontal en escritorio,
   acordeón vertical nativo (<details>) en móvil/tablet.
   ===================================================================== */
.area-reveal-title{opacity:1;transform:none}
.area-reveal.pre-reveal .area-reveal-title{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.19,1,.22,1),transform .6s cubic-bezier(.19,1,.22,1);
}
.area-reveal.pre-reveal.in-view .area-reveal-title{opacity:1;transform:translateY(0)}

.cards--kinetic{
  position:relative;margin-top:44px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:14px;align-items:start;
  transition:grid-template-columns .75s cubic-bezier(.22,1,.36,1);
}
.cards--kinetic.is-closing{transition-duration:.82s}

/* --- tarjeta base: neutraliza <details>/<summary> y reutiliza la piel de .card ---
   El disparador visual es SIEMPRE .is-active (lo pone el JS, con su propia
   histéresis), o :focus-within/[open] como red de seguridad nativa para
   teclado y para cuando no hay JS. El :hover crudo ya no dispara nada por sí
   solo — así se evita el parpadeo al cruzar de una tarjeta a otra. */
.card--area{
  background:var(--ground);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;
  transition:border-color .55s cubic-bezier(.22,1,.36,1),
             box-shadow .55s cubic-bezier(.22,1,.36,1),
             transform .55s cubic-bezier(.22,1,.36,1);
}
.card--area.is-active,.card--area:focus-within,.card--area[open]{
  border-color:var(--gold);box-shadow:0 20px 38px -26px rgba(21,19,15,.4);transform:translateY(-3px);
}
.card--area summary{list-style:none;cursor:pointer}
.card--area summary::marker,.card--area summary::-webkit-details-marker{display:none}
.card-summary{position:relative;display:grid;gap:8px;padding:24px 22px;align-content:start;outline-offset:-3px}
.card-num{
  position:absolute;top:-.14em;right:.06em;z-index:0;pointer-events:none;
  font-family:var(--f-d);font-weight:360;font-size:clamp(3rem,6vw,4rem);line-height:1;
  color:rgba(21,19,15,.065);
  transform:translate(var(--px,0px),var(--py,0px));
  transition:color .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
.card--area.is-active .card-num,.card--area:focus-within .card-num,.card--area[open] .card-num{
  color:rgba(0,104,55,.14);
  transform:translate(calc(-5px + var(--px,0px)),calc(-4px + var(--py,0px))) scale(1.07);
}
.card-summary > *{position:relative;z-index:1}
.card-icon{width:38px;height:38px;margin-top:2px}
.card-eyebrow{font-family:var(--f-b);font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gold);font-weight:500}
.card-headline{font-family:var(--f-d);font-weight:360;font-size:1.2rem;line-height:1.22;letter-spacing:-.012em;color:var(--ink);max-width:26ch}
.card-chevron{
  display:none;position:absolute;top:26px;right:22px;width:11px;height:11px;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .4s cubic-bezier(.22,1,.36,1);
}

/* --- cuerpo revelado (explicación + puntos + cta): entra con un pequeño
   retraso tras la tarjeta, y con una leve subida en vez de aparecer de golpe --- */
.card-body{
  display:grid;gap:14px;padding:0 22px 24px;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);
}
.card--area.is-active .card-body,.card--area:focus-within .card-body,.card--area[open] .card-body{
  opacity:1;transform:translateY(0);transition-delay:.13s;
}
.card-lede{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55}
.card-points{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.card-points li{position:relative;padding-left:16px;font-size:.82rem;color:var(--ink-2)}
.card-points li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.card-cta{
  display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px;width:max-content;
  transition:border-color .22s,color .22s;
}
.card-cta span{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.card-cta:hover{color:var(--gold);border-bottom-color:var(--gold)}
.card-cta:hover span{transform:translateX(5px)}

/* --- iconos: en reposo, discretos; con la tarjeta activa, se activan --- */
.icon-fiscal .icon-anim{stroke-dasharray:34;stroke-dashoffset:34;opacity:0;transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1) .1s,opacity .3s .1s}
.icon-contable .bar{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.icon-contable .bar-1{transform-origin:17px 46px}
.icon-contable .bar-2{transform-origin:32px 46px}
.icon-contable .bar-3{transform-origin:47px 46px}
.icon-laboral .dot{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.icon-financiera .fin-line{stroke-dasharray:64;stroke-dashoffset:64;transition:stroke-dashoffset .7s cubic-bezier(.22,1,.36,1)}
.icon-financiera .fin-dot{opacity:0;transform:scale(.4);transform-origin:51px 17px;transition:opacity .3s .45s,transform .35s cubic-bezier(.22,1,.36,1) .45s}

.card--area.is-active .icon-fiscal .icon-anim,.card--area:focus-within .icon-fiscal .icon-anim,
.card--area[open] .icon-fiscal .icon-anim{stroke-dashoffset:0;opacity:1}
.card--area.is-active .icon-contable .bar-1,.card--area:focus-within .icon-contable .bar-1,.card--area[open] .icon-contable .bar-1{transform:scaleY(1.3)}
.card--area.is-active .icon-contable .bar-2,.card--area:focus-within .icon-contable .bar-2,.card--area[open] .icon-contable .bar-2{transform:scaleY(1.08)}
.card--area.is-active .icon-contable .bar-3,.card--area:focus-within .icon-contable .bar-3,.card--area[open] .icon-contable .bar-3{transform:scaleY(1.45)}
.card--area.is-active .icon-laboral .dot-1,.card--area:focus-within .icon-laboral .dot-1,.card--area[open] .icon-laboral .dot-1{transform:translateY(-4px)}
.card--area.is-active .icon-laboral .dot-2,.card--area:focus-within .icon-laboral .dot-2,.card--area[open] .icon-laboral .dot-2{transform:translateY(9px)}
.card--area.is-active .icon-laboral .dot-3,.card--area:focus-within .icon-laboral .dot-3,.card--area[open] .icon-laboral .dot-3{transform:translateY(-6px)}
.card--area.is-active .icon-laboral .dot-4,.card--area:focus-within .icon-laboral .dot-4,.card--area[open] .icon-laboral .dot-4{transform:translateY(13px)}
.card--area.is-active .icon-financiera .fin-line,.card--area:focus-within .icon-financiera .fin-line,.card--area[open] .icon-financiera .fin-line{stroke-dashoffset:0}
.card--area.is-active .icon-financiera .fin-dot,.card--area:focus-within .icon-financiera .fin-dot,.card--area[open] .icon-financiera .fin-dot{opacity:1;transform:scale(1)}

/* --- hilo + símbolo que viaja entre las áreas (solo escritorio) --- */
.area-rail,.area-marker{display:none}
.area-marker svg{display:block;width:100%;height:100%}

/* --- entrada en cascada al hacer scroll --- */
.area-reveal.pre-reveal .card--area{
  opacity:0;transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.19,1,.22,1),transform .6s cubic-bezier(.19,1,.22,1),
             border-color .4s,box-shadow .4s;
}
.area-reveal.pre-reveal.in-view .card--area{opacity:1;transform:translateY(0)}
.area-reveal.in-view .card--area:nth-child(1){transition-delay:.14s}
.area-reveal.in-view .card--area:nth-child(2){transition-delay:.24s}
.area-reveal.in-view .card--area:nth-child(3){transition-delay:.34s}
.area-reveal.in-view .card--area:nth-child(4){transition-delay:.44s}

@media (prefers-reduced-motion: reduce){
  .area-reveal.pre-reveal .area-reveal-title,.area-reveal.pre-reveal .card--area{opacity:1;transform:none;transition:none}
  .card--area,.card--area.is-active,.card-num,.card--area.is-active .card-num,.card-cta span,
  .card-body,.card--area.is-active .card-body,.cards--kinetic,.cards--kinetic.is-closing{transition:none!important;transform:none}
}

/* --- escritorio: acordeón horizontal por anchura ---
   El ancho lo controla el JS (histéresis al entrar, pausa al salir del
   CONTENEDOR completo, nunca al salir de una tarjeta suelta), escribiendo
   grid-template-columns directamente — la interpolación la hace el CSS
   de arriba, JS nunca anima píxel a píxel. :focus-within se deja además
   como red de seguridad para teclado y para cuando no hay JS. */
@media (min-width:1001px){
  /* Altura fija siempre, se active o no: así el ancho es lo único que
     cambia y el panel nunca crece ni empuja al siguiente (el sitio
     apila paneles con scroll, y un salto de altura aquí lo rompería). */
  .card-body{display:grid !important;height:270px;overflow:hidden}
  .card-headline{max-width:14ch;transition:opacity .5s cubic-bezier(.22,1,.36,1)}
  .cards--kinetic:has(.card--area:nth-child(1):focus-within){grid-template-columns:1.7fr .77fr .77fr .77fr}
  .cards--kinetic:has(.card--area:nth-child(2):focus-within){grid-template-columns:.77fr 1.7fr .77fr .77fr}
  .cards--kinetic:has(.card--area:nth-child(3):focus-within){grid-template-columns:.77fr .77fr 1.7fr .77fr}
  .cards--kinetic:has(.card--area:nth-child(4):focus-within){grid-template-columns:.77fr .77fr .77fr 1.7fr}
  .cards--kinetic:has(.card--area.is-active) .card--area:not(.is-active) .card-headline,
  .cards--kinetic:has(.card--area:focus-within) .card--area:not(:focus-within) .card-headline{opacity:.55}

  .area-rail{
    display:block;position:absolute;left:0;right:0;top:-18px;height:1px;
    background:var(--line-2);
  }
  .area-marker{
    display:block;position:absolute;top:-38px;left:0;width:30px;height:30px;
    pointer-events:none;z-index:5;
    transform:translateX(calc(var(--mk-x,0px) - 50%));
    transition:transform .8s cubic-bezier(.22,1,.36,1);
  }
}
@media (min-width:1001px) and (prefers-reduced-motion: reduce){
  .card-body{transition:none!important}
  .area-marker{transition:none}
}

/* --- móvil / tablet: acordeón vertical nativo, sin JS --- */
@media (max-width:1000px){
  .cards--kinetic{grid-template-columns:1fr;gap:12px}
  .card-summary{padding:20px 20px;grid-template-columns:auto 1fr auto;align-items:center;column-gap:14px;row-gap:4px}
  .card-num{position:static;grid-row:1 / 3;font-size:2.1rem;color:var(--gold);opacity:.5;align-self:center;transform:none !important}
  .card-icon{display:none}
  .card-eyebrow{grid-column:2}
  .card-headline{grid-column:2;max-width:none}
  .card-chevron{display:block;position:static;grid-column:3;grid-row:1 / 3;justify-self:end}
  .card--area[open] .card-chevron{transform:rotate(225deg)}
  .card-body{padding-top:2px}
}

/* =====================================================================
   SERVICIOS (servicios.html) — envoltorio de las 5 áreas. Sin línea de
   scroll por ahora; solo se aprieta la respiración entre secciones para
   que la página no se sienta tan larga.
   ===================================================================== */
.journey{position:relative}
.journey-note{
  position:relative;display:inline-block;margin-top:10px;font-size:.82rem;font-style:italic;
  color:var(--ink-3);letter-spacing:.01em;
}

/* el sitio ya es airoso de por sí; aquí se aprieta bastante más la
   respiración de cada panel, que es lo que más espacio en blanco
   acumula entre una área y la siguiente */
.journey .panel{
  padding-block:clamp(18px,2.2vw,32px) calc(clamp(18px,2.2vw,32px) + 16px);
}
.journey .hero{padding-block:clamp(24px,3.2vw,40px) clamp(28px,3.6vw,44px)}
.journey .area{gap:clamp(24px,4vw,56px)}

/* --- revelado escalonado por bloque: etiqueta → título → texto → lista → botón --- */
.svc-reveal.pre-reveal > *{
  opacity:0;transform:translateY(15px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.svc-reveal.pre-reveal.in-view > *{opacity:1;transform:translateY(0)}
.svc-reveal.pre-reveal.in-view > *:nth-child(1){transition-delay:.02s}
.svc-reveal.pre-reveal.in-view > *:nth-child(2){transition-delay:.10s}
.svc-reveal.pre-reveal.in-view > *:nth-child(3){transition-delay:.18s}
.svc-reveal.pre-reveal.in-view > *:nth-child(4){transition-delay:.26s}
.svc-reveal.pre-reveal.in-view > *:nth-child(5){transition-delay:.34s}

/* --- símbolo de cierre --- */
.journey-close .wrap{position:relative}
.journey-symbol{position:relative;width:90px;height:90px}
.journey-symbol svg{width:100%;height:100%}
.js-ring-1,.js-ring-2{stroke:var(--gold-2);stroke-width:1.4}
.js-dot{fill:var(--gold-2)}

@media (prefers-reduced-motion: reduce){
  .svc-reveal.pre-reveal > *{opacity:1;transform:none;transition:none}
}