/* ============================================================================
   STC — Home Dual (FASE B) · styles.css
   Re-skin 100% con tokens STC (assets/css/tokens.css). Mobile-first.
   Grid único · escala única · motion único · tema oscuro.
   ========================================================================== */

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img,svg { display: block; max-width: 100%; }
a { color: var(--stc-primary-light); text-decoration: none; }
a:hover { color: var(--stc-cta-hover); }
h1,h2,h3,h4 { font-family: var(--stc-font-display); line-height: var(--lh-tight); margin: 0; font-weight: var(--fw-semibold); }
p { margin: 0; }
button { font: inherit; cursor: pointer; }

:focus-visible { outline: none; box-shadow: var(--stc-ring); border-radius: var(--stc-radius-sm); }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--stc-cta); color:var(--stc-cta-ink);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--stc-radius-sm); z-index:var(--z-modal); font-weight:var(--fw-semibold); }
.skip-link:focus{ left:var(--sp-4); top:var(--sp-4); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--stc-bg-2); }
.center { text-align: center; }
.muted { color: var(--stc-muted); }

.eyebrow{ font-size:var(--fs-xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--stc-primary-light); font-weight:var(--fw-semibold); margin-bottom:var(--sp-3); }
.eyebrow.center{ margin-inline:auto; }
.section-title{ font-size:var(--fs-h2); margin-bottom:var(--sp-8); max-width:22ch; }
.section-title.center{ margin-inline:auto; }

/* ---------- Icons ---------- */
.ic{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ic-sm{ width:16px; height:16px; }
.ic-lg{ width:30px; height:30px; }
.ic-xl{ width:40px; height:40px; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--stc-font-display);
  font-weight:var(--fw-semibold); font-size:var(--fs-sm); padding:var(--sp-3) var(--sp-6);
  border-radius:var(--stc-radius-pill); border:1px solid transparent; transition:transform var(--stc-dur-fast) var(--stc-ease), background var(--stc-dur-fast) var(--stc-ease), box-shadow var(--stc-dur-fast) var(--stc-ease); }
.btn:active{ transform:translateY(1px); }
.btn-cta{ background:var(--stc-cta); color:var(--stc-cta-ink); box-shadow:var(--stc-shadow); }
.btn-cta:hover{ background:var(--stc-cta-hover); color:var(--stc-cta-ink); }
.btn-ghost{ background:transparent; color:var(--stc-ink); border-color:var(--stc-border-strong); }
.btn-ghost:hover{ background:var(--stc-surface); color:var(--stc-ink); }
.btn-lg{ padding:var(--sp-4) var(--sp-8); font-size:var(--fs-body); }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:var(--z-header);
  background:color-mix(in srgb, var(--stc-bg) 82%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--stc-border); }
.header-inner{ display:flex; align-items:center; gap:var(--sp-6); min-height:68px; }
.brand{ display:inline-flex; align-items:center; gap:var(--sp-3); color:var(--stc-ink); }
.brand-mark{ height:38px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong{ font-family:var(--stc-font-display); font-weight:var(--fw-bold); letter-spacing:.06em; font-size:1.05rem; }
.brand-text small{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stc-muted); }

.main-nav{ margin-inline-start:auto; }
.nav-list{ display:flex; align-items:center; gap:var(--sp-2); list-style:none; margin:0; padding:0; }
.nav-trigger,.nav-link{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:0;
  color:var(--stc-ink); padding:var(--sp-2) var(--sp-3); border-radius:var(--stc-radius-sm); font-weight:var(--fw-medium); font-size:var(--fs-sm); }
.nav-trigger:hover,.nav-link:hover{ color:var(--stc-ink); background:var(--stc-surface); }
.nav-trigger[aria-expanded="true"] .ic{ transform:rotate(180deg); }
.nav-trigger .ic{ transition:transform var(--stc-dur-fast) var(--stc-ease); }
.header-cta{ margin-inline-start:var(--sp-2); }

/* Mega-menú */
.mega{ position:absolute; left:0; right:0; top:100%; background:var(--stc-surface);
  border-top:1px solid var(--stc-border); border-bottom:1px solid var(--stc-border);
  box-shadow:var(--stc-shadow-lg); z-index:var(--z-mega); animation:reveal var(--stc-dur) var(--stc-ease); }
.mega[hidden]{ display:none; }
.mega-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); padding-block:var(--sp-6); }
.mega-grid--5{ grid-template-columns:repeat(5,1fr); }
.mega-item{ display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3);
  border-radius:var(--stc-radius); color:var(--stc-ink); transition:background var(--stc-dur-fast) var(--stc-ease); }
.mega-item:hover{ background:var(--stc-surface-2); color:var(--stc-ink); }
.mega-item .ic{ color:var(--stc-primary-light); flex:none; margin-top:2px; }
.mega-item span{ display:flex; flex-direction:column; font-size:var(--fs-sm); color:var(--stc-muted); gap:2px; }
.mega-item strong{ color:var(--stc-ink); font-weight:var(--fw-semibold); font-family:var(--stc-font-display); }

/* Hamburguesa + drawer */
.hamburger{ display:none; flex-direction:column; gap:5px; background:transparent; border:0; padding:8px; margin-inline-start:auto; }
.hamburger span{ width:24px; height:2px; background:var(--stc-ink); border-radius:2px; transition:transform var(--stc-dur) var(--stc-ease), opacity var(--stc-dur); }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-drawer{ border-top:1px solid var(--stc-border); background:var(--stc-surface); padding:var(--sp-4) var(--gutter) var(--sp-8); }
.mobile-drawer[hidden]{ display:none; }
.mobile-drawer details{ border-bottom:1px solid var(--stc-border); }
.mobile-drawer summary{ padding:var(--sp-4) 0; font-family:var(--stc-font-display); font-weight:var(--fw-semibold); list-style:none; cursor:pointer; }
.mobile-drawer summary::-webkit-details-marker{ display:none; }
.mobile-drawer details a,.drawer-link{ display:block; padding:var(--sp-2) 0 var(--sp-2) var(--sp-4); color:var(--stc-muted); font-size:var(--fs-sm); }
.drawer-link{ padding-inline-start:0; border-bottom:1px solid var(--stc-border); }
.drawer-cta{ margin-top:var(--sp-6); width:100%; justify-content:center; }

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(48px,6vw,104px); position:relative; overflow:hidden; background:linear-gradient(180deg, var(--stc-bg), var(--stc-bg-2)); }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(55% 60% at 88% 0%, #E6F0F8, transparent 60%); }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-16); align-items:center; }
.hero h1{ font-size:var(--fs-display); letter-spacing:-.01em; margin-bottom:var(--sp-6); }
.hero h1 em{ color:var(--stc-primary-light); font-style:normal; }
.lead{ font-size:var(--fs-lead); color:var(--stc-muted); max-width:52ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-block:var(--sp-8) var(--sp-6); }
.trust-inline{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6); list-style:none; margin:0; padding:0; color:var(--stc-muted); font-size:var(--fs-sm); }
.trust-inline strong{ color:var(--stc-ink); font-weight:var(--fw-semibold); }
.trust-inline li{ position:relative; padding-inline-start:var(--sp-4); }
.trust-inline li::before{ content:""; position:absolute; left:0; top:50%; width:6px; height:6px; border-radius:50%; background:var(--stc-primary-light); transform:translateY(-50%); }

/* Duotono / placeholder honesto (tinte claro de marca, sin foto "IA") */
.duotone{ background:linear-gradient(150deg, #E6F0F8, var(--stc-bg-2) 82%);
  border:1px solid var(--stc-border); }
/* Tarjeta visual del hero = bloque NAVY premium (dirección "hero C") */
.hero-visual .visual-card{ aspect-ratio:4/5; border-radius:var(--stc-radius-lg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--sp-4); box-shadow:var(--stc-shadow-lg); position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--stc-navy), var(--stc-navy-2)); border:1px solid rgba(255,255,255,.08); }
.hero-visual .visual-card::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(55% 45% at 50% 22%, var(--stc-navy-glow), transparent 70%); }
.visual-mark{ width:74px; height:74px; fill:none; stroke:var(--stc-accent-navy); stroke-width:1.25; opacity:.95; position:relative; }
.visual-tag{ font-family:var(--stc-font-display); font-weight:var(--fw-semibold); color:var(--stc-on-navy); letter-spacing:.02em; position:relative; }

/* ---------- Router ---------- */
.router-section{ padding-block:var(--section-y); background:var(--stc-bg-2); }
.dual-switch{ display:inline-flex; gap:4px; padding:5px; margin:0 auto var(--sp-8); border-radius:var(--stc-radius-pill);
  background:var(--stc-surface); border:1px solid var(--stc-border); position:relative; left:50%; transform:translateX(-50%); }
.dual-tab{ border:0; background:transparent; color:var(--stc-muted); padding:var(--sp-2) var(--sp-6);
  border-radius:var(--stc-radius-pill); font-weight:var(--fw-semibold); font-size:var(--fs-sm); transition:all var(--stc-dur-fast) var(--stc-ease); }
.dual-tab.is-active{ background:var(--stc-primary); color:#fff; }

.card-surface{ background:var(--stc-surface); border:1px solid var(--stc-border); border-radius:var(--stc-radius-lg); }
.router{ padding:clamp(20px,3vw,40px); }
.router-steps{ display:grid; gap:var(--sp-8); }
.step-label{ display:flex; align-items:center; gap:var(--sp-3); font-family:var(--stc-font-display);
  font-weight:var(--fw-semibold); margin-bottom:var(--sp-4); font-size:var(--fs-h4); }
.step-num{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--stc-primary); color:#fff; font-size:var(--fs-sm); flex:none; }
.chip-group{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.chip{ background:var(--stc-surface-2); color:var(--stc-ink); border:1px solid var(--stc-border);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--stc-radius-pill); font-size:var(--fs-sm);
  transition:border-color var(--stc-dur-fast) var(--stc-ease), background var(--stc-dur-fast) var(--stc-ease); }
.chip:hover{ border-color:var(--stc-primary-light); }
.chip.is-active{ background:var(--stc-primary); color:#fff; border-color:var(--stc-primary); }

.router-result{ margin-top:var(--sp-8); padding-top:var(--sp-8); border-top:1px solid var(--stc-border); }
.result-placeholder{ color:var(--stc-muted); }
.result-head{ font-family:var(--stc-font-display); font-weight:var(--fw-semibold); font-size:var(--fs-h3); margin-bottom:var(--sp-2); }
.result-sub{ color:var(--stc-muted); margin-bottom:var(--sp-6); }
.result-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-8); list-style:none; padding:0; }
.result-item{ display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-4); background:var(--stc-surface-2);
  border:1px solid var(--stc-border); border-radius:var(--stc-radius); }
.result-item .ic{ color:var(--stc-primary-light); flex:none; }
.result-item strong{ font-family:var(--stc-font-display); display:block; margin-bottom:2px; }
.result-item small{ color:var(--stc-muted); }
.result-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); }

/* ---------- Cards grid ---------- */
.grid-cards{ display:grid; gap:var(--sp-6); grid-template-columns:1fr; }
.card,.vcard{ background:var(--stc-surface); border:1px solid var(--stc-border); border-radius:var(--stc-radius-lg);
  padding:var(--sp-8); transition:transform var(--stc-dur) var(--stc-ease), border-color var(--stc-dur) var(--stc-ease), background var(--stc-dur) var(--stc-ease); }
.card:hover,.vcard:hover{ transform:translateY(-4px); border-color:var(--stc-border-strong); background:var(--stc-surface-2); }
.card .ic,.vcard .ic{ color:var(--stc-primary-light); }
.card h3,.vcard h3{ font-size:var(--fs-h4); margin-block:var(--sp-4) var(--sp-2); }
.card p,.vcard p{ color:var(--stc-muted); font-size:var(--fs-sm); }

.vcard{ display:flex; flex-direction:column; }
.vcard-media{ aspect-ratio:16/10; border-radius:var(--stc-radius); display:grid; place-items:center; margin-bottom:var(--sp-4); }
.vcard-media .ic{ color:var(--stc-primary-light); opacity:.85; }
.link-arrow{ margin-top:auto; padding-top:var(--sp-4); display:inline-flex; align-items:center; gap:6px;
  font-weight:var(--fw-semibold); font-family:var(--stc-font-display); font-size:var(--fs-sm); }
.link-arrow .ic{ transition:transform var(--stc-dur-fast) var(--stc-ease); }
.link-arrow:hover .ic{ transform:translateX(4px); }
.vcard--cta{ background:linear-gradient(160deg, #E6F0F8, var(--stc-bg-2) 72%); border-color:var(--stc-border-strong); justify-content:center; }
.vcard--cta h3{ margin-top:0; }
.vcard--cta .btn{ margin-top:var(--sp-6); align-self:flex-start; }

/* ---------- Stats ---------- */
.stats{ padding-block:var(--section-y); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); text-align:center; }
.stat{ padding:var(--sp-6); border-left:1px solid var(--stc-border); }
.stat:first-child{ border-left:0; }
.stat-num{ display:block; font-family:var(--stc-font-display); font-weight:var(--fw-bold);
  font-size:var(--fs-display); color:var(--stc-primary-light); line-height:1; }
.stat-label{ display:block; margin-top:var(--sp-3); color:var(--stc-muted); font-size:var(--fs-sm); }

/* ---------- Trust strip ---------- */
.trust-strip{ padding-block:var(--sp-12); border-block:1px solid var(--stc-border); background:var(--stc-bg-2); }
.trust-caption{ text-align:center; color:var(--stc-muted); font-size:var(--fs-sm); margin-bottom:var(--sp-6); letter-spacing:.04em; }
.trust-logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-6) var(--sp-16); list-style:none; margin:0; padding:0; }
.trust-logos li{ font-family:var(--stc-font-display); font-weight:var(--fw-semibold); letter-spacing:.1em;
  color:var(--stc-muted); font-size:var(--fs-h4); opacity:.75; transition:opacity var(--stc-dur) var(--stc-ease), color var(--stc-dur); }
.trust-logos li:hover{ opacity:1; color:var(--stc-ink); }

/* ---------- Quote ---------- */
.quote{ padding:clamp(24px,4vw,var(--sp-16)); max-width:900px; }
.quote blockquote{ margin:0; font-family:var(--stc-font-display); font-weight:var(--fw-medium);
  font-size:var(--fs-h3); line-height:var(--lh-snug); color:var(--stc-ink); }
.quote figcaption{ margin-top:var(--sp-6); color:var(--stc-ink); font-size:var(--fs-sm); }

/* ---------- CTA band ---------- */
.cta-band{ padding-block:var(--section-y);
  background:linear-gradient(120deg, var(--stc-navy), var(--stc-navy-2) 85%); position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(45% 120% at 88% 0%, var(--stc-navy-glow), transparent 60%); }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); flex-wrap:wrap; position:relative; }
.cta-band h2{ font-size:var(--fs-h2); max-width:20ch; margin-bottom:var(--sp-3); color:var(--stc-on-navy); }
.cta-band p{ color:var(--stc-muted-navy); max-width:48ch; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--stc-bg-2); border-top:1px solid var(--stc-border); padding-block:var(--sp-16) var(--sp-8); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-12); }
.footer-brand img{ margin-bottom:var(--sp-4); }
.footer-mark-text strong{ font-family:var(--stc-font-display); letter-spacing:.06em; }
.footer-mark-text span{ color:var(--stc-muted); font-size:var(--fs-sm); }
.footer-note{ color:var(--stc-muted); font-size:var(--fs-sm); margin-top:var(--sp-4); max-width:32ch; }
.footer-col h4{ font-size:var(--fs-sm); letter-spacing:.08em; text-transform:uppercase; color:var(--stc-ink); margin-bottom:var(--sp-4); }
.footer-col a{ display:block; color:var(--stc-muted); font-size:var(--fs-sm); padding-block:var(--sp-1); }
.footer-col a:hover{ color:var(--stc-ink); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2);
  margin-top:var(--sp-12); padding-top:var(--sp-6); border-top:1px solid var(--stc-border); color:var(--stc-muted); font-size:var(--fs-sm); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(var(--stc-reveal-y)); transition:opacity var(--stc-dur) var(--stc-ease), transform var(--stc-dur) var(--stc-ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@keyframes reveal{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ============================================================================
   COMPONENTES DE SECCIÓN COMPARTIDOS (usados por Landing y Hub)
   ========================================================================== */
/* Metodología en pasos numerados */
.method{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
.method-step{ display:flex; gap:var(--sp-6); align-items:flex-start; padding:var(--sp-8);
  background:var(--stc-surface); border:1px solid var(--stc-border); border-radius:var(--stc-radius-lg);
  position:relative; transition:border-color var(--stc-dur) var(--stc-ease), transform var(--stc-dur) var(--stc-ease); }
.method-step:hover{ border-color:var(--stc-border-strong); transform:translateY(-3px); }
.method-num{ font-family:var(--stc-font-display); font-weight:var(--fw-bold); font-size:var(--fs-h2);
  color:var(--stc-primary); line-height:1; flex:none; min-width:64px; }
.method-step h3{ font-size:var(--fs-h4); margin-bottom:var(--sp-2); }
.method-step p{ color:var(--stc-muted); font-size:var(--fs-sm); }
.gate{ display:inline-block; margin-left:var(--sp-2); font-family:var(--stc-font-display);
  font-size:var(--fs-xs); letter-spacing:.08em; color:var(--stc-primary);
  background:var(--stc-surface-2); border:1px solid var(--stc-border); padding:2px 8px; border-radius:var(--stc-radius-pill); }
@media (min-width:769px){ .method--2col{ grid-template-columns:1fr 1fr; } }

/* FAQ acordeón */
.faq{ display:grid; gap:var(--sp-3); }
.faq-item{ background:var(--stc-surface); border:1px solid var(--stc-border); border-radius:var(--stc-radius); overflow:hidden; }
.faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-6); font-family:var(--stc-font-display); font-weight:var(--fw-semibold);
  cursor:pointer; list-style:none; color:var(--stc-ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-ico{ flex:none; color:var(--stc-primary); transition:transform var(--stc-dur) var(--stc-ease); }
.faq-item[open] .faq-ico{ transform:rotate(180deg); }
.faq-body{ padding:0 var(--sp-6) var(--sp-6); }
.faq-body p{ color:var(--stc-muted); font-size:var(--fs-sm); }
.faq-item[open]{ border-color:var(--stc-border-strong); }

/* ============================================================================
   RESPONSIVE — breakpoints 1280 / 768 / 390
   ========================================================================== */
@media (max-width:1280px){
  .mega-grid{ grid-template-columns:repeat(3,1fr); }
  .mega-grid--5{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .grid-cards--3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-8); }
}
@media (max-width:768px){
  .main-nav,.header-cta{ display:none; }
  .hamburger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; gap:var(--sp-12); }
  .hero-visual{ order:-1; max-width:340px; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd){ border-left:0; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
  .grid-cards--3{ grid-template-columns:1fr; }
  .card--wide{ grid-column:auto; }
  .footer-grid{ grid-template-columns:1fr; }
  .dual-switch{ width:100%; }
  .dual-tab{ flex:1; text-align:center; padding-inline:var(--sp-3); }
  .stats-grid{ gap:var(--sp-4); }
}