:root{
  --afa-azul:#002046; --afa-azul-osc:#001629; --afa-azul-prof:#001222;
  --afa-naranja:#ff8826; --afa-naranja-soft:#ff9f57;
  --afa-rojo:#fd5459; --afa-rojo-soft:#ff7b80;
  --afa-blanco:#ffffff; --afa-foco:rgba(227,38,54,.65);
  --afa-sans:"Raleway",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --btn-h:42px; --btn-fz:.95rem; --btn-pad-x:18px;
}

html,body{margin:0;padding:0;overflow-x:hidden;font-family:var(--afa-sans)}
.afa-skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.afa-skip:focus-visible{left:16px;top:12px;width:auto;height:auto;padding:8px 12px;background:var(--afa-blanco);color:var(--afa-azul);border-radius:8px;box-shadow:0 0 0 3px var(--afa-foco);z-index:10002}

/* Barra */
.afa-barra{
  position:sticky; top:0; width:100%; z-index:10000;
  background:linear-gradient(180deg,var(--afa-azul) 0%,var(--afa-azul-osc) 50%,var(--afa-azul-prof) 100%);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

/* Layout */
.afa-header{
  display:flex; align-items:center; gap:16px;
  min-height:72px; padding:10px 18px 10px 0; /* gutter a la derecha */
  color:var(--afa-blanco);
}
.afa-logo{padding:0 10px;height:auto;max-height:60px;max-width:400px;width:auto;display:block;object-fit:contain}

/* Navegación */
.afa-nav{
  display:flex; align-items:center; gap:12px;
  justify-content:flex-end; margin-left:auto; flex:0 0 auto;
}
.afa-menu{display:block}
.afa-menu-list{display:flex;list-style:none;margin:0;padding:0}
.afa-menu-list>li{display:flex;align-items:center}
.afa-menu-list a{
  display:block;color:var(--afa-blanco);text-decoration:none;font-weight:600;
  padding:12px 18px;border-radius:8px;position:relative;transition:color .25s ease,transform .2s ease
}
.afa-menu-list a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;width:0;background:var(--afa-naranja);transition:width .25s ease}
.afa-menu-list a:hover{color:var(--afa-naranja);transform:translateY(-1px)}
.afa-menu-list a:hover::after{width:calc(100% - 24px)}
.afa-menu-list a[aria-current="page"], .afa-menu-list .current-menu-item>a{color:var(--afa-naranja)}
.afa-menu-list a[aria-current="page"]::after, .afa-menu-list .current-menu-item>a::after{width:calc(100% - 24px)}
.afa-menu-list a:focus-visible, .afa-toggle:focus-visible, .afa-btn-donar:focus-visible{outline:none;box-shadow:0 0 0 3px var(--afa-foco)}

/* Toggle */
.afa-toggle{
  display:none; font-size:26px; color:var(--afa-blanco);
  background:none; border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:8px 12px; cursor:pointer;
}

/* CTA Donar — aislado de estilos globales */
.afa-cta{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.afa-header .afa-cta > a.afa-btn-donar{
  all:unset;
  display:inline-flex !important; align-items:center; justify-content:center; gap:.5rem;
  height:var(--btn-h) !important; padding:0 var(--btn-pad-x) !important;
  font-family:var(--afa-sans) !important; font-size:var(--btn-fz) !important; line-height:1 !important; font-weight:800 !important;
  color:#fff !important; white-space:nowrap !important; border-radius:12px !important; box-sizing:border-box !important; cursor:pointer !important;
  text-decoration:none !important; border:1px solid rgba(255,255,255,.25) !important;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(145deg,var(--afa-naranja-soft),var(--afa-naranja)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -6px 12px rgba(0,0,0,.35),
    0 12px 24px rgba(255,136,38,.30) !important;
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease !important;
}
.afa-header .afa-cta > a.afa-btn-donar:hover{
  transform:translateY(-1px) !important; filter:saturate(1.05) !important;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(145deg,var(--afa-rojo-soft),var(--afa-rojo)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -6px 12px rgba(0,0,0,.35),
    0 12px 24px rgba(253,84,89,.30) !important;
}

/* CTA móvil dentro del menú */
.afa-menu-cta{display:none;margin-top:18px}
.afa-menu-cta a.afa-btn-donar{
  all:unset;
  display:inline-flex !important; align-items:center; justify-content:center;
  height:var(--btn-h) !important; padding:0 var(--btn-pad-x) !important;
  font-family:var(--afa-sans) !important; font-size:var(--btn-fz) !important; line-height:1 !important; font-weight:800 !important;
  color:#fff !important; white-space:nowrap !important; border-radius:12px !important; box-sizing:border-box !important; cursor:pointer !important; text-decoration:none !important;
  border:1px solid rgba(255,255,255,.25) !important;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(145deg,var(--afa-naranja-soft),var(--afa-naranja)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -6px 12px rgba(0,0,0,.35),
    0 12px 24px rgba(255,136,38,.30) !important;
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease !important;
}
.afa-menu-cta a.afa-btn-donar:hover{
  transform:translateY(-1px) !important; filter:saturate(1.05) !important;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(145deg,var(--afa-rojo-soft),var(--afa-rojo)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -6px 12px rgba(0,0,0,.35),
    0 12px 24px rgba(253,84,89,.30) !important;
}

/* Overlay */
.afa-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9990;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.afa-overlay.show{opacity:1;visibility:visible}
.afa-overlay[hidden]{display:none}

/* Responsive */
@media (max-width:1024px){ .afa-menu-list a{ padding:12px 14px } }
@media (max-width:768px){
  .afa-toggle{display:block}
  .afa-cta{display:none}
  .afa-menu-cta{display:block}

  .afa-menu{
    position:fixed; top:0; right:-100%; width:300px; height:100vh;
    background:linear-gradient(180deg,#001629,#001222);
    padding:80px 22px 24px; transition:right .28s ease; z-index:10001;
    box-shadow:-10px 0 22px rgba(0,0,0,.35)
  }
  .afa-menu.open{ right:0 }
  .afa-menu-list{flex-direction:column;gap:8px}
}

/* Preferencias */
@media (prefers-color-scheme: dark){ .afa-barra{ background:linear-gradient(180deg,#001835,#001229,#000e1f) } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important } }