/* Zona de tres banners bajo el contenido */
.banner-trio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  padding: 0 1rem;
  margin: 1rem auto 0 auto;
}
.banner-trio .banner-square { width: 300px; height: 250px; display: flex; align-items: center; justify-content: center; }
.banner-trio .banner-wide { width: 970px; height: 90px; display: flex; align-items: center; justify-content: center; text-align: center; }
/* Centrado robusto del contenido inyectado (desktop) */
.banner-trio .banner-wide > ins,
.banner-trio .banner-wide > iframe,
.banner-trio .banner-wide > div {
  display: block !important; 
  margin-left: auto !important; 
  margin-right: auto !important;
}

/* Generic wide banner block (outside .banner-trio) */
.banner-wide {
  display: flex;
  align-items: center;
  justify-content: center; 
  width: min(970px, 100%);
  min-height: 90px; /* ensure visible area even before script injects */
  margin: 0.75rem auto; /* small vertical spacing */
  text-align: center;
}
/* Centrado global para AdSense, sin necesidad de wrapper */

.banner-wide > * {
  margin: 0 auto !important;
  display: block !important;
  max-width: 100% !important;
}

@media (max-width: 1366px) {
  .banner-wide { width: min(728px, 100%); }
}

@media (max-width: 1366px) {
  .banner-trio .banner-wide { width: 728px; height: 90px; }
}

@media (max-width: 1024px) {
  .banner-trio { flex-wrap: wrap; }
  .banner-trio .banner-wide { order: 2; width: 100%; max-width: 728px; }
  .banner-trio .banner-square { order: 1; }
  /* Ocultar banner ancho de escritorio en móvil/tablet para no duplicar zoneId */
  .banner-trio .banner-wide { display: none; }

  /* EXCEPCIÓN: en la página de tutorial, forzar que el banner ancho SI se muestre */
  .banner-trio.tutorial-banner .banner-wide {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 728px;
    margin: 0 auto;
  }
}

/* Banner móvil debajo de videos sugeridos */
.mobile-video-banner { display: none; }
@media (max-width: 1024px) {
  .mobile-video-banner {
    display: block;
    width: 100%;
    margin: 0.75rem auto 1rem auto;
    padding: 0 12px;
    box-sizing: border-box;
    text-align: center;
  }
  .mobile-video-banner .banner-wide {
    width: 100%;
    max-width: 728px; /* fallback para tablets */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Asegurar centrado del contenido inyectado */
  .mobile-video-banner .banner-wide > * { margin: 0 auto !important; display: block; }
}

/* Mobile-only wide banner for blog posts */
.mobile-blog-banner { display: none; }
@media (max-width: 992px) {
  .mobile-blog-banner {
    display: block;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    text-align: center;
  }
  .mobile-blog-banner .banner-wide {
    width: 100%;
    max-width: 728px; /* tablet fallback */
    margin: 0.75rem auto 0.75rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mobile-blog-banner .banner-wide > * {
    margin: 0 auto !important;
    max-width: 100% !important;
    display: block !important;
  }
}

/* Ajuste fino para 1920x1080 y superiores: eliminar hueco derecho */
@media (min-width: 1920px) {
  .page-wrapper { max-width: 100vw !important; width: 100%; padding-left: 2rem !important; padding-right: 2rem !important; margin-left: 0; margin-right: 0; }
  .page-wrapper.three-col { grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 1rem; }
  .col-right { justify-content: center; }
  .sidebar-area, .blog-sidebar { width: 100%; max-width: 100%; }
  /* Tutorial: que el bloque del video + banners ocupe todo el ancho disponible */
  .video-with-side-banners { grid-template-columns: 300px minmax(0, 1240px) 300px; max-width: 100vw; width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
}
/* === THE ELEGANT HERO DESIGN v1.0 - GURU'S FINAL & TRUEST VISION === */

/* --- 1. Variables Globales y Fundamentos --- */
:root {
  --color-background: #FFFFFF;
  --color-surface: #F8F9FA;
  --color-text-primary: #212529;
  --color-text-secondary: #444950;
  --color-accent: #D90429;
  --color-accent-hover: #EF233C;
  --color-border: #E9ECEF;
  --font-primary: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --header-height: 80px;
  --border-radius: 12px;
  --font-size-title: 2rem;
  --font-size-card-title: 1.25rem;
  --font-size-secondary: 1.13rem;
  --sidebar-card-title-size: 1.05rem;
  --sidebar-card-excerpt-size: 0.95rem;
} 
 
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 100%; }
body {
  font-family: var(--font-primary);
  background-color: var(--color-background); 
  color: var(--color-text-primary);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  max-width: 100vw;
  overflow-x: hidden;
}
main { flex-grow: 1; }

/* --- 2. Header y Navegación (Sin cambios) --- */
header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  height: var(--header-height);
  padding: 0 5%;
  display: flex; justify-content: space-between; align-items: center;
  background-color: #111827; /* Azul oscuro igual que el footer */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo-img { height: 45px; }
nav { display: flex; gap: 2rem; position: relative; }
nav a { font-size: 0.95rem; font-weight: 500; color: #E5E7EB; text-decoration: none; position: relative; padding: 0.5rem 0; transition: color 0.2s ease; }
nav a:hover, nav a.active { color: #FFFFFF; }
nav a.active { font-weight: 600; }
nav a.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--color-accent); border-radius: 2px; }
.hamburguesa { display: none; }

/* --- 3. ESTRUCTURA DE LA PÁGINA DE INICIO --- */
.home-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: var(--header-height);
  gap: 2.5rem;
}

#image-carousel {
  max-width: 10px;
  margin: 2rem auto 0 auto;
}
.hero-content-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* alinear el hero al borde izquierdo de la columna */
  justify-content: center;
  text-align: left;
  padding: 0.75rem 0 0.25rem 0;
  min-height: auto;
  margin-top: 1rem;
}

.sidebar-area {
  position: static;
  width: 100%;
}
.hero-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem; /* menos espacio entre texto e imagen */
  margin-top: 2rem;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin-left: 0;    /* alinear a la izquierda de la columna */
  margin-right: auto;
  position: relative; /* allow absolute children like .banner-hero */
}
.hero-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 260px;
  max-width: 400px;
}
.hero-info h1,
.hero-content-section h1 {
  margin-bottom: 5px;
}

.home-buttons {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
   
}
@media (min-width: 700px) {
  .home-buttons {
    flex-direction: row;
    gap: 1.5rem;
  }
}
.blog-sidebar {
  background-color: #FFF;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  
  /*box-shadow: 0 10px 25px rgba(0,0,0,0.08);*/
  width: 100%;
  max-width: 370px; /* O el ancho que prefieras */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.blog-sidebar .posts-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 0;
  margin: 0;
  list-style: none;
  
}
.blog-sidebar .post-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  
  padding: 0.7rem 0.9rem;         /* Menos padding */
  text-decoration: none;
  color: var(--color-text-primary);
  transition: box-shadow 0.2s, border-color 0.2s;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: 0.98rem;             /* Más pequeño */
  cursor: pointer;
  height: 140px;                  /* Más bajo */
  min-height: 0;
  overflow: hidden;
}
.blog-sidebar .post-card h2   {
  font-size: var(--sidebar-card-title-size);
  color: var(--color-accent);
  font-weight: 800;
  margin-bottom: 0.3rem;
  margin-top: 0;
  line-height: 1.18;
  word-break: break-word;
  transition: color 0.2s;
}
.blog-sidebar .post-card:hover {
  box-shadow: 0 6px 18px rgba(217,4,41,0.10);
  border-color: var(--color-accent);
}
.blog-sidebar .post-card:hover h2 {
  color: var(--color-accent-hover);
}
.blog-sidebar .post-excerpt {
  color: var(--color-text-secondary);
  font-size: var(--sidebar-card-excerpt-size);
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2; /* standard for compatibility */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* --- 4. ESTILOS DEL CARRUSEL SUTIL --- */
.splide { visibility: hidden; }
.splide.is-initialized { visibility: visible; }
.splide__slide {
  opacity: 0.5;
  transform: scale(0.9); /* Más pequeño por defecto */
  transition: all 0.4s ease;
}
.splide__slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 10;
}
.splide__slide img {
  width: 100%; height: auto; display: block;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.splide__arrow { background: rgba(0,0,0,0.3); }
.splide__arrow svg { fill: #FFF; }
.splide__pagination { bottom: -2rem; }
.splide__pagination__page.is-active { background: var(--color-accent); transform: scale(1.4); }


/* --- 5. Estilos del Hero Principal --- */
.hero-content-section h1 {
  font-size: 2.2rem; /* Más pequeño */
  font-weight: 800;
  margin-bottom: 0.5rem;
}
.hero-content-section .subtitle {
  white-space: normal; /* permitir salto de línea para no empujar la imagen */
  font-size: 1.5rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.2rem;
}
.hero-content-section .home-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 1.5rem;
  width: 100%;
}
.hero-content-section .hero-image-bottom img {
  max-width: 820px; /* aumentar captura en desktop */
  width: 100%;
  margin-left: 0; /* sin empuje lateral para mejor centrado */
}
/* Dar espacio flexible a la imagen en el hero */
.hero-image-bottom {
  flex: 1 1 0;
  min-width: 0; /* permitir que en 1280/1366 no fuerce salto de línea */
}

/* Banner dentro del hero */
.banner-hero {
  position: static; /* was absolute */
  width: 300px; /* base width for common formats */
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  order: -1;            /* Mover al lado izquierdo */
  margin-right: 2rem;   /* Separación del texto */
}

/* Asegurar que el contenido inyectado no se desborde */
.banner-hero iframe,
.banner-hero ins,
.banner-hero div {
  max-width: 100% !important;
}

/* Evitar solape con la imagen si el banner está visible */
@media (min-width: 993px) {
  .hero-row { gap: 3rem; }
}

/* Ocultar banner en tablets y móviles */
@media (max-width: 992px) {
  .banner-hero { display: none; }
}

/* ... Estilos generales de otras páginas y componentes ... */
.page-wrapper { 
  max-width: 1366px; 
  margin: 0 auto; 
  padding: clamp(2rem, 5vw, 4rem) 1.5vw; /* menos padding lateral para acercar columnas */
  padding-top: calc(var(--header-height) + 2.5rem); 
 }

/* Layout 2 columnas: contenido + banner derecho (donaciones) */
.page-wrapper.two-col-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem;
  align-items: start;
}
.page-wrapper.two-col-right .col-center { min-width: 0; }
.page-wrapper.two-col-right .col-right { display: flex; justify-content: flex-start; }
.page-wrapper.two-col-right .banner-alto .banner { width: 300px; height: 250px; display: flex; align-items: center; justify-content: center; }

/* En >=1440px mantener simetría de márgenes y aire */
@media (min-width: 1440px) {
  .page-wrapper.two-col-right { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* En móviles/tablets apilar a 1 columna y ocultar lateral */
@media (max-width: 992px) {
  .page-wrapper.two-col-right { grid-template-columns: 1fr; }
  .page-wrapper.two-col-right .col-right { display: none; }
}

 /* Layout 3 columnas: 25% / 50% / 25% */
 .page-wrapper.three-col {
  display: grid;
  gap: 0.75rem; /* da más ancho al centro en 1280-1366 */
  align-items: start;
  /* columnas más cercanas: izquierda aún más estrecha, centro más ancho */
  grid-template-columns: 160px minmax(0, 1fr) 300px; /* más ancho para la captura */
  padding-left: 0; /* llevar banner al extremo izquierdo */
}
 .col-left, .col-center, .col-right { min-width: 0; }
 .col-left { display: flex; justify-content: flex-end; } /* acercar banner al centro */
  .col-center { width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; }
  .col-right { display: flex; justify-content: flex-start; }
 
  /* En pantallas muy anchas, dar más aire al centro y limitar extremos */
  @media (min-width: 1440px) {
  .page-wrapper { max-width: 100vw; width: 100%; padding-left: 2rem; padding-right: 2rem; }
  .page-wrapper.three-col {
    /* columnas laterales simétricas para centrar el contenido */
    grid-template-columns: 300px minmax(0, 1fr) 300px;
  }
  /* centrar la barra lateral derecha en lugar de empujarla al borde */
  .col-right { justify-content: center; }
  .sidebar-area, .blog-sidebar { width: 100%; max-width: 100%; }
}
@media (max-width: 780px) {
  .page-wrapper.three-col {
    margin-top: 0;
  }
}
/* Hacer que la galería de video ocupe todo el ancho del grid en desktop/tablet para alinear columnas */
@media (min-width: 1024px) {
  .video-gallery-section { grid-column: 1 / -1; margin-bottom: 1.25rem; }
}

  /* Ajuste específico para portátiles 1366x768 y 1280x720 */
@media (min-width: 1200px) and (max-width: 1366px) {
  .page-wrapper.three-col {
    grid-template-columns: 130px minmax(0, 1fr) 270px; /* dar más espacio al centro sin comprimir demasiado */
    gap: 0.6rem;
  }
  .col-center { display: block; }
  .hero-row { max-width: 100%; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: nowrap; }
  .hero-info { align-items: flex-start; text-align: left; flex: 0 0 420px; min-width: 0; }
  .hero-image-bottom { min-width: 0; flex: 0 0 56%; display: flex; justify-content: center; align-items: center; }
  .hero-content-section .hero-image-bottom img {
    max-width: 480px; /* compacto para 1366/1280 */
    width: 100%;
    height: auto;
    margin-left: 0; margin-right: 0;
    display: block;
    object-fit: contain;
  }
  /* Sin desplazamiento manual; la galería ya alinea al ocupar todas las columnas */
  .col-left, .col-right { padding-top: 0; }
  /* Bajar elementos concretos en columnas laterales */
  .col-left .banner-alto { margin-top: 50px; }
  .col-right .blog-sidebar { margin-top: 50px; }
}

/* Desktop: usar todo el ancho disponible del centro y alinear a la izquierda en posts con 3 columnas */
@media (min-width: 1024px) {
  .page-wrapper.three-col .content-panel.info {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    
    padding-left: 0;
    padding-right: 0;
  }
  .page-wrapper.three-col .content-panel.info p,
  .page-wrapper.three-col .content-panel.info ul,
  .page-wrapper.three-col .content-panel.info ol {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Generic side tall banner in three-column layouts */
.col-left .banner-alto,
.col-right .banner-alto {
  display: flex;
  align-items: center;
  justify-content: center;
}
.col-left .banner-alto .banner,
.col-right .banner-alto .banner {
  width: 300px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ajuste para anchos medios tipo 1024–1199 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .page-wrapper.three-col {
    grid-template-columns: 110px minmax(0, 1fr) 240px; /* mantener equilibrio */
    gap: 0.6rem;
  }
  .hero-row { max-width: 100%; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: nowrap; }
  .hero-info { align-items: flex-start; text-align: left; flex: 0 0 360px; min-width: 0; }
  .hero-image-bottom { min-width: 0; flex: 0 0 54%; display: flex; justify-content: center; align-items: center; }
  .hero-content-section .hero-image-bottom img {
    max-width: 420px; /* compacto para 1199/1024 */
    width: 100%;
    height: auto;
    margin-left: 0; margin-right: 0;
    display: block;
    object-fit: contain;
    margin-top: 1rem;
  }
  /* Sin desplazamiento manual; la galería ya alinea al ocupar todas las columnas */
  .col-left, .col-right { padding-top: 0; }
  /* Bajar elementos concretos en columnas laterales */
  .col-left .banner-alto { margin-top: 40px; }
  .col-right .blog-sidebar { margin-top: 20px; }
}

 /* Ajustes finos de anchos internos */
 .banner-trio {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 1rem auto;
  padding: 0 1rem;
  width: 100%;
 }

/* Reducir espacio específicamente en la página de tutorial */
.banner-trio.tutorial-banner { margin-top: 0; margin-bottom: 0; }
#suggested-videos-carousel { margin-bottom: 0; padding-bottom: 0; }
#suggested-videos-carousel .video-container { margin: 0 !important; }

/* Reducir espacio específicamente en la página de info */
.info-page .banner-trio.info-banner {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-top: 0;
}
.info-page .video-with-side-banners {
  margin-top: 0.5rem; /* antes 1.5rem, acercar contenido al banner */
}

/* Mobile: asegurar visibilidad y buen escalado del banner en tutorial */
@media (max-width: 480px) {
  .banner-trio.tutorial-banner { margin-top: 0; margin-bottom: 0; padding: 0 8px; }
  .banner-trio.tutorial-banner .banner-wide { width: 100%; max-width: 100%; }
  .banner-trio.tutorial-banner .banner-wide > * { max-width: 100% !important; height: auto; }
}
 .banner-ancho .banner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 100%;
 }
 .banner-ancho ins,
 .banner-ancho iframe,
 .banner-ancho div {
  max-width: 100% !important;
 }

 /* Quitar posicionamiento absoluto previo de la sidebar para que viva en su columna */
 .sidebar-area {
  position: static;
  top: auto; right: auto; width: 100%;
 }
 .blog-sidebar { max-width: 100%; }

/* Responsive: en <= 992px, una sola columna */
  @media (max-width: 992px) {
  .page-wrapper.three-col { grid-template-columns: 1fr; }
  .col-left { order: 3; display: none; } /* ocultar banner alto en móvil */
  .col-center { order: 1; margin-left: 0; margin-right: 0; } /* central limpio en móvil */
  .col-right { order: 2; display: none; } /* ocultar barra de blog en móvil */
  .blog-sidebar { display: none !important; }
  }
.page-wrapper h1 {
  text-align: center;
}
.btn { display: inline-block; padding: 0.7rem 1.5rem; border-radius: var(--border-radius); font-size: 1rem; font-weight: 600; text-decoration: none !important; transition: all 0.2s ease; border: 1px solid transparent; }
.btn-primary {

  background-color: var(--color-accent);
  color: #FFF;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.45);
  
  padding: 0.5rem 2.5rem; 
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  display: inline-block;
} 
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(217, 4, 41, 0.3); background-color: var(--color-accent-hover); }
.btn-secondary { color: var(--color-text-primary); border-color: var(--color-border); background-color: #FFF; box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.25); }
.btn-secondary:hover {  transform: translateY(-2px); background-color: var(--color-surface); border-color: var(--color-accent); }
.footer {
  text-align: center;
  padding: 1.2rem 5%; /* Antes: 3rem 5% */
  background-color: #111827; /* Azul oscuro */
  color: #9CA3AF;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.15rem; /* Más juntos */
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--color-accent); /* Rojo */
  margin: 0 1.2rem;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #b30000; /* o el rojo que prefieras */
}

.footer-links img.footer-icon {
  width: 38px;
  height: 38px;
  margin: 0; /* Sin margen lateral */
  vertical-align: middle;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
  transition: transform 0.2s;
}

.footer .text-center {
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.download-note {
  color: var(--color-text-secondary);
  font-size: 1.15rem;
  text-align: center;
  margin-top: 1.5rem;
  font-weight: 500;
}

.volver-blog-link {
  display: inline-block;
  margin: 2.5rem 0 0 0;
  color: var(--color-accent); /* Rojo estándar */
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s;
}
.volver-blog-link:hover {
  text-decoration: underline;
  color: var(--color-accent-hover, #b8002e);
}

/* Carrusel manual */
.carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-gutter: stable;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;
}
.carousel-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.carousel-caption {
  padding: 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: #fff;
  line-height: 1.4;
}

.video-container {
  width: 100%;
  max-width: 820px;
  margin: 2.5rem auto 2rem auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Video con banners laterales (página tutorial) */
.video-with-side-banners {
  display: grid;
  grid-template-columns: 300px minmax(0, 820px) 300px;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem auto 0 auto;
  width: 100%;
  max-width: 1420px; /* 300 + 820 + 300 + gaps */
  box-sizing: border-box;
}
.video-with-side-banners .banner-alto { display: flex; align-items: center; justify-content: center; }
.video-with-side-banners .banner-alto .banner { width: 300px; height: 250px; display: flex; align-items: center; justify-content: center; }

/* Ajuste en pantallas grandes: permitir video más ancho si hay espacio */
@media (min-width: 1440px) {
  .video-with-side-banners { grid-template-columns: 300px minmax(0, 900px) 300px; max-width: 1520px; }
}

/* En <= 1200px ocultar banners laterales para no apretar el video */
@media (max-width: 1200px) {
  .video-with-side-banners { grid-template-columns: 1fr; max-width: 900px; }
  .video-with-side-banners .banner-alto { display: none; }
}

.tutorial-note {
  color: var(--color-text-secondary);
  font-size: 1.25rem;
  margin-top: 2.2rem;
  text-align: center;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

/* Donaciones */
.donaciones-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: 1.2rem;
}
.donaciones-intro {
  font-size: 1.18rem;
  color: var(--color-text-primary);
  /*text-align: left;*/
  margin-bottom: 2.2rem;
  line-height: 1.7;
}
.donaciones-destacado {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1.5rem;
  display: block;
  text-align: center;
}
.donaciones-subtitle {
  font-size: 1.35rem;
  color: var(--color-text-primary);
  margin-bottom: 1.2rem;
  font-weight: 800;
  text-align: center;
}
.donaciones-text {
  color: var(--color-text-secondary);
  font-size: 1.13rem;
  margin-bottom: 2rem;
  
  line-height: 1.7;
}

/* Donation buttons sizing and icon treatment (scoped to donations page) */
.donaciones-page .download-buttons {
  gap: 1.5rem; /* a bit more separation */
}
.donaciones-page .download-buttons .btn {
  min-width: 140px;            /* slightly narrower */
  height: 56px;                /* consistent height */
  padding: 0.65rem 1.2rem;     /* a bit less horizontal padding */
  border-radius: 14px;         /* same rounded style */
  display: inline-flex;        /* center icon nicely */
  align-items: center;
  justify-content: center;
}
.donaciones-page .download-buttons .btn img { 
  height: 35px;                /* slightly larger icons */
  width: auto;
  margin: 0;                   /* no extra gap for icon-only */
  display: inline-block;
}
.donation-buttons-container {
  display: flex; 
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}


.donaciones-list {
  margin: 1.5rem 0 2.2rem 0;
  padding-left: 0;
  list-style: none;
}
.donaciones-list li {
  margin-bottom: 1.1rem;
  font-size: 1.13rem;
  color: var(--color-text-secondary);
  text-align: center;
}


.donaciones-list {
  margin: 1.5rem 0 2.2rem 0;
  padding-left: 0;
  list-style: none;
}
.donaciones-list li {
  margin-bottom: 1.1rem;
  font-size: 1.13rem;
  color: var(--color-text-secondary);
  text-align: center;
  display: block;
}
.donaciones-list .icon {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.donaciones-list strong {
  display: inline-block;
  margin-bottom: 0.2rem;
}
.donaciones-list li span:last-child {
  display: block;
  margin-left: 2.2rem;
}
.thank-you-note {
  color: var(--color-text-secondary);
  font-size: 1.15rem;
  text-align: center;
  margin-top: 2.2rem;
  font-weight: 500;
}

/* Panel de contenido general */
.content-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 2.5rem 2.5rem 2rem 1.5rem;
  margin-bottom: 2.5rem;
}

/* Panel de la página info */
.content-panel.info {
  background: none;
  border: none;
  box-shadow: none;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 2.5rem auto;
  padding: 1.5rem 6vw 1.5rem 6vw;
  /* font-size: 1.22rem; */ /* Elimina o comenta esta línea */
  line-height: 1.6;
  color: var(--color-text-primary);
}

.content-panel.info h1,
.content-panel.info h2,
.content-panel.info h3  {
  color: var(--color-text-primary);
  margin-bottom: 1em;
  margin-top: 1.2em;
  font-weight: 800;
  text-align: center;      /* Centrado para títulos */
  line-height: 1.2;
  font-size: var(--font-size-title);
}


.content-panel.info h1 {
  font-size: 2.7rem;
  margin-top: 0.2em;
  padding-top: 1.5rem;
}

.content-panel.info h1:first-child {
  margin-top: calc(var(--header-height) + 2.5rem);
}
.content-panel.info p,
.content-panel.info ul,
.content-panel.info ol,
.content-panel.info li {
  font-size: var(--font-size-secondary); /* Uniformidad en todo el contenido */
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.content-panel.info p {
  font-size: var(--font-size-secondary);
  margin-bottom: 1em;
  text-align: justify;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 900px;      /* Uniforme para todos los párrafos */
  margin-left: auto;
  margin-right: auto;
}
.content-panel.info ul,
.content-panel.info ol {
  display: block;
  max-width: 900px;
  margin: 1em auto;
  padding-left: 2em;
  text-align: left;
}
.content-panel.info li {
  margin-bottom: 0.7em;
  line-height: 1.5;
}
.content-panel.info a {
  color: var(--color-accent);
  text-decoration: underline;
  transition: color 0.2s;
}
.content-panel.info a:hover {
  color: var(--color-accent-hover);
}

/* Reducir gran espacio superior del primer título en la página de info
   sin depender de clases adicionales en el HTML */
.video-with-side-banners .content-panel.info h1:first-child {
  margin-top: 0.5rem;  /* antes: calc(var(--header-height) + 2.5rem) */
  padding-top: 0;
}

/* Apoyos */
.supporters-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem 2.2rem;
  margin-top: 1.5rem;
}
.supporters-list span {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0.4em 1.1em;
  font-size: 1.08rem;
  color: var(--color-text-primary);
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: inline-block;
}
.supporters-divider {
  border: none;
  border-top: 1px solid var(--color-accent);
  margin: 1.5rem auto 1.5rem auto;
  width: 60%;
  max-width: 620px;
  opacity: 0.7;
}

/* Descarga */
.descarga-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 2.2rem auto;
  text-align: left;
  max-width: 620px; /* was 400px: allow more width to reduce wrapping */
}
.descarga-list li {
  color: var(--color-text-secondary);
  font-size: 1.06rem; 
  line-height: 1.55; /* improve readability and spacing */
  margin-bottom: 0.6rem;
  padding-left: 1.2em;
  position: relative;
}
.descarga-list li::before {
  content: "✓";
  color: var(--color-accent);
  position: absolute;
  left: 0;
  font-weight: bold;
}
.descarga-version-title {
  text-align: center;
  margin-bottom: 1.2rem;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text-primary);
}
.download-update-date {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin-bottom: 1rem; /* Espacio antes de la lista */
}

.download-buttons {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin: 2rem 0 1.2rem 0;
}


.download-buttons .btn img{
  height: 1.5em;
  width: auto;
  vertical-align: middle;
  margin-right: 0.6em;
  margin-bottom: 0.15em;
  display: inline-block;
}

.download-buttons .btn,
.download-buttons .btn * 
 {
  color: #FFF !important;
  fill: #FFF !important;
  
}


.intro-text {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-secondary);
  max-width: 700px;
  margin: 0 auto 2.5rem auto;
  line-height: 1.6;
  display: block;
}
.footer-pages a {
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s;
}
.footer-pages a:hover {
  color: var(--color-accent-hover);
} 
.footer-pages {
  margin-top: 0.2rem;
  margin-bottom: 1.2rem;
}

/* Centered red separator bar for sections */
.section-separator-red {
  border: none;
  height: 2px;
  background-color: var(--color-accent);
  width: 90%;
  max-width: 920px;
  margin: 2rem auto; /* more vertical spacing between blocks */
  display: block;
  border-radius: 2px;
}

/* Explicitly target <hr> to override UA styles */
hr.section-separator-red {
  border: 0 !important;
  border-top: 0 !important;
  color: transparent !important;
  background-color: var(--color-accent) !important;
  height: 2px !important;
} 

/* Short separator for small sub-blocks */
.section-separator-short {
  border: none;
  height: 2px;
  background-color: var(--color-accent); /* red */
  width: 320px; /* a bit wider */
  margin: 1.8rem auto 1.4rem auto; /* more space from buttons above */
  display: block;
  border-radius: 2px;
}

/* Win7 libraries mini-block */
.win7-libs-block {
  text-align: center;
  margin-top: 1.8rem; /* a bit more space from server buttons */
} 
.win7-libs-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0.4rem 0 0.2rem 0;
}

.win7-libs-desc {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin: 0.2rem 0 0.6rem 0;
}

/* Tarjetas para los posts del blog */

.posts-grid {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  align-items: center;
  justify-content: center;
}
.posts-row {
  display: flex;
  flex-direction: row;
  gap: 2.2rem;
  justify-content: center;
  width: 100%;
  margin-bottom: 0.5rem;
}
.post-item {
  flex: 1 1 0;
  max-width: 340px;
  min-width: 220px;
  display: flex;
  justify-content: center;
}

/* Ajuste específico para las tarjetas dentro de la página de blog */
.blog-list .posts-grid .post-card {
  height: 200px !important;        /* más baja y forzada */
  padding: 0.9rem 1rem !important; /* compacto y forzado */
}
.blog-list .posts-grid .post-card h2 {
  font-size: 1.12rem !important;   /* un poco más grande para legibilidad */
  line-height: 1.15 !important;
  margin-bottom: 0.4rem !important;
  hyphens: none;                 /* evitar guión automático */
  -webkit-hyphens: none;
  overflow-wrap: break-word;     /* romper sin guionar */
}
.blog-list .posts-grid .post-excerpt {
  font-size: 0.95rem !important;   /* un poco más grande */
  line-height: 1.35;               /* texto más compacto */
  -webkit-line-clamp: 3;           /* mantener 3 líneas */
  line-clamp: 3;
  hyphens: none;                   /* evitar guión automático */
  -webkit-hyphens: none;
  overflow-wrap: break-word;       /* romper sin guionar */
}
@media (max-width: 900px) {
  .posts-row {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  .posts-grid {
    gap: 1.5rem;
  }
  .post-item {
    max-width: 96vw;
    min-width: 0;
  }
}
@media (max-width: 600px) {
  .posts-row {
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
  }
  .post-item {
    max-width: 98vw;
    min-width: 0;
  }
}
.posts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin: 2.5rem 0;
  padding: 0;
  list-style: none;
}


.post-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 1.1rem 1.4rem; /* más compacto */
  width: 320px;
  height: 240px; /* más bajo y rectangular */
  margin: 0;
  gap: 1.2rem;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  text-decoration: none;
  box-sizing: border-box;
  color: var(--color-text-primary);
  cursor: pointer;
  overflow: hidden;
}

.post-card:hover {
  box-shadow: 0 8px 32px rgba(217,4,41,0.13);
  transform: translateY(-6px) scale(1.03);
  border-color: var(--color-accent);
}

.post-card h2 {
  color: var(--color-accent);
  transition: color 0.2s;
  font-size: 1.15rem; /* más pequeño */
  font-weight: 800;
  margin-bottom: 0.7rem;
  margin-top: 0;
  text-align: left;
  line-height: 1.18;
  word-break: break-word;
}

.post-card:hover h2 {
  color: var(--color-accent-hover);
}

.post-excerpt {
  color: var(--color-text-secondary);
  font-size: 0.95rem; /* más pequeño */
  margin-bottom: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 4; /* menos alto */
  -webkit-line-clamp: 4; /* Número de líneas visibles */
  -webkit-box-orient: vertical;
}
.banner-ancho {
  width: 100%;
  
  float: none !important; /* keep centered */
}

/* Utilidades */
html, body {
  width: 100%;
  max-width: none;
  overflow-x: hidden;
}

body, html, #root, .page-wrapper {
  width: 100% !important;
  max-width: none !important;
  float: none;
  /*overflow-x: hidden !important;*/
}
.sidebar-area {
  position: static !important;
  top: auto;
  right: auto;
  width: 100%;
}

 
@media (max-width: 900px) {
  .hero-row {
    flex-wrap: wrap;
    gap: 2rem;
  }
}
/* --- MEDIA QUERY CONSOLIDADA PARA TABLETS Y MÓVILES (HASTA 992px) --- */
@media (max-width: 992px) {
  
  /* --- HEADER Y NAVEGACIÓN --- */
  header {
    padding: 0 1rem; /* Reducir padding lateral */
    box-sizing: border-box;
  }
  .logo-img { height: 36px; }
  .hamburguesa { display: block; font-size: 30px; cursor: pointer; color: #FFFFFF; background: none; border: none; padding: 0; z-index: 1001; }
  nav {
    display: flex;
    position: fixed;
    top: var(--header-height);
    right: 0;
    height: auto;
    width: 220px;
    max-width: 70vw;
    background-color: #111827;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding: 1.2rem 0;
    border-bottom-left-radius: var(--border-radius);
    box-shadow: -5px 5px 15px rgba(0,0,0,0.2);
  }
  nav.active {
    transform: translateX(0);
  }
  nav a { font-size: 1rem; color: #E5E7EB; }

  /* --- LAYOUT DEL HERO --- */
  .hero-row { 
    flex-direction: column; 
    gap: 1.5rem; 
    align-items: center; 
    max-width: 100%; 
    margin-top: 1.5rem; 
    padding: 0 1rem; 
    box-sizing: border-box; 
  }
  .hero-info { 
    align-items: center; 
    text-align: center; 
    min-width: unset; 
    max-width: 100%; 
    width: 100%; 
    padding: 0;
  }
  .hero-info h1 { 
    font-size: 1.5rem; 
    word-break: break-word; 
    hyphens: auto; 
  }
  .hero-info .subtitle { 
    white-space: normal; 
    font-size: 1rem; 
    margin-bottom: 1.5rem; 
    word-break: break-word; 
    hyphens: auto; 
  }
  .hero-content-section .hero-image-bottom img { 
    margin-left: 0; 
    margin-top: 2rem; 
    max-width: 95%; 
    box-sizing: border-box; 
  }
  .home-buttons { 
    order: 1; /* Para que los botones se muestren después de la imagen si se reordena */
    flex-direction: column; 
    gap: 0.8rem; 
    width: 100%; 
    align-items: center; 
  }
  .home-buttons .btn { 
    width: 90%; 
    max-width: 250px; 
    padding: 0.6rem 1rem; 
    font-size: 1rem; 
    box-sizing: border-box; 
  }
  .hero-content-section {
    align-items: center;
    margin-top: 20px;
  }

  /* --- CARRUSEL TÁCTIL --- */
  .carousel { 
    padding: 1rem 0.5rem; 
    gap: 1rem; /* Unificado */
    width: 100%; 
    margin: 1rem auto 0.5rem auto; 
    overflow-x: auto; 
    
    /* Propiedades clave para el deslizamiento táctil */
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
    
    /* Ocultar scrollbars */
    scrollbar-width: none; 
    -ms-overflow-style: none; 
  }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel-item { 
    flex: 0 0 220px; /* Tamaño unificado */
    width: 220px;
    height: 220px;
    scroll-snap-align: center; 
  }
  
  /* --- OTROS AJUSTES RESPONSIVE --- */
  .page-wrapper {
    padding: 2.2rem 1rem 1.5rem 1rem; /* Padding simplificado */
    max-width: 100vw;
  }
  .content-panel { padding: 1.2rem; } /* Padding uniforme */
  .footer-links { flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } /* Más espaciado */
  .footer-links a { margin: 0 0.5rem; }
  .footer-links img.footer-icon { width: 32px; height: 32px; }
  .footer-pages { font-size: 1rem; }
  
  .video-grid {
      flex-direction: column;
      gap: 1.2rem;
      align-items: center;
  }
  .video-thumbnail {
      width: 90%;
      padding-bottom: 50.625%;
  }
  .video-container { max-width: 90%; margin: 1.5rem auto; border-radius: 10px; }
  .tutorial-note { font-size: 1.1rem; padding: 0 1rem; }

  .donaciones-list li { font-size: 1rem; }
  .donaciones-list .icon { font-size: 1.3rem; }
  .donaciones-list li span:last-child { margin-left: 1.8rem; }
  .supporters-list { gap: 0.8rem 1.5rem; }
  .supporters-list span { font-size: 1rem; padding: 0.3em 0.8em; }
  .descarga-list { max-width: 95%; padding-left: 1em; }
  .descarga-list li { font-size: 1rem; padding-left: 1.1em; }
  .descarga-list li::before { left: -0.1em; }
  .download-buttons { flex-direction: column; gap: 0.8rem; width: 100%; align-items: center; }
  
}
.main-content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* AÑADIDO: Ocupa todo el ancho disponible */
  overflow-x: hidden; /* AÑADIDO: Previene desbordamientos internos */
}

/* MODIFICADO: Permitimos que el texto del subtítulo se divida en varias líneas */
.hero-info .subtitle,
.hero-content-section .subtitle {
  white-space: normal; /* MODIFICADO: De 'nowrap' a 'normal' */
  font-size: 2rem;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
  margin-top: 1rem;
}


/* --- Video Gallery Section (Hacerla Responsiva) --- */
.video-gallery-section {


  padding: 1.5rem 1rem;
  width: 100%;
  
  max-width: 1200px; 
  margin: 2rem auto; 
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  box-sizing: border-box; /* AÑADIDO: Para que el padding no sume al ancho */
}


  




.video-grid {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-gutter: stable;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;
}
.video-grid::-webkit-scrollbar { display: none; }
.video-thumbnail {
  position: relative;
  cursor: pointer;
  flex: 1 1 300px; /* Base flexible para que se ajuste */
  max-width: 45%; /* Máximo 2 por fila */
  aspect-ratio: 16 / 9; /* Proporción de video moderna */
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

@media (max-width: 700px) {
  .hero-row {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    max-width: 100%;
  }
   .hero-info h1 {
    font-size: 1.8rem; /* Ajuste fino si es necesario */
  }
  .hero-info {
    align-items: center;
    text-align: center;
  }
  .hero-info .subtitle {
    white-space: normal;
    font-size: 1.1rem;
  }
  .hero-content-section .hero-image-bottom img {
    margin-left: 0;
    margin-top: 1rem;
    max-width: 95%;
  }
    
}


/* Nueva sección para la lista de blogs */
.blog-list h1 {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.7rem;
  margin-top: 0;
  color: var(--color-text-primary);
}

.blog-list .blog-intro {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 1.13rem;
  max-width: 700px;
  margin: 0 auto 2.5rem auto;
  line-height: 1.6;
  width: 100%;
  display: block;
}

/* Títulos principales */
h1, h2, h3,
.page-wrapper h1,
.blog-list h1,
.content-panel.info h1,
.donaciones-title,
.donaciones-subtitle {
  font-size: var(--font-size-title);
  color: var(--color-text-primary);
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 0.7em;
  line-height: 1.18;
  word-break: break-word;
}

/* Textos secundarios y párrafos */
p,
.blog-list .blog-intro,
.content-panel.info p,
.post-excerpt,
.donaciones-intro,
.donaciones-text,
.thank-you-note,
.carousel-caption,
.supporters-list span,
.descarga-list li {
  font-size: var(--font-size-secondary);
  color: var(--color-text-secondary);
  margin-bottom: 1em;
  line-height: 1.6;
}

/* Títulos de donaciones centrados */
.donaciones-title,
.donaciones-subtitle {
  text-align: center;
  display: block;
}

/* Párrafos de donaciones centrados en pantalla pero alineados a la izquierda */
.donaciones-intro,
.donaciones-text {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: 520px;
  width: 100%;
  display: block;
  line-height: 1.6;
}
/* Al final del archivo */
.donaciones-section .donaciones-intro,
.donaciones-section .donaciones-text {
  text-align: left !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 520px !important;
  width: 100% !important;
  display: block;
  line-height: 1.6;
}
.content-panel.info img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 10px;
}
.image-grid, .image-stack {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.image-grid img, .image-stack img {
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 10px;
}


/* Imágenes agrupadas en cuadrícula 1:1 */
.image-grid, .image-stack {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.image-grid img, .image-stack img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  background: #f5f5f5;
  display: block;
}

/* Si tienes otros párrafos en donaciones, puedes añadirlos aquí */
.donaciones-section .donaciones-intro,
.donaciones-section .donaciones-text {
  text-align: left !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 520px !important;
  width: 100% !important;
  display: block;
  line-height: 1.6;
}

.content-panel.info img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 10px;
}
.image-grid, .image-stack {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.image-grid img, .image-stack img {
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/* Imágenes individuales (centradas y medianas) */
.content-panel.info > img.ampliable,
.content-panel.info > p > img.ampliable {
  display: block;
  margin: 1.5rem auto;
  max-width: 380px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  cursor: pointer;
}

/* Imágenes agrupadas en cuadrícula 1:1 */
.image-grid, .image-stack {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.image-grid img, .image-stack img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  background: #f5f5f5;
  display: block;
}
/* Imágenes individuales en posts */

/* Si tienes otros párrafos en donaciones, puedes añadirlos aquí */
.donaciones-section .donaciones-intro,
.donaciones-section .donaciones-text {
  text-align: left !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 520px !important;
  width: 100% !important;
  display: block;
  line-height: 1.6;
}
.img-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  /* Asegura que sea flex para centrar */
  flex-direction: column;
}

.img-modal[style*="display: flex"] {
  display: flex !important;
}

.img-modal-imgbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.img-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 2.2rem;
  color: #fff;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10001;
  padding: 0 12px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-modal-close:hover {
  background: #fff;
  color: #d90429;
}

.img-modal-imgbox img {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  background: #fff;
  display: block;
  margin: 0 auto;
}

#img-modal-caption {
  color: #fff;
  text-align: center;
  margin-top: 1.2rem;
  font-size: 1.15rem;
  max-width: 90vw;
  word-break: break-word;
}
/* Imágenes individuales en posts (centradas y pequeñas) */
.content-panel.info > img,
.content-panel.info > p > img,
.post-image-single {
  display: block;
  margin: 1.5rem auto;
  max-width: 180px;   /* Cambia este valor según el tamaño que desees */
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  cursor: pointer;
}
.img-sola img {
  max-width: 180px;
  width: 50%;
  display: block;
  margin: 1.5rem auto;
  border-radius: 10px;
  object-fit: contain;
  cursor: pointer;
}
/* Añadir al final de estilachos.css */

/* Estilos para la página de contacto */
.contact-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.contact-intro {
  margin-bottom: 0.7rem;
}

.contact-intro-secondary {
  margin-bottom: 2.2rem;
  font-weight: 400;
}

.social-links-container {
  display: flex;
  flex-wrap: wrap; /* Para que se ajuste en móviles */
  gap: 1.2rem;
  justify-content: center;
  margin-bottom: 2.2rem;
}

.social-link-btn img {
  width: 28px;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.support-panel {
  max-width: 450px;
  margin: 0 auto;
  text-align: center;
}

.support-panel h3 {
  font-size: 1.1rem;
  margin-bottom: 0.7rem;
}

.support-panel p {
  font-size: 0.98rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.2rem;
}

.support-panel .btn {
  width: 100%;
  display: block;
}

/* Estilos para la página de descarga */
.download-panel {
  max-width: 900px;
  margin: 0 auto;
}

.download-features-list {
  max-width: 400px;
  margin: 1.5rem auto;
  text-align: left;
  list-style: disc; /* Para que se vean los puntos de la lista */
  padding-left: 20px; /* Espacio para los puntos */
}

.download-features-list p {
  text-align: center;
  list-style: none;
  margin-left: -20px; /* Compensar el padding */
}

.download-features-list li {
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem; /* Espacio entre elementos */
}

#language-selector-container {
  display: flex;
  gap: 0.5rem;
}

.language-button {
  background-color: transparent;
  border: 1px solid #E5E7EB;
  color: #E5E7EB;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.language-button:hover {
  background-color: #E5E7EB;
  color: #111827;
}

.language-button.active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFF;
}

.language-container {
  position: relative;
}

.language-selector {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 40px;
  height: 26px;
}

.language-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
  flex-direction: column;
  z-index: 10;
}

/* Show dropdown when active */
.language-dropdown.active {
  display: flex;
} 

.language-option {
  width: 40px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  cursor: pointer;
  transition: all 0.2s ease;
}

.language-option:hover { 
  background-color: var(--color-surface);
}

#suggested-videos-carousel {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Smooth snap for better UX on touch devices */
}

/* Centrar videos en escritorios grandes (incluye 1920x1080) */
@media (min-width: 1600px) {
  #suggested-videos-carousel {
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  #suggested-videos-carousel {
    justify-content: center;
    overflow-x: visible;
    margin-left: auto;
    margin-right: auto;
  }
}

#suggested-videos-carousel::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}

#suggested-videos-carousel .video-container {
  flex: 0 0 300px !important; /* Fixed width for each video container, override with !important */
  width: 300px !important;
  height: 170px !important; /* Standard 16:9 aspect ratio for 300px width, override with !important */
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Add a subtle shadow */
  transition: transform 0.2s ease;
}

#suggested-videos-carousel .video-container:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

#suggested-videos-carousel .video-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block !important;
}

/* Para modificar el tamaño de la letra en el sidebar */
.sidebar-area .blog-sidebar .post-card h2 {
  font-size: var(--sidebar-card-title-size);
}

.sidebar-area .blog-sidebar .post-excerpt {
  font-size: var(--sidebar-card-excerpt-size);
  line-height: 1.5;
}

.download-aviso-style {
  color: #f00;
  font-size: 1.1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #f00;
  border-radius: 5px;
  background-color: #f1959544;
}

.code-container {
  overflow: auto;
  border: 1px solid var(--color-border);
  padding: 10px;
  margin: 10px 0;
  position: relative;
  border-radius: var(--border-radius);
}

.code-container button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 5px 10px;
  cursor: pointer;
  border-radius: var(--border-radius);
  color: var(--color-text-secondary);
}

.code-container button:hover {
  background-color: var(--color-accent);
  color: #FFF;
}

.code-container pre {
  margin: 0;
}

.content-panel.info li {
  list-style-position: inside;
  margin-left: 0;
  padding-left: 0;
}
pre code {
  font-family: Consolas, Monaco, 'Courier New', monospace;
  background-color: #f9f9f9;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: block;
  white-space: pre;
  overflow-x: auto;
  line-height: 1.5;
  font-size: 0.95rem;
  color: #333;
}
.xml-comment {
  color: #2d862d;  
  font-style: italic;
}



.video-grid {
  display: flex;
  justify-content: center;
  gap: 1.5rem; 
  max-width: 100%;
  margin: 1rem 0;
}

.video-thumbnail {
  position: relative;
  cursor: pointer;
  width: 48%; 
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  padding-bottom: 27%; /* 9/16 * 48% for aspect ratio */
  height: 0; /* To make padding-bottom work for aspect ratio */
}

.video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.video-thumbnail .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 15px rgba(0,0,0,0.7);
  pointer-events: none;
  transition: color 0.3s ease;
}

.video-thumbnail:hover .play-button {
  color: #FFF;
}

/* --- Video Modal --- */
.video-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
}

.video-modal.active {
  display: flex;
}

.video-modal .modal-content {
  position: relative;
  width: 80%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
}

.video-modal .modal-content iframe {
  width: 100%;
  height: 100%;
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
  color: #bbb;
  text-decoration: none;
}
.splide {
  visibility: hidden;
}

.splide.is-initialized {
  visibility: visible;
}

/* Ajuste para que nuestro contenido (<a>) llene el slide (<li>) */
.splide__slide {
  display: flex;
  justify-content: center;
  align-items: stretch; /* Asegura que el .carousel-item ocupe toda la altura */
}

/* --- Carousel Card Adjustments (CORREGIDO) --- */
.carousel-section {
  width: 100%;
  background-color: #111827;
  padding: 2rem 0;
  overflow: hidden;
  border-radius: 18px;
  
}
/*
.carousel-section {
   width: 100%;               
  background-color: #111827;  
  padding: 2rem 0;            
  overflow: hidden;

  background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  border-radius: 18px;
  
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top-color: var(--color-accent);
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.45);


    background-color: #111827;
    margin-bottom: 2rem;
    padding: 1rem 2rem;
    
}*/
.carousel-item {
  flex: 0 0 280px; /* Set a fixed width for each card */
  width: 280px;
  height: 280px;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.45);
  /*box-shadow: 0 4px 12px rgba(0,0,0,0.1);*/
  text-align: center;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.carousel-item img {
  width: 100%;
  height: 160px; /* Adjust height */
  object-fit: cover;
  display: block;

  height: 160px; /* Adjust height */
  object-fit: cover;
  display: block;
}
/* pantalla movil portrait*/
@media (max-width: 480px) {
   .hero-row .hero-image-bottom {
    order: 1; /* La imagen aparecerá primero */
  }

  .hero-row .hero-info {
    order: 2; 
    margin-bottom: 2.5rem;
  }
  .video-gallery-section {
   margin-top: 4.5rem;
    padding: 0 1rem ;
    
  }
  .video-grid {
    flex-direction: column;
    align-items: center; /* <-- La clave está aquí */
    gap: 1.5rem;
  }
  .video-thumbnail {
    max-width: 90%; /* Un ancho generoso pero no total */
    width: 100%;
    flex: 1 1 90%;
  }
 

  
}
 /* Pantalla tablet portrait*/
@media (max-width: 820px) and (min-width: 481px) { 
  .hero-content-section {
    max-width: 55%;
     width: 100%;
     margin-top: 0;
   }
  .hero-row .hero-image-bottom {
    order: 1; /* La imagen aparecerá primero */
  }

  .hero-row .hero-info {
    order: 2; 
    margin-bottom: 2.5rem;
  }
  .video-gallery-section {
   margin-top: 4.5rem;
    padding: 0 1rem ;
    
  }
  .video-grid {
    flex-direction: column;
    align-items: center; /* <-- La clave está aquí */
    gap: 1.5rem;
  }
  .video-thumbnail {
    max-width: 70%; /* Un ancho generoso pero no total */
    width: 100%;
    flex: 1 1 90%;
  }
  
}

@media (max-width: 1366px) and (min-width: 1280px)  {
 .sidebar-area {
    width: 280px;
    right: 1vw;
    font-size: small;
    background-color: #fff;
 }
  .blog-sidebar .post-card {
    height: 100px;
    padding: 0.4rem 0.7rem;
 }
 .blog-sidebar .posts-list {
    gap: 0.6rem;
 }
 .blog-sidebar .post-card h2 {
    font-size: 0.9rem;
 }
 .blog-sidebar .post-excerpt {
    font-size: 0.8rem;
 }
 .hero-content-section {
   max-width: 55%;
    width: 100%;
    margin-top: 0.5rem;
  }
  .hero-info h1 {
    font-size: 2rem; /* Further increased font size */
  }
  .hero-info .subtitle {
    font-size: 1.3rem; /* Further increased font size */
    margin-bottom: 1.8rem; /* Adjusted margin */
  }
   .home-buttons {
    display: flex;
    justify-content: flex-start; /* Alinea los botones al inicio (izquierda) */
    align-items: center;       /* Clave: Alinea verticalmente los botones en el centro */
    gap: 1.2rem;
    width: 100%;
  }

  /* 2. Estilos para cada botón */
  .home-buttons .btn {
    /* Eliminamos width y height fijos para que el tamaño sea flexible */
    padding: 0.8rem 1.5rem;   /* Padding equilibrado para el tamaño */
    font-size: 1.1rem;        /* Tamaño de fuente ajustado */
    font-weight: bold;
    text-align: center;
    border-radius: 10px;      /* Bordes redondeados */
    cursor: pointer;
    
    /* Clave: Evita que el texto se parta en dos líneas */
    white-space: nowrap; 
  }

  .carousel-section {
    max-width: 75%;
    margin: 0 auto;
    width: 100%;
    background-color: #111827;
    padding: 2rem 0;
    overflow: hidden;
  }
   .video-gallery-section{
    max-width: 55%;
    margin: 0 auto;
    width: 100%;
    background: #fff;
    padding: 2rem 0;
    overflow: hidden; 
  }
}
@media (min-width: 1920px){
  .carousel-section {
   max-width: 65% ;
    margin: 0 auto;
    width: 100%;
    max-height: 300px;
    height: 90%;
    background-color: #111827;
    padding: 2rem 0;
    overflow: hidden;
  }
  
  .carousel-section .splide__slide {
    height: 60%;
    width: 60%;
    max-width: 300px;
   
  }
  .video-gallery-section{
    max-width: 60%;
    margin: 0 auto;
    width: 100%;
    background: #fff;
    padding: 2rem 0;
    overflow: hidden; 
  }
}

/* === Overrides tardíos para asegurar que no quede espacio derecho en pantallas grandes === */
@media (min-width: 1440px) {
  .page-wrapper { max-width: 100%; width: 100%; padding-right: 0 !important; }
}
@media (min-width: 1920px) {
  .video-with-side-banners { max-width: 100%; padding-right: 0; grid-template-columns: 300px minmax(0, 1200px) 300px; }
}

/* Clipa cualquier desborde horizontal en escritorio grande (widgets flotantes, etc.) */
@media (min-width: 1440px) {
  html, body { overflow-x: hidden; }
}

/* Tarjeta de un contribuyente destacado */
.supporter-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 120px; /* ancho fijo para buen centrado en las filas */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.supporter-card:hover { transform: translateY(-2px); }
.supporter-card:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 12px;
}
.supporter-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center; 
  aspect-ratio: 1 / 1;
  display: block;
  border: 2px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin: 0 auto;
  cursor: pointer; /* indica interactividad (hover/focus) */
}
.supporter-name {
  display: block;
  text-align: center;
  color: var(--color-text-primary); /* negro del tema */
  font-weight: 600; /* mismo peso que .donaciones-destacado */
  font-size: 0.8rem; /* mismo tamaño que .donaciones-destacado */
  line-height: 1.2;
  margin-top: 0.4rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* clamp a una sola línea para ritmo del grid */
}
.supporter-avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden; 
  display: block;
}
.supporter-avatar-wrap .supporter-avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important; /* el wrap ya es circular */
  max-width: none !important;
}

/* Regla de seguridad: cualquier img dentro del grid será circular y pequeña */
.supporters-grid img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
}

/* Avatar como background: necesario si solo se ve el nombre */
.supporter-avatar-bg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  border: 2px solid var(--color-border); 
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin: 0 auto;
}

/* Avatar por inicial (para usuarios sin imagen) */
.supporter-initial-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #00B0FE, #0041AB);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.8rem;
  font-family: var(--font-primary);
  line-height: 1;
  border: 2px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin: 0 auto;
  user-select: none;
}

/* Lista de contribuidores: usar flex para centrar siempre la última fila */
.supporters-grid {
  display: flex;
  flex-wrap: wrap;
  --supporters-gap: 0.6rem;
  gap: var(--supporters-gap);
  justify-content: center;   /* centrar horizontalmente todas las filas */
  align-items: center;       /* centrar cada ítem en su fila */
  align-content: center;     /* centrar verticalmente el conjunto cuando hay varias filas */
}
 
.content-panel.info .supporters-grid img.supporter-avatar {
  width: 72px !important;
  height: 72px !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
}

/* Envoltorio circular que fuerza recorte perfecto */
.supporter-avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden; 
  display: block;
}
.supporter-avatar-wrap .supporter-avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important; /* el wrap ya es circular */
  max-width: none !important;
}

/* Regla de seguridad: cualquier img dentro del grid será circular y pequeña */
.supporters-grid img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
}

/* Avatar como background: necesario si solo se ve el nombre */
.supporter-avatar-bg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  border: 2px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin: 0 auto;
}

/* Avatar por inicial (para usuarios sin imagen) */
.supporter-initial-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #00B0FE, #0041AB);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.8rem;
  font-family: var(--font-primary);
  line-height: 1;
  border: 2px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin: 0 auto;
  user-select: none;
}

/* Breakpoints responsivos para columnas del grid (centrado se mantiene) */
@media (max-width: 1200px) { .supporters-grid { grid-template-columns: repeat(5, 120px); } }
@media (max-width: 992px)  { .supporters-grid { grid-template-columns: repeat(4, 120px); } }
@media (max-width: 768px)  { .supporters-grid { grid-template-columns: repeat(3, 120px); } }
@media (max-width: 520px)  { .supporters-grid { grid-template-columns: repeat(2, 120px); } }

/* Anillo visible cuando el avatar recibe foco por teclado */
.supporter-avatar-bg:focus-visible,
.supporter-initial-avatar:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}