/* llamen a dios, ya no recuerdo que hacia esta parte :| */
:root {
  --primary-purple: #6366f1;
  --primary-purple-light: #8b5cf6;
  --primary-purple-dark: #4f46e5;
  --secondary-pink: #ec4899;
  --secondary-pink-light: #f472b6;
  --accent-blue: #06b6d4;
  --accent-teal: #14b8a6;
  --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0;
  --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b;
  --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gradient-primary: linear-gradient(135deg, var(--primary-purple) 0%, var(--secondary-pink) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--primary-purple-light) 0%, var(--accent-blue) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent-teal) 0%, var(--secondary-pink-light) 100%);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem;
  --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; --fs-5xl: 3rem;
  --transition-fast: all 0.15s ease; --transition-normal: all 0.3s ease; --transition-slow: all 0.5s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-base); line-height: 1.6; color: var(--gray-800);
  background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
  min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: visible;
}
html, body { max-width: 100%; overflow-x: hidden; overflow-y: visible; }
#contenido-dinamico { overflow: visible; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--gray-900); margin-bottom: var(--spacing-md); }
h1 { font-size: var(--fs-4xl); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-2xl); } h4 { font-size: var(--fs-xl); }
p { margin-bottom: var(--spacing-md); color: var(--gray-600); }
@font-face { font-family: 'Comic'; src: url('../fonts/comic.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }


.donativos-container {
  position: relative;
  z-index: 10;
  overflow: visible;
}
.seccion-banner {
  position: relative; 
  padding: calc(var(--spacing-2xl) + 10px) var(--spacing-lg) var(--spacing-xl); 
  text-align: center; 
  color: white;
  border-radius: 16px; 
  margin: 20px auto; 
  overflow: visible;
  width: calc(100% - 32px);
  max-width: 1200px;
  box-sizing: border-box;
  z-index: 10;
  -webkit-mask:none;
  mask:none;
  display: block;
}
.banner-rojo {
  position: relative;
  z-index: 10;
  overflow: visible;
  background: linear-gradient(135deg, #991b1b 0%, #ef4444 100%);
  box-shadow: 0 4px 12px rgba(153, 27, 27, 0.3);
}
.banner-naranja { background: linear-gradient(135deg, #c2410c 0%, #f97316 100%); }
.banner-lila { background: linear-gradient(135deg, #581c87 0%, #a855f7 100%); }


.menu-arco {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: white;
  padding: var(--spacing-sm) var(--spacing-lg); display: flex; align-items: center; gap: var(--spacing-lg);
  box-shadow: var(--shadow-md); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-200);
  min-height: 70px;
  height: clamp(60px, 12vh, 80px);
  width: 100%; box-sizing: border-box;
}
.menu-left { display: flex; align-items: center; margin-right: var(--spacing-xl); flex-shrink: 0; }
.menu-logo { height: 48px; width: auto; display: block; }


.menu-toggle {
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 45px;
  height: 45px;
  display: none;
  position: relative;
  z-index: 3002;
  padding: 0;
}

/* Mostrar solo en móvil */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
}

.menu-toggle:focus {
  outline: none;
}

.menu-icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.menu-toggle .house-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: opacity 0.3s ease, transform 0.4s ease;
  transform-origin: center;
}

.menu-toggle .x-icon {
  opacity: 0;
  transform: scale(0.6) rotate(-90deg);
  transition: opacity 0.3s ease, transform 0.4s ease;
  transform-origin: center;
}

/* Estado Activo: Muestra la X */
.menu-toggle.open .house-icon,
.menu-toggle.active .house-icon {
  opacity: 0;
  transform: scale(0.6) rotate(90deg);
}

.menu-toggle.open .x-icon,
.menu-toggle.active .x-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}


.menu-buttons { display: flex; gap: var(--spacing-lg); align-items: center; flex: 1; justify-content: center; flex-wrap: wrap; }
.menu-arco .boton {
  display: flex; flex-direction: row; align-items: center; gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-xl);
  cursor: pointer; transition: var(--transition-normal); position: relative; overflow: hidden;
  flex: 1;
  max-width: 180px;
  min-width: 80px;
  justify-content: center;
}
.menu-arco .boton::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: #ffffff; transition: var(--transition-normal); z-index: -1;
}
.menu-arco .boton.active::before { left: 0; }
.menu-arco .boton.active { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.menu-arco .boton img { width: 40px; height: 40px; filter: grayscale(0%); flex-shrink: 0; }
.menu-arco .titulo { font-size: var(--fs-sm); font-weight: 600; color: var(--gray-700); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }

.menu-buttons.mobile-hidden { display: none; }
.menu-buttons.mobile-open {
  position: absolute; 
  top: 60px; 
  right: 12px; 
  left: 12px; 
  background: white; 
  border-radius: 12px; 
  box-shadow: var(--shadow-xl);
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  padding: var(--spacing-md); 
  z-index: 1000;
}
.menu-buttons.mobile-open .boton { min-width: auto; padding: var(--spacing-sm) var(--spacing-md); max-width: none; flex: none; }


.carousel-container {
  position: relative;
  width: 100%;
  overflow: visible;
  background: transparent;
  display: block;
  margin-top: 80px;
  box-shadow: var(--shadow-xl);
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  height: auto;
}
.carousel-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  height: auto;
}
.carousel-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}
.carousel-wrapper img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
  opacity: 0;
  animation: fadeInHero 1.2s ease-out forwards;
  filter: brightness(0.95);
}
.carousel-indicators { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: var(--spacing-sm); z-index: 10; }

@media (max-width: 768px) {
  .carousel-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
  .carousel-container { padding: 0; height: auto; }
  .carousel-wrapper { height: auto; }
}

@media (min-width: 769px) {
  .carousel-wrapper { }
  .carousel-container { padding: 0; }
}

.contenido-principal {
  min-height: calc(100vh - 200px);
  padding: calc(var(--spacing-2xl) + 20px) var(--spacing-lg) var(--spacing-3xl);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
  overflow: visible;
}


#contenido-dinamico .seccion-banner.banner-rojo {
  position: relative;
  overflow: visible;
  z-index: 10;
}
#contenido-dinamico .donativos-container {
  overflow: visible !important;
  position: relative !important;
  z-index: 10 !important;
}
.seccion-inicio { animation: slideUp 0.8s ease-out; }
.quienes-somos { text-align: center; margin-bottom: var(--spacing-3xl); padding: var(--spacing-2xl); background: white; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.quienes-somos::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); }
.quienes-somos h2 { color: var(--primary-purple); margin-bottom: var(--spacing-lg); }
.quienes-somos p { font-family: 'Century Gothic', CenturyGothic, Arial, sans-serif; font-size: var(--fs-xl); line-height: 1.7; text-align: justify; text-justify: inter-word; max-width: 800px; margin: 0 auto; color: var(--gray-700); }

@media (max-width: 768px) {
  .quienes-somos {
    width: calc(100% - 64px);
    max-width: 520px;
    margin: 0 32px var(--spacing-md);
    padding: clamp(0.75rem, 3.5vw, 1.25rem);
    border-radius: calc(var(--radius-md));
    min-height: 260px;
    box-sizing: border-box;
  }
  .quienes-somos h2 {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem);
    margin-bottom: var(--spacing-sm);
  }
  .quienes-somos p {
    font-size: clamp(0.82rem, 3.2vw, 1rem);
    line-height: 1.6;
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .quienes-somos { padding: clamp(0.6rem, 4vw, 1rem); min-height: 240px; }
  .quienes-somos h2 { font-size: clamp(1.0rem, 5.2vw, 1.15rem); }
  .quienes-somos p { font-size: clamp(0.78rem, 4.5vw, 0.92rem); }
}

.objetivo-section { margin: var(--spacing-lg) 0 var(--spacing-3xl); }
.objetivo-content { display: grid; grid-template-columns: minmax(220px,420px) 1fr; gap: 0; align-items: center; padding: 0; background: transparent; }
.objetivo-content img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-xl) 0 0 var(--radius-xl); box-shadow: none; display: block; }

@media (min-width: 769px) {
  .objetivo-content img { height: 100%; min-height: 360px; }
}

.historia-section .historia-content { display: grid; grid-template-columns: 54% 46%; gap: 0; align-items: center; padding: 0; max-width: 1100px; margin: 0 auto; }
.historia-content img, .historia-content img.historia-image { width: 100%; height: 280px; min-height: 220px; object-fit: cover; border-radius: var(--radius-xl); box-shadow: none; display: block; }
.historia-content .objetivo-text { background: linear-gradient(135deg, #0f62fe 0%, var(--accent-blue) 100%); padding: calc(var(--spacing-2xl) + 0.5rem); border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0; box-shadow: var(--shadow-lg); display: block; color: #ffffff; border: 2px solid rgba(255,255,255,0.12); align-self: center; max-width: 100%; }
.historia-content .objetivo-text-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.historia-content .objetivo-text p { font-size: var(--fs-xl); font-weight: 700; line-height: 1.6; color: rgba(255,255,255,0.98); margin: 0; }

@media (max-width: 900px) {
  .historia-section .historia-content { grid-template-columns: 1fr; }
  .historia-content img, .historia-content img.historia-image { height: 240px; }
  .historia-content .objetivo-text { border-radius: var(--radius-xl); margin-top: var(--spacing-md); padding: var(--spacing-2xl); }
}

.timeline-image { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.objetivo-text { background: linear-gradient(135deg, #0f62fe 0%, var(--accent-blue) 100%); padding: calc(var(--spacing-2xl) + 0.5rem); border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0; box-shadow: var(--shadow-lg); display: block; color: #ffffff; border: 2px solid rgba(255,255,255,0.12); align-self: center; max-width: 680px; }
.objetivo-text-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.objetivo-text h3 { color: #ffffff; margin: 0 0 var(--spacing-md) 0; font-size: var(--fs-3xl); font-weight: 800; }
.objetivo-text p { font-size: var(--fs-xl); font-weight: 700; line-height: 1.6; color: rgba(255,255,255,0.98); margin: 0; }

@media (max-width: 768px) {
  .objetivo-content {
    display: grid;
    grid-template-columns: 24% 76%;
    gap: calc(var(--spacing-xs));
    align-items: center;
    padding: 0;
    overflow: hidden;
  }
  .objetivo-content img {
    width: 100%;
    height: auto;
    max-height: 22vh;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    display: block;
    flex-shrink: 0;
  }
  .objetivo-text {
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    margin: 0;
    max-width: 100%;
    padding: calc(var(--spacing-xs));
    box-sizing: border-box;
  }
  .objetivo-text-inner { width: 100%; }
  .objetivo-text h3, .objetivo-text-inner h3 {
    font-size: clamp(0.9rem, 3vw, 1rem);
    margin: 0 0 0.25rem 0;
  }
  .objetivo-text p, .objetivo-text-inner p {
    font-size: clamp(0.72rem, 2.4vw, 0.86rem);
    line-height: 1.3;
    margin: 0;
  }
  .objetivo-content img { max-width: 100%; }
}

@media (max-width: 420px) {
  .objetivo-content { grid-template-columns: 28% 72%; gap: calc(var(--spacing-xs)); }
  .objetivo-content img { max-height: 24vh; aspect-ratio: 3/2; }
  .objetivo-text h3, .objetivo-text-inner h3 { font-size: clamp(0.9rem, 4.5vw, 1rem); }
  .objetivo-text p, .objetivo-text-inner p { font-size: clamp(0.72rem, 4vw, 0.86rem); }
}

.mision-vision { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); margin-bottom: var(--spacing-3xl); }
.card-mision, .card-vision { background: white; padding: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); text-align: center; position: relative; overflow: hidden; transition: var(--transition-normal); min-height: 200px; }
.card-mision::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-secondary); }
.card-vision::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-accent); }
.card-mision:hover, .card-vision:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.card-content { position: relative; z-index: 3; padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg); display: block; }
.card-mision h3, .card-vision h3 { color: #ffffff; margin: 0 0 var(--spacing-md) 0; font-size: var(--fs-3xl); font-weight: 800; }
.card-mision p, .card-vision p { font-size: var(--fs-xl); line-height: 1.7; color: #ffffff; font-weight: 700; margin: 0; }
.card-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.25); z-index: 2; }
.card-mision .card-content, .card-vision .card-content { position: relative; z-index: 4; padding: var(--spacing-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.card-mision, .card-vision { min-height: 220px; }

.valores-section {
  background: linear-gradient(135deg, #c346e5 0%, #bb48fd 100%);
  padding: var(--spacing-3xl);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
  color: #ffffff;
}
.valores-section h3 { color: #ffffff; margin-bottom: var(--spacing-lg); font-size: var(--fs-3xl); font-weight: 800; }
.valores-intro { font-size: var(--fs-xl); font-weight: 700; line-height: 1.6; margin-bottom: var(--spacing-2xl); color: rgba(255,255,255,0.95); max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; }
.valores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); }
.valor-card { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-lg); background: var(--gray-50); border-radius: var(--radius-lg); transition: var(--transition-normal); border: 1px solid var(--gray-200); }
.valor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background: white; border-color: var(--primary-purple-light); }
.valor-icon { font-size: var(--fs-3xl); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 50%; color: var(--primary-purple); flex-shrink: 0; border: 1px solid var(--gray-200); }
.valor-info { text-align: left; }
.valor-texto { display: block; font-weight: 700; font-size: var(--fs-lg); color: var(--gray-900); margin-bottom: var(--spacing-xs); }
.valor-desc { display: block; font-size: var(--fs-sm); color: var(--gray-600); }

/* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA HACE MUCHO CALOOOOOOOOOOOOOOOOOOOOOOR */
/* podrian prender los climas por amor de dios  */

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: white; margin: 5% auto; padding: var(--spacing-xl); border-radius: var(--radius-xl); max-width: 1250px; width: 90%; max-height: 70vh; overflow-y: auto; position: relative; }
.modal-cerrar { position: absolute; right: var(--spacing-lg); top: var(--spacing-md); font-size: 40px; cursor: pointer; color: var(--gray-400); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.modal-cerrar:hover { color: var(--gray-800); }
.datos-banco { background: var(--gray-50); padding: var(--spacing-md); border-radius: var(--radius-md); margin: var(--spacing-md) 0; }
.aviso-importante { background: #fff3cd; padding: var(--spacing-md); border-radius: var(--radius-md); border-left: 4px solid #ffc107; color: #856404; }

@media (max-width: 768px) {
  .modal-content { margin: 30% auto; }
}


.footer-wave {
  width: 100%; height: 50px;
  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 50" preserveAspectRatio="none"> <path d="M0,25 Q50,45 100,25 Q150,5 200,25 Q250,45 300,25 Q350,5 400,25 Q450,45 500,25 Q550,5 600,25 Q650,45 700,25 Q750,5 800,25 Q850,45 900,25 Q950,5 1000,25 Q1050,45 1100,25 Q1150,5 1200,25 L1200,50 L0,50 Z" fill="%23F3E3CC"/> </svg>') no-repeat top center;
  background-size: 100% 100%;
}
.footer {
  position: relative;
  background-color: #F3E3CC;
  color: #8B4513;
  padding: var(--spacing-xl) 0 var(--spacing-md);
  overflow: hidden;
  min-height: 220px;
  width: 100%; box-sizing: border-box;
}
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  justify-items: center;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  width: 100%; box-sizing: border-box;
}
.footer-col {
  width: 100%;
  max-width: 350px;
  text-align: center;
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}
.footer-cell h4 {
  color: #8B4513;
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}
.contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  color: #8B4513;
}
.contact-item img,
.social-item img,
.ubicacion-icon img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: brightness(0.5) sepia(0.3) saturate(0.8);
  transition: var(--transition-normal);
}
.ubicacion-icon img {
  width: 48px;
  height: 48px;
}
.contact-item:hover img,
.social-item:hover img,
.ubicacion-icon:hover img {
  filter: brightness(0.65) sepia(0.2) saturate(0.9);
}
.social-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  color: #8B4513;
}
.social-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: var(--transition-normal);
  color: #8B4513;
  cursor: default;
}
.ubicacion-icon {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}
.direccion {
  text-align: center;
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--spacing-md);
}
.direccion p {
  color: #8B4513;
  margin-bottom: var(--spacing-xs);
  font-size: var(--fs-sm);
  opacity: 0.8;
  line-height: 1.6;
}
.social-link {
  text-decoration: none;
  color: inherit;
  display: block;
  margin-bottom: var(--spacing-sm);
  transition: var(--transition-normal);
}
.footer-table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 100%;
  max-width: 1200px;
  padding: 0 var(--spacing-lg);
  box-sizing: border-box;
}
.footer.footer-naranja { background-color: #fef3c7; }
.footer.footer-azul { background-color: #dbeafe; }
.footer.footer-lila { background-color: #e9d5ff; }
.footer.footer-rosa { background-color: #fce7f3; }
.footer.footer-amarillo { background-color: #fef3c7; }
.footer.footer-rojo { background-color: #fee2e2; }
.footer-wave.footer-naranja {
  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 50" preserveAspectRatio="none"> <path d="M0,25 Q50,45 100,25 Q150,5 200,25 Q250,45 300,25 Q350,5 400,25 Q450,45 500,25 Q550,5 600,25 Q650,45 700,25 Q750,5 800,25 Q850,45 900,25 Q950,5 1000,25 Q1050,45 1100,25 Q1150,5 1200,25 L1200,50 L0,50 Z" fill="%23fef3c7"/> </svg>') no-repeat top center;
  background-size: 100% 100%;
}
.footer-wave.footer-azul {
  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 50" preserveAspectRatio="none"> <path d="M0,25 Q50,45 100,25 Q150,5 200,25 Q250,45 300,25 Q350,5 400,25 Q450,45 500,25 Q550,5 600,25 Q650,45 700,25 Q750,5 800,25 Q850,45 900,25 Q950,5 1000,25 Q1050,45 1100,25 Q1150,5 1200,25 L1200,50 L0,50 Z" fill="%23dbeafe"/> </svg>') no-repeat top center;
  background-size: 100% 100%;
}
.footer-wave.footer-lila {
  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 50" preserveAspectRatio="none"> <path d="M0,25 Q50,45 100,25 Q150,5 200,25 Q250,45 300,25 Q350,5 400,25 Q450,45 500,25 Q550,5 600,25 Q650,45 700,25 Q750,5 800,25 Q850,45 900,25 Q950,5 1000,25 Q1050,45 1100,25 Q1150,5 1200,25 L1200,50 L0,50 Z" fill="%23e9d5ff"/> </svg>') no-repeat top center;
  background-size: 100% 100%;
}
.footer-wave.footer-rosa {
  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 50" preserveAspectRatio="none"> <path d="M0,25 Q50,45 100,25 Q150,5 200,25 Q250,45 300,25 Q350,5 400,25 Q450,45 500,25 Q550,5 600,25 Q650,45 700,25 Q750,5 800,25 Q850,45 900,25 Q950,5 1000,25 Q1050,45 1100,25 Q1150,5 1200,25 L1200,50 L0,50 Z" fill="%23fce7f3"/> </svg>') no-repeat top center;
  background-size: 100% 100%;
}
.footer-wave.footer-amarillo {
  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 50" preserveAspectRatio="none"> <path d="M0,25 Q50,45 100,25 Q150,5 200,25 Q250,45 300,25 Q350,5 400,25 Q450,45 500,25 Q550,5 600,25 Q650,45 700,25 Q750,5 800,25 Q850,45 900,25 Q950,5 1000,25 Q1050,45 1100,25 Q1150,5 1200,25 L1200,50 L0,50 Z" fill="%23fef3c7"/> </svg>') no-repeat top center;
  background-size: 100% 100%;
}
.footer-wave.footer-rojo {
  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 50" preserveAspectRatio="none"> <path d="M0,25 Q50,45 100,25 Q150,5 200,25 Q250,45 300,25 Q350,5 400,25 Q450,45 500,25 Q550,5 600,25 Q650,45 700,25 Q750,5 800,25 Q850,45 900,25 Q950,5 1000,25 Q1050,45 1100,25 Q1150,5 1200,25 L1200,50 L0,50 Z" fill="%23fee2e2"/> </svg>') no-repeat top center;
  background-size: 100% 100%;
}
.footer-bottom {
  margin: var(--spacing-lg) auto 0;
  text-align: center;
  position: relative;
  z-index: 3;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(139,69,19,0.15);
}
.footer-bottom p {
  color: #8B4513;
  font-size: var(--fs-sm);
  margin: 0;
  opacity: 0.7;
}

@keyframes fadeInHero { 0% { opacity: 0; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }


@media (max-width: 1100px) and (min-width: 769px) {
  .menu-arco {
    padding: var(--spacing-xs) var(--spacing-sm);
    gap: clamp(0.25rem, 0.8vw, 0.5rem);
  }
  
  .menu-left {
    margin-right: var(--spacing-sm);
  }
  
  .menu-logo {
    height: 40px;
  }
  
  .menu-buttons {
    gap: clamp(0.25rem, 0.8vw, 0.5rem);
    justify-content: center;
  }
  
  .menu-arco .boton {
    flex-direction: column;
    min-width: 60px;
    max-width: 100px;
    padding: clamp(0.25rem, 0.6vw, 0.5rem) clamp(0.25rem, 0.5vw, 0.5rem);
    gap: clamp(2px, 0.4vw, 4px);
    flex: 1;
  }
  
  .menu-arco .boton img {
    width: clamp(28px, 3.5vw, 36px);
    height: clamp(28px, 3.5vw, 36px);
  }
  
  .menu-arco .titulo {
  font-size: clamp(0.55rem, 1.2vw, 0.7rem);
  letter-spacing: 0.2px;
  text-align: center;
  line-height: 1.1;
  word-break: break-all;
  hyphens: auto;
}
}

@media (max-width: 768px) {
  .menu-arco {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
    height: 60px;
    position: relative;
  }
  .menu-left {
    margin-right: 0;
  }
  .menu-toggle {
    display: block !important;
    position: absolute !important;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3002 !important;
    width: 45px;
    height: 45px;
  }
  .menu-buttons { display: none; }
  .menu-buttons.mobile-hidden { display: none; }
  .menu-buttons.mobile-open { display: flex; }
  .menu-arco .boton { min-width: 60px; padding: var(--spacing-sm); }
  .menu-arco .boton img { width: 30px; height: 30px; }
  .contenido-principal, .servicios-container, .donativos-container {
    padding: calc(var(--spacing-md) + 8px) 1rem var(--spacing-3xl);
    max-width: calc(100% - 48px);
    margin: 0 auto;
    position: relative;
  }
.objetivo-content, .mision-vision, .valores-grid, .impacto-grid { grid-template-columns: 1fr; }
  .seccion-banner { padding: 20px 6px 16px !important; margin: 4px auto 16px auto !important; position: relative; max-width: 100%; width: calc(100% - 32px); }
  .seccion-banner h1 { font-size: 1.3rem !important; margin-bottom: 5px !important; }
  .seccion-banner p { font-size: 0.75rem !important; margin: 0 auto 0 !important; }
  .quienes-somos {
    padding: var(--spacing-md);
    margin: 0 auto calc(var(--spacing-md) + 8px);
    max-height: none;
    width: calc(100% - 48px);
    box-sizing: border-box;
    transform: translateY(-8px);
  }
  .objetivo-content { grid-template-columns: 28% 72%; gap: var(--spacing-sm); align-items: center; }
  .objetivo-text { padding: 0.5rem; max-width: calc(100% - 8px); box-sizing: border-box; }
  .footer-wave { height: 40px; background-size: 100% 40px; }
  .footer-content {
    grid-template-columns: 1fr;
    padding: 0 var(--spacing-md);
    align-items: center;
  }
  .footer-col { width: 100%; max-width: 400px; }
}

@media (max-width: 480px) {
  .menu-arco { padding: var(--spacing-sm); }
  .menu-arco .boton { min-width: 50px; }
  .menu-arco .titulo { font-size: var(--fs-xs); }
  h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); }
  .footer-col h4 { font-size: var(--fs-base); }
}

@media (max-width: 768px) {
  .contenido-principal { font-size: 0.95rem; }
  .objetivo-content { grid-template-columns: 28% 72% !important; gap: calc(var(--spacing-xs)) !important; }
  .objetivo-content img { max-height: 24vh !important; aspect-ratio: 4/3; }
  .objetivo-text { padding: calc(var(--spacing-xs) + 0.125rem) !important; }
  .quienes-somos p { font-size: clamp(0.7rem, 2.6vw, 0.86rem); line-height: 1.4; }
  .quienes-somos h2 { font-size: clamp(1rem, 3.6vw, 1.2rem); }
}
@media (max-width: 420px) {
  .contenido-principal { font-size: 0.92rem; }
  .objetivo-content { grid-template-columns: 30% 70% !important; gap: calc(var(--spacing-xs)) !important; }
  .objetivo-content img { max-height: 20vh !important; aspect-ratio: 3/2; }
  .objetivo-text { padding: calc(var(--spacing-xs)); }
  .quienes-somos p { font-size: clamp(0.66rem, 3.8vw, 0.82rem); }
}
@media (max-width: 768px) {
  body { font-size: 0.95rem; }
  .menu-arco { 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px; 
    padding: 0.5rem 1rem; 
    z-index: 1000;
  }
  .menu-left { margin-right: 0; }
  .menu-logo { height: 40px; }
  .menu-toggle { display: block; }
  .menu-buttons { display: flex; gap: var(--spacing-lg); align-items: center; }
  .menu-buttons.mobile-hidden {
    display: flex !important;
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
  }
  .menu-buttons.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 56px;
    right: 12px;
    left: auto;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-md);
    z-index: 3000;
    width: fit-content;
    min-width: 180px;
    max-width: 85vw;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .carousel-container { margin-top: 72px; position: relative; display: block; padding: 0; height: auto; }
  .carousel-wrapper { width: 100%; max-width: 100%; height: auto; display: block; background: #ffffff; }
  .carousel-wrapper img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
  .carousel-indicators { bottom: 0.6rem; position: absolute; left: 50%; transform: translateX(-50%); }
  .contenido-principal { padding-top: 16px; padding-left: 1rem; padding-right: 1rem; max-width: calc(100% - 48px); margin: 0 auto; }
  .quienes-somos {
    width: 92%;
    max-width: 420px;
    padding: 0.4rem;
    margin: 0.6rem auto calc(var(--spacing-md) + 6px);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    display: block;
  }
  .qs-body { padding: 0.35rem 0; }
  .qs-body p { font-size: 0.75rem; line-height: 1.35; margin: 0; }
  .quienes-somos h2 { text-align: center; font-size: 1rem; margin-bottom: 0.4rem; }
  .quienes-somos { margin-left: auto; margin-right: auto; }
  .objetivo-content {
    display: flex; flex-direction: row; gap: 0.5rem; align-items: center;
    width: 95% !important; max-width: none !important; margin: 0.5rem auto; box-sizing: border-box;
  }
  .objetivo-content img {
    flex: 0 0 clamp(22%, 30%, 60%);
    width: 100%; height: auto; max-height: 22vh; object-fit: cover; border-radius: calc(var(--radius-sm));
    display: block;
    margin-left: auto; margin-right: auto;
    filter: brightness(1.06) saturate(1.02) contrast(0.98);
  }
  .objetivo-text {
    flex: 1 1 clamp(40%, 70%, 78%); padding: 0.4rem; box-sizing: border-box; max-width: 78%;
    min-height: 120px; display: flex; align-items: center; overflow: auto;
  }
  .objetivo-text h3 { font-size: clamp(0.78rem, 2.6vw, 0.98rem); margin: 0 0 0.18rem 0; }
  .objetivo-text p { font-size: clamp(0.64rem, 2.2vw, 0.78rem); line-height: 1.3; margin: 0; }
  .objetivo-content, .objetivo-text, .objetivo-content img { transition: width 0.2s ease, flex-basis 0.2s ease; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1rem; }
  p { font-size: 0.95rem; }
  .seccion-inicio { margin-bottom: var(--spacing-lg); }
  .valores-section, .mision-vision { gap: var(--spacing-md); }
  .footer-inner, .footer-table { padding-left: 1rem; padding-right: 1rem; }
  .contact-item span,
  .social-item span,
  .direccion p {
    font-size: 0.62rem !important;
  }
  .footer-cell h4 {
    font-size: 0.7rem !important;
    margin: -0.6rem 0 0.05rem 0 !important;
  }
  .footer-cell {
    padding-top: 0 !important;
  }
  .footer-cell.contacto,
  .footer-cell.contacto h4 {
    padding-top: 0 !important;
    margin-top: 0 !important;
    vertical-align: top !important;
  }
  .footer-cell.contacto .contact-item {
    margin-bottom: 0.95rem !important;
  }
  .footer-cell.contacto .contact-item:last-child {
    margin-bottom: 0 !important;
  }
  .footer-cell.contacto .contact-item:first-child {
    margin-top: 1rem !important;
  }
  .footer-cell.contacto h4 {
    margin-top: -0.4rem !important;
  }
  .contact-item img,
  .social-item img,
  .ubicacion-icon img {
    width: 18px !important;
    height: 18px !important;
  }
  .contact-item,
  .social-item {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.15rem !important;
    margin-bottom: 0.6rem !important;
    text-align: center !important;
  }
  .direccion-centrada {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}
@media (max-width: 768px){
  body { font-size: 0.92rem; }
  .contenido-principal { max-width: calc(100% - 32px); padding-left: 0.75rem; padding-right: 0.75rem; }
  .quienes-somos { width: 86% !important; max-width: 360px !important; padding: 0.45rem !important; min-height: 90px !important; }
  .quienes-somos h2 { font-size: 0.9rem !important; }
  .quienes-somos p { font-size: 0.70rem !important; line-height: 1.3 !important; }
  .objetivo-content { width: 82% !important; max-width: 360px !important; margin: 0.4rem auto !important; }
  .objetivo-content img { flex: 0 0 22% !important; max-height: 13vh !important; }
  .objetivo-text { height: 140px !important; min-height: 140px !important; padding: 0.35rem !important; }
  .objetivo-text h3 { font-size: 0.78rem !important; }
  .objetivo-text p { font-size: 0.62rem !important; }
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 0.95rem !important; }
  p { font-size: 0.85rem !important; }
}
@media (max-width: 768px) {
  .objetivo-content {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    width: 95% !important;
    max-width: none !important;
    margin: 0.5rem auto !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .objetivo-content img {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 140px !important;
    max-height: 30vh !important;
    object-fit: cover !important;
  }
  .objetivo-text {
    flex: 1 1 60% !important;
    max-width: 60% !important;
    padding: 0.4rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 100px !important;
  }
  .objetivo-text h3 { font-size: 0.82rem !important; margin: 0 0 0.2rem 0 !important; }
  .objetivo-text p { font-size: 0.64rem !important; line-height: 1.3 !important; margin: 0 !important; }
}
@media (max-width: 768px) {
  .quienes-somos {
    width: 95% !important;
    max-width: none !important;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 768px) {
  .mision-vision {
    display: flex !important;
    flex-direction: row;
    gap: 0.3rem;
    width: 98%;
    max-width: none;
    margin: 0 auto 0.4rem auto;
    transform: translateY(-30px);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
  }
  .card-mision, .card-vision {
    flex: 0 0 50%;
    width: 50%;
    min-height: 140px;
    border-radius: calc(var(--radius-md));
    overflow: hidden;
    position: relative;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-mision .card-media, .card-vision .card-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .card-overlay {
    background: rgba(0,0,0,0.25) !important;
  }
.card-mision h3, .card-vision h3 {
    color: #ffffff !important;
    font-size: 0.85rem !important;
    margin-bottom: 0.2rem !important;
  }
  .card-mision p, .card-vision p {
    font-size: 0.55rem !important;
    color: #ffffff !important;
    font-weight: 600;
  }
  .card-content {
    position: relative !important;
    z-index: 3 !important;
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    text-align: center !important;
    background: rgba(255,255,255,0.0) !important;
  }
  .card-content {
    position: relative !important;
    z-index: 3 !important;
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    text-align: center !important;
    background: rgba(255,255,255,0.0) !important;
  }
}
@media (max-width: 768px) {
  .valores-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    align-items: start;
    justify-items: start;
  }
  .valores-section {
    margin: 0.4rem auto 0.8rem !important;
    max-width: calc(100% - 24px) !important;
    padding: 0.4rem 0.6rem !important;
    border-radius: 10px !important;
  }
  .valores-section h3 { margin-bottom: 0.2rem !important; }
  .valores-intro { margin-bottom: 0.3rem !important; font-size: 0.68rem !important; }
  .valor-card {
    padding: 0.35rem !important;
    gap: 0.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 68px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    width: 100% !important;
  }
  .valor-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0.2rem !important;
  }
  .valor-card {
    height: 85px !important;
  }
  .valor-info { display: flex; flex-direction: column; gap: 0.08rem; align-items: center; }
  .valor-texto { font-size: 0.58rem !important; }
  .valor-desc { font-size: 0.5rem !important; }
  .footer-bottom p { font-size: 0.55rem !important; }
  .valores-grid .valor-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.menu-arco .boton:focus-visible { outline: 2px solid var(--primary-purple); outline-offset: 2px; }
@media (prefers-contrast: high) {
  :root { --primary-purple: #0000ff; --secondary-pink: #ff00ff; --gray-100: #ffffff; --gray-800: #000000; }
}

/* I love neon genesis evangelion <3 */

.main-wrapper {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden; 
  min-height: auto;
  overflow-y: visible;
  overflow: visible;
}
#contenido-dinamico {
  overflow: visible;
  position: relative;
  z-index: 5;
}