/* ============================================================
   HERO: REDUCCIÓN DE TÍTULO Y LOGO (MÓVIL)
   ============================================================ */
@media (max-width: 992px) {

    /* 1. Reducimos el contenedor del texto para que no sea tan alto */
    .hero-content {
        padding: 0 15px !important;
        max-width: 100% !important;
    }

    /* 2. Disminuimos la letra de "Explora la potencia en" */
    .hero-title {
        font-size: 2rem !important; /* Antes era mucho más grande */
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    /* 3. Disminuimos el tamaño del logo dentro del título */
    .hero-title img {
        width: 180px !important; /* Reducido para que quepa mejor en una línea */
        height: auto !important;
        display: inline-block !important; /* Lo mantenemos en línea con el texto */
        margin: 5px 0 !important;
        vertical-align: middle !important;
    }

    /* 4. Subtítulo más pequeño para acompañar */
    .hero-content p {
        font-size: 1.1rem !important;
        margin-top: 10px !important;
    }
}



/* ============================================================
   BENEFICIOS: AGRUPACIÓN EN CUADRÍCULA (2 COLUMNAS)
   ============================================================ */
@media (max-width: 992px) {

    .beneficios {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Dos columnas iguales */
        gap: 12px !important; /* Espacio pequeño entre cuadros */
        padding: 30px 15px !important;
        background: var(--oscuro-fondo) !important;
    }

    .beneficio-item {
        padding: 20px 10px !important; /* Cuadros más compactos */
        height: auto !important;
        min-height: 180px !important; /* Altura uniforme */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 1. Iconos más pequeños para que quepan en el cuadro */
    .icon-box {
        width: 55px !important;
        height: 55px !important;
        margin-bottom: 12px !important;
    }

    .beneficio-item i {
        font-size: 1.8rem !important; /* Icono ajustado */
    }

    /* 2. Textos compactos */
    .beneficio-item h3 {
        font-size: 0.9rem !important; /* Título pequeño y claro */
        font-weight: 800 !important;
        margin-bottom: 8px !important;
        line-height: 1.1 !important;
    }

    .beneficio-item p {
        font-size: 0.75rem !important; /* Descripción corta */
        line-height: 1.3 !important;
        padding: 0 5px !important;
    }
}


@media (max-width: 992px) {

    /* 1. Quitamos los 500px fijos que causan el solapamiento */
    .contenedor-titulo-catalogo {
        display: flex !important;
        flex-direction: column !important; /* Apilamos los elementos verticalmente */
        grid-template-columns: none !important; 
        width: 100% !important;
        gap: 20px !important;
        padding: 20px 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 2. Ajuste del botón/tarjeta que contiene el título */
    .contenedor-titulo-catalogo .beneficio-item {
        width: 90% !important; /* Ocupa casi todo el ancho del móvil */
        min-width: auto !important;
        height: auto !important;
        min-height: 80px !important; /* Reducimos la altura para que no sea un bloque gigante */
        padding: 15px !important;
    }

    /* 3. Tamaño de la letra del título de sección */
    .titulo-seccion {
        font-size: 1.5rem !important; /* Un tamaño grande pero manejable */
        text-align: center !important;
        margin: 0 !important;
    }

    /* 4. La línea roja decorativa */
    .linea-roja {
        width: 100px !important;
        height: 4px !important;
        margin: 10px auto 30px !important;
    }
    .contenedor_head {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .img-container {
        width: 100% !important;
        order: 1; /* Imagen y botones primero */
    }

    .info-detalle {
        width: 100% !important;
        order: 2; /* Descripción y precio después */
    }

    .botones-colores-inferiores {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; /* Si hay muchos colores, saltan a la siguiente fila */
        justify-content: center !important;
        gap: 20px !important; /* Más separación para no presionar el equivocado */
        margin: 30px 0 !important;
        width: 100% !important;
    }

    /* Botón Cuadrado Gigante para Móvil */
    .btn-color-cuadrado {
        width: 400px !important;  /* Tamaño aumentado para facilitar el toque */
        height: 400px !important;
    }

    /* Efecto visual al tocar (Feedback táctil) */
    .btn-color-cuadrado:active {
        transform: scale(0.9) !important;
        border-color: var(--rojo-pulsar) !important;
    }

}