/* ==========================================
   CONFIGURACIÓN GENERAL
========================================== */

body {

    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: #333;

    background-color: #f8f9fa;

}


/* ==========================================
   BANNER
========================================== */

.banner {

    width: 100%;

    overflow: hidden;

    background-color: #e9ecef;

}


.banner-img {

    width: 100%;

    height: auto;

    display: block;

    object-fit: cover;

}


/* ==========================================
   TÍTULOS
========================================== */

.titulo-principal {

    font-weight: 700;

    margin-bottom: 20px;

    font-size: 2.2rem;

}


.texto-intro {

    max-width: 850px;

    margin: 0 auto;

    font-size: 1.05rem;

    line-height: 1.7;

    color: #666;

}


/* ==========================================
   ACCORDION
========================================== */

.accordion {

    max-width: 1000px;

    margin: 0 auto;

}


.accordion-item {

    border: 1px solid #dee2e6;

    margin-bottom: 12px;

    border-radius: 8px !important;

    overflow: hidden;

}


.accordion-button {

    font-size: 1.05rem;

    font-weight: 600;

    padding: 18px 20px;

}


.accordion-button:not(.collapsed) {

    background-color: #f1f3f5;

    color: #212529;

    box-shadow: none;

}


.accordion-button:focus {

    box-shadow: none;

}


.accordion-body {

    padding: 20px;

}


/* ==========================================
   LISTA DE PRODUCTOS
========================================== */

.lista-productos {

    margin: 0;

    padding-left: 20px;

}


.lista-productos li {

    margin-bottom: 10px;

    line-height: 1.5;

}


/* ==========================================
   SECCIÓN SOLICITUD
========================================== */

.solicitud-info {

    max-width: 1000px;

    margin-left: auto;

    margin-right: auto;

}


.solicitud-contenido {

    text-align: center;

    padding: 50px 30px;

    background-color: white;

    border-radius: 12px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

}


.solicitud-contenido h2 {

    font-size: 1.7rem;

    font-weight: 700;

    margin-bottom: 20px;

}


.solicitud-contenido p {

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.7;

    color: #555;

}


/* ==========================================
   BOTÓN
========================================== */

.btn-solicitar {

    margin-top: 15px;

    padding: 13px 28px;

    font-weight: 600;

    border-radius: 6px;

    color: white;

    background-color: #212529;

    text-decoration: none;

    transition: all 0.3s ease;

}


.btn-solicitar:hover {

    color: white;

    transform: translateY(-2px);

    opacity: 0.9;

}


/* ==========================================
   FOOTER
========================================== */

.footer {

    margin-top: 50px;

    padding: 25px 0;

    background-color: #212529;

    color: white;

    font-size: 0.9rem;

}


/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 768px) {

    .titulo-principal {

        font-size: 1.9rem;

    }


    .texto-intro {

        font-size: 1rem;

    }


    .solicitud-contenido {

        padding: 40px 20px;

    }

}


/* ==========================================
   RESPONSIVE - CELULAR
========================================== */

@media (max-width: 576px) {

    .titulo-principal {

        font-size: 1.6rem;

    }


    .texto-intro {

        font-size: 0.95rem;

    }


    .accordion-button {

        font-size: 0.95rem;

        padding: 15px;

    }


    .accordion-body {

        padding: 15px;

    }


    .solicitud-contenido {

        padding: 30px 18px;

    }


    .solicitud-contenido h2 {

        font-size: 1.35rem;

    }


    .solicitud-contenido p {

        font-size: 0.95rem;

    }


    .btn-solicitar {

        width: 100%;

        padding: 13px 15px;

    }

}

/* ==========================================
   NÚMERO DE CLASIFICACIÓN
========================================== */

.numero-categoria {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    height: 32px;

    margin-right: 15px;

    padding: 0 8px;

    border-radius: 6px;

    background-color: #212529;

    color: white;

    font-size: 0.85rem;

    font-weight: 700;

}


/* ==========================================
   GRID DE PRODUCTOS
========================================== */

.productos-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


/* ==========================================
   PRODUCTO
========================================== */

.producto {

    display: inline-block;

    padding: 9px 14px;

    border: 1px solid #dee2e6;

    border-radius: 20px;

    background-color: #f8f9fa;

    color: #495057;

    font-size: 0.9rem;

    line-height: 1.4;

}


/* ==========================================
   PRODUCTO - HOVER
========================================== */

.producto:hover {

    background-color: #e9ecef;

}


/* ==========================================
   RESPONSIVE PRODUCTOS
========================================== */

@media (max-width: 576px) {

    .numero-categoria {

        min-width: 36px;

        height: 28px;

        margin-right: 10px;

        font-size: 0.75rem;

    }


    .accordion-button {

        padding: 14px 12px;

    }


    .producto {

        width: 100%;

        text-align: left;

        padding: 9px 12px;

        font-size: 0.88rem;

    }

}