:root {
     /* Primary */
     --primary: #002068;
     --primary-container: #003399;
     --on-primary: #ffffff;
     --on-primary-container: #8aa4ff;
     --primary-fixed: #dce1ff;
     --primary-fixed-dim: #b5c4ff;

     /* Secondary */
     --secondary: #415e91;
     --secondary-container: #a7c4fe;
     --on-secondary: #ffffff;

     /* Tertiary (Gold) */
     --tertiary: #705d00;
     --tertiary-container: #c9a900;
     --tertiary-fixed: #ffe16d;
     --tertiary-fixed-dim: #e9c400;
     --on-tertiary: #ffffff;

     /* Error (Antifraude) */
     --error: #ba1a1a;
     --error-container: #ffdad6;
     --on-error: #ffffff;
     --on-error-container: #93000a;

     /* Surfaces */
     --surface: #f8f9fa;
     --surface-container: #edeeef;
     --surface-container-high: #e7e8e9;
     --surface-container-low: #f3f4f5;
     --surface-container-lowest: #ffffff;
     --surface-dim: #d9dadb;
     --surface-variant: #e1e3e4;
     --on-surface: #191c1d;
     --on-surface-variant: #444653;

     /* Outline */
     --outline: #747684;
     --outline-variant: #c4c5d5;

     /* Inverse */
     --inverse-surface: #2e3132;
     --inverse-on-surface: #f0f1f2;
     --inverse-primary: #b5c4ff;

     /* Sidebar */
     --sidebar-bg: #0d1b3e;
     --sidebar-hover: rgba(255, 255, 255, 0.06);
     --sidebar-active: rgba(255, 215, 0, 0.12);

     /* Layout */
     --sidebar-width: 260px;
     --header-height: 64px;
     --radius-sm: 8px;
     --radius-md: 12px;
     --radius-lg: 16px;
     --radius-xl: 20px;
     --radius-pill: 100px;

     /* Shadows */
     --shadow-ambient: 0 12px 40px rgba(25, 28, 29, 0.06);
     --shadow-hover: 0 16px 60px rgba(25, 28, 29, 0.10);
     --shadow-card: 0 2px 12px rgba(25, 28, 29, 0.04);

     /* Transitions */
     --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     font-family: 'Inter', system-ui, -apple-system, sans-serif;
     background: var(--surface);
     color: var(--on-surface);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 /* ─── BANNER WRAPPER ─── */
 .banner-wrapper {
     flex-shrink: 0;
     line-height: 0;
 }

 .banner-wrapper img {
     width: 100%;
     height: auto;
     display: block;
 }

 /* ─── HEADER ─── */
 .header-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 32px;
     height: var(--header-height);
     background: rgba(0, 0, 0, 0.15);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     flex-shrink: 0;
     position: relative;
     z-index: 2;
 }

 .header-brand {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .logo-section {
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .logo-badge {
     width: 40px;
     height: 40px;
     border-radius: var(--radius-sm);
     background: linear-gradient(135deg, var(--primary), var(--primary-container));
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     box-shadow: 0 2px 8px rgba(0, 32, 104, 0.25);
 }

 .logo-badge .material-icons-round {
     color: var(--tertiary-fixed);
     font-size: 20px;
 }

 .logo-text {
     font-size: 11px;
     color: var(--on-surface-variant);
     line-height: 1.4;
     letter-spacing: 0.01em;
 }

 .logo-text strong {
     display: block;
     font-size: 14px;
     color: var(--on-surface);
     font-weight: 700;
     letter-spacing: -0.01em;
 }

 .eu-badge {
     display: flex;
     align-items: center;
     gap: 10px;
     background: linear-gradient(135deg, var(--primary), var(--primary-container));
     color: var(--tertiary-fixed);
     padding: 8px 18px;
     border-radius: var(--radius-pill);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     box-shadow: 0 2px 8px rgba(0, 32, 104, 0.2);
     transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
 }

 .eu-badge:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 16px rgba(0, 32, 104, 0.3);
 }

 .eu-badge .material-icons-round {
     font-size: 16px;
 }

 /* ─── HERO ─── */
 .hero {
     color: var(--on-primary);
     padding: 52px 40px 48px;
     text-align: center;
     position: relative;
     z-index: 2;
 }

 .hero-tagline {
     font-size: 32px;
     font-weight: 300;
     color: var(--tertiary-fixed);
     margin-bottom: 8px;
     letter-spacing: -0.02em;
     position: relative;
     z-index: 1;
 }

 .hero-title {
     font-size: 14px;
     font-weight: 600;
     opacity: 0.88;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     position: relative;
     z-index: 1;
 }

 .hero-desc {
     font-size: 12px;
     opacity: 0.55;
     margin-top: 6px;
     font-weight: 400;
     position: relative;
     z-index: 1;
 }

 /* ─── PAGE BODY ─── */
 .page-body {
     display: flex;
     flex: 1;
     min-height: 0;
 }

 /* ─── SIDEBAR ─── */
 .sidebar {
     width: var(--sidebar-width);
     background: var(--sidebar-bg);
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
 }

 .sidebar::-webkit-scrollbar {
     width: 4px;
 }

 .sidebar::-webkit-scrollbar-track {
     background: transparent;
 }

 .sidebar::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
 }

 .nav-group-label {
     padding: 20px 20px 8px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.3);
 }

 .nav-section {
     border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }

 .nav-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 20px;
     font-size: 12px;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.72);
     cursor: pointer;
     letter-spacing: 0.02em;
     transition: all 0.2s var(--ease-out);
     user-select: none;
     border: none;
     background: none;
     width: 100%;
     text-align: left;
     gap: 10px;
 }

 .nav-item .nav-icon {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .nav-item .material-icons-round {
     font-size: 18px;
     opacity: 0.6;
 }

 .nav-item:hover {
     background: var(--sidebar-hover);
     color: rgba(255, 255, 255, 0.95);
 }

 .nav-item.active {
     background: var(--sidebar-active);
     color: var(--tertiary-fixed);
 }

 .nav-item.active .material-icons-round {
     opacity: 1;
     color: var(--tertiary-fixed-dim);
 }

 .nav-item.danger {
     color: rgba(255, 170, 170, 0.85);
 }

 .nav-item.danger .material-icons-round {
     color: rgba(255, 140, 140, 0.7);
 }

 .nav-item.danger:hover {
     background: rgba(186, 26, 26, 0.12);
     color: #ffcccc;
 }

 .nav-item.danger.active {
     background: rgba(186, 26, 26, 0.18);
     color: #ffdad6;
 }

 .nav-item.danger.active .material-icons-round {
     opacity: 1;
     color: #ff8a80;
 }

 .nav-arrow {
     font-size: 18px;
     opacity: 0.35;
     transition: transform 0.25s var(--ease-out);
     display: inline-flex;
 }

 .submenu {
     background: rgba(0, 0, 0, 0.15);
     overflow: hidden;
     max-height: 0;
     transition: max-height 0.3s var(--ease-out);
 }

 .submenu.open {
     max-height: 300px;
 }

 .sub-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 11px 20px 11px 52px;
     font-size: 11.5px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.52);
     cursor: pointer;
     transition: all 0.15s var(--ease-out);
     border: none;
     background: none;
     width: 100%;
     text-align: left;
     position: relative;
 }

 .sub-item::before {
     content: '';
     position: absolute;
     left: 36px;
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background: currentColor;
     opacity: 0.5;
 }

 .sub-item:hover {
     background: rgba(255, 255, 255, 0.05);
     color: rgba(255, 255, 255, 0.88);
 }

 .sub-item.active {
     color: var(--tertiary-fixed);
     background: rgba(255, 215, 0, 0.06);
 }

 .sub-item.active::before {
     background: var(--tertiary-fixed-dim);
     opacity: 1;
 }

 /* ─── CONTENT AREA ─── */
 .content-area {
     flex: 1;
     padding: 32px;
     overflow-y: auto;
     background: var(--surface-container-low);
 }

 .page {
     display: none;
     animation: fadeIn 0.35s var(--ease-out);
 }

 .page.active {
     display: block;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ─── BREADCRUMB ─── */
 .breadcrumb {
     font-size: 12px;
     color: var(--on-surface-variant);
     margin-bottom: 24px;
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     font-weight: 500;
 }

 .breadcrumb span {
     color: var(--primary-container);
     font-weight: 600;
 }

 .breadcrumb .sep {
     opacity: 0.3;
     color: var(--on-surface-variant);
     font-weight: 400;
 }

 /* ─── PILLS ─── */
 .pills {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-bottom: 24px;
 }

 .pill {
     padding: 8px 20px;
     border-radius: var(--radius-pill);
     font-size: 12px;
     font-weight: 600;
     border: 1.5px solid;
     cursor: pointer;
     transition: all 0.2s var(--ease-out);
     letter-spacing: 0.01em;
 }

 .pill.active {
     background: linear-gradient(135deg, var(--primary), var(--primary-container));
     color: var(--on-primary);
     border-color: transparent;
     box-shadow: 0 3px 12px rgba(0, 32, 104, 0.25);
 }

 .pill.inactive {
     background: var(--surface-container-lowest);
     color: var(--on-surface-variant);
     border-color: var(--outline-variant);
 }

 .pill.inactive:hover {
     border-color: var(--primary-container);
     color: var(--primary-container);
     background: var(--primary-fixed);
     transform: translateY(-1px);
 }

 /* ─── CARDS ─── */
 .card {
     background: var(--surface-container-lowest);
     border-radius: var(--radius-lg);
     padding: 28px;
     margin-bottom: 20px;
     box-shadow: var(--shadow-card);
     transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
     border: 1px solid rgba(196, 197, 213, 0.12);
 }

 .card:hover {
     box-shadow: var(--shadow-ambient);
 }

 .card-title {
     font-size: 15px;
     font-weight: 700;
     color: var(--primary);
     margin-bottom: 14px;
     letter-spacing: -0.01em;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .card-title .material-icons-round {
     font-size: 20px;
     color: var(--primary-container);
 }

 .grid-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .body-text {
     font-size: 13px;
     color: var(--on-surface-variant);
     line-height: 1.75;
 }

 .body-text p+p {
     margin-top: 10px;
 }

 .body-text strong {
     color: var(--on-surface);
     font-weight: 600;
 }

 /* ─── RESOURCE CARDS ─── */
 .res-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     margin-top: 6px;
 }

 .res-card {
     background: var(--surface-container-low);
     border-radius: var(--radius-md);
     padding: 16px 18px;
     display: flex;
     align-items: flex-start;
     gap: 14px;
     cursor: pointer;
     transition: all 0.2s var(--ease-out);
     border: 1px solid rgba(196, 197, 213, 0.1);
 }

 .res-card:hover {
     background: var(--primary-fixed);
     border-color: rgba(0, 51, 153, 0.15);
     transform: translateY(-2px);
     box-shadow: var(--shadow-ambient);
 }

 .res-icon {
     width: 36px;
     height: 36px;
     border-radius: var(--radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .res-icon .material-icons-round {
     font-size: 18px;
 }

 .res-icon img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: inherit;
 }

 .res-label {
     font-size: 12px;
     font-weight: 600;
     color: var(--on-surface);
     line-height: 1.45;
 }

 .res-sub {
     font-size: 11px;
     color: var(--on-surface-variant);
     margin-top: 3px;
     font-weight: 400;
 }

 /* ─── ANTI-FRAUD CARDS ─── */
 .af-card {
     background: var(--surface-container-lowest);
     border-left: 4px solid var(--error);
     border-radius: var(--radius-lg);
     padding: 28px;
     margin-bottom: 20px;
     box-shadow: var(--shadow-card);
     transition: box-shadow 0.3s var(--ease-out);
     position: relative;
     overflow: hidden;
 }

 .af-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(255, 218, 214, 0.04) 0%, transparent 50%);
     pointer-events: none;
 }

 .af-card:hover {
     box-shadow: var(--shadow-ambient);
 }

 .af-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--error-container);
     color: var(--on-error-container);
     border-radius: var(--radius-pill);
     padding: 6px 16px;
     font-size: 11px;
     font-weight: 700;
     margin-bottom: 18px;
     letter-spacing: 0.02em;
     text-transform: uppercase;
 }

 .af-badge .material-icons-round {
     font-size: 14px;
 }

 .af-section {
     background: var(--surface-container-low);
     border-radius: var(--radius-md);
     padding: 18px 20px;
     margin-top: 20px;
 }

 .af-section-title {
     font-size: 13px;
     font-weight: 700;
     color: var(--error);
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .af-section-title .material-icons-round {
     font-size: 16px;
 }

 .af-section-body {
     font-size: 12.5px;
     color: var(--on-surface-variant);
     line-height: 1.75;
 }

 /* ─── FOOTER ─── */
 .footer-bar {
     background: var(--inverse-surface);
     padding: 16px 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-shrink: 0;
     gap: 16px;
 }

 .footer-link {
     font-size: 11px;
     color: var(--inverse-on-surface);
     opacity: 0.5;
     font-weight: 500;
 }

 .footer-eu {
     font-size: 11px;
     color: var(--tertiary-fixed-dim);
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .footer-eu .material-icons-round {
     font-size: 16px;
 }



 /* ─── RESPONSIVE ─── */
 @media (max-width: 900px) {
     .header-bar {
         padding: 0 16px;
     }



     .hero-tagline {
         font-size: 24px;
     }

     .page-body {
         flex-direction: column;
     }

     .sidebar {
         width: 100%;
         max-height: none;
     }

     .content-area {
         padding: 20px;
     }

     .grid-2 {
         grid-template-columns: 1fr;
     }

     .res-grid {
         grid-template-columns: 1fr;
     }

     .footer-bar {
         flex-direction: column;
         text-align: center;
         gap: 8px;
         padding: 14px 20px;
     }
 }

 @media (max-width: 480px) {
     .eu-badge {
         display: none;
     }

     .hero-tagline {
         font-size: 20px;
     }
 }

 /* VER MÁS BUTTON */
 .btn-ver-mas {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     margin: 40px auto 20px;
     padding: 14px 32px;
     background: rgba(0, 32, 104, 0.05);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(0, 32, 104, 0.1);
     border-radius: var(--radius-pill);
     color: var(--primary);
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s var(--ease-out);
     box-shadow: var(--shadow-card);
 }

 .btn-ver-mas:hover {
     background: var(--primary);
     color: var(--on-primary);
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(0, 32, 104, 0.15);
     border-color: transparent;
 }

 .btn-ver-mas .material-icons-round {
     font-size: 20px;
     transition: transform 0.3s var(--ease-out);
 }

 .btn-ver-mas:hover .material-icons-round {
     transform: translateY(2px);
 }

 #extra-noticias {
     display: none;
     flex-direction: column;
 }

 #extra-noticias.visible {
     display: flex;
     animation: slideDownFade 0.6s var(--ease-out) forwards;
 }

 @keyframes slideDownFade {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
.btn-af {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 24px auto 0;
    padding: 14px 32px;
    background: var(--error);
    color: var(--on-error);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
    border: none;
    box-shadow: 0 4px 12px rgba(186, 26, 26, 0.2);
}

.btn-af:hover {
    background: var(--error-container);
    color: var(--on-error-container);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(186, 26, 26, 0.3);
}