:root{
  --bg:#E6F7EC;
  --card:#ffffff;
  --accent:#2e8b57;
  --muted:#6b7280;
  --ink:#e2e8f0;
  --max-width:1100px;
  --radius:12px;
  --shadow-soft:0 6px 18px rgba(15,23,42,0.06);
  --shadow:0 8px 24px rgba(15,23,42,0.08);
}
/* Bloque 1 (arriba) */
body.theme-dark{
  --bg:#14291f;
  --card:#111827;
  --accent:#2e8b57;
  --muted:#94a3b8;
  --ink:#0b1220;
  background:#14291f;
  color:#e5e7eb;
}
/* Panel FAB en oscuro */
body.theme-dark .fab-panel{
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
/* Tarjetas y contenedores comunes: excluir .card para no tocar contacto.php */
body.theme-dark .side-image,
body.theme-dark .symbol-card,
body.theme-dark .mv-card,
body.theme-dark .section-card,
body.theme-dark .donation-card {
  background: var(--card);
  color: inherit;
}
/* Encabezados de página y títulos con colores fijos en páginas */
body.theme-dark .page-head h1,
body.theme-dark .page-head p,
body.theme-dark .donation-card h3,
body.theme-dark .section h2,
body.theme-dark .mv-card h2,
body.theme-dark .symbol-card h4,
body.theme-dark .goal strong {
  color: #e5e7eb;
}
/* Mejora de legibilidad en párrafos dentro de M/V */
body.theme-dark .mv-card p {
  color: inherit;
}
/* Principles: fondo y borde en oscuro para evitar lavado */
body.theme-dark .principle {
  background: var(--ink);
  border-color: #334155;
}
/* Icono de M/V con fondo acorde en oscuro */
body.theme-dark .mv-card .icon {
  background: #0b1220;
}
/* Banners que usan gradientes claros en páginas */
body.theme-dark .page-banner{
  background: linear-gradient(120deg, rgba(30,41,59,.88), rgba(30,41,59,.78));
}
/* Encabezado de página (.page-head) en oscuro: fondo oscuro y texto claro */
body.theme-dark .page-head{
  background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(30,41,59,.78));
}
body.theme-dark .page-head .small{ color:#cbd5e1 }
/* Bloques de ayuda/CTA que mantenían el blanco */
body.theme-dark .donation-cta,
body.theme-dark .cta{
  background: rgba(46,139,87,0.10);
  border-left-color: var(--accent);
  color: #d1d5db;
}
/* Objetivos con fondo azul claro */
body.theme-dark .goal{
  background: var(--ink);
}
/* Modal en oscuro (páginas usan fondo #fff) */
body.theme-dark .modal .modal-card{
  background: var(--card);
  color: #e5e7eb;
}
body.theme-dark .modal .close-btn{
  background: var(--ink);
  color: #e5e7eb;
}
.modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(2,6,23,.55); backdrop-filter:blur(2.5px); -webkit-backdrop-filter:blur(2.5px); z-index:3000}
.modal.open{display:grid}
.modal-card{background:#fff; border-radius:16px; padding:20px; max-width:min(900px, 92vw); max-height:90vh; overflow-y:auto; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; opacity:0; transform:scale(.9); filter:blur(2px); transition:opacity .28s ease, transform .28s ease, filter .28s ease}
.modal.open .modal-card{opacity:1; transform:scale(1); filter:blur(0)}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
.modal-header h3{margin:0; font-size:18px}
.modal-header h3 i{color:var(--accent); margin-right:8px; font-size:20px}
.close-btn{border:0; background:#f1f5f9; width:36px; height:36px; border-radius:999px; display:grid; place-items:center; cursor:pointer}
.close-btn:hover{filter:brightness(.95)}
.modal-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
#modal-corporativo .modal-card{max-width:min(560px, 92vw)}
#modal-corporativo p{color:var(--muted)}
body.modal-open{overflow:hidden}
/* Inputs y chips claros en Programas */
body.theme-dark .input,
body.theme-dark .select,
body.theme-dark .textarea{
  background: var(--ink);
  border-color: #334155;
  color: #e5e7eb;
}
body.theme-dark .input input::placeholder,
body.theme-dark .textarea::placeholder{
  color: #94a3b8;
}
body.theme-dark .chip{
  border-color: #1f2937;
  background: #0b1220;
  color: #9cd3b2;
}
body.theme-dark .chip[aria-pressed="true"]{
  background: #0b1220;
  border-color: #2e8b57;
}
/* Botones outline/ghost con bordes claros en Requisitos/Programas */
body.theme-dark .btn-outline,
body.theme-dark .btn-ghost{
  border-color: #334155;
  color: var(--accent);
}
/* Banners y botones dentro del banner se mantienen legibles */
body.theme-dark .page-banner .btn{
  background: var(--accent);
  color: #fff;
}
html,body{height:100%}
/* Añadir: asegura que padding/border no rompen el ancho de las columnas */
*, *::before, *::after { box-sizing: border-box; }

/* Body consolidado */
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:#e6f7ec;
  color:#0f172a;
  line-height:1.45;
  ...
}

/* Bloque 2 (más abajo) */
body.theme-dark{
  --bg:#14291f;
  --card:#1f2937;
  --accent:#2e8b57;
  --muted:#94a3b8;
  background:#14291f;
  color:#e5e7eb;
}

/* FAB fijo: por debajo del header y por encima de todo */
.fab-wrap{
  position: fixed;
  top: var(--fab-top, 100px);   /* se ajusta vía JS con la altura real del header */
  left: 20px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

/* Botón principal circular con icono de tuerca */
.fab-btn{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: background .18s ease; /* sin transform para no moverlo */
}
/* Quitar levantamiento por hover para no cambiar posición (sin bloque vacío) */
.fab-btn:hover{
  filter: brightness(1.05); /* efecto sutil sin cambiar posición */
}
/* Aureola cuando está presionado o abierto */
.fab-btn:active,
.fab-btn[aria-expanded="true"]{
  box-shadow: 0 0 0 4px rgba(46,139,87,0.35), var(--shadow-soft);
}
/* Panel desplegable del FAB: fijo debajo del botón sin desplazarlo */
.fab-wrap{
  position: fixed;
  top: var(--fab-top, 100px);
  left: 20px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}
.fab-panel{
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  position: absolute;      /* no refluye: no empuja al botón */
  top: 56px;               /* debajo del FAB (48px alto + margen) */
  left: 0;                 /* alineado con el FAB */
  flex-direction: column;  /* apilar acciones */
  z-index: 2001;           /* por encima del FAB */
}
/* Ocultar correctamente cuando tenga el atributo hidden */
.fab-panel[hidden]{
  display: none !important;
}

/* Botones dentro del panel */
.fab-action{
  background: transparent;
  color: inherit;
  border-radius: 10px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fab-action i{ font-size: 18px; color: var(--accent); }
.fab-action-text{ font-weight: 600; }

body.theme-dark .fab-panel{
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

a{color:inherit; text-decoration:none}
ul{list-style:none; margin:0; padding:0}
button{font-family:inherit; cursor:pointer; border:0; background:transparent; -webkit-tap-highlight-color: transparent;}
img{display:block; max-width:100%; height:auto}

:focus{outline:none}
:focus-visible{outline:3px solid rgba(46,139,87,0.18); outline-offset:2px}

a:focus-visible, button:focus-visible, .btn:focus-visible, .dot:focus-visible {
  outline:3px solid rgba(46,139,87,0.18);
  outline-offset:3px;
}

/* HEADER */
header {
  width: 100%;
  background: #1f5c45;   /* verde oscuro (no muy oscuro) — antes #cdead9 / originalmente #0b1020 */
  color: #fff;            /* combina con nav, marca y hamburguesa que ya son blancos */
  position: relative;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.nav-inner {
  max-width: 12800px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 100px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  row-gap: 10px;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.logo {
  height: 70px;
  width: auto;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; 
  line-height: 0.7; 
}

.brand-title {
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  margin: 0; 
}

.brand-subtitle {
  font-size: 0.75rem; 
  color: #ccc;
  margin: 0; 
}

nav {
  flex: 1;
  min-width: 0;           /* crucial: evita desbordes al encoger por zoom */
}

#site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

#site-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.3s ease;
  white-space: nowrap;
}

#site-nav a:hover {
  background: rgba(255,255,255,0.1);
}

.btn {
  background: #2e8b57;
  color: #fff !important;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  transition: transform 0.2s ease, background 0.3s ease;
}

.btn:hover {
  background: #3aa76d;
  transform: scale(1.05);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1000;
  transition: all 0.3s ease;
}

.hamburger .bar {
  width: 25px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animación del botón hamburguesa */
.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 1000px) {
  .nav-inner {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 20px;
  }

  #site-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
  }

  .brand-text {
    max-width: 50vw; 
  }
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  nav {
    width: 100%;
  }

  #site-nav {
    flex-direction: column;
    align-items: flex-start;
    display: none; 
    background: #1f5c45;
    width: 100%;
    padding: 10px 0;
  }

  #site-nav.show {
    display: flex;
  }

  .brand img {
    height: 40px;
  }
}


/* dropdown */
.dropdown{ position:relative; }
.dropdown > a{display:inline-flex; align-items:center; gap:8px; cursor:pointer}
.caret{font-size:.9rem; color:#fff; opacity:.9}
.dropdown .dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:220px;
  max-width:320px;
  padding:8px;
  border-radius:12px;
  background: rgba(31,92,69,0.98);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 30px rgba(2,6,23,0.6);
  z-index:1500;
  animation:fadeIn .16s ease;
  will-change: opacity, transform;
}
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu,
.dropdown.open > .dropdown-menu{
  display:block;
  opacity:1;
}
.dropdown .dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  color:#e6eef0;
  font-weight:700;
  text-decoration:none;
}
.dropdown .dropdown-menu a:hover, .dropdown .dropdown-menu a:focus{ background: rgba(255,255,255,0.06); color:#fff; }
.dropdown::after{
  content:""; position:absolute; left:-12px; right:-12px; top:100%; height:16px;
}

/*  CARRUSEL */
.hero{margin:0; padding:0;}
.slider-window{
  position:relative;
  overflow:hidden;            
  width:100%;
  height:86vh;
  background:#000;
  user-select:none;
}
.hero-track{
  display:flex; height:100%;
  transition:transform .62s cubic-bezier(.22,.9,.26,1);
  will-change:transform;
}
.slide{flex:0 0 100%; position:relative; height:100%; overflow:hidden; background:#000;}
.slide img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); opacity:.98;
  transition:transform .9s ease, opacity .7s ease;
  pointer-events:none; -webkit-user-drag:none;
}
.slide.enter img{transform:scale(1.02); opacity:1}
.slide.exit img{transform:scale(1.06); opacity:0}

/* caption */
.caption{
  position:absolute; left:72px; right:72px; bottom:56px;
  color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.65);
}
.caption h1{margin:0 0 13px; font-size:36px}
.caption p{margin:0 0 14px; color:#e6eef0}
.caption .hero-cta{margin:0 0 130px;}

/* controls (prev/next) */
/* Nota: hay otra regla .btn más arriba — se respeta el orden original para evitar cambios visuales */
.btn{background:var(--accent); color:#fff; padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:700}
.link{color:#e8f6ee; text-decoration:underline}
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:999px; border:none; cursor:pointer;
  display:grid; place-items:center; background:rgba(15,23,42,.22); color:#fff; z-index:80;
  backdrop-filter:blur(4px);
}
.slider-btn:hover{background:rgba(15,23,42,.32)}
.slider-prev{left:12px} .slider-next{right:12px}

/*  Puntos del carrusel*/
.slider-dots{
  position:absolute;
  left:50%;
  bottom:20px; 
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  z-index:200;
  pointer-events:auto;
}

/* Estilo moderno, glassy con halo activo */
.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.32);
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(2,6,23,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* pequeño pulso al hover */
.dot:hover{ transform: translateY(-2px) scale(1.08); }

/* Estado activo: color + halo */
.dot.active{
  background: var(--accent);
  border-color: rgba(46,139,87,0.9);
  transform: scale(1.26);
  box-shadow:
    0 12px 28px rgba(46,139,87,0.22),
    0 0 0 6px rgba(46,139,87,0.08);
}

/* Anillo interior (efecto de relleno) */
.dot::after{
  content: "";
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(255,255,255,0.9);
  opacity: 0;
  transform: scale(0.6);
  transition: transform .18s ease, opacity .18s ease;
}
.dot.active::after{
  opacity: 1;
  transform: scale(1);
}

/* Focus accesible */
.dot:focus-visible{
  outline: 3px solid rgba(46,139,87,0.28);
  outline-offset: 4px;
}

/* CONTENIDO GENERAL*/
.wrap{max-width:var(--max-width); margin:40px auto; padding:0 20px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.forms-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:26px;
  align-items: stretch;
  grid-auto-rows: auto;
  margin:18px 0 40px;
}
.card{
  background:var(--card); border-radius:12px; padding:22px; box-shadow:var(--shadow-soft);
  opacity:0; transform:translateY(28px);
  transition:opacity .6s ease-out, transform .6s ease-out;
}
/* Dentro del grid, los cards deben poder reducir su ancho y crecer por contenido */
.forms-grid .card {
  width: 100%;
  min-width: 0;
  height: auto;
}
.card.show{opacity:1; transform:translateY(0)}
.card h3{margin:0 0 8px; font-size:18px}
.small{color:var(--muted); font-size:14px}
.spaced-top{margin-top:56px}

/* Ajustes responsivos para formularios y cards */
@media (max-width: 1000px) {
  .forms-grid{ grid-template-columns: 1fr; gap:18px; }
  .grid{ grid-template-columns: repeat(2, 1fr); gap:18px }
}

@media (max-width: 600px) {
  .grid{ grid-template-columns: 1fr }
  .wrap{ margin:20px auto; padding:0 14px }
  .card{ padding:16px }
}

/* HERO INTERIOR / PÁGINAS INTERNAS  */
.hero-int{
  max-width:var(--max-width);
  margin:32px auto 0;
  padding:24px 20px 0;
}
.hero-box{
  background:linear-gradient(180deg, rgba(15,23,42,.75), rgba(15,23,42,.55)), url('../images/slide2.jpg') center/cover no-repeat;
  border-radius:16px; color:#fff; padding:48px 32px; box-shadow:var(--shadow-soft);
}
.hero-box h1{margin:0 0 8px; font-size:32px}
.hero-box p{margin:0; color:#e6eef0}

/* MISION / VISION */
.page-head{
  border:1px solid #e5efe7; border-radius:16px; background:var(--card);
  box-shadow:var(--shadow-soft);
  padding:24px;
  display:flex; 
  flex-direction: row;
  gap:16px; 
  align-items: center;
  margin:24px auto;
  max-width:var(--max-width);
}

.page-head-content {
  flex-grow: 1;
}

.page-head-actions {
  display: flex;
  flex-direction: column; /* Stack badge and button vertically */
  align-items: flex-start; /* Align items to the start */
  gap: 10px; /* Space between badge and button */
  width: 100%; /* Make it take full width to push to new line */
}

.report-button-container {
  width: 100%; /* Ensure the container takes full width */
}

.report-info {
  margin-bottom: 10px; /* Space between info text and button */
  color: var(--muted); /* Use a muted color for the text */
  font-size: 0.95rem; /* Adjust font size */
  line-height: 1.5; /* Improve readability */
}

.page-head i{font-size:24px; color:var(--accent)}
.page-head h1{margin:0; font-size:24px}
.page-head p{margin:4px 0 0; color:var(--muted)}
.badge{
  background:#e7f6ec; color:#1c4b31; border:1px solid #cfe8d7;
  padding:8px 12px; border-radius:999px; font-weight:700; display:inline-flex; align-items:center; gap:8px;
  margin-left: 0 !important; /* Override inline style */
  margin-bottom: 10px; /* Add space below the badge */
}

/* M/V grid specifics */
.mv-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start;}
.mv-card .icon{
  width:44px; height:44px; border-radius:12px;
  background:#e7f6ec; display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:8px;
}
.mv-card .icon i{color:var(--accent); font-size:20px}
.mv-card h2{margin:0 0 8px; font-size:22px; display:flex; align-items:center; gap:10px}
.mv-card p{color:#0f172a; margin:0 0 10px}
.mv-card ul{margin:0; padding-left:18px}
.mv-card li{margin:6px 0}

/* KPIs */
.kpis{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.kpi{background:#0da37f; color:#fff; border-radius:10px; padding:10px 12px; font-weight:700}
.kpi.secondary{background:#2e8b57}

/* Principles */
/* Corregido: Display -> display (case-sensitive). Es un cambio seguro. */
.principles{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.principle{
  display:flex; gap:10px; align-items:flex-start; background:#f6fbf7; border:1px solid #e5efe7;
  padding:12px; border-radius:12px;
}
.principle i{color:var(--accent); margin-top:2px}

/* FOOTER  */
.site-footer{
  margin-top:28px; padding:28px 20px;
  background: linear-gradient(180deg, #1f5c45, #163f30); color:#fff;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.site-footer .footer-left{display:flex; gap:12px; align-items:center; max-width:60%}
.site-footer .footer-left img{height:64px; width:64px; object-fit:contain; border-radius:8px; background:transparent;}
.site-footer .social-icons{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.site-footer .footer-link{color:#fff; text-decoration:none; font-weight:600}
.site-footer .footer-link i{margin-right:8px}

/*  ANIMACIONES Y ACCESIBILIDAD  */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important}
}

/*  RESPONSIVE */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .caption{left:24px; right:24px}
  .hero-box{padding:36px 24px}
  .hero-box h1{font-size:26px}
  .mv-grid{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr}
  .principle i{margin-top:4px}
  .nav-inner .hamburger{ 
  display: flex !important; 
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

  /* Menu móvil: overlay vertical */
  #site-nav{
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    width: 260px;
    max-width: calc(100% - 24px);
    flex-direction: column;
    gap: 8px;
    background: rgba(31,92,69,0.98);
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 1500;
    -webkit-overflow-scrolling: touch;
  }

  .nav-inner nav > ul.mobile-open { 
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  width: 250px;
  background: #1f5c45;
  padding: 15px;
  box-shadow: 0 10px 15px rgba(0,0,0,0.2);
  z-index: 1500;
  animation: slideDown 0.3s ease forwards;
  text-align: right;
  align-items: flex-end;
}

.nav-inner nav > ul:not(.mobile-open) {
  display: none !important;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
  .nav-inner nav > ul a {
    color: #fff;
    padding: 10px 12px;
    display: block;
    font-weight: 600;
  }

  /* En móvil permitimos que el texto pueda envolver (si hace falta) */
  #site-nav a { white-space: normal; }

  /* Dropdowns en móvil: comportamiento en bloque */
  #site-nav .dropdown .dropdown-menu{
    display: none;
    position: static;
    width: 100%;
    padding-left: 8px;
    box-shadow: none;
    border: 0;
    background: transparent;
  }
  #site-nav .dropdown:focus-within > .dropdown-menu,
  #site-nav .dropdown.open > .dropdown-menu { display: block; }

  #site-nav .dropdown > a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
  }
  #site-nav .dropdown > a .caret { opacity: .95; }

  html, body { overflow-x: hidden; }
}

/* ultra narrow phones */
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .caption{left:16px; right:16px; bottom:20px}
  .caption h1{font-size:22px}
  .slider-btn{display:none}
  header .nav-inner{padding:6px 12px}
  .page-head{padding:18px; flex-direction:column; align-items:flex-start}

  /* Ajuste del logo y texto en pantallas pequeñas */
  .logo{ height:44px; }
  .brand-title{ font-size:13px; max-width: 60vw; }
  .brand-subtitle{ font-size:11px; max-width: 60vw; }
}
@media (max-width:480px){
  .caption{left:12px; right:12px}
  .caption h1{font-size:20px}
}

/* small helper classes */
.text-center{text-align:center}
.mt-12{margin-top:12px}

/*CONTACTO */
/* Grid de formularios unificado y centrado */
.forms-grid{
  max-width:var(--max-width);
  margin:0 auto 28px;
  padding:0 20px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:18px;
  align-items: stretch;
  grid-auto-rows: auto;
}

/* Quitar la línea vertical y mantener el tamaño con padding */
.forms-grid article:first-child {
  border-right: none;
  padding-right: 18px;
}

/* Responsivo: columna única en pantallas medianas/pequeñas */
@media (max-width: 1000px) {
  .forms-grid{ grid-template-columns: 1fr; gap:18px; }
  .forms-grid article:first-child {
    border-right: none;
    padding-right: 0;
  }
  .grid{ grid-template-columns: repeat(2, 1fr); gap:18px }
}

/* Tipografía auxiliar */
.lead{color:var(--muted); margin:0 0 12px}

/* Botonera superior (registro / reporte) */
.action-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.btn-outline{
  background:transparent; border:1.5px solid #cfe8d7; color:var(--accent);
  padding:10px 14px; border-radius:999px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn-outline:hover{background:#f1fbf6}
.btn-report{
  background:#0da37f; color:#fff; border:none; padding:12px 20px; border-radius:999px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; justify-content: center; gap:8px;
  box-shadow: 0 4px 12px rgba(13, 163, 127, 0.3); /* Add a subtle shadow */
  transition: all 0.3s ease; /* Smooth transitions for hover effects */
  width: 100%; /* Make the button take full width */
}

.btn-report i {
  font-size: 1.2em; /* Make the icon larger relative to the text */
  color: #fff; /* Ensure the icon color is white for contrast */
}

.btn-report:hover{
  filter:brightness(1.05); /* Slightly brighter on hover */
  transform: translateY(-2px); /* Lift effect on hover */
  box-shadow: 0 6px 16px rgba(13, 163, 127, 0.4); /* Enhanced shadow on hover */
}

/* Inputs */
.form-group{margin-bottom:12px}
.form-label{display:block; font-weight:600; margin-bottom:6px}
.input, .select, .textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #cbd5e1; font-size:0.95rem; background:#fff;
}
.textarea{min-height:140px; resize:vertical}
.help{font-size:12px; color:var(--muted); margin-top:6px}
.counter{font-size:12px; color:var(--muted); float:right}

/* Alinear contador con la etiqueta sin afectar el flujo de campos */
.form-group{ position: relative; }
.form-group .counter{ position: absolute; top: 0; right: 0; float: none; }
.error-inline{color:#B91C1C; font-size:0.9rem; margin-top:6px; min-height:1.1em; display:block}

/* Ajustes de formularios en móviles */
@media (max-width:640px){
  .forms-grid{ grid-template-columns: 1fr; gap:18px; padding:0 14px; }
  .form-group{ min-width:0; }
  .form-group .input,
  .form-group .select,
  .form-group .textarea{ width:100%; display:block; }
  .form-group .counter{ position: static; }
  .counter{ float:none; display:block; text-align:center; margin-top:2px; }
}

/* Acciones del formulario */
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.btn-primary{background:var(--accent); color:#fff; padding:10px 16px; border:none; border-radius:10px; font-weight:700; cursor:pointer}
.btn-ghost{background:transparent; color:var(--accent); border:1px solid #cbd5e1; padding:10px 16px; border-radius:10px; font-weight:700; cursor:pointer}

/* Reveal global */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .7s ease-out, transform .7s ease-out; }
.reveal.visible{ opacity:1; transform:translateY(0) }

/* Slide fallback: si por error llega a tener enter+exit, preferir enter */
.slide.enter.exit img{
  opacity: 1 !important;
  transform: scale(1.02) !important;
}

#site-nav.active { display: flex !important; }

#site-nav a.active {
  background: var(--accent);
  color: #fff;
}
@keyframes fadeIn{
  from{opacity:0; transform: translateY(6px)}
  to{opacity:1; transform: translateY(0)}
}
.dropdown-menu a {
  display: block;
  width: 100%;
  padding: 10px 14px;
  white-space: nowrap;
  box-sizing: border-box;   
}

/* Foro de actualizaciones */
.updates{max-width:var(--max-width); margin:16px auto; padding:0 20px 40px}
.updates-head h2{margin:0; font-size:24px}
.updates-head .small{margin-top:6px}
.updates-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .updates-list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .updates-list{grid-template-columns:1fr} }
.update-card{background:var(--card); border-radius:12px; padding:18px; box-shadow:var(--shadow-soft); border-left:4px solid var(--accent)}
.update-card h3{margin:6px 0 8px; font-size:18px}
.update-card p{color:var(--muted)}
.update-meta{display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:13px}
.update-actions{display:flex; gap:12px; align-items:center; margin-top:10px}
.update-actions .btn{min-width:140px; padding:12px 18px; font-size:.95rem; border-radius:999px}

/* Tarjetas del inicio alineadas al foro */
.home-card{background:var(--card); border-radius:12px; padding:18px; box-shadow:var(--shadow-soft); border-left:4px solid var(--accent)}
.home-card h3{margin:0 0 8px; font-size:20px}
.home-card .small{color:var(--muted)}
.home-actions{display:flex; gap:12px; align-items:center; margin-top:10px}
.home-actions .btn{min-width:140px; padding:12px 18px; font-size:.95rem; border-radius:999px}

.scroll-arrows{position:fixed; left:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:2100; pointer-events:auto; will-change:transform; transition:transform .16s ease}
.scroll-arrow{width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft); transition:filter .18s ease; pointer-events:auto; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.scroll-arrow:hover{filter:brightness(1.06)}
.scroll-arrow i{font-size:18px}
@media (max-width:640px){ .scroll-arrows{left:10px; bottom:calc(16px + env(safe-area-inset-bottom)); top:auto; transform:none; pointer-events:auto} .scroll-arrow{width:44px; height:44px} }

@keyframes arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes arrowPulse{0%,100%{box-shadow:var(--shadow-soft)}50%{box-shadow:0 0 0 6px rgba(46,139,87,0.12), var(--shadow-soft)}}
.scroll-arrow.arrow-down i{animation:arrowBounce 1.25s ease-in-out infinite}
.scroll-arrow.arrow-down{animation:arrowPulse 2.4s ease-in-out infinite}

/* Footer: ajustar en pantallas pequeñas para que se apile ordenado */
@media (max-width: 768px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .site-footer .footer-left {
    max-width: 100%;
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }

  .site-footer .social-icons {
    justify-content: center;
  }
}

/* Nav: dorado para Donaciones y Contáctenos, excepto cuando estén activos */
#site-nav a.btn[href$="donaciones.php"]:not(.active),
#site-nav a.btn[href$="contacto.php"]:not(.active) {
  background: #81d8d0;
  color: #0f172a !important;
}
#site-nav a.btn[href$="donaciones.php"]:not(.active):hover,
#site-nav a.btn[href$="contacto.php"]:not(.active):hover {
  background: #81d8d0;
}
.dropdown-menu a {
  display: block;
  width: 100%;
  padding: 10px 14px;
  white-space: nowrap;
  box-sizing: border-box;   
}

/* Ajustes de contraste para buscador en modo oscuro */
body.theme-dark .toolbar .input{background:#0b1220; border-color:#1f2937; color:#e5e7eb}
body.theme-dark .toolbar .input input{color:#e5e7eb}
body.theme-dark .toolbar .input input::placeholder{color:#9ca3af}
body.theme-dark .toolbar .input i{color:var(--accent)}