/* ==================================================================  HERO  ======================================================================= */

.hero-productos {
    padding: 10rem 0;
    background-color: var(--azul-marino);
    text-align: center;
    border-bottom: 1px solid #eee;
    color: var(--blanco);
}

/* ==================================================================  CATEGORÍAS  ======================================================================= */

.titulo-categorias {
    margin-top: 10rem;
    text-align: center;
    text-transform: initial;
    font-size: 4.5rem;
}
@media (min-width: 1024px) {
   .titulo-categorias {
        font-size: 4rem;
    } 
}

.texto-acompanamiento{
    text-align: center;
    color: var(--azul-marino);
}

.grid-categorias {
    padding-top: 5rem;
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
}

.categoria-item {
    background-color: var(--fondo-claro);
    padding: 5rem;
    border-radius: 2rem;
    border: 1.5px solid var(--fondo-claro);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.icono-wrapper {
    width: 6rem;
    height: 6rem;
    background-color: var(--azul-marino);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    transition: all 0.3s ease-in-out;
}

.icono-wrapper svg {
    width: 4rem;
    height: 4rem;
    stroke: var(--blanco);
    transition: all 0.3s ease-in-out;
}

.categoria-item h3 {
    /* Sobreescribir h3 global (5rem) — en tarjetas de categoría usamos tamaño local */
    font-size: 2.5rem;
    color: var(--azul-marino);
    margin-bottom: 1.5rem;
    text-transform: capitalize;
    text-align: left;
}

.categoria-item p {
    color: var(--azul-marino);
    margin-bottom: 3rem;
    text-align: left;
}

.enlace-categoria {
    font-weight: 700;
    color: var(--rojo);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.8rem;
}

.enlace-categoria::after {
    content: '→';
    transition: all 0.3s ease-in-out;
}

@media (min-width: 768px) {
    .grid-categorias {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .categoria-item:hover {
        transform: translateY(-10px);
        box-shadow: 0px 20px 40px rgba(0, 31, 96, 0.1);
        border-color: var(--rojo);
    }
    .categoria-item:hover .icono-wrapper {
        background-color: var(--rojo);
    }
    .categoria-item:hover .enlace-categoria::after {
        transform: translateX(5px);
    }
}

@media (min-width: 1200px) {
    .grid-categorias {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* ==================================================================  MARCAS DESTACADAS ================================================================== */
.grid-marcas-destacadas{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 5rem 0;
}

.img-producto-recomendado{
    border-radius: 2rem;
    overflow: hidden;
}

.img-producto-recomendado img{
    transition: all 0.3s ease-in-out;
}

@media (min-width: 1024px) {
    .grid-marcas-destacadas{
        flex-direction: row;
    }

    .img-producto-recomendado img:hover{
        transform: scale(1.01);
    }
}

/* ==================================================================  CTA CONTACTO  ======================================================================= */

.info-adicional {
    padding: 10rem 0;
    background-color: var(--fondo-claro);
}

.tarjeta-destacada {
    background-color: var(--azul-marino);
    color: var(--blanco);
    padding: 5rem;
    border-radius: 3rem;
    display: grid;
    gap: 4rem;
}

.texto-destacado{
    text-align: center;
}

.tarjeta-destacada h3 {
    font-size: 3rem;
    color: var(--blanco);
}

@media (min-width: 1024px) {
    .tarjeta-destacada {
        background-color: var(--azul-marino);
        color: var(--blanco);
        padding: 8rem;
        align-items: center;
        grid-template-columns: 2fr 1fr;
        text-align: center;
    }

    .texto-destacado{
        text-align: left;
    }
    .tarjeta-destacada h3 {
        font-size: 4rem;
    }
}