/* =============================================================
   ALINIACIÓN · Diagnóstico
   ============================================================= */
:root{
  --ink:#16201A; --ink-soft:#2A352E; --muted:#5E6B62; --faint:#8C988F;
  --line:#E4E8E1; --line-soft:#EDF1EA;
  --paper:#FFFFFF; --bg:#FBFCFA; --soft:#F3F6F0; --softer:#EBF0E6;
  --green:#1F7A4D; --green-deep:#103A27; --green-deeper:#0C2C1E;
  --glow:#34C56E; --glow-soft:#7FE0A3; --cream:#F4F8F1; --cream-dim:#BFD2C4;
  /* bandas de autopercepción (radiografía) */
  --rg:#2E7D52; --rg-soft:#E6F2EB; --ra:#B7791F; --ra-soft:#FBF2DF; --rc:#C2410C; --rc-soft:#FBEAE1;
  --wrap:1140px; --gutter:clamp(1.25rem,4vw,2.5rem);
  --r-sm:12px; --r:18px; --r-lg:26px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --display:"Space Grotesk","Inter",system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.25,.46,.45,.94);
  --shadow-sm:0 2px 10px rgba(16,32,26,.05); --shadow:0 18px 50px -24px rgba(16,32,26,.22); --shadow-lg:0 40px 90px -40px rgba(16,32,26,.32);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{ font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ol,ul{ list-style:none; padding:0; }
p{ text-wrap:pretty; }
h1,h2,h3{ font-family:var(--display); font-weight:600; text-wrap:balance; line-height:1.05; letter-spacing:-.02em; }
::selection{ background:var(--glow); color:var(--green-deeper); }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px; }
.skip-link{ position:fixed; top:-100px; left:1rem; padding:.6rem 1rem; background:var(--green); color:var(--cream); z-index:9999; border-radius:10px; font-weight:600; transition:top .2s; }
.skip-link:focus{ top:1rem; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:clamp(4rem,10vw,8rem); }
.section--top{ padding-top:calc(clamp(4rem,10vw,8rem) + 2rem); }
.section--soft{ background:var(--soft); }
.section--cta{ background:radial-gradient(120% 120% at 50% 0%, #16513a 0%, var(--green-deep) 45%, var(--green-deeper) 100%); color:var(--cream); overflow:hidden; }
.statement{ background:var(--green-deep); color:var(--cream); text-align:center; }
.statement-line{ font-family:var(--display); font-weight:600; font-size:clamp(1.8rem,4.6vw,3.2rem); line-height:1.16; letter-spacing:-.025em; max-width:20ch; margin:0 auto; }
.statement .g{ color:var(--glow); }
.statement-sub{ margin-top:1.2rem; color:var(--cream-dim); font-size:1.1rem; max-width:48ch; margin-inline:auto; }

/* ---------- typography helpers ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--sans); font-weight:600; font-size:.88rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.eyebrow--light{ color:var(--glow-soft); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--glow); box-shadow:0 0 0 0 rgba(52,197,110,.55); animation:pulse 2.6s var(--ease-out) infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(52,197,110,.5);} 70%{box-shadow:0 0 0 9px rgba(52,197,110,0);} 100%{box-shadow:0 0 0 0 rgba(52,197,110,0);} }
.g{ color:var(--green); }
.section--cta .g{ color:var(--glow); }
.head{ max-width:none; margin-bottom:clamp(2.2rem,5vw,3.4rem); }
.head--center{ text-align:center; }
.head--center .eyebrow{ justify-content:center; }
.head-title{ font-size:clamp(2rem,4.6vw,3.3rem); margin-top:1rem; max-width:24ch; }
.head--center .head-title{ margin-inline:auto; }
.head-lead{ font-family:var(--display); font-weight:500; font-size:clamp(1.2rem,2.5vw,1.7rem); line-height:1.3; margin-top:1rem; color:var(--muted); max-width:44ch; }
.head--center .head-lead{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55em; background:var(--green); color:var(--cream); font-weight:600; letter-spacing:-.01em; padding:.92em 1.5em; border-radius:100px; box-shadow:0 10px 30px -12px rgba(16,90,55,.6); transition:transform .4s var(--ease-out), background .35s, box-shadow .4s; will-change:transform; }
.btn .arrow{ transition:transform .4s var(--ease-out); }
.btn:hover{ background:var(--green-deep); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-sm{ padding:.6em 1.1em; font-size:.92rem; }
.btn-lg{ font-size:1.05rem; padding:1.02em 1.7em; }
.section--cta .btn{ background:var(--glow); color:var(--green-deeper); }
.section--cta .btn:hover{ background:#fff; }
.btn-text{ display:inline-flex; align-items:center; gap:.4em; font-weight:600; color:var(--muted); padding:.6em .2em; position:relative; }
.btn-text::after{ content:""; position:absolute; left:.2em; right:.2em; bottom:.35em; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.btn-text:hover{ color:var(--ink); } .btn-text:hover::after{ transform:scaleX(1); }

/* ---------- nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; padding-block:.85rem; background:rgba(251,252,250,.8); backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px); box-shadow:0 1px 0 var(--line); transition:padding .4s, box-shadow .4s; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.nav[data-state="scrolled"]{ box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(16,32,26,.4); padding-block:.6rem; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:600; font-size:1.1rem; letter-spacing:-.02em; color:var(--ink); }
.brand-sub{ color:var(--faint); font-weight:500; }
.brand-mark{ width:22px; height:22px; border-radius:7px; background:var(--green-deep); position:relative; flex:0 0 auto; }
.brand-mark::before{ content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px; border-radius:50%; border:2px solid var(--glow); }
.brand-mark::after{ content:""; position:absolute; inset:0; margin:auto; width:3px; height:3px; border-radius:50%; background:var(--glow); }
.footer .brand-mark{ background:rgba(255,255,255,.07); }

/* ---------- hero ---------- */
.hero{ text-align:center; overflow:hidden; }
.hero-inner{ position:relative; z-index:2; max-width:760px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.hero-inner .eyebrow{ justify-content:center; }
.hero-halo{ position:absolute; left:50%; top:-10%; transform:translateX(-50%); width:min(820px,95%); aspect-ratio:1.4; background:radial-gradient(closest-side, rgba(52,197,110,.18), transparent 70%); filter:blur(20px); pointer-events:none; }
.hero-title{ font-size:clamp(2.6rem,7vw,5rem); line-height:.99; letter-spacing:-.035em; margin:1rem 0 0; }
.hero-title .hero-line{ display:block; }
.hero-sub{ max-width:50ch; margin-top:1.5rem; font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--muted); }
.hero-sub b{ color:var(--ink); font-weight:600; }
.hero-cta{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; justify-content:center; margin-top:2.2rem; }

/* hero load reveal */
.hero-line{ opacity:1; }
.is-ready .hero-line{ opacity:0; transform:translateY(24px); }
.is-ready.is-loaded .hero-line{ opacity:1; transform:none; transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay:var(--d,0s); }

/* ---------- deck (stack of radiographies) ---------- */
.deck-sec .head{ margin-bottom:1.5rem; }
.deck{ position:relative; height:clamp(340px,46vw,460px); }
.deck-fallback{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--muted); padding:2rem; }
.diag-card{
  position:absolute; left:50%; top:50%; width:clamp(140px,17vw,172px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px 12px;
  box-shadow:var(--shadow); transform:translate(-50%,-50%) rotate(var(--r0,0deg));
  transition:transform .85s var(--ease-out), box-shadow .4s; will-change:transform;
}
.diag-card:nth-child(odd){ --r0:-5deg; } .diag-card:nth-child(even){ --r0:4deg; } .diag-card:nth-child(3n){ --r0:7deg; } .diag-card:nth-child(4n){ --r0:-8deg; }
.deck.is-spread .diag-card{ transform:translate(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px))) rotate(var(--r,0deg)); transition-delay:calc(var(--i,0)*.05s); }
.diag-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--softer); z-index:200 !important; }
.dc-top{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-bottom:8px; }
.dc-type{ font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:-.01em; color:var(--ink); line-height:1.15; }
.dc-avg{ font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--green); background:var(--softer); border-radius:7px; padding:1px 7px; flex:0 0 auto; }
.dc-radar{ width:78%; margin:0 auto; }
.dc-tag{ display:block; margin-top:6px; text-align:center; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.deck-note{ text-align:center; margin-top:1rem; color:var(--faint); font-size:.95rem; }
.deck-cta{ text-align:center; margin-top:1.8rem; }
.deck-intro{ text-align:center; margin-top:clamp(2.2rem,5vw,3.4rem); color:var(--faint); font-size:.96rem; }

/* ---------- qué es ---------- */
.que-es-grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); grid-template-columns:1fr; }
.qe-col .head-title{ max-width:18ch; }
.qe-col p{ color:var(--muted); margin-top:1.1rem; max-width:46ch; }
.qe-list{ display:flex; flex-direction:column; gap:.7rem; }
.qe-list li{ display:flex; gap:.7rem; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:.85rem 1rem; font-size:1rem; color:var(--ink-soft); }
.qe-list li span{ flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center; font-size:.85rem; font-weight:700; }
.qe-yes span{ background:var(--rg-soft); color:var(--rg); }
.qe-no span{ background:var(--rc-soft); color:var(--rc); }

/* ---------- radiografía preview ---------- */
.radio-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow); max-width:760px; margin-inline:auto; }
.radio-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:1rem; margin-bottom:1rem; }
.radio-kicker{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green); font-weight:700; }
.radio-avg{ display:inline-flex; align-items:center; gap:.5rem; }
.radio-avg b{ font-family:var(--display); font-weight:600; font-size:2.2rem; color:var(--green-deep); line-height:1; }
.radio-avg i{ font-style:normal; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); line-height:1.2; }
.radio-body{ display:grid; gap:1rem; grid-template-columns:1fr; align-items:center; }
.radio-chart svg{ width:100%; max-width:340px; height:auto; margin-inline:auto; }
.radio-areas{ display:flex; flex-direction:column; gap:.6rem; }
.ra{ display:grid; grid-template-columns:auto auto 1fr; gap:.6rem; align-items:center; }
.ra-name{ font-weight:600; font-size:.95rem; color:var(--ink); }
.ra-sc{ font-family:var(--display); font-weight:600; font-size:1rem; padding:1px 9px; border-radius:8px; }
.ra-sc.g{ background:var(--rg-soft); color:var(--rg); } .ra-sc.a{ background:var(--ra-soft); color:var(--ra); } .ra-sc.c{ background:var(--rc-soft); color:var(--rc); }
.ra p{ font-size:.85rem; color:var(--muted); }
.radio-foot{ margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.92rem; color:var(--muted); }
.radio-foot b{ color:var(--ink); font-weight:600; }

/* ---------- proceso / steps ---------- */
.steps{ display:grid; gap:1rem; grid-template-columns:1fr; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:start; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,1.9rem); box-shadow:var(--shadow-sm); transition:transform .5s var(--ease-out), box-shadow .5s; }
.step:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.step-num{ font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2.2vw,1.8rem); color:var(--green); display:grid; place-items:center; width:3rem; height:3rem; flex:0 0 auto; border-radius:50%; background:var(--softer); }
.step-meta{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.step-body h3{ font-size:clamp(1.2rem,2vw,1.5rem); margin:.3rem 0 .5rem; }
.step-body p{ color:var(--muted); max-width:52ch; }

/* ---------- para quién ---------- */
.quien-inner{ max-width:60ch; }
.quien-inner .head-title{ max-width:20ch; margin:1rem 0 1.1rem; }
.quien-inner p{ color:var(--muted); font-size:1.08rem; }
.usos{ display:grid; gap:.7rem; margin-top:1.5rem; }
.usos li{ position:relative; padding-left:1.7rem; color:var(--ink-soft); font-size:1.06rem; }
.usos li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--green); }

/* ---------- CTA / calendly ---------- */
.cta{ text-align:center; }
.cta-inner{ position:relative; z-index:2; max-width:720px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.cta-inner .eyebrow{ justify-content:center; }
.cta-title{ font-size:clamp(2rem,5vw,3.4rem); margin:1rem 0; color:var(--cream); }
.cta-sub{ color:var(--cream-dim); font-size:1.1rem; margin-bottom:2rem; }
.cta-glow{ position:absolute; left:50%; top:6%; transform:translateX(-50%); width:min(720px,90%); aspect-ratio:1; background:radial-gradient(closest-side, rgba(52,197,110,.3), transparent 70%); filter:blur(20px); pointer-events:none; }
.cal-wrap{ width:100%; background:var(--paper); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.cal-placeholder{ display:flex; flex-direction:column; gap:.5rem; align-items:center; justify-content:center; text-align:center; padding:3.5rem 1.5rem; color:var(--muted); }
.cal-placeholder b{ font-family:var(--display); font-size:1.2rem; color:var(--ink); }
.cal-placeholder code{ background:var(--softer); padding:1px 6px; border-radius:5px; font-size:.85em; color:var(--green-deep); }

/* ---------- footer ---------- */
.footer{ background:var(--green-deeper); color:var(--cream-dim); padding-block:clamp(2.2rem,5vw,3rem); }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.footer .brand{ color:var(--cream); }
.footer-meta{ font-size:.85rem; color:var(--cream-dim); }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:1; transform:none; }
.is-ready [data-reveal]{ opacity:0; transform:translateY(28px); }
.is-ready [data-reveal].is-in{ opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }

/* ---------- responsive ---------- */
@media (min-width:760px){
  .steps{ grid-template-columns:repeat(3,1fr); }
  .que-es-grid{ grid-template-columns:1.05fr .95fr; align-items:center; }
  .radio-body{ grid-template-columns:1fr 1fr; gap:1.6rem; }
}
@media (max-width:760px){ .diag-card:nth-child(n+7){ display:none; } }
@media (max-width:520px){ .diag-card:nth-child(n+5){ display:none; } .deck{ height:clamp(300px,80vw,380px); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .dot{ animation:none; }
}