:root {
  /* ============================================================
     PALETA DE COLORES INSTITUCIONAL – Tarpuy Lab
  ============================================================ */
  --blue: #14498E;
  --red: #E22453;
  --green: #9EBD00;
  --yellow: #F3A000;
  --gray: #686868;
  --white: #ffffff;

  /* ============================================================
     PALETA DE CHAT PERSONALIZADA
  ============================================================ */
  --chat--color-primary: #e74266;
  --chat--color-primary-shade-50: #db4061;
  --chat--color-primary-shade-100: #cf3c5c;
  --chat--color-secondary: #20b69e;
  --chat--color-secondary-shade-50: #1ca08a;
  --chat--color-white: #ffffff;
  --chat--color-light: #f2f4f8;
  --chat--color-light-shade-50: #e6e9f1;
  --chat--color-light-shade-100: #c2c5cc;
  --chat--color-medium: #d2d4d9;
  --chat--color-dark: #101330;
  --chat--color-disabled: #777980;
  --chat--color-typing: #404040;
  --chat--color-background: #14498E;

  /* ============================================================
     BASE LAYOUT
  ============================================================ */
  --chat--spacing: 0.8rem;
  --chat--border-radius: 1.5rem;
  --chat--transition-duration: 0.15s;
  --chat--font-family: 'DINPro', 'Roboto', 'Ubuntu', sans-serif;

  /* ============================================================
     DIMENSIONES DE VENTANA DEL CHAT
  ============================================================ */
  --chat--window--width: 400px;
  --chat--window--height: 600px;
  --chat--window--bottom: var(--chat--spacing);
  --chat--window--right: var(--chat--spacing);
  --chat--window--z-index: 9999;
  --chat--window--border: 1px solid var(--chat--color-light-shade-50);
  --chat--window--border-radius: var(--chat--border-radius);
  --chat--window--margin-bottom: var(--chat--spacing);

  /* ============================================================
     ENCABEZADO DEL CHAT
  ============================================================ */
  --chat--header-height: auto;
  --chat--header--padding: var(--chat--spacing);
  --chat--header--background: var(--chat--color-background);
  --chat--header--color: var(--chat--color-light);
  --chat--header--border-top: none;
  --chat--header--border-bottom: none;
  --chat--header--border-left: none;
  --chat--header--border-right: none;
  --chat--heading--font-size: 1.5rem;
  --chat--subtitle--font-size: 0.9rem;
  --chat--subtitle--line-height: 1;

  /* ============================================================
     MENSAJES
  ============================================================ */
  --chat--message--font-size: 1rem;
  --chat--message--padding: var(--chat--spacing);
  --chat--message--border-radius: var(--chat--border-radius);
  --chat--message-line-height: 1.5;
  --chat--message--margin-bottom: calc(var(--chat--spacing) * 1);
  --chat--message--bot--background: var(--chat--color-white);
  --chat--message--bot--color: var(--chat--color-dark);
  --chat--message--bot--border: none;
  --chat--message--user--background: var(--chat--color-secondary);
  --chat--message--user--color: var(--chat--color-white);
  --chat--message--user--border: none;
  --chat--message--pre--background: rgba(0, 0, 0, 0.05);
  --chat--messages-list--padding: var(--chat--spacing);

  /* ============================================================
     BOTÓN FLOTANTE (TOGGLE)
  ============================================================ */
  --chat--toggle--size: 64px;
  --chat--toggle--width: var(--chat--toggle--size);
  --chat--toggle--height: var(--chat--toggle--size);
  --chat--toggle--border-radius: 50%;
  --chat--toggle--background: var(--chat--color-primary);
  --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
  --chat--toggle--active--background: var(--chat--color-primary-shade-100);
  --chat--toggle--color: var(--chat--color-white);

  /* ============================================================
     ÁREA DE ENTRADA DE TEXTO
  ============================================================ */
  --chat--textarea--height: 50px;
  --chat--textarea--max-height: 30rem;
  --chat--input--font-size: inherit;
  --chat--input--border: 0;
  --chat--input--border-radius: 0;
  --chat--input--padding: 0.8rem;
  --chat--input--background: var(--chat--color-white);
  --chat--input--text-color: var(--chat--color-dark);
  --chat--input--line-height: 1.5;
  --chat--input--placeholder--font-size: var(--chat--input--font-size);
  --chat--input--border-active: 0;
  --chat--input--left--panel--width: 2rem;

  /* ============================================================
     BOTONES GENERALES
  ============================================================ */
  --chat--button--color: var(--chat--color-light);
  --chat--button--background: var(--chat--color-primary);
  --chat--button--padding: calc(var(--chat--spacing) / 2) var(--chat--spacing);
  --chat--button--border-radius: var(--chat--border-radius);
  --chat--button--hover--color: var(--chat--color-light);
  --chat--button--hover--background: var(--chat--color-primary-shade-50);
  --chat--close--button--color-hover: var(--chat--color-primary);

  /* ============================================================
     BOTONES DE ENVÍO Y ARCHIVOS
  ============================================================ */
  --chat--input--send--button--background: var(--chat--color-white);
  --chat--input--send--button--color: var(--chat--color-light);
  --chat--input--send--button--background-hover: var(--chat--color-primary-shade-50);
  --chat--input--send--button--color-hover: var(--chat--color-secondary-shade-50);
  --chat--input--file--button--background: var(--chat--color-white);
  --chat--input--file--button--color: var(--chat--color-secondary);
  --chat--input--file--button--background-hover: var(--chat--input--file--button--background);
  --chat--input--file--button--color-hover: var(--chat--color-secondary-shade-50);
  --chat--files-spacing: 0.25rem;

  /* ============================================================
     FONDO Y PIE DEL CHAT
  ============================================================ */
  --chat--body--background: var(--chat--color-light);
  --chat--footer--background: var(--chat--color-light);
  --chat--footer--color: var(--chat--color-dark);
}
/* ==========================================================================
   BASE
   ========================================================================== */
   html {
    scroll-behavior: smooth;
    scroll-padding-top: 40px;
    height: 100%;
  }
  
  body {
    height: 100%;
    padding-top: 80px;
    font-family: 'DINPro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
  
  /* ==========================================================================
     TIPOGRAFÍA: DINPro (fuentes locales del proyecto)
     ========================================================================== */
  @font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPRO-REGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPRO-MEDIUM.TTF') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPRO-BOLD.TTF') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPRO-BLACK.OTF') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  

/* ==========================================================================
   NAVBAR · ENCABEZADOS
   ========================================================================== */
   .navbar {
    position: fixed;
    top: 0;
    z-index: 1020;
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  /* Estados activos de navegación */
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link.show {
    color: var(--blue);
    font-weight: 600;
  }
  
  /* Enlaces de navegación */
  .nav-link {
    font-size: 1.1rem;
    font-weight: 500;
    transition: color 0.3s ease, font-weight 0.3s ease;
  }
  
  .nav-link:hover {
    color: var(--red);
    font-weight: 600;
  }
  
  /* ==========================================================================
     NOTIFICACIÓN SUPERIOR
     ========================================================================== */
  #notification {
    background-color: var(--blue);
    color: var(--white);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 0.3px;
  }
  
  /* ==========================================================================
     BIENVENIDA / TÍTULOS GENERALES
     ========================================================================== */
  .welcome {
    color: var(--blue);
    font-weight: 700;
    text-align: center;
    margin: 40px 0;
    line-height: 1.4;
  }
  
  /* Caja roja destacada para subtítulos */
  .red-box {
    background-color: var(--red);
    color: var(--white);
    width: fit-content;
    padding: 10px 20px;
    margin: 10px auto 20px;
    font-weight: 700;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  /* Título azul (uso general) */
  .title-blue {
    color: var(--blue);
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
  }
  
  /* ==========================================================================
     CHAT EMBEBIDO – Estilos complementarios
     ========================================================================== */
  
  /* Enlaces dentro de los mensajes del chat */
  .chat-message a {
    color: #000;
    text-decoration: underline;
    cursor: pointer;
    word-break: break-word;
    transition: color 0.2s ease;
  }
  
  .chat-message a:hover {
    color: var(--blue);
    text-decoration: none;
  }
  
  .chat-message a::after {
    content: " 🔗";
    font-size: 0.95em;
    opacity: 0.8;
  }
  
  /* Botón de envío del chat */
  .chat-input button,
  .chat-send-button {
    background-color: #F3A000 !important;
    border: none;
    transition: background-color 0.3s ease;
  }
  
  .chat-input button:hover,
  .chat-send-button:hover {
    background-color: #F3A000 !important;
  }
  
  /* Ancho máximo de burbujas de chat */
  .chat-message {
    max-width: 50%;
    line-height: 1.5;
  }


/* ==========================================================================
   COLORES DE FONDO UTILIZADOS
   ========================================================================== */
   .bg-blue   { background-color: var(--blue); }
   .bg-red    { background-color: var(--red); }
   .bg-green  { background-color: var(--green); }
   .bg-yellow { background-color: var(--yellow); }
   .bg-gray   { background-color: var(--gray); }
   
   /* ==========================================================================
      SECCIÓN “HACEMOS”
      ========================================================================== */
   #Hacemos {
     background-color: #f8f9fa;
     padding: 4rem 0;
   }
   
   #Hacemos h4 {
     font-weight: 700;
     margin-bottom: 0.5rem;
   }
   
   #Hacemos p {
     font-weight: 500;
     margin-bottom: 0;
   }
   
   .card-tarpuy-1,
   .card-tarpuy-2,
   .card-tarpuy-3 {
     color: var(--white);
     border-radius: 12px;
     padding: 24px;
     text-align: center;
     height: 100%;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .card-tarpuy-1 { background-color: var(--red); }
   .card-tarpuy-2 { background-color: var(--green); }
   .card-tarpuy-3 { background-color: var(--yellow); }
   
   .card-tarpuy-1:hover,
   .card-tarpuy-2:hover,
   .card-tarpuy-3:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
   }
   
   .gif {
     border-radius: 50%;
     margin-bottom: 1rem;
   }
   
   /* ==========================================================================
      SECCIÓN “EVENTOS”
      ========================================================================== */
   .tarjeta-img {
     height: 200px;
     object-fit: cover;
   }
   
   .evento-card {
     position: relative;
     border-radius: 10px;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .evento-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
   }
   
   .evento-card .card-img-top {
     max-height: 250px;
     object-fit: cover;
   }
   
   .evento-card .card-body {
     padding-left: 80px;
     position: relative;
   }
   
   .evento-fecha {
     position: absolute;
     top: 15px;
     left: 15px;
     background-color: var(--white);
     color: var(--blue);
     text-align: center;
     font-weight: 700;
     border-radius: 8px;
     padding: 5px 10px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
   
   .evento-fecha .mes {
     display: block;
     font-size: 0.85rem;
   }
   
   .evento-fecha .dia {
     font-size: 1.5rem;
     line-height: 1.2;
   }
   
   /* Animación al mostrar/ocultar eventos */
   .eventos-oculta {
     transition: opacity 0.5s ease;
   }
   
   .eventos-oculta.d-none {
     opacity: 0;
   }
   
   .eventos-oculta:not(.d-none) {
     opacity: 1;
   }
   
   /* Badge NUEVO en eventos */
   .evento-card .badge.bg-danger {
     font-size: 0.75rem;
     vertical-align: middle;
   }
   
   /* Tarjeta destacada de evento reciente */
   .evento-reciente {
     border: 2px solid var(--red);
     box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
   }
   
   /* ==========================================================================
      SECCIÓN “FRASES” (OPTIMIZADA)
      ========================================================================== */
   #Frases {
     background: url('../images/parallax.png') center/cover no-repeat;
     color: var(--white);
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 320px;
     position: relative;
     padding: 2rem 1rem;
     overflow: visible;
   }
   
   /* Evita recorte de contenido dentro del carrusel */
   #Frases .carousel-inner {
     width: 100%;
     overflow: visible;
   }
   
   /* Figura principal */
   #Frases figure {
     margin: 0 auto;
     max-width: 800px;
     text-align: center;
     padding: 1rem 1.5rem;
     border-radius: 8px;
   }
   
   /* Cita principal */
   #Frases blockquote {
     margin: 0;
     font-size: 1.5rem;
     line-height: 1.4;
     font-weight: 700;
     font-style: italic;
     text-align: center;
     color: var(--white);
   }
   
   /* Variante personalizada */
   blockquote.frase {
     font-style: italic;
     position: relative;
     padding: 0 1rem;
   }
   
   /* Autor de la cita */
   #Frases figcaption,
   #Frases blockquote footer {
     font-family: 'DINPro', sans-serif;
     font-size: 1rem;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.85);
     margin-top: 0.75rem;
     text-align: center;
   }
   
   /* Animaciones suaves de entrada */
   #Frases .carousel-item figure {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
   }
   
   #Frases .carousel-item.active figure {
     opacity: 1;
     transform: translateY(0);
   }
   
   #Frases .carousel-item figure figcaption {
     opacity: 0;
     transform: translateX(10px);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
   }
   
   #Frases .carousel-item.active figure figcaption {
     opacity: 1;
     transform: translateX(0);
   }
   
   /* Responsive ajustes */
   @media (max-width: 576px) {
     #Frases {
       min-height: auto;
       padding: 2rem 1rem;
     }
   
     #Frases figure {
       padding: 1rem;
     }
   
     #Frases blockquote {
       font-size: 1.25rem;
       line-height: 1.3;
     }
   
     #Frases figcaption,
     #Frases blockquote footer {
       font-size: 0.9rem;
     }
   }
   
   /* Controles del carrusel */
   .carousel-control-next-icon,
   .carousel-control-prev-icon {
     background-color: var(--blue);
     border-radius: 50%;
     background-size: 70% 70%;
     background-position: center;
   }
   
   /* ==========================================================================
      SECCIÓN “SUSCRÍBETE”
      ========================================================================== */
   #Suscribete {
     background-color: var(--red);
     color: var(--white);
     padding: 40px 0;
     text-align: left;
   }
   
   #Suscribete h3,
   #Suscribete p {
     margin-bottom: 16px;
   }
   
/* ==========================================================================
   SECCIÓN “NOTICIAS”
   ========================================================================== */
   #Noticias {
    margin: 60px 0;
  }
  
  /* Fecha y metadatos del artículo */
  #Noticias article.date {
    color: var(--blue);
    font-weight: 500;
    margin-top: 8px;
    display: block;
    text-align: justify;
  }
  
  /* Imágenes de las noticias */
  #Noticias article img {
    height: 250px;
    width: 100%;
    object-fit: cover; /* Evita deformación de las imágenes */
  }
  
  /* Textos y encabezados dentro de las tarjetas */
  .card-body p,
  .card-body h5,
  #Noticias article p,
  #Noticias article h4,
  .text-justify-custom {
    text-align: justify;
    line-height: 1.5;
  }
  
  /* Animación al ocultar/mostrar noticias */
  .noticia-oculta {
    transition: opacity 0.5s ease;
  }
  
  .noticia-oculta:not(.d-none) {
    opacity: 1;
  }
  
  /* Badge NUEVO */
  .badge.bg-danger {
    font-size: 0.75rem;
    vertical-align: middle;
  }
  
  /* Tarjeta destacada (noticia reciente) */
  .noticia-reciente {
    border: 2px solid var(--red);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  }
  
  /* ==========================================================================
     FOOTER
     ========================================================================== */
  footer {
    background-color: var(--blue);
    color: var(--white);
    padding: 40px 0;
    text-align: center;
  }
  
  footer a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  footer a:hover {
    color: #8fa5c2;
  }
  
  footer p {
    font-size: 0.875rem;
    margin: 0;
  }
  
  /* ==========================================================================
     SECCIÓN “IMPACTO” (CUADRO DE NÚMEROS)
     ========================================================================== */
  .impact-section {
    margin-bottom: 0;
  }
  
  .impact-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Cada bloque de impacto */
  .impact-block {
    flex-grow: 1;
    flex-basis: 100%;
    min-height: 200px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform: translateY(40px);
    transition: transform 0.4s cubic-bezier(0.25, 1.25, 0.5, 1),
                box-shadow 0.3s ease;
    will-change: transform;
    position: relative;
    z-index: 1;
  }
  
  .impact-block:hover {
    transform: scale(1.08);
    z-index: 5;
  }

  /* Texto descriptivo */
  .impact-block p {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
  }
    
  /* Número principal */
  .impact-number {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 10px;
  }
  
  .pop-effect {
    animation: popIn 0.6s ease;
  }
  
  /* Sombras institucionales por color */
  .impact-block.bg-purple:hover {
    box-shadow: 0 12px 24px rgba(63, 13, 109, 0.5);
  }
  .impact-block.bg-red:hover {
    box-shadow: 0 12px 24px rgba(244, 67, 54, 0.4);
  }
  .impact-block.bg-yellow:hover {
    box-shadow: 0 12px 24px rgba(246, 177, 0, 0.4);
  }
  .impact-block.bg-blue:hover {
    box-shadow: 0 12px 24px rgba(0, 148, 198, 0.4);
  }
  .impact-block.bg-dark:hover {
    box-shadow: 0 12px 24px rgba(33, 37, 41, 0.5);
  }
  
/* ==========================================================================
   SECCIÓN “INICIATIVAS” (GRID PERSONALIZADO)
   ========================================================================== */
   .initiatives-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 1rem;
  }
  
  /* Imagen destacada que ocupa más espacio */
  .grid-item.taller {
    grid-column: span 2;
    grid-row: span 1;
  }
  
  /* Posiciones manuales (layout tipo collage) */
  .div1 { grid-area: 1 / 1 / 3 / 2; }
  .div2 { grid-area: 1 / 2 / 2 / 3; }
  .div3 { grid-area: 1 / 3 / 2 / 4; }
  .div4 { grid-area: 2 / 2 / 3 / 3; }
  .div5 { grid-area: 2 / 3 / 4 / 4; }
  .div6 { grid-area: 3 / 1 / 4 / 2; }
  
  /* Estructura base de ítems */
  .grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }
  
  /* Zoom sutil al pasar el cursor */
  .grid-item:hover img {
    transform: scale(1.05);
  }
  
  /* Overlay con texto */
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    transition: opacity 0.4s ease;
  }
  
  .grid-item:hover .overlay {
    opacity: 1;
  }
  
  .overlay-text {
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    padding: 0 10px;
  }
  
  /* --- Responsive --- */
  @media (max-width: 992px) {
    .initiatives-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 576px) {
    .initiatives-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 1200px) {
    .initiatives-grid { 
      grid-template-columns: 1fr; 
    }
  }
  
  
  /* ==========================================================================
     ANIMACIONES GENERALES
     ========================================================================== */
  .reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .grid-item.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* ==========================================================================
     OTROS ESTILOS ÚTILES Y AJUSTES RESPONSIVOS
     ========================================================================== */
  
  /* Elimina las comillas decorativas de blockquotes en “Frases” */
  #Frases blockquote::before,
  #Frases blockquote::after {
    content: none !important;
    display: none !important;
  }
  
  /* ==========================================================================
     BOTONES
     ========================================================================== */
  .btn-primary {
    background-color: var(--blue);
    border-color: var(--blue);
  }
  
  #toggle-antiguos {
    font-family: 'DINPro', sans-serif;
    margin-bottom: 1rem;
  }
  
  /* ==========================================================================
     METODOLOGÍA (CAROUSEL)
     ========================================================================== */
  #Metodologia .carousel-inner {
    width: 100%;
    margin: 0 auto;
  }
  
  #Metodologia .carousel-inner img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Asegura que toda la imagen sea visible */
  }
  
  /* Vista de escritorio */
  @media (min-width: 992px) {
    #Metodologia .carousel-inner {
      width: 80%;
    }
  
    #Metodologia .carousel-control-prev,
    #Metodologia .carousel-control-next {
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      opacity: 0.8;
    }
  }
  
  /* Vista móvil y tablet */
  @media (max-width: 991px) {
    #Metodologia .carousel-control-prev,
    #Metodologia .carousel-control-next {
      position: static;
      margin: 10px auto 0;
      width: auto;
      display: inline-block;
    }
  
    #Metodologia .carousel-inner {
      margin-bottom: 40px; /* Espacio para botones */
    }
  }
  
  /* ==========================================================================
     IMPACTO - BLOQUES Y ANIMACIONES
     ========================================================================== */
  .impact-box h2 {
    font-size: 2.5rem;
    font-weight: bold;
  }
  
  /* Responsivo general */
  @media (max-width: 767px) {
    .navbar-brand img {
      width: 200px;
    }
  
    .welcome {
      font-size: 1.25rem;
    }
  
    .carousel-inner .carousel-item img {
      height: 250px;
      object-fit: cover;
    }
  }

  .animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }

  
  @media (max-width: 991px) {
    .carousel-inner .carousel-item img {
      height: 350px;
      object-fit: cover;
    }
  }

  @media (min-width: 992px) {
    .carousel-inner .carousel-item img {
      height: 450px;
      object-fit: cover;
    }
  }
  
  /* Ajuste base escritorio */
  @media (min-width: 768px) {
    .impact-block {
      flex-basis: 200px;
    }
  }
  
  /* Pop suave al finalizar conteo */
  @keyframes popIn {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    60%  { transform: scale(0.95); }
    80%  { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  
  /* ==========================================================================
     GRID DE INICIATIVAS (ALTERNATIVO)
     ========================================================================== */

  
  .img-wrapper {
    overflow: hidden;
    border-radius: 8px;
  }
  
  .img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
  }

  
  .text-wrapper {
    text-align: left;
    padding-top: 15px;
  }
  
  .text-wrapper h4 {
    font-size: 1.25rem;
    margin-bottom: 8px;
  }
  
  .text-wrapper p {
    font-size: 0.95rem;
    color: #555;
  }
  

  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }