/* ============================================================
   TODO BRILLO - Design system: "Liquid gold on obsidian"
   Hand-rolled CSS (no framework) for Core Web Vitals headroom.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --obsidian:#07070A;
  --obsidian-2:#0C0C11;
  --obsidian-3:#121219;
  --panel:rgba(255,255,255,.04);
  --panel-2:rgba(255,255,255,.06);
  --hairline:rgba(245,196,81,.18);
  --hairline-soft:rgba(255,255,255,.08);

  --gold:#F5C451;
  --gold-hi:#FFE9A8;
  --gold-deep:#C9962F;
  --gold-glow:rgba(245,196,81,.35);

  --text:#F2F2F5;
  --muted:#A8A8B3;
  --muted-2:#76767F;

  --ok:#4ADE80;
  --wa:#25D366;

  --ff:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --step--1:clamp(.82rem,.78rem + .2vw,.9rem);
  --step-0:clamp(1rem,.96rem + .25vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2rem);
  --step-3:clamp(1.9rem,1.5rem + 1.9vw,2.9rem);
  --step-4:clamp(2.1rem,1.5rem + 2.8vw,3.5rem);

  --wrap:1200px;
  --gut:clamp(1rem,.6rem + 2vw,2rem);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;

  --shadow:0 18px 50px -12px rgba(0,0,0,.7);
  --shadow-gold:0 10px 40px -10px var(--gold-glow);
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:76px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  font-family:var(--ff);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--text);
  background:var(--obsidian);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{line-height:1.12;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-glow);color:#fff}

/* ---------- 3. Ambient background ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% -8%,rgba(245,196,81,.10),transparent 62%),
    radial-gradient(48rem 34rem at 92% 6%,rgba(201,150,47,.08),transparent 60%),
    radial-gradient(46rem 40rem at 50% 108%,rgba(245,196,81,.06),transparent 62%),
    linear-gradient(180deg,var(--obsidian) 0%,var(--obsidian-2) 55%,var(--obsidian) 100%);
}
/* fine grain so flat panels never look plasticky */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:800px;margin-inline:auto;padding-inline:var(--gut)}
section{position:relative;padding-block:clamp(3.5rem,2rem + 7vw,7rem)}
.grid{display:grid;gap:clamp(1rem,.6rem + 1.4vw,1.75rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,16.5rem),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.center{text-align:center}
.stack>*+*{margin-top:1rem}

/* ---------- 5. Type helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);
}
.eyebrow::before{content:"";width:1.75rem;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
h1{font-size:var(--step-4);font-weight:700}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
.lead{font-size:var(--step-1);color:var(--muted);font-weight:300;line-height:1.55}
.muted{color:var(--muted)}
.small{font-size:var(--step--1);color:var(--muted-2)}
.sec-head{max-width:46rem;margin-bottom:clamp(2rem,1rem + 3vw,3.5rem)}
.sec-head.center{margin-inline:auto}
.sec-head p{margin-top:.9rem;color:var(--muted);font-size:var(--step-1);font-weight:300}

/* gold gradient text */
.shine{
  background:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 28%,var(--gold-hi) 46%,var(--gold) 64%,var(--gold-deep) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:sweep 7s var(--ease) infinite;
}
@keyframes sweep{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- 6. Buttons ---------- */
.btn{
  --bg:var(--gold);--fg:#15110A;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border:0;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);
  font-weight:700;font-size:var(--step--1);letter-spacing:.01em;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,var(--shadow-gold);
  text-align:center;white-space:nowrap;
}
.btn::after{ /* light sweep on hover */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 44px -10px var(--gold-glow)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn-ghost{
  --bg:transparent;--fg:var(--text);
  border:1px solid var(--hairline);backdrop-filter:blur(10px);
  box-shadow:none;background:var(--panel);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi);box-shadow:0 10px 30px -14px var(--gold-glow)}
.btn-wa{--bg:var(--wa);--fg:#06290F;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 34px -12px rgba(37,211,102,.5)}
.btn-wa:hover{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 16px 44px -10px rgba(37,211,102,.55)}
.btn-lg{padding:1.05rem 2.1rem;font-size:var(--step-0)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.btn-row.center{justify-content:center}

/* ---------- 7. Panels / cards ---------- */
.panel{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.panel::before{ /* top hairline highlight */
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--hairline),transparent);
}
.card{
  --pad:clamp(1.3rem,1rem + 1vw,1.9rem);
  padding:var(--pad);
  background:linear-gradient(180deg,var(--panel-2),rgba(255,255,255,.02));
  border:1px solid var(--hairline-soft);
  border-radius:var(--r);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;
  height:100%;
}
.card::before{ /* cursor-tracked gold bloom, driven by site.js */
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;
  background:radial-gradient(18rem 18rem at var(--mx,50%) var(--my,0%),rgba(245,196,81,.16),transparent 65%);
}
.card:hover{transform:translateY(-6px);border-color:var(--hairline);box-shadow:0 22px 56px -22px rgba(0,0,0,.85)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted);font-size:var(--step--1)}
.card-link{display:block;height:100%}
.card-more{
  margin-top:1rem;display:inline-flex;align-items:center;gap:.4rem;
  color:var(--gold);font-weight:600;font-size:var(--step--1);
}
.card-more svg{transition:transform .35s var(--ease)}
.card:hover .card-more svg{transform:translateX(5px)}

.ico{
  width:3rem;height:3rem;display:grid;place-items:center;margin-bottom:1.1rem;
  border-radius:14px;color:var(--gold);
  background:radial-gradient(circle at 30% 25%,rgba(245,196,81,.22),rgba(245,196,81,.05));
  border:1px solid var(--hairline);
  transition:transform .45s var(--ease);
}
.card:hover .ico{transform:scale(1.08) rotate(-4deg)}
.ico svg{width:1.5rem;height:1.5rem}

/* ---------- 8. Navigation ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:.8rem 1.2rem;background:var(--gold);color:#15110A;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

#nav{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .4s var(--ease),box-shadow .4s,backdrop-filter .4s,padding .4s;
  padding-block:1rem;
}
#nav.scrolled{
  background:rgba(7,7,10,.82);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 var(--hairline-soft),0 14px 40px -24px #000;
  padding-block:.55rem;
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:700;font-size:1.22rem;letter-spacing:-.02em;flex-shrink:0}
.brand-mark{
  width:2.3rem;height:2.3rem;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--gold-hi),var(--gold) 45%,var(--gold-deep));
  color:#15110A;font-weight:800;font-size:1.1rem;
  box-shadow:var(--shadow-gold);
  transition:transform .5s var(--ease);
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.brand-txt .b1{color:var(--text)}
.brand-txt .b2{color:var(--gold)}
.nav-links{display:none;align-items:center;gap:.25rem}
.nav-links a{
  padding:.5rem .72rem;border-radius:var(--r-pill);
  font-size:.875rem;font-weight:500;color:var(--muted);
  transition:color .25s,background .25s;position:relative;
  white-space:nowrap;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold);background:var(--panel)}
.nav-cta{display:none;gap:.5rem;align-items:center}
.burger{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  background:var(--panel);border:1px solid var(--hairline-soft);border-radius:12px;cursor:pointer;
}
.burger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* dropdown (desktop) */
.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + .6rem);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:34rem;padding:.85rem;display:grid;grid-template-columns:1fr 1fr;gap:.2rem;
  background:rgba(12,12,17,.96);backdrop-filter:blur(20px);
  border:1px solid var(--hairline-soft);border-radius:var(--r);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub a{display:block;padding:.6rem .8rem;font-size:.85rem;border-radius:var(--r-sm)}
.sub a:hover{background:var(--panel-2);color:var(--gold)}

/* mobile drawer */
#drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:95;
  background:rgba(7,7,10,.97);backdrop-filter:blur(20px);
  padding:1.5rem var(--gut) 3rem;overflow-y:auto;
  transform:translateY(-14px);opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
#drawer.open{opacity:1;visibility:visible;transform:translateY(0)}
#drawer a{display:block;padding:.85rem 0;border-bottom:1px solid var(--hairline-soft);font-weight:500}
#drawer a:hover{color:var(--gold)}
#drawer .btn{margin-top:1.25rem;width:100%}
#drawer .dgroup{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:1.5rem 0 .35rem;font-weight:600}

/* scroll progress */
#prog{position:fixed;top:0;left:0;height:2px;z-index:101;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));box-shadow:0 0 12px var(--gold-glow)}

/* ---------- 9. Hero ---------- */
.hero{padding-top:calc(var(--nav-h) + clamp(2.5rem,1rem + 6vw,5.5rem));padding-bottom:clamp(3rem,2rem + 4vw,5.5rem);overflow:hidden}
.hero-grid{display:grid;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center}
.hero h1{margin:1.1rem 0 1.25rem}
.hero .lead{max-width:34rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.9rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .85rem;border-radius:var(--r-pill);
  background:var(--panel);border:1px solid var(--hairline-soft);
  font-size:.8rem;font-weight:500;color:var(--muted);
}
.chip svg{width:.95rem;height:.95rem;color:var(--gold);flex-shrink:0}

/* Rotating service word in H1.
   The .shine gradient MUST live on each child, never on .rotator itself:
   background-clip:text clips the parent's gradient to every descendant
   glyph, so a child's opacity:0 would not stop its word from painting
   and all five would stack on top of each other. */
.rotator{display:inline-grid;vertical-align:bottom;margin-left:.25em;text-align:left}
.rotator>span{
  grid-area:1/1;opacity:0;transform:translateY(.4em) rotateX(-40deg);
  animation:rot 15s var(--ease) infinite;
  transform-origin:50% 100%;
  white-space:nowrap;
}
.rotator>span:nth-child(1){animation-delay:0s}
.rotator>span:nth-child(2){animation-delay:3s}
.rotator>span:nth-child(3){animation-delay:6s}
.rotator>span:nth-child(4){animation-delay:9s}
.rotator>span:nth-child(5){animation-delay:12s}
@keyframes rot{
  0%{opacity:0;transform:translateY(.45em) rotateX(-40deg)}
  3%,18%{opacity:1;transform:translateY(0) rotateX(0)}
  21%,100%{opacity:0;transform:translateY(-.45em) rotateX(40deg)}
}

/* hero visual: orbiting gloss disc */
.orb-wrap{position:relative;aspect-ratio:1;max-width:30rem;margin-inline:auto;width:100%}
.orb{
  position:absolute;inset:14%;border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,var(--gold-hi),var(--gold) 26%,var(--gold-deep) 55%,#3A2A08 100%);
  box-shadow:0 0 80px -10px var(--gold-glow),inset -18px -22px 60px rgba(0,0,0,.55);
  animation:float 9s ease-in-out infinite;
}
.orb::after{ /* specular highlight - the "brillo" */
  content:"";position:absolute;top:12%;left:16%;width:30%;height:22%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);
  filter:blur(3px);
}
@keyframes float{0%,100%{transform:translateY(-10px)}50%{transform:translateY(10px)}}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--hairline);animation:spin 26s linear infinite}
.ring:nth-of-type(2){inset:6%;border-style:dashed;border-color:rgba(255,255,255,.07);animation-duration:38s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orb-badge{
  position:absolute;display:flex;align-items:center;gap:.5rem;
  padding:.6rem .95rem;border-radius:var(--r-pill);
  background:rgba(12,12,17,.9);backdrop-filter:blur(12px);
  border:1px solid var(--hairline);box-shadow:var(--shadow);
  font-size:.78rem;font-weight:600;white-space:nowrap;
  animation:float 7s ease-in-out infinite;
}
.orb-badge svg{width:1rem;height:1rem;color:var(--gold)}
.ob1{top:4%;left:-4%;animation-delay:-1s}
.ob2{bottom:12%;right:-6%;animation-delay:-3.5s}
.ob3{bottom:-2%;left:10%;animation-delay:-5s}

/* ---------- 10. Marquee (keyword ticker) ---------- */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);padding-block:1.25rem;border-block:1px solid var(--hairline-soft)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:500;color:var(--muted-2);white-space:nowrap}
.marquee-track span svg{width:1.05rem;height:1.05rem;color:var(--gold);opacity:.75}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 11. Stats / counters ---------- */
.stat{text-align:center;padding:1.4rem .75rem}
.stat-n{
  font-size:var(--step-3);font-weight:700;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(170deg,var(--gold-hi),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.stat-l{margin-top:.5rem;font-size:var(--step--1);color:var(--muted)}

/* ---------- 12. Slider (scroll-snap carousel) ---------- */
.slider{position:relative}
.slider-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.slider-nav{display:flex;gap:.5rem;flex-shrink:0}
.sbtn{
  width:2.9rem;height:2.9rem;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:var(--panel);border:1px solid var(--hairline-soft);color:var(--text);
  transition:background .25s,border-color .25s,color .25s,transform .25s,opacity .25s;
}
.sbtn:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:#15110A;transform:scale(1.06)}
.sbtn:disabled{opacity:.3;cursor:not-allowed}
.sbtn svg{width:1.1rem;height:1.1rem}
.rail{
  display:flex;gap:clamp(.85rem,.5rem + 1vw,1.35rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.4rem .4rem 1.4rem;margin:0 -.4rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 min(84vw,22rem)}
.rail.rail-wide>*{flex:0 0 min(88vw,30rem)}
.dots{display:flex;gap:.4rem;justify-content:center;margin-top:.25rem}
.dots button{width:.5rem;height:.5rem;border-radius:50%;border:0;background:var(--hairline-soft);cursor:pointer;padding:0;transition:width .3s var(--ease),background .3s}
.dots button[aria-current="true"]{width:1.6rem;border-radius:var(--r-pill);background:var(--gold)}

/* ---------- 13. Before / after comparison ---------- */
.ba{
  position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--hairline-soft);box-shadow:var(--shadow);
  cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--obsidian-3);
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-tag{
  position:absolute;bottom:1rem;padding:.35rem .8rem;border-radius:var(--r-pill);
  background:rgba(7,7,10,.78);backdrop-filter:blur(8px);border:1px solid var(--hairline-soft);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.ba-tag.l{left:1rem}
.ba-tag.r{right:1rem;color:var(--gold);border-color:var(--hairline)}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  box-shadow:0 0 16px var(--gold-glow);pointer-events:none;
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:2.9rem;height:2.9rem;border-radius:50%;
  background:rgba(7,7,10,.85);backdrop-filter:blur(8px);
  border:1px solid var(--gold);box-shadow:0 0 24px -4px var(--gold-glow);
}
.ba-handle::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  width:1rem;height:1rem;
  background:var(--gold);
  clip-path:polygon(0 50%,38% 20%,38% 80%,100% 50%,62% 20%,62% 80%);
}

/* ---------- 14. Process timeline ---------- */
.steps{counter-reset:s;position:relative;display:grid;gap:1.1rem}
.step{
  counter-increment:s;position:relative;padding-left:4.2rem;
  padding-block:.3rem;
}
.step::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:0;
  width:2.9rem;height:2.9rem;display:grid;place-items:center;border-radius:12px;
  background:radial-gradient(circle at 30% 25%,rgba(245,196,81,.2),rgba(245,196,81,.04));
  border:1px solid var(--hairline);color:var(--gold);font-weight:700;font-size:.9rem;
}
.step::after{
  content:"";position:absolute;left:1.45rem;top:3.2rem;bottom:-1.1rem;width:1px;
  background:linear-gradient(180deg,var(--hairline),transparent);
}
.step:last-child::after{display:none}
.step h3{font-size:var(--step-0);margin-bottom:.25rem}
.step p{color:var(--muted);font-size:var(--step--1)}

/* ---------- 15. Pricing ---------- */
.price-card{display:flex;flex-direction:column}
.price-card.feat{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 24px 60px -24px var(--gold-glow)}
.price-flag{
  position:absolute;top:0;right:0;
  padding:.3rem .8rem;border-radius:0 var(--r) 0 var(--r);
  background:var(--gold);color:#15110A;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.price-v{display:flex;align-items:baseline;gap:.3rem;margin:.85rem 0 1.1rem}
.price-v b{font-size:var(--step-2);font-weight:700;letter-spacing:-.03em;color:var(--gold-hi)}
.price-v i{font-style:normal;font-size:var(--step--1);color:var(--muted-2)}
.feats{display:grid;gap:.6rem;margin-bottom:1.4rem;flex:1}
.feats li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--step--1);color:var(--muted)}
.feats svg{width:1.05rem;height:1.05rem;color:var(--gold);flex-shrink:0;margin-top:.25rem}
.ptable{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.ptable th,.ptable td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--hairline-soft)}
.ptable th{color:var(--gold);font-weight:600;letter-spacing:.04em;font-size:.8rem;text-transform:uppercase}
.ptable td:last-child{text-align:right;font-weight:700;color:var(--gold-hi);white-space:nowrap}
.ptable tr:last-child td{border-bottom:0}
.scroll-x{overflow-x:auto}

/* ---------- 16. FAQ ---------- */
.faq{display:grid;gap:.7rem}
.faq details{
  background:linear-gradient(180deg,var(--panel-2),rgba(255,255,255,.02));
  border:1px solid var(--hairline-soft);border-radius:var(--r);
  transition:border-color .3s,background .3s;
}
.faq details[open]{border-color:var(--hairline)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.3rem;cursor:pointer;font-weight:600;list-style:none;font-size:var(--step-0);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:.6rem;height:.6rem;flex-shrink:0;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg) translateY(-2px);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq-body{padding:0 1.3rem 1.2rem;color:var(--muted);font-size:var(--step--1)}

/* ---------- 16b. Key facts (GEO: bloque extraíble por motores de IA) ----
   Pares dato/valor en <dl>, deliberadamente planos y sin adornos para que
   un motor generativo pueda citarlos literalmente. */
.facts{
  display:grid;gap:0;margin:0;
  border:1px solid var(--hairline);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(245,196,81,.06),rgba(255,255,255,.02));
  overflow:hidden;
}
.facts>div{
  display:grid;gap:.15rem .9rem;
  padding:.75rem 1.1rem;
  border-bottom:1px solid var(--hairline-soft);
}
.facts>div:last-child{border-bottom:0}
.facts dt{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600}
.facts dd{margin:0;font-size:var(--step--1);color:var(--text)}
@media (min-width:520px){
  .facts>div{grid-template-columns:11rem 1fr;align-items:baseline}
  .facts dt{text-align:left}
}
.facts-head{
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.9rem;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);font-weight:600;
}
.facts-head svg{width:1.05rem;height:1.05rem}

/* ---------- 17. Zone / postcode chips ---------- */
.pills{display:flex;flex-wrap:wrap;gap:.45rem}
.pill{
  padding:.4rem .8rem;border-radius:var(--r-pill);font-size:.82rem;font-weight:600;
  background:var(--panel);border:1px solid var(--hairline-soft);color:var(--muted);
  transition:all .25s var(--ease);
}
a.pill:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);background:rgba(245,196,81,.08)}
.pill-gold{color:var(--gold);border-color:var(--hairline);background:rgba(245,196,81,.07)}
.zone-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.5rem}
.zone-list a{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.8rem 1rem;border-radius:var(--r-sm);font-size:var(--step--1);font-weight:500;
  background:var(--panel);border:1px solid var(--hairline-soft);
  transition:all .25s var(--ease);
}
.zone-list a:hover{border-color:var(--gold);color:var(--gold);transform:translateX(4px)}
.zone-list a b{font-weight:600}
.zone-list a span{color:var(--muted-2);font-size:.78rem;font-weight:500}
.zone-list a:hover span{color:var(--gold-deep)}

/* ---------- 18. CTA band ---------- */
.cta-band{
  padding:clamp(2.2rem,1.4rem + 3vw,4rem);border-radius:var(--r-lg);text-align:center;
  background:
    radial-gradient(40rem 20rem at 50% 0%,rgba(245,196,81,.14),transparent 70%),
    linear-gradient(180deg,var(--panel-2),rgba(255,255,255,.02));
  border:1px solid var(--hairline);position:relative;overflow:hidden;
}
.cta-band h2{max-width:34rem;margin-inline:auto}
.cta-band p{max-width:38rem;margin:.9rem auto 1.8rem;color:var(--muted)}

/* ---------- 19. Forms ---------- */
.form{display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:var(--step--1);font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{
  padding:.85rem 1rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);border:1px solid var(--hairline-soft);color:var(--text);
  transition:border-color .25s,background .25s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.05);outline:none}
.field textarea{resize:vertical;min-height:7rem}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C451' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1.1rem;padding-right:2.6rem}
.f2{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:var(--muted-2)}
.consent input{width:1.1rem;height:1.1rem;margin-top:.25rem;flex-shrink:0;accent-color:var(--gold)}
.consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

/* ---------- 20. Footer ---------- */
footer{border-top:1px solid var(--hairline-soft);padding-block:clamp(2.5rem,2rem + 3vw,4rem) 2rem;margin-top:2rem}
.f-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));margin-bottom:2.5rem}
.f-col h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:600}
.f-col li+li{margin-top:.55rem}
.f-col a,.f-col p{font-size:var(--step--1);color:var(--muted)}
.f-col a:hover{color:var(--gold)}
.f-about p{margin-top:1rem;max-width:22rem}
.f-bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-top:1.75rem;border-top:1px solid var(--hairline-soft);
}
.f-bottom p,.f-bottom a{font-size:.8rem;color:var(--muted-2)}
.f-bottom nav{display:flex;flex-wrap:wrap;gap:1.1rem}
.f-bottom a:hover{color:var(--gold)}

/* ---------- 21. Floating WhatsApp ---------- */
.fab{
  position:fixed;right:1rem;bottom:1rem;z-index:90;
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1.25rem;border-radius:var(--r-pill);
  background:var(--wa);color:#06290F;font-weight:700;font-size:.9rem;
  box-shadow:0 12px 34px -10px rgba(37,211,102,.55);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.fab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 44px -10px rgba(37,211,102,.6)}
.fab svg{width:1.4rem;height:1.4rem;flex-shrink:0}
.fab-txt{display:none}
.fab::before{
  content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--wa);
  animation:ping 2.6s var(--ease) infinite;
}
@keyframes ping{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.35)}}

/* ---------- 22. Breadcrumbs ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:.8rem;color:var(--muted-2);padding-top:calc(var(--nav-h) + 1.5rem)}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.45}

/* ---------- 23. Prose (legal / article) ---------- */
.prose h2{font-size:var(--step-2);margin:2.5rem 0 1rem}
.prose h3{font-size:var(--step-1);margin:1.9rem 0 .7rem}
.prose p,.prose li{color:var(--muted)}
.prose p+p{margin-top:1rem}
.prose ul{margin:1rem 0;display:grid;gap:.55rem}
.prose ul li{display:flex;gap:.65rem;align-items:flex-start}
.prose ul li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:.6rem}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{color:var(--text);font-weight:600}
.prose table{margin:1.5rem 0}

/* ---------- 24. Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}

/* ---------- 25. Responsive ---------- */
@media (min-width:600px){
  .fab-txt{display:block}
  .fab{right:1.5rem;bottom:1.5rem}
  .step{padding-left:4.6rem}
}
@media (min-width:860px){
  .hero-grid{grid-template-columns:1.15fr .85fr}
  .steps{grid-template-columns:1fr 1fr;gap:1.6rem 2.5rem}
  .step::after{display:none}
}
@media (min-width:1000px){
  .nav-links,.nav-cta{display:flex}
  .burger{display:none}
  #drawer{display:none}
  .f-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
}
/* El botón con el número completo solo cabe en pantallas anchas;
   por debajo queda el CTA de WhatsApp, que es el que convierte. */
.nav-tel{display:none}
@media (min-width:1280px){ .nav-tel{display:inline-flex} }

/* ---------- 26. Motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .rotator>span{opacity:1;transform:none;animation:none}
  .rotator>span:not(:first-child){display:none}
}
@media print{
  body::before,body::after,#nav,#drawer,.fab,#prog,.slider-nav,.marquee{display:none!important}
  body{background:#fff;color:#000}
  .card,.panel{border-color:#ccc;box-shadow:none;background:#fff}
}