/* =========================================================
   RESPONSIVE GENERAL
   ========================================================= */


/* =========================================================
   TABLETS Y PANTALLAS MEDIANAS
   ========================================================= */

@media (max-width: 991px) {

    body {
        overflow-x: hidden;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* =====================================================
       LOGO NAVBAR CIRCULAR
       ===================================================== */

    .navbar .navbar-brand img,
    .navbar .navbar-brand .logo,
    .navbar-brand > img {
        width: 56px !important;
        height: 56px !important;

        min-width: 56px !important;
        max-width: 56px !important;

        min-height: 56px !important;
        max-height: 56px !important;

        object-fit: cover !important;
        object-position: center !important;

        border-radius: 50% !important;

        background: #ffffff !important;

        border: 3px solid #f6b800 !important;

        padding: 2px !important;

        box-sizing: border-box !important;

        display: block !important;

        overflow: hidden !important;
    }


    /* HERO */

    .hero {
        height: 75vh;
        min-height: 500px;
    }

    .hero-content h1 {
        font-size: 52px;
    }

    .hero-content h2 {
        font-size: 30px;
    }

    .hero-content p {
        font-size: 23px;
    }


    /* BIENVENIDA */

    .bienvenida h2 {
        font-size: 34px;
    }


    /* ENCABEZADOS INTERNOS */

    .menu-header {
        padding: 75px 20px;
    }

    .menu-header h1 {
        font-size: 46px;
    }


    /* PRODUCTOS */

    .producto-card img {
        height: 210px;
    }


    /* PROMOCIONES */

    .promocion-card img {
        height: 220px;
    }


    /* EXPERIENCIA */

    .experiencia {
        padding: 65px 0;
    }

    .experiencia-card img {
        height: 220px;
    }


    /* CARRITO */

    .resumen-carrito {
        margin-top: 10px;
    }


    /* CHECKOUT */

    .checkout-resumen {
        margin-top: 10px;
    }
}



/* =========================================================
   CELULARES
   ========================================================= */

@media (max-width: 767px) {

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }


    /* =====================================================
       LOGO NAVBAR CIRCULAR
       ===================================================== */

    .navbar .navbar-brand img,
    .navbar .navbar-brand .logo,
    .navbar-brand > img {
        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;
        max-width: 52px !important;

        min-height: 52px !important;
        max-height: 52px !important;

        object-fit: cover !important;

        border-radius: 50% !important;

        background: #ffffff !important;

        border: 2px solid #f6b800 !important;

        padding: 2px !important;

        box-sizing: border-box !important;

        display: block !important;
    }


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

    .hero {
        height: 70vh;
        min-height: 470px;
    }

    .hero-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-content h1 {
        font-size: 40px;
        line-height: 1.1;
    }

    .hero-content h2 {
        font-size: 24px;
    }

    .hero-content p {
        font-size: 19px;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }


    /* =====================================================
       ENCABEZADOS
       ===================================================== */

    .menu-header {
        padding: 60px 15px;
    }

    .menu-header h1 {
        font-size: 36px;
    }

    .menu-header p {
        font-size: 16px;
    }


    /* =====================================================
       TEXTOS
       ===================================================== */

    .bienvenida h2 {
        font-size: 30px;
    }

    .bienvenida p {
        font-size: 16px;
    }

    .subtitulo {
        font-size: 12px;
        letter-spacing: 2px;
    }


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

    .producto-card img {
        height: 210px;
    }

    .producto-info {
        padding: 18px;
    }

    .producto-info h3 {
        font-size: 21px;
    }

    .producto-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .producto-bottom strong {
        text-align: center;
    }

    .producto-bottom .btn {
        width: 100%;
    }


    /* =====================================================
       PROMOCIONES
       ===================================================== */

    .promocion-card img {
        height: 210px;
    }

    .promocion-card h3 {
        font-size: 21px;
    }


    /* =====================================================
       EXPERIENCIA
       ===================================================== */

    .experiencia {
        padding: 55px 0;
    }

    .experiencia-card img {
        height: 210px;
    }


    /* =====================================================
       BOTONES
       ===================================================== */

    .btn-pio {
        width: 100%;
        max-width: 320px;
    }


    /* =====================================================
       CARRITO
       ===================================================== */

    .carrito-titulo {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    #vaciar-carrito {
        width: 100%;
    }

    .resumen-carrito {
        margin-top: 20px;
    }

    .btn-continuar,
    .btn-checkout {
        width: 100%;
    }


    /* =====================================================
       CHECKOUT
       ===================================================== */

    .checkout-card,
    .checkout-resumen {
        padding: 20px;
    }

    .checkout-card h2,
    .checkout-resumen h2 {
        font-size: 24px;
    }

    .btn-confirmar {
        width: 100%;
    }


    /* =====================================================
       PEDIDO EXITOSO
       ===================================================== */

    .pedido-exitoso h1 {
        font-size: 30px;
    }
}



/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 575px) {


    /* LOGO NAVBAR */

    .navbar .navbar-brand img,
    .navbar .navbar-brand .logo,
    .navbar-brand > img {
        width: 50px !important;
        height: 50px !important;

        min-width: 50px !important;
        max-width: 50px !important;

        min-height: 50px !important;
        max-height: 50px !important;

        border-radius: 50% !important;

        object-fit: cover !important;

        background: #ffffff !important;

        border: 2px solid #f6b800 !important;

        padding: 2px !important;
    }


    /* HERO */

    .hero {
        min-height: 440px;
    }

    .hero-content h1 {
        font-size: 34px;
    }

    .hero-content h2 {
        font-size: 21px;
    }

    .hero-content p {
        font-size: 17px;
    }


    /* ENCABEZADOS */

    .menu-header {
        padding: 50px 15px;
    }

    .menu-header h1 {
        font-size: 32px;
    }


    /* TARJETAS */

    .producto-card,
    .promocion-card,
    .experiencia-card,
    .checkout-card,
    .checkout-resumen,
    .resumen-carrito {
        border-radius: 12px;
    }


    /* IMÁGENES */

    .producto-card img,
    .promocion-card img {
        height: 200px;
    }

    .experiencia-card img {
        height: 200px;
    }


    /* FORMULARIOS */

    .form-control,
    .form-select {
        font-size: 16px;
    }


    /* RESÚMENES */

    .resumen-linea,
    .resumen-total {
        gap: 10px;
    }
}



/* =========================================================
   CELULARES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 400px) {


    /* LOGO NAVBAR */

    .navbar .navbar-brand img,
    .navbar .navbar-brand .logo,
    .navbar-brand > img {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        max-width: 46px !important;

        min-height: 46px !important;
        max-height: 46px !important;

        border-radius: 50% !important;

        object-fit: cover !important;
    }


    .hero-content h1 {
        font-size: 30px;
    }

    .hero-content h2 {
        font-size: 19px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .menu-header h1 {
        font-size: 29px;
    }

    .producto-info {
        padding: 15px;
    }

    .checkout-card,
    .checkout-resumen {
        padding: 15px;
    }
}