/* ════════════════════════════════════════════════════════════════════════
 * GALILEO · galileo.css — slice vanilla (portado fiel de app/globals.css)
 * ────────────────────────────────────────────────────────────────────────
 * Extracto autosuficiente del sistema real para servir HTML estático sin
 * montar Tailwind/Next. Tokens, valores y selectores son COPIA EXACTA del
 * diagnóstico (no inventados). Si una regla está aquí, su origen está en
 * app/globals.css del repo galileosys-web.
 * ════════════════════════════════════════════════════════════════════════ */

/* ---------- Orden explícito de cascade layers ----------
   Cierra DT-css-layers-cleanup: sin esto, los layers se ordenan por aparición
   y un error de balance en un layer cascadea hacia atrás (bug iconos 2026-05-27).
   Reglas FUERA de cualquier layer ganan siempre (la cascada normal vence a las
   layered) — eso es intencional para los overrides finales tipo .cta-final.
   ────────────────────────────────────────────────────────────────────────── */
@layer reset, base, components, utilities;

/* ---------- Tokens (copia exacta de :root en globals.css) ---------- */
:root{
  --navy:#0A1A40; --navy-deep:#061026; --navy-soft:#1B2A55;
  --navy-line:rgba(10,26,64,0.08); --navy-line-strong:rgba(10,26,64,0.14);
  --gold:#B8935A; --gold-light:#D4B584; --gold-dark:#8A6E40; --gold-tint:rgba(184,147,90,0.08);
  --cyan:#1FB6D4;
  --white:#FFFFFF; --cream:#FAF8F3;
  --gray-50:#F4F6FA; --gray-100:#E5E9F2; --gray-200:#D4DAE6; --gray-300:#B4BDD0;
  --gray-500:#7A8499; --gray-600:#5A6478; --gray-700:#3D4659; --gray-900:#1A1F2E;
  --bg:var(--white); --bg-alt:var(--cream); --bg-cool:var(--gray-50);
  --fg:var(--navy); --fg-soft:var(--gray-600); --fg-mute:var(--gray-500);
  --line:var(--navy-line); --line-strong:var(--navy-line-strong); --surface:var(--white);
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px;
  --shadow-sm:0 1px 2px rgba(10,26,64,0.04);
  --shadow-md:0 1px 3px rgba(10,26,64,0.04),0 4px 12px rgba(10,26,64,0.03);
  --shadow-lg:0 2px 6px rgba(10,26,64,0.05),0 16px 40px rgba(10,26,64,0.06);
  --ease:cubic-bezier(0.22,1,0.36,1); --dur:260ms;
  --container:1240px; --container-tight:1080px;
  --font-display:"Geist",system-ui,-apple-system,sans-serif;
  --font-body:"Geist",system-ui,-apple-system,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"JetBrains Mono",monospace;
  /* product accent: en la MAIN resuelve a gold (no hay .planilla-page) */
  --product-accent:var(--gold); --product-accent-soft:var(--gold-light); --product-accent-tint:var(--gold-tint);
--color-error:#b8403a; --color-error-soft:rgba(184,64,58,.12);
}
[data-theme="dark"]{
  --bg:#050A1A; --bg-alt:#080F22; --bg-cool:#0A1129;
  --fg:#ECEEF5; --fg-soft:#9AA4BC; --fg-mute:#6F7A93;
  --line:rgba(255,255,255,0.07); --line-strong:rgba(255,255,255,0.12); --surface:#0F1729;
--color-error:#ff7a72; --color-error-soft:rgba(255,122,114,.15);
}

/* ---------- Reset mínimo ---------- */
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}

/* ---------- Container ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}

/* ---------- galileo-texture (veta de mármol REAL del repo) ----------
   marble-dense-navy.svg @ 200px op.0.05 (navy claro) / gold.svg en dark.
   En producción: /textures/*.svg desde public/. En el preview standalone
   el SVG va embebido como data-URI (lo inyecta el ensamblador). */
.galileo-texture{position:relative;isolation:isolate}
.galileo-texture::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0.05;
  background-image:url('/assets/textures/marble-dense-navy.svg');
  background-size:41px 41px;background-repeat:repeat;
}
[data-theme="dark"] .galileo-texture::before{
  background-image:url('/assets/textures/marble-dense-gold.svg');
}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo-mark{width:36px;height:36px;color:var(--navy)}
[data-theme="dark"] .logo-mark{color:var(--fg)}
.logo-mark .ring{stroke:var(--gold)} .logo-mark .dot{fill:var(--cyan)} .logo-mark .letter{fill:currentColor}
.logo-text{display:flex;flex-direction:column;line-height:1.1;font-family:var(--font-display);
  font-weight:700;font-size:18px;letter-spacing:0.02em;color:var(--fg)}
.logo-text small{font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--fg-soft);margin-top:2px}

/* ---------- Header / Nav ---------- */
header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(8px);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
header>.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--container);margin-inline:auto;padding:14px 24px}
.nav-main{display:flex;align-items:center;gap:1.6rem;flex:1;justify-content:center}
.nav-main>a,.nav-main .pd-trigger{white-space:nowrap;font-family:inherit;font-size:0.95rem;font-weight:500}
.nav-main>a{color:var(--fg-soft);text-decoration:none;transition:color var(--dur) var(--ease)}
.nav-main>a:hover{color:var(--fg)}
.nav-main .pd-trigger{align-self:center}
.nav-actions{display:flex;align-items:center;gap:10px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-md);
  font-family:var(--font-display);font-size:14px;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:all var(--dur) var(--ease);
  line-height:1;white-space:nowrap}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-primary{background:var(--navy);color:var(--white)} .btn-primary:hover{background:var(--navy-soft)}
[data-theme="dark"] .btn-primary{background:var(--gold);color:var(--navy-deep)}
[data-theme="dark"] .btn-primary:hover{background:var(--gold-light)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--bg-cool);border-color:var(--navy)}
[data-theme="dark"] .btn-ghost:hover{background:var(--surface)}
.btn .arrow{width:14px;height:14px}
.btn-block{width:100%;justify-content:center}

/* ---------- Theme toggle ---------- */
.theme-toggle{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-md);
  color:var(--fg);cursor:pointer;transition:all var(--dur) var(--ease)}
.theme-toggle:hover{background:var(--bg-cool)}
[data-theme="dark"] .theme-toggle:hover{background:var(--surface)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .sun{display:none} .theme-toggle .moon{display:block}
[data-theme="dark"] .theme-toggle .sun{display:block} [data-theme="dark"] .theme-toggle .moon{display:none}

/* ---------- Mobile toggle ---------- */
.mobile-toggle{display:none;width:36px;height:36px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-md);color:var(--fg);cursor:pointer}

/* ---------- Lang picker ---------- */
.lang-picker{position:relative;display:inline-flex}
.lang-picker-trigger{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;background:transparent;
  border:1px solid var(--line-strong);border-radius:var(--radius-md);color:var(--fg);font-size:13px;
  font-weight:500;cursor:pointer;transition:all var(--dur) var(--ease)}
.lang-picker-trigger:hover{background:var(--bg-cool)}
[data-theme="dark"] .lang-picker-trigger:hover{background:var(--surface)}
.lang-picker-caret{width:12px;height:12px;opacity:0.6}
/* Bandera SVG real (reglas exactas de globals.css) — sin esto el SVG colapsa */
.lang-picker-flag{width:18px;height:14px;border-radius:2px;overflow:hidden;display:inline-flex;flex-shrink:0}
.lang-picker-flag svg{width:100%;height:100%;display:block}
.lang-picker-current{font-size:13px}
.lang-picker-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:6px;z-index:100;max-height:360px;overflow-y:auto}
.lang-picker-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  border-radius:var(--radius-sm);background:transparent;border:0;color:var(--fg);font-size:13px;
  cursor:pointer;text-align:left}
.lang-picker-item:hover{background:var(--bg-cool)}
[data-theme="dark"] .lang-picker-item:hover{background:var(--bg-alt)}
.lang-picker-item-name{flex:1}
.lang-picker-item-code{font-size:11px;color:var(--fg-mute);font-family:var(--font-mono)}

/* ---------- Products dropdown ---------- */
.pd-root{position:relative;display:inline-flex}
.pd-trigger{display:inline-flex;align-items:center;gap:0.3rem;background:none;border:none;padding:0.5rem 0;
  font:inherit;color:var(--fg-soft);cursor:pointer;line-height:1}
.pd-trigger:hover{color:var(--fg)}
.pd-caret{transition:transform 0.18s ease}
.pd-trigger.pd-open .pd-caret{transform:rotate(180deg)}
.pd-menu{position:absolute;top:calc(100% + 0.6rem);left:0;min-width:20rem;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-lg);padding:0.5rem;
  display:flex;flex-direction:column;gap:0.15rem;opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity 0.16s ease,transform 0.16s ease;z-index:50}
.pd-menu.pd-menu-open{opacity:1;transform:translateY(0);pointer-events:auto}
.pd-item{display:flex;flex-direction:column;gap:0.15rem;padding:0.7rem 0.85rem;border-radius:10px;
  text-decoration:none;color:inherit;transition:background 0.14s ease}
.pd-item:hover,.pd-item:focus-visible{background:var(--gold-tint);outline:none}
.pd-item-name{display:flex;align-items:center;gap:0.5rem;font-weight:600;font-size:0.95rem;color:var(--fg)}
.pd-item-tagline{font-size:0.8rem;color:var(--fg-soft);line-height:1.35}
.pd-item-disabled{cursor:default} .pd-item-disabled:hover{background:none}
.pd-item-disabled .pd-item-name{opacity:0.55}
/* Badge "Próximamente" en VINO (#A02845) — fiel al bloque SPRINT 1 del Next real,
   que usa var(--wine, #A02845). NO es gold. */
.pd-badge{font-style:normal;font-size:0.62rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  padding:0.12rem 0.45rem;border-radius:999px;background:rgba(160,40,69,0.1);color:#A02845;white-space:nowrap}

/* ---------- Announcement ---------- */
.announce{background:var(--navy-deep);color:rgba(255,255,255,0.86);font-size:13px;text-align:center;
  padding:10px 36px 10px 16px;font-family:var(--font-mono);letter-spacing:0.02em;position:relative}
.announce strong{color:var(--gold-light);font-weight:500}
.announce a{color:var(--white);border-bottom:1px solid rgba(255,255,255,0.3);padding-bottom:1px;margin-left:8px;
  text-decoration:none;transition:border-color var(--dur) var(--ease)}
.announce a:hover{border-bottom-color:var(--gold)}
.announce .close{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.5);
  padding:4px;background:transparent;border:0;cursor:pointer;transition:color var(--dur) var(--ease)}
.announce .close:hover{color:white}

/* ---------- Hero ---------- */
.hero{padding:clamp(60px,7vw,96px) 0 clamp(60px,7vw,100px);position:relative;overflow:hidden}
.hero-text .eyebrow{margin-bottom:24px}
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--fg-soft);padding:6px 12px;border:1px solid var(--line-strong);border-radius:999px}
.display-xl{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:700;
  line-height:1.05;letter-spacing:-0.02em;color:var(--fg);margin:0}
.display-m{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;
  line-height:1.15;color:var(--fg);margin:0}
.text-balance{text-wrap:balance}
.body-l{font-size:1.0625rem;line-height:1.6;color:var(--fg-soft);margin:0}
.body-s{font-size:0.9375rem;line-height:1.55;color:var(--fg-soft);margin:0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
/* hero-stats (bloque SPRINT 2b-2) */
.hero-stats{display:flex;flex-wrap:wrap;gap:40px}
.hero-stat{display:flex;flex-direction:column;gap:4px}
.hero-stat-value{color:var(--product-accent)}
.hero-stat-label{color:var(--fg-mute)}

/* ---------- Footer (mínimo) ---------- */
footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:56px 0 32px;margin-top:80px;
  color:var(--fg-soft);transition:background-color var(--dur) var(--ease)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px}
.footer-bottom .region{display:flex;align-items:center;gap:12px}

/* ---------- Mobile drawer ---------- */
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);opacity:0;visibility:hidden;
  transition:opacity 0.25s ease,visibility 0.25s ease;z-index:200}
.mobile-overlay.open{opacity:1;visibility:visible}
.mobile-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(82vw,340px);background:var(--bg);
  border-left:1px solid var(--line);box-shadow:-8px 0 32px rgba(0,0,0,0.18);transform:translateX(100%);
  transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);z-index:210;display:flex;flex-direction:column;
  padding:16px 20px 28px;overflow-y:auto}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer-head{display:flex;justify-content:flex-end;margin-bottom:12px}
.mobile-drawer-close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--fg);cursor:pointer}
.mobile-drawer-close:hover{background:var(--line)}
.mobile-drawer-nav{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.mobile-drawer-nav a{display:block;padding:14px 12px;font-size:16px;color:var(--fg);text-decoration:none;
  border-radius:10px;transition:background 0.15s ease}
.mobile-drawer-nav a:hover{background:var(--line)}
.mobile-drawer-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.mobile-products-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;
  border:none;padding:0.75rem 0;font:inherit;color:inherit;cursor:pointer}
.mobile-products-caret{transition:transform 0.18s ease}
.mobile-products-toggle.open .mobile-products-caret{transform:rotate(180deg)}
.mobile-products-list{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.22s ease;overflow:hidden;padding-left:0.75rem}
.mobile-products-list.open{grid-template-rows:1fr}
.mobile-products-list>*{min-height:0}
.mobile-product-item{display:flex;align-items:center;gap:0.5rem;padding:0.6rem 0;text-decoration:none;color:inherit;font-size:0.95rem}
.mobile-product-disabled{opacity:0.55}
.mobile-product-badge{font-style:normal;font-size:0.6rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  padding:0.1rem 0.4rem;border-radius:999px;background:rgba(160,40,69,0.1);color:#A02845}

/* ---------- Responsive (copia de los breakpoints reales) ---------- */
@media (max-width:980px){
  .nav-main{display:none}
  .mobile-toggle{display:inline-flex}
  .btn-primary span{display:none}
  .login{display:inline-flex;padding:8px 12px;font-size:13px}
  .btn-primary{padding:8px 12px}
}
@media (min-width:981px){ .mobile-overlay,.mobile-drawer{display:none} }
@media (max-width:580px){
  .announce{font-size:12px}
  .hero h1{font-size:2.25rem}
  .hero-stats{gap:24px}
}
@media (prefers-reduced-motion:reduce){
  .mobile-overlay,.mobile-drawer{transition:none}
}

/* ════════════════════════════════════════════════════════════════════════
 * SECCIONES DE LA MAIN — clases portadas de globals.css (Empresa→Contacto)
 * ════════════════════════════════════════════════════════════════════════ */
section{padding:clamp(60px,7vw,96px) 0}
.section-head{max-width:760px;margin-bottom:56px}
.section-head .eyebrow{margin-bottom:20px}
.section-head .body-l{margin-top:20px;max-width:640px}
.bg-cream{background:var(--bg-alt)}
.bg-cool{background:var(--bg-cool)}

/* Typography utilities */
.display-l{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.1;letter-spacing:-0.018em;color:var(--fg);margin:0}
.heading-s{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;line-height:1.3;color:var(--fg);margin:0}

/* Grids */
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* Cards (Propuesta, Sectores) */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);position:relative}
.card:hover{border-color:var(--line-strong)}
.card h3{margin-bottom:8px}
.card .body-s{margin:0}

/* Module cards (Soluciones — patrón BusinessSuite) */
.modules-grid{grid-template-columns:repeat(4,1fr)}
.module-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.module-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.module-card.suite-placeholder{background:transparent;border-style:dashed}
.module-body{padding:24px;flex:1;display:flex;flex-direction:column}
.module-body h3{margin-bottom:8px}
.module-body .desc{color:var(--fg-soft);font-size:0.9375rem;line-height:1.55;flex:1}
.module-link{margin-top:16px;font-family:var(--font-mono);font-size:12px;color:var(--gold-dark);letter-spacing:0.04em;
  text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color var(--dur) var(--ease)}
[data-theme="dark"] .module-link{color:var(--gold-light)}
.module-link:hover{color:var(--gold)}
.module-link svg{width:12px;height:12px;transition:transform var(--dur) var(--ease)}
.module-link:hover svg{transform:translateX(3px)}
.module-link-disabled{opacity:0.5;cursor:default;font-size:0.62rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase}

/* MainEmpresa */
.main-empresa-body{max-width:720px;margin:40px auto 0}
.main-empresa-body .body-l{color:var(--fg-soft)}
/* MainSoluciones head + ideal */
.main-sol-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.main-sol-ideal{margin-top:12px;color:var(--fg-soft)}
.main-sol-ideal strong{color:var(--fg);font-weight:600}
/* MainTecnologia chips + quote */
.main-tech-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:40px auto 0;max-width:760px}
.main-tech-chip{padding:0.55rem 1.1rem;border:1px solid var(--line-strong);border-radius:var(--radius-xl);
  font-size:0.875rem;font-weight:500;color:var(--fg-soft);background:var(--surface);white-space:nowrap}
.main-tech-quote{margin:56px auto 0;max-width:760px;text-align:center;font-style:italic;color:var(--fg);
  border-left:3px solid var(--product-accent);padding-left:24px}

/* Contact section + form */
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem;padding-block:5rem}
.contact-side{display:flex;flex-direction:column;gap:1.5rem}
.contact-side .display-l{margin:0}
.contact-side .body-l{color:var(--gray-700);margin:0}
.contact-meta{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-direction:column;gap:1.25rem}
.contact-meta-item{display:flex;align-items:flex-start;gap:0.875rem}
.contact-meta-item .icon{width:20px;height:20px;color:var(--gold);flex-shrink:0;margin-top:2px}
.contact-meta-item .label{display:block;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--gray-600);margin-bottom:0.125rem}
.contact-meta-item .value{display:block;font-size:0.95rem;color:var(--gray-900);font-weight:500}
.form{display:flex;flex-direction:column;gap:1.25rem;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr;gap:1.25rem}
.form-field{display:flex;flex-direction:column;gap:0.5rem}
.form-field.single{grid-column:1/-1}
.form-field .label{font-size:0.875rem;font-weight:500;color:var(--fg)}
.form-field .req{color:var(--gold-dark);font-size:0.75rem;font-weight:400;margin-left:0.25rem}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:0.75rem 0.875rem;border:1px solid var(--line);
  border-radius:var(--radius-md);font-size:0.95rem;color:var(--fg);background:var(--bg);font-family:inherit;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 12%,transparent)}
.form-field input[aria-invalid="true"]{border-color:var(--gold-dark)}
.form-field textarea{resize:vertical;min-height:100px}
.form-note{font-size:0.8125rem;color:var(--gray-600);margin:0}
.form-field .form-note[role="alert"]{color:var(--gold-dark)}
.checkbox-row{display:flex;flex-direction:column;gap:0.375rem}
.checkbox-row .label{display:flex;align-items:flex-start;gap:0.625rem;cursor:pointer;font-size:0.875rem;color:var(--fg);font-weight:400;line-height:1.5}
.checkbox-row input[type="checkbox"]{width:18px;height:18px;margin-top:2px;accent-color:var(--navy);flex-shrink:0}
.form-submit{display:flex;flex-direction:column;gap:0.75rem;margin-top:0.5rem}
.form-submit .btn{width:100%}
.form-success,.form-error{display:flex;flex-direction:column;gap:1rem;text-align:center;padding:2rem 0}
.form-success .btn,.form-error .btn{align-self:center}

/* Responsive de secciones */
@media (min-width:640px){.form-row{grid-template-columns:1fr 1fr}.form-submit{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem}.form-submit .btn{width:auto}}
@media (min-width:768px){.contact-grid{grid-template-columns:1fr 1.2fr;gap:4rem;padding-block:7rem}.form{padding:2.5rem}}
@media (max-width:1100px){.modules-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.modules-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.main-tech-quote{padding-left:16px}}

/* ════════════════════════════════════════════════════════════════════════
 * FOOTER COMPLETO — grid 4 columnas (portado de globals.css)
 * ════════════════════════════════════════════════════════════════════════ */
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px;margin-bottom:40px}
.footer-brand p{margin-top:16px;font-size:14px;line-height:1.6;max-width:320px}
.footer-socials{display:flex;gap:12px;margin-top:20px}
.footer-socials a{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);background:transparent;border:1px solid var(--line-strong);color:var(--fg-soft);
  transition:all var(--dur) var(--ease)}
.footer-socials a:hover{color:var(--fg);border-color:var(--navy)}
.footer-socials svg{width:16px;height:16px}
.footer-heading{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--fg);margin:0 0 16px}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--fg-soft);text-decoration:none;transition:color var(--dur) var(--ease)}
.footer-col a:hover{color:var(--fg)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:32px;border-top:1px solid var(--line);font-size:13px}
.footer-bottom .region{display:flex;align-items:center;gap:12px}
.footer-bottom select{background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:6px 10px;font-size:13px;color:var(--fg);font-family:inherit;cursor:pointer}
.footer-disclaimer{margin-top:24px;font-size:12px;color:var(--fg-mute);line-height:1.6;max-width:920px}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:580px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}}

/* ════════════════════════════════════════════════════════════════════════
 * SECCIONES DE HEALTH — portadas literalmente de globals.css (líneas 997-2554)
 * Hero/mockup, trust-bar, diagram, módulos, benefits, zigzag, security,
 * usecases, audiences, services, process, faq, cta-final
 * ════════════════════════════════════════════════════════════════════════ */
  .hero {
    padding: clamp(60px, 7vw, 96px) 0 clamp(60px, 7vw, 100px);
    position: relative;
    overflow: hidden;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .hero-text .eyebrow { margin-bottom: 24px; }

  /* Typography utilities used by hero */
  .eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-soft);
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
  }

  .display-xl {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--fg);
    margin: 0;
  }
  .text-balance { text-wrap: balance; }
  .text-pretty { text-wrap: pretty; }

  .hero h1 { margin-bottom: 28px; }
  .hero h1 .accent {
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    font-weight: 500;
  }
  [data-theme="dark"] .hero h1 .accent {
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero p.lead {
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--fg-soft);
    margin-bottom: 36px;
    max-width: 540px;
  }
  .hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
  }
  .hero-ctas .btn { padding: 12px 22px; font-size: 14px; }
  .btn-secondary {
    background: transparent;
    color: var(--fg);
    border-color: var(--line-strong);
  }
  .btn-secondary:hover {
    background: var(--bg-cool);
    border-color: var(--navy);
  }
  [data-theme="dark"] .btn-secondary:hover { background: var(--surface); }

  .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-mute);
    letter-spacing: 0.06em;
  }
  .hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
  .hero-trust span::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    display: inline-block;
  }

  .hero-visual {
    position: relative;
    aspect-ratio: 1.2 / 1;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-bg-grid {
    position: absolute;
    inset: -100px;
    background-image:
      linear-gradient(to right, var(--navy-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--navy-line) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    z-index: 0;
    opacity: 0.7;
    pointer-events: none;
  }
  .hero-visual-placeholder {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg-cool) 100%);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
    color: var(--fg-mute);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
  }
  .hero-visual-placeholder svg { width: 64px; height: 64px; color: var(--gold); opacity: 0.7; }
  [data-theme="dark"] .hero-visual-placeholder {
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg-alt) 100%);
  }

  /* ---------- Dashboard mockup ---------- */
  .mockup {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: perspective(1600px) rotateY(-3deg) rotateX(2deg);
    transition: transform 600ms var(--ease);
    width: 100%;
    z-index: 1;
  }
  .mockup:hover { transform: perspective(1600px) rotateY(-1.5deg) rotateX(1deg); }
  .mockup-chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-cool);
  }
  .mockup-dots { display: flex; gap: 6px; }
  .mockup-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-200); }
  .mockup-url {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-mute);
    letter-spacing: 0.05em;
  }
  .mockup-body { padding: 22px; }

  .mockup-row { display: flex; gap: 14px; }
  .mockup-side {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .mockup-side .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--fg-soft);
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
  }
  .mockup-side .nav-item.active { background: var(--navy); color: white; }
  [data-theme="dark"] .mockup-side .nav-item.active { background: var(--gold); color: var(--navy-deep); }
  .mockup-side .nav-item i { width: 5px; height: 5px; border-radius: 1px; background: currentColor; opacity: 0.5; }
  .mockup-side .nav-item.active i { opacity: 1; }

  .mockup-main { flex: 1; display: flex; flex-direction: column; gap: 14px; }
  .mockup-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
  }
  .stat-card .stat-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--fg-mute); text-transform: uppercase; }
  .stat-card .stat-value { font-size: 18px; font-weight: 600; margin-top: 4px; color: var(--fg); letter-spacing: -0.02em; }
  .stat-card .stat-trend { font-size: 10px; color: #0E9F6E; font-family: var(--font-mono); margin-top: 2px; }
  .stat-card.gold .stat-value { color: var(--gold-dark); }
  [data-theme="dark"] .stat-card.gold .stat-value { color: var(--gold-light); }

  .mockup-chart {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    min-height: 130px;
  }
  .chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
  .chart-head .label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--fg-mute); text-transform: uppercase; }
  .chart-head .title { font-size: 12px; font-weight: 500; margin-top: 2px; color: var(--fg); }
  .chart-head .badge {
    font-family: var(--font-mono); font-size: 9px;
    background: var(--gold-tint); color: var(--gold-dark);
    padding: 2px 6px; border-radius: 3px;
    letter-spacing: 0.05em;
  }
  [data-theme="dark"] .chart-head .badge { color: var(--gold-light); }

  .chart-svg { width: 100%; height: 80px; }

  .mockup-table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .mockup-table .table-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr 0.6fr;
    gap: 10px;
    padding: 8px 12px;
    font-size: 10px;
    border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .mockup-table .table-row:last-child { border-bottom: none; }
  .mockup-table .table-row.head { font-family: var(--font-mono); color: var(--fg-mute); letter-spacing: 0.08em; text-transform: uppercase; font-size: 8px; background: var(--bg-cool); }
  .mockup-table .table-row .id { font-family: var(--font-mono); color: var(--fg-soft); }
  .mockup-table .table-row .status { display: inline-flex; align-items: center; gap: 5px; }
  .mockup-table .table-row .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
  .mockup-table .table-row .status.ok::before { background: #0E9F6E; }
  .mockup-table .table-row .status.warn::before { background: var(--gold); }

  /* Dark mode specific fine-tuning from HTML v2.0 */
  [data-theme="dark"] .mockup-side .nav-item.active { color: var(--navy-deep); }
  [data-theme="dark"] .stat-card .stat-value,
  [data-theme="dark"] .chart-head .title { color: var(--fg); }
  [data-theme="dark"] .mockup-table .table-row span { color: var(--fg); }
  [data-theme="dark"] .mockup-table .table-row.head { color: var(--fg-mute); background: rgba(255,255,255,0.03); }

  @media (max-width: 980px) {
    .mockup { transform: none; }
  }

  /* ---------- Trust Bar ---------- */
  .trust-bar {
    padding: 28px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-cool);
    transition: background-color var(--dur) var(--ease);
  }
  [data-theme="dark"] .trust-bar { background: var(--bg-alt); }
  .trust-bar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 36px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .trust-bar-inner span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .trust-bar-inner span::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    display: inline-block;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .hero-grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }
    .hero-visual { min-height: 280px; aspect-ratio: 1.4 / 1; }
    .trust-bar-inner { gap: 12px 24px; }
  }
  @media (max-width: 580px) {
    .announce { font-size: 12px; padding: 8px 36px 8px 12px; }
    .announce .close { right: 8px; }
    .hero h1 { font-size: 2.25rem; }
    .hero-ctas .btn { padding: 10px 16px; font-size: 13px; }
  }
  /* ════════════════════════════════════════════════════════════════════════
   PRODUCTO · COMPARADOR (Fase B.2.a) — tabla de características × planes
   Convención prod-compare-* · reutiliza variables y --product-accent.
   Server Component. Pegar en @layer components, tras el bloque prod-planes-*.
   ════════════════════════════════════════════════════════════════════════ */

.prod-compare { padding: 0 0 96px; background: var(--bg); }
.prod-compare-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.prod-compare-head .lead { margin-top: 16px; }

/* Scroll horizontal en pantallas chicas (la tabla no se rompe ni desborda). */
.prod-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
}

.prod-compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}

/* Encabezado de columnas */
.prod-compare-table thead th {
  padding: 18px 16px;
  text-align: center;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-cool);
  border-bottom: 1px solid var(--navy-line-strong);
  white-space: nowrap;
}
.prod-compare-corner {
  text-align: left !important;
  font-weight: 500 !important;
  color: var(--fg-mute) !important;
  font-size: 12px;
}

/* Encabezado de grupo (fila de sección) */
.prod-compare-group th {
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--product-accent);
  background: var(--product-accent-tint);
  border-bottom: 1px solid var(--navy-line);
}

/* Filas de característica */
.prod-compare-table tbody tr:not(.prod-compare-group) {
  border-bottom: 1px solid var(--navy-line);
}
.prod-compare-table tbody tr:not(.prod-compare-group):last-child {
  border-bottom: none;
}
.prod-compare-feature {
  padding: 14px 16px;
  text-align: left;
  font-weight: 500;
  color: var(--fg-soft);
  min-width: 200px;
}
.prod-compare-table td {
  padding: 14px 16px;
  text-align: center;
  color: var(--fg);
}

/* Celdas: sí / no / texto */
.prod-compare-yes,
.prod-compare-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.prod-compare-yes { background: var(--product-accent-tint); color: var(--product-accent); }
.prod-compare-yes svg { width: 13px; height: 13px; }
.prod-compare-no { color: var(--gray-300); }
.prod-compare-no svg { width: 12px; height: 12px; }
.prod-compare-text { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }

.prod-compare-note {
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--fg-mute);
  font-style: italic;
}

@media (max-width: 600px) {
  .prod-compare { padding: 0 0 64px; }
  .prod-compare-table { font-size: 13px; }
  .prod-compare-feature { min-width: 160px; }
}

/* ============================================================
   GALILEO PASO 13 — Problem + Health Platform
   Portado de _design/Galileo Landing.html v2.0
   ============================================================ */

@layer components {
  /* ---------- Section utilities ---------- */
  section { padding: clamp(60px, 7vw, 96px) 0; }
  .section-head {
    max-width: 760px;
    margin-bottom: 56px;
  }
  .section-head .eyebrow { margin-bottom: 20px; }
  .section-head .body-l { margin-top: 20px; max-width: 640px; }

  /* ---------- Background variants ---------- */
  .bg-cream { background: var(--bg-alt); }
  .bg-cool { background: var(--bg-cool); }
  .bg-navy { background: var(--navy-deep); color: var(--white); }
  .bg-navy * { color: inherit; }

  /* ---------- Typography utilities ---------- */
  .display-l {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: var(--fg);
    margin: 0;
  }
  .display-m {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--fg);
    margin: 0;
  }
  .heading-s {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fg);
    margin: 0;
  }
  .body-l {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--fg-soft);
    margin: 0;
  }
  .body-s {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--fg-soft);
    margin: 0;
  }

  /* ---------- Grid base ---------- */
  .grid {
    display: grid;
    gap: 24px;
  }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  /* ---------- Cards (Problem) ---------- */
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
    position: relative;
  }
  .card:hover { border-color: var(--line-strong); }
  .card .icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 18px;
    color: var(--navy);
    background: var(--bg-cool);
  }
  [data-theme="dark"] .card .icon {
    color: var(--gold-light);
    background: var(--bg-alt);
  }
  .card .icon svg { width: 18px; height: 18px; stroke-width: 1.5; }
  .card h3 { margin-bottom: 8px; }
  .card .body-s { margin: 0; }
  .card-num {
    position: absolute;
    top: 28px;
    right: 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-mute);
    letter-spacing: 0.06em;
  }

  /* ---------- Module cards (Health Platform) ---------- */
  .modules-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .module-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .module-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
  }
  .module-img {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--navy-deep), var(--navy-soft));
    position: relative;
    overflow: hidden;
    color: var(--gold-light);
  }
  .module-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .module-img-tag {
    position: absolute;
    bottom: 12px;
    left: 16px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gold-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 1;
  }
  .module-img-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--gold-light);
    opacity: 0.85;
  }
  .module-img-glyph svg {
    width: 56px;
    height: 56px;
    stroke-width: 1;
  }
  .module-card.suite .module-img {
    background: linear-gradient(135deg, #2a2418, var(--gold-dark));
  }
  .module-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .module-body h3 { margin-bottom: 8px; }
  .module-body .desc {
    color: var(--fg-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
    flex: 1;
  }
  .module-link {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold-dark);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--dur) var(--ease);
  }
  [data-theme="dark"] .module-link { color: var(--gold-light); }
  .module-link:hover { color: var(--gold); }
  .module-link svg {
    width: 12px;
    height: 12px;
    transition: transform var(--dur) var(--ease);
  }
  .module-link:hover svg { transform: translateX(3px); }

  /* ---------- Responsive ---------- */
  @media (max-width: 1100px) {
    .modules-grid { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 980px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .modules-grid { grid-template-columns: 1fr !important; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr; }
    .card-num { top: 20px; right: 20px; }
  }
}

/* ============================================================
   GALILEO PASO 14 — Solution + BusinessSuite
   Portado de _design/Galileo Landing.html v2.0
   ============================================================ */

@layer components {
  /* ---------- Diagram wrap (Solution) ---------- */
  .diagram-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 48px 32px;
    margin-top: 24px;
    position: relative;
    overflow: hidden;
  }
  .diagram-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, var(--navy-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--navy-line) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
  }
  .diagram-svg {
    width: 100%;
    height: auto;
    max-width: 900px;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* ---------- Diagram legend ---------- */
  .diagram-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 32px;
    margin-top: 32px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-soft);
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
  }
  .diagram-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .diagram-legend i {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid currentColor;
  }
  .diagram-legend i.actor {
    background: var(--surface);
    border-color: var(--navy);
  }
  .diagram-legend i.core {
    background: var(--navy);
    border-color: var(--gold);
  }
  .diagram-legend i.infra {
    background: transparent;
    border-color: var(--gold);
    border-style: dashed;
  }

  /* ---------- Suite module-card variant ---------- */
  .module-card.suite .module-img {
    background: linear-gradient(135deg, #2a2418, var(--gold-dark));
  }
  .module-card.suite-placeholder {
    background: transparent;
    border-style: dashed;
  }
  .module-card.suite-placeholder .module-img {
    background: var(--bg-cool);
  }
  .module-card.suite-placeholder .module-img-glyph {
    color: var(--gold-dark);
  }
  [data-theme="dark"] .module-card.suite-placeholder .module-img {
    background: var(--bg-alt);
  }
  [data-theme="dark"] .module-card.suite-placeholder .module-img-glyph {
    color: var(--gold-light);
  }
  .module-card.suite-placeholder .module-img-tag {
    color: var(--fg-mute);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .diagram-wrap { padding: 24px 16px; }
  }
}

/* ============================================================
   GALILEO PASO 14.5a — Benefits section
   Portado de _design/Galileo Landing.html v2.0 lineas 2093-2113
   ============================================================ */

@layer components {
  /* ---------- Benefits grid ---------- */
  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 48px;
    margin-top: 48px;
  }
  .benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .benefit-item .num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold-dark);
    letter-spacing: 0.04em;
    font-weight: 500;
    flex-shrink: 0;
    padding-top: 2px;
  }
  [data-theme="dark"] .benefit-item .num {
    color: var(--gold-light);
  }
  .benefit-item > div {
    flex: 1;
  }
  .benefit-item h3 {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--fg);
    margin-bottom: 6px;
    line-height: 1.35;
  }
  .benefit-item p {
    font-size: 0.9375rem;
    color: var(--fg-soft);
    line-height: 1.55;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .benefits-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 32px;
    }
  }
  @media (max-width: 640px) {
    .benefits-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
}

/* ============================================================
   GALILEO PASO 14.5b — Differentiators (Zigzag)
   Portado de _design/Galileo Landing.html v2.0 lineas 2114-2313
   ============================================================ */

@layer components {
  /* ---------- Zigzag layout ---------- */
  .zigzag-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 64px 0;
    border-bottom: 1px solid var(--line);
  }
  .zigzag-item:last-child {
    border-bottom: none;
  }
  .zigzag-item:nth-child(even) > div:first-child {
    order: 2;
  }
  .zigzag-item:nth-child(even) > div:last-child {
    order: 1;
  }

  .zigzag-item .num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold-dark);
    letter-spacing: 0.06em;
    font-weight: 500;
    display: block;
    margin-bottom: 16px;
    text-transform: uppercase;
  }
  [data-theme="dark"] .zigzag-item .num {
    color: var(--gold-light);
  }

  .zigzag-item h3.heading-l {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--fg);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }

  .zigzag-item p.body-l {
    font-size: 1rem;
    color: var(--fg-soft);
    line-height: 1.65;
    max-width: 540px;
  }

  /* ---------- Visual column with SVG ---------- */
  .visual-col {
    display: flex;
    justify-content: center;
  }
  .visual {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .visual svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  [data-theme="dark"] .visual {
    background: var(--bg-alt);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .zigzag-item {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 48px 0;
    }
    .zigzag-item:nth-child(even) > div:first-child {
      order: 0;
    }
    .zigzag-item:nth-child(even) > div:last-child {
      order: 0;
    }
  }
}

/* ============================================================
   GALILEO PASO 15 — Security + Audiences
   Portado de _design/Galileo Landing.html v2.0
   ============================================================ */

@layer components {
  /* ---------- Security grid ---------- */
  .security-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 48px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .security-item {
    padding: 32px 28px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background var(--dur) var(--ease);
  }
  .security-item:hover {
    background: var(--bg-cool);
  }
  .security-item .icon {
    color: var(--gold-dark);
    width: 28px;
    height: 28px;
  }
  [data-theme="dark"] .security-item .icon {
    color: var(--gold-light);
  }
  .security-item .icon svg {
    width: 100%;
    height: 100%;
  }
  .security-item h3 {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--fg);
    line-height: 1.3;
  }
  .security-item h3 span {
    color: inherit;
  }
  .security-item p {
    font-size: 0.9375rem;
    color: var(--fg-soft);
    line-height: 1.55;
  }

  /* ---------- Compliance badges ---------- */
  .compliance-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
    justify-content: center;
  }
  .compliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-soft);
    background: var(--surface);
  }
  .compliance-badge sup {
    color: var(--gold-dark);
    font-size: 10px;
  }

  .footer-disclaimer {
    text-align: center;
    margin-top: 24px;
    font-size: 12px;
    color: var(--fg-mute);
    font-style: italic;
  }

  /* ---------- Audiences grid ---------- */
  .audiences-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 48px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .audience {
    padding: 32px 24px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background var(--dur) var(--ease);
  }
  .audience:hover {
    background: var(--bg-cool);
  }
  .audience .icon {
    color: var(--gold-dark);
    width: 22px;
    height: 22px;
  }
  [data-theme="dark"] .audience .icon {
    color: var(--gold-light);
  }
  .audience .icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
  }
  .audience h3 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--fg);
    line-height: 1.3;
  }
  .audience .body-s {
    font-size: 0.875rem;
    color: var(--fg-soft);
    line-height: 1.5;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .security-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .audiences-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 540px) {
    .security-grid {
      grid-template-columns: 1fr;
    }
    .audiences-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* ============================================================
   GALILEO PASO 16 — Use Cases (responsive hybrid)
   Portado de _design/Galileo Landing.html v2.0 lineas 2365-2497
   Desktop (>= 1024px): 5 casos siempre expandidos, no toggle.
   Mobile/tablet (< 1024px): acordeón exclusivo, case 01 abierto por defecto.
   ============================================================ */

@layer components {
  .usecase-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--line);
    margin-top: 48px;
  }
  .usecase {
    border-bottom: 1px solid var(--line);
    transition: background var(--dur) var(--ease);
  }
  .usecase-head {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 24px;
    padding: 28px 0;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
  }
  .usecase-num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-mute);
    letter-spacing: 0.1em;
  }
  .usecase.active .usecase-num { color: var(--gold-dark); }
  [data-theme="dark"] .usecase.active .usecase-num { color: var(--gold-light); }
  .usecase-title {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--fg);
  }
  .usecase-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-soft);
    transition: all var(--dur) var(--ease);
  }
  .usecase.active .usecase-toggle {
    background: var(--navy);
    color: white;
    border-color: var(--navy);
  }
  [data-theme="dark"] .usecase.active .usecase-toggle {
    background: var(--gold);
    color: var(--navy-deep);
    border-color: var(--gold);
  }
  .usecase-toggle svg {
    transition: transform var(--dur) var(--ease);
    width: 14px;
    height: 14px;
  }
  .usecase.active .usecase-toggle svg { transform: rotate(180deg); }
  .usecase-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 400ms var(--ease);
  }
  .usecase.active .usecase-body { grid-template-rows: 1fr; }
  .usecase-inner {
    overflow: hidden;
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 24px;
    align-items: flex-start;
  }
  .usecase.active .usecase-inner { padding-bottom: 32px; }
  .usecase-inner > .spacer { grid-column: 1; }
  .usecase-desc {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--fg-soft);
  }
  .usecase-desc ul {
    list-style: none;
    margin-top: 16px;
    padding: 0;
  }
  .usecase-desc li {
    padding: 8px 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--fg-soft);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .usecase-desc li::before {
    content: "→";
    color: var(--gold);
    font-family: var(--font-display);
  }
  .usecase-visual {
    background: linear-gradient(135deg, var(--navy-deep), var(--navy-soft));
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    color: white;
    display: flex;
    align-items: flex-end;
    padding: 24px;
  }
  .usecase-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  .usecase-visual-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    position: relative;
  }

  /* Mobile: tighter columns, stacked inner */
  @media (max-width: 800px) {
    .usecase-head { grid-template-columns: 60px 1fr auto; }
    .usecase-num { font-size: 11px; }
    .usecase-title { font-size: 1.125rem; }
    .usecase-inner { grid-template-columns: 1fr; }
    .usecase-inner > .spacer { display: none; }
  }

  /* Desktop: all 5 cases permanently expanded — no accordion behavior */
  @media (min-width: 1024px) {
    .usecase-body { grid-template-rows: 1fr !important; }
    .usecase-head {
      cursor: default;
      pointer-events: none;
    }
    .usecase-toggle { display: none; }
    .usecase-inner { padding-bottom: 32px; }
  }
}

/* ============================================================
   PASO 17 — SERVICES + PROCESS
   ============================================================ */

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 4rem;
  }
}
.service-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
}
.service-row .num {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-muted, #6B7280);
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
}
.service-row h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.service-row p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #4B5563);
}

/* Process - Mobile: vertical timeline (default) */
.process {
  margin-top: 3rem;
}
.process-track {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}
.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
}
.process-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary, #4A1020);
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.process-step h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}
.process-step p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #4B5563);
}

/* Process - Desktop: horizontal timeline */
@media (min-width: 1024px) {
  .process-track {
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
  }
  .process-track::before {
    content: '';
    position: absolute;
    top: 1.375rem;
    left: 5%;
    right: 5%;
    height: 2px;
    background: var(--color-border, #E5E7EB);
    z-index: 0;
  }
  .process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
    background: var(--color-bg, white);
    padding: 0 0.5rem;
  }
  .process-step h3 {
    margin-top: 1rem;
  }
  .process-step p {
    max-width: 14rem;
  }
}


/* ============================================================
   PASO 18.A — FAQ + CTA Final
   ============================================================ */
@layer components {

  /* ---------- Container tight ---------- */
  .container-tight {
    max-width: var(--container-tight, 1080px);
    margin: 0 auto;
    padding-inline: 24px;
  }

  /* ---------- FAQ ---------- */
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 48px;
  }

  .faq-item {
    background: var(--white);
    border: 1px solid var(--navy-line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
  }

  .faq-item:hover {
    border-color: var(--gold);
  }

  .faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--navy-deep);
    line-height: 1.5;
  }

  .faq-q:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }

  .plus {
    flex-shrink: 0;
    position: relative;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
  }

  .plus::before,
  .plus::after {
    content: '';
    position: absolute;
    background: var(--navy-deep);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .plus::before {
    width: 14px;
    height: 2px;
  }

  .plus::after {
    width: 2px;
    height: 14px;
  }

  .plus-open {
    transform: rotate(45deg);
  }

  .faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }

  .faq-a-open {
    grid-template-rows: 1fr;
  }

  .faq-a-inner {
    overflow: hidden;
    padding: 0 24px;
    color: var(--navy-soft);
    font-size: 15px;
    line-height: 1.65;
  }

  .faq-a-open .faq-a-inner {
    padding: 0 24px 20px 24px;
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-a,
    .plus {
      transition: none;
    }
  }

  /* ---------- CTA Final ---------- */
  .cta-final {
    background: var(--navy-deep);
    color: var(--white);
    padding: 96px 0;
    position: relative;
    overflow: hidden;
  }

  .cta-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse at top,
      rgba(184, 147, 90, 0.15) 0%,
      transparent 60%
    );
    pointer-events: none;
  }

  .cta-final-inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }

  .cta-final-inner h2 {
    color: var(--white);
  }

  .cta-final-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 17px;
    line-height: 1.7;
    margin-top: 24px;
  }

  .cta-final-inner .hero-ctas {
    justify-content: center;
    margin-top: 40px;
  }

  .cta-final-inner .btn-secondary {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .cta-final-inner .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
  }

  .trust-line {
    margin-top: 24px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
  }

  /* ---------- BTN Gold ---------- */
  .btn-gold {
    background: var(--gold);
    color: var(--navy-deep);
    border: 1px solid var(--gold);
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .btn-gold:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
  }

  /* ---------- Eyebrow modifier (used only by CTA-final) ---------- */
  .eyebrow.no-line {
    border: none;
    padding: 0;
  }

  @media (max-width: 768px) {
    .cta-final {
      padding: 64px 0;
    }
    .cta-final-inner .hero-ctas {
      flex-direction: column;
      gap: 12px;
    }
  }
}

/* ============================================================
   GALILEO PASO 19.A — Planilla Landing (Producto)
   Port fiel de globals.css del repo galileosys-web, líneas 2922-3230
   ("PRODUCTO SHELL" + "PRODUCTO SHELL Fase A.2").
   
   Convenciones:
   - .planilla-page sobrescribe --product-accent (token) a vino #A02845.
   - Clases .prod-* son shell reutilizable: cuando llegue COCO CRM / MERITUM /
     SYS, solo cambia --product-accent en el contenedor raíz del producto.
   - .icon.pain reutiliza el wrapper .card .icon (ya definido en PASO 13) y
     solo sobrescribe color + background con specificity .planilla-page > .card.
   
   El comentario del repo Next decía "Planilla usa cyan"; eso era de un draft
   anterior — el color real es vino. Corregido aquí (decisión δ aprobada).
   ============================================================ */

@layer components {
  /* ---------- Token override por producto ----------
     :root ya define --product-accent: var(--gold) como default. Aquí sólo
     redefinimos los 3 tokens dentro de .planilla-page (alcance scoped). */
  .planilla-page {
    --product-accent: #A02845;
    --product-accent-soft: #C13B5A;
    --product-accent-tint: rgba(160, 40, 69, 0.08);
  }

  /* ---------- prod-hero: hero de producto (variante del hero base) ---------- */
  .prod-hero {
    padding: clamp(56px, 6.5vw, 92px) 0 clamp(56px, 6.5vw, 96px);
    position: relative;
    overflow: hidden;
  }
  .prod-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 72px;
    align-items: center;
  }
  .prod-hero-text .eyebrow { margin-bottom: 22px; }
  .prod-hero h1 { margin-bottom: 24px; }
  .prod-hero h1 .accent {
    background: linear-gradient(90deg, var(--product-accent), var(--product-accent-soft));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    font-weight: 500;
  }
  .prod-hero p.lead {
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--fg-soft);
    margin-bottom: 32px;
    max-width: 540px;
  }
  .prod-hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
  }
  .prod-hero-ctas .btn { padding: 12px 22px; font-size: 14px; }

  /* Botón con el acento del producto (CTA principal de producto) */
  .btn-product {
    background: var(--product-accent);
    color: var(--white);
    border: 1px solid var(--product-accent);
  }
  .btn-product:hover {
    background: var(--product-accent-soft);
    border-color: var(--product-accent-soft);
  }

  .prod-hero-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-mute);
    letter-spacing: 0.04em;
  }
  .prod-hero-flags span { display: inline-flex; align-items: center; gap: 8px; }
  .prod-hero-flags svg { width: 15px; height: 15px; stroke: var(--product-accent); }

  /* Visual del hero de producto: tarjeta-mockup con acento */
  .prod-hero-visual {
    position: relative;
    aspect-ratio: 1.15 / 1;
    min-height: 340px;
    border-radius: var(--radius-xl);
    background: linear-gradient(150deg, var(--navy), var(--navy-soft));
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 32px;
  }
  .prod-hero-visual::before {
    content: "";
    position: absolute;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--product-accent-tint), transparent 70%);
    top: -70px; right: -50px;
    opacity: 0.9;
  }
  .prod-mini-card {
    position: relative;
    background: rgba(255, 255, 255, 0.97);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.3);
    padding: 16px;
    max-width: 300px;
  }
  .prod-mini-card.right { margin-left: auto; max-width: 260px; }
  .prod-mini-card .mc-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
  }
  .prod-mini-card .mc-title {
    font-size: 13px; font-weight: 600; color: var(--navy);
    font-family: var(--font-display);
  }
  .prod-mini-card .mc-badge {
    font-size: 11px; font-weight: 600;
    background: rgba(22, 163, 74, 0.12); color: #16a34a;
    padding: 3px 10px; border-radius: 999px;
  }
  .prod-mini-card .mc-row {
    display: flex; justify-content: space-between;
    font-size: 13px; color: var(--gray-600); padding: 2px 0;
  }
  .prod-mini-card .mc-row b { color: var(--navy); }
  .prod-mini-card .mc-countries { display: flex; gap: 14px; font-size: 13px; color: var(--gray-600); }
  .prod-mini-card .mc-countries span { display: inline-flex; align-items: center; gap: 5px; }
  .prod-mini-card .mc-countries span::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--product-accent); display: inline-block;
  }

  /* ---------- prod-statbar: barra de confianza con números ---------- */
  .prod-statbar {
    padding: 36px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .prod-statbar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
  }
  .prod-stat-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    color: var(--product-accent);
    line-height: 1;
  }
  .prod-stat-label { font-size: 13px; color: var(--fg-soft); margin-top: 6px; }
  .prod-statbar-note { text-align: center; color: var(--fg-mute); font-size: 13px; margin-top: 20px; }

  /* ---------- prod-pain: tarjetas de dolor (reusa .card con acento) ----------
     .card .icon ya está en PASO 13 con width:36px/svg:18px y bg-cool/navy.
     Aquí solo sobrescribimos color + background para los iconos .pain dentro
     de Planilla. La specificity .planilla-page > .card > .icon.pain gana. */
  .planilla-page .card .icon.pain {
    color: var(--product-accent);
    background: var(--product-accent-tint);
  }
  [data-theme="dark"] .planilla-page .card .icon.pain {
    color: var(--product-accent-soft);
    background: var(--bg-alt);
  }

  /* ---------- prod-proof: prueba social sin testimonios ---------- */
  .prod-proof-item { padding: 4px; }
  .prod-proof-item .icon.pain {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; margin-bottom: 14px;
    color: var(--product-accent); background: var(--product-accent-tint);
  }
  .prod-proof-item .icon.pain svg { width: 20px; height: 20px; }
  [data-theme="dark"] .prod-proof-item .icon.pain {
    color: var(--product-accent-soft); background: var(--bg-alt);
  }
  .prod-proof-item h3 { margin-bottom: 8px; }
  .prod-proof-item .body-s { margin: 0; }

  /* ---------- prod-profile: tarjetas de perfil (Empresas / Burós) ---------- */
  .prod-profile-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 36px;
    transition: border-color var(--dur) var(--ease);
  }
  .prod-profile-card:hover { border-color: var(--product-accent); }
  .prod-profile-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--product-accent);
    background: var(--product-accent-tint);
    padding: 5px 12px; border-radius: 999px;
  }
  [data-theme="dark"] .prod-profile-tag { color: var(--product-accent-soft); }
  .prod-profile-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
  .prod-profile-bullets li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.95rem; color: var(--fg-soft); line-height: 1.5;
  }
  .prod-profile-bullets svg {
    width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
    stroke: var(--product-accent);
  }
  [data-theme="dark"] .prod-profile-bullets svg { stroke: var(--product-accent-soft); }

  /* ---------- prod-objection: Q&A de objeciones ---------- */
  .prod-objection {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
  }
  .prod-objection-q {
    font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 600; color: var(--fg);
    margin: 0 0 10px;
    display: flex; align-items: flex-start; gap: 10px;
  }
  .prod-objection-q::before {
    content: "?";
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--product-accent); color: var(--white);
    font-size: 13px; font-weight: 700;
  }

  /* ---------- prod-cta: banda de cierre ---------- */
  .prod-cta { padding: 0; }
  .prod-cta-inner {
    background: linear-gradient(150deg, var(--navy), var(--navy-soft));
    border-radius: var(--radius-xl);
    padding: clamp(40px, 5vw, 64px);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .prod-cta-inner::before {
    content: "";
    position: absolute;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, var(--product-accent-tint), transparent 70%);
    top: -120px; right: -80px;
  }
  .prod-cta-inner h2 { color: var(--white); position: relative; }
  .prod-cta-inner .lead {
    color: rgba(255, 255, 255, 0.82);
    max-width: 560px; margin: 16px auto 28px;
    position: relative;
  }
  .prod-cta-actions {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    position: relative;
  }
  .btn-cta-ghost {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  .btn-cta-ghost:hover { background: rgba(255, 255, 255, 0.1); }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .prod-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .prod-hero-visual { min-height: 280px; aspect-ratio: 1.5 / 1; }
    .prod-statbar-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  }
  @media (max-width: 680px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr; }
  }
  @media (max-width: 580px) {
    .prod-hero h1 { font-size: 2.25rem; }
    .prod-hero-ctas .btn { padding: 10px 16px; font-size: 13px; }
  }
}
/* ===== fin PASO 19.A — Planilla Landing ===== */

/* ============================================================
   GALILEO PASO 19.B — Planilla Planes (Fase B.1)
   Port fiel de globals.css del repo galileosys-web, líneas 541-952.
   
   Cubre:
   - Selector de 3 rutas (prod-route-tab)
   - Cycle toggle mensual/anual (prod-cycle-*)
   - Tarjetas de plan (prod-plan-card, prod-plan-*)
   - Highlights Buró (prod-buro-highlights)
   - Tarjetas Partner (prod-partner-*)
   - Calculadora (prod-calc, slider, bandas, resultado)
   - Modal demo + overlay (prod-modal-*, prod-planes-cta)
   - Disclaimer + responsive
   
   El bloque prod-compare-* (Fase B.2.a) ya está en el archivo
   (líneas ~708-806), portado durante Fase A. NO se duplica aquí.
   ============================================================ */

@layer components {
  /* ---------- Sección principal ---------- */
  .prod-planes { padding: 72px 0 96px; background: var(--bg); }
  .prod-planes-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
  .prod-planes-head .lead { margin-top: 16px; }

  /* ---------- Selector de ruta (3 caminos, siempre visible) ---------- */
  .prod-planes-routes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 720px;
    margin: 0 auto 48px;
    padding: 6px;
    background: var(--bg-cool);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius-lg);
  }
  .prod-route-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 12px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--fg-soft);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    font-family: var(--font-body);
  }
  .prod-route-tab:hover { color: var(--fg); }
  .prod-route-tab.is-active {
    background: var(--bg);
    color: var(--fg);
    box-shadow: 0 1px 3px var(--navy-line-strong);
  }
  .prod-route-tab.is-active .prod-route-tab-label { color: var(--product-accent); }
  .prod-route-tab-label { font-weight: 600; font-size: 15px; }
  .prod-route-tab-hint { font-size: 12px; color: var(--fg-mute); }

  /* ---------- Controles de ruta (toggle ciclo) ---------- */
  .prod-route-controls { display: flex; justify-content: center; margin-bottom: 36px; }

  .prod-cycle-toggle {
    display: inline-flex;
    padding: 4px;
    background: var(--bg-cool);
    border: 1px solid var(--navy-line);
    border-radius: 999px;
  }
  .prod-cycle-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--fg-soft);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .prod-cycle-opt.is-active { background: var(--product-accent); color: #fff; }
  .prod-cycle-save {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--product-accent-tint);
    color: var(--product-accent);
  }
  .prod-cycle-opt.is-active .prod-cycle-save { background: rgba(255, 255, 255, 0.2); color: #fff; }

  /* ---------- Grid de planes ---------- */
  .prod-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 56px;
  }
  .prod-plans-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .prod-plans-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }

  /* ---------- Tarjeta de plan ---------- */
  .prod-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    background: var(--bg);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius-lg);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    /* Fix 2: las tarjetas son seleccionables (abren modal con plan pre-cargado) */
    cursor: pointer;
  }
  .prod-plan-card:hover { box-shadow: 0 8px 28px var(--navy-line-strong); transform: translateY(-2px); }
  .prod-plan-card:focus-visible {
    outline: 2px solid var(--product-accent);
    outline-offset: 2px;
  }
  /* Flags del config (Premium → recommended, Growth → hot): un solo ring vino */
  .prod-plan-card.is-recommended,
  .prod-plan-card.is-hot {
    border-color: var(--product-accent);
    box-shadow: 0 0 0 1px var(--product-accent);
  }
  /* Estado de selección del usuario (Fix 2): se distingue de recommended/hot con
     un ring más grueso, sombra coloreada y leve elevación. La specificity es
     idéntica a .is-recommended pero esta regla viene después, por lo tanto gana
     cuando aplica (una tarjeta puede ser Premium-recommended Y user-selected). */
  .prod-plan-card.is-selected {
    border-color: var(--product-accent);
    box-shadow: 0 0 0 2px var(--product-accent), 0 12px 32px var(--product-accent-tint);
    transform: translateY(-2px);
  }
  .prod-plan-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--product-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .prod-plan-name { font-size: 19px; font-weight: 600; color: var(--fg); margin: 6px 0 4px; }
  .prod-plan-tagline { font-size: 13px; color: var(--fg-soft); margin: 0 0 18px; min-height: 34px; }
  .prod-plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .prod-plan-from { font-size: 13px; color: var(--fg-mute); }
  .prod-plan-amount { font-size: 34px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; }
  .prod-plan-amount-quote { font-size: 26px; color: var(--product-accent); }
  .prod-plan-period { font-size: 13px; color: var(--fg-mute); }
  .prod-plan-percollab { font-size: 13px; color: var(--fg-soft); margin: 8px 0 0; }
  .prod-plan-range { font-size: 12px; color: var(--fg-mute); margin: 6px 0 16px; }
  .prod-plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .prod-plan-features li {
    position: relative;
    padding-left: 24px;
    font-size: 13px;
    color: var(--fg-soft);
    line-height: 1.5;
  }
  .prod-plan-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    background: var(--product-accent-tint);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--product-accent);
  }

  /* ---------- Highlights del modelo Buró ---------- */
  .prod-buro-highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
  }
  .prod-buro-highlights li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-soft);
  }
  .prod-buro-highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 15px;
    height: 15px;
    background: var(--product-accent-tint);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--product-accent);
  }

  /* ---------- Partner ---------- */
  .prod-partner-rate { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 18px; }
  .prod-partner-rate-value { font-size: 32px; font-weight: 700; color: var(--product-accent); letter-spacing: -0.02em; }
  .prod-partner-rate-label { font-size: 12px; color: var(--fg-mute); }

  /* ---------- Calculadora ---------- */
  .prod-calc {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px;
    background: var(--bg-alt);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius-xl);
  }
  .prod-calc-head { text-align: center; margin-bottom: 24px; }
  .prod-calc-title { font-size: 20px; font-weight: 600; color: var(--fg); margin: 8px 0 0; }
  .prod-calc-label { display: block; font-size: 13px; color: var(--fg-soft); margin-bottom: 12px; }
  .prod-calc-slider-row { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }

  .prod-calc-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: var(--gray-200);
    outline: none;
  }
  .prod-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--product-accent);
    border: 3px solid var(--bg);
    box-shadow: 0 1px 4px var(--navy-line-strong);
    cursor: pointer;
  }
  .prod-calc-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--product-accent);
    border: 3px solid var(--bg);
    cursor: pointer;
  }
  .prod-calc-collabs {
    min-width: 96px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
  }

  /* Resultado Directo */
  .prod-calc-result {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
    background: var(--bg);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius-md);
  }
  .prod-calc-result-plan,
  .prod-calc-result-total { display: flex; flex-direction: column; gap: 4px; }
  .prod-calc-result-total { text-align: right; }
  .prod-calc-result-label { font-size: 12px; color: var(--fg-mute); }
  .prod-calc-result-value { font-size: 17px; font-weight: 600; color: var(--product-accent); }
  .prod-calc-result-amount { font-size: 24px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; }

  /* Bandas Buró */
  .prod-calc-bands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .prod-calc-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    background: var(--bg);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius-md);
    transition: border-color 0.18s ease, background 0.18s ease;
  }
  .prod-calc-band.is-active {
    border-color: var(--product-accent);
    background: var(--product-accent-tint);
  }
  .prod-calc-band-name { font-size: 12px; color: var(--fg-soft); }
  .prod-calc-band.is-active .prod-calc-band-name { color: var(--product-accent); font-weight: 600; }
  .prod-calc-band-price { font-size: 16px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }

  .prod-calc-note { font-size: 12px; color: var(--fg-mute); text-align: center; margin: 18px 0 0; }

  /* ---------- Disclaimer de precios provisionales ---------- */
  .prod-planes-disclaimer {
    max-width: 640px;
    margin: 48px auto 0;
    text-align: center;
    font-size: 12px;
    color: var(--fg-mute);
    font-style: italic;
  }

  /* ---------- CTA de demo (disparador global en la página de planes) ---------- */
  .prod-planes-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 560px;
    margin: 56px auto 0;
    padding: 36px;
    text-align: center;
    background: var(--bg-alt);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius-xl);
  }
  .prod-planes-cta-text { font-size: 18px; font-weight: 600; color: var(--fg); margin: 0; }

  /* ════════════════════════════════════════════════════════════════════
     Modal demo — vanilla usa <dialog> nativo HTML5.
     El TSX del Next usaba div + overlay propio (porque no había <dialog>
     en SSR friendly). En vanilla aprovechamos el built-in: ::backdrop
     reemplaza .prod-modal-overlay y open/close son métodos nativos.
     Mantenemos las clases prod-modal-* para que el CSS no se pierda.
     ════════════════════════════════════════════════════════════════════ */
  
  /* <dialog> reset: quitar estilos nativos para usar los nuestros */
  .prod-modal[open] {
    /* El modal vive como hermano del <main>, fuera de .planilla-page,
       por lo que NO hereda los tokens vino del producto. Los redefinimos
       aquí para que el botón submit, el check de éxito y el focus ring
       sigan resolviendo a vino #A02845 igual que el resto de la página. */
    --product-accent: #A02845;
    --product-accent-soft: #C13B5A;
    --product-accent-tint: rgba(160, 40, 69, 0.08);

    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 580px;
    max-height: calc(100vh - 10vh);
    overflow-y: auto;
    padding: 36px;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--navy-line);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(6, 16, 38, 0.3);
    animation: prod-modal-rise 0.22s ease;
  }
  .prod-modal::backdrop {
    background: rgba(6, 16, 38, 0.55);
    backdrop-filter: blur(3px);
    animation: prod-modal-fade 0.18s ease;
  }
  @keyframes prod-modal-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes prod-modal-rise {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }

  .prod-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--bg-cool);
    color: var(--fg-soft);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .prod-modal-close:hover { background: var(--navy-line); color: var(--fg); }
  .prod-modal-close svg { width: 16px; height: 16px; }

  .prod-modal-head { margin-bottom: 24px; padding-right: 40px; }
  .prod-modal-head h2 { font-size: 24px; font-weight: 700; color: var(--fg); margin: 10px 0 0; letter-spacing: -0.02em; font-family: var(--font-display); }
  .prod-modal-lead { font-size: 14px; color: var(--fg-soft); margin: 8px 0 0; }
  /* Tag visual del plan elegido (cuando se abre desde tarjeta, no botón global) */
  .prod-modal-selected-plan {
    /* :not([hidden]) — display inline-block solo cuando el elemento NO tiene
       el atributo hidden. Esto respeta la semántica HTML5 nativa de hidden,
       que añade display:none con specificity baja vencida por nuestra regla. */
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--product-accent-tint);
    color: var(--product-accent);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .prod-modal-selected-plan:not([hidden]) {
    display: inline-block;
  }

  /* Form: reusa .form-row / .form-field / .form-error / .req del MAIN/Health */
  .prod-modal-form { display: flex; flex-direction: column; gap: 16px; }
  .prod-modal-form .btn-block { margin-top: 8px; width: 100%; }
  .prod-modal-privacy { font-size: 12px; color: var(--fg-mute); text-align: center; margin: 4px 0 0; }

  /* Pantalla de éxito */
  .prod-modal-success { text-align: center; padding: 16px 8px; }
  .prod-modal-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--product-accent-tint);
    color: var(--product-accent);
  }
  .prod-modal-success-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 2; }
  .prod-modal-success h2 { font-size: 22px; font-weight: 700; color: var(--fg); margin: 0 0 12px; font-family: var(--font-display); }
  .prod-modal-success p { font-size: 15px; color: var(--fg-soft); margin: 0 auto 24px; max-width: 380px; line-height: 1.6; }

  /* Form fields shared (.form-* ya existen en MAIN para ContactSection;
     replicamos los específicos del modal para no depender) */
  .prod-modal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .prod-modal .form-field { display: flex; flex-direction: column; gap: 6px; }
  .prod-modal .form-field.single { grid-column: 1 / -1; }
  .prod-modal .form-row .form-field.single { grid-column: 1 / -1; }
  .prod-modal .label { font-size: 13px; font-weight: 500; color: var(--fg); }
  /* .req color: la regla .form-field .req {color:var(--gold-dark)} en línea
     325 está FUERA de @layer, gana por especificidad de cascada. !important
     fuerza vino dentro del modal Planilla (patrón consistente con .cta-final). */
  .prod-modal .label .req { color: var(--product-accent) !important; margin-left: 2px; }
  .prod-modal input,
  .prod-modal select,
  .prod-modal textarea {
    padding: 10px 12px;
    border: 1px solid var(--navy-line);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .prod-modal input:focus,
  .prod-modal select:focus,
  .prod-modal textarea:focus {
    outline: none;
    border-color: var(--product-accent);
    box-shadow: 0 0 0 3px var(--product-accent-tint);
  }
  .prod-modal input[aria-invalid="true"],
  .prod-modal select[aria-invalid="true"],
  .prod-modal textarea[aria-invalid="true"] { border-color: var(--color-error); }
  .prod-modal .form-error { font-size: 12px; color: var(--color-error); margin: 0; }

  /* Botón block para submit */
  .btn-block { width: 100%; display: inline-flex; justify-content: center; }
  .btn[disabled] { opacity: 0.6; cursor: wait; }

  /* ════════ Responsive Fase B ════════ */
  @media (max-width: 900px) {
    .prod-plans-grid,
    .prod-plans-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .prod-calc-bands { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .prod-modal[open] { padding: 28px 20px; max-width: calc(100% - 16px); }
    .prod-modal-head h2 { font-size: 21px; }
    .prod-planes-cta { padding: 28px 20px; }
    .prod-planes { padding: 48px 0 64px; }
    .prod-planes-routes { grid-template-columns: 1fr; gap: 6px; }
    .prod-route-tab { flex-direction: row; justify-content: space-between; padding: 12px 16px; }
    .prod-plans-grid,
    .prod-plans-grid-4,
    .prod-plans-grid-2 { grid-template-columns: 1fr; }
    .prod-calc { padding: 24px 18px; }
    .prod-calc-result { grid-template-columns: 1fr; }
    .prod-calc-result-total { text-align: left; }
    .prod-calc-slider-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .prod-calc-collabs { text-align: center; }
    .prod-modal .form-row { grid-template-columns: 1fr; }
  }
}
/* ===== fin PASO 19.B — Planilla Planes (Fase B.1) ===== */

/* ════════════════════════════════════════════════════════════════════════
 * GALILEO PASO 20 — Auth (sprint v0.03)
 * ────────────────────────────────────────────────────────────────────────
 * 5 pantallas con chrome propio (anti-colisión globals.css):
 *   20.A · login          → lgn-*
 *   20.B · mfa            → mfa-*
 *   20.C · forgot-password→ fgt-*
 *   20.D · reset-password → rst-*
 *   20.E · verify-email   → vfy-*
 *
 * Convención v0.15 "cada pantalla porta su chrome": cada pantalla compone
 * su propio top-bar + panel visual izq (órbita SVG) + form-side der + foot.
 * Cero dependencia de Header/Footer corporativo.
 *
 * Tokens reutilizados de globals.css:
 *   --bg, --fg, --fg-soft, --line, --navy, --navy-deep, --navy-soft,
 *   --gold-dark, --gold-light, --gray-50, --white,
 *   --font-display (Geist), --font-mono (Geist Mono).
 *
 * Dark mode: cada pantalla overridea via [data-theme="dark"] body.lgn-screen
 * (etc.). El script anti-flash en cada plantilla aplica data-theme antes
 * del primer paint.
 * ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
 * PASO 20.A — LOGIN (.lgn-*)
 * ════════════════════════════════════════════════════════════════════════ */

body.lgn-screen {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ───── Top bar ───── */
.lgn-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.lgn-top-bar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}
.lgn-top-bar-actions > * { flex: 0 0 auto; }
.lgn-top-bar-actions .lang-picker,
.lgn-top-bar-actions .theme-toggle {
  display: inline-flex;
  align-items: center;
  width: auto;
}

.lgn-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
}
.lgn-logo-mark { width: 32px; height: 32px; }
.lgn-logo-text { display: flex; flex-direction: column; line-height: 1; }
.lgn-logo-text small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-top: 4px;
}
[data-theme="dark"] .lgn-logo-text small { color: var(--gold-light); }

.lgn-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-soft);
  font-size: 14px;
  padding: 8px 16px 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.lgn-back-link:hover { color: var(--fg); background: var(--gray-50); }
[data-theme="dark"] .lgn-back-link:hover { background: rgba(255,255,255,.05); }
.lgn-back-link svg { width: 14px; height: 14px; }

/* ───── Main split ───── */
.lgn-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
}
@media (max-width: 900px) {
  .lgn-main { grid-template-columns: 1fr; }
  .lgn-visual { display: none; }
}

/* ───── Panel visual izquierdo (órbita + quote) ───── */
.lgn-visual {
  position: relative;
  padding: 56px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-soft) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.lgn-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(#000 30%, transparent 80%);
  mask-image: radial-gradient(#000 30%, transparent 80%);
  pointer-events: none;
}
.lgn-visual::after {
  content: "";
  position: absolute;
  top: -150px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(184,147,90,.22) 0%, transparent 60%);
  pointer-events: none;
}
.lgn-visual-head { position: relative; z-index: 2; }
.lgn-visual-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  padding: 6px 12px;
  border: 1px solid rgba(184,147,90,.4);
  border-radius: 999px;
}
.lgn-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 480px;
  transform: translate(-50%, -50%);
  opacity: .8;
  pointer-events: none;
}
.lgn-orbit svg { width: 100%; height: 100%; }
.lgn-orbit-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  z-index: 2;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.4));
}
.lgn-visual-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.lgn-visual-body h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 32px;
}
.lgn-visual-body h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold-light) 0%, #d4b078 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lgn-visual-quote {
  border-left: 2px solid rgba(184,147,90,.5);
  padding-left: 20px;
}
.lgn-visual-quote p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  font-style: italic;
  margin: 0 0 12px;
}
.lgn-who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.lgn-visual-foot {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
}

/* ───── Form side derecho ───── */
.lgn-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  overflow-y: auto;
}
.lgn-login-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lgn-login-head { margin-bottom: 8px; }
.lgn-login-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
}
[data-theme="dark"] .lgn-login-eyebrow { color: var(--gold-light); }
.lgn-login-head h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--fg);
}
.lgn-sub {
  font-size: 14px;
  color: var(--fg-soft);
  margin: 0;
  line-height: 1.5;
}

/* ───── Field group genérico ───── */
.lgn-field-group { display: flex; flex-direction: column; gap: 6px; }
.lgn-field-group label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lgn-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-dark);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}
.lgn-field-group input[type="email"],
.lgn-field-group input[type="password"],
.lgn-field-group input[type="text"] {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.lgn-field-group input:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(184,147,90,.15);
}
[data-theme="dark"] .lgn-field-group input:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(184,147,90,.25);
}
.lgn-field-group input:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--gray-50);
}
[data-theme="dark"] .lgn-field-group input:disabled {
  background: rgba(255,255,255,.03);
}
.lgn-field-error {
  color: var(--color-error);
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}

/* ───── Product picker custom ───── */
.lgn-product-picker { position: relative; }
.lgn-product-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.lgn-product-trigger:hover { border-color: var(--gold-dark); }
.lgn-product-picker.open .lgn-product-trigger {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(184,147,90,.15);
}
.lgn-prod-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(184,147,90,.12);
  color: var(--gold-dark);
  flex-shrink: 0;
}
[data-theme="dark"] .lgn-prod-icon {
  background: rgba(184,147,90,.18);
  color: var(--gold-light);
}
.lgn-prod-icon svg { width: 20px; height: 20px; }
.lgn-prod-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.lgn-prod-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
.lgn-prod-name.placeholder { color: var(--fg-soft); font-weight: 400; }
.lgn-prod-sub {
  font-size: 12px;
  color: var(--fg-soft);
  margin-top: 2px;
}
.lgn-caret {
  width: 14px;
  height: 14px;
  color: var(--fg-soft);
  flex-shrink: 0;
  transition: transform .15s;
}
.lgn-product-picker.open .lgn-caret { transform: rotate(180deg); }

.lgn-product-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.10);
  padding: 6px;
  z-index: 10;
  max-height: 320px;
  overflow-y: auto;
}
[data-theme="dark"] .lgn-product-menu {
  background: #0a0a0a;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.lgn-product-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.lgn-product-option:hover { background: var(--gray-50); }
[data-theme="dark"] .lgn-product-option:hover { background: rgba(255,255,255,.05); }
.lgn-product-option.active { background: rgba(184,147,90,.10); }
[data-theme="dark"] .lgn-product-option.active { background: rgba(184,147,90,.18); }
.lgn-prod-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.lgn-prod-desc {
  font-size: 11px;
  color: var(--fg-soft);
  margin-top: 2px;
}
.lgn-check {
  width: 16px;
  height: 16px;
  color: var(--gold-dark);
  opacity: 0;
  flex-shrink: 0;
}
.lgn-product-option.active .lgn-check { opacity: 1; }
[data-theme="dark"] .lgn-check { color: var(--gold-light); }

/* ───── Password input wrapper con toggle ───── */
.lgn-input-wrap { position: relative; }
.lgn-input-wrap input { width: 100%; padding-right: 44px; }
.lgn-toggle-pass {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--fg-soft);
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.lgn-toggle-pass:hover { color: var(--fg); background: var(--gray-50); }
[data-theme="dark"] .lgn-toggle-pass:hover { background: rgba(255,255,255,.05); }
.lgn-toggle-pass svg { width: 18px; height: 18px; }

/* ───── Options row ───── */
.lgn-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.lgn-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--fg-soft);
}
.lgn-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--gold-dark);
}
.lgn-checkbox input:disabled { cursor: not-allowed; opacity: .5; }
.lgn-forgot {
  color: var(--gold-dark);
  text-decoration: none;
  font-weight: 500;
}
.lgn-forgot:hover { text-decoration: underline; }
[data-theme="dark"] .lgn-forgot { color: var(--gold-light); }

/* ───── Form step lock (campos bloqueados hasta elegir producto) ───── */
.lgn-form-step-lock { opacity: 1; transition: opacity .2s; }
.lgn-login-card:not(.has-product) .lgn-form-step-lock {
  opacity: .4;
  pointer-events: none;
}

/* ───── Botones primarios ───── */
.lgn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.lgn-btn:disabled { cursor: not-allowed; opacity: .5; }
.lgn-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.lgn-btn-primary {
  background: var(--navy);
  color: var(--white);
}
.lgn-btn-primary:not(:disabled):hover { background: var(--navy-deep); }
.lgn-btn-primary:not(:disabled):active { transform: translateY(1px); }
[data-theme="dark"] .lgn-btn-primary {
  background: var(--gold-dark);
  color: var(--navy-deep);
}
[data-theme="dark"] .lgn-btn-primary:not(:disabled):hover {
  background: var(--gold-light);
}

/* ───── Divider ───── */
.lgn-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.lgn-divider::before,
.lgn-divider::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--line);
}

/* ───── SSO buttons ───── */
.lgn-sso-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lgn-sso-btn {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lgn-sso-btn:hover { border-color: var(--gold-dark); background: var(--gray-50); }
[data-theme="dark"] .lgn-sso-btn:hover { background: rgba(255,255,255,.04); }
.lgn-sso-btn.lgn-saml {
  grid-column: 1 / -1;
}

/* ───── reCAPTCHA + access notes ───── */
.lgn-recaptcha-note,
.lgn-access-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-soft);
  margin: 0;
  text-align: center;
}

/* ───── Foot ───── */
.lgn-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-soft);
  flex-shrink: 0;
}
.lgn-foot-links { display: flex; gap: 24px; }
.lgn-foot-links a {
  color: var(--fg-soft);
  text-decoration: none;
}
.lgn-foot-links a:hover { color: var(--fg); }

@media (max-width: 900px) {
  .lgn-top-bar,
  .lgn-foot { padding: 18px 20px; }
  .lgn-form-side { padding: 32px 20px; }
  .lgn-foot {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}


/* ════════════════════════════════════════════════════════════════════════
 * PASO 20.B–E — Chrome compartido auth (mfa, forgot, reset, verify)
 * ────────────────────────────────────────────────────────────────────────
 * Las 4 pantallas no-login comparten estructura: top-bar + panel visual
 * izq (órbita SVG) + form-side der + foot. En lugar de duplicar el chrome
 * 4 veces, lo declaramos UNA vez con lista de selectores prefijados.
 *
 * Lo ESPECÍFICO de cada pantalla (campo segmentado MFA, medidor reset,
 * estados de vista, etc.) vive en su sub-bloque al final.
 * ════════════════════════════════════════════════════════════════════════ */

/* ───── Body screen ───── */
body.mfa-screen,
body.fgt-screen,
body.rst-screen,
body.vfy-screen {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ───── Top bar ───── */
.mfa-top-bar, .fgt-top-bar, .rst-top-bar, .vfy-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mfa-top-bar-actions, .fgt-top-bar-actions, .rst-top-bar-actions, .vfy-top-bar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}
.mfa-top-bar-actions > *, .fgt-top-bar-actions > *,
.rst-top-bar-actions > *, .vfy-top-bar-actions > * { flex: 0 0 auto; }
.mfa-top-bar-actions .lang-picker, .fgt-top-bar-actions .lang-picker,
.rst-top-bar-actions .lang-picker, .vfy-top-bar-actions .lang-picker,
.mfa-top-bar-actions .theme-toggle, .fgt-top-bar-actions .theme-toggle,
.rst-top-bar-actions .theme-toggle, .vfy-top-bar-actions .theme-toggle {
  display: inline-flex;
  align-items: center;
  width: auto;
}

.mfa-logo, .fgt-logo, .rst-logo, .vfy-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
}
.mfa-logo-mark, .fgt-logo-mark, .rst-logo-mark, .vfy-logo-mark { width: 32px; height: 32px; }
.mfa-logo-text, .fgt-logo-text, .rst-logo-text, .vfy-logo-text {
  display: flex; flex-direction: column; line-height: 1;
}
.mfa-logo-text small, .fgt-logo-text small, .rst-logo-text small, .vfy-logo-text small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-top: 4px;
}
[data-theme="dark"] .mfa-logo-text small,
[data-theme="dark"] .fgt-logo-text small,
[data-theme="dark"] .rst-logo-text small,
[data-theme="dark"] .vfy-logo-text small { color: var(--gold-light); }

.mfa-back-link, .fgt-back-link, .rst-back-link, .vfy-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-soft);
  font-size: 14px;
  padding: 8px 16px 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.mfa-back-link:hover, .fgt-back-link:hover, .rst-back-link:hover, .vfy-back-link:hover {
  color: var(--fg);
  background: var(--gray-50);
}
[data-theme="dark"] .mfa-back-link:hover,
[data-theme="dark"] .fgt-back-link:hover,
[data-theme="dark"] .rst-back-link:hover,
[data-theme="dark"] .vfy-back-link:hover { background: rgba(255,255,255,.05); }
.mfa-back-link svg, .fgt-back-link svg, .rst-back-link svg, .vfy-back-link svg {
  width: 14px; height: 14px;
}

/* ───── Main split ───── */
.mfa-main, .fgt-main, .rst-main, .vfy-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
}
@media (max-width: 900px) {
  .mfa-main, .fgt-main, .rst-main, .vfy-main { grid-template-columns: 1fr; }
  .mfa-visual, .fgt-visual, .rst-visual, .vfy-visual { display: none; }
}

/* ───── Panel visual ───── */
.mfa-visual, .fgt-visual, .rst-visual, .vfy-visual {
  position: relative;
  padding: 56px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-soft) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.mfa-visual::before, .fgt-visual::before, .rst-visual::before, .vfy-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(#000 30%, transparent 80%);
  mask-image: radial-gradient(#000 30%, transparent 80%);
  pointer-events: none;
}
.mfa-visual::after, .fgt-visual::after, .rst-visual::after, .vfy-visual::after {
  content: "";
  position: absolute;
  top: -150px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(184,147,90,.22) 0%, transparent 60%);
  pointer-events: none;
}
.mfa-visual-head, .fgt-visual-head, .rst-visual-head, .vfy-visual-head { position: relative; z-index: 2; }
.mfa-visual-eyebrow, .fgt-visual-eyebrow, .rst-visual-eyebrow, .vfy-visual-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  padding: 6px 12px;
  border: 1px solid rgba(184,147,90,.4);
  border-radius: 999px;
}
.mfa-orbit, .fgt-orbit, .rst-orbit, .vfy-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 480px; height: 480px;
  transform: translate(-50%, -50%);
  opacity: .8;
  pointer-events: none;
}
.mfa-orbit svg, .fgt-orbit svg, .rst-orbit svg, .vfy-orbit svg { width: 100%; height: 100%; }
.mfa-orbit-logo, .fgt-orbit-logo, .rst-orbit-logo, .vfy-orbit-logo {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px; height: 140px;
  transform: translate(-50%, -50%);
  z-index: 2;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.4));
}
.mfa-visual-body, .fgt-visual-body, .rst-visual-body, .vfy-visual-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.mfa-visual-body h1, .fgt-visual-body h1, .rst-visual-body h1, .vfy-visual-body h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 32px;
  color: #fff;
}
.mfa-visual-body h1 em, .fgt-visual-body h1 em,
.rst-visual-body h1 em, .vfy-visual-body h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold-light) 0%, #d4b078 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mfa-visual-quote, .fgt-visual-quote, .rst-visual-quote, .vfy-visual-quote {
  border-left: 2px solid rgba(184,147,90,.5);
  padding-left: 20px;
}
.mfa-visual-quote p, .fgt-visual-quote p,
.rst-visual-quote p, .vfy-visual-quote p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  font-style: italic;
  margin: 0 0 12px;
}
.mfa-who, .fgt-who, .rst-who, .vfy-who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.mfa-visual-foot, .fgt-visual-foot, .rst-visual-foot, .vfy-visual-foot {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
}

/* ───── Form side derecho ───── */
.mfa-form-side, .fgt-form-side, .rst-form-side, .vfy-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  overflow-y: auto;
}

/* ───── Cards centradas (estados pasivos) ───── */
.mfa-card, .fgt-card, .rst-card, .vfy-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* [hidden] siempre debe ocultar (gana a la regla display:flex de arriba) */
.mfa-card[hidden], .fgt-card[hidden], .rst-card[hidden], .vfy-card[hidden] {
  display: none !important;
}
.fgt-step1[hidden], .fgt-step2[hidden] {
  display: none !important;
}
.rst-state-center, .vfy-state-center {
  text-align: center;
  align-items: center;
  gap: 16px;
}

/* ───── Spinner ───── */
.rst-spinner, .vfy-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(184,147,90,.2);
  border-top-color: var(--gold-dark);
  border-radius: 50%;
  animation: auth-spin 1s linear infinite;
  margin: 0 auto;
}
[data-theme="dark"] .rst-spinner,
[data-theme="dark"] .vfy-spinner {
  border-color: rgba(184,147,90,.3);
  border-top-color: var(--gold-light);
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ───── Status icons (success / err / info) ───── */
.rst-status-icon, .vfy-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto;
}
.rst-status-icon svg, .vfy-status-icon svg { width: 28px; height: 28px; }
.rst-status-ok, .vfy-status-ok {
  background: rgba(34,150,90,.12);
  color: #229657;
}
[data-theme="dark"] .rst-status-ok, [data-theme="dark"] .vfy-status-ok {
  background: rgba(64,200,124,.18);
  color: #5fd99a;
}
.rst-status-err, .vfy-status-err {
  background: var(--color-error-soft);
  color: var(--color-error);
}
.vfy-status-info {
  background: rgba(184,147,90,.15);
  color: var(--gold-dark);
}
[data-theme="dark"] .vfy-status-info { color: var(--gold-light); }

/* ───── Títulos y subtítulos card centrada ───── */
.rst-title, .vfy-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--fg);
}
.rst-subtitle, .vfy-subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0;
}
.vfy-redirect-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 8px 0 0;
}
[data-theme="dark"] .vfy-redirect-note { color: var(--gold-light); }

/* ───── Actions group (botones agrupados verticalmente) ───── */
.rst-actions-group, .vfy-actions-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

/* ───── Botones genéricos auth ───── */
.mfa-btn, .fgt-btn, .rst-btn, .vfy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.mfa-btn:disabled, .fgt-btn:disabled, .rst-btn:disabled, .vfy-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}
/* SVG dentro de cualquier botón auth: tamaño fijo 16px (icono inline) */
.mfa-btn svg, .fgt-btn svg, .rst-btn svg, .vfy-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.mfa-btn-primary, .fgt-btn-primary, .rst-btn-primary, .vfy-btn-primary {
  background: var(--navy);
  color: var(--white);
}
.mfa-btn-primary:not(:disabled):hover, .fgt-btn-primary:not(:disabled):hover,
.rst-btn-primary:not(:disabled):hover, .vfy-btn-primary:not(:disabled):hover {
  background: var(--navy-deep);
}
[data-theme="dark"] .mfa-btn-primary,
[data-theme="dark"] .fgt-btn-primary,
[data-theme="dark"] .rst-btn-primary,
[data-theme="dark"] .vfy-btn-primary {
  background: var(--gold-dark);
  color: var(--navy-deep);
}
[data-theme="dark"] .mfa-btn-primary:not(:disabled):hover,
[data-theme="dark"] .fgt-btn-primary:not(:disabled):hover,
[data-theme="dark"] .rst-btn-primary:not(:disabled):hover,
[data-theme="dark"] .vfy-btn-primary:not(:disabled):hover {
  background: var(--gold-light);
}
.fgt-btn-secondary, .rst-btn-ghost, .vfy-btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
}
.fgt-btn-secondary:hover, .rst-btn-ghost:hover, .vfy-btn-ghost:hover {
  background: var(--gray-50);
  border-color: var(--gold-dark);
}
[data-theme="dark"] .fgt-btn-secondary:hover,
[data-theme="dark"] .rst-btn-ghost:hover,
[data-theme="dark"] .vfy-btn-ghost:hover {
  background: rgba(255,255,255,.04);
}
.rst-btn-block, .vfy-btn-block, .fgt-btn .fgt-btn-block {
  width: 100%;
}

/* ───── Foot común ───── */
.mfa-foot, .fgt-foot, .rst-foot, .vfy-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-soft);
  flex-shrink: 0;
}
.mfa-foot-links, .fgt-foot-links, .rst-foot-links, .vfy-foot-links {
  display: flex; gap: 24px;
}
.mfa-foot-links a, .fgt-foot-links a, .rst-foot-links a, .vfy-foot-links a {
  color: var(--fg-soft);
  text-decoration: none;
}
.mfa-foot-links a:hover, .fgt-foot-links a:hover, .rst-foot-links a:hover, .vfy-foot-links a:hover {
  color: var(--fg);
}

@media (max-width: 900px) {
  .mfa-top-bar, .fgt-top-bar, .rst-top-bar, .vfy-top-bar,
  .mfa-foot, .fgt-foot, .rst-foot, .vfy-foot { padding: 18px 20px; }
  .mfa-form-side, .fgt-form-side, .rst-form-side, .vfy-form-side { padding: 32px 20px; }
  .mfa-foot, .fgt-foot, .rst-foot, .vfy-foot {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * PASO 20.B — específico MFA (campo segmentado de 6 dígitos)
 * ════════════════════════════════════════════════════════════════════════ */

.mfa-head { text-align: center; }
.mfa-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(184,147,90,.12);
  color: var(--gold-dark);
  margin: 0 auto 16px;
}
[data-theme="dark"] .mfa-status-icon {
  background: rgba(184,147,90,.18);
  color: var(--gold-light);
}
.mfa-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
}
[data-theme="dark"] .mfa-eyebrow { color: var(--gold-light); }
.mfa-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--fg);
}
.mfa-subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0;
}

/* Campo segmentado: 6 inputs */
.mfa-code-group {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 24px 0 12px;
}
.mfa-code-input {
  width: 100%;
  height: 60px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
  padding: 0;
}
.mfa-code-input:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(184,147,90,.18);
}
[data-theme="dark"] .mfa-code-input:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(184,147,90,.28);
}
.mfa-code-input:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.mfa-code-group.has-error .mfa-code-input {
  border-color: var(--color-error);
}
.mfa-field-error {
  color: var(--color-error);
  font-size: 13px;
  text-align: center;
  margin: 0 0 12px;
}

.mfa-actions-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  margin-top: 16px;
}
.mfa-link-btn {
  background: transparent;
  border: 0;
  color: var(--gold-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.mfa-link-btn:hover:not(:disabled) { text-decoration: underline; }
.mfa-link-btn:disabled { color: var(--fg-soft); cursor: not-allowed; }
[data-theme="dark"] .mfa-link-btn { color: var(--gold-light); }
.mfa-dot { color: var(--fg-soft); }

.mfa-help-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-soft);
  text-align: center;
  margin-top: 24px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 8px;
}
[data-theme="dark"] .mfa-help-note { background: rgba(255,255,255,.03); }

.mfa-back-to-login {
  font-size: 13px;
  color: var(--gold-dark);
  text-decoration: none;
  text-align: center;
  margin-top: 8px;
}
.mfa-back-to-login:hover { text-decoration: underline; }
[data-theme="dark"] .mfa-back-to-login { color: var(--gold-light); }

@media (max-width: 480px) {
  .mfa-code-group { gap: 6px; }
  .mfa-code-input { height: 52px; font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * PASO 20.C — específico FORGOT-PASSWORD (step1 ↔ step2)
 * ════════════════════════════════════════════════════════════════════════ */

.fgt-head { margin-bottom: 4px; }
.fgt-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
}
[data-theme="dark"] .fgt-eyebrow { color: var(--gold-light); }
.fgt-head h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--fg);
}
.fgt-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0;
}
.fgt-sub strong { color: var(--fg); font-weight: 600; }

.fgt-field-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.fgt-field-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.fgt-field-group input {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.fgt-field-group input:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(184,147,90,.15);
}
[data-theme="dark"] .fgt-field-group input:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(184,147,90,.25);
}
.fgt-field-error {
  color: var(--color-error);
  font-size: 12px;
  font-weight: 500;
}

.fgt-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fgt-btn { width: 100%; }
.fgt-btn-primary {
  background: var(--navy);
  color: var(--white);
}

.fgt-help {
  margin-top: 24px;
  padding: 16px;
  background: var(--gray-50);
  border-radius: 10px;
  border-left: 3px solid var(--gold-dark);
}
[data-theme="dark"] .fgt-help {
  background: rgba(255,255,255,.03);
  border-left-color: var(--gold-light);
}
.fgt-help h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin: 0 0 8px;
}
.fgt-help p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 8px;
}
.fgt-help strong { font-weight: 600; }
.fgt-help ul, .fgt-steps-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fgt-help li, .fgt-steps-list li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-soft);
  padding-left: 16px;
  position: relative;
}
.fgt-help li::before, .fgt-steps-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--gold-dark);
  font-weight: 600;
}
[data-theme="dark"] .fgt-help li::before,
[data-theme="dark"] .fgt-steps-list li::before { color: var(--gold-light); }
.fgt-help li strong, .fgt-steps-list li strong { color: var(--fg); }

.fgt-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(34,150,90,.12);
  color: #229657;
  margin: 0 auto 16px;
}
.fgt-confirm-icon svg { width: 28px; height: 28px; }
[data-theme="dark"] .fgt-confirm-icon {
  background: rgba(64,200,124,.18);
  color: #5fd99a;
}

.fgt-code-block {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--gold-dark);
  background: var(--bg);
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  margin: 4px 0;
  word-break: break-all;
}
[data-theme="dark"] .fgt-code-block {
  color: var(--gold-light);
  background: rgba(0,0,0,.3);
}

.fgt-back-to-login {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}
.fgt-back-to-login a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-soft);
  text-decoration: none;
}
.fgt-back-to-login a:hover { color: var(--fg); }
.fgt-back-to-login svg { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════════════
 * PASO 20.D — específico RESET-PASSWORD (medidor + checklist + form)
 * ════════════════════════════════════════════════════════════════════════ */

.rst-header { margin-bottom: 4px; }
.rst-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 8px;
}
[data-theme="dark"] .rst-eyebrow { color: var(--gold-light); }

.rst-card:not(.rst-state-center) .rst-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  text-align: left;
  color: var(--fg);
}

.rst-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(184,147,90,.12);
  font-size: 12px;
  color: var(--fg);
  margin-bottom: 12px;
}
[data-theme="dark"] .rst-product-badge { background: rgba(184,147,90,.18); }
.rst-product-badge strong {
  font-weight: 600;
  color: var(--gold-dark);
}
[data-theme="dark"] .rst-product-badge strong { color: var(--gold-light); }
.rst-product-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-dark);
}
[data-theme="dark"] .rst-product-dot { background: var(--gold-light); }

.rst-card:not(.rst-state-center) .rst-subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0 0 16px;
  text-align: left;
}

.rst-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rst-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rst-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.rst-input-wrap { position: relative; }
.rst-input {
  width: 100%;
  padding: 12px 44px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.rst-input:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(184,147,90,.15);
}
[data-theme="dark"] .rst-input:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(184,147,90,.25);
}
.rst-input-error { border-color: var(--color-error); }

.rst-toggle-pass {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--fg-soft);
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.rst-toggle-pass:hover { color: var(--fg); background: var(--gray-50); }
[data-theme="dark"] .rst-toggle-pass:hover { background: rgba(255,255,255,.05); }
.rst-toggle-pass svg { width: 18px; height: 18px; }

/* Medidor de fuerza */
.rst-meter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.rst-meter-track {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.rst-meter-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .25s, background .25s;
  background: var(--color-error);
}
.rst-meter-fill.rst-meter-weak    { background: var(--color-error); }
.rst-meter-fill.rst-meter-medium  { background: #d2a23a; }
.rst-meter-fill.rst-meter-strong  { background: #229657; }
.rst-meter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: right;
}
.rst-meter-label.rst-meter-label-weak    { color: var(--color-error); }
.rst-meter-label.rst-meter-label-medium  { color: #d2a23a; }
.rst-meter-label.rst-meter-label-strong  { color: #229657; }
[data-theme="dark"] .rst-meter-label-medium { color: #ffd66a; }
[data-theme="dark"] .rst-meter-label-strong { color: #5fd99a; }

/* Checklist en vivo */
.rst-checklist {
  list-style: none;
  padding: 12px 16px;
  margin: 0;
  background: var(--gray-50);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-theme="dark"] .rst-checklist { background: rgba(255,255,255,.03); }
.rst-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-soft);
  transition: color .15s;
}
.rst-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--line);
  color: transparent;
  font-size: 10px;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.rst-checklist li.rst-rule-met {
  color: var(--fg);
}
.rst-checklist li.rst-rule-met .rst-check-icon {
  background: #229657;
  color: var(--white);
}
[data-theme="dark"] .rst-checklist li.rst-rule-met .rst-check-icon {
  background: #5fd99a;
  color: var(--navy-deep);
}

.rst-match-label {
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}
.rst-match-ok { color: #229657; }
.rst-match-err { color: var(--color-error); }
[data-theme="dark"] .rst-match-ok { color: #5fd99a; }

/* ════════════════════════════════════════════════════════════════════════
 * PASO 20.E — específico VERIFY-EMAIL (pasivo, sin form propio)
 * ════════════════════════════════════════════════════════════════════════
 * Todo el chrome ya viene del bloque compartido. Solo títulos centrados.
 * ════════════════════════════════════════════════════════════════════════ */
/* (vacío intencional — verify-email reusa todo del shared) */

/* ════════════════════════════════════════════════════════════════════════
 * PASO 20.F — Animación de órbita SVG (patch v0.03.3 — FIX H4)
 * ────────────────────────────────────────────────────────────────────────
 * Estructura SVG corregida (v0.03.3): elementos rotables envueltos en <g>.
 * El transform-origin y la animación se aplican al <g>, NO al elemento
 * individual (los <circle>/<ellipse> sueltos devuelven bbox 0×0 y el
 * transform-origin falla — causa raíz confirmada del bug H4).
 *
 *   .auth-orbit-outer  → elipse dashed gold — anima stroke-dashoffset (NO rota)
 *   .auth-orbit-mid    → <g> elipse media white — rota lento
 *   .auth-orbit-inner  → <g> elipse interna — rota lento inverso
 *   .auth-orbit-sat    → <g> satélite gold — orbita rápido (visible)
 *   .auth-orbit-dot-n  → <g> punto polo norte — rota lento
 *   .auth-orbit-dot-s  → <g> punto polo sur — rota lento inverso
 *
 * Respeta prefers-reduced-motion (sin animación para usuarios sensibles).
 * transform-box: fill-box NO se usa; se fija transform-origin absoluto al
 * centro del viewBox (240 240) sobre el <g>, que sí calcula bbox correcto.
 * ════════════════════════════════════════════════════════════════════════ */

/* Dash exterior: efecto "puntos viajando" sobre la línea punteada */
@keyframes auth-orbit-dash-flow {
  to { stroke-dashoffset: -36; }  /* 3 ciclos de 4+8 = 36 */
}
/* Rotación uniforme alrededor del centro del SVG */
@keyframes auth-orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes auth-orbit-spin-reverse {
  to { transform: rotate(-360deg); }
}

/* Elipse exterior dashed: NO rota, solo fluye el dash */
.auth-orbit-outer {
  animation: auth-orbit-dash-flow 6s linear infinite;
}

/* Grupos rotables: transform-origin al centro del viewBox (240 240) */
.auth-orbit-mid,
.auth-orbit-inner,
.auth-orbit-sat,
.auth-orbit-dot-n,
.auth-orbit-dot-s {
  transform-origin: 240px 240px;
}

/* Elipse media blanca: rotación lenta */
.auth-orbit-mid {
  animation: auth-orbit-spin 60s linear infinite;
}
/* Elipse interna: rotación lenta inversa */
.auth-orbit-inner {
  animation: auth-orbit-spin-reverse 45s linear infinite;
}
/* Satélite gold principal: orbita rápido para ser visible */
.auth-orbit-sat {
  animation: auth-orbit-spin 18s linear infinite;
}
/* Punto N: rotación lenta */
.auth-orbit-dot-n {
  animation: auth-orbit-spin 24s linear infinite;
}
/* Punto S: rotación lenta inversa */
.auth-orbit-dot-s {
  animation: auth-orbit-spin-reverse 30s linear infinite;
}

/* Accesibilidad: respetar usuarios con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .auth-orbit-outer,
  .auth-orbit-mid,
  .auth-orbit-inner,
  .auth-orbit-sat,
  .auth-orbit-dot-n,
  .auth-orbit-dot-s {
    animation: none;
  }
}

/* ===== fin PASO 20 — Auth (sprint v0.03) ===== */



/* ════════════════════════════════════════════════════════════════════════
 * FIX contraste CTAFinal — el texto debe ser claro sobre el fondo navy.
 * (.display-l define color:var(--fg) navy; aquí lo forzamos a claro dentro
 *  del cta-final, que tiene fondo oscuro.) Reportado por Rony 2026-05-27.
 * ════════════════════════════════════════════════════════════════════════ */
.cta-final, .cta-final * { }
.cta-final .cta-final-inner h2,
.cta-final-inner h2.display-l { color: var(--white) !important; }
.cta-final .cta-final-subtitle { color: rgba(255,255,255,0.78) !important; }
.cta-final .eyebrow { color: var(--gold-light) !important; }
.cta-final .trust-line { color: rgba(255,255,255,0.55) !important; }
.cta-final .btn-secondary { color: var(--white) !important; border-color: rgba(255,255,255,0.35) !important; background: transparent !important; }
.cta-final .btn-secondary:hover { background: rgba(255,255,255,0.10) !important; }

/* ════════════════════════════════════════════════════════════════════════
 * FIX contraste CTA producto (.prod-cta-inner) — análogo al fix de .cta-final.
 * El h2 con clase .display-l hereda color:var(--fg) navy desde una regla
 * sin layer (línea 265 del archivo) que gana contra cualquier .prod-cta-inner h2
 * dentro de @layer components. Forzamos blanco aquí, FUERA del layer.
 * Aplica solo dentro de .prod-cta-inner (fondo navy de la banda de cierre).
 * ════════════════════════════════════════════════════════════════════════ */
.prod-cta-inner h2,
.prod-cta-inner h2.display-l { color: var(--white) !important; }
.prod-cta-inner .lead { color: rgba(255,255,255,0.82) !important; }
.prod-cta-inner p.lead { color: rgba(255,255,255,0.82) !important; }