/* ============================================
   MEDIA QUERIES ORGANIZADAS POR RANGO
   ============================================ */

/* ---------- RANGO 1: 0px a 600px (Mobile) ---------- */
@media (min-width: 0px) and (max-width: 600px)
{
    :root {
        --separa-alto-seccion: 10vh;
    }
    .tarjeta-carga-datos
    {
        width: 97%;
    }
    div.modulos-informativos 
    {        
        max-width: 100%;
        width: 100%;
    }
    div.modulo-blanco, div.modulo-verde
    {
        width:100%;
    }
    div.resultado-modulo-blanco {
        width: 100%;
    }
}

/* ---------- RANGO 3: 900px a 1024px (Tablet) ---------- */
@media (min-width: 900px) and (max-width: 1024px)
{
    /* Reglas especificas para tablet */
    :root
    {
        --font-size-xxxl: calc(58px + (60 - 58) * (100vw - 768px) / (1440 - 768));
    }
    .container.grid-xxl
    {
        max-width:100%;
    }
    .font-nr.font-size-xxxl 
    {
        --font-size-xxxl: calc(98px + (110 - 98) * (100vw - 768px) / (1440 - 768));
    }
}

/* ---------- RANGO 4: 1024px a 1366px (Desktop estandar) ---------- */
@media (min-width: 1024px) and (max-width: 1366px)
{
	*[desktop-hidden]
	{
	    display: none !important;
	}

    .container.grid-xxl
    {
        max-width:100%;
    }
}

/* Dispositivos tactiles: mostrar sin mantener presionado */
    @media (hover: none)
    {
        .sec-cont-info-card p, .sec-cont-info-card .cont-btn-tarjeta {
            opacity: 1;
            transform: translateY(0px);
        }
        .cont-card-serv .card {
            background-color: var(--color-white);
            padding: 0.5rem;
        }
    }