body {
    scroll-behavior: smooth;
    max-width: 100%;
   
    background: linear-gradient(135deg, #ebf8f3, #3d87ee);
}

    

nav {
    background: #36990f;
    background: linear-gradient(0deg, rgba(54, 153, 15, 1) 20%, rgb(12, 117, 73) 83%, rgba(229, 247, 25, 1) 100%);

}

.hero {
    background: linear-gradient(rgba(24, 74, 33, 0.6), rgba(143, 192, 151, 0.6)), url('https://via.placeholder.com/1600x700');
    background-size: cover;
    background-position: center;
    color: rgb(207, 248, 5);
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero h1 {
    font-size: 3rem;
    font-weight: bold;
}

/* Estilos para las imágenes laterales */
.lateral {
    position: fixed;
    top: 65%;
    transform: translateY(-50%);
    width: 12%; /* Usamos porcentaje para que sea fluido */
    min-width: 100px; /* Evita que se hagan diminutas */
    max-width: 200px;
    z-index: 5; /* Por debajo de los botones del carrusel si es necesario */
}

.l-izq {
    left: 5px;
}

.l-der {
    right: 130px;
    width: 250%;
}

.lateral img {
    width: 200%;
    height: auto;
    display: block;
}



/* IMPORTANTE: Si la pantalla es pequeña, ocultamos los laterales 
   para que no tapen el carrusel */
@media (max-width: 768px) {
    .lateral {
        display: none;
    }
    .contenedor-carrusel {
        width: 95%;
    }
}

.section-title {
    font-weight: bold;
    margin-bottom: 40px;
    position: relative;
}

.section-title::after {
    content: "";
    width: 80px;
    height: 4px;
    background: #0d6efd;
    display: block;
    margin: 15px auto 0;
}

.director-card img {
    height: 250px;
    object-fit: cover;
    
}


.director-card {
    width: 100%; /* Deja que Bootstrap controle el ancho de la columna */
    margin: 0 auto; /* Ayuda a centrar la tarjeta dentro de su espacio */
}

footer {
    background: #36990f;
    background: linear-gradient(0deg, rgba(54, 153, 15, 1) 20%, rgba(229, 247, 25, 1) 100%);
    color: rgb(10, 21, 238);
}

.contacto-bg {
    background: linear-gradient(135deg, #e2f6ee, #3d87ee);
}

.contact-card {
    display: block;
    text-align: center;
    padding: 30px 20px;
    border-radius: 15px;
    color: white;
    text-decoration: none;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    animation: fadeUp 1s ease forwards;
}

.contact-card i {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

.contact-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.whatsapp {
    background: #25D366;
}

.facebook {
    background: #1877F2;
}

.telefono {
    background: #20c997;
}

.mapa {
    background: #fd7e14;
}

.map-container {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: zoomIn 1.2s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
     }


      .accordion-custom .accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 15px;
    overflow: hidden;
    animation: fadeInUp 0.8s ease;
  }

  .accordion-custom .accordion-button {
    font-weight: bold;
    background: #0d6efd;
    color: #fff;
  }

  .accordion-custom .accordion-button.collapsed {
    background: #198754;
  }

  .accordion-custom .accordion-body {
    background: #fff;
    animation: expand 0.4s ease;
  }

  .doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
  }

  .doc-item:last-child {
    border-bottom: none;
  }

  .doc-item strong {
    display: block;
  }

  .doc-item small {
    color: #6c757d;
  }

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

  @keyframes expand {
    from {
      opacity: 0;
      transform: scaleY(0.95);
    }
    to {
      opacity: 1;
      transform: scaleY(1);
    }
  }

.card-img-top {
    width: 235px;           /* El tamaño que desees */
    height: auto;
    display: block;         /* Convierte la imagen en bloque */
    margin-left: auto;      /* Centra automáticamente */
    margin-right: auto;     /* Centra automáticamente */
}

/* Estilo para los enlaces dentro del ticker */
.ticker-item {
    text-decoration: none; /* Quita el subrayado */
    color: #333;           /* Color del texto (puedes usar el que prefieras) */
    padding: 0 40px;
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    display: inline-block;
}

/* Contenedor principal de la barra */
.ticker-wrapper {
    width: 100%;
    background: #f8f9fa; /* Color claro */
    border-top: 2px solid #007bff;
    border-bottom: 2px solid #007bff;
    overflow: hidden; /* Esconde lo que sale de los bordes */
    display: flex;
    align-items: center;
    height: 40px;
}

/* Etiqueta roja/azul de 'Últimas Noticias' */
.ticker-titulo {
    background: #007bff;
    color: white;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: bold;
    z-index: 2;
    white-space: nowrap;
}

/* Contenedor que se mueve */
.ticker-contenido {
    display: flex;
    white-space: nowrap;
    animation: moverTitulares 25s linear infinite; /* Velocidad ajustable */
}

.ticker-item {
    padding: 0 40px;
    font-family: Arial, sans-serif;
    color: #333;
    font-size: 0.95rem;
}

/* Animación de desplazamiento */
@keyframes moverTitulares {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Se mueve la mitad para ciclo infinito */
}

/* Pausa al pasar el ratón */
.ticker-wrapper:hover .ticker-contenido {
    animation-play-state: paused;
}




/* Estilo del contenedor general (card directores) */
.cards-container {
    display: flex;
    flex-wrap: wrap;       /* Permite que las tarjetas bajen a la siguiente línea si no caben */
    justify-content: center;
    gap: 20px;             /* Separación uniforme entre las tarjetas */
    align-items: stretch;  /* ¡ESTA ES LA CLAVE! Fuerza a que todas tengan la misma altura */
}

/* 1. ESTILO DE LA TARJETA (Afecta a TODOS los cards) */
.card {
    /* Flexbox para centrar la imagen y el texto horizontalmente */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido horizontalmente */
    
    /* Cambiar el color de fondo de todas las tarjetas aquí */
    background-color: #8fa397; /* Puedes cambiar este color (Ej: #e0f7fa) */
    
    /* Dimensiones y diseño de la tarjeta */
    width: 320px;
    padding: 24px;
    border-radius: 12px; /* Bordes redondeados de la tarjeta */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
    font-family: Arial, sans-serif;
    text-align: center; /* Asegura el centrado del texto */
}

/* 2. ESTILO DE LA IMAGEN (Centrada gracias a Flexbox del padre) */
.card-img {
    width: 180px; /* Ancho de la imagen */
    height: 180px; /* Alto de la imagen */
    object-fit: cover; /* Evita que la foto se deforme */
    border-radius: 8px; /* Pequeño redondeado en las esquinas */
    margin-bottom: 20px; /* Separación con el texto de abajo */
}

/* Estilos para los textos interiores */
.card-name {
    font-size: 1.4rem;
    color: #1a1a1a;
    margin: 10px 0 5px 0;
}

.card-role {
    font-size: 1.1rem;
    color: #555555;
    margin: 0 0 15px 0;
}

.card-phone {
    font-size: 1rem;
    color: #333333;
    margin: 0;
}


.fila-centrada {
    display: flex;            /* Asegura que el contenedor se comporte como Flexbox */
    justify-content: center;  /* Centra horizontalmente todo el contenido interno */
}