/*
 * ================================================================
 *  EL MAPA DEL DINERO — sections.css
 *  Estilos de todas las secciones de la página:
 *  Hero · Problema · Trilogía · Historia · Lead Magnet
 *  Blog · CTA Final · Footer
 * ================================================================
 */

/* ================================================================
   SECCIÓN BASE
================================================================ */
.section { position:relative; overflow:hidden; }

/* ================================================================
   1. HERO
================================================================ */
#hero {
  min-height : 100vh;
  display    : flex;
  align-items: center;
  padding    : 120px 0 100px;
}

/* Glows de fondo */
.hero-glow {
  position  : absolute;
  top       : -200px;
  left      : 50%;
  transform : translateX(-50%);
  width     : 800px;
  height    : 600px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero-glow-2 {
  position  : absolute;
  bottom    : 0; right:-100px;
  width     : 500px; height:500px;
  background: radial-gradient(ellipse, rgba(26,35,64,0.5) 0%, transparent 70%);
  pointer-events: none;
}

/* Layout hero */
.hero-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 80px;
  align-items           : center;
  position              : relative;
  z-index               : 1;
}

/* Eyebrow */
.hero-eyebrow {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  margin-bottom: 28px;
}
.hero-eyebrow-line  { width:32px; height:1px; background:var(--gold); flex-shrink:0; }
.hero-eyebrow-text  { font-size:12px; font-weight:500; letter-spacing:0.20em; text-transform:uppercase; color:var(--gold); }

/* Título */
h1.hero-title {
  font-family    : var(--font-display);
  font-size      : clamp(44px, 5.5vw, 72px);
  font-weight    : 500;
  line-height    : 1.08;
  letter-spacing : -0.01em;
  color          : var(--white);
  margin-bottom  : 24px;
}
h1.hero-title em { font-style:italic; color:var(--gold); }

.hero-desc {
  font-size     : 17px;
  line-height   : 1.7;
  color         : var(--muted2);
  margin-bottom : 40px;
  max-width     : 480px;
  font-weight   : 300;
}

.hero-cta-row { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px; }

/* Prueba social */
.hero-social-proof { display:flex; align-items:center; gap:16px; }

.avatar-stack { display:flex; }
.avatar-stack span {
  display       : inline-block;
  width:32px; height:32px;
  border-radius : 50%;
  border        : 2px solid var(--bg);
  background    : linear-gradient(135deg,#2a3a5c,#1a2340);
  margin-left   : -8px;
  font-size     : 12px;
  line-height   : 28px;
  text-align    : center;
  color         : rgba(255,255,255,0.6);
}
.avatar-stack span:first-child { margin-left:0; }

.social-proof-text { font-size:13px; color:var(--muted); line-height:1.5; }
.social-proof-text strong { color:var(--muted2); font-weight:500; }

/* ---- Mockup trilogía ---- */
.hero-mockup {
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : #FFFFFF;
  border-radius  : var(--r-xl);
  padding        : 40px;
  box-shadow     : 0 32px 80px rgba(0,0,0,0.30),
                   0 4px 16px rgba(0,0,0,0.12);
}

.mockup-img {
  max-width : 100%;
  height    : auto;
  display   : block;
}

/* Indicador scroll */
.scroll-indicator {
  position      : absolute;
  bottom        : 36px; left:50%;
  transform     : translateX(-50%);
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 8px;
  opacity       : 0.38;
  animation     : float 2.5s ease infinite;
  pointer-events: none;
}
.scroll-indicator span { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.scroll-indicator-line  { width:1px; height:40px; background:linear-gradient(180deg,var(--gold),transparent); }

/* ================================================================
   2. PROBLEMA
================================================================ */
#problem {
  padding   : var(--sp-xl) 0;
  background: linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}

.problem-intro { max-width:680px; margin:0 auto 64px; text-align:center; }
.problem-intro .section-label { text-align:center; }

.problem-grid {
  display               : grid;
  grid-template-columns : repeat(3,1fr);
  gap                   : 1px;
  background            : var(--border);
  border                : 1px solid var(--border);
  border-radius         : var(--r-lg);
  overflow              : hidden;
}

.problem-card { background:var(--bg); padding:36px 32px; transition:background 0.3s; }
.problem-card:hover { background:var(--bg-2); }

.problem-icon { width:44px; height:44px; margin-bottom:20px; opacity:0.75; }
.problem-icon svg { width:100%; height:100%; }

.problem-card h3 { font-family:var(--font-display); font-size:18px; font-weight:500; color:var(--white); margin-bottom:10px; line-height:1.3; }
.problem-card p  { font-size:14px; color:var(--muted); line-height:1.65; font-weight:300; }

.problem-stat {
  display        : inline-block;
  margin-top     : 16px;
  font-size      : 11px;
  font-weight    : 500;
  letter-spacing : 0.10em;
  color          : var(--gold);
  padding        : 4px 11px;
  border         : 1px solid rgba(201,168,76,0.25);
  border-radius  : 100px;
}

/* Cita central */
.problem-bottom {
  margin-top    : 64px;
  text-align    : center;
  padding       : 52px 48px;
  border        : 1px solid var(--border);
  border-radius : var(--r-xl);
  background    : var(--surface);
  position      : relative;
  overflow      : hidden;
}
.problem-bottom::before {
  content   : '';
  position  : absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:200px; height:1px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
}

.problem-quote {
  font-family : var(--font-display);
  font-size   : clamp(18px,2.5vw,26px);
  font-style  : italic;
  font-weight : 400;
  color       : var(--muted2);
  line-height : 1.55;
  max-width   : 640px;
  margin      : 0 auto 16px;
}
.problem-quote span { color:var(--white); }
.problem-attribution { font-size:13px; color:var(--muted); }

/* ================================================================
   3. TRILOGÍA
================================================================ */
#trilogy { padding:var(--sp-xl) 0; background:var(--bg-2); }

.trilogy-header { text-align:center; max-width:640px; margin:0 auto 72px; }

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

/* Tarjetas de volumen */
.vol-card {
  border-radius : var(--r-xl);
  padding       : 40px 36px;
  position      : relative;
  overflow      : hidden;
  border        : 1px solid transparent;
  transition    : transform 0.3s var(--ease), box-shadow 0.3s;
}
.vol-card:hover { transform:translateY(-6px); }

.vol-card-1 { background:linear-gradient(135deg,rgba(192,57,43,0.12) 0%,rgba(192,57,43,0.04) 100%); border-color:rgba(192,57,43,0.20); }
.vol-card-2 { background:linear-gradient(135deg,rgba(41,128,185,0.12) 0%,rgba(41,128,185,0.04) 100%); border-color:rgba(41,128,185,0.20); }
.vol-card-3 { background:linear-gradient(135deg,rgba(39,174,96,0.12) 0%,rgba(39,174,96,0.04) 100%); border-color:rgba(39,174,96,0.20); }

.vol-card-1:hover { box-shadow:0 24px 60px rgba(192,57,43,0.15); }
.vol-card-2:hover { box-shadow:0 24px 60px rgba(41,128,185,0.15); }
.vol-card-3:hover { box-shadow:0 24px 60px rgba(39,174,96,0.15); }

.vol-number { font-size:11px; font-weight:500; letter-spacing:0.20em; text-transform:uppercase; margin-bottom:24px; opacity:0.72; }
.vol-card-1 .vol-number { color:var(--vol1); }
.vol-card-2 .vol-number { color:var(--vol2); }
.vol-card-3 .vol-number { color:var(--vol3); }

.vol-keyword  { font-family:var(--font-display); font-size:38px; font-weight:600; color:var(--white); margin-bottom:8px; line-height:1; }
.vol-subtitle { font-family:var(--font-display); font-size:14px; font-style:italic; color:var(--muted2); margin-bottom:24px; }

.vol-divider { height:1px; margin-bottom:24px; opacity:0.30; }
.vol-card-1 .vol-divider { background:var(--vol1); }
.vol-card-2 .vol-divider { background:var(--vol2); }
.vol-card-3 .vol-divider { background:var(--vol3); }

.vol-desc { font-size:14px; color:var(--muted); line-height:1.7; font-weight:300; margin-bottom:28px; }

.vol-items { margin-bottom:32px; }
.vol-items li {
  font-size     : 13px;
  color         : var(--muted2);
  padding       : 7px 0;
  border-bottom : 1px solid rgba(255,255,255,0.05);
  display       : flex;
  align-items   : center;
  gap           : 10px;
}
.vol-items li:last-child { border-bottom:none; }
.vol-items li::before {
  content      : '';
  display      : inline-block;
  width:5px; height:5px;
  border-radius: 50%;
  flex-shrink  : 0;
}
.vol-card-1 .vol-items li::before { background:var(--vol1); }
.vol-card-2 .vol-items li::before { background:var(--vol2); }
.vol-card-3 .vol-items li::before { background:var(--vol3); }

.vol-cta {
  display       : inline-flex;
  align-items   : center;
  gap           : 8px;
  font-size     : 13px;
  font-weight   : 500;
  padding       : 10px 18px;
  border-radius : var(--r-sm);
  border        : 1px solid transparent;
  transition    : all 0.25s;
}
.vol-card-1 .vol-cta { color:var(--vol1); border-color:rgba(192,57,43,0.30); }
.vol-card-1 .vol-cta:hover { background:var(--vol1-dim); border-color:var(--vol1); }
.vol-card-2 .vol-cta { color:var(--vol2); border-color:rgba(41,128,185,0.30); }
.vol-card-2 .vol-cta:hover { background:var(--vol2-dim); border-color:var(--vol2); }
.vol-card-3 .vol-cta { color:var(--vol3); border-color:rgba(39,174,96,0.30); }
.vol-card-3 .vol-cta:hover { background:var(--vol3-dim); border-color:var(--vol3); }

/* Número decorativo */
.vol-card-bg-num {
  position      : absolute;
  bottom:-24px; right:16px;
  font-family   : var(--font-display);
  font-size     : 130px;
  font-weight   : 700;
  line-height   : 1;
  pointer-events: none;
  opacity       : 0.04;
  color         : white;
  user-select   : none;
}

/* ================================================================
   4. STORYTELLING
================================================================ */
#story {
  padding   : var(--sp-xl) 0;
  background: linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);
}

.story-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 40px;
  margin-top            : 64px;
}

.story-card {
  border        : 1px solid var(--border);
  border-radius : var(--r-xl);
  padding       : 48px 44px;
  background    : var(--surface);
  position      : relative;
  overflow      : hidden;
  transition    : border-color 0.3s;
}
.story-card:hover { border-color:var(--border-2); }

.story-abstract {
  position      : absolute;
  top:-40px; right:-40px;
  width:200px; height:200px;
  border-radius : 50%;
  pointer-events: none;
  opacity       : 0.07;
}
.story-card-sofia .story-abstract { background:radial-gradient(circle,var(--vol1),transparent); }
.story-card-marco .story-abstract { background:radial-gradient(circle,var(--vol2),transparent); }

.story-persona { font-size:11px; font-weight:500; letter-spacing:0.20em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.story-name    { font-family:var(--font-display); font-size:34px; font-weight:500; color:var(--white); margin-bottom:4px; }
.story-role    { font-size:14px; color:var(--muted); font-weight:300; margin-bottom:28px; }

.story-quote {
  font-family  : var(--font-display);
  font-size    : 18px;
  font-style   : italic;
  color        : var(--muted2);
  line-height  : 1.6;
  margin-bottom: 28px;
  padding-left : 20px;
  border-left  : 2px solid var(--gold);
}

.story-body { font-size:14px; color:var(--muted); line-height:1.75; font-weight:300; }

.story-transform {
  display      : flex;
  gap          : 12px;
  margin-top   : 28px;
  padding-top  : 28px;
  border-top   : 1px solid var(--border);
}

.story-before,
.story-after { flex:1; padding:14px; border-radius:var(--r-sm); font-size:12px; line-height:1.55; }
.story-before { background:rgba(192,57,43,0.08); color:rgba(192,57,43,0.85); }
.story-after  { background:rgba(39,174,96,0.08);  color:rgba(39,174,96,0.85); }

.story-transform-label { font-size:10px; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:6px; opacity:0.7; }

/* ================================================================
   5. PRECIOS
================================================================ */
#precios { padding:var(--sp-xl) 0; background:var(--bg); }

.precios-header { text-align:center; max-width:640px; margin:0 auto 64px; }

.precios-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 24px;
  max-width             : 860px;
  margin                : 0 auto;
}

.precio-card {
  background     : rgba(255,255,255,0.04);
  border         : 1px solid rgba(255,255,255,0.10);
  border-radius  : var(--r-xl);
  padding        : 40px 36px;
  display        : flex;
  flex-direction : column;
  position       : relative;
  transition     : transform 0.3s var(--ease), box-shadow 0.3s;
}
.precio-card:hover { transform:translateY(-4px); }

.precio-card-premium {
  background  : rgba(201,168,76,0.06);
  border-color: rgba(201,168,76,0.40);
  box-shadow  : 0 0 40px rgba(201,168,76,0.08);
}
.precio-card-premium:hover {
  box-shadow: 0 24px 60px rgba(201,168,76,0.15);
}

.precio-badge {
  display        : inline-block;
  font-size      : 10px;
  font-weight    : 700;
  letter-spacing : 0.18em;
  text-transform : uppercase;
  padding        : 4px 12px;
  border-radius  : 100px;
  background     : rgba(255,255,255,0.08);
  color          : var(--muted2);
  border         : 1px solid rgba(255,255,255,0.12);
  margin-bottom  : 20px;
  align-self     : flex-start;
}
.precio-badge-premium {
  background  : rgba(201,168,76,0.15);
  color       : var(--gold);
  border-color: rgba(201,168,76,0.30);
}

.precio-nombre {
  font-family  : var(--font-display);
  font-size    : 22px;
  font-weight  : 600;
  color        : var(--white);
  margin-bottom: 12px;
}

.precio-monto {
  font-size    : 20px;
  font-weight  : 400;
  color        : var(--muted2);
  margin-bottom: 12px;
  line-height  : 1;
}
.precio-monto span {
  font-size  : 52px;
  font-weight: 700;
  color      : var(--white);
  line-height: 1;
}

.precio-desc {
  font-size    : 14px;
  color        : var(--muted);
  line-height  : 1.65;
  margin-bottom: 28px;
  font-weight  : 300;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.precio-incluye { list-style:none; margin-bottom:32px; flex:1; }
.precio-incluye li {
  display      : flex;
  align-items  : flex-start;
  gap          : 10px;
  font-size    : 13px;
  color        : var(--muted2);
  padding      : 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  line-height  : 1.5;
}
.precio-incluye li:last-child { border-bottom:none; }
.precio-incluye li::before {
  content    : '✓';
  color      : var(--gold);
  font-weight: 700;
  font-size  : 13px;
  flex-shrink: 0;
  margin-top : 1px;
}

.precio-cta {
  display    : block;
  width      : 100%;
  text-align : center;
  font-weight: 700;
  margin-top : auto;
}

/* Botón primario dorado en la card premium */
.precio-card-premium .btn-primary {
  background : var(--gold);
  color      : #1A2340;
}
.precio-card-premium .btn-primary:hover {
  background : #d4b05e;
  box-shadow : 0 8px 28px rgba(201,168,76,0.35);
}

.precios-garantia {
  text-align   : center;
  font-size    : 14px;
  color        : var(--muted2);
  margin-top   : 40px;
  padding      : 16px 24px;
  background   : rgba(255,255,255,0.03);
  border       : 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  max-width    : 560px;
  margin-left  : auto;
  margin-right : auto;
  line-height  : 1.65;
}
.precios-garantia strong { color:var(--white); }

/* ================================================================
   6. GARANTÍA
================================================================ */
#garantia { padding:var(--sp-lg) 0; background:var(--bg-2); }

.garantia-inner {
  display        : flex;
  align-items    : center;
  gap            : 40px;
  padding        : 48px 56px;
  border         : 1px solid rgba(201,168,76,0.25);
  border-radius  : var(--r-xl);
  background     : rgba(201,168,76,0.04);
  max-width      : 860px;
  margin         : 0 auto;
  position       : relative;
  overflow       : hidden;
}
.garantia-inner::before {
  content   : '';
  position  : absolute;
  top:0; left:10%; right:10%;
  height    : 1px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
}

.garantia-icon { flex-shrink:0; opacity:0.9; }

.garantia-copy {}

.garantia-title {
  font-family  : var(--font-display);
  font-size    : clamp(20px,2.5vw,28px);
  font-weight  : 600;
  color        : var(--white);
  margin-bottom: 12px;
  line-height  : 1.25;
}

.garantia-text {
  font-size  : 15px;
  color      : var(--muted2);
  line-height: 1.75;
  font-weight: 300;
  max-width  : 580px;
}

@media (max-width:768px) {
  .garantia-inner { flex-direction:column; gap:24px; padding:36px 28px; text-align:center; }
  .garantia-icon  { margin:0 auto; }
}

/* ================================================================
   7. TESTIMONIOS
================================================================ */
#testimonios { padding:var(--sp-xl) 0; background:var(--bg); }

.testi-header { text-align:center; max-width:640px; margin:0 auto 64px; }

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

.testi-card {
  background    : rgba(255,255,255,0.04);
  border        : 1px solid var(--border);
  border-radius : var(--r-xl);
  padding       : 36px 32px;
  display       : flex;
  flex-direction: column;
  gap           : 20px;
  transition    : border-color 0.3s, transform 0.3s;
}
.testi-card:hover { border-color:var(--border-2); transform:translateY(-4px); }

.testi-estrellas {
  font-size    : 18px;
  color        : var(--gold);
  letter-spacing: 2px;
}

.testi-quote {
  font-family : var(--font-display);
  font-size   : 16px;
  font-style  : italic;
  color       : var(--muted2);
  line-height : 1.65;
  flex        : 1;
}

.testi-autor { margin-top:auto; padding-top:20px; border-top:1px solid var(--border); }

.testi-nombre { font-weight:600; font-size:14px; color:var(--white); margin-bottom:2px; }
.testi-pais   { font-size:12px; color:var(--muted); font-weight:300; }

@media (max-width:768px) {
  .testi-grid { grid-template-columns:1fr; }
}

/* ================================================================
   8. CALCULADORA
================================================================ */
#calculadora { padding:var(--sp-xl) 0; background:var(--bg-2); }

.calc-header { text-align:center; max-width:640px; margin:0 auto 56px; }

.calc-box {
  background    : var(--bg);
  border        : 1px solid var(--border);
  border-radius : var(--r-xl);
  padding       : 48px 56px;
  max-width     : 900px;
  margin        : 0 auto;
}

/* Inputs */
.calc-inputs {
  display               : grid;
  grid-template-columns : repeat(4,1fr);
  gap                   : 20px;
  margin-bottom         : 36px;
}

.calc-field {}

.calc-label {
  display        : block;
  font-size      : 12px;
  font-weight    : 500;
  color          : var(--muted2);
  letter-spacing : 0.04em;
  margin-bottom  : 8px;
}

.calc-hint {
  display    : block;
  font-size  : 11px;
  color      : var(--muted);
  font-weight: 300;
  margin-top : 2px;
}

.calc-input {
  width        : 100%;
  background   : rgba(255,255,255,0.07);
  border       : 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  padding      : 12px 14px;
  color        : var(--white);
  font-family  : var(--font-body);
  font-size    : 16px;
  font-weight  : 500;
  outline      : none;
  transition   : border-color 0.2s, background 0.2s;
}
.calc-input:focus {
  border-color: rgba(201,168,76,0.50);
  background  : rgba(255,255,255,0.09);
}
.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button { opacity:0.4; }

/* Tipo de depósito */
.calc-tipo-wrap  { margin-bottom:32px; }
.calc-tipo-label {
  font-size      : 12px;
  font-weight    : 500;
  color          : var(--muted2);
  letter-spacing : 0.04em;
  margin-bottom  : 12px;
}

.calc-tipo-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap    : 14px;
}

.calc-tipo-card {
  cursor      : pointer;
  border      : 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-md);
  padding     : 16px 20px;
  transition  : border-color 0.2s, background 0.2s;
  display     : block;
}
.calc-tipo-card:hover { border-color:rgba(201,168,76,0.30); }
.calc-tipo-card input[type="radio"] { display:none; }
.calc-tipo-card:has(input:checked) {
  border-color: rgba(201,168,76,0.50);
  background  : rgba(201,168,76,0.07);
}

.calc-tipo-titulo {
  font-weight  : 600;
  font-size    : 14px;
  color        : var(--white);
  margin-bottom: 4px;
}
.calc-tipo-badge {
  display        : inline-block;
  font-size      : 10px;
  font-weight    : 600;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : var(--gold);
  margin-bottom  : 8px;
}
.calc-tipo-desc {
  font-size  : 12px;
  color      : var(--muted);
  line-height: 1.55;
  font-weight: 300;
}

.calc-tipo-aviso {
  margin-top  : 12px;
  font-size   : 12px;
  color       : var(--muted);
  line-height : 1.55;
  padding     : 10px 14px;
  background  : rgba(201,168,76,0.05);
  border-left : 2px solid rgba(201,168,76,0.35);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.calc-tipo-aviso strong { color:var(--muted2); }

/* Botón */
.calc-btn { width:100%; justify-content:center; margin-bottom:0; font-size:16px; }

/* Resultados */
.calc-resultados { display:none; margin-top:40px; border-top:1px solid var(--border); padding-top:40px; }
.calc-resultados.visible { display:block; }

.calc-res-cards {
  display               : grid;
  grid-template-columns : 1fr 1fr 1fr;
  gap                   : 16px;
  margin-bottom         : 40px;
}

.calc-res-card {
  background    : rgba(255,255,255,0.04);
  border        : 1px solid var(--border);
  border-radius : var(--r-lg);
  padding       : 24px 20px;
  text-align    : center;
}
.calc-res-card-gold {
  background  : rgba(201,168,76,0.07);
  border-color: rgba(201,168,76,0.30);
}

.calc-res-label {
  font-size      : 11px;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : var(--muted);
  margin-bottom  : 8px;
}
.calc-res-valor {
  font-size  : 26px;
  font-weight: 700;
  color      : var(--white);
  line-height: 1.2;
}
.calc-res-card-gold .calc-res-valor { color:var(--gold); font-size:30px; }
.calc-res-sub {
  font-size  : 13px;
  color      : var(--gold);
  margin-top : 6px;
  font-weight: 500;
}

/* Gráfico de barras */
.calc-grafico-wrap { margin-bottom:40px; }

.calc-grafico-leyenda {
  display       : flex;
  gap           : 24px;
  margin-bottom : 16px;
  justify-content: flex-end;
}
.leyenda-item {
  display    : flex;
  align-items: center;
  gap        : 8px;
  font-size  : 12px;
  color      : var(--muted2);
  font-weight: 500;
}
.leyenda-item::before {
  content      : '';
  display      : block;
  width        : 12px;
  height       : 12px;
  border-radius: 2px;
  flex-shrink  : 0;
}
.leyenda-aportado::before { background:rgba(255,255,255,0.35); }
.leyenda-interes::before  { background:var(--gold); }

.calc-grafico {
  display    : flex;
  align-items: flex-end;
  gap        : 4px;
  height     : 180px;
  padding    : 0 4px;
  background : rgba(255,255,255,0.02);
  border-radius: var(--r-md);
  border     : 1px solid var(--border);
  overflow   : hidden;
}

.calc-barra-wrap {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  flex          : 1;
  height        : 100%;
  justify-content: flex-end;
  gap           : 0;
}

.calc-barra-col {
  width        : 100%;
  display      : flex;
  flex-direction: column;
  justify-content: flex-end;
}

.calc-barra-interes {
  background   : var(--gold);
  width        : 100%;
  border-radius: 2px 2px 0 0;
  min-height   : 2px;
  transition   : height 0.5s var(--ease-out);
}
.calc-barra-aportado {
  background: rgba(255,255,255,0.30);
  width     : 100%;
  min-height: 2px;
}

.calc-barra-etiqueta {
  font-size  : 9px;
  color      : var(--muted);
  margin-top : 5px;
  text-align : center;
  white-space: nowrap;
}

/* Tabla */
.calc-tabla-wrap {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.calc-tabla {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 13px;
}
.calc-tabla th {
  text-align     : left;
  font-size      : 10px;
  font-weight    : 700;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : var(--muted);
  padding        : 10px 16px;
  border-bottom  : 1px solid var(--border);
  white-space    : nowrap;
  background     : rgba(255,255,255,0.02);
}
.calc-tabla td {
  padding        : 10px 16px;
  border-bottom  : 1px solid rgba(255,255,255,0.04);
  color          : var(--muted2);
  font-variant-numeric: tabular-nums;
}
.calc-tabla tr:last-child td {
  border-bottom: none;
  color        : var(--gold);
  font-weight  : 600;
  background   : rgba(201,168,76,0.05);
}

/* CTA al pie */
.calc-cta-wrap {
  text-align: center;
  margin-top: 48px;
}

/* Responsive */
@media (max-width:768px) {
  .calc-box          { padding:32px 24px; }
  .calc-inputs       { grid-template-columns:1fr 1fr; }
  .calc-tipo-opciones{ grid-template-columns:1fr; }
  .calc-res-cards    { grid-template-columns:1fr; }
  .calc-grafico      { height:140px; }
}

@media (max-width:480px) {
  .calc-inputs { grid-template-columns:1fr; }
}

/* ================================================================
   9. LEAD MAGNET
================================================================ */
#lead-magnet { padding:var(--sp-xl) 0; background:var(--bg); position:relative; }

.lm-glow {
  position  : absolute; top:50%; left:50%;
  transform : translate(-50%,-50%);
  width:700px; height:450px;
  background: radial-gradient(ellipse,rgba(201,168,76,0.05) 0%,transparent 70%);
  pointer-events: none;
}

.lm-inner {
  border        : 1px solid rgba(201,168,76,0.20);
  border-radius : var(--r-xl);
  overflow      : hidden;
  position      : relative;
}
.lm-inner::before {
  content  : '';
  position : absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
}

.lm-grid { display:grid; grid-template-columns:1fr 1fr; }

.lm-left {
  padding    : 64px 56px;
  background : linear-gradient(135deg,rgba(201,168,76,0.06) 0%,transparent 60%);
  border-right: 1px solid rgba(201,168,76,0.10);
}

.lm-badge {
  display        : inline-flex;
  align-items    : center;
  gap            : 8px;
  padding        : 6px 14px;
  border-radius  : 100px;
  background     : rgba(201,168,76,0.10);
  border         : 1px solid rgba(201,168,76,0.22);
  font-size      : 11px;
  font-weight    : 500;
  color          : var(--gold);
  letter-spacing : 0.10em;
  text-transform : uppercase;
  margin-bottom  : 28px;
}

.lm-title { font-family:var(--font-display); font-size:clamp(24px,2.8vw,36px); font-weight:500; color:var(--white); line-height:1.22; margin-bottom:16px; }
.lm-title em { font-style:italic; color:var(--gold); }

.lm-desc { font-size:15px; color:var(--muted2); line-height:1.7; font-weight:300; margin-bottom:36px; }

.lm-includes li {
  display       : flex;
  align-items   : flex-start;
  gap           : 12px;
  font-size     : 14px;
  color         : var(--muted2);
  padding       : 10px 0;
  border-bottom : 1px solid rgba(255,255,255,0.05);
}
.lm-includes li:last-child { border-bottom:none; }

.lm-check {
  width:18px; height:18px; min-width:18px;
  border-radius : 50%;
  background    : rgba(201,168,76,0.14);
  display       : flex;
  align-items   : center;
  justify-content: center;
  margin-top    : 2px;
  flex-shrink   : 0;
}
.lm-check::after { content:'✓'; font-size:10px; color:var(--gold); font-weight:700; }

.lm-right {
  padding        : 64px 56px;
  background     : var(--surface);
  display        : flex;
  flex-direction : column;
  justify-content: center;
}

.lm-form-title { font-family:var(--font-display); font-size:22px; font-weight:500; color:var(--white); margin-bottom:8px; }
.lm-form-sub   { font-size:14px; color:var(--muted); margin-bottom:32px; font-weight:300; }
.form-privacy  { font-size:12px; color:var(--muted); text-align:center; margin-top:16px; font-weight:300; line-height:1.55; }

/* ================================================================
   6. BLOG
================================================================ */
#blog { padding:var(--sp-xl) 0; background:var(--bg-2); }

.blog-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; gap:24px; }

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

.blog-card {
  border        : 1px solid var(--border);
  border-radius : var(--r-lg);
  overflow      : hidden;
  background    : var(--bg);
  transition    : transform 0.3s var(--ease), border-color 0.3s;
  display       : block;
  cursor        : pointer;
}
.blog-card:hover { transform:translateY(-4px); border-color:var(--border-2); }

.blog-visual { height:180px; position:relative; overflow:hidden; }
.blog-visual-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.blog-visual-icon { font-size:52px; opacity:0.28; transition:opacity 0.3s, transform 0.3s; }
.blog-card:hover .blog-visual-icon { opacity:0.40; transform:scale(1.08); }

.blog-tag-pill {
  position       : absolute;
  top:16px; left:16px;
  font-size      : 10px;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  padding        : 4px 11px;
  border-radius  : 100px;
  background     : rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color          : var(--muted2);
  border         : 1px solid var(--border);
}

.blog-body   { padding:24px; }
.blog-date   { font-size:11px; color:var(--muted); margin-bottom:10px; }
.blog-title  { font-family:var(--font-display); font-size:17px; font-weight:500; color:var(--white); line-height:1.35; margin-bottom:10px; transition:color 0.2s; }
.blog-card:hover .blog-title { color:var(--gold); }
.blog-excerpt{ font-size:13px; color:var(--muted); line-height:1.65; font-weight:300; }
.blog-read   { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--gold); font-weight:500; margin-top:16px; transition:gap 0.2s; }
.blog-card:hover .blog-read { gap:10px; }

/* ================================================================
   7. CTA FINAL
================================================================ */
#cta-final { padding:160px 0; background:var(--bg); text-align:center; position:relative; }

.cta-glow {
  position  : absolute; top:50%; left:50%;
  transform : translate(-50%,-50%);
  width:700px; height:400px;
  background: radial-gradient(ellipse,rgba(26,35,64,0.9) 0%,transparent 70%);
  pointer-events: none;
}

.cta-inner { position:relative; max-width:680px; margin:0 auto; }

.cta-eyebrow { font-size:11px; font-weight:500; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); margin-bottom:24px; display:block; }

.cta-title { font-family:var(--font-display); font-size:clamp(36px,5vw,64px); font-weight:500; color:var(--white); line-height:1.1; letter-spacing:-0.01em; margin-bottom:20px; }
.cta-title em { font-style:italic; color:var(--gold); }

.cta-desc { font-size:17px; color:var(--muted2); line-height:1.7; font-weight:300; margin-bottom:48px; }

.cta-btn-row { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:40px; }

.cta-disclaimer { font-size:13px; color:var(--muted); font-weight:300; line-height:1.6; }

/* ================================================================
   8. FOOTER
================================================================ */
footer { background:var(--bg); border-top:1px solid var(--border); padding:64px 0 40px; }

.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }

.footer-brand-name { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--white); margin-bottom:4px; }
.footer-brand-by   { font-size:12px; color:var(--gold); letter-spacing:0.10em; text-transform:uppercase; margin-bottom:16px; }
.footer-tagline    { font-size:14px; color:var(--muted); line-height:1.65; font-weight:300; max-width:280px; margin-bottom:24px; }

.footer-social { display:flex; gap:12px; }
.social-icon {
  width:36px; height:36px;
  border-radius : var(--r-sm);
  border        : 1px solid var(--border);
  display       : flex;
  align-items   : center;
  justify-content: center;
  font-size     : 13px;
  color         : var(--muted2);
  transition    : all 0.2s;
}
.social-icon:hover { border-color:var(--border-2); color:var(--white); background:var(--surface); }

.footer-col-title { font-size:12px; font-weight:500; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted2); margin-bottom:20px; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { font-size:14px; color:var(--muted); font-weight:300; transition:color 0.2s; }
.footer-col ul li a:hover { color:var(--muted2); }

.footer-bottom { padding-top:32px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:24px; }
.footer-copy   { font-size:13px; color:var(--muted); font-weight:300; }
.footer-links  { display:flex; gap:24px; }
.footer-links a { font-size:13px; color:var(--muted); font-weight:300; transition:color 0.2s; }
.footer-links a:hover { color:var(--muted2); }

/* ================================================================
   9. RESPONSIVE — SECCIONES
================================================================ */
@media (max-width:1024px) {
  .hero-grid            { grid-template-columns:1fr; gap:56px; }
  .hero-mockup          { order:-1; }
  .trilogy-grid         { grid-template-columns:1fr; }
  .story-grid           { grid-template-columns:1fr; }
  .problem-grid         { grid-template-columns:1fr 1fr; }
  .blog-grid            { grid-template-columns:1fr 1fr; }
  .lm-grid              { grid-template-columns:1fr; }
  .lm-left              { border-right:none; border-bottom:1px solid rgba(201,168,76,0.10); }
  .footer-grid          { grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width:768px) {
  #hero               { padding:100px 0 60px; }
  .hero-mockup        { padding:24px; border-radius:var(--r-lg); }
  .precios-grid       { grid-template-columns:1fr; }
  .problem-grid       { grid-template-columns:1fr; }
  .blog-grid          { grid-template-columns:1fr; }
  .blog-header        { flex-direction:column; align-items:flex-start; }
  .lm-left,.lm-right  { padding:40px 28px; }
  .story-card         { padding:36px 28px; }
  .cta-btn-row        { flex-direction:column; align-items:center; }
  .footer-grid        { grid-template-columns:1fr; gap:32px; }
  .footer-bottom      { flex-direction:column; text-align:center; }
  .scroll-indicator   { display:none; }
}

@media (max-width:480px) {
  .vol-card           { padding:28px 24px; }
  .hero-cta-row       { flex-direction:column; }
  .hero-cta-row .btn  { width:100%; justify-content:center; }
  .story-transform    { flex-direction:column; }
  .lm-left,.lm-right  { padding:32px 20px; }
}

/* ================================================================
   GRACIAS.HTML — estilos exclusivos
================================================================ */
.gracias-hero {
  min-height : 60vh;
  display    : flex;
  align-items: center;
  padding    : 140px 0 80px;
  text-align : center;
}

.gracias-inner {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 24px;
  max-width     : 560px;
  margin        : 0 auto;
  position      : relative;
  z-index       : 1;
}

.gracias-check { opacity:0.95; }

.gracias-titulo {
  font-family  : var(--font-display);
  font-size    : clamp(28px,4vw,44px);
  font-weight  : 600;
  color        : var(--white);
  line-height  : 1.2;
}

.gracias-desc {
  font-size  : 16px;
  color      : var(--muted2);
  line-height: 1.7;
  font-weight: 300;
}

.gracias-download { min-width:240px; justify-content:center; }

/* Separador */
.gracias-separador { padding:0; background:var(--bg-2); }
.gracias-sep-inner {
  display    : flex;
  align-items: center;
  gap        : 24px;
  padding    : 32px 0;
  max-width  : 560px;
  margin     : 0 auto;
}
.gracias-sep-linea { flex:1; height:1px; background:var(--border); }
.gracias-sep-texto {
  font-size      : 12px;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : var(--muted);
  white-space    : nowrap;
}

/* Upsell */
.gracias-upsell { padding:var(--sp-xl) 0; background:var(--bg-2); }
.gracias-upsell-header { text-align:center; margin-bottom:48px; }

.gracias-premium-card {
  max-width     : 780px;
  margin        : 0 auto;
  background    : rgba(201,168,76,0.06);
  border        : 1px solid rgba(201,168,76,0.35);
  border-radius : var(--r-xl);
  padding       : 40px 48px;
  display       : flex;
  flex-direction: column;
  gap           : 24px;
  position      : relative;
  overflow      : hidden;
}
.gracias-premium-card::before {
  content   : '';
  position  : absolute;
  top:0; left:10%; right:10%;
  height    : 1px;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
}

.gracias-premium-grid {
  display               : grid;
  grid-template-columns : 1fr auto;
  gap                   : 40px;
  align-items           : start;
}

.gracias-premium-cta {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 16px;
  min-width     : 240px;
  padding-top   : 8px;
}

.gracias-garantia-nota {
  font-size  : 13px;
  color      : var(--muted2);
  text-align : center;
  line-height: 1.5;
}

.gracias-ver-opciones {
  font-size  : 13px;
  color      : var(--gold);
  font-weight: 500;
  text-align : center;
  transition : opacity .2s;
}
.gracias-ver-opciones:hover { opacity:0.75; }

@media (max-width:768px) {
  .gracias-premium-grid { grid-template-columns:1fr; }
  .gracias-premium-card { padding:32px 24px; }
  .gracias-premium-cta  { width:100%; }
  .gracias-premium-cta .btn { width:100%; justify-content:center; }
}

/* ================================================================
   PÁGINAS LEGALES Y CONTACTO — estilos compartidos
================================================================ */
.pagina-legal {
  padding   : 140px 0 var(--sp-xl);
  max-width : 760px;
  margin    : 0 auto;
}

.legal-titulo {
  font-family  : var(--font-display);
  font-size    : clamp(28px,4vw,44px);
  font-weight  : 600;
  color        : var(--white);
  line-height  : 1.2;
  margin-bottom: 8px;
}

.legal-fecha {
  font-size  : 13px;
  color      : var(--muted);
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.legal-body h2 {
  font-family  : var(--font-display);
  font-size    : 20px;
  font-weight  : 500;
  color        : var(--white);
  margin       : 40px 0 12px;
}

.legal-body h2:first-child { margin-top:0; }

.legal-body p {
  font-size  : 15px;
  color      : var(--muted2);
  line-height: 1.75;
  margin-bottom: 16px;
  font-weight: 300;
}

.legal-body ul {
  padding-left : 0;
  list-style   : none;
  margin-bottom: 16px;
}

.legal-body ul li {
  font-size    : 15px;
  color        : var(--muted2);
  line-height  : 1.7;
  padding      : 6px 0 6px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position     : relative;
  font-weight  : 300;
}
.legal-body ul li:last-child { border-bottom:none; }
.legal-body ul li::before {
  content  : '·';
  position : absolute;
  left     : 6px;
  color    : var(--gold);
  font-weight: 700;
}

.legal-body a { color:var(--gold); }
.legal-body a:hover { text-decoration:underline; }

.legal-body strong { color:var(--white); font-weight:500; }

/* Formulario de contacto */
.contacto-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 48px;
  align-items           : start;
}

.contacto-info h2 {
  font-family  : var(--font-display);
  font-size    : 22px;
  color        : var(--white);
  margin-bottom: 16px;
}

.contacto-info p {
  font-size  : 15px;
  color      : var(--muted2);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 12px;
}

.contacto-email {
  display    : inline-flex;
  align-items: center;
  gap        : 8px;
  font-size  : 15px;
  color      : var(--gold);
  font-weight: 500;
  margin-top : 8px;
}

.contacto-form-box {
  background    : rgba(255,255,255,0.03);
  border        : 1px solid var(--border);
  border-radius : var(--r-xl);
  padding       : 36px 32px;
}

.contacto-form-titulo {
  font-family  : var(--font-display);
  font-size    : 18px;
  color        : var(--white);
  margin-bottom: 24px;
}

.contacto-textarea {
  width        : 100%;
  background   : rgba(255,255,255,0.05);
  border       : 1px solid var(--border);
  border-radius: var(--r-sm);
  padding      : 13px 16px;
  color        : var(--white);
  font-family  : var(--font-body);
  font-size    : 15px;
  font-weight  : 300;
  line-height  : 1.65;
  resize       : vertical;
  min-height   : 140px;
  outline      : none;
  transition   : border-color .2s, background .2s;
}
.contacto-textarea::placeholder { color:var(--muted); }
.contacto-textarea:focus {
  border-color: rgba(201,168,76,0.40);
  background  : rgba(255,255,255,0.07);
}

.contacto-submit {
  width      : 100%;
  justify-content: center;
  margin-top : 8px;
}

.contacto-tiempo {
  font-size  : 12px;
  color      : var(--muted);
  text-align : center;
  margin-top : 12px;
  font-weight: 300;
}

@media (max-width:768px) {
  .pagina-legal        { padding:100px 0 var(--sp-lg); }
  .contacto-grid       { grid-template-columns:1fr; }
}

/* ================================================================
   SECCIONES LIGHT — TEMA CLARO
   Aplica a: #problem.light · #story.light · #blog.light
   Estrategia: overrides de alta especificidad — no toca reglas base.
================================================================ */

/* ── Paleta de colores para secciones claras ───────────────────── */
:root {
  --l-bg      : #F7F6F2;   /* crema cálida — complementa el oro */
  --l-white   : #FFFFFF;
  --l-text    : #1A2340;   /* azul marino — mismo que --navy */
  --l-muted   : #4E5A6B;
  --l-dim     : #8892A0;
  --l-gold    : #9E6E1A;   /* oro oscurecido para legibilidad sobre blanco */
  --l-border  : rgba(0,0,0,0.07);
  --l-border2 : rgba(0,0,0,0.13);
}

/* ── Base: fondo y tipografía de secciones claras ──────────────── */
.section.light { background: var(--l-bg) !important; }
#story.light   { background: var(--l-white) !important; }

.section.light .section-label   { color: var(--l-gold); }
.section.light .section-title   { color: var(--l-text); }
.section.light .section-title em { color: var(--gold); }
.section.light .section-desc    { color: var(--l-muted); }
.section.light h2,
.section.light h3                { color: var(--l-text); }
.section.light p                 { color: var(--l-muted); }

/* Botón fantasma adaptado a fondo claro */
.section.light .btn-ghost {
  color       : var(--l-text);
  border-color: rgba(0,0,0,0.18);
}
.section.light .btn-ghost:hover {
  background  : rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.28);
  color       : var(--l-text);
}

/* ── #problem.light ────────────────────────────────────────────── */
#problem.light {
  background: var(--l-bg) !important;
}

/* Grid: sin el separador blanco-alpha del modo oscuro */
#problem.light .problem-grid {
  background    : transparent;
  border        : none;
  gap           : 16px;
  border-radius : 0;
  overflow      : visible;
}

/* Tarjetas: blancas con sombra */
#problem.light .problem-card {
  background    : var(--l-white);
  border-radius : var(--r-lg);
  box-shadow    :
    0 1px 3px  rgba(0,0,0,0.04),
    0 4px 20px rgba(0,0,0,0.08);
  transition    : box-shadow 0.3s, transform 0.3s;
}
#problem.light .problem-card:hover {
  background : var(--l-white);
  box-shadow :
    0 4px 12px rgba(0,0,0,0.06),
    0 16px 48px rgba(0,0,0,0.12);
  transform  : translateY(-4px);
}

#problem.light .problem-icon { opacity: 0.85; }

#problem.light .problem-card h3 { color: var(--l-text); }
#problem.light .problem-card p  { color: #5A6478; }

#problem.light .problem-stat {
  color        : var(--gold);
  border-color : rgba(201,168,76,0.30);
  background   : rgba(201,168,76,0.07);
}

/* Isla oscura: la cita del autor vuelve al modo oscuro dentro del fondo claro */
#problem.light .problem-bottom {
  background  : #1A2340;
  border-color: rgba(201,168,76,0.22);
  box-shadow  : 0 24px 80px rgba(0,0,0,0.15);
}
#problem.light .problem-bottom::before {
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
#problem.light .problem-quote       { color: rgba(255,255,255,0.70); }
#problem.light .problem-quote span  { color: #FFFFFF; }
#problem.light .problem-attribution { color: rgba(255,255,255,0.40); }

/* ── #story.light ──────────────────────────────────────────────── */
#story.light { background: var(--l-white) !important; }

#story.light .section-label { color: var(--l-gold); }

/* Tarjetas: blancas flotantes */
#story.light .story-card {
  background  : var(--l-white);
  border-color: rgba(0,0,0,0.08);
  box-shadow  :
    0 1px 4px  rgba(0,0,0,0.04),
    0 8px 32px rgba(0,0,0,0.09);
}
#story.light .story-card:hover {
  border-color: rgba(201,168,76,0.30);
  box-shadow  :
    0 4px 16px rgba(0,0,0,0.08),
    0 20px 60px rgba(0,0,0,0.13);
}

#story.light .story-abstract { opacity: 0.05; }

#story.light .story-persona  { color: #9AA3B0; }
#story.light .story-name     { color: var(--l-text); }
#story.light .story-role     { color: #6B7585; }

#story.light .story-quote {
  color       : #2D3748;
  border-color: var(--gold);
}
#story.light .story-body { color: #5A6478; }

#story.light .story-transform { border-color: rgba(0,0,0,0.08); }

#story.light .story-transform-label { opacity: 0.75; }

/* ── #blog.light ───────────────────────────────────────────────── */
#blog.light { background: var(--l-bg) !important; }

#blog.light .section-label { color: var(--l-gold); }
#blog.light .section-title { color: var(--l-text); }

/* Tarjetas: blancas con sombra */
#blog.light .blog-card {
  background  : var(--l-white);
  border-color: rgba(0,0,0,0.07);
  box-shadow  :
    0 1px 4px  rgba(0,0,0,0.04),
    0 4px 20px rgba(0,0,0,0.07);
}
#blog.light .blog-card:hover {
  border-color: rgba(201,168,76,0.25);
  box-shadow  :
    0 4px 20px rgba(0,0,0,0.08),
    0 16px 48px rgba(0,0,0,0.12);
  transform   : translateY(-5px);
}

#blog.light .blog-visual-icon         { opacity: 0.30; }
#blog.light .blog-card:hover .blog-visual-icon { opacity: 0.50; }

/* Pill de categoría: fondo neutro oscuro */
#blog.light .blog-tag-pill {
  background  : rgba(13,19,32,0.07);
  color       : #3D4A5C;
  border-color: rgba(0,0,0,0.09);
}

#blog.light .blog-date    { color: #9AA3B0; }
#blog.light .blog-title   { color: var(--l-text); }
#blog.light .blog-card:hover .blog-title { color: var(--gold); }
#blog.light .blog-excerpt { color: #5A6478; }
#blog.light .blog-read    { color: var(--gold); }

/* Transición suave entre secciones dark/light */
#problem.light::before,
#story.light::before,
#blog.light::before {
  content         : '';
  position        : absolute;
  top             : 0; left: 0; right: 0;
  height          : 80px;
  background      : linear-gradient(180deg, rgba(26,35,64,0.04) 0%, transparent 100%);
  pointer-events  : none;
  z-index         : 0;
}

/* Mobile: gap más pequeño en problem grid */
@media (max-width:768px) {
  #problem.light .problem-grid { gap: 12px; }
}