/* ─────────────────────────────────────────────────────────────────────────
 * Rito Nacional Paraguayo - Premium UI Design System (Dark/Gold Mode)
 * ─────────────────────────────────────────────────────────────────── */

 @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

 :root {
   /* ─── Premium Palette ─────────────────────────────────────────── */
   --bg-deep: #050B14;
   --bg-surface: #0B132B;
   --bg-glass: rgba(11, 19, 43, 0.7);
   --bg-glass-light: rgba(255, 255, 255, 0.03);
   
   /* Foreground */
   --fg-primary: #FFFFFF;
   --fg-secondary: #B0BEC5;
   --fg-muted: #78909C;
 
   /* Accents (Gold) */
   --gold-primary: #D4AF37;
   --gold-light: #F3E5AB;
   --gold-dark: #997A00;
   --gold-glow: rgba(212, 175, 55, 0.4);
 
   /* Border */
   --border-glass: rgba(212, 175, 55, 0.2);
   --border-strong: rgba(212, 175, 55, 0.5);
 
   /* ─── Typography ────────────────────────────────────────────────── */
   --font-display: 'Cinzel', serif;
   --font-body: 'Inter', sans-serif;
 
   /* ─── Spacing ────────────────────────────────────────────────────── */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
   --space-8: 32px;
   --space-12: 48px;
   --space-20: 80px;
 
   /* ─── Radius ─────────────────────────────────────────────────────── */
   --radius-sm: 8px;
   --radius-md: 16px;
   --radius-lg: 24px;
   --radius-pill: 9999px;
 
   /* ─── Motion ─────────────────────────────────────────────────────── */
   --motion-fast: 0.2s;
   --motion-base: 0.4s;
   --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 /* ─── Reset & Base ───────────────────────────────────────────────────── */
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
 html {
   scroll-behavior: smooth;
 }
 
 body {
   font-family: var(--font-body);
   background-color: var(--bg-deep);
   background-image: 
     radial-gradient(circle at 15% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
     radial-gradient(circle at 85% 30%, rgba(212, 175, 55, 0.03) 0%, transparent 50%);
   background-attachment: fixed;
   color: var(--fg-secondary);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-display);
   color: var(--gold-primary);
   font-weight: 600;
   letter-spacing: 1px;
 }
 
 a {
   color: var(--gold-light);
   text-decoration: none;
   transition: color var(--motion-fast) var(--ease-smooth);
 }
 a:hover {
   color: var(--fg-primary);
 }
 
 /* ─── Layout Utilities ──────────────────────────────────────────────── */
 .contenedor {
   width: 90%;
   max-width: 1100px;
   margin: 0 auto;
 }
 
 /* ─── Glassmorphism Cards ───────────────────────────────────────────── */
 .tarjeta {
   background: var(--bg-glass-light);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--border-glass);
   border-radius: var(--radius-md);
   padding: var(--space-8);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   transition: transform var(--motion-base) var(--ease-smooth), border-color var(--motion-base) var(--ease-smooth), box-shadow var(--motion-base) var(--ease-smooth);
 }
 .tarjeta:hover {
   border-color: var(--border-strong);
   box-shadow: 0 8px 32px 0 var(--gold-glow);
   transform: translateY(-4px);
 }
 
 /* ─── Hero Section ──────────────────────────────────────────────────── */
 .hero {
   text-align: center;
   padding: var(--space-20) 0 var(--space-12) 0;
   position: relative;
 }
 .hero::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 20%;
   right: 20%;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
   opacity: 0.5;
 }
 .hero-logo {
   width: 140px;
   height: auto;
   margin: 0 auto 1.5rem auto;
   display: block;
   filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.4));
   animation: float 6s ease-in-out infinite;
 }
 @keyframes float {
   0% { transform: translateY(0px); }
   50% { transform: translateY(-10px); }
   100% { transform: translateY(0px); }
 }
 .hero h1 {
   font-size: clamp(2rem, 5vw, 3.5rem);
   color: var(--fg-primary);
   text-shadow: 0 2px 10px rgba(0,0,0,0.5);
   margin-bottom: 0.5rem;
 }
 .hero h2 {
   font-family: var(--font-display);
   font-size: clamp(1rem, 3vw, 1.5rem);
   color: var(--gold-light);
   letter-spacing: 3px;
   text-transform: uppercase;
   font-weight: 400;
 }
 
 /* ─── Navigation ───────────────────────────────────────── */
 .main-nav {
   position: sticky;
   top: 0;
   z-index: 100;
   background: rgba(5, 11, 20, 0.95);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--border-glass);
   padding: var(--space-4) 0;
 }
 
 .nav-container {
   display: flex;
   justify-content: center;
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
 }
 
 .nav-list {
   display: flex;
   gap: var(--space-2);
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .nav-list li {
   margin: 0;
 }
 
 .nav-link {
   background: transparent;
   border: 1px solid transparent;
   color: var(--fg-secondary);
   font-family: var(--font-display);
   font-size: 0.9rem;
   font-weight: 600;
   letter-spacing: 1px;
   padding: var(--space-2) var(--space-4);
   border-radius: var(--radius-pill);
   cursor: pointer;
   transition: all var(--motion-base) var(--ease-smooth);
 }
 
 .nav-link:hover {
   color: var(--gold-light);
 }
 
 .nav-link.active {
   background: rgba(212, 175, 55, 0.1);
   color: var(--gold-primary);
   border-color: var(--gold-primary);
   box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
 }
 
 /* Mobile Menu Button */
 .mobile-menu-toggle {
   display: none;
   background: transparent;
   border: 1px solid var(--gold-primary);
   color: var(--gold-primary);
   font-size: 1.5rem;
   padding: 0.5rem 1rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
 }
 
 @media (max-width: 768px) {
   .nav-container {
     justify-content: flex-end;
     padding: 0 var(--space-4);
   }
   
   .mobile-menu-toggle {
     display: block;
   }
 
   .nav-list {
     display: none;
     flex-direction: column;
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: var(--bg-deep);
     border-bottom: 1px solid var(--border-glass);
     padding: var(--space-4);
     gap: var(--space-4);
   }
 
   .nav-list.show {
     display: flex;
   }
   
   .nav-link {
     width: 100%;
     text-align: left;
     padding: var(--space-3) var(--space-4);
   }
 }
 
 /* ─── Tab Content & Fade Animation ──────────────────────────────────── */
 .tab-content {
   display: none;
   opacity: 0;
   animation: fadeIn var(--motion-base) var(--ease-smooth) forwards;
   padding-top: var(--space-8);
 }
 .tab-content.active {
   display: block;
 }
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
 /* ─── Common Section Titles ─────────────────────────────────────────── */
 .titulo-seccion {
   text-align: center;
   font-size: 2.2rem;
   margin-bottom: var(--space-8);
   position: relative;
   display: inline-block;
   left: 50%;
   transform: translateX(-50%);
 }
 .titulo-seccion::after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 25%;
   width: 50%;
   height: 2px;
   background: var(--gold-primary);
   border-radius: 2px;
 }
 
 /* ─── Principios Grid ───────────────────────────────────────────────── */
 .principios-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--space-6);
   margin-top: var(--space-8);
 }
 .principio-card {
   background: var(--bg-glass-light);
   border: 1px solid var(--border-glass);
   border-radius: var(--radius-md);
   padding: var(--space-6);
   text-align: center;
   transition: all var(--motion-base) var(--ease-smooth);
 }
 .principio-card:hover {
   transform: translateY(-5px);
   border-color: var(--gold-primary);
   background: rgba(212, 175, 55, 0.05);
 }
 .principio-icon {
   font-size: 2.5rem;
   color: var(--gold-primary);
   margin-bottom: var(--space-4);
   filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
 }
 .principio-card h4 {
   font-size: 1.2rem;
   margin-bottom: var(--space-3);
 }
 .principio-card ul {
   text-align: left;
   color: var(--fg-muted);
   font-size: 0.95rem;
   list-style-type: none;
   padding: 0;
 }
 .principio-card ul li {
   margin-bottom: 0.5rem;
   position: relative;
   padding-left: 1.5rem;
 }
 .principio-card ul li::before {
   content: '•';
   color: var(--gold-primary);
   position: absolute;
   left: 0;
   font-size: 1.2rem;
   line-height: 1;
 }
 
 /* ─── Autoridades Grid ──────────────────────────────────────────────── */
 .autoridades-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--space-6);
 }
 .autoridad-card {
   background: var(--bg-glass-light);
   border: 1px solid var(--border-glass);
   border-radius: var(--radius-md);
   padding: var(--space-6);
   text-align: center;
   position: relative;
   overflow: hidden;
 }
 .autoridad-card::before {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0; height: 4px;
   background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
 }
 .autoridad-logo {
   width: 90px;
   height: auto;
   margin: 0 auto var(--space-4) auto;
   display: block;
   filter: drop-shadow(0 2px 8px rgba(255,255,255,0.1));
 }
 .autoridad-card h3 {
   font-size: 1.1rem;
   margin-bottom: var(--space-1);
   color: var(--fg-primary);
 }
 .autoridad-anio {
   font-size: 0.8rem;
   color: var(--gold-primary);
   margin-bottom: var(--space-5);
   text-transform: uppercase;
   letter-spacing: 1px;
 }
 .autoridad-item {
   padding: var(--space-2) 0;
   border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 .autoridad-item:last-child {
   border-bottom: none;
 }
 .autoridad-nombre {
   font-weight: 500;
   color: var(--fg-secondary);
 }
 .autoridad-periodo {
   font-size: 0.8rem;
   color: var(--fg-muted);
 }
 .autoridad-actual {
   background: rgba(212, 175, 55, 0.1);
   border-radius: var(--radius-sm);
   padding: var(--space-2);
   margin-top: var(--space-2);
 }
 .autoridad-actual .autoridad-nombre {
   color: var(--gold-light);
   font-weight: 600;
 }
 
 /* ─── Cámaras List ──────────────────────────────────────────────────── */
 .camaras-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
   max-width: 800px;
   margin: 0 auto;
 }
 .camara-item {
   display: flex;
   align-items: center;
   gap: var(--space-6);
   background: var(--bg-glass-light);
   border: 1px solid var(--border-glass);
   border-radius: var(--radius-md);
   padding: var(--space-5);
   transition: transform var(--motion-base) var(--ease-smooth);
 }
 .camara-item:hover {
   transform: scale(1.02);
   border-color: var(--gold-primary);
 }
 .camara-grado {
   background: rgba(255,255,255,0.05);
   border: 1px solid var(--border-glass);
   color: var(--gold-primary);
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 700;
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   flex-shrink: 0;
   box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
 }
 .camara-titulo {
   font-size: 1.3rem;
   margin-bottom: var(--space-1);
   color: var(--fg-primary);
 }
 .camara-item-destacada {
   background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(0,0,0,0) 100%);
   border-color: var(--gold-primary);
 }
 .camara-grado-destacada {
   background: var(--gold-primary);
   color: var(--bg-deep);
   box-shadow: 0 0 20px var(--gold-glow);
 }
 .camara-item-destacada .camara-titulo {
   color: var(--gold-primary);
 }
 
 /* ─── Buttons ───────────────────────────────────────────────────────── */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
   color: var(--bg-deep);
   padding: var(--space-3) var(--space-6);
   border-radius: var(--radius-pill);
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1rem;
   letter-spacing: 1.5px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   cursor: pointer;
   transition: all var(--motion-base) var(--ease-smooth);
   box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.4);
   position: relative;
   overflow: hidden;
   text-transform: uppercase;
 }
 
 .btn::after {
   content: '';
   position: absolute;
   top: 0; left: -100%;
   width: 50%; height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
   transform: skewX(-25deg);
   transition: all 0.6s ease;
 }
 
 .btn:hover {
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.5);
   background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-primary) 100%);
 }
 
 .btn:hover::after {
   left: 150%;
 }
 
 .btn:active {
   transform: translateY(1px);
   box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);
 }
 
 /* ─── Forms & Contact ───────────────────────────────────────────────── */
 .contacto-grid {
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: var(--space-8);
 }
 @media (max-width: 768px) {
   .contacto-grid { grid-template-columns: 1fr; }
 }
 .contacto-info .contacto-item {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   margin-bottom: var(--space-5);
 }
 .contacto-icon {
   font-size: 1.5rem;
   background: rgba(255,255,255,0.05);
   width: 50px; height: 50px;
   display: flex; align-items: center; justify-content: center;
   border-radius: 50%;
   border: 1px solid var(--border-glass);
   color: var(--gold-primary);
 }
 .contacto-label {
   font-family: var(--font-display);
   font-size: 0.8rem;
   color: var(--gold-primary);
   letter-spacing: 1px;
   text-transform: uppercase;
 }
 .contacto-valor {
   color: var(--fg-primary);
   font-weight: 500;
 }
 .form-label {
   display: block;
   margin-bottom: var(--space-4);
   color: var(--fg-secondary);
   font-size: 0.9rem;
 }
 .form-control {
   width: 100%;
   padding: var(--space-3) var(--space-4);
   background: rgba(0,0,0,0.3);
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: var(--radius-sm);
   color: var(--fg-primary);
   font-family: var(--font-body);
   margin-top: var(--space-2);
   transition: border-color var(--motion-fast);
 }
 .form-control:focus {
   outline: none;
   border-color: var(--gold-primary);
   box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
 }
 .form-check {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   font-size: 0.85rem;
   color: var(--fg-muted);
   margin-bottom: var(--space-4);
 }
 
 /* ─── Footer ────────────────────────────────────────────────────────── */
 footer {
   text-align: center;
   padding: var(--space-12) 0 var(--space-6) 0;
   margin-top: var(--space-12);
   border-top: 1px solid rgba(255,255,255,0.05);
   background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 100%);
 }
 .footer-logo {
   width: 80px;
   opacity: 0.5;
   margin: 0 auto var(--space-4) auto;
   filter: grayscale(100%);
   transition: opacity var(--motion-base), filter var(--motion-base);
 }
 footer:hover .footer-logo {
   opacity: 1;
   filter: grayscale(0%);
 }
 footer p {
   font-family: var(--font-display);
   color: var(--fg-muted);
   font-size: 0.9rem;
   letter-spacing: 2px;
   margin-bottom: var(--space-2);
 }
 .footer-links {
   margin-top: var(--space-4);
   font-size: 0.85rem;
   font-family: var(--font-body);
   letter-spacing: 1px;
 }
 .footer-links a {
   color: var(--gold-primary);
   margin: 0 var(--space-2);
 }
 .footer-links a:hover {
   color: var(--gold-light);
 }