:root{
  --ink:#221D16;
  --ink-soft:#544C40;
  --paper:#DDE6D5;
  --paper-2:#CBD8C1;
  --card:#EDF2E7;
  --white:#F8F9F5;
  --accent:#D9A73B;
  --accent-deep:#B8862E;
  --good:#3D7A5E;
  --bad:#A8503E;
  --line:rgba(34,29,22,0.14);
  --shadow:0 20px 40px -20px rgba(34,29,22,0.35);
  --display:'Archivo', sans-serif;
  --sans:'Inter', sans-serif;
  --mono:'Red Hat Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img,svg{display:block; max-width:100%;} a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-0.015em; color:var(--ink);}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent-deep); display:flex; align-items:center; gap:9px; margin-bottom:16px; font-weight:500;}
.eyebrow::before{content:''; width:16px; height:2px; background:var(--accent); border-radius:2px;}
.lede{font-size:1.1rem; color:var(--ink-soft); line-height:1.65; max-width:52ch;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;}}

/* ---------- Header ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(221,230,213,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:1.1rem;}
.brand .mark{width:26px; height:26px; border-radius:7px; background:var(--accent); display:flex; align-items:center; justify-content:center;}
.brand .mark svg{width:14px; height:14px; color:var(--ink);}
.free-badge{font-family:var(--mono); font-size:10.5px; font-weight:700; background:var(--good); color:#fff; padding:3px 8px; border-radius:4px; margin-left:2px; text-transform:uppercase; letter-spacing:0.03em;}
.nav-btn{font-family:var(--mono); font-size:12px; font-weight:700; padding:10px 18px; border-radius:6px; text-decoration:none; white-space:nowrap; transition:all .2s ease; background:var(--accent); color:var(--ink);}
.nav-btn:hover{background:var(--accent-deep); color:#fff;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:14px; font-weight:700; padding:16px 28px; border-radius:9px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:all .22s ease;}
.btn-accent{background:var(--accent); color:var(--ink);}
.btn-accent:hover{background:var(--accent-deep); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow);}
.btn svg{width:16px; height:16px;}
.btn-sub{display:block; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-top:10px;}

/* ---------- Hero ---------- */
.hero{padding:72px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr; gap:44px;}}
.hero h1{font-size:clamp(2rem, 3.6vw, 2.7rem); line-height:1.16;}
.hero h1 span.hl{color:var(--accent-deep);}
.hero-actions{margin-top:28px;}
.hero-meta{margin-top:26px; display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);}
.hero-meta div{display:flex; align-items:center; gap:7px;}
.hero-meta svg{width:14px; height:14px; color:var(--good);}

/* Signature: preview del informe */
.report-card{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:0; box-shadow:var(--shadow); overflow:hidden;}
.report-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); background:var(--card);}
.report-head .rh-title{font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft);}
.level-pill{font-family:var(--mono); font-size:11px; font-weight:700; background:var(--accent); color:var(--ink); padding:5px 12px; border-radius:999px;}
.report-body{padding:20px;}
.report-row{display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line);}
.report-row:last-of-type{border-bottom:none;}
.report-row .rr-label{font-size:0.86rem; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
.report-row .rr-label svg{width:15px; height:15px; color:var(--accent-deep); flex-shrink:0;}
.report-row .rr-value{font-family:var(--mono); font-weight:700; font-size:0.88rem;}
.report-locked{margin-top:14px; border-radius:10px; background:var(--card); padding:16px; position:relative; overflow:hidden;}
.report-locked .rl-blur{filter:blur(4px); user-select:none; font-size:0.82rem; color:var(--ink-soft); line-height:1.6;}
.report-locked .rl-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:rgba(248,249,245,0.75);}
.report-locked .rl-overlay svg{width:20px; height:20px; color:var(--accent-deep);}
.report-locked .rl-overlay span{font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--ink); text-align:center; padding:0 20px;}

/* ---------- Sections ---------- */
section{padding:68px 0;} .section-head{max-width:600px; margin-bottom:40px;}
.section-head h2{font-size:clamp(1.5rem, 2.6vw, 2rem); line-height:1.2;}
.band{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.band-ink{background:var(--ink); color:var(--paper);}
.band-ink .eyebrow{color:var(--paper); opacity:0.75;} .band-ink .eyebrow::before{background:var(--accent);}
.band-ink h2{color:var(--paper);}
.band-ink .faq{border-top-color:rgba(221,230,213,0.15);}
.band-ink .faq-item{border-bottom-color:rgba(221,230,213,0.15);}
.band-ink .faq-q{color:var(--paper);}
.band-ink .faq-q .plus::before, .band-ink .faq-q .plus::after{background:var(--paper);}
.band-ink .faq-a p{color:rgba(221,230,213,0.7);}

/* ---------- Cómo funciona (3 pasos) ---------- */
.steps-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative;}
@media (max-width:760px){.steps-row{grid-template-columns:1fr; gap:28px;}}
.step-card{text-align:center;}
.step-card .sc-num{width:46px; height:46px; border-radius:50%; background:var(--white); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-family:var(--display); font-weight:800; color:var(--accent-deep);}
.step-card h3{font-size:1rem; margin-bottom:6px;}
.step-card p{font-size:0.86rem; color:var(--ink-soft); line-height:1.5;}

/* ---------- Qué incluye (report table of contents) ---------- */
.report-toc{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
@media (max-width:700px){.report-toc{grid-template-columns:1fr;}}
.toc-item{background:var(--paper); padding:20px 22px; display:flex; gap:14px; align-items:flex-start;}
.toc-item .ti-icon{width:34px; height:34px; border-radius:8px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink);}
.toc-item .ti-icon svg{width:17px; height:17px;}
.toc-item h3{font-size:0.96rem; margin-bottom:4px;}
.toc-item p{font-size:0.84rem; color:var(--ink-soft); line-height:1.45;}

/* ---------- Diferenciador ---------- */
.diff-compare{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:700px){.diff-compare{grid-template-columns:1fr;}}
.diff-panel{border-radius:12px; padding:24px; border:1px solid var(--line);}
.diff-panel.bad{background:rgba(168,80,62,0.06);}
.diff-panel.good{background:rgba(217,167,59,0.1); border-color:rgba(184,134,46,0.35);}
.diff-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; font-weight:700; margin-bottom:12px;}
.diff-panel.bad .diff-label{color:var(--bad);} .diff-panel.good .diff-label{color:var(--accent-deep);}
.diff-panel p{font-size:0.94rem; color:var(--ink-soft); line-height:1.55;}
.diff-panel ul{margin-top:10px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:6px;}
.diff-panel li{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);}
.diff-panel.bad li::before{content:'✕ '; color:var(--bad);}
.diff-panel.good li::before{content:'✓ '; color:var(--good);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);} .faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:19px 2px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--sans); font-size:0.98rem; font-weight:600; color:var(--ink);}
.faq-q .plus{width:20px; height:20px; flex-shrink:0; position:relative;}
.faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--ink); transition:transform .3s ease;}
.faq-q .plus::before{top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%);}
.faq-q .plus::after{left:50%; top:0; height:100%; width:1.5px; transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{padding:0 2px 20px; color:var(--ink-soft); font-size:0.92rem; max-width:60ch;}

/* ---------- CTA final ---------- */
.cta-final{background:var(--ink); border-radius:16px; padding:52px 40px; text-align:center; position:relative; overflow:hidden;}
@media (max-width:640px){.cta-final{padding:38px 22px;}}
.cta-final::before{content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px, rgba(221,230,213,0.06) 1px, transparent 1px); background-size:16px 16px;}
.cta-final > *{position:relative;}
.cta-final h2{color:var(--paper); font-size:clamp(1.5rem,2.8vw,2.1rem); max-width:560px; margin:0 auto 14px;}
.cta-final p{color:rgba(221,230,213,0.7); max-width:460px; margin:0 auto 28px; font-size:0.98rem;}
.cta-final .btn-sub{color:rgba(221,230,213,0.5);}

footer{padding:32px 0; border-top:1px solid var(--line);}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);}

/* ---------- Consent banner ---------- */
.consent-banner{position:fixed; left:0; right:0; bottom:0; z-index:200; background:var(--ink); border-top:1px solid rgba(221,230,213,0.15); transform:translateY(100%); transition:transform .4s ease;}
.consent-banner.show{transform:translateY(0);}
.consent-inner{max-width:1080px; margin:0 auto; padding:18px 32px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
@media (max-width:640px){.consent-inner{padding:16px 20px;}}
.consent-inner p{flex:1; min-width:220px; font-size:0.85rem; color:rgba(221,230,213,0.75); line-height:1.5; margin:0;}
.consent-actions{display:flex; gap:10px; flex-shrink:0;}
.consent-btn{font-family:var(--mono); font-size:12px; font-weight:700; padding:10px 18px; border-radius:6px; cursor:pointer; border:1px solid transparent; transition:all .2s ease;}
.consent-btn.primary{background:var(--accent); color:var(--ink);}
.consent-btn.primary:hover{background:var(--accent-deep); color:#fff;}
.consent-btn.ghost{background:transparent; color:rgba(221,230,213,0.7); border-color:rgba(221,230,213,0.25);}
.consent-btn.ghost:hover{border-color:rgba(221,230,213,0.5); color:var(--paper);}

/* ============================================================
   AÑADIDO: reservas (Cal.com) y siguiente paso tras el formulario
   ============================================================ */
.btn:focus-visible, .nav-btn:focus-visible, .consent-btn:focus-visible, .faq-q:focus-visible{outline:3px solid var(--accent-deep); outline-offset:3px;}

/* Botón secundario sobre fondo oscuro */
.btn-ghost-dark{background:transparent; color:var(--paper); border-color:rgba(221,230,213,0.35);}
.btn-ghost-dark:hover{border-color:var(--paper); color:#fff;}

/* Dos botones en el CTA final */
.cta-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}

/* Panel "siguiente paso" que aparece al enviar el diagnóstico */
.next-step{padding:8px 0 56px;}
.next-step[hidden]{display:none;}
.next-card{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; background:var(--white); border:1px solid var(--line); border-left:4px solid var(--good); border-radius:16px; padding:28px 32px; box-shadow:var(--shadow);}
.next-icon{width:44px; height:44px; border-radius:50%; background:var(--good); color:#fff; display:flex; align-items:center; justify-content:center;}
.next-icon svg{width:22px; height:22px;}
.next-card h2{font-size:1.25rem; line-height:1.3; outline:none;}
.next-card p{margin-top:6px; color:var(--ink-soft); font-size:0.95rem; max-width:56ch;}
@media (max-width:760px){
  .next-card{grid-template-columns:1fr; padding:24px;}
  .next-card .btn{justify-content:center;}
}