/* ============================================================
   MIDINEROPE — styles.css v1 (sistema Fase 1)
   Fuente de verdad visual: index.html (raíz, producción) desde 2026-07-18.
   home-fase1.html fue el prototipo canónico original; ya no se mantiene sincronizado.
   Regla: ningún token ni componente se redeclara fuera de esta hoja.
   Gobernado por MAESTRO-FASE1.md v2.22
   ============================================================ */
@font-face {
  font-family: 'Alike';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/alike-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alike';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/alike-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  /* ============================================================
     HOME FASE 1 — CONSTRUIR COMUNIDAD
     Esqueleto: prototipo de Erica (home-nuevo.html)
     Ejecución: index-prototipo (copy, SVG, código de color, crema)
     Motor: captura de correo (KPI único de esta fase)
     Código de color: DORADO = personas · NEGRO = empresas
     ============================================================ */
  :root{
    --gold:#FFC300;
    --gold-dark:#D4A000;
    /* Dorado del TEXTO dorado (etiquetas .label y los <em> de titulo del hero y
       de .section-head). Para bordes, iconos y rellenos manda --gold-dark.

       03-08-2026 — DECISION DE ERICA: vuelve a #D4A000, el mismo dorado del
       titular del sitio antiguo (midinerope.com, "bienestar para tu bolsillo"),
       que es el que le gusta. Sustituye al #836400 que se habia puesto el
       02-08-2026 por contraste. Con esto el dorado de texto queda unificado en
       un solo tono en toda la web: hero, section-head, .tool-link, .help-tag y
       .hero-stat-card__label ya usaban #D4A000.

       Contrapartida asumida y verificada: #D4A000 da 2.3:1 sobre crema y 2.4:1
       sobre blanco, por debajo de AA (4.5:1 en texto normal, 3:1 en grande).
       Se probo antes #FFC300 y se veia deslavado; #A15C00 (naranja quemado,
       5.1:1) es el candidato medido si algun dia se prioriza el contraste.
       Para revertir, devolver este token a #836400. */
    --gold-text:#D4A000;
    --ink:#1A1A1A;
    --ink-2:#0F0F0F;
    --muted:#444;
    --cream:#FFFDF7;      /* crema cálido y claro, no gris (v2.14/v2.16) */
    --off:#FBF6EB;        /* crema cálido (decisión UX previa) */
    --gris:#F1F0EB;       /* gris cálido para intercalar franjas */
    --white:#FFFFFF;
    --ff-title:'Alike',Georgia,serif;
    --ff-body:'Open Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    --radius:12px;
    --radius-sm:6px;
    --gold-line:rgba(255,195,0,.15);        /* portado de styles.css — Tarea 3, bloque tokens */
    --gold-line-strong:rgba(255,195,0,.35); /* portado de styles.css — Tarea 3, bloque tokens */
    --shadow-light:0 2px 8px rgba(0,0,0,.04);
    --shadow-card:0 4px 32px rgba(0,0,0,.06);
    --shadow-gold:0 8px 24px rgba(255,195,0,.25);
    --shadow-gold-lg:0 16px 56px rgba(255,195,0,.20);
    --shadow-gold-hover:0 12px 36px rgba(255,195,0,.18);
    --T:.28s cubic-bezier(.4,0,.2,1);
    --nav-h:72px; /* token portado; aplicarlo a body/nav se resuelve en el bloque NAV */
    --grid-line:rgba(0,0,0,.05);   /* grid-32 opcional vía .has-grid — ver PROMPT-CONTINUIDAD v3, aún no está en el maestro */
    --grid-size:32px;

    /* ── PALETA DE DATOS — disponible en TIPO E (maestro §2.1) ────────────
       Azul, rojo y morado NO son colores de marca. Existen para un problema
       concreto: cuando un grafico compara tres o mas series, la escala de
       dorados son tres valores del mismo tono y a tamano de barra se leen
       como uno solo. Son etiquetas de serie, no semaforos: el rojo aqui no
       significa "error". Para estados siguen mandando --red y --green de
       stylesherramienta.css.
       Alcance: solo paginas Tipo E, y solo en elementos de visualizacion de
       datos (rellenos de barra, punto de leyenda, cifra de una serie). Nunca
       en botones, enlaces, NAV, footer, titulos ni CTA: el chrome es dorado
       y negro, sin excepcion.
       Dos familias, mismo criterio que --gold / --gold-text:
         --data-*        relleno. Pasa 4.5:1 con texto blanco encima y >=4.7:1
                         contra los fondos claros del sistema, asi que sirve
                         igual sobre .sec-ink que sobre .sec-off.
         --data-*-text   el color cuando ES texto. Sensible al tema, porque
                         sobre fondo oscuro el problema se invierte.
       Anadida el 02-08-2026 con la segunda Tipo E. */
    --data-blue:#2563EB;
    --data-red:#DC2626;
    --data-purple:#7C3AED;
    --data-blue-text:#1E40AF;
    --data-red-text:#B91C1C;
    --data-purple-text:#6D28D9;
  }
  [data-theme="dark"]{
    --grid-line:rgba(255,255,255,.05);
    --gold-text:#D4A000;
    /* Los rellenos no cambian: las barras viven sobre franja oscura en ambos
       temas. Solo se aclara la familia de texto. */
    --data-blue-text:#60A5FA;
    --data-red-text:#F87171;
    --data-purple-text:#A78BFA;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* Garantiza que `hidden` siempre oculte, aunque un componente (ej. .btn) fije su propio `display` (§ regla de publicación progresiva). */
  [hidden]{display:none !important;}
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--ink-2);
    padding:10px 18px; font-weight:700; z-index:10000; border-radius:0 0 6px 0;}
  .skip-link:focus{left:0;}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  body{
    font-family:var(--ff-body);
    color:var(--ink);
    background-color:var(--cream);
    line-height:1.6;
    padding-top:var(--nav-h); /* compensa el nav fixed — Tarea 3, bloque NAV */
  }
  h1,h2,h3{font-family:var(--ff-title); font-weight:400; color:var(--ink);}
  a{text-decoration:none; color:inherit;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
  svg.ic{width:26px; height:26px; stroke:var(--gold-dark); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

  /* ACCESIBILIDAD — foco visible obligatorio (§9 maestro) */
  :focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
  .sec-gold :focus-visible{outline-color:var(--ink);}
  @media (prefers-reduced-motion: reduce){
    *{transition:none!important; animation:none!important;}
  }

  /* NAV */
  header.nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; background:rgba(255,253,247,0.92); backdrop-filter:blur(4px);
    position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100;
    border-bottom:1px solid transparent; transition:all var(--T);
  }
  header.nav.scrolled{background:rgba(255,253,247,0.96); border-bottom-color:var(--gold-line); box-shadow:0 4px 24px rgba(0,0,0,.04);}
  /* La variante oscura base de header.nav ya vive en el bloque MODO OSCURO (final del archivo) */
  [data-theme="dark"] header.nav.scrolled{background:rgba(15,15,15,.96);}
  .logo-badge{display:flex; align-items:center; gap:10px;}
  /* Solo tamaño: el PNG del logo ya trae el círculo y el anillo dorado */
  .logo-circle{width:48px; height:48px;}
  .logo-word{font-family:var(--ff-title); letter-spacing:1px; font-size:16px;}
  nav.links{display:flex; align-items:center; gap:26px; font-size:14px; font-weight:600;}
  nav.links a:hover{color:var(--gold-dark);}
  nav.links a.active{color:var(--gold-dark); font-weight:700;}
  .nav-cta{
    background:var(--ink); color:var(--white)!important; border-radius:var(--radius-sm);
    padding:8px 18px; transition:all .2s ease;
    border:none; font-family:var(--ff-body); font-size:14px; font-weight:600; cursor:pointer;
  }
  .nav-cta:hover{background:var(--ink-2); color:var(--white)!important; transform:translateY(-1px);}

  /* Menú hamburguesa móvil — CSS portado de producción (Tarea 3, bloque NAV).
     Pendiente: HTML del botón .hamburger + JS que alterne .mobile-menu.open. */
  .hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none;}
  .hamburger span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:all var(--T);}
  .mobile-menu{
    display:none; position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(255,253,247,.98); backdrop-filter:blur(16px);
    padding:20px; border-bottom:1px solid var(--gold-line-strong); z-index:99;
    flex-direction:column; gap:4px;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{color:var(--muted); font-size:1rem; font-weight:500; padding:13px 16px; border-radius:10px; transition:all var(--T); display:block;}
  .mobile-menu a:hover{color:var(--ink); background:rgba(255,195,0,.1);}
  .mobile-menu .m-cta{background:var(--gold); color:var(--ink); font-weight:700; text-align:center; margin-top:8px; border-radius:50px;}
  [data-theme="dark"] .mobile-menu{background:rgba(15,15,15,.98);}
  /* ATENCIÓN — el menú hamburguesa está DORMIDO a propósito.
     `nav.links` contiene también .nav-cta y .theme-btn, así que ocultarlo entero
     sin un botón hamburguesa real dejaría el móvil sin navegación, sin CTA y sin
     cambio de tema. Mientras el HTML no incluya <button class="hamburger"> y su JS,
     se mantiene el degradado seguro de más abajo (§ RESPONSIVE): a ≤640px se ocultan
     solo los enlaces de texto y sobreviven el CTA y el botón de tema.
     PARA ACTIVARLO: añadir el botón + JS del toggle y recién ahí descomentar:
     @media(max-width:880px){ nav.links{display:none;} .hamburger{display:flex;} } */
  .theme-btn{
    background:none; border:1px solid rgba(26,26,26,.25); border-radius:50%;
    width:34px; height:34px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  /* Área táctil mínima 44×44 (§9) sin cambiar el tamaño visual del botón */
  .theme-btn::after{content:""; position:absolute; inset:-5px;}
  .theme-btn svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:2;}

  /* BOTONES */
  .btn{
    display:inline-block; padding:14px 28px; border-radius:var(--radius-sm); font-weight:700;
    font-size:14px; letter-spacing:0.3px; transition:transform .15s ease, background .15s ease;
    border:2px solid transparent; cursor:pointer;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--gold); color:var(--ink-2); border-color:var(--gold);}
  .btn-primary:hover{background:var(--gold-dark); border-color:var(--gold-dark);}
  /* Camino EMPRESAS — negro con letras blancas */
  .btn-ink{background:var(--ink); color:var(--white); border-color:var(--ink);}
  .btn-ink:hover{background:var(--ink-2); border-color:var(--ink-2);}

  /* HERO
     El 03-08-2026 se probo --gold (#FFC300) aqui, para igualar el dorado vivo de
     "Unete a la comunidad". Se revirtio el mismo dia: sobre el crema del hero da
     1.6:1 y se ve deslavado, no vivo. El dorado vivo necesita fondo oscuro. */
  .hero{padding:64px 24px 48px; text-align:center;}
  .hero .label{
    display:inline-block; font-size:13px; font-weight:700; letter-spacing:1px;
    color:var(--gold-text); text-transform:uppercase; margin-bottom:14px;
    padding:6px 14px; border:1px solid var(--gold); border-radius:20px;
  }
  .hero h1{font-size:clamp(34px,4.2vw,58px); line-height:1.15; max-width:900px; margin:0 auto 16px;}
  .hero h1 em{color:var(--gold-text); font-style:normal;}
  .hero p.bajada{max-width:640px; margin:0 auto 28px; color:var(--muted); font-size:17px;}
  .hero-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

  /* HERO — variante Quiénes Somos (2 columnas: título + tarjetas ¿qué no/sí hacemos)
     Scoped a .hero--qs, no afecta al .hero centrado usado en el resto del sitio. */
  .hero--qs{text-align:left; padding:36px 24px;}
  .hero--qs-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; max-width:1120px; margin:0 auto;}
  .hero--qs-left h1{margin:0 0 0 0; text-align:left;}
  .hero--qs-left .label{margin-bottom:16px;}
  .hero--qs-right{display:flex; flex-direction:column; gap:16px;}
  .hero-stat-card{background:var(--white); border:1px solid rgba(26,26,26,.1); border-radius:var(--radius); padding:18px 20px;}
  .hero-stat-card__label{text-align:center; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gold-dark); margin-bottom:10px;}
  .hero-stat-card--dark{background:var(--ink); border-color:var(--ink);}
  .hero-stat-card--dark .hero-stat-card__label{color:var(--gold);}
  .hero-stat-card__text{color:var(--white); font-size:15px; text-align:center; line-height:1.6;}
  .hero-stat-card__text strong{color:var(--gold);}
  .ind-chips{display:flex; flex-direction:column; gap:6px;}
  .chip{display:flex; align-items:center; gap:10px; background:var(--off); border-radius:10px; padding:9px 14px; font-size:13px; color:var(--muted);}
  .chip-dot{width:6px; height:6px; border-radius:50%; background:var(--gold-dark); flex-shrink:0;}
  @media(max-width:960px){.hero--qs-grid{grid-template-columns:1fr; gap:32px;}}

  /* GRID-32 opcional (gris, no dorado) — opt-in vía .has-grid.
     Acordado para Tipo D (fondo completo) y puntual en AA/A donde se menciona
     la plataforma. Pendiente de sumar al maestro. */
  .has-grid{
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
  }

  /* SECTION HEADERS */
  .section{padding:48px 24px; position:relative;}
  /* Separador dorado en el tope de cada sección — portado de styles.css (Tarea 3).
     Uniforme y sin excepciones: el ::before quedó libre al mover el grid-32 a .has-grid. */
  .section::before{
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:80%; max-width:1056px; height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,195,0,.6),transparent);
    pointer-events:none; z-index:1;
  }
  .section-head{text-align:center; max-width:680px; margin:0 auto 32px;}
  .section-head .label{
    font-size:13px; font-weight:700; letter-spacing:1px; color:var(--gold-text);
    text-transform:uppercase; margin-bottom:12px; display:block;
  }
  .section-head h2{font-size:clamp(26px,3.5vw,34px); line-height:1.2; margin-bottom:12px;}
  .section-head h2 em{color:var(--gold-text); font-style:normal;}
  .section-head p.sub{font-size:16px; color:var(--muted);}

  /* SUITE DE CONOCIMIENTO (protagonista de fase 1) */
  .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .info-card{
    background:var(--white); border:1px solid rgba(26,26,26,0.18); border-top:3px solid var(--gold);
    border-radius:var(--radius); padding:28px 22px; display:flex; flex-direction:column; gap:10px;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  a.info-card:hover{transform:translateY(-3px); box-shadow:0 6px 18px rgba(15,15,15,.10); border-color:var(--gold-dark); border-top-color:var(--gold);}
  /* Títulos de card: h3 (Home, jerarquía sin saltos §9) o h4 (páginas aún no migradas) */
  .info-card h3,.info-card h4{font-family:var(--ff-title); font-size:19px; color:var(--ink);}
  .info-card p{font-size:14px; color:var(--muted); flex-grow:1;}
  .info-card .go{font-size:13px; font-weight:700; color:var(--gold-dark);}
  .info-card-sm{padding:20px 18px; gap:8px;}
  .info-card-sm .ic{width:22px; height:22px;}
  .info-card-sm h3,.info-card-sm h4{font-size:17px;}
  .info-card-sm p{font-size:13px;}
  .suite-cta{text-align:center; margin-top:24px;}
  /* NOTA DE CIERRE — texto de énfasis premium bajo un grid de tarjetas (reutilizable en cualquier sección) */
  .section-note{
    font-family:var(--ff-title); font-style:italic; font-size:15px; color:var(--ink);
    text-align:center; max-width:680px; margin:28px auto 0; line-height:1.5;
  }

  /* NUESTRA MOTIVACIÓN — 4 tarjetas más compactas que el resto (scoped, no toca .info-card-sm global) */
  #motivacion .grid-3{grid-template-columns:repeat(4,1fr); gap:16px;}
  #motivacion .info-card{padding:16px 14px; gap:6px;}
  #motivacion .info-card h3{font-size:15px;}
  #motivacion .info-card p{font-size:12px;}
  @media(max-width:960px){#motivacion .grid-3{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:640px){#motivacion .grid-3{grid-template-columns:1fr;}}

  /* PRINCIPIOS (quienes-somos) — mismo ajuste compacto de 5 columnas que #motivacion */
  #principios .grid-3{grid-template-columns:repeat(5,1fr); gap:16px;}
  #principios .info-card{padding:16px 14px; gap:6px;}
  #principios .info-card h3{font-size:15px;}
  #principios .info-card p{font-size:12px;}
  @media(max-width:960px){#principios .grid-3{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:640px){#principios .grid-3{grid-template-columns:1fr;}}

  /* DESTACADOS — cada artículo es una landing propia (sin blog) */
  .destacados{padding:0 24px 48px;}
  .destacados .wrap{max-width:920px;}
  .destacado-band{
    display:flex; align-items:center; gap:24px; flex-wrap:wrap;
    background:var(--ink-2); border:1px solid rgba(255,195,0,.35); border-radius:var(--radius);
    padding:28px 32px;
  }
  .destacado-band .tag{
    font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    background:var(--gold); color:var(--ink-2); padding:4px 10px; border-radius:4px; flex-shrink:0;
  }
  .destacado-band .txt{flex:1; min-width:240px;}
  .destacado-band h3{color:var(--white); font-size:20px; margin-bottom:4px;}
  .destacado-band p{color:#CFCFC9; font-size:14px;}
  .destacado-band .btn{flex-shrink:0;}

  /* Nota de deslinde (reclamos) */
  .help-note{
    max-width:760px; margin:28px auto 0; font-size:13px; color:var(--muted);
    background:var(--white); border-left:3px solid var(--gold); border-radius:0 8px 8px 0;
    padding:14px 18px;
  }

  /* HERRAMIENTAS — franja dorada */
  .sec-gold{background:var(--gold);}
  .sec-gold .label{color:var(--ink);}
  .sec-gold .section-head h2 em{color:var(--ink);}
  .sec-gold .section-head p.sub{color:rgba(26,26,26,.8);}
  /* CTA dorado sobre franja dorada se pierde: superficie blanca, mismo criterio que .tool-card (§5) */
  .sec-gold .btn-primary{background:var(--white); color:var(--ink-2); border-color:var(--white);}
  .sec-gold .btn-primary:hover{background:var(--off); border-color:var(--off);}
  /* Excepción: botones dentro de una tarjeta blanca (ej. .enfoque-card) vuelven al dorado normal,
     porque ahí SÍ hay contraste contra la tarjeta, no contra la franja. */
  .sec-gold .enfoque-card .btn-primary{background:var(--gold); color:var(--ink-2); border-color:var(--gold);}
  .sec-gold .enfoque-card .btn-primary:hover{background:var(--gold-dark); border-color:var(--gold-dark);}
  .grid-tools{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:920px; margin:0 auto;}
  /* Variante de 4 tarjetas (ej. franja Formación de /cumplimiento/). Ver overrides en @media más abajo. */
  .grid-tools.is-4{grid-template-columns:repeat(4,1fr); max-width:1120px;}
  .tool-card{
    background:var(--white); border-radius:var(--radius); padding:28px 22px;
    display:flex; flex-direction:column; gap:12px; box-shadow:0 2px 10px rgba(15,15,15,.12);
  }
  .tool-card h3,.tool-card h4{font-family:var(--ff-title); font-size:17px;}
  .tool-card p{font-size:13px; color:var(--muted); flex-grow:1;}
  .tool-link{font-size:13px; font-weight:700; color:var(--gold-dark);}
  .tool-rating{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted);}
  .tool-rating .star{width:15px; height:15px; fill:var(--gold-dark); stroke:var(--gold-dark); stroke-width:1.5; flex-shrink:0;}

  /* DOS ENFOQUES */
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .enfoque-card{
    background:var(--white); border:1px solid rgba(26,26,26,0.08); border-radius:var(--radius);
    padding:40px 32px; display:flex; flex-direction:column;
    border-top:3px solid var(--gold);
  }
  .enfoque-card.emp{border-top-color:var(--ink);}
  .enfoque-card h3{font-size:22px; margin-bottom:10px;}
  .enfoque-card > p{font-size:14px; color:var(--muted); margin-bottom:20px;}
  .checklist{list-style:none; margin-bottom:24px; flex-grow:1;}
  .checklist li{font-size:14px; padding:6px 0; display:flex; gap:8px; align-items:flex-start;}
  .checklist li::before{content:"✓"; color:var(--gold-dark); font-weight:700;}
  .enfoque-card.emp .checklist li::before{color:var(--ink);}
  /* .enfoque-card es flex-column sin align-items → por defecto (stretch) el .btn se
     estiraba a todo el ancho de la tarjeta y se veía más grande que en el resto del sitio.
     Se fija al tamaño natural del botón (mismo que usamos en las demás secciones). */
  .enfoque-card > a.btn{align-self:flex-start;}

  /* AYUDA — Estamos contigo */
  .sec-off{background:var(--off);}
  .sec-gris{background:var(--gris);}
  .grid-help{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .help-card{
    background:var(--white); border:1px solid rgba(26,26,26,0.08); border-radius:var(--radius);
    padding:32px; display:flex; flex-direction:column; gap:10px;
  }
  .help-card h3,.help-card h4{font-family:var(--ff-title); font-size:19px;}
  .help-card p{font-size:14px; color:var(--muted); flex-grow:1;}
  .help-tag{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--gold-dark);}
  .help-link{font-size:14px; font-weight:700; color:var(--ink); border-bottom:2px solid var(--gold); width:fit-content;}

  /* CTA FINAL — MOTOR DE COMUNIDAD (captura de correo) */
  .cta-final{background:var(--ink-2); color:var(--white); padding:56px 24px;}
  .cta-final .wrap{text-align:center; max-width:720px;}
  .cta-final .label{color:var(--gold); font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; display:block; margin-bottom:14px;}
  .cta-final h2{color:var(--white); font-size:clamp(24px,3.5vw,32px); margin-bottom:14px;}
  .cta-final h2 em{color:var(--gold); font-style:normal;}
  .cta-final p.pitch{font-size:15px; color:#CFCFC9; max-width:560px; margin:0 auto 30px;}
  .newsletter-form{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:14px;}
  .newsletter-form input{
    padding:14px 18px; border-radius:var(--radius-sm); border:1px solid rgba(255,195,0,.4);
    background:rgba(255,255,255,.06); color:var(--white); font-size:14px; min-width:280px;
    font-family:var(--ff-body);
  }
  .newsletter-form input::placeholder{color:#9A9A94;}
  .newsletter-form button{font-family:var(--ff-body);}
  /* Carril 2 — Novedades (opt-in), check separado nunca premarcado (§11) */
  .newsletter-consent{
    display:flex; align-items:flex-start; gap:10px; justify-content:center; text-align:left;
    max-width:460px; margin:0 auto 14px; font-size:13px; color:#CFCFC9; cursor:pointer;
  }
  .newsletter-consent input[type="checkbox"]{
    width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--gold); cursor:pointer;
  }
  .newsletter-consent a{color:var(--gold); text-decoration:underline; text-underline-offset:2px;}
  .legal-note{font-size:12px; color:#7A7A74;}
  .legal-note a{color:var(--gold-dark); }
  .cta-b2b{margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:14px; color:#CFCFC9;}
  .cta-b2b a{color:var(--gold); font-weight:700; border-bottom:1px solid var(--gold);}

  /* ================= FASE 2–3 (OCULTO) =================
     Club Midinerope: se enciende cuando la comunidad exista.
     Quitar hidden y display:none para reactivar. */
  .club-card{display:none;}

  /* FOOTER */
  footer{
    background:#0A0A0A; color:#CFCFC9; padding:20px 24px 10px;
    border-top:3px solid var(--gold);
  }
  footer .wrap{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:12px; align-items:start;}
  /* Footer v3 (01-08-2026): el Home lleva 5 columnas (Nosotros · Educación Financiera ·
     Bienestar RRHH · Cumplimiento · Legal) y necesita una pista más. Las páginas que
     todavía llevan 4 columnas conservan la rejilla de arriba; al migrarlas, esta regla
     se activa sola. Ver overrides en el bloque RESPONSIVE. */
  footer .wrap:has(.footer-col:nth-of-type(5)){grid-template-columns:1.4fr 1fr 1fr 1fr 1fr 1fr;}
  footer .foot-logo{display:flex; align-items:center; gap:10px; margin-bottom:2px;}
  footer .foot-logo .logo-word{color:var(--gold);}
  footer p.desc{font-size:13px; max-width:300px; color:#9A9A94; margin-bottom:8px;}
  .foot-social{display:flex; gap:4px;}
  .foot-social a{
    display:flex; align-items:center; justify-content:center; width:28px; height:28px;
    border-radius:50%; border:1px solid rgba(255,255,255,.14); color:#CFCFC9; transition:all .2s ease;
  }
  .foot-social a svg{width:14px; height:14px;}
  .foot-social a:hover{color:var(--ink-2); background:var(--gold); border-color:var(--gold);}
  .footer-col-title{font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gold); margin-bottom:2px;}
  footer ul{list-style:none;}
  footer ul li{margin-bottom:0;}
  footer ul a{display:flex; align-items:center; min-height:30px; font-size:13px; color:#CFCFC9;}
  footer ul a:hover{color:var(--gold);}
  .foot-deslinde{
    grid-column:1 / -1; margin-top:6px; padding-top:6px;
    border-top:1px solid rgba(255,255,255,0.08);
    font-size:12px; color:#9A9A94; text-align:center; max-width:820px; justify-self:center;
  }
  .footer-bottom{
    grid-column:1 / -1; margin-top:4px; display:flex; align-items:center; justify-content:center;
    gap:6px; flex-wrap:wrap; font-size:12px; color:#7A7A74; text-align:center;
  }
  .footer-bottom svg{width:13px; height:13px; fill:#e63946; stroke:none; vertical-align:-2px;}
  .footer-bottom .sep{color:#4A4A46;}
  footer .copy{color:#7A7A74;}

  /* ============================================================
     COMPONENTES ADICIONALES (Quiénes Somos + reutilizables)
     grid-3 · list-plain · founder · timeline
     ============================================================ */
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}

  /* Lista neutra (ej. "¿Qué NO hacemos?") — sin ✓, para no confundir con checklist */
  .list-plain{list-style:none;}
  .list-plain li{font-size:14px; padding:6px 0; display:flex; gap:10px; align-items:flex-start; color:var(--muted);}
  .list-plain li::before{content:"—"; color:var(--gold-dark); font-weight:700; flex-shrink:0;}

  /* Etiqueta de categoría dentro de una card (Propósito / Visión / Misión) */
  .card-label{font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gold-dark);}

  /* PROPÓSITO · VISIÓN · MISIÓN — franja oscura con tarjetas transparentes (usa .sec-ink) */
  .vmp-card{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:20px 18px;}
  .vmp-divider{width:28px; height:2px; background:var(--gold); margin-bottom:10px;}
  .vmp-label{display:block; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}
  .vmp-card h3,.vmp-card h4{font-family:var(--ff-title); font-size:17px; margin-bottom:6px;}
  .vmp-card p{font-size:13px; color:#CFCFC9;}

  /* Sub-título punch dentro de .info-card, entre el h4 y el párrafo (ej. Principios en quienes-somos) */
  .info-card .card-tag{font-size:14px; font-weight:700; color:var(--ink); margin:2px 0 6px;}
  [data-theme="dark"] .info-card .card-tag{color:#FAFAF7;}

  /* FUNDADORA / AUTORÍA (reutilizable en firmas E-E-A-T de artículos) */
  .founder{display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:start;}
  .founder-card{
    background:var(--white); border:1px solid rgba(26,26,26,.12); border-top:3px solid var(--gold);
    border-radius:var(--radius); padding:24px; text-align:center;
  }
  .founder-photo{
    width:180px; height:180px; border-radius:50%; object-fit:cover;
    margin:0 auto 16px; display:block; border:3px solid var(--gold);
  }
  .founder-name{font-family:var(--ff-title); font-size:20px; color:var(--ink);}
  .founder-role{font-size:13px; color:var(--muted); margin-bottom:14px;}
  .founder-li{font-size:13px; font-weight:700; color:var(--gold-dark); display:inline-flex; align-items:center; gap:6px;}
  .founder-purpose{
    margin-top:14px; padding-top:14px; border-top:1px solid rgba(26,26,26,.1);
    font-family:var(--ff-title); font-size:13px; font-style:italic; color:var(--ink); line-height:1.45;
  }
  .founder-bio .pull{font-family:var(--ff-title); font-size:clamp(18px,2.4vw,22px); color:var(--ink); margin-bottom:22px; line-height:1.4;}
  .founder-bio p{font-size:15px; color:var(--muted); margin-bottom:14px;}
  .founder-bio p:last-child{margin-bottom:0;}

  /* FUNDADORA — variante 2 columnas con sidebar "Trayectoria" (solo quienes-somos, esquema producción)
     Más compacta que .founder base: gaps/paddings reducidos a pedido de Erica (2026-07-19). */
  .founder-v2{grid-template-columns:1.1fr .9fr; gap:32px;}
  .founder-v2 .founder-photo{width:140px; height:140px; margin-bottom:12px;}
  .founder-v2 .founder-name{font-size:18px;}
  .founder-v2 .founder-role{margin-bottom:10px;}
  .founder-v2 .founder-bio .pull{font-size:clamp(16px,2vw,19px); margin-bottom:14px;}
  .founder-v2 .founder-bio p{font-size:14px; margin-bottom:10px;}
  .founder-main{display:flex; flex-direction:row; gap:22px; align-items:flex-start;}
  .founder-main .founder-card{flex:0 0 180px; padding:16px; margin-bottom:0;}
  .founder-main .founder-bio{flex:1; min-width:0;}
  @media(max-width:640px){.founder-main{flex-direction:column;} .founder-main .founder-card{flex:0 0 auto; margin-bottom:16px;}}
  .founder-side{
    background:var(--off); border:1px solid rgba(26,26,26,.08); border-radius:var(--radius); padding:20px;
  }
  .founder-side-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:2px;}
  .founder-side-head h3{font-family:var(--ff-title); font-size:17px; color:var(--ink);}
  .founder-side-sub{font-size:12px; color:var(--muted); margin-top:2px;}
  .founder-years{
    flex-shrink:0; font-size:11px; font-weight:700; color:var(--gold-dark);
    border:1px solid var(--gold); border-radius:20px; padding:3px 10px; white-space:nowrap;
  }
  .founder-side .timeline{margin-top:14px; gap:16px;}
  .org-mark{
    display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
    margin-right:6px; border-radius:50%; background:var(--gold); color:var(--ink-2);
    font-size:10px; font-weight:700; vertical-align:middle;
  }
  .founder-cierre{
    margin-top:16px; padding-top:12px; border-top:1px solid rgba(26,26,26,.1);
    font-family:var(--ff-title); font-size:13px; font-style:italic; color:var(--ink); line-height:1.5;
  }

  /* TIMELINE / TRAYECTORIA — agrupada por organización (.tl-org una sola vez por grupo, no por puesto) */
  .timeline{
    margin-top:40px; border-left:2px solid rgba(212,160,0,.35); padding-left:26px;
    display:flex; flex-direction:column; gap:22px;
  }
  .tl-group{display:flex; flex-direction:column; gap:12px;}
  .tl-org{
    font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ink);
  }
  .tl-item{position:relative;}
  .tl-item::before{
    content:""; position:absolute; left:-33px; top:4px; width:12px; height:12px;
    border-radius:50%; background:var(--gold); border:2px solid var(--white);
  }
  .tl-year{font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--gold-dark);}
  .tl-title{font-family:var(--ff-title); font-size:15px; color:var(--ink); margin:2px 0;}
  .tl-desc{font-size:13px; color:var(--muted);}

  /* ============================================================
     PÁGINAS DE PRODUCTO (§8.1) — calc-band + page-deslinde
     ============================================================ */
  .calc-section{padding:44px 24px;}   /* franja compacta (§8.1) */
  .calc-band{
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px;
    background:var(--white); border-radius:var(--radius); padding:22px 28px;
    max-width:820px; margin:0 auto; box-shadow:0 2px 10px rgba(15,15,15,.12);
  }
  .calc-band-label{
    display:block; font-size:12px; font-weight:700; letter-spacing:1px;
    text-transform:uppercase; color:var(--gold-dark); margin-bottom:6px;
  }
  .calc-band h2{font-size:20px; line-height:1.25; margin-bottom:6px;}
  .calc-band h2 em{color:var(--gold-dark); font-style:normal;}
  .calc-band p{font-size:13px; color:var(--muted); margin-bottom:10px;}
  .calc-band .tool-rating{margin:0;}
  .calc-band .btn{flex-shrink:0; white-space:nowrap;}
  @media(max-width:640px){
    .calc-band{grid-template-columns:1fr; text-align:center; padding:22px 20px; gap:16px;}
    .calc-band .tool-rating{justify-content:center;}
    .calc-band .btn{width:100%; text-align:center;}
  }

  .page-deslinde{
    max-width:820px; margin:0 auto; padding:24px 24px 0;
    font-size:12px; color:var(--muted); text-align:center; line-height:1.6;
    border-top:1px solid rgba(26,26,26,.08);
  }
  [data-theme="dark"] .page-deslinde{color:#B8B8B0; border-top-color:rgba(255,195,0,.15);}

  /* ============================================================
     COMPARATIVO "A vs B" — dos tarjetas (clara/oscura), checklist
     con marcas ✗/✓. Reutilizable en cualquier landing de /aprende/<tema>/
     que necesite contrastar dos opciones (ver aprende/regla-50-30-20/).
     ============================================================ */
  .compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:56px;}
  .compare-col{border-radius:var(--radius); padding:28px 24px; border:1px solid rgba(26,26,26,.12); background:var(--white);}
  .compare-col-dark{background:var(--ink-2); border-color:rgba(255,195,0,.25);}
  .compare-badge{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    padding:5px 12px; border-radius:20px; margin-bottom:14px;
    background:var(--gris); color:var(--muted); border:1px solid rgba(26,26,26,.1);}
  .compare-badge-gold{background:rgba(255,195,0,.15); color:var(--gold-dark); border-color:rgba(255,195,0,.3);}
  .compare-col-dark .compare-badge-gold{color:var(--gold);}
  .compare-col h4{font-family:var(--ff-title); font-size:20px; margin-bottom:8px; color:var(--ink);}
  .compare-col-dark h4{color:var(--white);}
  .compare-col > p{font-size:14px; color:var(--muted); margin-bottom:18px;}
  .compare-col-dark > p{color:rgba(255,255,255,.6);}
  .compare-list{list-style:none; display:flex; flex-direction:column; gap:10px;}
  .compare-list li{font-size:13px; line-height:1.5; display:flex; gap:10px; align-items:flex-start; color:var(--muted);}
  .compare-col-dark .compare-list li{color:rgba(255,255,255,.75);}
  .compare-list li::before{flex-shrink:0; font-weight:700; font-size:14px; margin-top:1px;}
  .compare-list-neg li::before{content:"✗"; color:rgba(26,26,26,.35);}
  .compare-list-pos li::before{content:"✓"; color:var(--gold-dark);}
  .compare-col-dark .compare-list-pos li::before{color:var(--gold);}
  [data-theme="dark"] .compare-col:not(.compare-col-dark){background:#1A1A1A; border-color:rgba(255,195,0,.2);}
  /* El h4 heredaba color:var(--ink) (#1A1A1A) sobre la tarjeta oscura #1A1A1A:
     contraste 1:1, titulo invisible. Detectado el 02-08-2026 al estrenar
     .compare-grid en /planificador-50-30-20/ (Tipo E); antes solo vivia en un
     articulo que carga una hoja inexistente, asi que nunca llego a pintarse. */
  [data-theme="dark"] .compare-col:not(.compare-col-dark) h4{color:#FAFAF7;}
  [data-theme="dark"] .compare-col:not(.compare-col-dark) > p{color:#B8B8B0;}
  [data-theme="dark"] .compare-col:not(.compare-col-dark) .compare-list li{color:#B8B8B0;}
  [data-theme="dark"] .compare-col:not(.compare-col-dark) .compare-list-neg li::before{color:rgba(255,255,255,.3);}
  @media(max-width:640px){.compare-grid{grid-template-columns:1fr;}}

  /* ============================================================
     GLOSARIO — buscador + filtros + cards (hub /educacion/)
     08-08-2026: sustituye al <dl class="glossary-grid"> estatico de 8 terminos.
     El HTML ya no lista terminos: los pinta glosario-sistema-financiero/
     glosario-render.js leyendo glosario-datos.js (ver INSTRUCTIVO.md de esa
     carpeta). Las clases .gloss-item / .glossary-grid quedaron sin ningun
     consumidor y se retiraron con el cambio.
     ============================================================ */
  .glos-wrap{max-width:1000px; margin:0 auto;}

  /* Buscador */
  .glos-search{position:relative; margin-bottom:20px;}
  .glos-search svg{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:2;
    stroke-linecap:round; pointer-events:none;
  }
  #glosSearch{
    width:100%; padding:14px 16px 14px 46px;
    border:1px solid rgba(26,26,26,.18); border-radius:50px;
    font-family:var(--ff-body); font-size:15px;
    background:var(--white); color:var(--ink); outline:none;
    transition:border-color var(--T), box-shadow var(--T);
  }
  #glosSearch::placeholder{color:var(--muted); opacity:.7;}
  #glosSearch:focus{border-color:var(--gold-dark); box-shadow:0 0 0 3px rgba(255,195,0,.18);}

  /* Filtros por categoria */
  .glos-cats{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
  .glos-cat-btn{
    font-family:var(--ff-body); font-size:13px; font-weight:600;
    padding:7px 16px; border-radius:50px;
    border:1px solid rgba(26,26,26,.18); background:transparent; color:var(--muted);
    cursor:pointer; transition:all var(--T);
  }
  .glos-cat-btn:hover{border-color:var(--gold-dark); color:var(--ink);}
  .glos-cat-btn.on{background:var(--gold); border-color:var(--gold); color:var(--ink-2); font-weight:700;}

  /* Grid de terminos */
  .glos-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
  .glos-grid.collapsed .glos-card[data-extra="true"]{display:none;}
  .glos-card{
    display:flex; flex-direction:column;
    background:var(--white); border:1px solid rgba(26,26,26,.12); border-top:3px solid var(--gold);
    border-radius:var(--radius); padding:22px 20px;
    transition:transform var(--T), box-shadow var(--T), border-color var(--T);
  }
  .glos-card[hidden]{display:none;}
  .glos-card:hover{transform:translateY(-3px); box-shadow:0 6px 18px rgba(15,15,15,.10); border-color:var(--gold-dark); border-top-color:var(--gold);}
  .glos-card:target{border-color:var(--gold-dark); box-shadow:var(--shadow-gold-hover);}

  /* Pastilla de categoria. Cuatro tintes distintos para que la taxonomia se lea
     de un vistazo; son ETIQUETAS, no semaforos (el rojo aqui no es "error").
     Igual criterio que la paleta de datos del §2.1. El chrome sigue dorado y
     negro: ningun boton, enlace ni CTA usa estos colores. */
  .glos-cat-pill{
    display:inline-block; align-self:flex-start;
    font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    padding:3px 10px; border-radius:20px; margin-bottom:10px; border:1px solid;
  }
  .glos-cat-ahorro   {background:rgba(42,125,79,.12);  border-color:rgba(42,125,79,.30);  color:#1E6B41;}
  .glos-cat-credito  {background:rgba(192,57,43,.10);  border-color:rgba(192,57,43,.26);  color:#A32A1E;}
  .glos-cat-bancario {background:rgba(255,195,0,.18);  border-color:var(--gold-line-strong); color:#7A5C00;}
  .glos-cat-inversion{background:rgba(10,37,64,.10);   border-color:rgba(10,37,64,.20);   color:#0A2540;}

  .glos-term-name{font-family:var(--ff-title); font-size:17px; line-height:1.35; color:var(--ink); margin-bottom:8px;}
  .glos-def{font-size:14px; color:var(--muted); line-height:1.65;}
  .glos-ejemplo{
    font-size:13px; color:var(--muted); font-style:italic; line-height:1.6;
    margin-top:10px; padding-top:10px; border-top:1px dashed rgba(26,26,26,.14);
  }
  .glos-link{
    margin-top:12px; font-size:13px; font-weight:600; color:var(--ink);
    text-decoration:none; border-bottom:1px solid var(--gold); align-self:flex-start;
    transition:color var(--T), border-color var(--T);
  }
  .glos-link:hover{color:var(--gold-dark); border-color:var(--gold-dark);}

  /* Sin resultados + "Ver mas terminos" */
  .glos-noresults{text-align:center; padding:40px 20px; color:var(--muted); font-size:15px;}
  .glos-expand-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:28px auto 0; padding:11px 28px;
    background:transparent; border:1px solid rgba(26,26,26,.22); border-radius:50px;
    font-family:var(--ff-body); font-size:14px; font-weight:600; color:var(--ink);
    cursor:pointer; transition:all var(--T);
  }
  .glos-expand-btn:hover{background:var(--gold); border-color:var(--gold); color:var(--ink-2);}
  .glos-expand-btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; transition:transform var(--T);}
  .glos-expand-btn.open svg{transform:rotate(180deg);}

  /* Tema oscuro */
  [data-theme="dark"] #glosSearch{background:#1A1A1A; border-color:rgba(255,195,0,.20); color:#FAFAF7;}
  [data-theme="dark"] #glosSearch::placeholder{color:#8A8A82;}
  [data-theme="dark"] .glos-search svg{stroke:#B8B8B0;}
  [data-theme="dark"] .glos-cat-btn{border-color:rgba(255,255,255,.18); color:#B8B8B0;}
  [data-theme="dark"] .glos-cat-btn:hover{border-color:var(--gold); color:#FAFAF7;}
  [data-theme="dark"] .glos-cat-btn.on{background:var(--gold); border-color:var(--gold); color:var(--ink-2);}
  [data-theme="dark"] .glos-card{background:#1A1A1A; border-color:rgba(255,195,0,.15); border-top-color:var(--gold);}
  [data-theme="dark"] .glos-term-name{color:#FAFAF7;}
  [data-theme="dark"] .glos-def,
  [data-theme="dark"] .glos-ejemplo,
  [data-theme="dark"] .glos-noresults{color:#B8B8B0;}
  [data-theme="dark"] .glos-ejemplo{border-top-color:rgba(255,255,255,.14);}
  [data-theme="dark"] .glos-link{color:#FAFAF7;}
  [data-theme="dark"] .glos-link:hover{color:var(--gold);}
  [data-theme="dark"] .glos-expand-btn{border-color:rgba(255,255,255,.22); color:#FAFAF7;}
  [data-theme="dark"] .glos-expand-btn:hover{color:var(--ink-2);}
  [data-theme="dark"] .glos-cat-ahorro   {background:rgba(42,125,79,.22);  border-color:rgba(42,125,79,.45);  color:#7FD6A3;}
  [data-theme="dark"] .glos-cat-credito  {background:rgba(220,38,38,.18);  border-color:rgba(220,38,38,.40);  color:#F5A3A3;}
  [data-theme="dark"] .glos-cat-bancario {background:rgba(255,195,0,.18);  border-color:rgba(255,195,0,.40);  color:#FFD75E;}
  [data-theme="dark"] .glos-cat-inversion{background:rgba(96,165,250,.16); border-color:rgba(96,165,250,.35); color:#9EC5FF;}

  @media(max-width:640px){
    .glos-grid{grid-template-columns:1fr;}
    .glos-cats{gap:6px;}
    .glos-cat-btn{font-size:12px; padding:6px 13px;}
  }

  /* ============================================================
     EMPRESAS (B2B) — código de color NEGRO (§4)
     ============================================================ */
  /* Sección oscura genérica (siempre oscura en ambos temas) */
  .sec-ink{background:var(--ink-2); color:#CFCFC9;}
  /* Dos franjas oscuras seguidas. Estrenado el 08-08-2026 en bienestar/ al
     trasladar ahí la franja de Open Finance, que cae justo encima del CONTACTO
     (ambas .sec-ink): sin esto se funden en un unico bloque de ~700px, sin
     limite visible y con 96px de aire muerto entre los dos contenidos. Se
     recorta el padding duplicado y se marca la costura con la linea dorada del
     sistema. No se toca el fondo de ninguna de las dos: negro = empresas (§4). */
  .sec-ink + .sec-ink{border-top:1px solid var(--gold-line); padding-top:40px;}
  .sec-ink h2,.sec-ink h3,.sec-ink h4{color:var(--white);}
  .sec-ink .section-head .label{color:var(--gold);}
  .sec-ink .section-head h2 em{color:var(--gold);}
  .sec-ink .section-head p.sub{color:#B8B8B0;}
  .sec-ink .checklist li{color:#CFCFC9;}
  .sec-ink .checklist li::before{color:var(--gold);}
  /* CTA B2B sobre oscuro: negro con borde dorado (nunca botón dorado, §4) */
  .sec-ink .btn-ink,.cta-final .btn-ink{border-color:var(--gold);}

  /* ============================================================
     MOVIMIENTO — reveal on scroll (sitewide, §9 respeta reduced-motion)
     ============================================================ */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
  .reveal.visible{opacity:1; transform:none;}
  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }

  /* ============================================================
     TRAP-VIZ — ejemplo visual animado (barras comparativas, franja oscura)
     Reutilizable en cualquier landing de /aprende/<tema>/ con datos propios.
     ============================================================ */
  .trap-viz{
    background:rgba(255,255,255,.03); border:1px solid rgba(255,195,0,.25);
    border-radius:var(--radius); padding:24px 28px; position:relative;
  }
  .trap-viz::before{
    content:''; position:absolute; top:0; left:40px; right:40px; height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
  }
  .trap-viz-header{
    display:flex; align-items:center; gap:20px; padding:0 0 14px;
    border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:8px;
  }
  .trap-viz-header-label{flex-shrink:0; width:160px;}
  .trap-viz-header-bar{flex:1;}
  .trap-viz-header-cost{flex-shrink:0; width:110px; text-align:right;}
  .trap-viz-header-label,.trap-viz-header-bar,.trap-viz-header-cost{
    font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55);
  }
  .trap-scenario{display:flex; align-items:center; gap:20px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06);}
  .trap-scenario:last-of-type{border-bottom:none; padding-bottom:0;}
  .trap-scenario:first-of-type{padding-top:0;}
  .trap-scenario-label{flex-shrink:0; width:160px;}
  .trap-scenario-name{font-family:var(--ff-title); font-size:15px; color:var(--white); margin-bottom:3px;}
  .trap-scenario-sub{font-size:12px; color:rgba(255,255,255,.65);}
  .trap-bar-wrap{flex:1; position:relative; height:34px; display:flex; align-items:center;}
  .trap-bar{
    height:24px; border-radius:6px; display:flex; align-items:center; justify-content:flex-end;
    padding:0 12px; font-family:var(--ff-title); font-size:13px; color:var(--ink);
    transition:width 1.1s cubic-bezier(.4,0,.2,1); width:0%;
  }
  .trap-scenario.visible .trap-bar{width:var(--w,50%);}
  /* Escala de dorados — sin rojo/verde fuera de paleta (§3) */
  .trap-bar-1{background:rgba(255,195,0,.35); color:var(--white);}
  .trap-bar-2{background:var(--gold-dark);}
  .trap-bar-3{background:var(--gold);}
  /* Variantes de barra en paleta de datos (tokens --data-*, ver bloque de
     tokens arriba). Disponibles en Tipo E. La escala dorada .trap-bar-1/2/3
     sigue siendo la opcion por defecto: estas se usan cuando lo que importa
     es distinguir series entre si, no ilustrar el reparto de una misma cosa.
     Texto blanco sobre cada barra >=4.8:1; cada barra sobre --ink-2 >=3.3:1. */
  .trap-bar-blue{background:var(--data-blue); color:var(--white);}
  .trap-bar-red{background:var(--data-red); color:var(--white);}
  .trap-bar-purple{background:var(--data-purple); color:var(--white);}
  /* Punto de leyenda y cifra de serie — para que una Tipo E pueda etiquetar
     sus series fuera de la barra sin volver a escribir un hex a mano. */
  .data-dot{display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0;}
  .data-dot-blue{background:var(--data-blue);}
  .data-dot-red{background:var(--data-red);}
  .data-dot-purple{background:var(--data-purple);}
  .data-val-blue{color:var(--data-blue-text);}
  .data-val-red{color:var(--data-red-text);}
  .data-val-purple{color:var(--data-purple-text);}
  .trap-scenario-cost{flex-shrink:0; width:110px; text-align:right;}
  .trap-scenario-cost-label{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:3px;}
  .trap-scenario-cost-value{font-family:var(--ff-title); font-size:16px; color:var(--gold); line-height:1;}
  .trap-viz-foot{
    margin-top:22px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);
    font-size:13px; color:rgba(255,255,255,.65); text-align:center; line-height:1.6;
  }
  .trap-viz-foot strong{color:var(--gold); font-weight:700;}
  @media(max-width:880px){
    .trap-viz-header{display:none;}
    .trap-viz{padding:18px 16px;}
    .trap-scenario{flex-direction:column; align-items:stretch; gap:10px; padding:14px 0;}
    .trap-scenario-label,.trap-scenario-cost{width:auto; text-align:left;}
    .trap-bar-wrap{height:28px;}
    .trap-bar{height:20px; font-size:12px;}
  }
  @media(prefers-reduced-motion:reduce){
    .trap-bar{transition:none;}
  }

  /* Stats con dato + título + fuente citada (usa .info-card como contenedor) */
  .stat-num{font-family:var(--ff-title); font-size:2.2rem; color:var(--gold-dark); line-height:1; margin-bottom:4px;}
  .stat-source{
    font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
    border-top:1px solid rgba(26,26,26,.1); padding-top:12px; margin-top:auto;
  }

  /* Índice de Salud Financiera — tarjeta mockup (sobre oscuro) */
  .index-card{background:rgba(255,255,255,.04); border:1px solid rgba(255,195,0,.3); border-radius:var(--radius); padding:28px;}
  .index-score{font-family:var(--ff-title); font-size:3rem; color:var(--gold); line-height:1;}
  .index-score small{font-size:1.4rem; opacity:.5;}
  .index-sub{font-size:13px; color:var(--gold); margin:6px 0 22px;}
  .bar-row{margin-bottom:14px;}
  .bar-head{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:#CFCFC9; margin-bottom:6px;}
  .bar-track{height:6px; background:rgba(255,195,0,.15); border-radius:3px; overflow:hidden;}
  .bar-fill{height:100%; background:var(--gold); border-radius:3px;}

  /* Formulario B2B (sección #contacto oscura) */
  .b2b-form{display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left; max-width:640px; margin:0 auto 16px;}
  .b2b-form .full{grid-column:1 / -1;}
  .b2b-form label{display:block; font-size:13px; color:#CFCFC9; margin-bottom:6px;}
  .b2b-form input,.b2b-form textarea{
    width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid rgba(255,195,0,.4);
    background:rgba(255,255,255,.06); color:var(--white); font-size:14px; font-family:var(--ff-body);
  }
  .b2b-form input::placeholder,.b2b-form textarea::placeholder{color:#9A9A94;}
  .b2b-consent{grid-column:1 / -1; display:flex; gap:10px; align-items:flex-start; font-size:12px; color:#9A9A94;}
  .b2b-consent a{color:var(--gold);}
  .b2b-status{grid-column:1 / -1; font-size:13px; color:var(--gold); min-height:18px;}

  /* MODAL DE CONTACTO B2B — popup oculto por defecto.
     Escala de apilamiento (§10): banner de cookies 1000 · modales 1100 · skip-link 10000.
     El modal debe quedar SOBRE el banner: ambos pueden estar abiertos a la vez (empresas.html). */
  .modal-overlay{display:none; position:fixed; inset:0; z-index:1100; background:rgba(15,15,15,.7); align-items:center; justify-content:center; padding:24px;}
  .modal-overlay.open{display:flex;}
  .modal-box{background:var(--ink-2); border:1px solid rgba(255,195,0,.3); border-radius:var(--radius); padding:40px 32px; max-width:640px; width:100%; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 12px 40px rgba(0,0,0,.35);}
  .modal-close{position:absolute; top:8px; right:8px; width:44px; height:44px; background:none; border:none; color:var(--white); font-size:22px; line-height:1; cursor:pointer;}

  /* Modo oscuro de los componentes adicionales */
  [data-theme="dark"] .stat-source{color:#B8B8B0; border-top-color:rgba(255,195,0,.15);}
  [data-theme="dark"] .list-plain li,
  [data-theme="dark"] .founder-role,
  [data-theme="dark"] .founder-bio p,
  [data-theme="dark"] .tl-desc{color:#B8B8B0;}
  [data-theme="dark"] .founder-card{background:#1A1A1A; border-color:rgba(255,195,0,.3);}
  [data-theme="dark"] .founder-purpose{color:#FAFAF7; border-top-color:rgba(255,195,0,.15);}
  [data-theme="dark"] .founder-name,
  [data-theme="dark"] .founder-bio .pull,
  [data-theme="dark"] .tl-org,
  [data-theme="dark"] .tl-title{color:#FAFAF7;}
  [data-theme="dark"] .timeline{border-left-color:rgba(255,195,0,.3);}
  [data-theme="dark"] .tl-item::before{border-color:#1A1A1A;}
  [data-theme="dark"] .hero-stat-card{background:#1A1A1A; border-color:rgba(255,195,0,.2);}
  [data-theme="dark"] .hero-stat-card--dark{background:#1A1A1A; border-color:rgba(255,195,0,.25);}
  [data-theme="dark"] .chip{background:#141414; color:#B8B8B0;}
  [data-theme="dark"] .founder-side{background:#141414; border-color:rgba(255,195,0,.15);}
  [data-theme="dark"] .founder-side-head h3{color:#FAFAF7;}
  [data-theme="dark"] .founder-side-sub{color:#B8B8B0;}
  [data-theme="dark"] .founder-cierre{color:#FAFAF7; border-top-color:rgba(255,195,0,.15);}

  /* ============================================================
     COMPACTACIÓN — quienes-somos.html (scoped a body.qs-page)
     Reduce el padding de componentes COMPARTIDOS (.section/.cta-final/
     .section-head/.grid-3) solo en esta página; no afecta index.html,
     empresas.html ni las demás páginas que usan las mismas clases.
     Pedido explícito de Erica (2026-07-19): "compacta todas las secciones".
     ============================================================ */
  .qs-page .section{padding:32px 24px;}
  .qs-page .section-head{margin-bottom:20px;}
  .qs-page .cta-final{padding:36px 24px;}
  .qs-page .grid-3{gap:18px;}

  /* RESPONSIVE */
  @media(max-width:960px){
    .grid-4,.grid-tools,.grid-tools.is-4,.grid-3{grid-template-columns:repeat(2,1fr);}
    .founder{grid-template-columns:1fr;}
    footer .wrap,
    footer .wrap:has(.footer-col:nth-of-type(5)){grid-template-columns:1fr 1fr;}
  }
  @media(max-width:640px){
    .grid-4,.grid-tools,.grid-tools.is-4,.grid-2,.grid-help,.grid-3,.b2b-form{grid-template-columns:1fr;}
    nav.links{gap:16px;}
    /* Se ocultan solo los enlaces de texto: .nav-cta y .theme-btn siguen visibles.
       Sustituir por el menú hamburguesa cuando exista su HTML+JS (ver bloque NAV). */
    nav.links a:not(.nav-cta){display:none;}
    footer .wrap,
    footer .wrap:has(.footer-col:nth-of-type(5)){grid-template-columns:1fr;}
  }

  /* ============================================================
     BANNER DE COOKIES (cookies.js) — chrome propio, siempre oscuro
     independiente del tema de la página. z-index en escala (§10): 1000.
     ============================================================ */
  .ck-banner{
    position:fixed; left:20px; bottom:20px; right:20px; max-width:460px;
    background:var(--ink); color:#FFFFFF; border-radius:var(--radius);
    border:1px solid rgba(255,195,0,.3); padding:22px 24px; z-index:1000;
    box-shadow:0 12px 40px rgba(0,0,0,.35);
    transform:translateY(140%); transition:transform .4s cubic-bezier(.4,0,.2,1);
  }
  .ck-banner.open{transform:translateY(0);}
  .ck-banner-title{font-family:var(--ff-title); font-size:17px; margin-bottom:6px; color:#FFFFFF;}
  .ck-dot{display:inline-block; width:8px; height:8px; background:var(--gold); border-radius:50%; margin-right:8px; vertical-align:middle;}
  .ck-banner-text{font-size:13px; color:rgba(255,255,255,.7); line-height:1.6; margin-bottom:16px;}
  .ck-banner-text a{color:var(--gold);}
  .ck-banner-actions{display:flex; flex-wrap:wrap; gap:8px;}
  .ck-btn{
    flex:1 1 auto; min-width:110px; padding:10px 14px; border-radius:50px; border:1px solid transparent;
    font-family:var(--ff-body); font-size:13px; font-weight:700; cursor:pointer;
    transition:background .2s ease, border-color .2s ease, color .2s ease; white-space:nowrap;
  }
  .ck-btn-primary{background:var(--gold); color:var(--ink-2); border-color:var(--gold);}
  .ck-btn-primary:hover{background:var(--gold-dark); border-color:var(--gold-dark);}
  .ck-btn-secondary{background:transparent; color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.3);}
  .ck-btn-secondary:hover{border-color:var(--gold); color:var(--gold);}
  .ck-btn-tertiary{background:transparent; color:rgba(255,255,255,.55); text-decoration:underline; text-underline-offset:3px; padding:10px 4px; flex:0 0 auto; min-width:0;}
  .ck-btn-tertiary:hover{color:var(--gold);}
  .ck-prefs{display:none; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.15);}
  .ck-banner.show-prefs .ck-prefs{display:block;}
  .ck-pref-row{display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08);}
  .ck-pref-row:last-child{border-bottom:none;}
  .ck-pref-info{flex:1;}
  .ck-pref-name{font-size:13px; color:#FFFFFF; font-weight:700; margin-bottom:2px;}
  .ck-pref-desc{font-size:12px; color:rgba(255,255,255,.55); line-height:1.5;}
  .ck-pref-toggle{width:38px; height:22px; background:rgba(255,255,255,.15); border-radius:50px; position:relative; flex-shrink:0; cursor:pointer; transition:background .2s ease; margin-top:2px;}
  .ck-pref-toggle::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#FFFFFF; border-radius:50%; transition:transform .2s ease;}
  .ck-pref-toggle.on{background:var(--gold);}
  .ck-pref-toggle.on::after{transform:translateX(16px);}
  .ck-pref-toggle.locked{background:rgba(212,160,0,.4); cursor:not-allowed;}
  .ck-pref-toggle.locked::after{transform:translateX(16px);}
  .ck-prefs-actions{display:flex; gap:8px; margin-top:14px;}
  @media(max-width:520px){
    .ck-banner{left:12px; right:12px; bottom:12px; padding:18px 20px;}
    .ck-btn{min-width:0; flex:1 1 100%;}
  }

  /* ============================================================
     EMPRESAS — Open Finance (franja .sec-ink, dos columnas)
     Antes vivían como <style> inline en empresas.html con colores
     fijos y variables sin declarar (--bg, --bg-card); se integran
     aquí como tokens del sistema (§ regla: nada se redeclara fuera
     de esta hoja).
     ============================================================ */
  .open-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; max-width:1000px; margin:0 auto;}
  /* Reutiliza el patrón visual de .label (pill con borde) pero fuera de .section-head/.hero,
     por eso vive como componente propio en vez de duplicar reglas con colores fijos. */
  .label-tag{
    display:inline-block; font-size:13px; font-weight:700; letter-spacing:1px;
    color:var(--gold); text-transform:uppercase; margin-bottom:14px;
    padding:6px 14px; border:1px solid var(--gold); border-radius:20px;
  }
  .open-grid .col-left h2{font-size:clamp(24px,3vw,32px); line-height:1.2; margin:6px 0 16px;}
  .open-grid .col-left p{font-size:15px; line-height:1.7; color:#B8B8B0;}
  /* Panel para el checklist: le da el mismo peso visual que la columna de texto,
     con el acento superior que ya usa .trap-viz en esta misma franja oscura. */
  .open-grid .col-right{
    position:relative; background:rgba(255,255,255,.03); border:1px solid rgba(255,195,0,.18);
    border-radius:var(--radius); padding:32px 32px 8px;
  }
  .open-grid .col-right::before{
    content:''; position:absolute; top:0; left:32px; right:32px; height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
  }
  .open-grid .col-right .checklist li{padding:10px 0;}
  @media(max-width:960px){.open-grid{grid-template-columns:1fr; gap:28px;}}

  /* Corrección de contraste: .modal-box siempre es oscuro (§ ambos temas),
     pero heredaba h1/h2/h3{color:var(--ink)} y quedaba casi invisible. */
  .modal-box h2{color:var(--white);}
  .modal-box .sub{color:#B8B8B0; margin-bottom:28px;}

  /* ============================================================
     MODO OSCURO
     ============================================================ */
  [data-theme="dark"] body{background:#0F0F0F; color:#FAFAF7;}
  [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3{color:#FAFAF7;}
  [data-theme="dark"] header.nav{background:rgba(15,15,15,.92); border-bottom-color:rgba(255,195,0,.15);}
  [data-theme="dark"] .theme-btn{border-color:rgba(250,250,247,.3);}
  [data-theme="dark"] .theme-btn svg{stroke:#FAFAF7;}
  [data-theme="dark"] .nav-cta{border:1px solid var(--gold);}
  [data-theme="dark"] .btn-ink{border-color:var(--gold);}
  [data-theme="dark"] .hero p.bajada{color:#B8B8B0;}
  [data-theme="dark"] .section-head p.sub{color:#B8B8B0;}
  [data-theme="dark"] .section-note{color:#FAFAF7;}
  [data-theme="dark"] .info-card{background:#1A1A1A; border-color:rgba(255,195,0,.3); border-top-color:var(--gold);}
  [data-theme="dark"] .tool-card,
  [data-theme="dark"] .enfoque-card,
  [data-theme="dark"] .help-card{background:#1A1A1A; border-color:rgba(255,195,0,.15);}
  [data-theme="dark"] .info-card h3,
  [data-theme="dark"] .info-card h4,
  [data-theme="dark"] .tool-card h3,
  [data-theme="dark"] .tool-card h4,
  [data-theme="dark"] .help-card h3,
  [data-theme="dark"] .help-card h4{color:#FAFAF7;}
  [data-theme="dark"] .info-card p,
  [data-theme="dark"] .tool-card p,
  [data-theme="dark"] .enfoque-card > p,
  [data-theme="dark"] .checklist li,
  [data-theme="dark"] .help-card p{color:#B8B8B0;}
  [data-theme="dark"] .help-link{color:#FAFAF7;}
  [data-theme="dark"] .sec-off{background:#141414;}
  [data-theme="dark"] .sec-gris{background:#181818;}
  [data-theme="dark"] .destacado-band{border-color:rgba(255,195,0,.45);}
  [data-theme="dark"] .help-note{background:#1A1A1A; color:#B8B8B0;}
  /* La franja dorada se mantiene dorada; encabezados a tinta */
  [data-theme="dark"] .sec-gold{background:var(--gold);}
  [data-theme="dark"] .sec-gold .section-head h2{color:var(--ink);}
  [data-theme="dark"] .sec-gold .section-head h2 em{color:var(--ink);}
  [data-theme="dark"] .sec-gold .label{color:var(--ink);}
  [data-theme="dark"] .sec-gold .section-head p.sub{color:rgba(26,26,26,.8);}
  [data-theme="dark"] .sec-gold .tool-card{background:var(--white); border-color:transparent;}
  [data-theme="dark"] .sec-gold .tool-card h3,
  [data-theme="dark"] .sec-gold .tool-card h4{color:var(--ink);}
  [data-theme="dark"] .sec-gold .tool-card p{color:var(--muted);}

/* ============================================================
   AÑADIDO — soporte para el sistema de modales (Política de
   Cookies + Modal de contacto B2B) que index.html conserva de
   la versión anterior y que no formaba parte del CSS del
   prototipo nuevo. Usa los mismos tokens de :root.
   ============================================================ */
.privacy-modal-overlay{
  position:fixed; inset:0; background:rgba(15,15,15,.6);
  display:flex; align-items:center; justify-content:center; padding:24px;
  z-index:1100; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.privacy-modal-overlay.open{opacity:1; pointer-events:auto;}
.privacy-modal{
  background:var(--white); border-radius:var(--radius); max-width:640px; width:100%;
  max-height:85vh; overflow-y:auto; padding:32px; position:relative;
}
/* Acento dorado superior — portado de styles.css (mismo patrón que .trap-viz/.open-grid) */
.privacy-modal::before{
  content:''; position:absolute; top:0; left:32px; right:32px; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.privacy-modal--form{max-width:560px;}
.privacy-modal-close{
  position:absolute; top:16px; right:16px; background:none; border:none;
  font-size:24px; line-height:1; cursor:pointer; color:var(--ink);
  transition:color .2s ease;
}
.privacy-modal-close:hover{color:var(--gold-dark);}
.privacy-modal-badge{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--ink-2); background:var(--gold);
  padding:4px 12px; border-radius:20px; margin-bottom:14px;
}
.privacy-modal h2{font-family:var(--ff-title); font-size:26px; margin-bottom:8px;}
.privacy-modal h2 em{color:var(--gold-dark); font-style:normal;}
.privacy-modal-date{font-size:13px; color:var(--muted); margin-bottom:20px;}
.privacy-modal-body{border-top:1px solid rgba(26,26,26,.1); padding-top:22px;}
.privacy-modal-body h3{font-family:var(--ff-title); font-size:18px; margin:22px 0 8px;}
.privacy-modal-body h4{font-size:15px; font-weight:700; margin:14px 0 6px;}
.privacy-modal-body p,.privacy-modal-body li{font-size:14px; color:var(--muted); line-height:1.6;}
.privacy-modal-body ul{padding-left:20px; margin-bottom:10px;}
.privacy-modal-body a{color:var(--gold-dark);}
.privacy-modal-body strong{color:var(--ink);}
.cm-intro{font-size:14px; color:var(--muted); margin-bottom:18px;}
.pm-highlight{background:var(--off); border-left:3px solid var(--gold); padding:14px 16px; border-radius:var(--radius-sm); margin:16px 0;}
.pm-highlight p{color:var(--ink); font-size:14px; line-height:1.6;}
.pm-highlight strong{color:var(--ink);}
/* Aviso destacado: fondo tinta + acento dorado (paleta de marca, sin rojo — §3) */
.pm-warning{background:var(--ink); border-left:3px solid var(--gold); padding:14px 16px; border-radius:var(--radius-sm); margin:16px 0;}
.pm-warning p{color:rgba(255,255,255,.9); font-size:14px; line-height:1.6;}
.pm-warning strong{color:var(--gold);}
.pm-table{width:100%; border-collapse:collapse; margin:12px 0; font-size:13px;}
.pm-table th,.pm-table td{border:1px solid rgba(26,26,26,.12); padding:8px 10px; text-align:left; vertical-align:top; line-height:1.5;}
.pm-table th{background:var(--gold); color:var(--ink); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:12px;}
.pm-table td{color:var(--muted);}
.pm-table td strong{color:var(--ink);}
/* .pm-table nacio para el modal de privacidad y se quedo a medias: sin modo
   oscuro y sin comportamiento movil. Al reutilizarla como tabla de contenido
   en /cuanto-crece-mi-ahorro/ (02-08-2026) se completa. Sigue siendo UNA sola
   clase de tabla: no se crea una paralela. */
.pm-table caption{caption-side:top; text-align:left;}
/* Envoltorio con scroll horizontal: una tabla de 5 columnas no cabe en movil
   y sin esto desborda la pagina entera. */
.pm-table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.pm-table-wrap .pm-table{min-width:640px;}
[data-theme="dark"] .pm-table th,
[data-theme="dark"] .pm-table td{border-color:rgba(255,255,255,.14);}
[data-theme="dark"] .pm-table td{color:#B8B8B0;}
[data-theme="dark"] .pm-table td strong{color:#FAFAF7;}
/* El th se queda dorado con tinta encima en ambos temas: 10.2:1. */
.privacy-modal-footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:12px; margin-top:24px; padding-top:16px; border-top:1px solid rgba(26,26,26,.1);
}
.privacy-modal-footer-links{display:flex; gap:16px; font-size:13px;}
.privacy-modal-footer-links a{color:var(--muted);}
.privacy-modal-footer-links a:hover{text-decoration:underline; text-underline-offset:2px;}
.privacy-modal-accept{
  background:var(--ink); color:var(--white); border:none; border-radius:var(--radius-sm);
  padding:10px 20px; font-weight:700; font-size:14px; cursor:pointer;
  transition:background .2s ease;
}
.privacy-modal-accept:hover{background:var(--ink-2);}
.cm-form{display:grid; gap:14px;}
.cm-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.cm-field{margin-bottom:14px; display:flex; flex-direction:column; gap:6px;}
.cm-field label{font-size:13px; font-weight:700; color:var(--ink);}
.cm-field .req{color:#C0392B;}
.cm-field input,.cm-field textarea{
  width:100%; font-family:var(--ff-body); font-size:14px; padding:10px 12px;
  border:1px solid rgba(26,26,26,.2); border-radius:var(--radius-sm);
  color:var(--ink); background:var(--white); transition:border-color .2s ease, box-shadow .2s ease;
}
.cm-field input::placeholder,.cm-field textarea::placeholder{color:#9A9A94;}
.cm-field input:focus,.cm-field textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,195,0,.15); outline:none;
}
.cm-field textarea{resize:vertical; min-height:84px;}
.cm-consent{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--muted); margin-bottom:16px;}
.cm-consent input{margin-top:2px; accent-color:var(--gold-dark); flex-shrink:0;}
.cm-consent a{color:var(--gold-dark);}
.cm-actions{margin-top:6px;}
.cm-actions .btn{width:100%; text-align:center;}
.cm-status{font-size:13px; color:#C0392B; margin-top:10px;}
.cm-success{text-align:center; padding:20px 0;}
.cm-success p{margin-top:12px; font-size:15px;}
@media(max-width:640px){.cm-row{grid-template-columns:1fr;}}
[data-theme="dark"] .privacy-modal{background:#1A1A1A;}
[data-theme="dark"] .privacy-modal-close{color:#FAFAF7;}
[data-theme="dark"] .privacy-modal-body p,
[data-theme="dark"] .privacy-modal-body li,
[data-theme="dark"] .cm-intro{color:#B8B8B0;}
[data-theme="dark"] .cm-field input,[data-theme="dark"] .cm-field textarea{
  background:#141414; border-color:rgba(255,195,0,.2); color:#FAFAF7;
}