/* ============================================================
   AFORE.MX — Sistema de Diseño Global v2.0
   Paleta: Azul Institucional + Dorado Financiero
   Estilo: Moderno Minimalista · Optimizado SEO + AdSense
   ============================================================ */

/* ---- Google Fonts (async, no bloquea render) ------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ---- Variables CSS — Design Tokens ----------------------- */
:root {
  --azul-oscuro:    #0a3d6e;
  --azul-medio:     #1254a0;
  --azul-claro:     #1a6fc4;
  --azul-suave:     #e8f0fc;
  --azul-palido:    #f0f4ff;
  --dorado:         #c9a227;
  --dorado-claro:   #e4bc3f;
  --dorado-suave:   #fdf3d7;
  --dorado-oscuro:  #a07d18;
  --gris-900:       #1a1a2e;
  --gris-700:       #374151;
  --gris-500:       #6b7280;
  --gris-300:       #d1d5db;
  --gris-100:       #f3f4f6;
  --blanco:         #ffffff;
  --fondo:          #f8faff;
  --texto:          #1a1a2e;
  --texto-sec:      #5a6478;
  --borde:          #e2e8f0;
  --f-titulo: 'Poppins', 'Segoe UI', 'Arial Black', Arial, sans-serif;
  --f-cuerpo: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  --sp-xs: .5rem; --sp-sm: 1rem; --sp-md: 1.5rem;
  --sp-lg: 2rem;  --sp-xl: 3rem; --sp-2xl: 5rem;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-full: 9999px;
  --s-xs: 0 1px 3px rgba(10,61,110,.06);
  --s-sm: 0 2px 8px rgba(10,61,110,.10);
  --s-md: 0 4px 20px rgba(10,61,110,.13);
  --s-lg: 0 8px 40px rgba(10,61,110,.18);
  --s-xl: 0 20px 60px rgba(10,61,110,.22);
  --t-fast: .15s ease; --t-mid: .25s ease; --t-slow: .4s ease;
  --contenedor: 1200px;
}

/* ---- Reset & Base ---------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:var(--f-cuerpo); background:var(--fondo); color:var(--texto); line-height:1.7; -webkit-font-smoothing:antialiased; }
img,video,svg { max-width:100%; display:block; }
a { color:var(--azul-medio); text-decoration:none; transition:color var(--t-mid); }
a:hover { color:var(--dorado); }
ul,ol { padding-left:1.5rem; }
li { margin-bottom:.4rem; }
h1,h2,h3,h4,h5,h6 { font-family:var(--f-titulo); color:var(--gris-900); line-height:1.25; font-weight:700; }
h1 { font-size:clamp(1.75rem,4vw,2.6rem); margin-bottom:1rem; }
h2 { font-size:clamp(1.4rem,3vw,2rem); margin-bottom:.85rem; }
h3 { font-size:clamp(1.1rem,2.5vw,1.35rem); margin-bottom:.7rem; }
h4 { font-size:1.05rem; margin-bottom:.6rem; }
p  { margin-bottom:1rem; }
strong { color:var(--gris-900); }
.container { max-width:var(--contenedor); margin-inline:auto; padding-inline:1.25rem; }

/* ============================================================ BOTONES */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.6rem; border-radius:var(--r-full); font-family:var(--f-titulo); font-weight:600; font-size:.95rem; border:2px solid transparent; cursor:pointer; transition:all var(--t-mid); text-decoration:none; white-space:nowrap; }
.btn-primary { background:var(--azul-medio); color:var(--blanco); border-color:var(--azul-medio); }
.btn-primary:hover { background:var(--azul-oscuro); border-color:var(--azul-oscuro); color:var(--blanco); transform:translateY(-2px); box-shadow:var(--s-md); }
.btn-dorado { background:var(--dorado); color:var(--blanco); border-color:var(--dorado); }
.btn-dorado:hover { background:var(--dorado-oscuro); border-color:var(--dorado-oscuro); color:var(--blanco); transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,162,39,.35); }
.btn-outline { background:transparent; color:var(--azul-medio); border-color:var(--azul-medio); }
.btn-outline:hover { background:var(--azul-medio); color:var(--blanco); transform:translateY(-2px); }
.btn-ghost { background:rgba(255,255,255,.15); color:var(--blanco); border-color:rgba(255,255,255,.4); backdrop-filter:blur(4px); }
.btn-ghost:hover { background:rgba(255,255,255,.25); color:var(--blanco); transform:translateY(-2px); }
.btn-sm { padding:.45rem 1.1rem; font-size:.85rem; }
.btn-lg { padding:.9rem 2.2rem; font-size:1.05rem; }

/* ============================================================ HEADER */
.site-header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--borde); transition:box-shadow var(--t-mid); }
.site-header.scrolled { box-shadow:0 2px 20px rgba(10,61,110,.12); }
.header-inner { display:flex; align-items:center; gap:1rem; height:68px; }
.logo { display:flex; align-items:center; gap:.75rem; flex-shrink:0; text-decoration:none; }
.logo-icon { width:42px; height:42px; background:var(--azul-medio); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-family:var(--f-titulo); font-size:1.3rem; font-weight:800; color:var(--dorado); flex-shrink:0; transition:transform var(--t-mid); }
.logo:hover .logo-icon { transform:rotate(-5deg) scale(1.05); }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-name { font-family:var(--f-titulo); font-weight:800; font-size:1.2rem; color:var(--azul-oscuro); letter-spacing:-.02em; }
.logo-tagline { font-size:.62rem; color:var(--dorado-oscuro); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.main-nav { flex:1; }
.nav-list { display:flex; align-items:center; gap:.25rem; list-style:none; padding:0; margin:0; }
.nav-item { position:relative; }
.nav-link { display:flex; align-items:center; gap:.3rem; padding:.5rem .75rem; border-radius:var(--r-sm); font-size:.88rem; font-weight:500; color:var(--gris-700); transition:all var(--t-mid); white-space:nowrap; }
.nav-link:hover,.nav-link.active { background:var(--azul-suave); color:var(--azul-medio); }
.nav-link .arrow { font-size:.65rem; transition:transform var(--t-mid); }
.nav-item:hover .arrow { transform:rotate(180deg); }
.dropdown { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(8px); min-width:220px; background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-md); box-shadow:var(--s-lg); opacity:0; pointer-events:none; transition:all var(--t-mid); z-index:100; padding:.5rem; }
.nav-item:hover .dropdown { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dropdown a { display:flex; align-items:center; gap:.6rem; padding:.55rem .85rem; border-radius:var(--r-sm); font-size:.875rem; color:var(--gris-700); font-weight:500; transition:all var(--t-fast); }
.dropdown a:hover { background:var(--azul-suave); color:var(--azul-medio); transform:translateX(4px); }
.header-cta { margin-left:auto; flex-shrink:0; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:.5rem; background:none; border:none; margin-left:auto; }
.hamburger span { display:block; width:22px; height:2px; background:var(--gris-700); border-radius:2px; transition:all var(--t-mid); }

/* ============================================================ BREADCRUMB */
.breadcrumb { background:var(--blanco); border-bottom:1px solid var(--borde); padding:.65rem 0; font-size:.82rem; }
.breadcrumb ol { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; list-style:none; padding:0; margin:0; }
.breadcrumb li { display:flex; align-items:center; gap:.3rem; }
.breadcrumb li+li::before { content:"›"; color:var(--gris-300); }
.breadcrumb a { color:var(--gris-500); }
.breadcrumb a:hover { color:var(--azul-medio); }
.breadcrumb [aria-current="page"] { color:var(--azul-medio); font-weight:500; }

/* ============================================================ HERO */
.hero { background:linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 60%, var(--azul-claro) 100%); padding:5rem 0 4rem; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:60px; background:var(--fondo); clip-path:ellipse(55% 100% at 50% 100%); }
.hero-grid { display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center; position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(201,162,39,.2); border:1px solid rgba(201,162,39,.4); color:var(--dorado-claro); font-size:.78rem; font-weight:600; padding:.35rem .9rem; border-radius:var(--r-full); margin-bottom:1.2rem; letter-spacing:.04em; text-transform:uppercase; }
.hero h1 { color:var(--blanco); font-size:clamp(2rem,5vw,3rem); font-weight:800; line-height:1.15; margin-bottom:1rem; letter-spacing:-.02em; }
.hero h1 em { font-style:normal; color:var(--dorado-claro); }
.hero-desc { color:rgba(255,255,255,.82); font-size:1.1rem; max-width:540px; margin-bottom:2rem; line-height:1.65; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.hero-trust { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.hero-trust-item { display:flex; align-items:center; gap:.45rem; color:rgba(255,255,255,.7); font-size:.82rem; font-weight:500; }
.hero-trust-item .check { width:20px; height:20px; background:rgba(201,162,39,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:var(--dorado-claro); }
.hero-visual { display:flex; flex-direction:column; gap:1rem; }
.hero-card { background:rgba(255,255,255,.12); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-md); padding:1.1rem 1.4rem; color:var(--blanco); min-width:200px; }
.hero-card-label { font-size:.72rem; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.3rem; }
.hero-card-value { font-family:var(--f-titulo); font-size:1.6rem; font-weight:800; color:var(--dorado-claro); line-height:1; }
.hero-card-sub { font-size:.78rem; color:rgba(255,255,255,.65); margin-top:.2rem; }

/* ============================================================ STATS BAR */
.stats-bar { background:var(--blanco); border-bottom:1px solid var(--borde); padding:1.25rem 0; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1rem; text-align:center; }
.stat-number { font-family:var(--f-titulo); font-size:1.7rem; font-weight:800; color:var(--azul-medio); line-height:1; }
.stat-label { font-size:.78rem; color:var(--gris-500); margin-top:.25rem; font-weight:500; }

/* ============================================================ AD SLOTS */
.ad-slot { text-align:center; margin:1.5rem auto; max-width:970px; overflow:hidden; }
.ad-slot-label { font-size:.68rem; color:var(--gris-300); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.25rem; }
.ad-in-content { background:var(--gris-100); border-radius:var(--r-md); padding:.75rem; margin:2rem 0; overflow:hidden; }

/* ============================================================ SECTION HEADERS */
.section-header { text-align:center; margin-bottom:2.5rem; }
.section-tag { display:inline-block; background:var(--azul-suave); color:var(--azul-medio); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.3rem .9rem; border-radius:var(--r-full); margin-bottom:.75rem; }
.section-header h2 { margin-bottom:.5rem; }
.section-header p  { color:var(--texto-sec); max-width:540px; margin:0 auto; }

/* ============================================================ TOPIC CARDS */
.topics-section { padding:var(--sp-xl) 0; }
.topics-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.25rem; }
.topic-card { background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg); padding:1.75rem; transition:all var(--t-mid); text-decoration:none; display:flex; flex-direction:column; gap:1rem; position:relative; overflow:hidden; }
.topic-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--azul-medio), var(--dorado)); opacity:0; transition:opacity var(--t-mid); }
.topic-card:hover { transform:translateY(-4px); box-shadow:var(--s-lg); border-color:transparent; color:inherit; }
.topic-card:hover::before { opacity:1; }
.topic-icon { width:52px; height:52px; background:var(--azul-suave); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:1.5rem; transition:transform var(--t-mid); }
.topic-card:hover .topic-icon { transform:scale(1.1) rotate(-5deg); }
.topic-card h3 { font-size:1.1rem; color:var(--gris-900); margin:0; }
.topic-card p  { font-size:.875rem; color:var(--texto-sec); line-height:1.6; margin:0; flex:1; }
.topic-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.topic-articles { font-size:.75rem; color:var(--gris-500); font-weight:500; }
.topic-arrow { width:32px; height:32px; background:var(--azul-suave); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--azul-medio); font-size:.9rem; transition:all var(--t-mid); }
.topic-card:hover .topic-arrow { background:var(--azul-medio); color:var(--blanco); transform:translateX(3px); }

/* ============================================================ ARTICLE CARDS */
.articles-section { padding:var(--sp-xl) 0; background:var(--blanco); }
.articles-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.5rem; }
.article-card { background:var(--fondo); border:1px solid var(--borde); border-radius:var(--r-md); overflow:hidden; transition:all var(--t-mid); display:flex; flex-direction:column; }
.article-card:hover { transform:translateY(-3px); box-shadow:var(--s-md); border-color:var(--azul-suave); }
.article-card-header { background:linear-gradient(135deg, var(--azul-oscuro), var(--azul-medio)); padding:1.5rem; display:flex; align-items:center; gap:.75rem; }
.article-card-icon { font-size:2rem; flex-shrink:0; }
.article-card-cat { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--dorado-claro); }
.article-card-title { font-family:var(--f-titulo); font-size:1rem; font-weight:700; color:var(--blanco); line-height:1.3; margin:0; }
.article-card-body { padding:1.25rem; flex:1; display:flex; flex-direction:column; gap:.75rem; }
.article-card-excerpt { font-size:.875rem; color:var(--texto-sec); line-height:1.6; margin:0; }
.article-card-link { display:inline-flex; align-items:center; gap:.4rem; color:var(--azul-medio); font-size:.875rem; font-weight:600; margin-top:auto; transition:gap var(--t-mid); }
.article-card-link:hover { gap:.7rem; }

/* ============================================================ HIGHLIGHT */
.highlight-box { background:linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%); border-radius:var(--r-lg); padding:2.5rem; color:var(--blanco); position:relative; overflow:hidden; }
.highlight-box h2 { color:var(--blanco); }
.highlight-box p  { color:rgba(255,255,255,.82); }
.callout { background:var(--dorado-suave); border-left:4px solid var(--dorado); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:1.1rem 1.4rem; margin:1.5rem 0; }
.callout-title { font-family:var(--f-titulo); font-weight:700; color:var(--dorado-oscuro); font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem; }
.callout p { color:var(--gris-700); margin:0; font-size:.92rem; }
.info-box { background:var(--azul-suave); border-left:4px solid var(--azul-medio); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:1.1rem 1.4rem; margin:1.5rem 0; }
.info-box p { color:var(--azul-oscuro); margin:0; font-size:.92rem; }

/* ============================================================ BADGE / TAGS */
.badge { display:inline-block; padding:.25rem .75rem; border-radius:var(--r-full); font-size:.75rem; font-weight:600; }
.badge-azul   { background:var(--azul-suave); color:var(--azul-medio); }
.badge-dorado { background:var(--dorado-suave); color:var(--dorado-oscuro); }
.badge-verde  { background:#e8f5e9; color:#2e7d32; }
.badge-rojo   { background:#fce4ec; color:#c62828; }
.badge-gris   { background:var(--gris-100); color:var(--gris-500); }

/* ============================================================ LAYOUT INTERIOR */
.page-section { padding:var(--sp-xl) 0; }
.content-sidebar { display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; }
.article-body h2 { padding-top:var(--sp-md); border-top:2px solid var(--azul-suave); margin-top:var(--sp-lg); }
.article-body h2:first-child { border-top:none; margin-top:0; padding-top:0; }
.article-body table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.9rem; border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--s-sm); }
.article-body th { background:var(--azul-medio); color:var(--blanco); padding:.8rem 1rem; text-align:left; font-weight:600; font-family:var(--f-titulo); }
.article-body td { padding:.75rem 1rem; border-bottom:1px solid var(--borde); }
.article-body tr:nth-child(even) td { background:var(--azul-palido); }
.article-body tr:hover td { background:var(--azul-suave); }
.toc { background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-md); padding:1.25rem 1.5rem; margin-bottom:2rem; }
.toc-title { font-family:var(--f-titulo); font-weight:700; font-size:.9rem; color:var(--azul-medio); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.toc ol { margin:0; padding-left:1.25rem; }
.toc li { margin-bottom:.35rem; }
.toc a { color:var(--gris-700); font-size:.875rem; }
.toc a:hover { color:var(--azul-medio); }

/* ============================================================ SIDEBAR */
.sidebar { position:sticky; top:84px; display:flex; flex-direction:column; gap:1.25rem; }
.sidebar-widget { background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-md); overflow:hidden; }
.sidebar-widget-header { background:var(--azul-oscuro); padding:.85rem 1.2rem; font-family:var(--f-titulo); font-weight:700; font-size:.85rem; color:var(--blanco); text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:.5rem; }
.sidebar-widget-body { padding:1.1rem; }
.sidebar-links { list-style:none; padding:0; margin:0; }
.sidebar-links li { border-bottom:1px solid var(--gris-100); }
.sidebar-links li:last-child { border-bottom:none; }
.sidebar-links a { display:flex; align-items:center; gap:.5rem; padding:.6rem .4rem; font-size:.875rem; color:var(--gris-700); transition:all var(--t-fast); }
.sidebar-links a:hover { color:var(--azul-medio); transform:translateX(4px); }
.sidebar-cta { background:linear-gradient(135deg, var(--azul-oscuro), var(--azul-medio)); padding:1.5rem; text-align:center; border-radius:var(--r-md); }
.sidebar-cta h4 { color:var(--blanco); margin-bottom:.5rem; font-size:1rem; }
.sidebar-cta p  { color:rgba(255,255,255,.75); font-size:.82rem; margin-bottom:1rem; }

/* ============================================================ CARDS */
.card { background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-md); padding:1.5rem; transition:all var(--t-mid); }
.card:hover { box-shadow:var(--s-md); border-color:var(--azul-suave); }
.card-grid-3 { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:1.25rem; }
.card-grid-4 { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:1rem; }

/* ============================================================ FAQ */
.faq-list { display:flex; flex-direction:column; gap:.75rem; }
.faq-item { background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-md); overflow:hidden; transition:box-shadow var(--t-mid); }
.faq-item.open { box-shadow:var(--s-sm); }
.faq-question { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 1.3rem; cursor:pointer; font-weight:600; font-family:var(--f-titulo); color:var(--gris-900); font-size:.95rem; transition:color var(--t-fast); user-select:none; list-style:none; }
.faq-question:hover { color:var(--azul-medio); }
.faq-icon { width:28px; height:28px; background:var(--azul-suave); color:var(--azul-medio); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; transition:all var(--t-mid); font-weight:700; }
.faq-item.open .faq-icon { background:var(--azul-medio); color:var(--blanco); transform:rotate(45deg); }
.faq-answer { padding:0 1.3rem 1.1rem; font-size:.9rem; color:var(--gris-700); line-height:1.7; display:none; }
.faq-item.open .faq-answer { display:block; }

/* ============================================================ FORMS */
.form-group { margin-bottom:1.1rem; }
.form-label { display:block; font-size:.875rem; font-weight:600; color:var(--gris-700); margin-bottom:.4rem; }
.form-control { width:100%; padding:.7rem 1rem; border:1.5px solid var(--borde); border-radius:var(--r-sm); font-family:var(--f-cuerpo); font-size:.95rem; color:var(--texto); background:var(--blanco); transition:border-color var(--t-mid), box-shadow var(--t-mid); }
.form-control:focus { outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(26,111,196,.15); }
.search-box { display:flex; background:var(--blanco); border:1.5px solid var(--borde); border-radius:var(--r-full); overflow:hidden; box-shadow:var(--s-sm); transition:box-shadow var(--t-mid); }
.search-box:focus-within { box-shadow:var(--s-md); border-color:var(--azul-claro); }
.search-box input { flex:1; padding:.8rem 1.25rem; border:none; background:transparent; font-size:.95rem; font-family:var(--f-cuerpo); color:var(--texto); }
.search-box input:focus { outline:none; }
.search-box button { background:var(--azul-medio); color:var(--blanco); border:none; padding:.8rem 1.5rem; font-family:var(--f-titulo); font-weight:600; font-size:.9rem; cursor:pointer; transition:background var(--t-fast); border-radius:0 var(--r-full) var(--r-full) 0; white-space:nowrap; }
.search-box button:hover { background:var(--azul-oscuro); }

/* ============================================================ FOOTER */
.site-footer { background:var(--gris-900); color:rgba(255,255,255,.7); padding:var(--sp-xl) 0 var(--sp-lg); margin-top:var(--sp-2xl); }
.footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:2.5rem; margin-bottom:2.5rem; }
.footer-brand .logo-name { color:var(--blanco); }
.footer-brand .logo-tagline { color:var(--dorado); }
.footer-desc { font-size:.85rem; line-height:1.7; margin:1rem 0; color:rgba(255,255,255,.55); }
.footer-disclaimer { font-size:.75rem; color:rgba(255,255,255,.4); background:rgba(255,255,255,.05); border-radius:var(--r-sm); padding:.75rem 1rem; line-height:1.6; }
.footer-col h4 { color:var(--blanco); font-size:.85rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-links { list-style:none; padding:0; }
.footer-links li { margin-bottom:.5rem; }
.footer-links a { color:rgba(255,255,255,.55); font-size:.85rem; transition:color var(--t-fast); display:flex; align-items:center; gap:.4rem; }
.footer-links a:hover { color:var(--dorado-claro); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:rgba(255,255,255,.4); }
.footer-legal { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-legal a { color:rgba(255,255,255,.4); font-size:.8rem; }
.footer-legal a:hover { color:var(--dorado-claro); }

/* ============================================================ PAGE HERO (internas) */
.page-hero { background:linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%); padding:2.5rem 0; }
.page-hero-inner { display:flex; align-items:center; gap:1.5rem; }
.page-hero-icon { font-size:3rem; flex-shrink:0; opacity:.9; }
.page-hero h1 { color:var(--blanco); font-size:clamp(1.4rem,3vw,2rem); margin:0 0 .4rem; }
.page-hero-desc { color:rgba(255,255,255,.75); font-size:.95rem; margin:0; }
.page-hero-meta { display:flex; gap:1rem; flex-wrap:wrap; margin-top:.75rem; }
.page-hero-meta span { display:flex; align-items:center; gap:.35rem; font-size:.78rem; color:rgba(255,255,255,.6); }

/* ============================================================ CHIPS */
.chip-list { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; }
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .9rem; background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-full); font-size:.8rem; color:var(--gris-700); font-weight:500; transition:all var(--t-fast); text-decoration:none; }
.chip:hover { background:var(--azul-suave); border-color:var(--azul-claro); color:var(--azul-medio); }

/* ============================================================ BACK TO TOP */
.back-top { position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; background:var(--azul-medio); color:var(--blanco); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:var(--s-md); opacity:0; pointer-events:none; transition:all var(--t-mid); z-index:99; text-decoration:none; border:none; cursor:pointer; }
.back-top.visible { opacity:1; pointer-events:auto; }
.back-top:hover { background:var(--azul-oscuro); transform:translateY(-3px); color:var(--blanco); }

/* ============================================================ RELATED */
.related-section { margin-top:var(--sp-xl); padding-top:var(--sp-lg); border-top:2px solid var(--borde); }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:1rem; margin-top:1.25rem; }
.related-card { display:flex; align-items:flex-start; gap:.75rem; padding:.9rem; background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-sm); transition:all var(--t-mid); text-decoration:none; }
.related-card:hover { box-shadow:var(--s-sm); border-color:var(--azul-suave); transform:translateX(3px); }
.related-card-icon { font-size:1.5rem; flex-shrink:0; background:var(--azul-palido); width:40px; height:40px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; }
.related-card-title { font-size:.875rem; font-weight:600; color:var(--gris-900); margin:0 0 .2rem; line-height:1.3; }
.related-card-cat { font-size:.75rem; color:var(--azul-medio); font-weight:500; }

/* ============================================================ UTILITIES */
.text-center { text-align:center; }
.text-right  { text-align:right; }
.mt-sm { margin-top:var(--sp-sm); } .mt-md { margin-top:var(--sp-md); } .mt-lg { margin-top:var(--sp-lg); }
.mb-sm { margin-bottom:var(--sp-sm); } .mb-md { margin-bottom:var(--sp-md); } .mb-lg { margin-bottom:var(--sp-lg); }
.flex { display:flex; } .flex-center { display:flex; align-items:center; justify-content:center; }
.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; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.revealed { opacity:1; transform:translateY(0); }

/* ============================================================ RESPONSIVE */
@media (max-width:1024px) {
  .content-sidebar { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { display:none; }
}
@media (max-width:768px) {
  :root { --sp-xl:2rem; --sp-2xl:3rem; }
  .main-nav, .header-cta { display:none; }
  .hamburger { display:flex; }
  .mobile-menu .main-nav { display:block; position:fixed; inset:0; background:var(--blanco); z-index:999; padding:5rem 1.5rem 2rem; overflow-y:auto; }
  .mobile-menu .nav-list { flex-direction:column; gap:.25rem; }
  .mobile-menu .nav-link { padding:.85rem; font-size:1rem; }
  .mobile-menu .dropdown { position:static; transform:none; opacity:1; pointer-events:auto; box-shadow:none; border:none; background:var(--azul-palido); margin-top:.25rem; display:none; }
  .mobile-menu .nav-item.open .dropdown { display:block; }
  .footer-grid { grid-template-columns:1fr; gap:1.5rem; }
  .topics-grid, .articles-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .hero { padding:3rem 0 2.5rem; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .footer-bottom { flex-direction:column; text-align:center; }
}
@media (max-width:480px) {
  .card-grid-3, .card-grid-4 { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr; }
}

/* ============================================================ ANIMACIONES */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes pulseGold { 0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.4)} 50%{box-shadow:0 0 0 8px rgba(201,162,39,0)} }
.animate-fade-up { animation:fadeUp .5s ease both; }
.animate-fade-up:nth-child(2){animation-delay:.1s}
.animate-fade-up:nth-child(3){animation-delay:.2s}
.animate-fade-up:nth-child(4){animation-delay:.3s}
.animate-fade-up:nth-child(5){animation-delay:.4s}
.animate-fade-up:nth-child(6){animation-delay:.5s}
.pulse-gold { animation:pulseGold 2s infinite; }

/* ============================================================ PRINT */
@media print {
  .site-header,.site-footer,.sidebar,.ad-slot,.ad-in-content,.back-top,.hamburger { display:none !important; }
  body { background:white; color:black; font-size:12pt; }
  .content-sidebar { grid-template-columns:1fr; }
}