h1.display-5.mb-4 {
    font-size: 70px;
    line-height: 59px;
    margin-bottom: 60px;
}

h2, h3,h4,h5{
     font-family: "Montserrat", sans-serif;
}

.calidad-comercializacion .nav-pills li.nav-item {
    width: 50%;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: transparent!important;
    color: var(--fen-azul)!important;
}

.nav-pills .nav-link
 {
    background: 0 0;
    border: 0;
    border-radius: var(--bs-nav-pills-border-radius);
    color: #a5a5a5;
    padding:0;
        font-size: 30px !important;
}

div#pills-calidad section.section-norma.mb-5 button.nav-link{
        border: 1px solid #464646!important;
        color: var(--fen-azul);
            font-weight: 700;
}

.calidad-tabs .nav-link {
    border: none;
    border-radius: 0;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1rem;
    padding: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: opacity 0.3s;
    font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    text-transform: none;}


button#pills-calidad-tab {
    width: 100%;
    background-color: var(--fen-yellow);
}

button#pills-comercial-tab {
    width: 100%;
    background-color: var(--fen-orange)
}

button.nav-link.active#pills-calidad-tab{
    background-color: var(--fen-azul)!important;
    color: #fff!important;
transform: scaleY(1.1);
}
button.nav-link.active#pills-comercial-tab{
    background-color: var(--fen-azul)!important;
    color: #fff!important;
 transform: scaleY(1.1);
}
.nav-pills .nav-link:hover{
  filter: brightness(95%);
  color: #fff;
}

main.calidad-comercializacion{
    padding: 80px 0;
}

.card.bg-blue-fenalce.text-white.border-0.shadow.rounded-4.p-4.p-md-5{
    background: var(--fen-azul);
}

.card.bg-blue-fenalce.text-white.border-0.shadow.rounded-4.p-4.p-md-5 p{
    color: #fff;
}

main.calidad-comercializacion #pills-calidad .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fff!important;
    background-color:var(--fen-azul)!important;
    border-color: var(--fen-azul)!important
}

.card.bg-blue-fenalce.text-white.border-0.shadow.rounded-4.p-4.p-md-5 .text-success{
    color: var(--fen-green)!important;
}

ul.list-unstyled li
 {
    color: white !important;
}

/* --- Estilos base (igual que antes) --- */
  .custom-accordion .accordion-item { border: none; background: transparent; margin-bottom: 10px; }
  .custom-accordion .accordion-button {
    font-weight: 700; color: #0f3d5c; border-radius: 50px !important; box-shadow: none;
  }
  .custom-accordion .accordion-button:not(.collapsed) { box-shadow: none; color: #0f3d5c; }
  .accordion-body { color: #0f3d5c; font-size: 0.95rem; padding-top: 10px; background: transparent; }
  
  /* --- AQUÍ ESTÁ LA LÓGICA AUTOMÁTICA --- */

  /* 1.º, 4.º, 7.º... (El patrón se repite cada 3, empezando en 1) -> NARANJA */
  .custom-accordion .accordion-item:nth-child(3n + 1) .accordion-button {
      background-color: #faa775 !important;
  }

  /* 2.º, 5.º, 8.º... (El patrón se repite cada 3, empezando en 2) -> AMARILLO */
  .custom-accordion .accordion-item:nth-child(3n + 2) .accordion-button {
      background-color: #f5cf76 !important;
  }

  /* 3.º, 6.º, 9.º... (Múltiplos de 3) -> MALVA */
  .custom-accordion .accordion-item:nth-child(3n) .accordion-button {
      background-color: #b97a7e !important;
  }

  /* Estilos de imagen (igual que antes) */
  .grain-image-container img {
      border-radius: 30px;
      width: 100%; height: auto; object-fit: cover; transition: opacity 0.3s ease-in-out;
  }
  .fade-out { opacity: 0.4 !important; }

  /* Estilos personalizados para igualar la imagen */
        
        /* El azul oscuro de los títulos y la línea */
        .color-azul-institucional {
            color: #0f3057; 
            font-weight: 600; /* Un poco de negrita */
        }

        /* El verde claro del ícono */
        .color-verde-icono {
            color: #8bc34a; /* Tono verde lima similar a la imagen */
            margin-right: 5px;
        }

        /* La línea divisoria gruesa */
        .separador-azul {
            border-top: 3px solid #0f3057;
            opacity: 1; /* Para asegurar que el color se vea sólido */
            margin: 20px 0;
        }

        /* Ajuste para que los textos se vean ordenados */
        .contacto-item {
            margin-bottom: 1rem;
        }

    .contenido-laboratorios h1, .contenido-laboratorios h2, .contenido-laboratorios h3, .contenido-laboratorios h4,  .contenido-laboratorios h5
    {
        color: var(--fen-green);
    } 

    .section-laboratorios li{
        color: #fff;
    }

    .section-laboratorios .tooltip{
    position:fixed; z-index:10; pointer-events:none;
    background:#fff; color:#0b3a5a; padding:.4rem .55rem;
    border-radius:.35rem; font-size:.85rem; box-shadow:0 4px 14px rgba(0,0,0,.15);
    transform: translate(-50%, -120%); white-space:nowrap;
  }
.section-laboratorios .content-map  .legend{position:absolute; left:12px; bottom:12px; background:#fff; border:1px solid #e6eef6; border-radius:.5rem; padding:.5rem .75rem; font-size:.85rem}

.banner-contact-wp{
  background: #ebf8f4;
}

.banner-contact-wp .col-6 {
    display: flex;
    flex-direction: column;

    align-content: center;
    justify-content: center;
    padding: 30px 60px;
}

.button-wp {
    display: flex;
    align-items: center;
    width: 100%;
    align-content: center;
    justify-content: space-between;
        font-weight: 700;
}

.button-wp button {
    width: max-content;
}


.button-wp p{
  margin-bottom: 0;
}

.button-wp button {
    width: max-content;
    background: transparent;
    border-radius: 10px;
    border: 1px solid var(--fen-azul);
    padding: 0 13px;
    color: var(--fen-azul);
}

.banner-contact-wp h2 {
    font-size: 45px;
    font-weight: 700;
        font-family: 'Bebas Kai';
}


/* Títulos Principales */
.seccion-comercial .titulo-principal {
    color: #002E5B;
    font-weight: 800; /* Extra bold */
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    line-height: 1.2;
}

.seccion-comercial .subtitulo-asesoria {
    color: #002E5B;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Estilos de cada item (Zona y Teléfono) */
.item-profesional {
    margin-bottom: 20px;
}

.item-profesional .zona-nombre {
    color: #002E5B;
    font-weight: 800; /* Bold */
    font-size: 1.25rem;
    margin-bottom: 5px;
}

/* Enlace del teléfono */
.item-profesional .tel-link {
    text-decoration: none;
    transition: opacity 0.3s;
}

.item-profesional .tel-link:hover {
    opacity: 0.8;
}

/* El texto del número */
.item-profesional .numero-texto {
    color: #002E5B;
    font-size: 1.1rem;
    font-weight: 400; /* Regular */
}

/* El ícono verde */
.icon-whatsapp {
    color: #7AB800; /* Color verde lima similar al de tu imagen */
    display: flex;
    align-items: center;
}

/* La línea horizontal divisoria */
.linea-final {
    border: 0;
    border-top: 2px solid #002E5B; /* Azul oscuro */
    opacity: 1; /* Para que se vea bien el color */
}

/* --- TRUCO VISUAL PARA LA LÍNEA DEL MEDIO --- */
/* Si quieres esa línea que separa la fila de arriba de la de abajo 
   automáticamente, usa esto: */

@media (min-width: 992px) { /* Solo en PC */
    /* Añade una línea debajo de los primeros 3 elementos */
    .seccion-comercial .col-lg-4:nth-child(-n+3) {
        border-bottom: 2px solid #002E5B;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
}