/* ==========================================================================
   Códigos Postales del Mundo – v2.0 PREMIUM
   Modern animations, glassmorphism, micro-interactions
   ========================================================================== */

:root {
  --color-primary: #1e40af;
  --color-primary-dark: #1e3a8a;
  --color-primary-light: #3b82f6;
  --color-accent: #f59e0b;
  --color-accent-hover: #d97706;
  --color-accent-glow: rgba(245,158,11,.25);
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-surface-dark: #0c1222;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-text-light: #f1f5f9;
  --color-border: #e2e8f0;
  --color-success: #10b981;
  --color-error: #ef4444;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 25px -5px rgba(0,0,0,.1),0 4px 10px -4px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 40px -8px rgba(0,0,0,.12),0 8px 16px -6px rgba(0,0,0,.06);
  --shadow-card-hover: 0 20px 40px -12px rgba(30,64,175,.18),0 0 0 1px rgba(59,130,246,.1);
  --radius-sm: .5rem; --radius-md: .75rem; --radius-lg: 1rem;
  --radius-xl: 1.25rem; --radius-2xl: 1.5rem; --radius-full: 9999px;
  --font-display: 'DM Serif Display',Georgia,serif;
  --font-body: 'DM Sans',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono',monospace;
  --transition-fast: 150ms cubic-bezier(.4,0,.2,1);
  --transition-base: 300ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 500ms cubic-bezier(.4,0,.2,1);
  --transition-bounce: 500ms cubic-bezier(.34,1.56,.64,1);
}

/* --- Animations --- */
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes particle-float { 0%,100%{transform:translate(0,0) rotate(0);opacity:.12} 25%{transform:translate(10px,-20px) rotate(90deg);opacity:.2} 50%{transform:translate(-5px,-40px) rotate(180deg);opacity:.12} 75%{transform:translate(15px,-20px) rotate(270deg);opacity:.18} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.3)} 50%{box-shadow:0 0 20px 4px rgba(245,158,11,.15)} }

/* --- Reset --- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-body); color:var(--color-text); background:var(--color-surface); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.2; color:var(--color-primary-dark); }
a { color:var(--color-primary); text-decoration:none; transition:color var(--transition-fast); }
a:hover { color:var(--color-primary-light); }
a:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; border-radius:var(--radius-sm); }
img { max-width:100%; height:auto; display:block; }

/* --- Skip Link --- */
.skip-link { position:absolute; top:-100%; left:1rem; padding:.75rem 1.5rem; background:var(--color-primary); color:#fff; font-weight:700; border-radius:0 0 var(--radius-md) var(--radius-md); z-index:9999; transition:top var(--transition-fast); }
.skip-link:focus { top:0; }

/* --- Header --- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.85); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid rgba(226,232,240,.6); transition:all var(--transition-base); animation:fadeInDown .6s ease; }
.site-header.scrolled { box-shadow:0 4px 30px rgba(0,0,0,.06); background:rgba(255,255,255,.92); }
.nav-inner { max-width:1280px; margin:0 auto; padding:.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.25rem; color:var(--color-primary-dark); white-space:nowrap; transition:transform var(--transition-base); }
.logo:hover { transform:scale(1.02); }
.logo-icon { width:38px; height:38px; background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light)); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; box-shadow:0 2px 8px rgba(30,64,175,.25); transition:transform var(--transition-bounce),box-shadow var(--transition-base); }
.logo:hover .logo-icon { transform:rotate(-5deg) scale(1.08); box-shadow:0 4px 16px rgba(30,64,175,.35); }
.nav-links { display:flex; align-items:center; gap:.25rem; list-style:none; }
.nav-links a { padding:.5rem .85rem; border-radius:var(--radius-full); font-size:.9rem; font-weight:500; color:var(--color-text-muted); transition:all var(--transition-base); position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:4px; left:50%; width:0; height:2px; background:var(--color-primary); border-radius:2px; transition:all var(--transition-base); transform:translateX(-50%); }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after { width:calc(100% - 1.7rem); }
.nav-links a:hover,.nav-links a[aria-current="page"] { color:var(--color-primary); background:rgba(30,64,175,.05); }

/* Mobile */
.menu-toggle { display:none; background:none; border:none; padding:.5rem; cursor:pointer; color:var(--color-text); }
@media(max-width:768px) {
  .menu-toggle { display:flex; }
  .nav-links { position:fixed; top:0; right:-100%; width:300px; height:100vh; flex-direction:column; background:rgba(255,255,255,.95); backdrop-filter:blur(24px); padding:5rem 1.5rem 2rem; box-shadow:-10px 0 50px rgba(0,0,0,.12); transition:right var(--transition-slow); z-index:99; }
  .nav-links.open { right:0; }
  .nav-links a { font-size:1.05rem; padding:.85rem 1rem; width:100%; }
  .nav-links a::after { display:none; }
  .nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(4px); z-index:98; opacity:0; pointer-events:none; transition:opacity var(--transition-base); }
  .nav-overlay.active { opacity:1; pointer-events:auto; }
}

/* --- HERO (PREMIUM) --- */
.hero { position:relative; min-height:560px; display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(135deg,#0c1222 0%,#1e3a8a 35%,#1e40af 55%,#2563eb 80%,#1e3a8a 100%); background-size:200% 200%; animation:gradient-shift 12s ease infinite; color:#fff; overflow:hidden; padding:4rem 1.5rem; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 15% 80%,rgba(245,158,11,.18) 0%,transparent 45%),radial-gradient(ellipse at 85% 20%,rgba(59,130,246,.15) 0%,transparent 40%),radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.05) 0%,transparent 50%); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:80px; background:linear-gradient(to top,var(--color-surface),transparent); pointer-events:none; z-index:3; }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:50px 50px; pointer-events:none; mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%); -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%); }
.hero .hero-content::before,.hero .hero-content::after { content:'📮'; position:absolute; font-size:2rem; opacity:.12; pointer-events:none; animation:particle-float 8s ease-in-out infinite; }
.hero .hero-content::before { top:-20px; left:-60px; }
.hero .hero-content::after { content:'🌍'; bottom:-10px; right:-50px; animation-delay:-4s; }
.hero-content { position:relative; z-index:2; max-width:720px; animation:fadeInUp .8s ease .1s both; }
.hero h1 { font-size:clamp(2.25rem,5.5vw,3.5rem); color:#fff; margin-bottom:1rem; letter-spacing:-.03em; text-shadow:0 2px 30px rgba(0,0,0,.2); }
.hero h1 span { color:var(--color-accent); display:inline-block; position:relative; }
.hero h1 span::after { content:''; position:absolute; bottom:2px; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--color-accent),transparent); border-radius:3px; opacity:.5; }
.hero p { font-size:clamp(1rem,2.5vw,1.15rem); opacity:.85; margin-bottom:2rem; max-width:560px; margin-inline:auto; line-height:1.75; animation:fadeInUp .8s ease .3s both; }

/* --- Search (PREMIUM) --- */
.search-box { position:relative; max-width:580px; margin:0 auto; animation:fadeInUp .8s ease .5s both; }
.search-box input { width:100%; padding:1.1rem 1.25rem 1.1rem 3.25rem; font-size:1.05rem; font-family:var(--font-body); border:2px solid rgba(255,255,255,.15); border-radius:var(--radius-2xl); background:rgba(255,255,255,.08); color:#fff; backdrop-filter:blur(16px); transition:all var(--transition-base); box-shadow:0 4px 24px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.1); }
.search-box input::placeholder { color:rgba(255,255,255,.45); }
.search-box input:focus { outline:none; border-color:var(--color-accent); background:rgba(255,255,255,.14); box-shadow:0 0 0 4px var(--color-accent-glow),0 8px 32px rgba(0,0,0,.15); transform:translateY(-1px); }
.search-icon { position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.45); pointer-events:none; transition:color var(--transition-base); }
.search-box:focus-within .search-icon { color:var(--color-accent); }
.search-results { position:absolute; top:calc(100% + .5rem); left:0; right:0; background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl),0 0 0 1px rgba(0,0,0,.04); max-height:350px; overflow-y:auto; display:none; z-index:10; animation:scaleIn .2s ease; }
.search-results.active { display:block; }
.search-result-item { display:flex; align-items:center; gap:.75rem; padding:.85rem 1.15rem; color:var(--color-text); cursor:pointer; transition:all var(--transition-fast); border-bottom:1px solid var(--color-border); }
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover,.search-result-item:focus { background:linear-gradient(135deg,rgba(30,64,175,.04),rgba(59,130,246,.06)); padding-left:1.35rem; }
.search-result-item .flag { font-size:1.4rem; }
.search-result-item .info { flex:1; }
.search-result-item .city-name { font-weight:600; font-size:.95rem; }
.search-result-item .code { font-family:var(--font-mono); color:var(--color-primary); font-weight:600; background:rgba(30,64,175,.06); padding:.2rem .6rem; border-radius:var(--radius-sm); }

/* --- Country Cards (PREMIUM) --- */
.countries-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; max-width:1280px; margin:0 auto; padding:0 1.5rem; }
.country-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:1.75rem; transition:all var(--transition-base); cursor:pointer; display:flex; flex-direction:column; gap:.75rem; position:relative; overflow:hidden; }
.country-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light),var(--color-accent)); transform:scaleX(0); transform-origin:left; transition:transform var(--transition-slow); border-radius:var(--radius-xl) var(--radius-xl) 0 0; }
.country-card:hover::before { transform:scaleX(1); }
.country-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-card-hover); border-color:rgba(59,130,246,.2); }
.country-card .flag-big { font-size:2.75rem; transition:transform var(--transition-bounce); }
.country-card:hover .flag-big { transform:scale(1.15) rotate(-3deg); }
.country-card h3 { font-size:1.35rem; margin:0; transition:color var(--transition-fast); }
.country-card:hover h3 { color:var(--color-primary); }
.country-card .meta { font-size:.85rem; color:var(--color-text-muted); display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
.country-card .meta span { display:flex; align-items:center; gap:.3rem; }
.country-card .format-badge { display:inline-block; padding:.3rem .85rem; background:linear-gradient(135deg,rgba(30,64,175,.06),rgba(59,130,246,.08)); color:var(--color-primary); border-radius:var(--radius-full); font-family:var(--font-mono); font-size:.82rem; font-weight:600; border:1px solid rgba(30,64,175,.08); transition:all var(--transition-base); }
.country-card:hover .format-badge { background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light)); color:#fff; border-color:transparent; }

/* --- Breadcrumbs --- */
.breadcrumbs { max-width:1280px; margin:0 auto; padding:1rem 1.5rem; display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--color-text-muted); flex-wrap:wrap; animation:fadeIn .5s ease; }
.breadcrumbs a { color:var(--color-primary); padding:.15rem .3rem; border-radius:var(--radius-sm); transition:all var(--transition-fast); }
.breadcrumbs a:hover { background:rgba(30,64,175,.06); }
.breadcrumbs .sep { margin:0 .15rem; opacity:.4; }

/* --- Sections --- */
.section-title { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.5rem; }
.section-subtitle { color:var(--color-text-muted); font-size:1.05rem; max-width:600px; }

/* --- Map --- */
.map-container { width:100%; border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--color-border); box-shadow:var(--shadow-lg); transition:box-shadow var(--transition-base); }
.map-container:hover { box-shadow:var(--shadow-xl); }
.map-container .leaflet-container { min-height:380px; height:100%; font-family:var(--font-body); }

/* --- City List --- */
.city-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.city-item { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); transition:all var(--transition-base); position:relative; overflow:hidden; }
.city-item::after { content:'→'; position:absolute; right:1rem; opacity:0; transform:translateX(-8px); transition:all var(--transition-base); color:var(--color-primary); font-weight:700; }
.city-item:hover { border-color:var(--color-primary-light); box-shadow:var(--shadow-md); transform:translateX(4px); padding-right:2.5rem; }
.city-item:hover::after { opacity:1; transform:translateX(0); }
.city-item .postal-code { font-family:var(--font-mono); font-size:1rem; font-weight:700; color:var(--color-primary); background:linear-gradient(135deg,rgba(30,64,175,.06),rgba(59,130,246,.08)); padding:.4rem .85rem; border-radius:var(--radius-md); white-space:nowrap; border:1px solid rgba(30,64,175,.06); transition:all var(--transition-base); }
.city-item:hover .postal-code { background:var(--color-primary); color:#fff; border-color:transparent; }
.city-item .city-info h4 { font-size:1rem; margin-bottom:.1rem; }
.city-item .city-info p { font-size:.82rem; color:var(--color-text-muted); margin:0; }

/* --- Info Cards --- */
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; }
.info-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:1.75rem; transition:all var(--transition-base); position:relative; overflow:hidden; }
.info-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg,rgba(30,64,175,.02),rgba(59,130,246,.03)); opacity:0; transition:opacity var(--transition-base); pointer-events:none; }
.info-card:hover::before { opacity:1; }
.info-card:hover { box-shadow:var(--shadow-lg); border-color:rgba(59,130,246,.15); transform:translateY(-3px); }
.info-card .card-icon { position:relative; width:48px; height:48px; background:linear-gradient(135deg,rgba(30,64,175,.08),rgba(59,130,246,.12)); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem; transition:transform var(--transition-bounce); }
.info-card:hover .card-icon { transform:scale(1.1) rotate(-5deg); }
.info-card h3 { position:relative; font-size:1.08rem; margin-bottom:.6rem; }
.info-card p { position:relative; font-size:.93rem; color:var(--color-text-muted); line-height:1.7; }

/* --- FAQ --- */
.faq-list { display:flex; flex-direction:column; gap:.75rem; }
.faq-item { border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition-base); }
.faq-item:hover { border-color:rgba(59,130,246,.25); }
.faq-item.open { border-color:var(--color-primary-light); box-shadow:0 4px 20px rgba(30,64,175,.08); }
.faq-question { width:100%; background:none; border:none; padding:1.1rem 1.25rem; font-family:var(--font-body); font-size:.98rem; font-weight:600; color:var(--color-text); text-align:left; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:all var(--transition-base); }
.faq-item.open .faq-question { color:var(--color-primary); }
.faq-question:hover { background:rgba(30,64,175,.02); }
.faq-question:focus-visible { outline:3px solid var(--color-accent); outline-offset:-3px; }
.faq-chevron { transition:transform var(--transition-base); flex-shrink:0; color:var(--color-text-muted); }
.faq-item.open .faq-chevron { transform:rotate(180deg); color:var(--color-primary); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height var(--transition-slow),padding var(--transition-slow); }
.faq-item.open .faq-answer { max-height:500px; padding:0 1.25rem 1.15rem; }
.faq-answer p { font-size:.93rem; color:var(--color-text-muted); line-height:1.75; }

/* --- Related Cities --- */
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; }
.related-card { display:flex; align-items:center; gap:.75rem; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius-lg); transition:all var(--transition-base); }
.related-card:hover { border-color:var(--color-primary-light); box-shadow:var(--shadow-md); transform:translateY(-3px); }

/* --- Ads --- */
.ad-slot { background:linear-gradient(135deg,var(--color-surface-alt),rgba(241,245,249,.5)); border:1px dashed rgba(203,213,225,.6); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; min-height:90px; }
.ad-slot-leaderboard { min-height:90px; }
.ad-slot-in-article { min-height:100px; margin:2rem 0; }
.ad-slot-native { min-height:180px; margin:2.5rem 0; }

/* --- Footer --- */
.site-footer { background:linear-gradient(180deg,#0c1222,#0a0f1a); color:var(--color-text-light); padding:3.5rem 1.5rem 1.5rem; margin-top:4rem; position:relative; }
.site-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(59,130,246,.3),var(--color-accent),rgba(59,130,246,.3),transparent); }
.footer-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; }
.footer-col h4 { color:#fff; font-size:.92rem; margin-bottom:1rem; text-transform:uppercase; letter-spacing:.07em; position:relative; padding-bottom:.6rem; }
.footer-col h4::after { content:''; position:absolute; bottom:0; left:0; width:24px; height:2px; background:var(--color-accent); border-radius:2px; }
.footer-col a { display:block; color:rgba(241,245,249,.55); font-size:.88rem; padding:.3rem 0; transition:all var(--transition-fast); }
.footer-col a:hover { color:#fff; padding-left:6px; }
.footer-bottom { max-width:1280px; margin:2rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; font-size:.82rem; color:rgba(241,245,249,.35); }
.footer-bottom .update-date { color:var(--color-accent); font-weight:600; }

/* --- Utilities --- */
.container { max-width:1280px; margin:0 auto; padding:0 1.5rem; }
.text-center { text-align:center; }
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem} .mt-6{margin-top:3rem}
.mb-2{margin-bottom:1rem} .mb-4{margin-bottom:2rem}
.py-6{padding-top:3rem;padding-bottom:3rem} .py-8{padding-top:4rem;padding-bottom:4rem}
.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; }
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .85rem; font-size:.8rem; font-weight:600; border-radius:var(--radius-full); background:linear-gradient(135deg,rgba(30,64,175,.06),rgba(59,130,246,.08)); color:var(--color-primary); border:1px solid rgba(30,64,175,.06); transition:all var(--transition-base); }
.badge:hover { background:var(--color-primary); color:#fff; border-color:transparent; }

/* --- Scroll Reveal --- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal:nth-child(2){transition-delay:.08s} .reveal:nth-child(3){transition-delay:.16s} .reveal:nth-child(4){transition-delay:.24s} .reveal:nth-child(5){transition-delay:.32s} .reveal:nth-child(6){transition-delay:.4s}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--color-surface-alt); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--color-primary-light),var(--color-primary)); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--color-primary-dark); }
::selection { background:rgba(30,64,175,.15); color:var(--color-primary-dark); }

/* --- Print --- */
@media print { .site-header,.site-footer,.ad-slot,.search-box,.map-container,.back-to-top{display:none!important} body{font-size:12pt;color:#000} .hero{min-height:auto;padding:1rem;background:#fff;color:#000} }

/* ================================================================
   BARRIOS SECTION STYLES
   ================================================================ */

/* Loader animation */
.barrios-loader {
  width: 36px; height: 36px; margin: 0 auto;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: barrios-spin .8s linear infinite;
}
@keyframes barrios-spin { to { transform: rotate(360deg); } }

/* Stats bar */
.barrios-stats {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(30,64,175,.04), rgba(59,130,246,.06));
  border: 1px solid rgba(30,64,175,.08);
  border-radius: var(--radius-lg);
}
.barrios-stat {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 80px; text-align: center;
}
.barrios-stat-num {
  font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}
.barrios-stat-label {
  font-size: .78rem; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem;
}

/* Search box */
.barrios-search-box {
  position: relative; margin-bottom: 1rem;
}
.barrios-search-box input {
  width: 100%; padding: .75rem 1rem .75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-family: var(--font-body); font-size: .92rem;
  color: var(--color-text);
  transition: all var(--transition-fast);
  outline: none;
}
.barrios-search-box input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30,64,175,.1);
}
.barrios-search-count {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-size: .78rem; color: var(--color-text-muted); font-weight: 500;
  pointer-events: none;
}

/* View toggles */
.barrios-view-toggles {
  display: flex; gap: .4rem; margin-bottom: 1.25rem;
  padding: .25rem; background: var(--color-surface-alt);
  border-radius: var(--radius-md); width: fit-content;
}
.barrios-view-btn {
  display: flex; align-items: center; gap: .35rem;
  padding: .45rem .85rem; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted);
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: all var(--transition-fast);
}
.barrios-view-btn:hover { color: var(--color-text); background: rgba(0,0,0,.03); }
.barrios-view-btn.active {
  background: var(--color-surface); color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Localidad groups (list view) */
.barrios-localidad-group { margin-bottom: 1.5rem; }
.barrios-localidad-title {
  display: flex; align-items: center; gap: .4rem;
  font-size: .95rem; font-weight: 700; color: var(--color-text);
  padding-bottom: .5rem; margin-bottom: .5rem;
  border-bottom: 2px solid var(--color-border);
}
.barrios-localidad-icon { font-size: 1rem; }
.barrios-localidad-count {
  margin-left: auto; font-size: .72rem; font-weight: 600;
  background: var(--color-primary); color: #fff;
  padding: .15rem .5rem; border-radius: var(--radius-full);
  min-width: 20px; text-align: center;
}

/* Barrio list items */
.barrios-list { display: flex; flex-direction: column; gap: .25rem; }
.barrio-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .85rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}
.barrio-item:hover {
  background: linear-gradient(135deg, rgba(30,64,175,.03), rgba(59,130,246,.05));
  border-color: rgba(30,64,175,.1);
  transform: translateX(3px);
}
.barrio-info { flex: 1; min-width: 0; }
.barrio-name {
  display: block; font-size: .9rem; font-weight: 600; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barrio-loc {
  display: block; font-size: .78rem; color: var(--color-text-muted); margin-top: .1rem;
}
.barrio-code-wrap { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.barrio-code {
  font-family: var(--font-mono); font-size: .92rem; font-weight: 700;
  color: var(--color-primary); letter-spacing: .02em;
}
.barrio-copy-btn {
  padding: .25rem .4rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface);
  cursor: pointer; font-size: .78rem; transition: all var(--transition-fast);
  line-height: 1;
}
.barrio-copy-btn:hover {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
  transform: scale(1.05);
}

/* Grid view */
.barrios-grid-view {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
}
.barrio-card {
  padding: 1rem; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
  text-align: center; transition: all var(--transition-fast);
}
.barrio-card:hover {
  border-color: var(--color-primary); transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30,64,175,.1);
}
.barrio-card-code {
  font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700;
  color: var(--color-primary); margin-bottom: .3rem;
}
.barrio-card-name {
  font-weight: 600; font-size: .88rem; color: var(--color-text); margin-bottom: .15rem;
}
.barrio-card-loc {
  font-size: .78rem; color: var(--color-text-muted); margin-bottom: .5rem;
}
.barrio-card .barrio-copy-btn {
  padding: .3rem .7rem; font-size: .78rem;
}

/* Barrios legend on map */
.barrios-legend { font-family: var(--font-body); }

/* Responsive */
@media (max-width: 640px) {
  .barrios-stats { gap: .5rem; padding: .75rem; }
  .barrios-stat-num { font-size: 1.3rem; }
  .barrios-view-toggles { width: 100%; }
  .barrios-view-btn { flex: 1; justify-content: center; font-size: .78rem; padding: .4rem .5rem; }
  .barrios-grid-view { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .barrio-item { padding: .5rem .65rem; }
}

/* ================================================================
   CITY VISUAL CARDS – Modern futuristic design
   ================================================================ */

/* Grid layout */
.city-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* Card animation */
@keyframes card-slide-up {
  0% { opacity: 0; transform: translateY(30px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.city-visual-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  animation: card-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.city-visual-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 32px rgba(30,64,175,0.15);
}

/* Card background with gradient */
.city-card-bg {
  position: relative;
  padding: 1.5rem 1.25rem;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* Decorative pattern overlay */
.city-card-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0%, transparent 40%);
  pointer-events: none;
}
.city-card-pattern::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.city-card-pattern::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}

/* Card content */
.city-card-content {
  position: relative;
  z-index: 1;
}

.city-card-flag {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.city-card-name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  line-height: 1.3;
}

.city-card-state {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  margin-top: 0.2rem;
  display: block;
}

/* Postal code badge */
.city-card-code-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 1;
  letter-spacing: 0.03em;
}

/* Card footer */
.city-card-footer {
  padding: 0.75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

.city-card-range {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
}

.city-card-pop {
  font-size: 0.75rem;
}

/* Hover effect on badge */
.city-visual-card:hover .city-card-code-badge {
  background: rgba(255,255,255,0.3);
  transform: scale(1.05);
  transition: all 0.3s;
}

/* Hover effect on name */
.city-visual-card:hover .city-card-name {
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width: 640px) {
  .city-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
  }
  .city-card-bg {
    min-height: 110px;
    padding: 1.1rem 1rem;
  }
  .city-card-name { font-size: 1rem; }
  .city-card-flag { font-size: 1.5rem; }
}

/* ================================================================
   COOKIE BANNER ANIMATIONS
   ================================================================ */
#cookie-banner {
  animation: cookie-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cookie-slide-up {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
#cookie-banner button:hover {
  transform: scale(1.05);
}

/* ================================================================
   COUNTRY IMAGE CARDS – Homepage with real photos
   ================================================================ */

.countries-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.country-image-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  animation: card-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  position: relative;
}

/* Moving light border effect */
.country-image-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-lg);
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle, 0deg),
    transparent 0%,
    transparent 20%,
    rgba(255,255,255,0.95) 35%,
    rgba(96,165,250,0.9) 50%,
    rgba(255,255,255,0.95) 65%,
    transparent 80%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 2;
  pointer-events: none;
}

.country-image-card:hover::before {
  opacity: 1;
  animation: glow-rotate 2s linear infinite;
}

@keyframes glow-rotate {
  0% { --glow-angle: 0deg; }
  100% { --glow-angle: 360deg; }
}

@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.country-image-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 16px 40px rgba(30,64,175,0.22),
    0 0 30px rgba(96,165,250,0.18),
    0 0 60px rgba(96,165,250,0.08);
}

.country-img-bg {
  position: relative;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-primary);
  overflow: hidden;
}

/* Image brightness on hover */
.country-image-card:hover .country-img-bg {
  filter: brightness(1.15);
  transition: filter 0.4s;
}

.country-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15,23,42,0.2) 0%,
    rgba(15,23,42,0.4) 40%,
    rgba(15,23,42,0.78) 100%
  );
  transition: all 0.4s;
}

/* On hover: less overlay = brighter image */
.country-image-card:hover .country-img-overlay {
  background: linear-gradient(
    180deg,
    rgba(15,23,42,0.05) 0%,
    rgba(15,23,42,0.15) 40%,
    rgba(15,23,42,0.55) 100%
  );
}

.country-img-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem;
  z-index: 1;
}

.country-img-flag {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
  transition: transform 0.3s;
}

.country-image-card:hover .country-img-flag {
  transform: scale(1.15);
}

.country-img-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  line-height: 1.2;
}

.country-img-cities {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  margin: 0.25rem 0 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.country-img-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 1;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.country-img-footer {
  padding: 0.75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  font-weight: 500;
}

.country-image-card:hover .country-img-badge {
  background: rgba(255,255,255,0.25);
  transition: all 0.3s;
}

@media (max-width: 640px) {
  .countries-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
  }
  .country-img-bg { height: 150px; }
  .country-img-name { font-size: 1.1rem; }
  .country-img-flag { font-size: 1.8rem; }
}