/* Consolidated project styles: cleaned and deduplicated */
/* Base document */
:root{
  /* Tipografía base del sitio (tomada del index) */
  --font-family-base: Arial, Helvetica, sans-serif;
  /* Tamaño base ligeramente mayor */
  --font-size-base: 18px;
}
html { overflow-x: hidden; }
/* Base body */
html, body, button, input, select, textarea {
  font-family: var(--font-family-base) !important;
}
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: #222;
  font-size: var(--font-size-base) !important;
  line-height: 1.6;
}

/* Ajuste leve en móviles pequeños para mantener equilibrio visual */
@media (max-width: 480px){
  body { font-size: calc(var(--font-size-base) * 0.97) !important; }
}

/* Tipografía global: texto justificado en todos los dispositivos con cortes seguros */
p, li, .card-info-text, section p, .acercade-section p, .p2 {
  text-align: justify;
  word-spacing: normal;
  letter-spacing: normal;
  text-justify: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Evitar justificado en textos cortos de tarjetas del home: se corrige con especificidad baja usando :where */
:where(.fnd-card-text,.fnd-stat-label,.fnd-program-text){text-align:left;}

/* Skip link estilo (accesibilidad) */
.skip-link{position:absolute;left:12px;top:-48px;background:#0b61a4;color:#fff;padding:8px 14px;border-radius:8px;z-index:2000;text-decoration:none;font-weight:600;box-shadow:0 4px 14px rgba(11,97,164,.28);transition:top .2s ease,background .2s ease;}
.skip-link:focus{top:12px;}

/* Focus visible global fallback (refuerzo) */
:where(a,button,input,textarea,select):focus-visible{outline:3px solid #0b87e6;outline-offset:3px;border-radius:6px;}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
}

/* General card used across the site (single source of truth) */
.card {
  font-family: inherit;
  max-width: 18rem;
  padding: 20px;
  border: 8px solid #22314a;
  border-radius: 20px;
  margin: 1rem auto;
  background-color: #22314a;
  color: #fff;
  
}

/* Footer styles (consolidated) */
footer {
  background-color: #00519c;
  padding: 20px 0;
  text-align: center;
  color: #fff;
  /* subtle elevation to separate footer from page content */
  box-shadow: 0 8px 24px #22314a;
}
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  
}
.footer-logo img { max-width: 200px; display:block; margin:0 auto; transition:transform .3s ease, filter .3s ease }
.footer-logo img:hover { transform: scale(1.05); filter: brightness(1.1) }
.footer-info, .footer-social, .footer-donate { flex: 1 1 220px; text-align: left; margin: 10px }
.footer-social a { display:inline-block; margin-inline-end:10px }
.footer-social img { width: 35px; height:35px; transition: transform .25s ease }
.footer-social img:hover { transform: translateY(-4px) }
.footer-bottom { background:#d1d1d1; padding: 20px 0; color:#000; margin-top: 1rem }

/* Navbar / header helper (kept minimal, main rules in navbar_style.css) */
.navbar { background-color: transparent }

/* Mission / vision */
.mission-container { margin: 2rem auto }
.mission-row { background-color: #084cac; border: 8px solid #084cac; border-radius: 10px; padding:1rem }
.mission-text { color: #fff; font-size: 1.1rem; line-height:1.6 }

/* Specific adjustments so white PNGs show over the mission background and
   text remains readable. The mission cards should be transparent so the
   blue mission-row shows through; images get an outline to remain visible. */
.mission-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.mission-card .card-img-top {
  display: block;
  margin: 0 auto 1rem;
  max-width: 100%;
  /* subtle outline so white images read on any background */
  outline: 6px solid rgba(0,0,0,0.06);
  border-radius: 8px;
}
.mission-card .card-body { color: #fff }

/* Banners */
.ban { background-color:#22314a; padding:30px; border-radius:20px; display:block; width: fit-content; margin:20px auto; color:#fff; text-align:center }

/* Donation cards and buttons */
.Card_Donacion_Colaboracion { background:#e2e2e2; padding:2rem; display:flex; flex-direction:column; justify-content:space-between }
.donation-card { max-width:30rem; margin:0 auto }
.donation-card__body { padding:1.5rem; display:flex; justify-content:center }
.btn-donate2 { background-color: rgb(110,184,206); color:#fff; padding:10px 20px; border-radius:20px; border:none; cursor:pointer }
.btn-donate2:hover { filter:brightness(.95) }
.btn-donate { background:#007bff; color:#fff; padding:10px 20px; border-radius:6px; border:none; cursor:pointer }
.btn-donate:hover { background:#0056b3 }

/* Carousel */
.carousel-container { width:100%; position:relative }
.carousel-item { height:50vh; min-height:300px }
.carousel-item img, .carousel-item video { width:100%; height:100%; object-fit:cover }

/* Section divider and social links */
.section-divider { width:100%; margin:40px auto; padding:30px 20px; background:#22314a; border-top:2px solid #e9ecef; border-bottom:2px solid #e9ecef }
.section-info { color:#fff; font-size:1.4rem; text-align:center; max-width:800px; margin:0 auto }
.social-media-container { display:flex; justify-content:center; gap:25px; flex-wrap:wrap; margin-top:25px }
.social-link { display:inline-flex; align-items:center; text-decoration:none; color:#6c757d; background:#fff; padding:8px 15px; border-radius:25px; border:1px solid #dee2e6 }
.social-link:hover { color:#fff; transform: translateY(-2px); box-shadow:0 3px 10px rgba(0,0,0,.1) }
.social-link.facebook:hover { background:#4267B2 }
.social-link.instagram:hover { background:#E1306C }
.social-link.twitter:hover { background:#000 }
.social-link.youtube:hover { background:#FF0000 }

/* Card info grid */
.card-info-container { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; padding:1rem }
.card-info { flex:1 1 300px; max-width:25rem; background:#fff; border-radius:8px; overflow:hidden }
.card-info-img-top { width:100%; height:auto; object-fit:cover; max-height:400px }
.card-info-body { padding:1rem }
.card-info-text { color:#333; text-align:justify }

/* Accessibility helpers */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Keyframes - fixed and minimal */
@keyframes colorChange {
  0% { background-color: rgb(110,184,206) }
 25% { background-color: #66ff66 }
 50% { background-color: #1e90ff }
 75% { background-color: #ff69b4 }
 100% { background-color: #ff6347 }
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .section-info { font-size:1.1rem }
  .carousel-item { height:60vw }
  .card-info-img-top { max-height:250px }
}

/* Small utility to apply a sans-serif stack without using inline styles */
.text-sans { font-family: var(--font-family-base) !important }

/* Reglas extraídas desde acercade.html el 2025-10-09T20:35:19.900678 UTC */
.inline-acercade-1 { background-color: #22314a; color: #f2f2f2; padding: 20px; border-radius: 20px; inline-size: max-content; margin-block-start: 40px; }
.inline-acercade-2 { text-align: start; }
.inline-acercade-3 { font-size: inherit; font-family: inherit; text-align: justify; }
.inline-acercade-4 { text-align: start; }
.inline-acercade-5 { font-size: inherit; font-family: inherit; text-align: justify; }
.inline-acercade-6 { font-size: inherit; font-family: inherit; text-align: center; }

/* Asegurar tipografía consistente en títulos por si alguna hoja la cambia */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-base); }
.inline-acercade-7 { font-size: larger; }
.inline-acercade-8 { background-color: #c3e6e9; }
.inline-acercade-9 { background-color: #e2e2e2; }
.inline-acercade-10 { background-color: #DAF7A6; }
.inline-acercade-11 { background-color: #22314a; color: #f2f2f2; padding: 20px; border-radius: 20px; inline-size: max-content; margin-block-start: 40px; }