:root{
  /* Estas 3 variables vienen desde index.php (BD) */
  --accent: #1EBA62;   /* verde claro (topbar / activo) */
  --menu:   #0f3f40;   /* verde oscuro (franjas / fondo) */
  --footer: #1c1f1f;   /* footer */

  /* Derivados (index.php los sobre-escribe, pero dejamos fallback) */
  --accent-rgb: 30,186,98;
  --menu-rgb: 15,63,64;
  --accent-text: #fff;
  --accent-soft-2: rgba(30,186,98,.22);

  --soft:#f5f7fb;
}

*{ scroll-behavior:smooth; }
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* ===== Topbar ===== */
.topbar{
  background: var(--accent);
}
.topbar-link{
  color:#fff; opacity:.92; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.topbar-link:hover{
  opacity:1;
  transform: translateY(-2px);
  background: rgba(255,255,255,.12);
}

/* ===== Brand ===== */
.brand-logo{ width:44px; height:44px; object-fit:contain; }
.brand-text .fw-bold{ letter-spacing:.5px; }

/* ===== Buttons ===== */
.btn-accent{
  background: var(--accent);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--accent-text);
  font-weight:800;
}
.btn-accent:hover{ filter: brightness(.95); }

.btn-hoverlift{ transition: transform .18s ease, box-shadow .18s ease; }
.btn-hoverlift:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 35px rgba(0,0,0,.10);
}

/* ===== Hero ===== */
.hero{ position:relative; }
.hero-slide{
  height: 520px;
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
}
@media (max-width: 992px){ .hero-slide{ height: 560px; } }
.hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(circle at 25% 35%, rgba(0,0,0,.12), rgba(0,0,0,.62));
}
.hero-content{ position:absolute; inset:0; display:flex; align-items:center; }
.hero-title{ color:#fff; text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.text-white-75{ color: rgba(255,255,255,.82); }
.badge-soft{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  padding:.45rem .7rem;
  border-radius:999px;
}

/* ===== Banda licencia (verde oscuro) + flechita (accent) ===== */
.licencia-band{
  position:relative;
  overflow:hidden;
  background: linear-gradient(90deg, var(--menu), rgba(var(--menu-rgb), .92));
  border-top: 6px solid rgba(var(--accent-rgb), .75);
}
.licencia-band::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:62px; height:100%;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%);
}

/* ===== Tabs horizontales (cuadrados / hover abajo) ===== */
.tabs-white{ background:#fff; padding: 14px 0 26px; }
.tabs-wrap{
  margin-top: -26px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 55px rgba(var(--accent-rgb), .10);
  padding: 14px;
}
.quick-tabs{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:10px; }
@media(max-width: 992px){ .quick-tabs{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.tabs-white .quick-tab{
  border-radius: 0 !important;
  background: var(--menu);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  color:#fff;
  text-decoration:none;
  padding: 14px 12px;
  display:flex; gap:10px; align-items:center; justify-content:center;
  text-align:center;
  transition: transform .2s ease, filter .2s ease;
}
.tabs-white .quick-tab i{ font-size: 1.35rem; }
.tabs-white .quick-tab span{ font-weight: 800; font-size:.92rem; line-height:1.05; }

.tabs-white .quick-tab.active{
  background: var(--accent);
  color: var(--accent-text);
}
.tabs-white .quick-tab:hover{
  transform: translateY(8px);
  filter: brightness(1.03);
}

/* ===== Fondo diagonal (zona verde oscura) ===== */
.diagonal-wrap,
.section-split{
  background: linear-gradient(165deg, #ffffff 0%, #ffffff 45%, var(--menu) 45%, var(--menu) 100%);
}

/* ===== News cards (PDF tilt) ===== */
.news-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease;
}
.news-thumb{ position:relative; height: 210px; overflow:hidden; }
.news-thumb img{ width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform .35s ease; }
.news-card:hover .news-thumb img{ transform: scale(1.08); }
@media (min-width: 992px){
  .news-card:hover{
    transform: perspective(900px) rotateY(12deg) rotateZ(-1deg) translateY(-6px);
    box-shadow: 0 28px 70px rgba(0,0,0,.14);
  }
}

.date-bubble{
  position:absolute; left: 14px; bottom: 14px;
  width: 56px; height: 56px; border-radius: 999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
}
.date-bubble .day{ font-weight:900; line-height:1; font-size: 1.05rem; }
.date-bubble .mon{ font-size: .75rem; opacity:.9; margin-top:-2px; }
.chip{
  position:absolute; right: 14px; bottom: 16px;
  background: rgba(var(--accent-rgb), .92);
  color: var(--accent-text);
  font-weight:800;
  font-size:.72rem;
  padding: .35rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
}

/* ===== Comunicados ===== */
.comunicados-list{ display:flex; flex-direction:column; gap:10px; }
.comunicado-item{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px;
  border-radius: 16px;
  text-decoration:none;
  color:#fff;
  background: rgba(var(--menu-rgb), .92);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.comunicado-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 35px rgba(0,0,0,.22);
  background: rgba(var(--menu-rgb), .98);
}
.thumb-mini{
  width:54px; height:54px; border-radius: 12px; overflow:hidden;
  border: 1px solid rgba(255,255,255,.16);
  flex: 0 0 auto;
}
.thumb-mini img{ width:100%; height:100%; object-fit:cover; }

/* ===== Glass card ===== */
.glass-card{
  border-radius: 22px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}

/* ===== Footer ===== */
.footer, footer{
  background: var(--footer);
  color:#fff;
}
.footer-title{ font-weight:900; margin-bottom: 10px; }
.footer-link{
  display:block;
  color: rgba(255,255,255,.78);
  text-decoration:none;
  margin: 6px 0;
  transition: transform .16s ease, opacity .16s ease;
}
.footer-link:hover{ transform: translateX(4px); opacity: 1; color:#fff; }
.social-btn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  transition: transform .18s ease, background .18s ease;
}
.social-btn:hover{ transform: translateY(-3px); background: rgba(var(--accent-rgb), .25); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 12px 0;
  background: rgba(0,0,0,.22);
}

/* ===== Rail flotante (botones verticales) ===== */
.floating-rail{
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.rail-btn{
  width: 56px;
  height: 56px;
  border-radius: 0; /* CUADRADO */
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  position:relative;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
}
.rail-btn:hover{
  transform: translateX(-10px);
  filter: brightness(1.03);
}

/* Tooltip */
.rail-btn::after{
  content: attr(data-tooltip);
  position:absolute;
  right: 66px;
  white-space:nowrap;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size: .82rem;
  opacity:0;
  transform: translateX(6px);
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
}
.rail-btn:hover::after{ opacity:1; transform: translateX(0); }

/* ===== Back to top ===== */
.back-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 0;
  display:none;
  align-items:center;
  justify-content:center;
  background: var(--menu);
  color:#fff;
  border: 1px solid rgba(255,255,255,.14);
  z-index: 999;
}
.back-top.show{ display:flex; }

/* ===== WhatsApp FAB ===== */
.wa-fab{
  position:fixed;
  left: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  border-radius: 0;
  z-index: 999;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  outline: 2px solid rgba(var(--accent-rgb), .18);
}