/* ═══════════════════════════════════════════
   TOKENS ORIGINALES
═══════════════════════════════════════════ */
:root {
  /* Variables puente para Header/Footer compartido */
  --nav-bg: rgba(8,9,26,.96);
  --orange: #4f46e5;
  --orange-light: #6366f1;

  /* Tokens exactos del archivo original */
  --ink:        #08091a;
  --ink-2:      #111326;
  --ink-3:      #1a1d38;
  --brand:      #4f46e5;        
  --brand-lite: #6366f1;
  --brand-glow: #818cf8;
  --teal:       #0ea5e9;
  --teal-lite:  #38bdf8;
  --green:      #10b981;
  --amber:      #f59e0b;
  --red:        #ef4444;
  --white:      #ffffff;
  --surface:    #f8f9ff;
  --border:     #e2e5f5;
  --muted:      #6b7280;
  --muted-2:    #94a3b8;
  --text:       #1e2235;
  --r:          14px;
  --r-lg:       22px;
  --sh:         0 8px 40px rgba(79,70,229,.16);
}

body { font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--white); }
h1,h2,h3,h4,h5, .nav-brand, .nav-pill, .btn-primary, .btn-ghost, .fc-title, .submit, .faq-q { font-family: 'Bricolage Grotesque', sans-serif !important; }

/* ═══ UTILS ═══ */
.label { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); margin-bottom: 10px; }
.section-h { font-size: clamp(1.75rem, 3.8vw, 2.6rem); font-weight: 800; margin-bottom: 14px; }
.section-p { font-size: 1rem; color: var(--muted); max-width: 560px; line-height: 1.7; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 100px; padding: 3px 11px; }
.tag-red   { background: rgba(239,68,68,.1);   color: var(--red); }
.tag-amber { background: rgba(245,158,11,.1);  color: var(--amber); }
.tag-green { background: rgba(16,185,129,.12); color: var(--green); }
.tag-brand { background: rgba(79,70,229,.1);   color: var(--brand); }
.tag-teal  { background: rgba(14,165,233,.1);  color: var(--teal); }

/* ═══ HERO ═══ */
.hero { min-height: 100vh; background: var(--ink); display: flex; align-items: center; padding: 100px 5vw 80px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 65% at 55% 25%, rgba(79,70,229,.28) 0%, transparent 65%), radial-gradient(ellipse 50% 50% at 92% 75%, rgba(14,165,233,.14) 0%, transparent 60%), radial-gradient(ellipse 35% 45% at 5% 60%, rgba(16,185,129,.08) 0%, transparent 55%); pointer-events: none; }
.hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(99,102,241,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.05) 1px, transparent 1px); background-size: 52px 52px; pointer-events: none; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1120px; margin: 0 auto; width: 100%; }
@media(max-width:900px){ .hero-inner { grid-template-columns: 1fr; gap: 48px; } }

.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(79,70,229,.18); border: 1px solid rgba(129,140,248,.28); border-radius: 100px; padding: 5px 15px; font-size: .75rem; font-weight: 700; color: var(--brand-glow); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 24px; animation: up .6s ease both; }
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-lite); animation: blink 2.2s infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(1.5)} }

.hero-left h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 800; color: var(--white); margin-bottom: 18px; animation: up .7s .08s ease both; line-height: 1.15; }
.hero-left h1 em { font-style: normal; color: var(--brand-glow); }
.hero-left h1 .underline-teal { position: relative; font-style: normal; color: var(--teal-lite); }
.hero-left h1 .underline-teal::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), transparent); }

.hero-sub { font-size: clamp(.95rem, 1.8vw, 1.1rem); color: rgba(255,255,255,.55); max-width: 480px; line-height: 1.75; margin-bottom: 34px; animation: up .7s .16s ease both; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; animation: up .7s .24s ease both; }
.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); animation: up .7s .32s ease both; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: rgba(255,255,255,.4); }
@keyframes up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* MOCK DASHBOARD */
.dashboard-mock { background: rgba(255,255,255,.04); border: 1px solid rgba(99,102,241,.2); border-radius: var(--r-lg); overflow: hidden; animation: up .8s .2s ease both; box-shadow: 0 24px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.dash-topbar { background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.07); padding: 12px 18px; display: flex; align-items: center; gap: 10px; }
.dash-dots { display: flex; gap: 6px; }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.dash-dot.r { background: #ff5f57; } .dash-dot.y { background: #febc2e; } .dash-dot.g { background: #28c840; }
.dash-title { font-size: .72rem; color: rgba(255,255,255,.3); font-weight: 500; margin-left: 6px; }
.dash-body { padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }

.kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.kpi { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 12px 14px; }
.kpi-val { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--white); line-height: 1; margin-bottom: 3px; }
.kpi-val.bad { color: var(--red); } .kpi-val.ok { color: var(--green); } .kpi-val.warn{ color: var(--amber); }
.kpi-lbl { font-size: .65rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .05em; }

.section-block { }
.block-title { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.3); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.bar-list { display: flex; flex-direction: column; gap: 7px; }
.bar-item { display: flex; align-items: center; gap: 10px; }
.bar-cat { font-size: .72rem; color: rgba(255,255,255,.5); width: 100px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { flex: 1; height: 6px; background: rgba(255,255,255,.07); border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 100px; }
.fill-social { background: var(--red); width: 72%; } .fill-news { background: var(--amber); width: 48%; } .fill-video { background: #a855f7; width: 61%; } .fill-work { background: var(--green); width: 85%; } .fill-shop { background: var(--teal); width: 33%; }
.bar-pct { font-size: .68rem; color: rgba(255,255,255,.35); width: 32px; text-align: right; flex-shrink: 0; }

.alert-rows { display: flex; flex-direction: column; gap: 7px; }
.alert-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 9px 12px; }
.alert-ico { font-size: .95rem; flex-shrink: 0; }
.alert-text { flex: 1; }
.alert-text strong { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.75); display: block; line-height: 1.2; }
.alert-text span { font-size: .67rem; color: rgba(255,255,255,.3); }
.alert-sev { font-size: .62rem; font-weight: 800; padding: 2px 8px; border-radius: 100px; }
.sev-hi { background: rgba(239,68,68,.18); color: var(--red); } .sev-med { background: rgba(245,158,11,.15); color: var(--amber); } .sev-lo { background: rgba(99,102,241,.15); color: var(--brand-glow); }

/* ═══ QUESTIONS ═══ */
.questions { background: var(--surface); padding: 100px 5vw; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 52px; }
.q-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r); padding: 26px 22px; position: relative; transition: all .22s; cursor: default; }
.q-card:hover { box-shadow: var(--sh); border-color: var(--brand); transform: translateY(-3px); }
.q-card::before { content: '?'; position: absolute; top: 18px; right: 20px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 3.5rem; font-weight: 900; color: var(--brand); opacity: .07; line-height: 1; pointer-events: none; }
.q-icon { font-size: 1.6rem; margin-bottom: 12px; display: block; }
.q-card h3 { font-size: .97rem; font-weight: 700; margin-bottom: 8px; line-height: 1.35; }
.q-card p { font-size: .83rem; color: var(--muted); line-height: 1.6; }

/* ═══ WHAT YOU SEE ═══ */
.what-you-see { background: var(--white); padding: 100px 5vw; }
.wys-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; margin-top: 56px; }
@media(max-width:860px){ .wys-inner { grid-template-columns: 1fr; gap: 48px; } }
.report-stack { display: flex; flex-direction: column; gap: 14px; }
.report-card { background: var(--ink-2); border: 1px solid rgba(99,102,241,.18); border-radius: var(--r); padding: 20px 20px 16px; position: relative; overflow: hidden; transition: all .22s; }
.report-card:hover { border-color: rgba(99,102,241,.45); transform: translateX(4px); }
.report-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent-line); border-radius: 0 2px 2px 0; }
.report-card.c1 { --accent-line: var(--red); } .report-card.c2 { --accent-line: var(--amber); } .report-card.c3 { --accent-line: var(--brand-glow); } .report-card.c4 { --accent-line: var(--green); }
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.rc-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: .88rem; font-weight: 800; color: var(--white); }
.rc-period { font-size: .65rem; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.rc-rows { display: flex; flex-direction: column; gap: 6px; }
.rc-row { display: flex; align-items: center; gap: 9px; }
.rc-name { font-size: .75rem; color: rgba(255,255,255,.45); width: 130px; flex-shrink: 0; }
.rc-bar-track { flex: 1; height: 5px; background: rgba(255,255,255,.06); border-radius: 100px; overflow: hidden; }
.rc-bar { height: 100%; border-radius: 100px; background: var(--accent-line); }
.rc-val { font-size: .7rem; color: rgba(255,255,255,.3); width: 42px; text-align: right; flex-shrink: 0; }

.insight-list { display: flex; flex-direction: column; gap: 22px; }
.insight-item { display: flex; gap: 18px; align-items: flex-start; }
.insight-num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2rem; font-weight: 900; color: var(--brand); opacity: .25; line-height: 1; flex-shrink: 0; width: 44px; }
.insight-text h4 { font-size: .97rem; font-weight: 700; margin-bottom: 5px; }
.insight-text p { font-size: .83rem; color: var(--muted); line-height: 1.65; }
.insight-text .tag { margin-top: 8px; }

/* ═══ 30 DAYS RESULTS ═══ */
.results { background: var(--ink); padding: 100px 5vw; position: relative; overflow: hidden; }
.results::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 85% 50%, rgba(79,70,229,.18) 0%, transparent 65%); pointer-events: none; }
.results .label { color: var(--teal-lite); } .results .section-h { color: var(--white); } .results .section-p { color: rgba(255,255,255,.45); }
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 52px; position: relative; z-index: 1; }
.result-card { background: rgba(255,255,255,.04); border: 1px solid rgba(99,102,241,.18); border-radius: var(--r); padding: 26px 22px; transition: all .22s; }
.result-card:hover { background: rgba(79,70,229,.12); border-color: rgba(99,102,241,.38); transform: translateY(-3px); }
.result-card .icon { font-size: 1.5rem; margin-bottom: 12px; display: block; }
.result-card h3 { font-size: .9rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.result-card p { font-size: .8rem; color: rgba(255,255,255,.4); line-height: 1.6; }
.result-example { margin-top: 12px; padding: 8px 12px; background: rgba(255,255,255,.04); border-radius: 8px; font-size: .72rem; color: rgba(255,255,255,.3); font-style: italic; line-height: 1.5; }

/* ═══ VERSIONS ═══ */
.versions { background: var(--surface); padding: 100px 5vw; }
.ver-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; }
@media(max-width:640px){ .ver-grid { grid-template-columns: 1fr; } }
.ver-card { border-radius: var(--r-lg); padding: 36px 30px; border: 1.5px solid var(--border); background: var(--white); position: relative; transition: all .25s; }
.ver-card:hover { box-shadow: var(--sh); }
.ver-card.pro { background: var(--ink-2); border-color: rgba(99,102,241,.28); }
.ver-badge { position: absolute; top: -12px; left: 26px; background: var(--brand); color: var(--white); font-size: .65rem; font-weight: 800; padding: 4px 14px; border-radius: 100px; letter-spacing: .06em; text-transform: uppercase; }
.ver-tier { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.ver-ess .ver-tier { color: var(--brand); } .ver-pro .ver-tier { color: var(--brand-glow); }
.ver-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; font-weight: 900; margin-bottom: 8px; }
.ver-ess .ver-name { color: var(--ink); } .ver-pro .ver-name { color: var(--white); }
.ver-tagline { font-size: .85rem; line-height: 1.55; margin-bottom: 24px; }
.ver-ess .ver-tagline { color: var(--muted); } .ver-pro .ver-tagline { color: rgba(255,255,255,.5); }
.ver-feats { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ver-feats li { display: flex; gap: 10px; font-size: .85rem; align-items: flex-start; }
.ver-ess .ver-feats li { color: var(--muted); } .ver-pro .ver-feats li { color: rgba(255,255,255,.65); }
.ver-feats li::before { content: '✓'; font-weight: 900; flex-shrink: 0; margin-top: 1px; }
.ver-ess .ver-feats li::before { color: var(--brand); } .ver-pro .ver-feats li::before { color: var(--brand-glow); }

/* ═══ RESPONSIBLE USE ═══ */
.responsible { background: var(--white); padding: 100px 5vw; }
.resp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; }
@media(max-width:680px){ .resp-2col { grid-template-columns: 1fr; } }
.resp-block { border-radius: var(--r-lg); padding: 32px 28px; }
.resp-ok { background: rgba(16,185,129,.05); border: 1.5px solid rgba(16,185,129,.18); }
.resp-no { background: rgba(239,68,68,.04); border: 1.5px solid rgba(239,68,68,.15); }
.resp-block h3 { font-size: 1rem; font-weight: 800; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.resp-ok h3 { color: var(--ink); } .resp-no h3 { color: var(--red); }
.resp-items { display: flex; flex-direction: column; gap: 12px; }
.resp-item { display: flex; gap: 12px; align-items: flex-start; }
.resp-item-ico { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.resp-item-text h5 { font-size: .87rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.resp-item-text p { font-size: .8rem; color: var(--muted); line-height: 1.55; }
.resp-note { grid-column: 1/-1; background: rgba(79,70,229,.05); border: 1px solid rgba(79,70,229,.15); border-radius: var(--r); padding: 20px 22px; font-size: .85rem; color: var(--muted); line-height: 1.65; }
.resp-note strong { color: var(--ink); font-weight: 700; }

/* ═══ FORM ═══ */
.form-section { background: linear-gradient(160deg, var(--ink-3), var(--ink)); padding: 100px 5vw; position: relative; overflow: hidden; }
.form-section::before { content: ''; position: absolute; right: -200px; top: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(79,70,229,.14) 0%, transparent 65%); pointer-events: none; }
.form-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
@media(max-width:800px){ .form-inner { grid-template-columns: 1fr; gap: 48px; } }
.fl-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-glow); margin-bottom: 12px; }
.fl-h { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--white); margin-bottom: 14px; line-height: 1.15; }
.fl-h em { font-style: normal; color: var(--brand-glow); }
.fl-p { font-size: .92rem; color: rgba(255,255,255,.45); line-height: 1.7; margin-bottom: 30px; }

.demo-items { display: flex; flex-direction: column; gap: 14px; }
.demo-item { display: flex; gap: 14px; align-items: flex-start; }
.di-dot { width: 34px; height: 34px; border-radius: 9px; background: rgba(79,70,229,.18); border: 1px solid rgba(99,102,241,.28); display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; margin-top: 1px; }
.di-text h5 { font-size: .88rem; font-weight: 700; color: var(--white); margin-bottom: 2px; }
.di-text p { font-size: .78rem; color: rgba(255,255,255,.38); line-height: 1.5; }

.form-card { background: var(--white); border-radius: var(--r-lg); padding: 40px 36px; box-shadow: 0 32px 80px rgba(0,0,0,.45); }
.fc-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.fc-sub { font-size: .82rem; color: var(--muted); margin-bottom: 26px; }
.fg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.fg label { font-size: .74rem; font-weight: 700; color: var(--ink); }
.fg input, .fg select { padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 9px; font-family: 'DM Sans', sans-serif; font-size: .88rem; color: var(--ink); background: var(--white); outline: none; transition: border-color .18s; -webkit-appearance: none; }
.fg input:focus, .fg select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width:480px){ .fg-row { grid-template-columns: 1fr; } }
.submit { width: 100%; background: var(--brand); color: var(--white); padding: 15px; border: none; border-radius: 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1rem; cursor: pointer; margin-top: 8px; box-shadow: 0 8px 24px rgba(79,70,229,.4); transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.submit:hover { background: var(--brand-lite); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(79,70,229,.5); }
.fc-disc { text-align: center; font-size: .7rem; color: var(--muted-2); margin-top: 11px; line-height: 1.5; }

/* ═══ ANIM ═══ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }