/* =========================================
   DORILOCOS
   ESTILOS PRINCIPALES
   ========================================= */


/* ---------- CONFIGURACIÓN GENERAL ---------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #fff7ed;
    color: #292929;
    line-height: 1.6;
}


/* ---------- VARIABLES ---------- */

:root {

    --rojo: #e53935;
    --rojo-oscuro: #b71c1c;

    --amarillo: #ffc107;
    --amarillo-oscuro: #f59f00;

    --naranja: #ff7a00;
    --naranja-oscuro: #e85d00;

    --crema: #fff7ed;
    --blanco: #ffffff;

    --gris: #666;
    --oscuro: #292929;

}


/* =========================================
   NAVBAR
   ========================================= */

header {

    width: 100%;

    background-color: var(--oscuro);

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow:
        0 3px 15px rgba(0, 0, 0, 0.20);

}


.navbar {

    width: 90%;

    max-width: 1200px;

    height: 80px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.logo {

    text-decoration: none;

    font-size: 1.6rem;

    font-weight: 800;

    color: var(--amarillo);

    white-space: nowrap;

}


/* ---------- MENÚ ---------- */

.menu {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 30px;

}


.menu li a {

    text-decoration: none;

    color: white;

    font-size: 0.95rem;

    font-weight: 500;

    transition: 0.3s;

}


.menu li a:hover {

    color: var(--amarillo);

}


/* ---------- CARRITO ---------- */

.cart {

    text-decoration: none;

    border: none;

    background-color: var(--rojo);

    color: white;

    padding: 11px 18px;

    border-radius: 25px;

    font-family: 'Poppins', sans-serif;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;

}


.cart:hover {

    background-color: var(--rojo-oscuro);

    transform: translateY(-2px);

}


/* ---------- HAMBURGUESA ---------- */

.menu-hamburguesa {

    display: none;

    border: none;

    background: transparent;

    color: white;

    font-size: 2rem;

    cursor: pointer;

}


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

.hero {

    min-height: 600px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.78),
            rgba(0, 0, 0, 0.25)
        ),
        url("../img/dorilocos-banner.jpg");

    background-size: cover;

    background-position: center;

    padding: 60px 8%;

}


.hero-text {

    max-width: 600px;

    color: white;

    animation: aparecer 1s ease;

}


.hero-text h1 {

    font-size: 3.5rem;

    line-height: 1.15;

    margin-bottom: 25px;

    font-weight: 800;

}


.hero-text p {

    font-size: 1.15rem;

    margin-bottom: 30px;

    max-width: 500px;

}


/* ---------- BOTÓN ---------- */

.btn {

    display: inline-block;

    text-decoration: none;

    border: none;

    background-color: var(--amarillo);

    color: var(--oscuro);

    padding: 14px 30px;

    border-radius: 30px;

    font-family: 'Poppins', sans-serif;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    transition: 0.3s;

}


.btn:hover {

    background-color: var(--naranja);

    color: white;

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.25);

}


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

.productos {

    width: 90%;

    max-width: 900px;

    margin: auto;

    padding: 80px 0;

}


.productos h2,
.promociones h2,
.nosotros h2,
.contacto h2 {

    text-align: center;

    font-size: 2.2rem;

    color: var(--oscuro);

    margin-bottom: 45px;

}


.productos h2::after,
.promociones h2::after,
.nosotros h2::after,
.contacto h2::after {

    content: "";

    display: block;

    width: 60px;

    height: 5px;

    background-color: var(--rojo);

    margin: 12px auto 0;

    border-radius: 10px;

}


/* =========================================
   TARJETA
   ========================================= */

.cards {

    display: flex;

    justify-content: center;

}


.card {

    width: 100%;

    max-width: 500px;

    background-color: white;

    border-radius: 25px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.12);

    padding-bottom: 30px;

    transition: 0.3s;

}


.card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.16);

}


.card img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    display: block;

}


.card h3 {

    font-size: 1.5rem;

    color: var(--oscuro);

    margin: 22px 25px 5px;

}


.card > p {

    color: var(--gris);

    font-size: 0.95rem;

    margin: 0 25px 15px;

}


/* ---------- PRECIO BASE ---------- */

.precio-producto {

    display: block;

    color: var(--rojo);

    font-size: 1.4rem;

    font-weight: 800;

    margin: 0 25px 20px;

}


/* =========================================
   CANTIDAD
   ========================================= */

.cantidad-producto {

    margin: 0 25px 20px;

    padding: 14px;

    background-color: #fff8e1;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

}


.cantidad-producto span {

    font-weight: 600;

    margin-right: 5px;

}


.cantidad-producto button {

    width: 32px;

    height: 32px;

    border: none;

    border-radius: 50%;

    background-color: var(--rojo);

    color: white;

    font-size: 1.2rem;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s;

}


.cantidad-producto button:hover {

    background-color: var(--rojo-oscuro);

    transform: scale(1.08);

}


.cantidad-producto strong {

    min-width: 25px;

    text-align: center;

}


/* =========================================
   COMPLEMENTOS
   ========================================= */

.complementos {

    margin: 0 25px 20px;

}


.complementos h4 {

    color: var(--oscuro);

    font-size: 1.05rem;

    margin-bottom: 12px;

}


.complementos label {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 12px;

    margin-bottom: 7px;

    background-color: #fafafa;

    border: 1px solid #eee;

    border-radius: 10px;

    cursor: pointer;

    transition: 0.2s;

}


.complementos label:hover {

    background-color: #fff3e0;

    border-color: var(--amarillo);

}


.complementos input {

    width: 17px;

    height: 17px;

    accent-color: var(--rojo);

    cursor: pointer;

}


.complementos label span {

    flex: 1;

    font-size: 0.9rem;

}


.complementos label strong {

    color: var(--rojo);

    font-size: 0.85rem;

}


/* =========================================
   PRECIO FINAL
   ========================================= */

.precio-final {

    margin: 0 25px 20px;

    padding: 15px 18px;

    border-radius: 12px;

    background-color: var(--oscuro);

    color: white;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.precio-final span {

    font-weight: 600;

}


.precio-final strong {

    color: var(--amarillo);

    font-size: 1.3rem;

}


/* =========================================
   BOTÓN AGREGAR
   ========================================= */

.card .btn-agregar {

    border: none;

    background-color: var(--rojo);

    color: white;

    padding: 13px 25px;

    border-radius: 30px;

    font-family: 'Poppins', sans-serif;

    font-weight: 700;

    cursor: pointer;

    margin-left: 25px;

    transition: 0.3s;

}


.card .btn-agregar:hover {

    background-color: var(--rojo-oscuro);

    transform: scale(1.04);

}


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

.promociones {

    background-color: var(--rojo);

    color: white;

    text-align: center;

    padding: 70px 20px;

}


.promociones h2 {

    color: white;

    margin-bottom: 20px;

}


.promociones h2::after {

    background-color: var(--amarillo);

}


.promociones p {

    font-size: 1.3rem;

    font-weight: 600;

}


/* =========================================
   NOSOTROS
   ========================================= */

.nosotros {

    width: 90%;

    max-width: 850px;

    margin: auto;

    padding: 80px 0;

    text-align: center;

}


.nosotros p {

    color: var(--gris);

    font-size: 1.05rem;

    line-height: 1.9;

}


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

.contacto {

    background-color: #fff0e0;

    text-align: center;

    padding: 70px 20px;

}


.contacto p {

    color: var(--gris);

    font-size: 1rem;

    margin: 10px 0;

}


/* =========================================
   FOOTER
   ========================================= */

footer {

    background-color: var(--oscuro);

    color: white;

    text-align: center;

    padding: 25px 15px;

    font-size: 0.9rem;

}


/* =========================================
   ANIMACIÓN
   ========================================= */

@keyframes aparecer {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================
   TABLETS
   ========================================= */

@media (max-width: 800px) {

    .navbar {

        position: relative;

    }


    .menu-hamburguesa {

        display: block;

        margin-left: auto;

        margin-right: 15px;

    }


    .menu {

        display: none;

        position: absolute;

        top: 80px;

        left: 0;

        width: 100%;

        background-color: var(--oscuro);

        flex-direction: column;

        gap: 0;

        padding: 10px 0;

        box-shadow:
            0 8px 15px rgba(0, 0, 0, 0.20);

    }


    .menu.activo {

        display: flex;

    }


    .menu li {

        width: 100%;

        text-align: center;

    }


    .menu li a {

        display: block;

        padding: 12px;

    }


    .cart {

        padding: 9px 14px;

        font-size: 0.85rem;

    }

}


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

@media (max-width: 650px) {

    .navbar {

        height: auto;

        padding: 15px 0;

        flex-wrap: wrap;

        gap: 15px;

    }


    .logo {

        font-size: 1.3rem;

    }


    .hero {

        min-height: 520px;

        padding: 50px 7%;

    }


    .hero-text h1 {

        font-size: 2.4rem;

    }


    .hero-text p {

        font-size: 1rem;

    }


    .productos {

        padding: 60px 0;

    }


    .productos h2,
    .promociones h2,
    .nosotros h2,
    .contacto h2 {

        font-size: 1.8rem;

    }


    .card img {

        height: 230px;

    }


    .cantidad-producto {

        gap: 10px;

    }


    .complementos label {

        padding: 9px;

    }

}