/* ================================================================= */
/* 1. RESET E GERAL                                                  */
/* ================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', Arial, sans-serif; background-color: #f4f4f4; color: #000; overflow-x: hidden; width: 100%; }

/* ================================================================= */
/* 2. HEADER                                                         */
/* ================================================================= */
header { background-color: #f4f4f4; padding: 15px 0; width: 100%; }
.header-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.left-icons { display: flex; align-items: center; gap: 15px; }
.icon-logo { width: 40px; height: auto; }
.icon-social { width: 32px; height: auto; cursor: pointer; transition: transform 0.2s; }
.icon-social:hover { transform: scale(1.1); }
.separator { width: 2px; height: 25px; background-color: #ddd; margin: 0 5px; }
.right-icon { display: flex; align-items: center; }
.shop-icon-wrapper { position: relative; display: inline-block; cursor: pointer; width: 45px; height: 45px; }
.shop-icon { width: 100%; height: auto; }
.cart-count { position: absolute; top: -5px; right: -8px; background-color: #c0392b; color: white; font-size: 12px; font-weight: bold; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #f4f4f4; z-index: 10; }

/* ================================================================= */
/* 3. HERO (HOME E PEDIDOS)                                          */
/* ================================================================= */
.hero, .hero-pedidos { display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 20px auto; padding: 0 20px; min-height: 450px; }
.hero-content, .hero-content-pedidos { flex: 1; text-align: left; padding-right: 20px; }
.hero-content h1, .hero-content-pedidos h1 { font-size: 4rem; font-weight: 900; margin-bottom: 10px; line-height: 1.1; }
.hero-content p, .hero-content-pedidos p { font-size: 1.2rem; color: #333; margin-bottom: 30px; }
.hero-image, .hero-image-pedidos { flex: 1; display: flex; justify-content: center; position: relative; }
.hero-image img, .hero-image-pedidos img { width: 100%; max-width: 550px; height: auto; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); }

/* ================================================================= */
/* 4. SERVIÇOS (CARDS DA HOME)                                       */
/* ================================================================= */
.services { text-align: center; padding: 60px 20px; }
.services h2 { font-size: 2.5rem; font-weight: 900; margin-bottom: 10px; }
.services p { color: #666; margin-bottom: 40px; }
.cards-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.card { background: white; padding: 30px 20px; border-radius: 20px; width: 280px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); text-align: center; transition: transform 0.3s; cursor: pointer; }
.card:hover { transform: translateY(-10px); }
.card img { width: 100%; height: 180px; object-fit: contain; margin-bottom: 20px; }
.card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; text-transform: uppercase; }
.arrow { display: block; font-size: 1.5rem; color: #ccc; margin-top: 10px; }

.btn-primary { display: inline-block; background-color: #c0392b; color: white; padding: 15px 35px; border-radius: 50px; text-decoration: none; font-weight: 900; font-size: 1rem; box-shadow: 0 5px 15px rgba(192, 57, 43, 0.4); transition: transform 0.2s; }
.btn-secondary { display: inline-block; background-color: #c0392b; color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: bold; margin-top: 40px; font-size: 0.9rem; }

/* ================================================================= */
/* 5. MODAL                                                          */
/* ================================================================= */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); backdrop-filter: blur(5px); }
.modal-content { background-color: transparent; margin: 5% auto; width: 90%; max-width: 900px; border-radius: 20px; overflow: hidden; position: relative; animation: zoomIn 0.3s; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
@keyframes zoomIn { from {transform: scale(0.8); opacity: 0;} to {transform: scale(1); opacity: 1;} }
.close-btn { position: absolute; top: 15px; right: 25px; color: #fff !important; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 100; }
.modal-layout { display: flex; flex-direction: row; height: 500px; }
.modal-img { flex: 1; background-color: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.modal-img img { width: 100%; height: 100%; object-fit: cover; }
.modal-split-red { flex: 1; background-color: #a93226 !important; color: white !important; padding: 50px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.modal-split-red h2 { font-size: 3rem; margin-bottom: 20px; line-height: 1; font-weight: 900; }
.modal-split-red p { font-size: 1.2rem; margin-bottom: 30px; line-height: 1.4; opacity: 0.95; }
.btn-agregar-black { background-color: #000 !important; color: white !important; border: none; padding: 18px 50px; border-radius: 50px; font-size: 15px; font-weight: 900; cursor: pointer; text-transform: uppercase; }

/* ================================================================= */
/* 6. CHECKOUT (LISTA + RESUMO VERMELHO)                             */
/* ================================================================= */
.checkout-layout { display: flex; max-width: 1100px; margin: 0 auto 40px auto; padding: 0 20px; gap: 20px; align-items: flex-start; }
.coluna-lista { flex: 1.8; display: flex; flex-direction: column; gap: 15px; }
.coluna-resumo { flex: 1; position: sticky; top: 20px; }

.item-pedido { display: flex; align-items: stretch; min-height: 180px; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; }
.pedido-foto { flex: 1; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; text-align: center; }
.pedido-foto img { width: 100px; height: auto; object-fit: contain; margin-bottom: 10px; }
.pedido-foto h4 { font-size: 12px; text-transform: uppercase; color: #000; font-weight: 900; }
.pedido-detalhes { flex: 1.5; background-color: #c0392b; color: white; padding: 20px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.pedido-detalhes h3 { font-size: 22px; font-weight: 900; margin-bottom: 5px; }
.pedido-detalhes p { font-size: 12px; margin-bottom: 10px; opacity: 0.9; }
.pedido-preco { font-size: 28px; font-weight: normal; }

.resumo-box { background-color: #b04639; color: white; padding: 25px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.resumo-box h3 { font-size: 1.8rem; font-weight: 900; margin-bottom: 20px; text-align: center; }
.form-checkout { margin-bottom: 20px; }
.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: 0.9rem; font-weight: 800; margin-bottom: 5px; color: white; }
.campo input, .campo textarea { width: 100%; padding: 12px; border-radius: 8px; border: none; background-color: rgba(255, 255, 255, 0.2); color: white; font-family: 'Montserrat', sans-serif; outline: none; }

.resumo-item-linha { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 1rem; }
.linha-total { display: flex; justify-content: space-between; font-size: 1.8rem; font-weight: 900; border-top: 1px solid rgba(255,255,255,0.4); padding-top: 15px; }
.btn-finalizar-resumo { display: block; width: 100%; margin-top: 20px; background-color: white; color: #b04639; text-align: center; padding: 15px; border-radius: 50px; font-weight: 900; text-decoration: none; text-transform: uppercase; }

/* ================================================================= */
/* 7. RESPONSIVIDADE PARA TELEFONE (FOTO 1)                          */
/* ================================================================= */
@media (max-width: 600px) {
    /* Header e Social */
    .header-container { padding: 10px; }
    .left-icons { gap: 8px; }
    .icon-logo { width: 32px; }
    .icon-social { width: 26px; }

    /* Hero */
    .hero, .hero-pedidos { flex-direction: column-reverse; text-align: center; padding: 20px 10px; min-height: auto; }
    .hero-content h1, .hero-content-pedidos h1 { font-size: 2.2rem; }
    .hero-image img, .hero-image-pedidos img { max-width: 260px; }

    /* Cards Home */
    .services h2 { font-size: 1.8rem; }
    .card { width: 100%; max-width: 320px; }

    /* Modal Mobile */
    .modal-layout { flex-direction: column; height: auto; }
    .modal-img { height: 200px; }
    .modal-split-red { padding: 30px 20px; align-items: center; text-align: center; }
    .modal-split-red h2 { font-size: 1.8rem; }

    /* Checkout Mobile */
    .checkout-layout { flex-direction: column; padding: 0 10px; gap: 25px; }
    .coluna-lista, .coluna-resumo { width: 100%; }

    /* CARD NO MOBILE (Foto 1: Lado a Lado) */
    .item-pedido { flex-direction: row; min-height: 140px; }
    .pedido-foto { padding: 10px; flex: 1; }
    .pedido-foto img { width: 70px; }
    .pedido-foto h4 { font-size: 10px; }
    .pedido-detalhes { flex: 1.8; padding: 15px; }
    .pedido-detalhes h3 { font-size: 16px; }
    .pedido-detalhes p { display: none; } /* Remove p/ caber na Foto 1 */
    .pedido-preco { font-size: 20px; }

    .resumo-box { position: static; padding: 20px; }
}

/* Animações */
.fade-in { opacity: 0; transform: translateY(20px); transition: 0.8s; }
.fade-in.appear { opacity: 1; transform: translateY(0); }