/* =========================
   styles.css (guárdalo en /assets/css/smartcore.css)
   Paleta profesional basada en variables CSS
   Incluye tema oscuro por defecto y un alterno claro (.theme-light)
   ========================= */

/* Importación de fuentes via CSS (opcional) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* PALETA SMARTCORE */
  --sc-bg: #0E1116;
  --sc-surface: #151A22;
  --sc-elev: #1B2130;
  --sc-border: #2A3347;
  --sc-text: #E8EEF7;
  --sc-muted: #AAB6CA;

  --sc-primary: #5B8CFF;
  --sc-primary-600: #3C6DFF;
  --sc-secondary: #22D3EE;
  --sc-accent: #F59E0B;

  --sc-success: #10B981;
  --sc-warning: #F59E0B;
  --sc-danger:  #EF4444;

  --radius: 14px;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 20px rgba(0,0,0,.25);
  
  /* NUEVO: Sistema de fuentes profesional */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}


/* =========================
   Temas adicionales por data-theme (no rompe tu estructura)
   Valores: smartcore (por defecto), ocean, emerald
   ========================= */

/* OCEAN — Navy + Cyan */
:root [data-theme="ocean"],
[data-theme="ocean"] {
  --sc-bg: #0A0F1A;
  --sc-surface: #0F1626;
  --sc-elev: #121C2C;
  --sc-border: #22314A;
  --sc-text: #E6F1FF;
  --sc-muted: #A0B3CC;

  --sc-primary: #3BA3FF;      /* azul cielo intenso */
  --sc-primary-600: #1E7EE6;  /* azul más profundo */
  --sc-secondary: #20E3FF;    /* cian brillante */
  --sc-accent: #FFB86B;       /* ámbar suave */

  --sc-success: #19D3A2;      /* turquesa éxito */
  --sc-warning: #FFC14D;      /* ámbar */
  --sc-danger:  #FF5C5C;      /* coral/rojo */
}

/* EMERALD — Graphite + Verde */
:root [data-theme="emerald"],
[data-theme="emerald"] {
  --sc-bg: #0C1210;
  --sc-surface: #121A18;
  --sc-elev: #17231F;
  --sc-border: #23332E;
  --sc-text: #E9F5F1;
  --sc-muted: #9CB5AD;

  --sc-primary: #34D399;      /* verde esmeralda */
  --sc-primary-600: #10B981;  /* verde más profundo */
  --sc-secondary: #22D3EE;    /* cian de apoyo */
  --sc-accent: #A78BFA;       /* violeta suave */

  --sc-success: #22C55E;      /* verde éxito */
  --sc-warning: #F59E0B;      /* ámbar */
  --sc-danger:  #EF4444;      /* rojo */
}

/* ========== 1. Dracula ========== */
:root [data-theme="dracula"],
[data-theme="dracula"] {
  --sc-bg: #282A36;
  --sc-surface: #3A3C4E;
  --sc-elev: #44475A;
  --sc-border: #51546D;
  --sc-text: #F8F8F2;
  --sc-muted: #BDBEC5;

  --sc-primary: #8BE9FD;
  --sc-primary-600: #50FA7B;
  --sc-secondary: #FF79C6;
  --sc-accent: #FFB86C;

  --sc-success: #50FA7B;
  --sc-warning: #F1FA8C;
  --sc-danger:  #FF5555;
}

/* ========== 2. Solarized Dark ========== */
:root [data-theme="solarized-dark"],
[data-theme="solarized-dark"] {
  --sc-bg: #002B36;
  --sc-surface: #073642;
  --sc-elev: #0A3A48;
  --sc-border: #134D5A;
  --sc-text: #93A1A1;
  --sc-muted: #839496;

  --sc-primary: #268BD2;
  --sc-primary-600: #2074A0;
  --sc-secondary: #2AA198;
  --sc-accent: #B58900;

  --sc-success: #859900;
  --sc-warning: #B58900;
  --sc-danger:  #DC322F;
}

/* ========== Solarized Light (mejor contraste) ========== */
:root [data-theme="solarized-light"],
[data-theme="solarized-light"] {
  /* Superficies */
  --sc-bg: #FDF6E3;      /* base solarized */
  --sc-surface: #F3EED9; /* + contraste frente al bg */
  --sc-elev: #EAE3C8;    /* tarjetas ligeramente más marcadas */
  --sc-border: #D9CEB3;  /* bordes visibles sin ser agresivos */

  /* Tipografía */
  --sc-text: #0F172A;        /* MUCHO más legible que #657B83 */
  --sc-text-strong: #0B1220; /* títulos/subtítulos */
  --sc-muted: #516373;       /* secundario (antes muy pálido) */

  /* Marca */
  --sc-primary: #1D6FAE;     /* heredado de solarized pero más saturado */
  --sc-primary-600: #155E93; /* hover/active */
  --sc-secondary: #2AA198;   /* aqua clásico solarized */
  --sc-accent: #B58900;      /* amarillo ámbar solarized */

  /* Semánticos */
  --sc-success: #15803D;     /* verde más sólido en claro */
  --sc-warning: #B58900;     /* consistente con acento */
  --sc-danger:  #B91C1C;     /* rojo con mejor lectura */

  /* Enlaces */
  --sc-link: #1D4ED8;
  --sc-link-hover: #3B82F6;
}

/* ========== 4. Twilight Purple ========== */
:root [data-theme="twilight-purple"],
[data-theme="twilight-purple"] {
  --sc-bg: #1E1B2F;
  --sc-surface: #2F2842;
  --sc-elev: #3A3353;
  --sc-border: #4A4262;
  --sc-text: #E0DCE0;
  --sc-muted: #AAA5B5;

  --sc-primary: #9D7CD8;
  --sc-primary-600: #7C5EBB;
  --sc-secondary: #C08AD4;
  --sc-accent: #F2CBFF;

  --sc-success: #8BE9B8;
  --sc-warning: #EFBF71;
  --sc-danger:  #E84A5F;
}

/* ========== 5. Midnight Teal ========== */
:root [data-theme="midnight-teal"],
[data-theme="midnight-teal"] {
  --sc-bg: #0B1D1E;
  --sc-surface: #113537;
  --sc-elev: #184A4B;
  --sc-border: #246265;
  --sc-text: #D0F0EF;
  --sc-muted: #91B9B7;

  --sc-primary: #3ABBAE;
  --sc-primary-600: #2C9991;
  --sc-secondary: #76C7C0;
  --sc-accent: #E1F2EB;

  --sc-success: #14B8A6;
  --sc-warning: #FACC15;
  --sc-danger:  #DC2626;
}

/* ========== 6. Slate Blue ========== */
:root [data-theme="slate-blue"],
[data-theme="slate-blue"] {
  --sc-bg: #1F2633;
  --sc-surface: #2A3245;
  --sc-elev: #343C54;
  --sc-border: #4A5568;
  --sc-text: #C8D6E5;
  --sc-muted: #9CA6B9;

  --sc-primary: #6C7A89;
  --sc-primary-600: #556070;
  --sc-secondary: #A4B0BD;
  --sc-accent: #F78FB3;

  --sc-success: #48BB78;
  --sc-warning: #ECC94B;
  --sc-danger:  #E53E3E;
}

/* ========== 7. Warm Cocoa ========== */
:root [data-theme="warm-cocoa"],
[data-theme="warm-cocoa"] {
  --sc-bg: #2B1D12;
  --sc-surface: #3C2C1E;
  --sc-elev: #4A3728;
  --sc-border: #5C4838;
  --sc-text: #E9D8B0;
  --sc-muted: #C7B08A;

  --sc-primary: #B89B72;
  --sc-primary-600: #9C805E;
  --sc-secondary: #A17C6B;
  --sc-accent: #FFDDA0;

  --sc-success: #81E6D9;
  --sc-warning: #ECC94B;
  --sc-danger:  #F56565;
}

/* ========== 8. Charcoal Mint ========== */
:root [data-theme="charcoal-mint"],
[data-theme="charcoal-mint"] {
  --sc-bg: #2C2C2C;
  --sc-surface: #383838;
  --sc-elev: #444444;
  --sc-border: #555555;
  --sc-text: #E0E0E0;
  --sc-muted: #B0B0B0;

  --sc-primary: #3EB489;
  --sc-primary-600: #319D78;
  --sc-secondary: #61C0BF;
  --sc-accent: #A2D5C6;

  --sc-success: #22C55E;
  --sc-warning: #EAB308;
  --sc-danger:  #EF4444;
}

/* ========== 9. Graphite Pink ========== */
:root [data-theme="graphite-pink"],
[data-theme="graphite-pink"] {
  --sc-bg: #262626;
  --sc-surface: #333333;
  --sc-elev: #3F3F3F;
  --sc-border: #4A4A4A;
  --sc-text: #EDEDED;
  --sc-muted: #AAAAAA;

  --sc-primary: #FF6F91;
  --sc-primary-600: #E55D7D;
  --sc-secondary: #FF9671;
  --sc-accent: #FFC75F;

  --sc-success: #84CC16;
  --sc-warning: #FACC15;
  --sc-danger:  #F43F5E;
}

/* ========== 10. Sunset Coral ========== */
:root [data-theme="sunset-coral"],
[data-theme="sunset-coral"] {
  --sc-bg: #3E2C41;
  --sc-surface: #543C5E;
  --sc-elev: #6B4B70;
  --sc-border: #7E5A84;
  --sc-text: #F4E7D3;
  --sc-muted: #C8A9B7;

  --sc-primary: #FF927E;
  --sc-primary-600: #E56F6F;
  --sc-secondary: #FF6B6B;
  --sc-accent: #FF9F1C;

  --sc-success: #10B981;
  --sc-warning: #FBBF24;
  --sc-danger:  #F87171;
}

/* ========== 11. Forest Twilight ========== */
:root [data-theme="forest-twilight"],
[data-theme="forest-twilight"] {
  --sc-bg: #1E261F;
  --sc-surface: #2C3731;
  --sc-elev: #38433D;
  --sc-border: #465249;
  --sc-text: #CCD8C5;
  --sc-muted: #A2B59E;

  --sc-primary: #6DA67F;
  --sc-primary-600: #588E68;
  --sc-secondary: #8FBF87;
  --sc-accent: #C3E0B5;

  --sc-success: #22C55E;
  --sc-warning: #EAB308;
  --sc-danger:  #F87171;
}

/* ========== 12. Cobalt Night ========== */
:root [data-theme="cobalt-night"],
[data-theme="cobalt-night"] {
  --sc-bg: #0D1B2A;
  --sc-surface: #112240;
  --sc-elev: #1B263B;
  --sc-border: #415A77;
  --sc-text: #E0E1DD;
  --sc-muted: #9BA8B0;

  --sc-primary: #1B263B;
  --sc-primary-600: #243B55;
  --sc-secondary: #415A77;
  --sc-accent: #778DA9;

  --sc-success: #16A34A;
  --sc-warning: #FBBF24;
  --sc-danger:  #DC2626;
}

/* ========== 13. Rust Sand ========== */
:root [data-theme="rust-sand"],
[data-theme="rust-sand"] {
  --sc-bg: #352D26;
  --sc-surface: #4E4039;
  --sc-elev: #5A4C44;
  --sc-border: #7C6B5E;
  --sc-text: #ECE2D0;
  --sc-muted: #C9B8A5;

  --sc-primary: #D4996A;
  --sc-primary-600: #B47C56;
  --sc-secondary: #C19A6B;
  --sc-accent: #A57A53;

  --sc-success: #84CC16;
  --sc-warning: #FACC15;
  --sc-danger:  #F43F5E;
}

/* ========== 14. Soft Lavender ========== */
:root [data-theme="soft-lavender"],
[data-theme="soft-lavender"] {
  --sc-bg: #F5F3FB;
  --sc-surface: #ECE9F1;
  --sc-elev: #E0DBEB;
  --sc-border: #D0C8E0;
  --sc-text: #5B5A72;
  --sc-muted: #8A88A3;

  --sc-primary: #9A8F97;
  --sc-primary-600: #7E7481;
  --sc-secondary: #CBB7D2;
  --sc-accent: #D8B4E2;

  --sc-success: #10B981;
  --sc-warning: #F59E0B;
  --sc-danger:  #EF4444;
}

/* ========== 15. Creamy Mint ========== */
:root [data-theme="creamy-mint"],
[data-theme="creamy-mint"] {
  --sc-bg: #F7FFF7;
  --sc-surface: #E8F5E9;
  --sc-elev: #DAEEDB;
  --sc-border: #CDE5CF;
  --sc-text: #2E3A33;
  --sc-muted: #668374;

  --sc-primary: #72B19D;
  --sc-primary-600: #5C9481;
  --sc-secondary: #AED9E0;
  --sc-accent: #FFE5D9;

  --sc-success: #22C55E;
  --sc-warning: #FBBF24;
  --sc-danger:  #DC2626;
}

/* ========== 16. Peach Sorbet ========== */
:root [data-theme="peach-sorbet"],
[data-theme="peach-sorbet"] {
  --sc-bg: #FFF1E6;
  --sc-surface: #FFE3CA;
  --sc-elev: #FFD8B5;
  --sc-border: #FFCBA0;
  --sc-text: #5C4B51;
  --sc-muted: #8F7A7C;

  --sc-primary: #FF9A8D;
  --sc-primary-600: #E47D72;
  --sc-secondary: #FFBCB3;
  --sc-accent: #FFD6CC;

  --sc-success: #22C55E;
  --sc-warning: #EAB308;
  --sc-danger:  #F43F5E;
}

/* ========== 17. Sky Pastel ========== */
:root [data-theme="sky-pastel"],
[data-theme="sky-pastel"] {
  --sc-bg: #EAF2F8;
  --sc-surface: #D6EAF8;
  --sc-elev: #C9E2F2;
  --sc-border: #B3D3EA;
  --sc-text: #3A506B;
  --sc-muted: #6C7A89;

  --sc-primary: #5BC0BE;
  --sc-primary-600: #3BA19F;
  --sc-secondary: #8EE4AF;
  --sc-accent: #EDF5E1;

  --sc-success: #16A34A;
  --sc-warning: #FACC15;
  --sc-danger:  #DC2626;
}

/* ========== 18. Moss Green ========== */
:root [data-theme="moss-green"],
[data-theme="moss-green"] {
  --sc-bg: #1D2D18;
  --sc-surface: #273E26;
  --sc-elev: #324E2E;
  --sc-border: #436143;
  --sc-text: #C4D0B0;
  --sc-muted: #9FAE93;

  --sc-primary: #7EA27C;
  --sc-primary-600: #5F8560;
  --sc-secondary: #A4B292;
  --sc-accent: #D3DAC4;

  --sc-success: #22C55E;
  --sc-warning: #EAB308;
  --sc-danger:  #F87171;
}

/* ========== 19. Earth Brown ========== */
:root [data-theme="earth-brown"],
[data-theme="earth-brown"] {
  --sc-bg: #2F2301;
  --sc-surface: #432F0D;
  --sc-elev: #553D1A;
  --sc-border: #70512A;
  --sc-text: #E9D8A6;
  --sc-muted: #BFA97C;

  --sc-primary: #B0845A;
  --sc-primary-600: #976B46;
  --sc-secondary: #A67C52;
  --sc-accent: #D2B48C;

  --sc-success: #22C55E;
  --sc-warning: #F59E0B;
  --sc-danger:  #DC2626;
}

/* ========== 20. Steel Grey ========== */
:root [data-theme="steel-grey"],
[data-theme="steel-grey"] {
  --sc-bg: #1A1A1A;
  --sc-surface: #2E2E2E;
  --sc-elev: #3A3A3A;
  --sc-border: #4C4C4C;
  --sc-text: #E0E0E0;
  --sc-muted: #A8A8A8;

  --sc-primary: #5E6D77;
  --sc-primary-600: #4E5863;
  --sc-secondary: #A2B1B9;
  --sc-accent: #C4C8C7;

  --sc-success: #16A34A;
  --sc-warning: #FACC15;
  --sc-danger:  #DC2626;
}

/* ========== 21. Snow Ice ========== */
:root [data-theme="snow-ice"],
[data-theme="snow-ice"] {
  --sc-bg: #F8FAFC;
  --sc-surface: #E2E8F0;
  --sc-elev: #CBD5E1;
  --sc-border: #CBD5E1;
  --sc-text: #1E293B;
  --sc-muted: #64748B;

  --sc-primary: #3B82F6;
  --sc-primary-600: #2563EB;
  --sc-secondary: #60A5FA;
  --sc-accent: #A5B4FC;

  --sc-success: #16A34A;
  --sc-warning: #EAB308;
  --sc-danger:  #DC2626;
}

/* ========== 22. Lavender Mist ========== */
:root [data-theme="lavender-mist"],
[data-theme="lavender-mist"] {
  --sc-bg: #F3F0F5;
  --sc-surface: #E6E1EB;
  --sc-elev: #D8D0E0;
  --sc-border: #C8BDD4;
  --sc-text: #4A4458;
  --sc-muted: #837B95;

  --sc-primary: #A598D9;
  --sc-primary-600: #8A7DC1;
  --sc-secondary: #C9BFF2;
  --sc-accent: #E3D5FF;

  --sc-success: #22C55E;
  --sc-warning: #EAB308;
  --sc-danger:  #F43F5E;
}

/* ========== 23. Mint Chocolate ========== */
:root [data-theme="mint-chocolate"],
[data-theme="mint-chocolate"] {
  --sc-bg: #1B1D1B;
  --sc-surface: #2C302C;
  --sc-elev: #383E38;
  --sc-border: #4A514A;
  --sc-text: #CFE3D4;
  --sc-muted: #9CB59F;

  --sc-primary: #69B578;
  --sc-primary-600: #519963;
  --sc-secondary: #A4D4AE;
  --sc-accent: #D8EBD8;

  --sc-success: #22C55E;
  --sc-warning: #F59E0B;
  --sc-danger:  #DC2626;
}

/* ========== 24. Graphite Blue ========== */
:root [data-theme="graphite-blue"],
[data-theme="graphite-blue"] {
  --sc-bg: #121417;
  --sc-surface: #1C1E23;
  --sc-elev: #242830;
  --sc-border: #31343C;
  --sc-text: #E2E8F0;
  --sc-muted: #A0AEC0;

  --sc-primary: #4299E1;
  --sc-primary-600: #3182CE;
  --sc-secondary: #63B3ED;
  --sc-accent: #90CDF4;

  --sc-success: #48BB78;
  --sc-warning: #ECC94B;
  --sc-danger:  #F56565;
}

/* ========== 25. Deep Rose ========== */
:root [data-theme="deep-rose"],
[data-theme="deep-rose"] {
  --sc-bg: #1E1416;
  --sc-surface: #2A1B1E;
  --sc-elev: #3A2429;
  --sc-border: #4E2E36;
  --sc-text: #F4E4E7;
  --sc-muted: #BFA2A9;

  --sc-primary: #E26D86;
  --sc-primary-600: #C55C75;
  --sc-secondary: #F48FB1;
  --sc-accent: #FFC1CC;

  --sc-success: #10B981;
  --sc-warning: #FBBF24;
  --sc-danger:  #EF4444;
}

/* ============================================
   Opcional: asegurar contraste en badges/grads según paleta
   ============================================ */

[data-theme="ocean"] .sc-badge,
[data-theme="emerald"] .sc-badge,
[data-theme="dracula"] .sc-badge,
[data-theme="solarized-dark"] .sc-badge,
[data-theme="solarized-light"] .sc-badge,
[data-theme="twilight-purple"] .sc-badge,
[data-theme="midnight-teal"] .sc-badge,
[data-theme="slate-blue"] .sc-badge,
[data-theme="warm-cocoa"] .sc-badge,
[data-theme="charcoal-mint"] .sc-badge,
[data-theme="graphite-pink"] .sc-badge,
[data-theme="sunset-coral"] .sc-badge,
[data-theme="forest-twilight"] .sc-badge,
[data-theme="cobalt-night"] .sc-badge,
[data-theme="rust-sand"] .sc-badge,
[data-theme="soft-lavender"] .sc-badge,
[data-theme="creamy-mint"] .sc-badge,
[data-theme="peach-sorbet"] .sc-badge,
[data-theme="sky-pastel"] .sc-badge,
[data-theme="moss-green"] .sc-badge,
[data-theme="earth-brown"] .sc-badge,
[data-theme="steel-grey"] .sc-badge,
[data-theme="snow-ice"] .sc-badge,
[data-theme="lavender-mist"] .sc-badge,
[data-theme="mint-chocolate"] .sc-badge,
[data-theme="graphite-blue"] .sc-badge,
[data-theme="deep-rose"] .sc-badge {
  box-shadow: var(--shadow-soft);
}

[data-theme="ocean"] .grad,
[data-theme="emerald"] .grad,
[data-theme="dracula"] .grad,
[data-theme="solarized-dark"] .grad,
[data-theme="solarized-light"] .grad,
[data-theme="twilight-purple"] .grad,
[data-theme="midnight-teal"] .grad,
[data-theme="slate-blue"] .grad,
[data-theme="warm-cocoa"] .grad,
[data-theme="charcoal-mint"] .grad,
[data-theme="graphite-pink"] .grad,
[data-theme="sunset-coral"] .grad,
[data-theme="forest-twilight"] .grad,
[data-theme="cobalt-night"] .grad,
[data-theme="rust-sand"] .grad,
[data-theme="soft-lavender"] .grad,
[data-theme="creamy-mint"] .grad,
[data-theme="peach-sorbet"] .grad,
[data-theme="sky-pastel"] .grad,
[data-theme="moss-green"] .grad,
[data-theme="earth-brown"] .grad,
[data-theme="steel-grey"] .grad,
[data-theme="snow-ice"] .grad,
[data-theme="lavender-mist"] .grad,
[data-theme="mint-chocolate"] .grad,
[data-theme="graphite-blue"] .grad,
[data-theme="deep-rose"] .grad {
  background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* Reset y aplicación de fuentes */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.theme-dark { 
  background: var(--sc-bg); 
  color: var(--sc-text); 
}

.theme-light {
  --sc-bg: #0B1020;
  --sc-surface: #FFFFFF;
  --sc-elev: #F6F7FB;
  --sc-border: #E5E7EB;
  --sc-text: #0B1220;
  --sc-muted: #4B5563;
}

/* Utilidades */
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.grad { background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.inline { display: inline-block; }
.section { padding: 80px 0; }
.rounded { border-radius: var(--radius); }

/* Header/Nav */
.sc-header { 
  position: sticky; 
  top: 0; 
  backdrop-filter: blur(8px); 
  z-index: 50; 
  border-bottom: 1px solid var(--sc-border); 
  background: color-mix(in oklab, var(--sc-bg) 85%, transparent); 
}

.sc-nav { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  height:64px; 
}

.sc-logo { 
  display:flex; 
  align-items:center; 
  gap:10px; 
  font-weight:800; 
  text-decoration:none; 
  color:var(--sc-text);
  font-family: var(--font-primary);
  font-weight: 700;
}

.sc-logo img { height:32px; width:auto; }
.sc-logo .dot { color: var(--sc-primary); }
.sc-nav-actions { display:flex; gap:10px; align-items:center; }

/* Botones */
.sc-btn { 
  font-family: var(--font-primary);
  font-weight: 600;
  --p: var(--sc-primary); 
  --t: var(--sc-text); 
  border-radius:12px; 
  padding:10px 16px; 
  border:1px solid transparent; 
  cursor:pointer; 
  text-decoration:none; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:8px; 
  transition: all .18s ease; 
}

.sc-btn.primary { background: linear-gradient(135deg, var(--sc-primary-600), var(--sc-primary)); color:#fff; box-shadow: var(--shadow-soft); }
.sc-btn.primary:hover { transform: translateY(-1px); filter: saturate(1.05); }
.sc-btn.outline { background: transparent; color: var(--sc-text); border-color: var(--sc-border); }
.sc-btn.ghost { background: transparent; color: var(--sc-muted); }
.sc-btn.lg { padding:14px 20px; font-size: 1.05rem; }

/* Hero */
.sc-hero { padding: 96px 0 64px; background: radial-gradient(60% 60% at 20% 10%, color-mix(in oklab, var(--sc-primary) 20%, transparent), transparent 70%); position: relative; overflow: hidden; }
.grid-hero { display:grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items:center; }

.sc-hero-text h1 { 
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 14px 0 14px;
}

.sc-hero-text p { 
  color: var(--sc-muted); 
  max-width: 560px;
  font-size: 1.1rem;
  line-height: 1.7;
}

.sc-hero-text .actions { display:flex; gap:12px; margin-top:18px; flex-wrap: wrap; }
.sc-hero-media { position: relative; }
.sc-hero-media img { width:100%; height:auto; border-radius: var(--radius); box-shadow: var(--shadow); }

.sc-badge { 
  display:inline-block; 
  padding:8px 12px; 
  border-radius: 999px; 
  font-size:.85rem; 
  color:#fff; 
  background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary)); 
  box-shadow: var(--shadow-soft);
  font-family: var(--font-primary);
  font-weight: 600;
}

/* Stats */
.stats { display: flex; gap: 30px; margin-top: 40px; }
.stat { text-align: center; }
.number { 
  font-family: var(--font-primary);
  font-weight: 700;
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-size: 2rem; 
  display: block; 
  color: var(--sc-primary); 
}
.label { font-size: 0.9rem; color: var(--sc-muted); }

/* Floating Cards */
.floating-cards { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.floating-card-1, .floating-card-2, .floating-card-3 {
  position: absolute;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--radius);
  padding: 15px;
  width: 140px;
  box-shadow: var(--shadow-soft);
  animation: float 6s ease-in-out infinite;
  font-family: var(--font-primary);
}
.floating-card-1 { top: 10%; left: 5%; }
.floating-card-2 { top: 60%; right: 10%; }
.floating-card-3 { bottom: 20%; left: 15%; }
.card-icon { font-size: 1.5rem; margin-bottom: 8px; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Secciones / tarjetas */
.sc-section-alt { background: color-mix(in oklab, var(--sc-bg) 92%, var(--sc-elev)); }

.sc-title { 
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  text-align: center;
}

.grid-features { display:grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 18px; }
.feature-card { transition: transform 0.3s ease; position: relative; overflow: hidden; }
.feature-card:hover { transform: translateY(-5px); }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--sc-primary), var(--sc-secondary)); }
.feature-icon { font-size: 2rem; margin-bottom: 15px; }

.card { 
  background: var(--sc-surface); 
  border:1px solid var(--sc-border); 
  border-radius: var(--radius); 
  padding: 20px; 
  box-shadow: var(--shadow-soft);
  font-family: var(--font-primary);
}

.card h3 { 
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 12px;
}

.card p { 
  color: var(--sc-muted); 
  margin-bottom: 10px;
  line-height: 1.6;
}

.list { 
  margin: 0; 
  padding: 0 0 0 18px; 
  color: var(--sc-text);
  line-height: 1.6;
}

.list li { 
  margin: 8px 0;
  line-height: 1.5;
}

.card.muted { opacity:.85; }
.card.focus { outline: 2px solid color-mix(in oklab, var(--sc-primary) 35%, transparent); }

.flag { 
  display:inline-block; 
  font-size:.75rem; 
  letter-spacing:.06em; 
  padding:6px 10px; 
  border-radius:999px; 
  border:1px solid var(--sc-border); 
  background: var(--sc-elev); 
  margin-bottom: 8px;
  font-family: var(--font-primary);
  font-weight: 600;
}

.flag.old { color:#d96b6b; border-color: #3a2326; background: #24171a; }

.grid-compare { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 18px; }
.list.x li::marker { content: "✗ "; color: var(--sc-danger); }
.list.ok li::marker { content: "✓ "; color: var(--sc-success); }

/* Benefits */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 40px; }
.benefit-item { text-align: center; padding: 25px; font-family: var(--font-primary); }
.benefit-icon { font-size: 3rem; margin-bottom: 15px; }
.benefit-item h3 { margin-bottom: 10px; font-weight: 600; }

/* Testimonials */
.testimonials-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.testimonial-card { background: var(--sc-surface); border-radius: var(--radius); padding: 25px; border: 1px solid var(--sc-border); font-family: var(--font-primary); }
.testimonial-content { margin-bottom: 20px; font-style: italic; line-height: 1.6; }
.testimonial-author { display: flex; align-items: center; gap: 15px; }
.author-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary)); display: flex; align-items: center; justify-content: center; font-weight: bold; }
.author-info h4 { margin: 0; font-weight: 600; }
.author-info p { margin: 0; color: var(--sc-muted); font-size: 0.9rem; }

/* Accordion nativo <details> */
.accordion details { border:1px solid var(--sc-border); border-radius: 12px; background: var(--sc-surface); margin-bottom: 10px; overflow: hidden; transition: all 0.3s ease; font-family: var(--font-primary); }
.accordion details:hover { border-color: var(--sc-primary); }
.accordion summary { list-style: none; padding: 16px 18px; cursor: pointer; font-weight: 600; position: relative; }
.accordion summary::after { content: "+"; position: absolute; right: 18px; transition: transform 0.3s ease; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion summary::-webkit-details-marker { display:none; }
.ac-content { padding: 0 18px 16px; color: var(--sc-muted); line-height: 1.6; }

/* CTA final */
.sc-cta { background: radial-gradient(50% 60% at 80% 10%, color-mix(in oklab, var(--sc-secondary) 20%, transparent), transparent 70%); }
.grid-cta { display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items:center; }

/* Network Visualization */
.network-visual { position: relative; height: 300px; display: flex; justify-content: center; align-items: center; font-family: var(--font-primary); }
.node { width: 60px; height: 60px; border-radius: 50%; background: var(--sc-surface); border: 2px solid var(--sc-primary); display: flex; align-items: center; justify-content: center; position: absolute; font-size: 0.7rem; text-align: center; box-shadow: var(--shadow-soft); font-weight: 500; }
.center-node { background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary)); color: white; z-index: 10; }
.level-1 { width: 50px; height: 50px; }
.level-2 { width: 40px; height: 40px; font-size: 0.6rem; }

/* Position nodes in a network pattern */
.center-node { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.level-1:nth-child(2) { top: 30%; left: 30%; }
.level-1:nth-child(3) { top: 30%; right: 30%; }
.level-2:nth-child(4) { top: 60%; left: 20%; }
.level-2:nth-child(5) { top: 60%; right: 20%; }
.level-2:nth-child(6) { bottom: 20%; left: 50%; transform: translateX(-50%); }

/* Footer */
.sc-footer { border-top:1px solid var(--sc-border); background: color-mix(in oklab, var(--sc-bg) 90%, var(--sc-elev)); padding: 22px 0; font-family: var(--font-primary); }
.sc-footer-grid { display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap: wrap; }
.sc-footer .links { display:flex; gap: 16px; }
.sc-footer .links a { color: var(--sc-muted); text-decoration:none; font-weight: 500; }
.sc-footer .links a:hover { color: var(--sc-text); }

/* Imágenes lazy */
img.lazy { opacity: 0; transition: opacity .3s ease; }
img.loaded { opacity: 1; }

/* Responsive */
@media (max-width: 900px) {
  .grid-hero, .grid-cta { grid-template-columns: 1fr; }
  .sc-hero { padding-top: 88px; }
  .floating-cards { display: none; }
  .stats { justify-content: space-around; }
  .network-visual { height: 200px; }
  .node { width: 40px; height: 40px; font-size: 0.6rem; }
  .level-1 { width: 35px; height: 35px; }
  .level-2 { width: 30px; height: 30px; font-size: 0.5rem; }
  
  /* Ajustes de tipografía en móviles */
  .sc-hero-text h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
  }
  
  .sc-title {
    font-size: clamp(22px, 3vw, 32px);
  }
}