/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



/* Variables de color */
:root {
  --primary: #0ca177;
  --secondary: #e9a803;
  --accent: #b50d0d;
  --light-bg: #fdfef3;
  --dark-bg: #333;
}
/* — Banner Full-Width — */
#page-banner {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  height: 400px; /* ajústalo a tu gusto */
  background: url('images/banner.jpeg') center/cover no-repeat;
  position: relative;
  
}
/* Banner full-width — más vivo */
#page-banner {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  height: 400px;
  background: url('images/banner.jpeg') center/cover no-repeat;
  position: relative;
  /* ▼ + brillo y saturación ▼ */
  filter: brightness(1.15) saturate(1.3);
}

#page-banner .banner-overlay {
  position: absolute;
  inset: 0;
  /* ▼ overlay mucho más ligero ▼ */
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

/* Contenido interno centrado */
.banner-content {
  display: flex;
  align-items: center;
}
/* Logo dentro del banner */
.banner-logo {
  width: 180px;  /* ajústalo según tu imagen */
  margin-right: 1rem;
}
/* Título / Tagline */
.banner-title {
  color: #fff;
  font-family: 'sans-serif', cursive;
  font-size: clamp(2rem, 5vw, 3rem);
}

/* Contenedor centrado */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Body y tipografía */
/* Letra base “normal” para toda la página */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  background: var(--light-bg);
  color: #333;
  scroll-behavior: smooth;
  padding-top: 3.5rem;
}


/* Header fijo y full-width con degradado */
header {
  position: fixed;                              /* ← fijo sobre todo */
  top: 0;
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(
  135deg,
  #e9ba11 0%,
  #FFF8B0 40%,
  #FFFFFF 60%,
  #e9ba11 100%
);
  color: var(--dark-bg);
  padding: 0.6rem 0;                            /* ajusta según altura deseada */
  z-index: 300;                                 /* asegúrate que sea mayor que el banner */
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  transition: box-shadow 0.3s;
}
/* Estilos al hacer scroll */
header.scrolled {
  /* Sombra más intensa */
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  /* Opcional: oscurecer un poco el degradado */
  /* filter: brightness(0.9); */
  transition: box-shadow 0.3s, filter 0.3s;
}


.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  display: flex;
  gap: 2rem;
}
.nav-links a {
  color: var(--dark-bg);
  font-family: sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  padding: 0.5rem 0;
  transition: color 0.3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: #fff;
  transition: width 0.3s ease;
}
.nav-links a:hover {
  color: var(--accent);
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-cta {
  background: var(--accent);
  color: #fff;
  font-family:sans-serif;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(37,211,102,0.4);
}


nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 2rem;
}
nav a {
  color: #fff;
  text-decoration: none;
  font-family:sans-serif;
  font-weight: bold;
  transition: opacity 0.3s;
}
nav a:hover {
  opacity: 0.7;
}

/* — Hero full-bleed con gradiente — */
/* Hero full-bleed — degradado vibrante */
.hero-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 4rem 0;
  /* ▼ degradado más contrastado ▼ */
  background: linear-gradient(
    135deg,
    var(--secondary) 0%,
    var(--primary) 50%,
    var(--secondary) 100%
  );
  background: var(--light-bg);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* ▼ overlay más sutil ▼ */
  background: transparent;
}

.hero-content {
  position: relative;
  text-align: center;
  color: var(--dark-bg);
}
.hero-content h2 {
  font-family: 'sans-serif';
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
  color: var(--secondary);   /* añade esta línea si lo quieres amarillo */
}
.hero-content p {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-bottom: 2rem;
}
.hero-btn {
  display: inline-block;
  background: var(--dark-bg);
  color: #fff;
  font-family: sans-serif;
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}
.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(37,211,102,0.4);
}


/* Secciones */
section {
  padding: 2rem 0;
}
/* Títulos de sección más sobrios */
section h2 {
  font-family:sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--secondary);
  letter-spacing: .5px;
  margin-bottom: 1rem;
  position: relative;
}



/* Animaciones */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Listas */
ul {
  padding-left: 1.2rem;
}
ul li {
  margin-bottom: 0.5rem;
}

/* Galería en secciones */
.gallery-section {
  margin-bottom: 3rem;
}
.gallery-section h3 {
  font-family: sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 1rem;
}
#galeria .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.gallery-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Lightbox */
.lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.lightbox-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  animation: fadeInUp 0.5s ease;
}
.lightbox-img {
  width: 100%;
  display: block;
}
.lightbox-text {
  padding: 1rem;
}
.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
}

/* Formularios */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  margin-top: 1rem;
}
form label {
  font-weight: 500;
}
form input,
form textarea {
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
}
form input:focus,
form textarea:focus {
  outline: none;
  border-color: var(--primary);
}
form button {
  align-self: start;
  background: var(--secondary);
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}
form button:hover {
  background: #00447a;
}

/* Donaciones */
#donaciones button {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(232,73,29,0.4);
  transition: transform 0.3s, box-shadow 0.3s;
}
#donaciones button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(232,73,29,0.5);
}

/* Contacto Relaciones Empresariales */
#contacto-empresarial {
  background: #fff;
  padding: 3rem 0;
}
#contacto-empresarial h2 {
  text-align: center;
  margin-bottom: 0.5rem;
}
#contacto-empresarial .subtitle {
  text-align: center;
  margin-bottom: 2rem;
  color: #555;
}
.contact-wrapper {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.info-card {
  background: var(--light-bg);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.info-card:hover {
  transform: translateY(-5px);
}
.contact-footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.contact-footer a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}
.btn-whatsapp {
  background: var(--accent);
  color: #fff;
}
.btn-whatsapp:hover { background: #1ebe5d; }
.btn-llamar {
  background: var(--secondary);
  color: #fff;
}
.btn-llamar:hover { background: #00447a; }

/* Footer */
footer {
  text-align: center;
  padding: 1.5rem 0;
  background: var(--dark-bg);
  color: #fff;
  margin-top: 2rem;
}

/* Medias Queries */
@media (max-width: 1024px) {
  #galeria .grid { grid-template-columns: repeat(2, 1fr); }
  .contact-wrapper { flex-direction: column; }
}
@media (max-width: 768px) {
  nav ul { flex-direction: column; gap: 1rem; }
  form, #donaciones button { width: 100%; }
}
@media (max-width: 600px) {
  #galeria .grid { grid-template-columns: 1fr; }
}

/* Botón “Volver arriba” */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: none;               /* oculto por defecto */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: opacity 0.3s;
  z-index: 300;
}
#back-to-top.show {
  display: flex;               /* se muestra cuando tenga la clase .show */
  opacity: 0.8;
}
#back-to-top:hover {
  opacity: 1;
}

/* Footer con links y sociales alineados */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 0;
  font-size: 0.9rem;
  color: #666;
  border-top: 1px solid #ddd;
}

/* Estilo de los enlaces de texto */
.footer-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-links a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover {
  color: var(--primary);
}
.footer-links .sep {
  margin: 0 0.5rem;
  color: #ccc;
}

/* Iconos sociales */
.footer-social {
  display: flex;
  gap: 1rem;
}
.footer-social a {
  display: inline-block;
  width: 24px;
  height: 24px;
  transition: opacity 0.2s;
}
.footer-social a:hover {
  opacity: 0.7;
}
.footer-social img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* — Pestañas Misión / Visión / ODS — */
.tabs-section {
  background: var(--light-bg);
  padding: 2rem 1rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}
.tabs {
  max-width: 1000px;
  margin: 0 auto;
}
.tab-buttons {
  display: flex;
  position: relative;
  border-bottom: 2px solid var(--secondary);
}
.tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 0.75rem;
  font-family:sans-serif;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: color 0.3s;
  font-size: clamp(1.2rem, 2vw, 1.5rem);

}
.tab-btn.active {
  color: var(--primary);
}
.tab-indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: calc(100% / 3);
  height: 3px;
  background: var(--primary);
  transition: transform 0.3s ease;
}
/* Paneles */
.tab-panels {
  margin-top: 1.5rem;
}
.tab-panel {
  display: none;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.tab-panel.active {
  display: flex;
}
.tab-text {
  flex: 1 1 300px;
}
.tab-text h3 {
  font-family: 'sans-serif';
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: 0.5rem;
  color: var(--secondary);
}
.tab-text p {
  line-height: 1.6;
}
.tab-image {
  flex: 1 1 300px;
}
.tab-image img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* Responsive: apilar en móvil */
@media (max-width: 768px) {
  .tab-panel.active {
    flex-direction: column;
  }
}

/* Carrusel ODS */
.ods-carousel {
  overflow: hidden;
  margin-top: 1.5rem;
}
.carousel-container {
  display: flex;
  transition: transform 0.6s ease;
}
.carousel-item {
  min-width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0.5rem;
}
.carousel-item img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  border-radius: 6px;
}
.carousel-caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-dark);
}

/* Ajuste global de imágenes en pestañas y carrusel ODS */
.tab-image img,
.ods-carousel .carousel-item img {
  width: 100%;            /* que ocupen todo el ancho de su contenedor */
  height: auto;           /* que mantengan la proporción */
  max-height: 250px;      /* altura máxima que tú definas */
  object-fit: contain;    /* escalan para caber dentro sin recortar */
}

/* Ajustes de tipografía para Misión/Visión/ODS */
#misvisods .tab-text h3 {
  font-size: 30px;         /* Título principal aumentado */
  font-weight: bold;       /* Asegura que esté en negrita */
}

#misvisods .tab-text p {
  font-size: 20px;         /* Texto descriptivo más grande */
  font-weight: bold;       /* Negrita en toda la descripción */
  line-height: 1.5;        /* Sutilmente más espaciado para lectura */
}

/* Sección Contacto Relaciones Empresariales */
.contact-section {
  background: linear-gradient(135deg, #fff, #f9f9f9);
  padding: 3rem 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}
.contact-container {
  display: flex;
  gap: 2rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.contact-info {
  flex: 1 1 350px;
}
.contact-info h2 {
  font-family: 'sans-serif';
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}
.contact-info .subtitle {
  color: #555;
  margin-bottom: 1.5rem;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}
.contact-list li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--text-dark);
}
.contact-list .icon {
  width: 24px;
  height: 24px;
  margin-right: 0.75rem;
  color: var(--primary);
  flex-shrink: 0;
}
.contact-list a {
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.2s;
}
.contact-list a:hover {
  color: var(--primary);
}
.contact-actions {
  display: flex;
  gap: 1rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-family: sans-serif;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s;
}
.btn:hover {
  background: #d63e1b;
  transform: translateY(-2px);
}
.btn-whatsapp .icon {
  color: #fff;
}
.btn-call .icon {
  color: #fff;
}
.contact-image {
  flex: 1 1 400px;
  text-align: center;
}
.contact-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column-reverse;
    text-align: center;
  }
  .contact-actions {
    justify-content: center;
  }
}
/* Footer “header-style” */
.site-footer {
  background: linear-gradient(
  135deg,
  #FFD700 0%,
  #FFF8B0 40%,
  #FFFFFF 60%,
  #FFE000 100%
);
  color: var(--dark-bg);
  font-family:sans-serif;
  padding: 0.6rem 0;               /* misma altura que tu header */
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}
.footer-links a,
.footer-links span {
  color:var(--dark-bg);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 1rem;
  position: relative;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--dark-bg);
  transition: width 0.3s ease;
}
.footer-links a:hover {
  color: var(--accent);
}
.footer-links a:hover::after {
  width: 100%;
}
.footer-social a {
  color: #fff;
  margin-left: 0.5rem;
  transition: opacity 0.3s;
}
.footer-social a:hover {
  opacity: 0.7;
}
.footer-social img {
  width: 24px;
  height: 24px;
}
@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}
/* — Carrusel de Galería — */
.gallery-carousel {
  max-width: 600px;    /* ancho total del carrusel: ajusta si quieres más o menos */
  margin: 1rem auto;   /* lo centra en la página */
  overflow: hidden;    
}

.gallery-carousel .carousel-container {
  display: flex;
  flex-wrap: nowrap;   
  width: 100%;         /* igual al ancho del carrusel */
  transition: transform 0.6s ease;
  gap: 0.5rem;
}

/* Cada slide ocupa la mitad exacta del carrusel */
.gallery-carousel .gallery-item {
  flex: 0 0 50%;       /* 2 slides caben en una “página” */
  aspect-ratio: 2/3;   /* mantiene formato vertical */
  overflow: hidden;
  margin: 0;           /* quita márgenes extra */
}

.gallery-carousel .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}




/* Imagen dentro del lightbox siempre cuadrada */
.lightbox-img {
  width: 80vw;              /* 80% del ancho de la ventana */
  max-width: 500px;         /* ancho máximo */
  height: 80vw;             /* igual que el ancho para cuadrado */
  max-height: 500px;        /* altura máxima */
  object-fit: contain;      /* centra y ajusta sin recortar */
}
.lightbox-content {
  /* aseguramos que el contenedor no limite la forma cuadrada */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ============ Rebrand Sucursales ============ */
.brand-sucursales {
  background: linear-gradient(180deg, #fff 0%, #fff 60%, rgba(255,224,0,0.1) 100%);
  padding: 2.5rem 0;
}
.bref-head {
  text-align: center;
  margin-bottom: 1.5rem;
}
.bref-head .kicker {
  display: inline-block;
  font-family: sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(232,73,29,.08);
  border: 1px solid rgba(232,73,29,.25);
  padding: .3rem .6rem;
  border-radius: 999px;
  margin-bottom: .5rem;
}
.bref-head h2 {
  font-family: 'sans-serif';
  color: var(--secondary);
  margin: .25rem 0 .5rem;
}
.bref-head p { color: #555; }

/* Stats */
.bref-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px,1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
}
.stat {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}
.stat strong {
  display: block;
  font-family: 'sans-serif';
  font-size: 1.6rem;
  color: var(--dark-bg);
  line-height: 1;
}
.stat span {
  font-size: .9rem;
  color: #666;
}

/* Grid regiones */
.region-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(220px,1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.region-card {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: transform .25s, box-shadow .25s;
}
.region-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,.09);
}
.region-card .ribbon {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  border-radius: 16px 16px 0 0;
}
.region-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
}
.region-top .emoji { font-size: 1.4rem; }
.region-card h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--secondary);
}
.region-card p { color: #555; margin: .4rem 0 .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font-size: .8rem;
  padding: .25rem .55rem;
  background: rgba(0,90,156,.08);
  color: var(--secondary);
  border: 1px solid rgba(0,90,156,.22);
  border-radius: 999px;
}

/* CTA inferior */
.cta-row { text-align: center; margin-top: 1.25rem; }
.btn-outline {
  background: transparent;
  color: var(--secondary);
  border: 2px solid var(--secondary);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font-weight: 600;
}
.btn-outline:hover {
  color: #fff;
  background: var(--secondary);
}

/* Responsive Sucursales */
@media (max-width: 1024px) {
  .bref-stats { grid-template-columns: repeat(2,1fr); }
  .region-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .region-grid { grid-template-columns: 1fr; }
}

/* ============ Rebrand Blog ============ */
.brand-blog { padding: 2.5rem 0; background: #fff; }

.post-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
  background: linear-gradient(135deg, #fff 0%, #fff 70%, rgba(37,211,102,.08) 100%);
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  margin-bottom: 1.25rem;
}
.post-media img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
}
.post-body .tags { display: flex; gap: .4rem; margin-bottom: .4rem; }
.tag {
  font-size: .75rem;
  padding: .2rem .5rem;
  background: rgba(232,73,29,.08);
  color: var(--primary);
  border: 1px solid rgba(232,73,29,.22);
  border-radius: 999px;
}
.post-body h3 {
  margin: .2rem 0 .35rem;
  font-family: 'sans-serif';
  color: var(--dark-bg);
}
.post-body p { color: #555; margin-bottom: .5rem; }
.post-link {
  font-weight: 700;
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 2px solid rgba(0,90,156,.25);
}
.post-link:hover { color: var(--primary); border-color: rgba(232,73,29,.4); }

/* Grid posts */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.post-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  transition: transform .25s, box-shadow .25s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.08); }
.post-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.post-card-body { padding: .8rem .9rem 1rem; }
.post-card-body h4 {
  margin: .25rem 0 .35rem;
  font-size: 1.05rem;
  color: var(--dark-bg);
}

/* Responsive Blog */
@media (max-width: 1024px) {
  .post-featured { grid-template-columns: 1fr; }
  .post-media img { max-height: 260px; }
  .post-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* ============ Rebrand Comentarios ============ */
.brand-comments {
  padding: 2.5rem 0;
  background: linear-gradient(180deg, rgba(0,90,156,.06) 0%, rgba(232,73,29,.06) 100%);
}

.comment-wrap {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.25rem;
  align-items: start;
}

.comment-card,
.aside-card {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 1rem;
}

.comment-card .card-ribbon {
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  border-radius: 16px 16px 0 0;
}

/* Inputs del formulario (respetando tus estilos base, solo afinamos) */
.brand-comments form {
  display: grid;
  gap: .9rem;
}

.brand-comments .form-row label {
  font-weight: 600;
  color: var(--secondary);
  display: block;
  margin-bottom: .35rem;
}

.brand-comments input,
.brand-comments textarea {
  width: 100%;
  padding: .85rem .9rem;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  transition: box-shadow .2s, border-color .2s;
}

.brand-comments textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.brand-comments input:focus,
.brand-comments textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(232,73,29,.15);
}

.brand-comments .helper {
  font-size: .85rem;
  color: #666;
  margin-top: .35rem;
}

.btn-send {
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: .75rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-send:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); filter: brightness(1.05); }

.brand-comments .form-note {
  font-size: .85rem;
  color: #666;
}
.brand-comments .form-note a { color: var(--secondary); text-decoration: none; border-bottom: 1px solid rgba(0,90,156,.3); }
.brand-comments .form-note a:hover { color: var(--primary); border-color: rgba(232,73,29,.4); }

/* Estado del formulario */
.form-status {
  margin-top: .6rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s;
}
.form-status.ok { color: #1a7f37; }
.form-status.err { color: #b42318; }
.form-status.show { opacity: 1; transform: translateY(0); }

/* Aside/guía */
.aside-card h3 {
  font-family: 'sans-serif';
  color: var(--dark-bg);
  margin-bottom: .5rem;
}
.aside-card .bullet {
  padding-left: 1rem;
  color: #555;
}
.aside-card .bullet li { margin-bottom: .4rem; }

.brand-stamp {
  display: inline-block;
  margin-top: .6rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(37,211,102,.12);
  color: #1e7e34;
  font-weight: 700;
  font-size: .9rem;
}

/* Responsive */
@media (max-width: 900px) {
  .comment-wrap { grid-template-columns: 1fr; }
}
/* Misión, Visión y ODS con texto a la izquierda */
#mision .tab-text,
#vision .tab-text,
#ods .tab-text {
  text-align: left;
}
/* ====== BLOG CARDS ====== */
.blog {
  text-align: center;
  padding: 40px 20px;
}

.blog-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.blog-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: left;
}

.blog-card img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 12px;
}

.blog-card h3 {
  margin-bottom: 8px;
  font-size: 18px;
  color: #2a0153;
}

.blog-card p {
  font-size: 14px;
  line-height: 1.5;
}

.blog-card a.leer-mas {
  color: #ff9800;
  font-weight: bold;
  text-decoration: none;
}

.blog-card a.leer-mas:hover {
  text-decoration: underline;
}


/* ====== MODALES ====== */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
}

.modal-content h3 {
  margin-top: 0;
  color: #2a0153;
}

.modal-content p {
  font-size: 15px;
  line-height: 1.6;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
/* === Carrusel horizontal de Alianzas === */
.alianzas {
  text-align: center;
  margin: 2rem auto;
}

.alianzas-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  padding: 1rem;
}

.alianza-item {
  flex: 0 0 100%; /* Ocupa todo el ancho visible */
  scroll-snap-align: center;
  text-align: center;
}

.alianza-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.alianza-img:hover {
  transform: scale(1.05);
}

.alianza-item p {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  font-weight: bold;
}
/* =====================
   Sección Sobre Nosotros
===================== */
.sobre-nosotros {font-family: sans-serif;
  display: flex;
  flex-direction: column; /* 👉 Esto hace que sea de arriba hacia abajo */
  align-items: center;
  gap: 20px;
  text-align: center; /* Para que texto y botones queden centrados */
}

.sobre-nosotros img {
  max-width: 90%;
  border-radius: 10px;
}

.sobre-nosotros .contenido {
  max-width: 800px;
}

.sobre-nosotros .botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
/* =====================
   Botones Sobre Nosotros
===================== */
.botones .btn {
  padding: 10px 20px;
  background: var(--button);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 1rem;
}

.botones .btn:hover {
  background: var(--button-hover);
}

/* =====================
   Modales de Logros / Impacto / Resultados
===================== */
/* ----- Modales (ventanas emergentes internas) ----- */
/* ===== Modal Logros: layout 2 columnas ===== */
/* ===== Logros: dos columnas, texto izq (justificado) + fotos derecha apiladas ===== */
#modal-logros .modal-content{
  max-width: 980px;
  width: 96vw;
  max-height: 90vh;       /* scroll interno si se pasa de alto */
  overflow: auto;
}

#modal-logros .grid-logros{
  display: grid;
  grid-template-columns: 1.2fr .8fr; /* texto más ancho */
  gap: 16px;
  align-items: start;
}

#modal-logros .modal-texto p{
  text-align: justify;
  line-height: 1.75;
  font-size: 0.98rem;
  color: #048168;
  margin: 0;
}

#modal-logros .modal-fotos{
  display: flex;
  flex-direction: column; /* apiladas arriba/abajo */
  gap: 12px;
}

#modal-logros .modal-fotos img{
  width: 80%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

/* Responsivo: en móvil, se apilan texto y fotos */
@media (max-width: 900px){
  #modal-logros .grid-logros{ grid-template-columns: 1fr; }
  #modal-logros .modal-fotos{ order: 2; }
  #modal-logros .modal-texto{ order: 1; }
}

/* ===== Logros: compacidad del texto (sin mover imágenes) ===== */
#modal-logros .logros-list{
  list-style: none;     /* sin viñetas */
  margin: 0;
  padding: 0;
}

#modal-logros .logros-list li{
  text-align: justify;
  line-height: 1.5;    /* antes usabas ~1.75 en <p> */
  font-size: 1rem;
  color: #333;
  margin: 0 0 10px;     /* separación pequeña entre puntos */
}

/* Opcional: si aún lo ves muy suelto, baja a 1.5 */


/* Texto centrado */
.centrado {
  text-align: center;
}

/* Galería de imágenes */
.sobre-galeria {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.sobre-galeria img {
  width: 30%;
  max-width: 250px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.sobre-galeria img:hover {
  transform: scale(1.05);
}

/* Botones */
.sobre-botones {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn-sobre.azul {
  background: #29b997;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-sobre.azul:hover {
  background: #058c64;
}
/* Estilo general del modal */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}

/* Contenido del modal */
.modal-contenido {
  background: #fff;
  margin: 5% auto;
  padding: 20px;
  border-radius: 12px;
  width: 80%;
  max-width: 800px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: aparecer 0.3s ease;
}

/* Diseño en 2 columnas */
.modal-flex {
  display: flex;
  gap: 20px;
  align-items: center;
}

.modal-flex img {
  width: 40%;
  border-radius: 10px;
}

.modal-flex .modal-texto {
  width: 60%;
}

.modal-texto h2 {
  margin-bottom: 10px;
  color: #2980b9;
}

/* Botón cerrar */
.cerrar {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

.cerrar:hover {
  color: red;
}

/* Logros: que el texto ocupe toda su columna */
#modal-logros .modal-texto { 
  width: 90%;
}

/* Opcional: aún más cerca texto ↔ fotos */
#modal-logros .grid-logros { 
  gap: 12px; /* prueba 12 o incluso 8 */
}


/* Animación */
@keyframes aparecer {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* ===== Modal Impacto: imagen izquierda + texto derecha ===== */
#modal-impacto .modal-content{
  max-width: 980px;
  width: 96vw;
  max-height: 90vh;      /* scroll interno si se excede en altura */
  overflow: auto;
}

#modal-impacto .impacto-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;  /* izq = img | der = texto */
  gap: 16px;
  align-items: center;
}

#modal-impacto .impacto-media{ margin: 0; }
#modal-impacto .impacto-media img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

#modal-impacto .impacto-texto p{
  margin: 0;
  text-align: justify;
  line-height: 1.75;
  font-size: 0.98rem;
  color: #333;
}

/* Responsivo: apilar en pantallas chicas */
@media (max-width: 900px){
  #modal-impacto .impacto-grid{
    grid-template-columns: 1fr;
  }
}
/* ===== Modal Resultados: dos imágenes al final ===== */
#modal-resultados .modal-content{
  max-width: 980px;           /* más ancho para que quepan bien 2 fotos */
  width: 96vw;
}

#modal-resultados .resultados-hero{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto 14px;
  object-fit: cover;
}

#modal-resultados .resultados-bottom{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* dos columnas */
  gap: 12px;
  margin-top: 10px;
}

#modal-resultados .resultados-bottom img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

/* Responsivo: en pantallas chicas se apilan */
@media (max-width: 800px){
  #modal-resultados .resultados-bottom{
    grid-template-columns: 1fr;
  }
}

/* Refuerzo tipografía de marca en h2 */
.hero-content h2,
section h2,
.bref-head h2,
#contacto-empresarial h2 {
  font-family: 'sans-serif';
}
/* === GALERÍA (INDEPENDIENTE) === */
.gallery-tabs {
  text-align: center;
  padding: 3rem 1rem;
}

.gallery-tabs-header {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.gallery-tab-btn {
  background: var(--secondary);
  color: #fff;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
}

.gallery-tab-btn.active,
.gallery-tab-btn:hover {
  background: var(--primary);
}

.gallery-panel {
  display: none;
}

.gallery-panel.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  width: 300px;
  overflow: hidden;
  text-align: left;
  padding-bottom: 1rem;
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.card img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.card h4 {
  font-size: 1.1rem;
  color: var(--primary);
  margin: 0.8rem 1rem 0.4rem;
}

.card p {
  color: #444;
  font-size: 0.9rem;
  margin: 0 1rem;
}

.gallery-indicators {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.gallery-indicators span {
  display: block;
  width: 30px;
  height: 6px;
  background: #ccc;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.3s;
}

.gallery-indicators span.active {
  background: var(--primary);
}
.gallery-wrapper {
  align-items: flex-start;
}

.gallery-page {
  gap: 1.5rem;
}
/* === Fix del carrusel para evitar que ensanche la página === */
.gallery-viewport {
  max-width: 100%;
  margin: 0 auto;
}

.gallery-wrapper {
  align-items: flex-start;
}

.gallery-page {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
  width: 100%;
}

.cards-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 900px) {
  .card { width: 45%; }
}
@media (max-width: 600px) {
  .card { width: 90%; }
}

/* === Carrusel de galería ajustado (3 cards por página sin desbordar) === */
.gallery-viewport {
  width: 100%;
  max-width: 1100px; /* tamaño total fijo para centrar el grupo */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.gallery-wrapper {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
}

.gallery-page {
  flex: 0 0 100%; /* cada página ocupa todo el viewport */
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
}

.cards-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Que las tarjetas no se corten ni se desborden */
.card {
  flex: 0 0 300px;
}

@media (max-width: 900px) {
  .card { flex: 0 0 45%; }
}
@media (max-width: 600px) {
  .card { flex: 0 0 90%; }
}
/* === Ajuste visual: Mapa de lectura centrado y balanceado === */
.brand-sucursales {
  background: linear-gradient(180deg, #fff 0%, #fff 70%, rgba(255, 224, 0, 0.1) 100%);
  padding: 4rem 0;
  text-align: center;
}

.bref-head {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 2.5rem;
}

.bref-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.stat {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  width: 180px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  text-align: center;
}

.stat strong {
  font-size: 2.5rem;
  color: var(--secondary);
}

.stat span {
  color: #555;
  font-weight: 600;
}

/* Tarjetas de regiones centradas y uniformes */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.region-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  padding: 1.5rem;
  max-width: 320px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.region-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.region-card h3 {
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.region-card p {
  color: #555;
  font-size: 0.95rem;
}

/* Chips más ligeros y centrados */
.region-card .chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.chip {
  background: rgba(232, 73, 29, 0.08);
  color: var(--primary);
  border: 1px solid rgba(232, 73, 29, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Centrado del botón inferior */
.cta-row {
  margin-top: 3rem;
  text-align: center;
}

.btn-outline {
  border-radius: 999px;
  border: 2px solid var(--secondary);
  color: var(--secondary);
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: var(--secondary);
  color: #fff;
}
/* === NUEVO DISEÑO MAPA DE LECTURA === */
.mapa-biblio-container {
  position: relative;
  text-align: center;
}

.mapa-biblio-hero {
  position: relative;
  margin: 2rem auto;
  max-width: 900px;
  width: 100%;
  height: auto;
}

.mapa-biblio-hero .mapa-fondo {
  width: 90%;
  opacity: 0.9;
  border-radius: 16px;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.1));
}

/* PUNTOS DE PAÍSES */
.mapa-punto {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  animation: fadeInUp 0.6s ease both;
}

.mapa-punto img {
  width: 40px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.mapa-punto span {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-bg);
  background: rgba(255,255,255,0.9);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  margin-top: 0.25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Animación suave al hacer hover */
.mapa-punto:hover img {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}
/* === MAPA BIBLIOREFRI: layout izquierdo/derecha === */
.mapa-biblio-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.bref-info {
  flex: 1 1 380px;
  text-align: left;
  max-width: 450px;
}

.bref-info .kicker {
  display: inline-block;
  margin-bottom: .6rem;
  color: var(--primary);
  font-weight: 700;
}

.bref-info h2 {
  font-size: 2.2rem;
  color: var(--secondary);
  margin: .4rem 0 0.6rem;
}

.bref-info p { color: #555; margin-bottom: 1rem; }

.bref-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.stat {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  padding: 0.9rem;
  text-align: center;
}

.stat strong { display: block; font-size: 1.6rem; color: var(--secondary); }
.stat span { font-size: 0.85rem; color: #666; }

.bref-mapa { flex: 1 1 520px; position: relative; max-width: 620px; }

.bref-mapa .mapa-fondo { width: 100%; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }

.mapa-punto {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
}

.mapa-punto img { width: 32px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2)); }

.mapa-punto span {
  display: block;
  background: rgba(255,255,255,0.95);
  padding: 0.2rem .45rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  margin-top: .25rem;
  color: #222;
}
.mapa-img {
  width: 90%;
  max-width: 600px;
  margin-left: 120px;
}

/* Responsive: apilar en móvil */
@media (max-width: 900px) {
  .mapa-biblio-flex { flex-direction: column; gap: 1.5rem; }
  .bref-info { max-width: 100%; text-align: center; }
  .bref-mapa { max-width: 95%; }
  .bref-stats { grid-template-columns: repeat(2, 1fr); justify-items:center; }
}
/* === LISTA DE PAISES A LA IZQUIERDA DEL MAPA === */
.mapa-lista {
  position: absolute;
  left: 80%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.3);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  padding: 1rem 1.2rem;
  width: 240px;
}

.mapa-lista h3 {
  font-size: 1.1rem;
  color: var(--secondary);
  margin-bottom: 0.7rem;
  text-align: center;
}

.mapa-lista ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mapa-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
  background: #fff;
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.mapa-lista li img {
  width: 22px;
  height: auto;
  margin-right: 0.4rem;
}

.mapa-lista li span {
  font-weight: 700;
  color: var(--secondary);
  font-size: 0.85rem;
}

/* Responsive: lista bajo el mapa en móvil */
@media (max-width: 900px) {
  .mapa-lista {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 1rem;
  }
  .mapa-lista ul {
    flex-direction: column;
    align-items: center;
  }
  .mapa-lista li {
    width: 90%;
    justify-content: space-between;
  }
}

/* === ANIMACIONES PARA EL MAPA Y LISTA === */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes countGlow {
  0% {
    color: #999;
    text-shadow: none;
  }
  100% {
    color: var(--secondary);
    text-shadow: 0 0 10px rgba(255, 196, 0, 0.3);
  }
}

/* ==== NUEVO CONTACTO ==== */
.contacto-nuevo {
  background: linear-gradient(180deg, #fffef8 0%, #fff8e7 100%);
  padding: 4rem 2rem;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  text-align: center;
  margin-top: 3rem;
}

.contacto-nuevo h2 {
  font-family: sans-serif;
  color: #f4a300;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.contacto-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

.contacto-info {
  flex: 1 1 400px;
  text-align: left;
  font-size: 1.1rem;
  color: #333;
  line-height: 1.8;
}

.contacto-info strong {
  color: #2b9348;
}





.contacto-imagen {
  flex: 1 1 400px;
  text-align: center;
}

.contacto-imagen img {
  width: 90%;
  max-width: 400px;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.contacto-imagen .caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #555;
}

/* ==== Animación Fade-in ==== */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==== Responsive ==== */
@media (max-width: 768px) {
  .contacto-info {
    text-align: center;
  }
  .contacto-botones {
    justify-content: center;
  }
}

/* ===== RESPONSIVE FIXES & HEADINGS ===== */
/* ------------------------------
   Inserta ESTE BLOQUE al final de style.css
   ------------------------------ */

/* 1) Fuentes: cuerpo + títulos */
/* (Tus Google Fonts ya están cargadas en el head; esto fuerza herencia) */
html, body {
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Si quieres H2/H3 con la misma fuente "de título" usa Fredoka One (la tienes cargada).
   Si prefieres que H2/H3 usen Raleway, reemplaza 'Fredoka One' por 'Raleway' abajo. */
h1, h2, h3 {
  font-family: sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.6rem;
  letter-spacing: 0.2px;
}

/* Si quieres específicamente sólo H2 y H3 iguales: */
/* h2, h3 { font-family: 'Fredoka One', 'Raleway', sans-serif !important; } */

/* 2) Tamaños de títulos fluidos (clamp = min / preferred / max) */
h1 { font-size: clamp(1.6rem, 2.6vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 2.0vw, 2.0rem); } /* títulos principales */
h3 { font-size: clamp(1.1rem, 1.6vw, 1.5rem); } /* subtítulos */

/* 3) Reparar elementos full-bleed 100vw que causan overflow */
/* Sobrescribimos selectores que tienen width:100vw en tu CSS actual */
#page-banner,
header,
.hero-section,
.site-footer,
.full-bleed {
  width: 100% !important;
  left: 0 !important;
  margin-left: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 4) Contenedor base adaptativo: mantiene márgenes seguros en móvil */
.container {
  width: 94%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* 5) Imágenes y multimedia responsiva */
img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 6) Navegación y enlaces: evitar que se salgan en móvil */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* 7) Cards / Grid: ajustar columnas según ancho */
.cards-container,
.blog-cards,
.bref-stats,
.gallery-tabs .cards-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
}

/* puntos de quiebre (breakpoints) */
@media (min-width: 600px) {
  .cards-container,
  .blog-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-section { padding: 2rem 0; }
}

@media (min-width: 992px) {
  .cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bref-mapa { display: block; }
}

/* Evitar que contenidos con texto largo rompan layout */
p, li {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 8) Arreglo rápido global para overflow horizontal (parche) */
/* Nota: overflow-x: hidden puede ocultar contenido legítimo; es un parche inicial. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 9) Ajustes específicos que suelen fallar en móvil */
.banner-logo, .hero-content, .banner-content {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* 10) Botones y CTA: tamaño móvil */
.btn, .nav-cta, .btn-sobre {
  padding: 0.6rem 1rem;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
}

/* 11) Mejor legibilidad: aumentar interlineado en móvil */
@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.55; }
  h2 { margin-top: .6rem; margin-bottom: .4rem; }
  .container { width: 96%; padding-left: .8rem; padding-right: .8rem; }
}

/* 12) Opcional: marca de debugging (borra cuando confirmes que todo funciona) */
/* .debug-overflow { outline: 2px dashed rgba(255,0,0,0.2); } */
/* Ajustes rápidos para pantallas pequeñas */
@media (max-width: 600px) {
  body {
    padding-top: 4rem; /* deja un poco más de espacio bajo el header fijo */
  }

  .nav-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .hero-section,
  #page-banner {
    height: auto;
  }

  .banner-content {
    flex-direction: column;
    text-align: center;
  }

  .banner-logo {
    margin: 0 0 1rem 0;
    width: 140px;
  }
}
/* Ajustes generales para celular */
@media (max-width: 600px) {
  html {
    font-size: 14px; /* baja un poco todo el tamaño de letra */
  }

  body {
    padding-top: 4.5rem; /* deja espacio bajo el header fijo */
  }

  section {
    padding: 1.5rem 0;
  }

  p {
    font-size: 0.95rem;
  }

  /* Tarjetas grandes (blog / logros / etc.) más compactas */
  .post-featured,
  .comment-card,
  .aside-card {
    padding: 0.8rem;
  }

  .post-card-body h4 {
    font-size: 0.9rem;
  }

  .post-card-body p {
    font-size: 0.8rem;
  }
}
/* Más Bibliorefris visibles por pantalla en móvil */
@media (max-width: 600px) {
  /* Galería principal de Bibliorefris */
  #galeria .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  /* Blog Bibliorefri (tarjetas de historias) */
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .gallery-item,
  .post-card {
    border-radius: 10px;
  }
}
/* === Fuerza de fuentes en títulos (mismo estilo en toda la web) === */
h1,
h2,
h3,
.bref-head h2,
.contact-info h2 {
  font-family: 'sans-serif';
  font-weight: 700 !important;
}

/* Tamaños más moderados en móvil para títulos largos */
@media (max-width: 600px) {
  h1,
  h2 {
    font-size: 1.6rem !important;
    text-align: center;
  }
}
/* Todos los títulos usan la misma letra que el body */
h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
}

/* Tamaños y estilo de títulos (como “Nuestra Misión”) */
h1 {
  font-size: 2.2rem;
  font-weight: 700;
}

h2 {
  font-size: 1.9rem;
  font-weight: 700;
}

h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

@media (max-width: 600px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.3rem; }
}
/* ===== GALERÍA BIBLIOREFRIS: SOLO CAMBIO EN CELULAR ===== */
@media (max-width: 768px) {

  /* 1. Bloqueamos el carrusel horizontal del JS */
  .gallery-viewport {
    max-width: 100%;
    overflow-x: hidden;
  }

  .gallery-wrapper {
    transform: none !important;   /* anula translateX del carrusel */
  }

  .gallery-page {
    flex: 0 0 auto;
    width: 100%;
    display: block;
  }

  /* 2. Cuadrícula de tarjetas dentro de cada pestaña */
  .gallery-panel .cards-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 por fila; cambia a 3 si quieres */
    gap: 0.75rem;
  }

  .gallery-panel .card {
    width: 100% !important;
    margin: 0;
    flex: 0 0 auto;
  }

  .gallery-panel .card img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* 3. Ocultamos los puntitos de paginación que ya no se usan */
  .gallery-indicators {
    display: none;
  }
}
/* === REBRANDING BLOG BIBLIOREFRI === */

/* Contenedor principal del blog */
.blog {
  background-color: #fdfef3; /* Mismo tono crema suave de tu fondo */
  padding: 4rem 1rem;
  text-align: center;
}

/* Título de la sección más elegante */
.blog h2 {
  font-family: 'Times New Roman', serif; /* O la fuente serif que prefieras */
  color: #e9a803; /* Tu color dorado/amarillo */
  font-size: 3rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Subtítulo descriptivo */
.blog > p {
  font-family: sans-serif;
  color: #555;
  font-size: 1.1rem;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Cuadrícula de tarjetas */
.blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Diseño de la TARJETA individual */
.blog-card {
  background: #fff;
  border-radius: 20px; /* Bordes más redondeados y modernos */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Sombra muy suave y elegante */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.03); /* Borde sutil */
}

/* Efecto al pasar el mouse (solo PC) */
.blog-card:hover {
  transform: translateY(-8px); /* Se levanta */
  box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* Sombra más fuerte */
}

/* Contenedor de la imagen dentro de la tarjeta */
.blog-card-img-wrapper {
  width: 100%;
  height: 220px; /* Altura fija para uniformidad */
  overflow: hidden;
  position: relative;
}

.blog-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* La imagen llena el espacio sin deformarse */
  transition: transform 0.5s ease;
}

/* Zoom suave en la imagen al hacer hover */
.blog-card:hover img {
  transform: scale(1.05);
}

/* Cuerpo de texto de la tarjeta */
.blog-card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Etiqueta de categoría (opcional, decorativo) */
.blog-tag {
  display: inline-block;
  background-color: rgba(12, 161, 119, 0.1); /* Tu verde primario muy suave */
  color: #0ca177; /* Tu verde primario */
  font-size: 0.75rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 1rem;
  align-self: flex-start;
  text-transform: uppercase;
}

/* Título del artículo */
.blog-card h3 {
  font-family: sans-serif;
  font-size: 1.3rem;
  color: #2a0153; /* Tu morado oscuro */
  margin-bottom: 0.8rem;
  line-height: 1.3;
  font-weight: 700;
}

/* Texto descriptivo */
.blog-card p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1; /* Empuja el botón hacia abajo */
}

/* Botón "Leer más" */
.blog-read-more {
  text-decoration: none;
  color: #0ca177; /* Verde */
  font-weight: bold;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}

.blog-read-more:hover {
  color: #087f5d; /* Verde más oscuro */
}

.blog-read-more::after {
  content: '→'; /* Flechita */
  transition: transform 0.2s;
}

.blog-read-more:hover::after {
  transform: translateX(4px);
}

/* RESPONSIVE (Celular) */
@media (max-width: 768px) {
  .blog h2 {
    font-size: 2.2rem; /* Título más pequeño en móvil */
  }
  
  .blog-cards {
    grid-template-columns: 1fr; /* Una sola columna */
    padding: 0; /* Aprovechar todo el ancho */
  }
  
  .blog-card {
    margin: 0 10px; /* Margen lateral pequeño */
  }
}
/* === OPTIMIZACIÓN DE MENÚ PARA CELULAR (FIX HEADER) === */

/* Esta regla detecta pantallas menores a 768px (celulares y tablets verticales) */
@media (max-width: 768px) {

  /* 1. Hacemos el encabezado más delgado y compacto */
  header {
    padding: 0.4rem 0 !important; /* Reduce el relleno vertical */
  }

  /* 2. Organizar el contenido en una fila horizontal (flex-row) */
  .nav-container {
    display: flex !important;
    flex-direction: row !important; /* Forzar fila horizontal */
    align-items: center !important;
    justify-content: space-between !important; /* Espacio entre elementos */
    padding: 0 1rem !important;
  }

  /* 3. Ajustar la lista de enlaces (PRINCIPAL) */
  .nav-links {
    gap: 1rem !important; /* Menos espacio entre links */
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-links li {
    margin: 0 !important;
  }

  /* Texto de los enlaces más pequeño */
  .nav-links a {
    font-size: 0.9rem !important;
    padding: 0 !important;
  }

  /* 4. Botón "Contáctanos" más compacto */
  .nav-cta {
    font-size: 0.85rem !important; /* Letra más pequeña */
    padding: 0.4rem 0.8rem !important; /* Botón menos "gordo" */
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
  }

  /* 5. Ajuste opcional para el logo si lo tuvieras en el header */
  /* Si tienes logo en el header, descomenta esto:
  .header-logo img {
      height: 30px !important;
      width: auto !important;
  } 
  */

  /* 6. Ajuste del cuerpo para que no quede oculto bajo el header */
  body {
    padding-top: 60px !important; /* Ajusta este valor si es necesario */
  }
}