/*

██████╗ ██╗      █████╗  ██████╗██╗  ██╗ ██████╗██╗  ██╗ ██████╗ ██████╗ ██╗███╗   ███╗ █████╗          ██████╗ ██████╗ ███╗   ███╗
██╔══██╗██║     ██╔══██╗██╔════╝██║ ██╔╝██╔════╝██║  ██║██╔═══██╗██╔══██╗██║████╗ ████║██╔══██╗        ██╔════╝██╔═══██╗████╗ ████║
██████╔╝██║     ███████║██║     █████╔╝ ██║     ███████║██║   ██║██████╔╝██║██╔████╔██║███████║        ██║     ██║   ██║██╔████╔██║
██╔══██╗██║     ██╔══██║██║     ██╔═██╗ ██║     ██╔══██║██║   ██║██╔══██╗██║██║╚██╔╝██║██╔══██║        ██║     ██║   ██║██║╚██╔╝██║
██████╔╝███████╗██║  ██║╚██████╗██║  ██╗╚██████╗██║  ██║╚██████╔╝██║  ██║██║██║ ╚═╝ ██║██║  ██║ █████╗ ╚██████╗╚██████╔╝██║ ╚═╝ ██║
╚═════╝ ╚══════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝╚═╝     ╚═╝╚═╝  ╚═╝ ╚════╝  ╚═════╝ ╚═════╝ ╚═╝     ╚═╝
*/
/* Estilos para los ejemplos Responsive */
.demo-box {
    background-color: #34495e;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.ejemplo-codigo {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin-bottom: 10px;
}

/* Ejemplo de Media Query en vivo */
.responsive-demo {
    background-color: #e74c3c;
    padding: 20px;
    color: white;
    text-align: center;
    font-weight: bold;
}

@media (min-width: 600px) {
    .responsive-demo {
        background-color: #f1c40f;
        color: #333;
    }

    .responsive-demo::after {
        content: " (Tablet / Pequeño)";
    }
}

@media (min-width: 900px) {
    .responsive-demo {
        background-color: #2ecc71;
        color: white;
    }

    .responsive-demo::after {
        content: " (Escritorio)";
    }
}

.grid-responsive {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    /* Móvil por defecto */
}

@media (min-width: 600px) {
    .grid-responsive {
        grid-template-columns: 1fr 1fr;
        /* Tablet: 2 columnas */
    }
}

@media (min-width: 900px) {
    .grid-responsive {
        grid-template-columns: 1fr 1fr 1fr;
        /* Escritorio: 3 columnas */
    }
}