:root{
  /* Base */
  --bg-950:#0f141b;   /* banner más oscuro */
  --bg-900:#161d26;
  --bg-800:#1d2531;
  --nav-700:#2c3647;  /* cinta más clara */
  --nav-650:#323e52;

  --text-100:#eef5ff;
  --text-80:#dfe9f7;
  --text-70:#c8d3e0;
  --text-50:#a8b2c2;

  --border:#ffffff1f;
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:22px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --transition: .18s ease;
}

/* Reset / tipografía */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  color:var(--text-100);
  background:
    radial-gradient(1200px 800px at 20% 0%, #ffffff08 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 10%, #ffffff10 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-900) 0%, var(--bg-800) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}

input,
select,
textarea{
  color:var(--text-100);
}

input::placeholder,
textarea::placeholder{
  color:var(--text-50);
  opacity:.85;
}

.offline-banner{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:6000;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  padding:14px 24px;
  background:linear-gradient(120deg, rgba(220, 38, 38, 0.95) 0%, rgba(185, 28, 28, 0.92) 100%);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.18);
  box-shadow:0 10px 30px rgba(185, 28, 28, 0.35);
  transform:translateY(-120%);
  transition:transform 0.25s ease, opacity 0.25s ease;
  opacity:0;
}
.offline-banner.is-visible{
  transform:translateY(0);
  opacity:1;
}
.offline-indicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  color:#b91c1c;
  font-weight:800;
  font-size:12px;
  box-shadow:0 2px 6px rgba(255,255,255,0.35);
}
.offline-indicator::after{
  content:"!";
  line-height:1;
}
.offline-text{
  font-weight:700;
  font-size:15px;
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.offline-subtext{
  font-size:13px;
  color:rgba(255,255,255,0.86);
  max-width:520px;
}

/* ---------- ENCABEZADO ---------- */
.topbar{
  position:relative;z-index:5000;
  background:
    radial-gradient(900px 400px at 50% -200px, #ffffff12 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-950) 0%, #121821 100%);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(6px);
}
.topbar__inner{
  max-width:1320px;margin:0 auto;padding:18px 22px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;position:relative;
}
.brand{display:flex;align-items:center;gap:14px}
.brand__maga{height:72px; width:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.brand__purulha-mobile{display:none; height:72px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}

.headline{text-align:center;line-height:1.15}
.headline h1{margin:0;font-weight:800;font-size:clamp(20px, 2.6vw, 30px);letter-spacing:.02em}
.headline p{margin:6px 0 0 0;font-weight:600;font-size:clamp(13px, 1.7vw, 15px);color:var(--text-70);letter-spacing:.06em;text-transform:uppercase}

.right-actions{display:flex;align-items:center;gap:10px}
.right-logo img{height:82px}

/* Hamburguesa */
.hamburger{
  display:none; /* visible en móvil */
  width:44px;height:44px;border-radius:10px;border:1px solid var(--border);
  background:transparent;position:absolute;right:22px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:100;
}
.hamburger span{
  position:absolute;left:10px;right:10px;height:2px;background:var(--text-80);border-radius:2px;transition:var(--transition);
}
.hamburger span:nth-child(1){top:14px}
.hamburger span:nth-child(2){top:21px}
.hamburger span:nth-child(3){top:28px}

/* ---------- NAV / CINTA ---------- */
.nav{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--nav-700) 0%, var(--nav-650) 100%);
}
.nav__inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 22px}
.nav__group{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav__link{font-weight:800;color:var(--text-100);padding:11px 16px;border-radius:12px;border:1px solid transparent;background:transparent;cursor:pointer;display:flex;align-items:center;gap:8px;transition:var(--transition);letter-spacing:.03em;text-transform:uppercase}
.nav__link:hover,.nav__link:focus-visible{background:#ffffff1a;border-color:#ffffff2b;box-shadow:0 0 0 2px #ffffff14 inset}
.nav__link.active{background:#ffffff33;border-color:#ffffff35;box-shadow:0 0 0 2px #ffffff18 inset}

.chev{width:10px;height:10px;display:inline-block;border-right:2px solid var(--text-70);border-bottom:2px solid var(--text-70);transform:rotate(45deg) translateY(-1px);transition:var(--transition);margin-left:4px}
.is-open .chev{transform:rotate(-135deg)}

.search{margin-left:auto;position:relative;flex:1;max-width:420px}
.search__wrap{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 14px;border-radius:999px;border:1px solid var(--border);background:linear-gradient(180deg, #2b3748 0%, #243043 100%);box-shadow: inset 0 1px 0 #ffffff0f, 0 6px 22px rgba(0,0,0,.24)}
.search input{flex:1;background:transparent;border:0;outline:0;color:var(--text-100);font-weight:600;font-size:15px}
.search input::placeholder{color:var(--text-50);opacity:.9}
.mini{min-width:38px;height:34px;border-radius:10px;display:grid;place-items:center;transition:var(--transition)}
.mini--ghost{background:transparent;border:0}
.mini--ghost:hover{background:#ffffff1a}
.icon{width:18px;height:18px;display:block;background-color:#86c9ff;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') center/contain no-repeat;
}
.icon--white{background-color:#fff}

/* ---------- DROPDOWNS escritorio ---------- */
.dd{position:relative}
.dd__panel{position:absolute;top:44px;left:0;min-width:280px;background:radial-gradient(800px 400px at 20% -40%, #ffffff0a 0%, transparent 70%),linear-gradient(180deg, #273449 0%, #1f2937 100%);border:1px solid var(--border);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow);display:none;z-index:5050}
.dd__panel.show{display:block;animation:fadeSlide .16s ease both}
@keyframes fadeSlide{from{opacity:.0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}
.dd__section{padding:8px}
.dd__grid{display:grid;grid-template-columns:1fr;gap:8px}
.dd__item{border:1px solid #ffffff14;border-radius:12px;padding:12px 14px;background:linear-gradient(180deg, #2a384e 0%, #263447 100%);color:var(--text-100);font-weight:800;transition:var(--transition);position:relative;outline:0}
.dd__item:hover,.dd__item:focus-visible{background:linear-gradient(180deg, #31425a 0%, #2b3c52 100%);border-color:#ffffff3a;box-shadow:0 0 0 3px #ffffff22, inset 0 0 0 1px #ffffff80}
.dd__item.active{background:linear-gradient(180deg, #0772d2 0%, #0a5bb8 100%);border-color:#0b8fff;box-shadow:0 0 0 3px rgba(7, 114, 210, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5);animation:pulse-active 2s ease-in-out}
.dd .dd__btn.is-open{background:#ffffff1a;border-color:#ffffff2b;box-shadow:0 0 0 2px #ffffff14 inset}
.dd__search{display:flex;align-items:center;gap:8px;margin:4px 6px 10px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,#2b394f 0%, #243448 100%)}
.dd__search input{flex:1;background:transparent;border:0;outline:0;color:var(--text-100);font-weight:600;font-size:14px}

/* ---------- HERO / MAPA ---------- */
.hero{position:relative;overflow:hidden;border-top:1px solid var(--border);background:radial-gradient(900px 400px at 10% 30%, #ffffff10 0%, transparent 60%),radial-gradient(1100px 600px at 90% 70%, #ffffff0b 0%, transparent 65%),linear-gradient(180deg, #212a38 0%, #243044 35%, #1e2736 100%)}
.hero__inner{max-width:1400px;margin:0 auto;padding:28px 24px 72px}
.map-card{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;background:radial-gradient(800px 500px at 40% -10%, #ffffff0f 0%, transparent 60%),radial-gradient(600px 300px at 75% 110%, #ffffff12 0%, transparent 60%),linear-gradient(180deg, #223044 0%, #1f2a3b 100%);box-shadow: var(--shadow), inset 0 1px 0 #ffffff10}
.map-card::after{content:"";position:absolute;inset:-10%;z-index:0;background: radial-gradient(700px 280px at 50% 20%, #ffffff12 0%, transparent 60%), radial-gradient(900px 380px at 50% 80%, #ffffff0e 0%, transparent 60%);filter: blur(30px);pointer-events:none}
.map{position:relative;z-index:1;display:block;margin:0 auto;max-width:min(100%, 1180px);height:auto;object-fit:contain;filter: drop-shadow(0 14px 40px rgba(0,0,0,.45))}

/* ---------- DRAWER (menú móvil) ---------- */
.drawer{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.4);display:none;align-items:stretch;justify-content:flex-end}
.drawer.open{display:flex}
.drawer__panel{position:relative;height:100%;width:min(86vw, 420px);background:linear-gradient(180deg, #2f3a4c 0%, #2a3343 100%);border-left:1px solid var(--border);box-shadow:-10px 0 30px rgba(0,0,0,.4);padding:18px 18px 24px;overflow:auto;animation:slideIn .18s ease both;display:flex;flex-direction:column;box-sizing:border-box;z-index:10002}
.drawer__menu{margin-top:38px;display:flex;flex-direction:column;gap:12px;flex:1;overflow:auto}
.drawer__link{display:block;padding:14px 6px;color:#fff;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:var(--transition)}
@keyframes slideIn{from{transform:translateX(40px);opacity:.8}to{transform:translateX(0);opacity:1}}
.drawer__close{position:absolute;right:14px;top:10px;width:44px;height:44px;border-radius:10px;border:1px solid var(--border);background:transparent;cursor:pointer}
.drawer__close span{position:absolute;left:11px;right:11px;top:21px;height:2px;background:#fff;border-radius:2px;transform-origin:center}
.drawer__close span:first-child{transform:rotate(45deg)}
.drawer__close span:last-child{transform:rotate(-45deg)}
.drawer__link:hover{background:#ffffff1a;border-color:#ffffff2b}
.ddm{border-radius:10px;border:1px solid transparent}
.ddm.open{background:#ffffff12;border-color:#ffffff2b}
.ddm__btn{width:100%;text-align:left;padding:14px 6px;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:transparent;border:0;border-radius:10px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.car{width:10px;height:10px;border-right:2px solid #cbd6ea;border-bottom:2px solid #cbd6ea;transform:rotate(-45deg);transition:var(--transition)}
.ddm.open .car{transform:rotate(135deg)}
.ddm__panel{overflow:hidden;max-height:0;transition:max-height .22s ease}
.ddm__item{display:block;margin:0 0 8px 10px;padding:12px;border-radius:10px;background:linear-gradient(180deg, #324057 0%, #2b3a4d 100%);border:1px solid #ffffff1f;color:#fff;font-weight:700;transition:all 0.3s ease;text-decoration:none}
.ddm__item:hover{box-shadow:0 0 0 3px #ffffff22 inset;border-color:#ffffff3b}
.ddm__item.active{background:linear-gradient(180deg, #0772d2 0%, #0a5bb8 100%);border-color:#0b8fff;box-shadow:0 0 0 3px rgba(7, 114, 210, 0.3) inset;animation:pulse-active 2s ease-in-out}
.ddm__search{display:flex;align-items:center;gap:8px;margin:10px 10px 12px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,#2b394f 0%, #243448 100%)}
.ddm__search input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-weight:600}

/* ---------- SECCIÓN DE EVENTOS ---------- */
.events-section{
  background:radial-gradient(900px 400px at 10% 30%, #ffffff10 0%, transparent 60%),
            radial-gradient(1100px 600px at 90% 70%, #ffffff0b 0%, transparent 65%),
            linear-gradient(180deg, #212a38 0%, #243044 35%, #1e2736 100%);
  border-top:1px solid var(--border);
  padding:30px 0 60px;
  transition: all 0.3s ease;
  scroll-margin-top: 120px; /* Espacio para el header fijo */
}

/* Efecto de resaltado cuando se hace scroll a la sección */
.events-section.scroll-highlight {
  background: radial-gradient(900px 400px at 10% 30%, rgba(0, 123, 255, 0.15) 0%, transparent 60%),
              radial-gradient(1100px 600px at 90% 70%, rgba(0, 123, 255, 0.1) 0%, transparent 65%),
              linear-gradient(180deg, #212a38 0%, #243044 35%, #1e2736 100%);
  border-top: 1px solid rgba(0, 123, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.2);
  transform: scale(1.01);
}

/* Scroll suave para toda la página */
html {
  scroll-behavior: smooth;
}

.events__inner{
  max-width:1400px;
  margin:0 auto;
  padding:0 24px;
}

.events__header{
  text-align:center;
  margin-bottom:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.events__icon{
  width:48px;
  height:48px;
  background:linear-gradient(135deg, #ffffff20 0%, #ffffff10 100%);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-100);
  border:1px solid var(--border);
}

.events__title{
  margin:0;
  font-weight:800;
  font-size:clamp(24px, 3vw, 36px);
  color:var(--text-100);
  letter-spacing:.02em;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
}

.events__container{
  position:relative;
  max-width:1200px;
  margin:0 auto;
}

.events__carousel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:480px;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  overflow:hidden;
}

.event-card{
  position:absolute;
  width:480px;
  height:520px;
  background:radial-gradient(800px 500px at 40% -10%, #ffffff0f 0%, transparent 60%),
            radial-gradient(600px 300px at 75% 110%, #ffffff12 0%, transparent 60%),
            linear-gradient(180deg, #223044 0%, #1f2a3b 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  opacity:0;
  transform:translateX(100px) scale(0.9);
  transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow:var(--shadow), inset 0 1px 0 #ffffff10;
}

.event-card.active{
  opacity:1;
  transform:translateX(-50%) scale(1);
  z-index:2;
}

.event-card.active + .event-card.active{
  opacity:1;
  transform:translateX(50%) scale(1);
  z-index:1;
}

.event-card__date{
  position:absolute;
  top:16px;
  left:16px;
  z-index:3;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px);
  border-radius:8px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,0.2);
  text-align:center;
  min-width:60px;
}

.date__month{
  font-size:12px;
  font-weight:600;
  color:var(--text-80);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:2px;
}

.date__day{
  font-size:20px;
  font-weight:800;
  color:var(--text-100);
  line-height:1;
  margin:4px 0;
  border-top:1px solid rgba(255,255,255,0.3);
  border-bottom:1px solid rgba(255,255,255,0.3);
  padding:4px 0;
}

.date__year{
  font-size:12px;
  font-weight:600;
  color:var(--text-80);
  margin-top:2px;
}

.event-card__image{
  position:relative;
  height:300px;
  overflow:hidden;
}

.event-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.4s ease;
}

.event-card:hover .event-card__image img{
  transform:scale(1.05);
}

.event-card__btn{
  position:absolute;
  bottom:16px;
  right:16px;
  background:linear-gradient(135deg, #2c3647 0%, #1d2531 100%);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 16px;
  color:var(--text-100);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:var(--transition);
  backdrop-filter:blur(8px);
}

.event-card__btn:hover{
  background:linear-gradient(135deg, #323e52 0%, #243043 100%);
  border-color:#ffffff3a;
  box-shadow:0 0 0 2px #ffffff22;
}

.event-card__content{
  padding:20px;
  height:200px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.event-card__title{
  margin:0 0 12px 0;
  font-weight:800;
  font-size:20px;
  color:var(--text-100);
  letter-spacing:.02em;
  text-transform:uppercase;
}

.event-card__description{
  margin:0;
  color:var(--text-70);
  font-weight:600;
  font-size:15px;
  line-height:1.5;
}

.events__indicators{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:32px;
}

.indicator{
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid var(--text-50);
  background:transparent;
  cursor:pointer;
  transition:var(--transition);
}

.indicator.active{
  background:var(--text-100);
  border-color:var(--text-100);
  box-shadow:0 0 0 2px #ffffff22;
}

.indicator:hover{
  border-color:var(--text-80);
  transform:scale(1.1);
}

/* ---------- RESPONSIVE: Cambios solo para MÓVIL ---------- */
@media (max-width:900px){
  /* Mostrar hamburguesa, ocultar textos y juntar logos */
  .hamburger{display:block}
  .headline{display:none}          /* Oculta "MAGA — PURULHÁ" y "Gestión de eventos" */
  .right-logo{display:none}        /* Oculta el logo de la derecha */
  .brand__purulha-mobile{display:block} /* Muestra el segundo logo junto al de MAGA */
  .brand__maga{height:64px}
  .brand__purulha-mobile{height:64px}
  .topbar__inner{grid-template-columns:auto 1fr auto}

  /* Cinta */
  .nav__group{display:none}  /* ítems horizontales fuera en móvil */
  .search{max-width:100%}

  /* Eventos responsive */
  .events-section{padding:25px 0 50px}
  .events__inner{padding:0 18px}
  .events__header{gap:12px; margin-bottom:32px}
  .events__icon{width:40px; height:40px}
  .events__carousel{min-height:400px; max-width:100%}
  .event-card{max-width:100%; width:100%; height:auto; position:absolute; left:50%; transform:translateX(-50%) scale(0.95)}
  .event-card.active{transform:translateX(-50%) scale(1)}
  .event-card.active + .event-card.active{transform:translateX(-50%) scale(1)}
  .event-card__date{top:12px; left:12px; padding:6px 10px; min-width:50px}
  .date__day{font-size:18px; padding:3px 0}
  .date__month, .date__year{font-size:11px}
  .event-card__image{height:240px}
  .event-card__content{padding:20px; height:auto; display:block}
  .event-card__title{font-size:18px}
  .event-card__description{font-size:14px}
  .events__indicators{margin-top:24px; gap:10px}
  .indicator{width:10px; height:10px}
}

/* ====== INTERACTIVE MAP STYLES ====== */
.interactive-map {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.map-svg {
  width: 100%;
  height: auto;
  display: block;
  background: #1a2332;
  border-radius: 12px;
}

.region-path {
  fill: #0772d2;
  stroke: #000000;
  stroke-width: 0.5;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-box: fill-box;
  transform-origin: center;
  isolation: isolate;
  will-change: transform, filter;
  vector-effect: non-scaling-stroke;
}

.region-path:hover {
  fill: #0a8ae8;
  filter: brightness(1.2) drop-shadow(0 4px 12px rgba(10, 138, 232, 0.4));
  transform: scale(1.05);
  stroke: #ffffff;
  stroke-width: 3;
  stroke-opacity: 1;
  filter: brightness(1.2) drop-shadow(0 4px 12px rgba(10, 138, 232, 0.4)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

.map-svg text {
  pointer-events: none;
  user-select: none;
  font-family: 'Century', 'Arial', sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .interactive-map {
    max-width: 100%;
    margin: 0;
    border-radius: 8px;
  }
  
  .map-svg {
    border-radius: 8px;
  }
  
  .region-path {
    stroke-width: 0.4;
  }
  
  .region-path:hover {
    transform: scale(1.03);
    stroke-width: 1.5;
  }
}

@media (max-width: 480px) {
  .region-path:hover {
    transform: scale(1.02);
  }
}

/* ======= SECCIÓN DE CONTACTO ======= */
.contact-section {
  background: #212A38;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3rem 0;
  margin-top: 4rem;
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3rem;
  align-items: center;
}

/* Columna izquierda - Información de contacto */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon {
  color: #ffffff;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.contact-text p {
  color: #ffffff;
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
}

.contact-text p:first-child {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

/* Columna central - Logo */
.contact-logo {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.maga-logo {
  max-width: 180px;
  height: auto;
  filter: brightness(0) invert(1);
}


/* Columna derecha - Redes sociales y enlaces */
.contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
}

.contact-links h4 {
  color: #ffffff;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  text-align: right;
}

.social-links {
  display: flex;
  gap: 0.8rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.social-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.social-link.facebook:hover {
  background-color: #1877f2;
}

.social-link.instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}

.footer-link {
  color: #ffffff;
  text-decoration: none;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #a0c4ff;
  text-decoration: underline;
}

/* Responsive para la sección de contacto */
@media (max-width: 1024px) {
  .contact-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .contact-links {
    align-items: center;
  }
  
  .footer-links {
    align-items: center;
  }
  
  .contact-links h4 {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .contact-section {
    padding: 2rem 0;
  }
  
  .contact-container {
    padding: 0 1rem;
    gap: 1.5rem;
  }
  
  .contact-info {
    gap: 1rem;
  }
  
  .contact-item {
    justify-content: center;
  }
  
  .maga-logo {
    max-width: 150px;
  }
  
}

@media (max-width: 480px) {
  .contact-container {
    gap: 1rem;
  }
  
  .contact-text p {
    font-size: 0.85rem;
  }
  
  .contact-links h4 {
    font-size: 0.9rem;
  }
  
  .footer-link {
    font-size: 0.8rem;
  }
}

/* ---------- ANIMACIONES ---------- */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse-active {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(7, 114, 210, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(7, 114, 210, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  }
}

/* ---------- NAV USER DROPDOWN STYLES ---------- */
.nav-user-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nav-user-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.nav-user-icon.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.nav-user-icon svg {
  color: #ffffff;
  transition: color 0.3s ease;
}

.nav-user-icon.active svg {
  color: #0772d2;
}

#navUserDropdown {
  position: fixed !important;
  top: 80px !important;
  right: 20px !important;
  left: auto !important;
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 280px;
  max-width: 320px;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-15px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  backdrop-filter: blur(12px);
  overflow: hidden;
}

#navUserDropdown.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.nav-user-dropdown-content {
  color: #1a1a1a;
}

.nav-user-dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-user-dropdown-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #0772d2, #0a5bb8);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.nav-user-dropdown-avatar .avatar-initial-text {
  position: relative;
  z-index: 1;
}

.nav-user-dropdown-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 2;
}

.nav-user-dropdown-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a !important;
  margin: 0;
  font-family: 'Manrope', sans-serif;
  line-height: 1.2;
}

.nav-user-dropdown-email {
  font-size: 12px;
  color: #6b7280 !important;
  margin: 0;
  font-family: 'Manrope', sans-serif;
  line-height: 1.2;
}

#navUserName {
  color: #1a1a1a !important;
}

#navUserEmail {
  color: #6b7280 !important;
}

.nav-user-dropdown-menu {
  padding: 4px 0;
}

.nav-user-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: none;
  border: none;
  color: #374151 !important;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-family: 'Manrope', sans-serif;
  text-align: left;
  gap: 10px;
  text-decoration: none;
}

.nav-user-dropdown-item:hover {
  background-color: #f8fafc;
  color: #0772d2;
}

.nav-user-dropdown-item svg {
  width: 14px;
  height: 14px;
  color: #6b7280;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.nav-user-dropdown-item:hover svg {
  color: #0772d2;
}

.nav-user-dropdown-divider {
  height: 1px;
  background-color: #f0f2f5;
  margin: 4px 0;
}

/* Primary button style for login */
.nav-user-dropdown-primary {
  background: linear-gradient(135deg, #0772d2, #0a5bb8) !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  margin: 8px 12px !important;
  padding: 12px 16px !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(7, 114, 210, 0.3) !important;
  transition: all 0.2s ease !important;
}

.nav-user-dropdown-primary:hover {
  background: linear-gradient(135deg, #0a5bb8, #084a9c) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(7, 114, 210, 0.4) !important;
}

.nav-user-dropdown-primary svg {
  color: white !important;
}

/* Hide nav user icon on mobile and tablet - only show on desktop */
@media (max-width: 1024px) {
  .nav-user-icon {
    display: none !important;
  }
}

/* ======= MOBILE USER MENU STYLES ======= */
.mobile-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mobile-user-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #4a90e2, #007bff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.mobile-user-avatar .avatar-initial-text {
  position: relative;
  z-index: 1;
}

.mobile-user-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 2;
}

.mobile-user-details {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.mobile-user-email {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 400;
}

.mobile-user-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
  text-decoration: none;
}

.mobile-user-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #4a90e2;
}

.mobile-user-action svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mobile-logout {
  color: #ff6b6b;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 8px;
}

.mobile-logout:hover {
  background: rgba(255, 107, 107, 0.1);
  color: #ff5252;
}

/* Ocultar menú de usuario móvil en desktop */
@media (min-width: 769px) {
  #mobileUserMenu {
    display: none;
  }
}