/* ============================================================
   transforma.dev — site stylesheet
   ------------------------------------------------------------
   Conventions
   - BEM naming: block__element--modifier
   - State classes: .is-* (toggled by JS)
   - JS-only hooks: .js-* (never styled)
   - Pages: index.html (home) + privacidad.html (body.page-legal)

   Table of contents
   01. Design tokens
   02. Base & reset
   03. Utilities (.u-nowrap, .reveal)
   04. Brand mark
   05. Buttons
   06. Top bar (+ language switch, burger)
   07. Menu overlay (mobile)
   08. Hero
   09. Marquee
   10. Manifesto
   11. Stats (shared) + Proof section
   12. Services accordion
   13. Contact (+ form)
   14. Site footer
   15. Ambient effects (glow, progress, custom cursor, canvas)
   16. Legal page (privacidad.html)
   17. Responsive
   18. Print
   ============================================================ */


/* ---------- 01. Design tokens ---------- */
:root{
  --base:#0E0F10; --surface:#161718; --surface-2:#131415;
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.12);
  --text-clear:#E7E8E9; --text-mid:#9A9D9F; --text-faint:#646769;
  --pos:#6FB39A; --neg:#C98B84;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --glow:0.7;
}


/* ---------- 02. Base & reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--base);
  color:var(--text-clear);
  font-family:'Manrope',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:rgba(111,179,154,0.3); }


/* ---------- 03. Utilities ---------- */
.u-nowrap{ white-space:nowrap; }

/* Scroll-in reveal. Content is visible by default; it is only
   hidden for animation once JS confirms it can animate
   (body.anim-ready), so no-JS / print always show content. */
.reveal{
  transition:opacity 0.8s ease,
             transform 0.8s cubic-bezier(0.16,1,0.3,1),
             filter 0.8s ease;
}
body.anim-ready .reveal:not(.is-in-view){
  opacity:0; transform:translateY(36px); filter:blur(10px);
}
.reveal--delay-1{ transition-delay:0.08s; }
.reveal--delay-2{ transition-delay:0.16s; }
.reveal--delay-3{ transition-delay:0.24s; }


/* ---------- 04. Brand mark ---------- */
/* The logo is the official SVG (vectorized JetBrains Mono Medium).
   Its height tracks the parent font-size: 74/100 units of the
   original glyph box. */
.brand-mark{
  font-family:var(--mono); font-size:18px; font-weight:500;
  color:var(--text-clear); text-decoration:none; letter-spacing:0;
  border-bottom:none;
}
.brand-mark img{ height:0.74em; width:auto; display:block; }


/* ---------- 05. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:15px;
  border-radius:999px; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
  border:none;
}
.btn--primary{ background:var(--pos); color:#0B1410; padding:13px 28px; }
.btn--primary:hover{ background:#85C4AC; }
.btn--ghost{
  background:transparent; color:var(--text-clear);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  padding:13px 28px;
}
.btn--ghost:hover{ background:rgba(111,179,154,0.1); box-shadow:inset 0 0 0 1px rgba(111,179,154,0.4); }
.btn--small{ padding:10px 22px; font-size:14px; }
.btn--large{ padding:18px 38px; font-size:17px; }
.btn--magnetic{
  background:var(--pos); color:#0B1410;
  padding:18px 38px; font-size:17px; font-weight:600;
  will-change:transform;
}
.btn--magnetic:hover{ background:#85C4AC; }


/* ---------- 06. Top bar ---------- */
.top-bar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px; height:64px;
  background:rgba(14,15,16,0.6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top-bar__right{ display:flex; align-items:center; gap:32px; }
.top-bar__nav{ display:flex; align-items:center; gap:28px; }
.top-bar__nav a{
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  color:var(--text-mid); transition:color 0.15s;
}
.top-bar__nav a i{ font-style:normal; color:var(--text-faint); padding-right:6px; transition:color 0.15s; }
.top-bar__nav a:hover{ color:var(--text-clear); }
.top-bar__nav a:hover i{ color:var(--pos); }
.top-bar__nav a.is-active{ color:var(--text-clear); }
.top-bar__nav a.is-active i{ color:var(--pos); }

/* back link (legal page) */
.top-bar__back-link{
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-mid); text-decoration:none;
  border-bottom:none; transition:color 0.15s;
}
.top-bar__back-link:hover{ color:var(--pos); }

/* language switch */
.lang-switch{
  display:flex; align-items:center; gap:2px;
  border:1px solid var(--line-strong); border-radius:999px; padding:3px;
}
.lang-switch__option{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.04em;
  background:none; border:none; color:var(--text-faint);
  padding:5px 11px; border-radius:999px; cursor:pointer;
  transition:background 0.15s, color 0.15s;
}
.lang-switch__option.is-active{ background:rgba(255,255,255,0.07); color:var(--text-clear); }

/* burger (mobile) */
.burger{
  display:none;
  background:transparent; border:none; cursor:pointer;
  width:44px; height:44px; border-radius:12px;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.burger span{
  display:block; width:18px; height:1.5px; background:var(--text-clear);
  transition:transform 0.25s ease, opacity 0.2s ease;
}
body.menu-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }


/* ---------- 07. Menu overlay (mobile) ---------- */
.menu-overlay{
  position:fixed; inset:0; z-index:55;
  background:rgba(14,15,16,0.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 24px;
  opacity:0; pointer-events:none;
  transition:opacity 0.25s ease;
}
body.menu-open .menu-overlay{ opacity:1; pointer-events:auto; }
.menu-overlay__link{
  display:flex; align-items:baseline; gap:18px;
  text-decoration:none;
  font-size:clamp(34px, 9vw, 56px); font-weight:500; letter-spacing:-0.02em;
  color:var(--text-clear);
  padding:22px 8px;
  border-top:1px solid var(--line);
  transition:color 0.15s;
}
.menu-overlay__link:last-of-type{ border-bottom:1px solid var(--line); }
.menu-overlay__link i{ font-style:normal; font-family:var(--mono); font-size:13px; color:var(--pos); }
.menu-overlay__link:hover{ color:var(--pos); }


/* ---------- 08. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px 40px 0;
  z-index:2;
}
/* static dot grid; replaced at runtime by the interactive canvas */
.hero__dot-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 70% 30%, rgba(0,0,0,0.55), transparent 75%);
          mask-image:radial-gradient(ellipse 70% 55% at 70% 30%, rgba(0,0,0,0.55), transparent 75%);
}
.hero__canvas{ position:absolute; inset:0; pointer-events:none; }
.hero__eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-faint);
  display:flex; align-items:center; gap:12px;
  margin-bottom:5vh;
}
.hero__eyebrow::before{
  content:""; width:40px; height:1px; background:var(--pos); display:inline-block;
}
.hero h1{
  font-weight:500;
  font-size:clamp(48px, 9vw, 142px);
  line-height:0.98;
  letter-spacing:-0.03em;
  text-wrap:balance;
}
.hero__headline-line{ display:block; overflow:hidden; padding-bottom:0.14em; margin-bottom:-0.14em; }
.hero__headline-line > span{ display:block; }
/* hidden states ONLY once JS confirmed it can animate */
body.anim-ready .hero__headline-line > span{
  transform:translateY(130%);
  transition:transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
body.anim-ready.loaded .hero__headline-line > span{ transform:translateY(0); }
body.anim-ready .hero__headline-line:nth-child(2) > span{ transition-delay:0.08s; }
body.anim-ready .hero__headline-line:nth-child(3) > span{ transition-delay:0.16s; }
.hero__headline-ghost{
  color:transparent;
  -webkit-text-stroke:1px rgba(231,232,233,0.34);
}
.hero__headline-accent{ color:var(--pos); }
.hero__bottom{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-top:6vh; padding-bottom:48px;
}
.hero__subtitle{
  max-width:420px; color:var(--text-mid); font-size:17px; text-wrap:pretty;
}
.hero__subtitle strong{ color:var(--text-clear); font-weight:600; }
.hero__cta{ flex-shrink:0; }


/* ---------- 09. Process strip ---------- */
.process{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--base); position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4, 1fr);
}
.process__step{
  display:flex; align-items:baseline; gap:14px;
  padding:22px 40px;
  border-left:1px solid var(--line);
}
.process__step:first-child{ border-left:none; }
.process__num{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.08em; color:var(--pos);
}
.process__label{
  font-family:var(--mono); font-size:14px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-mid);
}
@media (max-width:900px){
  .process{ grid-template-columns:repeat(2, 1fr); }
  .process__step{ padding:16px 20px; gap:10px; }
  .process__num{ font-size:11px; }
  .process__label{ font-size:12px; letter-spacing:0.05em; }
  .process__step:nth-child(3){ border-left:none; }
  .process__step:nth-child(3), .process__step:nth-child(4){ border-top:1px solid var(--line); }
}


/* ---------- 10. Manifesto ---------- */
.manifesto{
  position:relative; z-index:2;
  padding:22vh 40px;
  max-width:1180px; margin:0 auto;
}
.manifesto p{
  font-size:clamp(28px, 4vw, 54px);
  font-weight:500; letter-spacing:-0.02em; line-height:1.25;
  text-wrap:pretty;
}
/* words light up as you scroll (built by JS) */
.manifesto__word{ color:var(--text-clear); transition:color 0.35s ease; }
.manifesto__word--key{ color:var(--pos); }
body.anim-ready .manifesto__word:not(.is-lit){ color:var(--text-faint); }


/* ---------- 11. Stats (shared by Proof + How we work) ---------- */
.stats{
  position:relative; z-index:2;
  padding:20vh 40px;
  max-width:1400px; margin:0 auto;
}
.stats__heading{
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-faint);
  margin-bottom:64px;
}
.stats__heading i{ font-style:normal; color:var(--pos); }
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{
  border-left:1px solid var(--line);
  padding:8px 36px;
  min-width:0;
}
.stat:first-child{ border-left:none; padding-left:0; }
.stat__value{
  font-weight:500; font-size:clamp(30px, 3.2vw, 54px);
  letter-spacing:-0.03em; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--text-clear);
  margin-bottom:18px;
  white-space:nowrap;
}
.stat__unit{ font-size:0.45em; color:var(--pos); font-family:var(--mono); font-weight:500; letter-spacing:0; }
.stat__plus{ color:var(--pos); font-weight:500; }
.stat h3{ font-size:17px; font-weight:600; margin-bottom:8px; }
.stat p{ font-size:14px; color:var(--text-mid); text-wrap:pretty; }

/* proof (track record) variant: tinted band, 5 columns, tighter cells */
.proof{
  position:relative; z-index:2;
  background:var(--surface-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:11vh 40px;
  margin:0;
}
.proof__inner{ max-width:1400px; margin:0 auto; }
.proof .stats__heading{ margin-bottom:48px; }
.proof .stats__grid{ grid-template-columns:repeat(5,1fr); }
.proof .stat{ padding:8px 24px; }
.proof .stat:first-child{ padding-left:0; }
.proof .stat__value{ font-size:clamp(26px, 2.55vw, 44px); }


/* ---------- 12. Services accordion ---------- */
.services{ position:relative; z-index:2; }
.services__header{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:12vh 40px 32px;
  max-width:1400px; margin:0 auto;
}
.services__eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-faint); white-space:nowrap;
}
.services__eyebrow i{ font-style:normal; color:var(--pos); }
.service{
  border-top:1px solid var(--line);
  cursor:pointer;
  position:relative;
  transition:background 0.3s ease;
}
.service:last-of-type{ border-bottom:1px solid var(--line); }
.service__inner{ max-width:1400px; margin:0 auto; padding:0 40px; }
.service__row{
  display:grid;
  grid-template-columns:110px 1fr auto;
  align-items:center; gap:32px;
  padding:38px 0;
}
.service__number{
  font-family:var(--mono); font-size:15px; color:var(--text-faint);
  transition:color 0.3s;
}
.service__title{
  font-size:clamp(27px, 3.7vw, 46px);
  font-weight:500; letter-spacing:-0.025em; line-height:1.05;
  transition:color 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1);
  text-wrap:balance;
}
.service__toggle{
  font-family:var(--mono); font-size:22px; color:var(--text-faint);
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), color 0.3s, box-shadow 0.3s;
  flex-shrink:0;
}
.service:hover .service__title{ transform:translateX(12px); }
.service:hover .service__number, .service:hover .service__toggle{ color:var(--pos); }
.service.is-open{ background:rgba(111,179,154,0.04); }
.service.is-open .service__number{ color:var(--pos); }
.service.is-open .service__toggle{
  transform:rotate(45deg); color:var(--pos);
  box-shadow:inset 0 0 0 1px rgba(111,179,154,0.4);
}
.service__body{
  max-height:0; overflow:hidden;
  transition:max-height 0.6s cubic-bezier(0.16,1,0.3,1);
}
.service__body-grid{
  display:grid; grid-template-columns:110px 1.2fr 1fr; gap:32px;
  padding:8px 0 52px;
}
.service__promise{
  font-size:19px; color:var(--text-mid); max-width:520px; text-wrap:pretty;
}
.service__promise strong{ color:var(--text-clear); font-weight:600; }
.service__cta{ margin-top:28px; }
.service__cta .btn--ghost{ padding:13px 28px; }
.service__points{ list-style:none; align-self:center; }
.service__points li{
  display:flex; gap:14px; align-items:baseline;
  padding:12px 0; border-top:1px solid var(--line);
  font-size:15px; color:var(--text-mid);
}
.service__points li:first-child{ border-top:none; }
.service__points li::before{
  content:"→"; font-family:var(--mono); font-size:12px; color:var(--pos);
}
.service__points li b{ color:var(--text-clear); font-weight:600; }

/* hover spotlight that follows the cursor (position set by JS) */
body.anim-ready .service::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 200px at var(--mx,50%) var(--my,50%), rgba(111,179,154,0.06), transparent 70%);
  opacity:0; transition:opacity 0.3s ease;
}
body.anim-ready .service:hover::after{ opacity:1; }


/* ---------- 13. Contact ---------- */
.contact{
  position:relative; z-index:2;
  border-top:1px solid var(--line-strong);
  padding:18vh 40px 12vh;
  overflow:hidden;
}
.contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 110%, rgba(111,179,154,0.12), transparent 70%);
}
.contact__inner{ position:relative; max-width:1400px; margin:0 auto; }
.contact h2{
  font-weight:500;
  font-size:clamp(64px, 12vw, 190px);
  letter-spacing:-0.03em; line-height:0.95;
  margin-bottom:10vh;
  cursor:default;
}
.contact__qmark{ color:var(--pos); }
/* per-character spans built by JS for the variable-weight effect */
.contact__char{ display:inline-block; font-variation-settings:'wght' 500; }
.contact__grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:96px; }
.contact__grid > *{ min-width:0; }
.contact__lede{ color:var(--text-mid); font-size:18px; max-width:380px; text-wrap:pretty; }
.contact__meta{ margin-top:56px; }
.contact__meta > div{
  padding:16px 0; border-top:1px solid var(--line);
  display:flex; gap:24px; align-items:baseline;
}
.contact__meta-key{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--text-faint); width:92px; flex-shrink:0;
}
.contact__meta-value{ font-size:14px; color:var(--text-mid); }
a.contact__meta-value{ color:var(--text-clear); text-decoration:none; transition:color 0.15s; }
a.contact__meta-value:hover{ color:var(--pos); }

/* contact form */
form{ display:flex; flex-direction:column; }
.form-hp{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.form-row .form-field, form .form-field{ min-width:0; }
.form-field{
  display:flex; flex-direction:column; gap:10px;
  padding:26px 0 18px;
  border-bottom:1px solid var(--line);
}
.form-field label{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--text-faint);
  transition:color 0.15s;
}
.form-field input, .form-field select, .form-field textarea{
  background:transparent; border:none; outline:none;
  font-family:'Manrope',sans-serif; font-size:22px; font-weight:500;
  color:var(--text-clear); padding:2px 0; letter-spacing:-0.01em;
}
.form-field select{ appearance:none; cursor:pointer; width:100%; max-width:100%; font-size:18px; }
.form-field select option{ background:var(--surface); color:var(--text-clear); font-size:16px; }
.form-field textarea{ resize:vertical; min-height:64px; font-size:19px; }
.form-field input::placeholder, .form-field textarea::placeholder{ color:var(--text-faint); font-weight:400; }
.form-field:focus-within label{ color:var(--pos); }
.form-actions{
  padding-top:36px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.form-note{ font-family:var(--mono); font-size:12px; color:var(--text-faint); }
.form-error{ display:none; font-family:var(--mono); font-size:12px; color:var(--neg); }
form.is-error .form-error{ display:block; }
form.is-error .form-note{ display:none; }
.form-success{ display:none; font-size:15px; color:var(--pos); }
form.is-sent .form-success{ display:block; }
form.is-sent .form-note{ display:none; }


/* ---------- 14. Site footer ---------- */
.site-footer{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  padding:28px 40px 36px;
  display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap;
}
.site-footer--offset{ margin-top:40px; }
.site-footer__copyright{ font-family:var(--mono); font-size:12px; color:var(--text-faint); }
.site-footer a{
  color:var(--text-mid); text-decoration:none; border-bottom:none;
  font-family:var(--mono); font-size:12px; transition:color 0.15s;
}
.site-footer a:hover{ color:var(--pos); }


/* ---------- 15. Ambient effects ---------- */
/* cursor-following glow */
#glow{
  position:fixed; top:0; left:0; width:900px; height:900px;
  margin:-450px 0 0 -450px;
  pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(111,179,154,0.07), transparent 60%);
  opacity:var(--glow);
}
/* reading progress bar */
#progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:70;
  background:var(--pos); transform-origin:0 50%; transform:scaleX(0);
  pointer-events:none;
}
/* custom cursor (fine pointers only; enabled by JS) */
body.has-cursor, body.has-cursor a, body.has-cursor button,
body.has-cursor .service, body.has-cursor select{ cursor:none; }
#cursor-dot, #cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:80;
  border-radius:50%; display:none;
}
body.has-cursor #cursor-dot, body.has-cursor #cursor-ring{ display:block; }
#cursor-dot{ width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--pos); }
#cursor-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(111,179,154,0.5);
  transition:width 0.2s ease, height 0.2s ease, margin 0.2s ease, border-color 0.2s ease;
}
body.cursor-hot #cursor-ring{
  width:56px; height:56px; margin:-28px 0 0 -28px;
  border-color:rgba(111,179,154,0.9);
}


/* ---------- 16. Legal page (privacidad.html) ---------- */
body.page-legal{ font-size:16px; line-height:1.65; }
.legal{ max-width:860px; margin:0 auto; padding:150px 32px 100px; }
.legal__header{ padding-bottom:36px; border-bottom:1px solid var(--line-strong); margin-bottom:14px; }
.legal__eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-mid); display:flex; align-items:center; gap:12px; margin-bottom:24px;
}
.legal__eyebrow::before{ content:''; width:40px; height:1px; background:var(--pos); }
.legal h1{ font-weight:500; font-size:clamp(36px,5vw,52px); letter-spacing:-0.02em; line-height:1.08; text-wrap:balance; }
.legal__meta{
  margin-top:18px; font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em;
  color:var(--text-faint);
}
.legal__meta b{ color:var(--text-mid); font-weight:500; }

.legal section{ padding:34px 0; border-bottom:1px solid var(--line); }
.legal section:last-of-type{ border-bottom:none; }
.legal section h2{
  display:flex; align-items:baseline; gap:16px;
  font-weight:500; font-size:21px; letter-spacing:-0.01em; margin-bottom:14px;
}
.legal__num{ font-family:var(--mono); font-size:14px; font-weight:500; color:var(--pos); font-variant-numeric:tabular-nums; }
.legal section h3{ font-size:16.5px; font-weight:600; margin:18px 0 8px; color:var(--text-clear); }
.legal section p{ color:var(--text-mid); margin-bottom:12px; text-align:justify; hyphens:auto; }
.legal section p:last-child{ margin-bottom:0; }
.legal section p b, .legal section p strong{ color:var(--text-clear); font-weight:600; }
.legal section ul{ list-style:none; margin:10px 0 12px; }
.legal section ul li{
  color:var(--text-mid); padding:9px 0 9px 26px; position:relative;
  border-bottom:1px solid var(--line);
}
.legal section ul li:last-child{ border-bottom:none; }
.legal section ul li::before{
  content:'→'; font-family:var(--mono); font-size:12px; color:var(--pos);
  position:absolute; left:0; top:11px;
}
/* in-text links are underlined; chrome links are not */
body.page-legal a{ color:var(--pos); text-decoration:none; transition:border-color 0.15s; }
.legal section a{ border-bottom:1px solid rgba(111,179,154,0.3); }
.legal section a:hover{ border-color:var(--pos); }

/* data-controller card */
.controller-card{
  margin:16px 0 4px; padding:20px 24px; border-radius:12px;
  background:rgba(111,179,154,0.05); box-shadow:inset 0 0 0 1px rgba(111,179,154,0.18);
}
.controller-card__row{
  display:grid; grid-template-columns:130px 1fr; gap:16px; padding:8px 0;
  border-bottom:1px solid var(--line); align-items:baseline;
}
.controller-card__row:last-child{ border-bottom:none; }
.controller-card__key{
  font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-faint);
}
.controller-card__value{ font-size:15px; color:var(--text-clear); font-weight:500; }
.controller-card__value--muted{ color:var(--text-mid); font-weight:400; }


/* ---------- 16b. Thank-you page (gracias.html) ---------- */
body.page-thankyou{
  min-height:100svh; display:flex; flex-direction:column;
  position:relative; overflow-x:hidden;
}
/* cover-style backdrop: sage halo + faint lift, like deck covers */
body.page-thankyou::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 900px 560px at 78% -10%, rgba(111,179,154,0.10), transparent 62%),
    radial-gradient(ellipse 1000px 600px at 12% 115%, rgba(255,255,255,0.045), transparent 60%);
}
/* vertical column guides */
body.page-thankyou::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(to right,
    transparent, transparent calc(100%/6 - 1px),
    rgba(255,255,255,0.035) calc(100%/6 - 1px), rgba(255,255,255,0.035) calc(100%/6));
}
.thankyou{
  position:relative; z-index:1;
  flex:1; display:flex; flex-direction:column; justify-content:center;
  max-width:860px; width:100%; margin:0 auto;
  padding:140px 32px 80px;
}
.thankyou__eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-mid); display:flex; align-items:center; gap:12px; margin-bottom:28px;
}
.thankyou__eyebrow::before{ content:""; width:40px; height:1px; background:var(--pos); }
.thankyou h1{
  font-weight:500; font-size:clamp(44px, 7vw, 84px);
  letter-spacing:-0.025em; line-height:1.02; text-wrap:balance;
  margin-bottom:28px;
}
.thankyou h1 .thankyou__period{ color:var(--pos); }
.thankyou__lede{
  color:var(--text-mid); font-size:19px; max-width:480px; text-wrap:pretty;
  margin-bottom:64px;
}
.thankyou__lede strong{ color:var(--text-clear); font-weight:600; }
/* what happens next: numbered rows separated by hairlines */
.thankyou__steps{ list-style:none; margin-bottom:64px; }
.thankyou__steps li{
  display:flex; align-items:baseline; gap:24px;
  padding:18px 0; border-top:1px solid var(--line);
  font-size:16px; color:var(--text-mid);
}
.thankyou__steps li:last-child{ border-bottom:1px solid var(--line); }
.thankyou__steps li i{
  font-style:normal; font-family:var(--mono); font-size:13px; color:var(--pos);
  font-variant-numeric:tabular-nums; flex-shrink:0;
}
.thankyou__steps li b{ color:var(--text-clear); font-weight:600; }
.thankyou__actions{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.thankyou__email{
  font-family:var(--mono); font-size:14px; color:var(--text-mid);
  text-decoration:none; transition:color 0.15s;
}
.thankyou__email:hover{ color:var(--pos); }
@media (max-width: 700px){
  .thankyou{ padding:120px 20px 60px; }
  .thankyou__lede{ margin-bottom:48px; }
  .thankyou__steps{ margin-bottom:48px; }
}


/* ---------- 17. Responsive ---------- */
@media (max-width: 1180px){
  .top-bar__nav{ display:none; }
  .burger{ display:flex; }
}
@media (max-width: 900px){
  .top-bar{ padding:0 20px; }
  .hero{ padding:110px 20px 0; }
  .hero__bottom{ flex-direction:column; align-items:flex-start; gap:32px; }
  .manifesto{ padding:9vh 20px; }
  .services__header{ padding:7vh 20px 20px; }
  .service__inner{ padding-left:20px; padding-right:20px; }
  .service__row{ grid-template-columns:48px 1fr auto; gap:18px; padding:28px 0; }
  .service__body-grid{ grid-template-columns:1fr; gap:28px; padding-bottom:40px; }
  .service__body-grid .service__spacer{ display:none; }
  .stats{ padding:8vh 20px; }
  .proof{ padding:8vh 20px; }
  .stats__grid{ grid-template-columns:1fr; gap:0; }
  .proof .stats__grid{ grid-template-columns:1fr; gap:0; }
  .stat{
    display:block; padding:22px 0;
    border-left:none; border-top:1px solid var(--line);
  }
  .stat:first-child{ border-top:none; padding-top:0; }
  .stat__value{ margin-bottom:8px; }
  .stat h3{ margin-bottom:4px; }
  .proof .stat{ padding:22px 0; }
  .proof .stat:first-child{ padding-top:0; padding-left:0; }
  .contact{ padding:9vh 20px 7vh; }
  .contact__grid{ grid-template-columns:1fr; gap:56px; }
  .form-row{ grid-template-columns:1fr; }
  .site-footer{ padding:24px 20px 32px; }
  #contact-form input, #contact-form textarea{ min-height:44px; }
  .lang-switch__option{ padding:8px 12px; }
}
@media (max-width: 700px){
  .legal{ padding:130px 20px 70px; }
  .controller-card__row{ grid-template-columns:1fr; gap:2px; }
}
@media (max-width: 640px){
  .top-bar .btn--primary{ display:none; }
  .top-bar__right{ gap:12px; }
  .top-bar .brand-mark{ font-size:19px; }
}
@media (hover: none){
  #cursor-dot, #cursor-ring{ display:none !important; }
  body.has-cursor{ cursor:auto; }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
  #glow, #progress, #cursor-dot, #cursor-ring, .hero__canvas{ display:none !important; }
  html{ scroll-behavior:auto; }
}


/* ---------- 18. Print (legal page) ---------- */
@media print{
  body.page-legal{ background:#fff; color:#1a1a1a; }
  body.page-legal .top-bar, body.page-legal .site-footer{ display:none; }
  .legal{ padding:40px 0; }
  .legal section p, .legal section ul li{ color:#333; }
}