
/* ==========================================================
   ONG USAR ÑUBLE — ENTREGA IMPEKE FINAL
   ========================================================== */
:root{
  --i-bg:#020810;
  --i-bg2:#061522;
  --i-card:#081827;
  --i-red:#df1235;
  --i-red2:#ff2b4c;
  --i-blue:#1189d2;
  --i-white:#f6f8fb;
  --i-text:#b7c3ce;
  --i-muted:#8798a8;
  --i-line:rgba(92,160,211,.20);
  --i-shadow:0 28px 76px rgba(0,0,0,.34);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--i-bg)}
body{
  margin:0!important;
  background:linear-gradient(180deg,#020810,#061522 48%,#020810)!important;
  color:var(--i-white)!important;
  font-family:'Source Sans 3',sans-serif!important;
  overflow-x:hidden!important;
}
.rv{opacity:1!important;transform:none!important}
img{max-width:100%}

/* Barra roja superior */
.alert-top{
  height:36px!important;
  min-height:36px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  background:linear-gradient(90deg,#b80b27,#da1235,#b80b27)!important;
  color:#fff!important;
  font:500 11px 'Oswald',sans-serif!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  line-height:1!important;
  box-shadow:0 7px 24px rgba(223,18,53,.18)!important;
}
.alert-top .dot{width:5px!important;height:5px!important;flex:0 0 5px!important}

/* Header compacto y alineado */
nav{
  height:80px!important;
  min-height:80px!important;
  padding:0 max(4vw,28px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  background:rgba(2,8,14,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  overflow:visible!important;
  z-index:1000!important;
}
.nav-brand{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  text-decoration:none!important;
  flex:0 0 auto!important;
}
.nav-logo-img{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  border:2px solid rgba(17,137,210,.56)!important;
}
.nav-brand-text strong{
  display:block!important;
  color:#fff!important;
  font:700 20px 'Oswald',sans-serif!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.nav-brand-text small{
  display:block!important;
  color:#8093a5!important;
  font-size:8px!important;
  letter-spacing:.21em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.nav-links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.nav-links li{height:80px!important;display:flex!important;align-items:center!important}
.nav-links a{
  height:80px!important;
  min-height:80px!important;
  padding:0 15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#98a9b8!important;
  text-decoration:none!important;
  font:500 11px 'Oswald',sans-serif!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
  line-height:1!important;
  position:relative!important;
  border:0!important;
  background:transparent!important;
}
.nav-links a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  bottom:13px;
  height:2px;
  background:var(--i-red);
  transform:scaleX(0);
  transition:transform .22s ease;
}
.nav-links a:hover{color:#fff!important}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{
  height:44px!important;
  min-height:44px!important;
  margin-left:8px!important;
  padding:0 24px!important;
  border-radius:6px!important;
  background:linear-gradient(135deg,#ba0a28,#e51a3d)!important;
  color:#fff!important;
  border:1px solid #f12d4c!important;
  box-shadow:0 10px 26px rgba(223,18,53,.24)!important;
}

/* Hero */
.hero-impeke{
  position:relative!important;
  min-height:680px!important;
  padding:0 max(3vw,24px) 42px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#020810!important;
}
.hero-impeke-bg{
  position:absolute!important;
  inset:0!important;
  z-index:-3!important;
}
.hero-impeke-bg img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:60% center!important;
  display:block!important;
  transform:scale(1.015)!important;
  filter:saturate(.88) contrast(1.08) brightness(.84)!important;
}
.hero-impeke-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  background:
    linear-gradient(90deg,#020810 0%,rgba(2,8,16,.96) 27%,rgba(2,8,16,.68) 49%,rgba(2,8,16,.08) 76%,rgba(2,8,16,.26) 100%),
    linear-gradient(0deg,rgba(2,8,16,.86) 0%,transparent 44%)!important;
}
.hero-impeke-inner{
  width:min(1420px,100%)!important;
  min-height:680px!important;
  margin:0 auto!important;
  padding:58px 20px 32px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 315px!important;
  align-items:center!important;
  gap:42px!important;
}
.hero-impeke-copy{
  width:100%!important;
  max-width:700px!important;
  min-width:0!important;
}
.hero-impeke-kicker{
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  width:max-content!important;
  max-width:100%!important;
  margin-bottom:21px!important;
  color:var(--i-red2)!important;
  font:600 12px 'Oswald',sans-serif!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.hero-impeke-kicker span{
  width:30px!important;
  height:2px!important;
  flex:0 0 30px!important;
  background:var(--i-red)!important;
}
.hero-impeke-title{
  margin:0 0 22px!important;
  font-family:'Oswald',sans-serif!important;
  text-transform:uppercase!important;
  line-height:.87!important;
  letter-spacing:.01em!important;
}
.hero-impeke-title>span,
.hero-impeke-title>strong{
  display:block!important;
  font-size:clamp(68px,7.2vw,108px)!important;
}
.hero-impeke-title>span{color:#fff!important;font-weight:700!important}
.hero-impeke-title>strong{color:var(--i-red)!important;font-weight:700!important}
.hero-impeke-title>small{
  display:block!important;
  margin-top:23px!important;
  color:#e4e8ed!important;
  font-size:clamp(30px,3.1vw,48px)!important;
  font-weight:300!important;
  letter-spacing:.20em!important;
}
.hero-impeke-desc{
  max-width:580px!important;
  margin:0 0 29px!important;
  color:#c5ced7!important;
  font-size:16px!important;
  line-height:1.74!important;
}
.hero-impeke-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:14px!important;
}
.impeke-btn{
  min-height:53px!important;
  padding:0 28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  border-radius:6px!important;
  text-decoration:none!important;
  font:600 13px 'Oswald',sans-serif!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
.impeke-btn:hover{transform:translateY(-3px)!important}
.impeke-btn-primary{
  background:linear-gradient(135deg,#c40829,#ef1c40)!important;
  color:#fff!important;
  border:1px solid #ff3150!important;
  box-shadow:0 14px 33px rgba(223,18,53,.25)!important;
}
.impeke-btn-secondary{
  background:rgba(2,8,15,.45)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.54)!important;
}
.impeke-btn-secondary:hover{border-color:#fff!important}

.hero-impeke-brand{
  justify-self:end!important;
  width:295px!important;
  text-align:center!important;
}
.hero-impeke-brand>img{
  width:195px!important;
  height:195px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  border:4px solid rgba(17,137,210,.72)!important;
  box-shadow:0 0 0 11px rgba(17,137,210,.06),0 0 48px rgba(17,137,210,.18)!important;
}
.hero-impeke-brand-card{
  margin-top:20px!important;
  padding:17px 15px!important;
  border-radius:12px!important;
  background:rgba(2,9,16,.76)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  backdrop-filter:blur(12px)!important;
  box-shadow:0 17px 40px rgba(0,0,0,.28)!important;
}
.hero-impeke-brand-card strong{
  display:block!important;
  color:var(--i-red2)!important;
  font:700 16px 'Oswald',sans-serif!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
.hero-impeke-brand-card span{
  display:block!important;
  margin-top:6px!important;
  color:#fff!important;
  font:400 12px 'Oswald',sans-serif!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}

/* Botones generales */
.btn-prim,.btn-sec,.btn-full,.btn-auth-submit,.btn-auth-secondary{
  min-height:52px!important;
  padding:0 27px!important;
  border-radius:6px!important;
  font:600 13px 'Oswald',sans-serif!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  transition:transform .22s ease,box-shadow .22s ease!important;
}
.btn-prim,.btn-full,.btn-auth-submit{
  background:linear-gradient(135deg,#c40829,#ef1c40)!important;
  color:#fff!important;
  border:1px solid #ff3150!important;
  box-shadow:0 13px 31px rgba(223,18,53,.22)!important;
}
.btn-sec,.btn-auth-secondary{
  background:transparent!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.48)!important;
}

/* Secciones completas */
.stats-strip{background:#030d16!important;border-block:1px solid var(--i-line)!important}
.stats-inner{max-width:1420px!important;padding:0 max(3vw,24px)!important}
.stat-cell{padding:30px 15px!important;border-right:1px solid rgba(255,255,255,.06)!important}
.stat-n{color:var(--i-red2)!important;font-size:43px!important}
.stat-l{color:#8fa2b3!important}

section:not(.hero-impeke){padding:96px max(4vw,28px)!important}
.s-inner{max-width:1300px!important}
.s-head{margin-bottom:50px!important}
.s-num{color:rgba(223,18,53,.09)!important}
.s-eyebrow{color:var(--i-red2)!important}
h2{color:#fff!important;font-size:clamp(37px,4vw,54px)!important}
#mision,#equipo,#contacto{background:linear-gradient(145deg,#061421,#081b2b)!important}
#capacidades,#operaciones{background:linear-gradient(145deg,#020910,#05131f)!important}
.divider{background:linear-gradient(90deg,transparent,rgba(223,18,53,.24),transparent)!important}

.val,.cap,.miembro,.coop-item,.cc,.form-panel,.volunteer-box{
  background:linear-gradient(145deg,rgba(11,34,54,.96),rgba(5,21,35,.98))!important;
  border:1px solid rgba(84,151,201,.18)!important;
  border-radius:12px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.16)!important;
}
.val{border-left:3px solid var(--i-red)!important}
.val h4,.cap h3,.miembro h4,.coop-panel h3,.contacto-l h3,.form-panel h3{color:#fff!important}
.val p,.cap p,.coop-item p,.mision-text p,.equipo-intro,.tl-item p,.contacto-l>p{color:#9fb0bf!important}
.cap{transition:.24s ease!important}
.cap:hover,.miembro:hover{transform:translateY(-5px)!important;border-color:rgba(239,28,64,.42)!important}
.cap::after{background:linear-gradient(90deg,#d31133,#ff294b)!important}
.cap-bg-num{color:rgba(223,18,53,.08)!important}
.m-ava{background:rgba(223,18,53,.07)!important;border-color:rgba(223,18,53,.42)!important}
.miembro p{color:var(--i-red2)!important}
.timeline::before{background:linear-gradient(var(--i-red2),transparent)!important}
.tl-item::before{background:var(--i-red2)!important}
.tl-date{color:var(--i-red2)!important}
.coop-item,.cc{border-left:3px solid var(--i-red)!important}
.fg input,.fg textarea,.fg select{
  background:#020e18!important;
  border-color:rgba(85,154,205,.22)!important;
  color:#fff!important;
  border-radius:7px!important;
}
.fg input:focus,.fg textarea:focus,.fg select:focus{
  border-color:var(--i-red2)!important;
  box-shadow:0 0 0 3px rgba(223,18,53,.10)!important;
}

/* Footer */
footer{background:#02070c!important;border-top:4px solid var(--i-red)!important}
.footer-logo{border-color:var(--i-red)!important}
.footer-brand-name,.footer-col h5{color:#fff!important}
.footer-brand-desc,.footer-col li,.footer-col a,.footer-bottom p{color:#8ea2b4!important}
.footer-col a:hover{color:var(--i-red2)!important}

/* Acceso, registro y paneles */
.auth-body,.panel-body{
  background:
    radial-gradient(circle at 78% 14%,rgba(223,18,53,.11),transparent 26%),
    linear-gradient(145deg,#020810,#071726)!important;
}
.auth-card,.panel-card,.panel-header,.institutional-card,.stat-card,.admin-module,.admin-table-wrap,.modal-box{
  background:linear-gradient(145deg,#0a2032,#061523)!important;
  border:1px solid rgba(81,151,203,.20)!important;
  border-radius:15px!important;
  box-shadow:var(--i-shadow)!important;
  color:#fff!important;
}
.auth-title,.panel-title,.admin-section-title,.institutional-card h2,.panel-card h2{color:#fff!important}
.auth-subtitle,.panel-sub,.admin-section-sub,.empty-hint{color:#8fa2b4!important}
.auth-form input,.auth-form select,.auth-form textarea,.panel-body input,.panel-body select,.panel-body textarea{
  background:#020e18!important;
  color:#fff!important;
  border-color:rgba(82,152,203,.22)!important;
  border-radius:7px!important;
}
.admin-shell{background:#04101a!important}
.admin-sidebar{background:#020b13!important;border-right:1px solid rgba(255,255,255,.08)!important}
.admin-sidebar .active{background:rgba(223,18,53,.10)!important;border-left:3px solid var(--i-red)!important;color:#fff!important}
.admin-table th{background:rgba(58,28,37,.78)!important;color:#ff8195!important}
.admin-table td{color:#d9e1e8!important;border-color:rgba(255,255,255,.07)!important}

/* Responsive */
@media(max-width:1080px){
  .nav-links{display:none!important}
  .mobile-menu-btn{display:flex!important}
  .hero-impeke-inner{grid-template-columns:1fr 285px!important;gap:25px!important}
  .hero-impeke-brand{width:270px!important}
  .hero-impeke-brand>img{width:175px!important;height:175px!important}
  .footer-top{grid-template-columns:1fr 1fr!important}
}
@media(max-width:820px){
  .hero-impeke{min-height:auto!important}
  .hero-impeke-inner{grid-template-columns:1fr!important;min-height:auto!important}
  .hero-impeke-brand{justify-self:center!important}
  .hero-impeke-bg img{object-position:68% center!important}
  .mision-grid,.ops-wrap,.contacto-grid{grid-template-columns:1fr!important}
  .equipo-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:600px){
  .alert-top{height:auto!important;min-height:34px!important;font-size:9px!important;letter-spacing:.10em!important}
  nav{height:72px!important;min-height:72px!important;padding:0 14px!important}
  .nav-logo-img{width:47px!important;height:47px!important;min-width:47px!important;min-height:47px!important}
  .nav-brand-text strong{font-size:17px!important}
  .nav-brand-text small{display:none!important}
  .hero-impeke{padding:28px 14px 24px!important}
  .hero-impeke-inner{padding:24px 0 18px!important}
  .hero-impeke-kicker{font-size:9px!important;letter-spacing:.08em!important}
  .hero-impeke-kicker span{width:17px!important;flex-basis:17px!important}
  .hero-impeke-title>span,.hero-impeke-title>strong{font-size:54px!important}
  .hero-impeke-title>small{font-size:26px!important;letter-spacing:.10em!important;margin-top:18px!important}
  .hero-impeke-desc{font-size:15px!important}
  .hero-impeke-actions{flex-direction:column!important}
  .impeke-btn{width:100%!important}
  .stats-inner{grid-template-columns:1fr 1fr!important}
  section:not(.hero-impeke){padding:74px 18px!important}
  .cap-grid,.equipo-grid,.footer-top,.stat-cards{grid-template-columns:1fr!important}
}
