:root { 
            --primary: #1e3c72; 
            --secondary: #2a5298; 
            --accent: #FFC107; 
            --bg: rgba(242, 248, 252, 0.8); 
            --surface: rgba(255, 255, 255, 0.85); 
            --surface-border: rgba(255, 255, 255, 0.5); 
            --text: #333333; 
            --text-light: #888888; 
            --shadow: 0 10px 30px rgba(0,0,0,0.06); 
            --brand-pink: #f472b6; 
        }

        * { 
            box-sizing: border-box; 
            margin: 0; 
            padding: 0; 
            -webkit-tap-highlight-color: transparent; 
        }

        body { 
            font-family: 'Inter', sans-serif; 
            background: linear-gradient(rgba(242, 248, 252, 0.85), rgba(242, 248, 252, 0.92)), url('https://images.unsplash.com/photo-1620121692029-d088224ddc74?auto=format&fit=crop&q=80') no-repeat center center fixed; 
            background-size: cover; 
            color: var(--text); 
            padding-bottom: 0px; 
        }
        
        .app-header { 
            background: url('/Fundo.png') no-repeat center center; 
            background-size: cover; 
            padding: 40px 20px 30px 20px; 
            text-align: center; 
            border-bottom-left-radius: 30px; 
            border-bottom-right-radius: 30px; 
            box-shadow: var(--shadow); 
            margin-bottom: 25px; 
            position: relative; 
            z-index: 10; 
            overflow: hidden; 
        }

        .app-header::after { 
            content: ''; 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            width: 100%; 
            height: 80px; 
            background: linear-gradient(to top, rgba(255,255,255,0.8), transparent); 
            pointer-events: none; 
        }

        .header-wrapper { 
            position: relative; 
            display: inline-block; 
            margin: 0 auto; 
            z-index: 2; 
        }

        .app-logo { 
            width: 175px; 
            height: 175px; 
            object-fit: contain; 
            background: white; 
            border-radius: 50%; 
            padding: 8px; 
            box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
            margin-bottom: 3px; 
            position: relative; 
            z-index: 3; 
        }
        
        .header-text { 
            position: relative; 
            z-index: 3; 
        }

        .header-text p { 
            color: #777; 
            font-size: 0.85em; 
            font-weight: 600; 
            background: rgba(255,255,255,0.6); 
            display: inline-block; 
            padding: 8px 18px; 
            border-radius: 100px; 
            backdrop-filter: blur(6px); 
            margin-top: 0px; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.06); 
            white-space: nowrap; 
        }

        .container { 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 0 20px; 
        }

        .view-section { 
            display: none; 
            animation: fadeIn 0.4s ease; 
        }

        .view-section.active { 
            display: block; 
        }

        @keyframes fadeIn { 
            from { opacity: 0; transform: translateY(10px); } 
            to { opacity: 1; transform: translateY(0); } 
        }

        .section-title { 
            font-family: 'Poppins'; 
            font-size: 1.1em; 
            color: var(--text); 
            margin: 10px 0 15px 0; 
            padding-left: 10px; 
            border-left: 4px solid var(--accent); 
            line-height: 1; 
        }
        
        .info-banner-warning { 
            background: rgba(255, 251, 235, 0.9); 
            backdrop-filter: blur(10px); 
            border: 1px solid #fde68a; 
            border-left: 5px solid #d97706; 
            padding: 18px; 
            border-radius: 12px; 
            margin-bottom: 25px; 
            color: #92400e; 
            font-size: 0.9em; 
            line-height: 1.5; 
            box-shadow: var(--shadow); 
        }

        .info-banner-warning h4 { 
            margin: 0 0 8px 0; 
            font-family: 'Poppins'; 
            font-size: 1.05em; 
            color: #b45309; 
            display:flex; 
            align-items:center; 
            gap:8px;
        }

        .info-banner-warning ul { 
            margin: 0; 
            padding-left: 20px; 
        }

        .info-banner-warning li { 
            margin-bottom: 5px; 
        }

        .filter-bar { 
            display: flex; 
            gap: 10px; 
            overflow-x: auto; 
            padding: 5px 5px 15px 5px; 
            margin-bottom: 10px; 
            scrollbar-width: none; 
        }

        .filter-bar::-webkit-scrollbar { 
            display: none; 
        }

        .filter-btn { 
            background: var(--surface); 
            backdrop-filter: blur(12px); 
            border: 1px solid var(--surface-border); 
            border-radius: 20px; 
            padding: 8px 16px; 
            font-size: 0.9em; 
            font-weight: 600; 
            color: #555; 
            cursor: pointer; 
            white-space: nowrap; 
            transition: 0.2s; 
        }

        .filter-btn.active { 
            background: var(--primary); 
            color: white; 
            border-color: var(--primary); 
            box-shadow: 0 4px 10px rgba(30, 60, 114, 0.3); 
        }

        .catalogo-list { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
            gap: 20px; 
        }
        
        .produto-card { 
            background: var(--surface); 
            backdrop-filter: blur(12px); 
            border-radius: 16px; 
            padding: 15px; 
            display: flex; 
            flex-direction: column; 
            box-shadow: var(--shadow); 
            transition: transform 0.2s; 
            border: 1px solid var(--surface-border); 
            position: relative; 
        }

        .produto-card:hover { 
            transform: translateY(-3px); 
            border-color: var(--primary); 
        }
        
        .card-img-wrapper { 
            width: 100%; 
            height: 200px; 
            flex-shrink: 0; 
            position: relative; 
            background: rgba(255,255,255,0.8); 
            border-radius: 12px; 
            border: 1px solid var(--surface-border); 
            overflow: hidden; 
            margin-bottom: 15px; 
        }

        .card-media-slot,
        .card-main-img,
        .card-main-video { 
            width: 100%; 
            height: 100%; 
        }

        .card-main-img,
        .card-main-video {
            object-fit: contain; 
            display: block; 
        }

        .card-main-img {
            padding: 5px;
        }

        .card-main-video {
            background: #0f172a;
        }
        
        .gallery-nav { 
            position: absolute; 
            top: 50%; 
            transform: translateY(-50%); 
            background: rgba(0,0,0,0.3); 
            color: white; 
            border: none; 
            width: 30px; 
            height: 30px; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            cursor: pointer; 
            font-size: 14px; 
            z-index: 2; 
            transition: 0.2s; 
        }

        .gallery-nav:hover { 
            background: rgba(0,0,0,0.6); 
        }

        .nav-left { left: 5px; } 
        .nav-right { right: 5px; }

        .photo-count-indicator { 
            position: absolute; 
            bottom: 5px; 
            right: 5px; 
            background: rgba(0,0,0,0.6); 
            color: white; 
            font-size: 10px; 
            padding: 3px 8px; 
            border-radius: 8px; 
            pointer-events: none; 
            z-index: 2; 
            font-weight: 600;
        }
        
        .card-info { 
            display: flex; 
            flex-direction: column; 
            flex-grow: 1; 
            justify-content: space-between; 
        }

        .card-info h3 { 
            font-family: 'Poppins'; 
            font-size: 1.1em; 
            color: var(--text); 
            margin-bottom: 8px; 
            line-height: 1.3;
        }

        .card-price { 
            color: var(--primary); 
            font-weight: 700; 
            font-size: 1.3em; 
            margin-bottom: 10px; 
        }

        .card-label { 
            font-size: 0.75em; 
            font-weight: 600; 
            color: #999; 
            margin-top: 8px; 
            display: block; 
            text-transform: uppercase;
        }

        .card-select, .card-input-read { 
            padding: 10px; 
            border-radius: 8px; 
            border: 1px solid var(--surface-border); 
            background: rgba(255,255,255,0.7); 
            font-size: 0.9em; 
            width: 100%; 
            outline:none; 
            transition:0.2s;
        }

        .card-select:focus { 
            border-color: var(--primary); 
            background: #fff; 
            box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.1); 
        }

        .card-input-read { 
            background: transparent; 
            color: #555; 
            cursor: default; 
            border-style: dashed; 
        }
        
        .btn-add { 
            background: var(--primary); 
            color: white; 
            border: none; 
            padding: 12px; 
            border-radius: 10px; 
            font-weight: 600; 
            font-size: 1em; 
            cursor: pointer; 
            width: 100%; 
            margin-top: 15px; 
            text-align: center; 
            transition: 0.2s; 
            box-shadow: 0 4px 10px rgba(30, 60, 114, 0.2);
        }

        .btn-add:active { 
            transform: scale(0.98); 
            background: var(--secondary); 
        }
        
        .custom-form { 
            background: var(--surface); 
            backdrop-filter: blur(12px); 
            padding: 25px; 
            border-radius: 20px; 
            box-shadow: var(--shadow); 
            border: 1px solid var(--surface-border); 
        }

        .form-group { 
            margin-bottom: 20px; 
        }

        .form-group label { 
            display: block; 
            font-weight: 600; 
            font-size: 0.9em; 
            margin-bottom: 8px; 
            color: var(--text); 
        }

        .form-group input, 
        .form-group textarea, 
        .form-group select { 
            width: 100%; 
            padding: 15px; 
            border: 2px solid var(--surface-border); 
            border-radius: 12px; 
            font-family: 'Inter'; 
            font-size: 1em; 
            transition: 0.3s; 
            background: rgba(255,255,255,0.7); 
            outline:none;
        }

        .form-group input:focus, 
        .form-group textarea:focus, 
        .form-group select:focus { 
            border-color: var(--primary); 
            background: #fff;
        }

        .btn-submit { 
            background: linear-gradient(90deg, var(--primary), var(--secondary)); 
            color: white; 
            width: 100%; 
            padding: 16px; 
            border: none; 
            border-radius: 12px; 
            font-weight: 700; 
            font-size: 1em; 
            cursor: pointer; 
            box-shadow: 0 5px 15px rgba(30, 60, 114, 0.2); 
            transition: 0.3s;
        }
        
        .order-card { 
            background: var(--surface); 
            backdrop-filter: blur(12px); 
            padding: 15px; 
            border-radius: 12px; 
            border: 1px solid var(--surface-border); 
            margin-bottom: 10px; 
            border-left: 5px solid #ccc; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
        }

        .st-badge { 
            display: inline-block; 
            padding: 4px 10px; 
            border-radius: 20px; 
            font-size: 0.8em; 
            font-weight: bold; 
            margin-top: 5px; 
        }
        
        /* GRUPO DOS BOTÕES FLUTUANTES */
        .fab-wrapper { 
            position: fixed; 
            bottom: 85px; 
            right: 20px; 
            display: flex; 
            flex-direction: column; 
            align-items: flex-end; 
            gap: 12px; 
            z-index: 150; 
        }
        
        .fab-cart { 
            background: linear-gradient(135deg, #FFC107, #FF9800); 
            color: #333; 
            width: 60px; 
            height: 60px; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
            cursor: pointer; 
            font-size: 1.5em; 
            transition: transform 0.2s; 
            position: relative; 
        }

        .fab-cart:active { 
            transform: scale(0.9); 
        }

        .cart-badge { 
            position: absolute; 
            top: -5px; 
            right: -5px; 
            background: #d32f2f; 
            color: white; 
            font-size: 0.75em; 
            font-weight: bold; 
            width: 24px; 
            height: 24px; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            border: 2px solid white; 
        }
        
        .fab-deadline { 
            background: rgba(255, 255, 255, 0.9); 
            backdrop-filter: blur(5px); 
            color: #0284c7; 
            border: 2px solid #bae6fd; 
            width: 46px; 
            height: 46px; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
            cursor: pointer; 
            font-size: 1.2em; 
            transition: all 0.2s; 
            position: relative; 
            outline: none; 
            margin-right: 7px; 
        }

        .fab-deadline:hover, 
        .fab-deadline:focus { 
            transform: scale(1.05); 
            background: #e0f2fe; 
            border-color: #0284c7; 
        }
        
        /* MINI-JANELA COM O ESTILO DA FAIXA ORIGINAL */
        .tooltip-deadline { 
            position: absolute; 
            right: 55px; 
            bottom: 0; 
            background: rgba(224, 242, 254, 0.95); 
            backdrop-filter: blur(10px); 
            border: 1px solid #bae6fd; 
            border-left: 5px solid #0284c7; 
            box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
            padding: 15px; 
            border-radius: 12px; 
            width: 290px; 
            max-width: 80vw; 
            font-size: 0.75em; 
            color: #075985; 
            opacity: 0; 
            pointer-events: none; 
            transition: 0.3s; 
            transform: translateX(10px); 
            text-align: left; 
            line-height: 1.5; 
        }

        .fab-deadline:hover .tooltip-deadline, 
        .fab-deadline:focus .tooltip-deadline { 
            opacity: 1; 
            pointer-events: auto; 
            transform: translateX(0); 
        }

        .tooltip-deadline h4 { 
            margin: 0 0 8px 0; 
            color: #0369a1; 
            font-size: 1.1em; 
            display:flex; 
            align-items:center; 
            gap:5px; 
            font-family: 'Poppins';
        }

        .tooltip-deadline ul { 
            margin: 0; 
            padding-left: 18px; 
        }

        .tooltip-deadline li { 
            margin-bottom: 5px; 
        }

        .modal-cart-overlay { 
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(0,0,0,0.5); 
            z-index: 2000; 
            align-items: flex-end; 
            justify-content: center; 
            backdrop-filter: blur(3px); 
        }

        .modal-cart-content { 
            background: rgba(255,255,255,0.95); 
            backdrop-filter: blur(15px); 
            width: 100%; 
            max-width: 600px; 
            border-top-left-radius: 20px; 
            border-top-right-radius: 20px; 
            padding: 25px; 
            max-height: 90vh; 
            overflow-y: auto; 
            box-shadow: 0 -10px 30px rgba(0,0,0,0.15); 
            animation: slideUp 0.3s ease; 
            border-top: 1px solid var(--surface-border); 
        }

        @keyframes slideUp { 
            from { transform: translateY(100%); } 
            to { transform: translateY(0); } 
        }

        .cart-item { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: 10px 0; 
            border-bottom: 1px solid #eee; 
        }

        .cart-item-info h4 { 
            margin: 0; 
            font-size: 0.95em; 
            color: var(--primary); 
        }

        .cart-item-info p { 
            margin: 2px 0 0 0; 
            font-size: 0.8em; 
            color: #666; 
        }

        .btn-remove { 
            color: #d32f2f; 
            background: none; 
            border: none; 
            font-size: 1.2em; 
            cursor: pointer; 
            padding: 5px; 
        }
        
        .coupon-box { 
            display: flex; 
            gap: 10px; 
            margin-top: 20px; 
            padding-top: 15px; 
            border-top: 1px solid #eee; 
        }

        .coupon-box input { 
            flex: 1; 
            padding: 10px; 
            border: 2px dashed #ccc; 
            border-radius: 8px; 
            font-family: 'Inter'; 
            text-transform: uppercase; 
            background: transparent; 
            outline: none; 
            transition: 0.3s;
        }

        .coupon-box input:focus { 
            border-color: var(--primary); 
        }

        .coupon-box button { 
            background: var(--secondary); 
            color: white; 
            border: none; 
            padding: 0 20px; 
            border-radius: 8px; 
            font-weight: bold; 
            cursor: pointer; 
            transition: 0.2s;
        }

        .coupon-box button:active { 
            transform: scale(0.95); 
        }

        .coupon-msg { 
            font-size: 0.8em; 
            font-weight: bold; 
            margin-top: 5px; 
        }

        .cart-summary { 
            margin-top: 15px; 
            padding-top: 10px; 
            border-top: 1px solid #eee; 
        }

        .summary-row { 
            display: flex; 
            justify-content: space-between; 
            align-items: flex-start; 
            font-size: 0.95em; 
            margin-bottom: 5px; 
            color: #555; 
        }

        .summary-total { 
            display: flex; 
            justify-content: space-between; 
            font-size: 1.3em; 
            font-weight: 700; 
            color: var(--primary); 
            margin-top: 10px; 
        }
        
        .cart-form { 
            margin-top: 20px; 
            border-top: 2px dashed #eee; 
            padding-top: 20px; 
        }

        .switch { 
            position: relative; 
            display: inline-block; 
            width: 40px; 
            height: 22px; 
        }

        .switch input { 
            opacity: 0; 
            width: 0; 
            height: 0; 
        }

        .slider { 
            position: absolute; 
            cursor: pointer; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0; 
            background-color: #ccc; 
            transition: .4s; 
            border-radius: 34px; 
        }

        .slider:before { 
            position: absolute; 
            content: ""; 
            height: 16px; 
            width: 16px; 
            left: 3px; 
            bottom: 3px; 
            background-color: white; 
            transition: .4s; 
            border-radius: 50%; 
        }

        input:checked + .slider { 
            background-color: var(--primary); 
        }

        input:checked + .slider:before { 
            transform: translateX(18px); 
        }

        .delivery-toggle-row { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            margin-bottom: 15px; 
            background: rgba(249,249,249,0.6); 
            padding: 12px; 
            border-radius: 12px; 
            border: 1px solid var(--surface-border); 
        }

        .address-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 10px; 
        }

        .input-readonly { 
            background-color: rgba(240,240,240,0.6) !important; 
            color: #777; 
            cursor: default; 
        }

        .site-footer { 
            background: rgba(240, 248, 255, 0.6); 
            backdrop-filter: blur(10px); 
            border-top: 1px solid rgba(255, 255, 255, 0.5); 
            margin-top: 40px; 
            padding: 40px 20px 100px 20px; 
        }

        .footer-content { 
            display: grid; 
            grid-template-columns: 1fr auto 1fr; 
            align-items: center; 
            gap: 20px; 
            max-width: 1200px; 
            margin: 0 auto; 
        }

        .footer-info { 
            grid-column: 1; 
        }

        .footer-info h4 { 
            font-family: 'Poppins', sans-serif; 
            color: var(--primary); 
            font-size: 1.2em; 
            margin-bottom: 15px; 
        }

        .footer-info p { 
            margin: 8px 0; 
            font-size: 0.95em; 
            color: #444; 
            font-weight: 500; 
        }

        .footer-info a { 
            color: var(--primary); 
            text-decoration: none; 
            font-weight: 600; 
            transition: color 0.2s; 
        }

        .footer-info a:hover { 
            color: var(--brand-pink); 
            text-decoration: underline; 
        }

        .footer-logo { 
            grid-column: 2; 
            text-align: center; 
        }

        .footer-logo img { 
            width: 110px; 
            height: 110px; 
            border-radius: 50%; 
            object-fit: contain; 
            background: white; 
            padding: 6px; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.08); 
        }

        @media (max-width: 768px) {
            .footer-content { 
                display: flex; 
                flex-direction: column-reverse; 
                text-align: center; 
            }
            .footer-logo { 
                margin-bottom: 20px; 
            }
            .site-footer { 
                padding: 40px 20px 110px 20px; 
            }
        }

        .bottom-nav { 
            position: fixed; 
            bottom: 0; 
            left: 0; 
            width: 100%; 
            background: rgba(255, 255, 255, 0.95); 
            backdrop-filter: blur(15px); 
            display: flex; 
            justify-content: space-around; 
            padding: 10px 0; 
            box-shadow: 0 -8px 20px rgba(0,0,0,0.08); 
            z-index: 100; 
            border-top: 1px solid var(--surface-border); 
        }

        .nav-item { 
            background: none; 
            border: none; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: flex-end; 
            gap: 2px; 
            color: #666666; 
            cursor: pointer; 
            font-size: 0.85em; 
            font-weight: 700; 
            font-family: 'Poppins'; 
            transition: 0.3s; 
            outline: none; 
        }

        .nav-icon { 
            font-size: 1.8em; 
            margin-bottom: 0; 
            transition: 0.3s;
            transform-origin: bottom center; 
        }

        .nav-item.active { 
            color: var(--primary); 
        }

        .nav-item.active .nav-icon { 
            color: var(--primary); 
            transform: scale(1.15); 
        }
        
        .modal-zoom { 
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(0,0,0,0.9); 
            z-index: 200; 
            justify-content: center; 
            align-items: center; 
            backdrop-filter: blur(5px); 
        }

        .modal-zoom img { 
            max-width: 95%; 
            max-height: 80vh; 
            border-radius: 10px; 
        }

        .loading { 
            text-align: center; 
            padding: 40px; 
            color: #999; 
        }

        .link-reset-mini { 
            display:block; 
            font-size:0.75em; 
            color:#999; 
            text-decoration:underline; 
            cursor:pointer; 
            margin-top:4px; 
            margin-bottom:8px; 
        }