:root{
  --primary:#1A237E;
  --accent:#8BC34A;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#f8fafc;
  --card:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg);line-height:1.6}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;background:linear-gradient(135deg,var(--accent),#6FBF4B);color:#0a0a0a;text-decoration:none;font-weight:700;letter-spacing:.2px;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 8px 20px rgba(139,195,74,.25)}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(139,195,74,.32)}
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nav-links{display:flex;align-items:center}
.nav-links a{color:var(--text);text-decoration:none;margin-left:18px;font-weight:600}
.nav-links a:hover{color:var(--primary)}
.nav-social{display:flex;align-items:center;gap:8px;margin:0 12px;flex-shrink:0}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#1f2937;transition:transform .15s ease,box-shadow .15s ease,color .15s ease;border-color:#e5e7eb}
.social-icon svg{width:16px;height:16px;fill:currentColor}
.social-icon:hover{color:var(--primary);transform:translateY(-1px);box-shadow:0 10px 20px rgba(16,24,40,.08)}
.social-icon--nav{width:24px;height:24px;border:none;background:transparent;box-shadow:none;padding:0}
.social-icon--nav svg{width:14px;height:14px}
.social-icon--nav:hover{transform:translateY(-1px);box-shadow:none;color:var(--primary)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--primary)}
.brand-logo{display:flex;align-items:center;justify-content:center;width:120px;height:48px}
.brand-logo picture{display:block;width:100%;height:100%}
.brand-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px}
.brand-name{font-weight:900;letter-spacing:.2px;color:var(--primary)}
.card-link{cursor:pointer}
.card-link:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.hero{background: radial-gradient(1200px 500px at 80% -10%, #0d47a1 0, #102a57 60%, #0b1f40 100%);color:#fff;padding:96px 0 72px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:auto -10% -40% -10%;opacity:.06;height:340px;background:url('./assets/tarjetas.jpg') center/cover no-repeat;background-image:image-set(url('./assets/tarjetas.webp') type('image/webp'),url('./assets/tarjetas.jpg') type('image/jpeg'));background-image:-webkit-image-set(url('./assets/tarjetas.webp') type('image/webp'),url('./assets/tarjetas.jpg') type('image/jpeg'))}
.hero h1{font-size:clamp(28px,3.2vw + 12px,52px);margin:0 0 12px}
.hero p.lead{font-size:clamp(16px,1vw + 12px,20px);margin:0 0 24px;color:#e6eaf2}
.hero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.badge{border:1px solid rgba(255,255,255,.22);padding:8px 12px;border-radius:999px;font-size:14px;color:#e6eaf2}
.section{padding:72px 0}
.section h2{font-size:clamp(22px,2vw + 12px,36px);margin:0 0 8px}
.section p.sub{color:var(--muted);margin:0 0 28px}
.grid{display:grid;gap:20px;grid-template-columns: repeat(12, 1fr)}
.card{grid-column:span 12;background:var(--card);border:1px solid #e5e7eb;border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(16,24,40,.06)}
.card h3{margin:0 0 10px;font-size:20px}
.card ul{margin:0;padding-left:18px}
.card .tag{display:inline-block;padding:4px 10px;background:#eef2ff;color:var(--primary);border-radius:999px;font-weight:700;font-size:12px}
.card-logo{display:flex;align-items:center;gap:12px;margin:12px 0}
.card-logo picture{display:flex;align-items:center}
.card-logo img{max-height:48px;width:auto;height:auto;display:block}
@media (min-width:768px){.card{grid-column:span 6}}
@media (min-width:1024px){.card{grid-column:span 4}}
.kpis{display:grid;gap:16px;grid-template-columns: repeat(4, 1fr)}
.kpi{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px;text-align:center}
.kpi .val{font-size:28px;font-weight:900;color:var(--primary)}
.kpi .lbl{color:var(--muted)}
.cta{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1px solid #d1fae5;padding:24px;border-radius:16px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer{padding:36px 0;color:#6b7280;font-size:14px}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.footer a{color:var(--primary);text-decoration:none}
.footer a.footer-link{font-weight:600}
.footer a.footer-link:hover{color:#0b1f40}
.footer-social{display:flex;align-items:center;gap:10px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#1f2937;transition:transform .15s ease,box-shadow .15s ease,color .15s ease;border-color:#e5e7eb}
.social-icon svg{width:18px;height:18px;fill:currentColor}
.social-icon:hover{color:var(--primary);transform:translateY(-1px);box-shadow:0 10px 20px rgba(16,24,40,.08)}
.contact-quick-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.contact-link{display:inline-flex;align-items:center;gap:6px;color:var(--primary);text-decoration:none;font-weight:600}
.contact-link:hover{color:#0b1f40}
.contact-icon{display:inline-flex;width:14px;height:14px}
.contact-icon svg{width:100%;height:100%;fill:currentColor}

.cookie-banner{position:fixed;bottom:24px;left:16px;right:16px;z-index:1200;display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:16px;background:rgba(15,23,42,.96);color:#f8fafc;box-shadow:0 18px 45px rgba(15,23,42,.45);backdrop-filter:blur(8px)}
.cookie-banner__text{font-size:14px;line-height:1.6}
.cookie-banner__text a{color:#bbdefb;text-decoration:underline}
.cookie-banner__actions{display:flex;gap:12px;flex-wrap:wrap}
.cookie-banner__btn{border:none;padding:10px 16px;border-radius:999px;font-weight:600;cursor:pointer;font-size:14px;background:rgba(255,255,255,.12);color:#f8fafc;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.cookie-banner__btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.18);box-shadow:0 10px 20px rgba(15,23,42,.32)}
.cookie-banner__btn--primary{background:linear-gradient(135deg,var(--accent),#6FBF4B);color:#0b1f40}
.cookie-banner__btn--primary:hover{background:linear-gradient(135deg,#A3E635,#6FBF4B);color:#0a0a0a}
@media (min-width:768px){.cookie-banner{flex-direction:row;align-items:center;left:24px;right:auto;max-width:520px}}

.blog-hero{padding:96px 0 72px;background:linear-gradient(135deg,#0b1f40,#1a237e);color:#fff;text-align:left}
.blog-hero h1{margin:0 0 12px;font-size:clamp(30px,3vw + 16px,48px)}
.blog-hero p{margin:0;color:#dbeafe;font-size:18px;max-width:720px}
.blog-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.blog-card{background:#fff;border-radius:18px;box-shadow:0 20px 45px rgba(15,23,42,.08);overflow:hidden;display:flex;flex-direction:column;min-height:100%}
.blog-card-image img{width:100%;height:clamp(180px,25vw,260px);object-fit:cover;display:block}
.blog-card-body{padding:24px;display:flex;flex-direction:column;gap:12px}
.blog-card-body h2{margin:0;font-size:22px;color:#0b1f40}
.blog-card-body h2 a{text-decoration:none;color:inherit}
.blog-card-body h2 a:hover{color:#1a237e}
.blog-card-meta{font-size:14px;color:#6b7280;margin:0}
.blog-card-excerpt{margin:0;color:#475569}
.btn-light{background:#eef2ff;color:#1a237e;box-shadow:none}
.btn-light:hover{background:#e0e7ff;color:#0b1f40}
.blog-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:36px;font-weight:600}
.pager-link{color:#1a237e;text-decoration:none}
.pager-link:hover{color:#0b1f40}
.pager-status{color:#475569}
.blog-empty{background:#fff;padding:36px;border-radius:18px;text-align:center;box-shadow:0 20px 45px rgba(15,23,42,.08)}
.blog-empty h2{margin:0 0 12px}
.blog-article{background:#fff;border-radius:18px;padding:32px;box-shadow:0 20px 60px rgba(15,23,42,.08)}
.blog-article-header h1{margin:12px 0 8px;font-size:clamp(28px,3vw + 18px,44px);color:#0b1f40}
.blog-article-meta{color:#6b7280;font-size:14px;margin-bottom:18px}
.blog-article-image img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:16px;background:#f8fafc}
.blog-article-content{font-size:18px;line-height:1.8;color:#1f2937}
.blog-article-content h2,.blog-article-content h3{color:#0b1f40}
.blog-article-content img{max-width:100%;width:100%;height:auto;border-radius:12px;display:block}
.blog-article-back a{color:#1a237e;text-decoration:none;font-weight:600}
.blog-article-back a:hover{color:#0b1f40}