/* ==============================================
   RESPONSIVIDADE COMPLETA - ELETROS BRASIL SHOP
   VERSÃO CORRIGIDA PARA TELAS VERTICAIS
   ============================================== */

/* ===== VARIÁVEIS RESPONSIVAS ===== */
:root {
    --container-padding-desktop: 20px;
    --container-padding-tablet: 15px;
    --container-padding-mobile: 12px;
}

/* ===== AJUSTES GERAIS ===== */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
        padding: 0 var(--container-padding-desktop);
    }
    
    .produtos-grid {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 25px;
    }
}

/* ===== TABLET (768px - 1024px) ===== */
@media (max-width: 1024px) {
    .container {
        max-width: 90%;
        padding: 0 var(--container-padding-tablet);
    }
    
    .carrossel-slides {
        height: 450px;
    }
    
    .slide-conteudo h3 {
        font-size: 1.5rem;
    }
    
    .slide-conteudo p {
        font-size: 0.9rem;
    }
    
    .produtos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .hero-stats {
        gap: 20px;
    }
    
    .filtros {
        gap: 12px;
    }
    
    .filtro-btn {
        padding: 8px 20px;
        font-size: 14px;
    }
}

/* ===== TABLET PEQUENO / MOBILE GRANDE (600px - 768px) ===== */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 0 12px;
    }
    
    /* ===== HEADER ===== */
    .logo h1 {
        font-size: 1.3rem;
    }
    
    .logo i {
        font-size: 1.3rem;
    }
    
    .tagline {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    /* ===== PARTÍCULAS - Desligar no mobile ===== */
    #canvas-particulas-fundo {
        display: none;
    }
    
    /* ===== CARROSSEL CORRIGIDO ===== */
    .carrossel-promocoes {
        padding: 0 10px;
        margin: 10px auto;
    }
    
    .carrossel-slides {
        height: 380px;
    }
    
    /* Botões do carrossel - CORRIGIDOS */
    .carrossel-btn {
        width: 36px !important;
        height: 36px !important;
        background: rgba(0,0,0,0.7) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 20 !important;
    }
    
    .carrossel-btn i {
        font-size: 18px !important;
        color: white !important;
        display: inline-block !important;
    }
    
    .carrossel-btn.prev {
        left: 5px !important;
    }
    
    .carrossel-btn.next {
        right: 5px !important;
    }
    
    .slide-conteudo {
        padding: 20px 15px 15px;
        bottom: 0;
    }
    
    .slide-conteudo h3 {
        font-size: 1rem;
        margin-bottom: 5px;
    }
    
    .slide-conteudo p {
        font-size: 0.75rem;
        margin-bottom: 8px;
    }
    
    .slide-badge {
        font-size: 0.6rem;
        padding: 3px 10px;
        margin-bottom: 8px;
    }
    
    .slide-btn {
        padding: 6px 14px;
        font-size: 0.7rem;
    }
    
    .slide-btn i {
        font-size: 0.7rem;
    }
    
    .preco-atual {
        font-size: 1rem;
    }
    
    .preco-antigo {
        font-size: 0.7rem;
    }
    
    .spec {
        font-size: 0.65rem;
        padding: 3px 8px;
    }
    
    .slide-especificacoes {
        gap: 6px;
        margin-bottom: 10px;
    }
    
    /* Indicadores carrossel */
    .carrossel-indicadores {
        bottom: 8px;
        gap: 8px;
    }
    
    .indicador {
        width: 8px;
        height: 8px;
    }
    
    .indicador.active {
        width: 20px;
    }
    
    /* ===== BOTÃO DARK MODE - CORRIGIDO ===== */
    .dark-mode-btn,
    #darkModeToggle {
        width: 44px !important;
        height: 44px !important;
        bottom: 80px !important;
        right: 15px !important;
        background: var(--primary, #0b3b5f) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9999 !important;
    }
    
    .dark-mode-btn i,
    #darkModeToggle i {
        font-size: 20px !important;
        color: white !important;
        display: inline-block !important;
    }
    
    /* ===== BOTÃO FESTA ===== */
    #botao-festa-junina {
        bottom: 20px !important;
        right: 15px !important;
        padding: 8px 14px !important;
        font-size: 11px !important;
        z-index: 9998 !important;
    }
    
    /* ===== BOTÃO VOLTAR TOPO ===== */
    #btnVoltarTopo {
        bottom: 140px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    
    /* Banner topo */
    .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .banner-img {
        max-height: 80px !important;
    }
    
    /* Hero section */
    .hero {
        padding: 30px 0;
    }
    
    .hero-destaque {
        font-size: 1.3rem;
    }
    
    .hero-sub {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }
    
    .hero-stats {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
    }
    
    .stat {
        width: 90%;
        justify-content: center;
        padding: 8px 16px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
    }
    
    .stat-icon i {
        font-size: 18px;
    }
    
    .stat-number {
        font-size: 1.2rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
    }
    
    /* Filtros */
    .filtros {
        gap: 8px;
        margin: 25px 0 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .filtro-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    /* Produtos Grid */
    .produtos-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .review-card {
        border-radius: 16px;
    }
    
    .review-card img {
        height: 180px;
    }
    
    .review-content {
        padding: 14px;
    }
    
    .review-content h2 {
        font-size: 1rem;
        margin-bottom: 6px;
    }
    
    .nota {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }
    
    .resumo {
        font-size: 0.75rem;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    
    /* Prós e Contras */
    .prós-contras {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
        margin: 10px 0;
    }
    
    .prós strong, .contras strong {
        font-size: 0.75rem;
        display: block;
        margin-bottom: 5px;
    }
    
    .prós ul, .contras ul {
        margin-left: 15px;
    }
    
    .prós li, .contras li {
        font-size: 0.7rem;
        margin: 3px 0;
    }
    
    /* Links de compra */
    .links-compra {
        flex-direction: column;
        gap: 8px;
    }
    
    .label {
        font-size: 0.7rem;
        text-align: center;
        display: block;
    }
    
    .btn {
        padding: 8px 12px;
        font-size: 0.7rem;
        justify-content: center;
        width: 100%;
    }
    
    /* Aviso afiliado */
    .aviso-card {
        flex-direction: column;
        text-align: center;
        padding: 14px;
        gap: 10px;
    }
    
    .aviso-card i {
        font-size: 1.5rem;
    }
    
    .aviso-texto strong {
        font-size: 0.8rem;
        display: block;
    }
    
    .aviso-texto p {
        font-size: 0.7rem;
        line-height: 1.4;
    }
    
    .aviso-confianca {
        justify-content: center;
        gap: 10px;
    }
    
    .aviso-confianca span {
        font-size: 0.65rem;
        padding: 4px 10px;
    }
    
    .aviso-rodape {
        flex-direction: column;
        text-align: center;
        padding: 12px;
        margin: 16px 0 25px;
    }
    
    .aviso-rodape i {
        font-size: 16px;
    }
    
    .aviso-rodape p {
        font-size: 0.7rem;
    }
    
    /* Newsletter */
    .newsletter {
        padding: 20px 15px;
        margin: 20px 0;
        border-radius: 16px;
    }
    
    .newsletter-content i {
        font-size: 1.5rem;
    }
    
    .newsletter-content h3 {
        font-size: 1rem;
    }
    
    .newsletter-content p {
        font-size: 0.7rem;
    }
    
    .newsletter-form {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
    }
    
    .newsletter-form input {
        width: 100%;
        max-width: 280px;
        padding: 10px 14px;
        font-size: 0.8rem;
    }
    
    .newsletter-form button {
        width: auto;
        min-width: 150px;
        padding: 10px 16px;
        font-size: 0.8rem;
    }
    
    /* Biografia */
    .bio {
        padding: 30px 0;
    }
    
    .bio-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 15px;
    }
    
    .foto-perfil {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
    
    .bio-texto h2 {
        font-size: 0.9rem;
    }
    
    .bio-texto h3 {
        font-size: 1.2rem;
    }
    
    .bio-titulo {
        font-size: 0.75rem;
    }
    
    .bio-stats {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }
    
    .bio-stat-item {
        text-align: center;
    }
    
    .bio-stat-item i {
        font-size: 1.2rem;
    }
    
    .bio-stat-item strong {
        font-size: 1rem;
    }
    
    .bio-stat-item span {
        font-size: 0.65rem;
    }
    
    .bio-missao, .bio-experiencia, .bio-afiliado {
        padding: 12px;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .bio-missao i, .bio-experiencia i, .bio-afiliado i {
        font-size: 1.3rem;
    }
    
    .bio-missao p, .bio-experiencia p, .bio-afiliado p {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    
    .bio-footer {
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .bio-footer span {
        font-size: 0.65rem;
        padding: 4px 10px;
    }
    
    .bio-assinatura {
        flex-direction: column;
        text-align: center;
    }
    
    /* Footer */
    footer {
        margin-top: 30px;
        padding: 25px 0 15px;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .footer-logo {
        font-size: 1.1rem;
    }
    
    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .footer-links a {
        font-size: 0.7rem;
    }
    
    .footer-social {
        justify-content: center;
        gap: 15px;
    }
    
    .footer-social a {
        font-size: 1.3rem;
    }
    
    .copyright {
        font-size: 0.6rem;
    }
    
    .copyright-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .copyright-links a {
        font-size: 0.6rem;
    }
    
    /* Cookie Consent */
    .cookie-consent {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        width: calc(100% - 20px) !important;
        max-width: none !important;
        border-radius: 12px !important;
    }
    
    .cookie-consent-content {
        flex-direction: column;
        text-align: center;
        padding: 12px;
    }
    
    .cookie-consent-content p {
        font-size: 0.7rem;
    }
    
    .cookie-btn {
        padding: 8px 14px;
        font-size: 0.7rem;
    }
}

/* ===== MOBILE PEQUENO (até 480px) ===== */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    
    /* Header */
    .logo h1 {
        font-size: 1.1rem;
    }
    
    .logo i {
        font-size: 1.1rem;
    }
    
    .tagline {
        font-size: 0.7rem;
    }
    
    /* Carrossel */
    .carrossel-slides {
        height: 320px;
    }
    
    .carrossel-btn {
        width: 30px !important;
        height: 30px !important;
    }
    
    .carrossel-btn i {
        font-size: 14px !important;
    }
    
    .slide-conteudo h3 {
        font-size: 0.85rem;
    }
    
    .slide-conteudo p {
        font-size: 0.65rem;
    }
    
    .slide-btn {
        padding: 5px 10px;
        font-size: 0.6rem;
    }
    
    .slide-badge {
        font-size: 0.55rem;
        padding: 2px 8px;
    }
    
    .preco-atual {
        font-size: 0.9rem;
    }
    
    .spec {
        font-size: 0.55rem;
        padding: 2px 6px;
    }
    
    /* Dark Mode */
    .dark-mode-btn,
    #darkModeToggle {
        width: 38px !important;
        height: 38px !important;
        bottom: 70px !important;
        right: 10px !important;
    }
    
    .dark-mode-btn i,
    #darkModeToggle i {
        font-size: 16px !important;
    }
    
    /* Botão Festa */
    #botao-festa-junina {
        bottom: 15px !important;
        right: 10px !important;
        padding: 6px 10px !important;
        font-size: 9px !important;
    }
    
    /* Voltar Topo */
    #btnVoltarTopo {
        bottom: 125px !important;
        right: 10px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }
    
    /* Hero */
    .hero-destaque {
        font-size: 1.1rem;
    }
    
    .hero-sub {
        font-size: 0.75rem;
    }
    
    .stat {
        width: 95%;
        padding: 6px 12px;
    }
    
    /* Filtros */
    .filtro-btn {
        padding: 4px 10px;
        font-size: 10px;
    }
    
    /* Cards */
    .review-card img {
        height: 160px;
    }
    
    .review-content h2 {
        font-size: 0.9rem;
    }
    
    .resumo {
        font-size: 0.7rem;
    }
    
    .prós li, .contras li {
        font-size: 0.65rem;
    }
    
    .btn {
        font-size: 0.65rem;
    }
    
    /* Biografia */
    .bio-texto h3 {
        font-size: 1rem;
    }
    
    .bio-footer span {
        font-size: 0.6rem;
    }
}

/* ===== TELAS MUITO GRANDES (4K) ===== */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    .carrossel-slides {
        height: 600px;
    }
    
    .produtos-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    }
    
    .review-card img {
        height: 300px;
    }
}

/* ===== ORIENTAÇÃO PAISAGEM (Mobile) ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .carrossel-slides {
        height: 250px;
    }
    
    .hero {
        padding: 15px 0;
    }
    
    .hero-destaque {
        font-size: 1rem;
    }
    
    .review-card img {
        height: 140px;
    }
    
    .prós-contras {
        grid-template-columns: 1fr 1fr;
    }
    
    .bio-stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .dark-mode-btn,
    #darkModeToggle {
        bottom: 15px !important;
    }
}

/* ===== BOTÕES FLUTUANTES - SEM SOBREPOSIÇÃO ===== */
@media (max-width: 768px) {
    #btnVoltarTopo {
        bottom: 135px;
        right: 15px;
    }
    
    .dark-mode-btn,
    #darkModeToggle {
        bottom: 80px;
        right: 15px;
    }
    
    #botao-festa-junina {
        bottom: 20px;
        right: 15px;
    }
}

/* ===== GARANTIR ÍCONES VISÍVEIS EM TODAS AS TELAS ===== */
@media (max-width: 768px) {
    .carrossel-btn i,
    .dark-mode-btn i,
    #darkModeToggle i,
    .fa-chevron-left,
    .fa-chevron-right,
    .fa-moon,
    .fa-sun {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== AJUSTE DE TOQUE (Mobile) ===== */
@media (max-width: 768px) {
    button, 
    .btn,
    .filtro-btn,
    .slide-btn,
    .cookie-btn {
        min-height: 40px;
        cursor: pointer;
    }
    
    .carrossel-btn {
        min-height: auto;
    }
    
    a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===== PREVENIR ZOOM EM INPUTS (Mobile) ===== */
@media (max-width: 768px) {
    input, 
    select, 
    textarea {
        font-size: 16px !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    #canvas-particulas-fundo,
    .dark-mode-btn,
    .carrossel-btn,
    .cookie-consent,
    .newsletter,
    .top-banner,
    #botao-festa-junina,
    #btnVoltarTopo {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .review-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .btn {
        display: none;
    }
}
/* ==============================================
   RESPONSIVIDADE COMPLETA - TELAS VERTICAIS E HORIZONTAIS
   VERSÃO CORRIGIDA COM ÍCONES VISÍVEIS
   ============================================== */

/* ===== VARIÁVEIS RESPONSIVAS ===== */
:root {
    --container-padding-desktop: 20px;
    --container-padding-tablet: 15px;
    --container-padding-mobile: 12px;
}

/* ===== BASE - TELAS GRANDES (Desktop) ===== */
@media (min-width: 1200px) {
    .container {
        max-width: 1300px;
        padding: 0 var(--container-padding-desktop);
    }
    
    .carrossel-slides {
        height: 500px;
    }
    
    .produtos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* ===== TABLET LANDSCAPE (1024px - 1200px) ===== */
@media (min-width: 1024px) and (max-width: 1200px) {
    .container {
        max-width: 960px;
        padding: 0 20px;
    }
    
    .produtos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .carrossel-slides {
        height: 450px;
    }
}

/* ===== TABLET PORTRAIT / VERTICAL (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        max-width: 90%;
        padding: 0 20px;
    }
    
    /* Header */
    .logo h1 {
        font-size: 1.5rem;
    }
    
    /* Carrossel */
    .carrossel-slides {
        height: 400px;
    }
    
    .slide-conteudo h3 {
        font-size: 1.3rem;
    }
    
    .slide-conteudo p {
        font-size: 0.9rem;
    }
    
    /* Botões carrossel - ÍCONES VISÍVEIS */
    .carrossel-btn {
        width: 45px !important;
        height: 45px !important;
    }
    
    .carrossel-btn i,
    .carrossel-btn .fa-chevron-left,
    .carrossel-btn .fa-chevron-right {
        font-size: 20px !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Grid produtos */
    .produtos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* Dark Mode Button */
    .dark-mode-btn,
    #darkModeToggle {
        width: 48px !important;
        height: 48px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
    
    .dark-mode-btn i,
    #darkModeToggle i {
        font-size: 22px !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== MOBILE GRANDE / TABLET PEQUENO (600px - 768px) ===== */
@media (min-width: 600px) and (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    
    /* Header */
    .logo h1 {
        font-size: 1.3rem;
    }
    
    .tagline {
        font-size: 0.85rem;
    }
    
    /* Typed animation */
    #typed-text {
        font-size: 1.1rem !important;
    }
    
    /* Carrossel */
    .carrossel-slides {
        height: 380px;
    }
    
    .carrossel-btn {
        width: 40px !important;
        height: 40px !important;
    }
    
    .carrossel-btn i,
    .carrossel-btn .fa-chevron-left,
    .carrossel-btn .fa-chevron-right {
        font-size: 18px !important;
    }
    
    .slide-conteudo {
        padding: 20px;
    }
    
    .slide-conteudo h3 {
        font-size: 1.1rem;
    }
    
    .slide-conteudo p {
        font-size: 0.8rem;
    }
    
    .slide-badge {
        font-size: 0.65rem;
        padding: 3px 10px;
    }
    
    /* Filtros */
    .filtro-btn {
        padding: 6px 14px;
        font-size: 0.75rem;
    }
    
    /* Grid produtos */
    .produtos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .review-card img {
        height: 160px;
    }
    
    .review-content {
        padding: 12px;
    }
    
    .review-content h2 {
        font-size: 1rem;
    }
    
    .nota {
        font-size: 0.75rem;
    }
    
    .resumo {
        font-size: 0.7rem;
    }
    
    /* Prós e Contras */
    .prós-contras {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .prós li, .contras li {
        font-size: 0.7rem;
    }
    
    /* Dark Mode Button */
    .dark-mode-btn,
    #darkModeToggle {
        width: 44px !important;
        height: 44px !important;
        bottom: 80px !important;
        right: 15px !important;
    }
    
    .dark-mode-btn i,
    #darkModeToggle i {
        font-size: 20px !important;
    }
    
    /* Botão Festa */
    #botao-festa-junina {
        bottom: 20px !important;
        right: 15px !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
    
    /* Voltar ao topo */
    #btnVoltarTopo {
        bottom: 135px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
}

/* ===== MOBILE PEQUENO (até 600px) ===== */
@media (max-width: 600px) {
    .container {
        padding: 0 12px;
    }
    
    /* Header */
    .logo {
        justify-content: center;
    }
    
    .logo h1 {
        font-size: 1.2rem;
    }
    
    .logo i {
        font-size: 1.2rem;
    }
    
    .tagline {
        font-size: 0.75rem;
        text-align: center;
    }
    
    /* Typed animation */
    .hero-animation {
        min-height: 45px;
        margin: 10px 0;
    }
    
    #typed-text {
        font-size: 0.9rem !important;
    }
    
    /* Carrossel */
    .carrossel-promocoes {
        padding: 0 5px;
    }
    
    .carrossel-slides {
        height: 320px;
    }
    
    .carrossel-btn {
        width: 35px !important;
        height: 35px !important;
    }
    
    .carrossel-btn i,
    .carrossel-btn .fa-chevron-left,
    .carrossel-btn .fa-chevron-right {
        font-size: 16px !important;
    }
    
    .carrossel-btn.prev {
        left: 5px !important;
    }
    
    .carrossel-btn.next {
        right: 5px !important;
    }
    
    .slide-conteudo {
        padding: 15px 12px 12px;
    }
    
    .slide-conteudo h3 {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }
    
    .slide-conteudo p {
        font-size: 0.7rem;
        margin-bottom: 8px;
    }
    
    .slide-badge {
        font-size: 0.55rem;
        padding: 2px 8px;
        margin-bottom: 6px;
    }
    
    .slide-btn {
        padding: 5px 12px;
        font-size: 0.65rem;
    }
    
    .slide-btn i {
        font-size: 0.65rem;
    }
    
    .preco-atual {
        font-size: 0.9rem;
    }
    
    .spec {
        font-size: 0.55rem;
        padding: 2px 6px;
    }
    
    /* Indicadores */
    .carrossel-indicadores {
        bottom: 5px;
        gap: 6px;
    }
    
    .indicador {
        width: 6px;
        height: 6px;
    }
    
    .indicador.active {
        width: 16px;
    }
    
    /* Hero */
    .hero {
        padding: 30px 0;
    }
    
    .hero-destaque {
        font-size: 1.1rem;
    }
    
    .hero-sub {
        font-size: 0.75rem;
    }
    
    .hero-stats {
        gap: 10px;
    }
    
    .stat {
        width: 100%;
        padding: 8px 16px;
    }
    
    .stat-icon {
        width: 35px;
        height: 35px;
    }
    
    .stat-icon i {
        font-size: 16px;
    }
    
    .stat-number {
        font-size: 1rem;
    }
    
    .stat-label {
        font-size: 0.65rem;
    }
    
    /* Filtros */
    .filtros {
        gap: 6px;
        margin: 20px 0;
    }
    
    .filtro-btn {
        padding: 5px 10px;
        font-size: 0.65rem;
    }
    
    /* Produtos Grid */
    .produtos-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .review-card {
        border-radius: 16px;
    }
    
    .review-card img {
        height: 180px;
    }
    
    .review-content {
        padding: 12px;
    }
    
    .review-content h2 {
        font-size: 0.95rem;
    }
    
    .nota {
        font-size: 0.7rem;
    }
    
    .resumo {
        font-size: 0.7rem;
    }
    
    .prós-contras {
        padding: 8px;
    }
    
    .prós strong, .contras strong {
        font-size: 0.7rem;
    }
    
    .prós li, .contras li {
        font-size: 0.65rem;
    }
    
    /* Botões */
    .btn {
        padding: 8px 12px;
        font-size: 0.65rem;
    }
    
    /* Aviso afiliado */
    .aviso-card {
        padding: 12px;
    }
    
    .aviso-card i {
        font-size: 1.2rem;
    }
    
    .aviso-texto strong {
        font-size: 0.75rem;
    }
    
    .aviso-texto p {
        font-size: 0.65rem;
    }
    
    .aviso-confianca span {
        font-size: 0.6rem;
        padding: 3px 8px;
    }
    
    /* Newsletter */
    .newsletter {
        padding: 20px 12px;
    }
    
    .newsletter-content i {
        font-size: 1.3rem;
    }
    
    .newsletter-content h3 {
        font-size: 0.9rem;
    }
    
    .newsletter-content p {
        font-size: 0.65rem;
    }
    
    .newsletter-form input {
        padding: 8px 12px;
        font-size: 0.7rem;
    }
    
    .newsletter-form button {
        padding: 8px 16px;
        font-size: 0.7rem;
    }
    
    /* Biografia */
    .bio-card {
        padding: 16px;
    }
    
    .foto-perfil {
        width: 80px;
        height: 80px;
    }
    
    .bio-texto h3 {
        font-size: 1rem;
    }
    
    .bio-titulo {
        font-size: 0.7rem;
    }
    
    .bio-stat-item strong {
        font-size: 0.9rem;
    }
    
    .bio-stat-item span {
        font-size: 0.6rem;
    }
    
    .bio-footer span {
        font-size: 0.6rem;
        padding: 4px 8px;
    }
    
    /* Dark Mode Button */
    .dark-mode-btn,
    #darkModeToggle {
        width: 40px !important;
        height: 40px !important;
        bottom: 70px !important;
        right: 12px !important;
    }
    
    .dark-mode-btn i,
    #darkModeToggle i {
        font-size: 18px !important;
    }
    
    /* Botão Festa */
    #botao-festa-junina {
        bottom: 15px !important;
        right: 12px !important;
        padding: 6px 10px !important;
        font-size: 9px !important;
    }
    
    /* Voltar ao topo */
    #btnVoltarTopo {
        bottom: 125px !important;
        right: 12px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }
    
    /* Footer */
    .footer-logo {
        font-size: 1rem;
    }
    
    .footer-links a {
        font-size: 0.65rem;
    }
    
    .copyright {
        font-size: 0.55rem;
    }
}

/* ===== MOBILE EXTRA PEQUENO (até 380px) ===== */
@media (max-width: 380px) {
    .carrossel-slides {
        height: 280px;
    }
    
    .slide-conteudo h3 {
        font-size: 0.8rem;
    }
    
    .slide-conteudo p {
        font-size: 0.6rem;
    }
    
    .slide-btn {
        padding: 4px 10px;
        font-size: 0.6rem;
    }
    
    .filtro-btn {
        padding: 4px 8px;
        font-size: 0.6rem;
    }
    
    .review-card img {
        height: 150px;
    }
    
    .review-content h2 {
        font-size: 0.85rem;
    }
}

/* ===== ORIENTAÇÃO PAISAGEM (Mobile Landscape) ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .carrossel-slides {
        height: 280px;
    }
    
    .hero {
        padding: 15px 0;
    }
    
    .hero-destaque {
        font-size: 1rem;
    }
    
    .hero-stats {
        flex-direction: row;
        gap: 10px;
    }
    
    .stat {
        width: auto;
        padding: 5px 12px;
    }
    
    .produtos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .review-card img {
        height: 140px;
    }
    
    .bio-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .dark-mode-btn,
    #darkModeToggle {
        bottom: 15px !important;
    }
}

/* ===== GARANTIA DE ÍCONES VISÍVEIS EM TODAS AS TELAS ===== */
@media (max-width: 768px) {
    /* Carrossel ícones */
    .carrossel-btn i,
    .carrossel-btn .fa-chevron-left,
    .carrossel-btn .fa-chevron-right,
    .carrossel-btn i.fa-chevron-left,
    .carrossel-btn i.fa-chevron-right {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 18px !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Free", monospace !important;
        font-weight: 900 !important;
    }
    
    /* Dark Mode ícones */
    .dark-mode-btn i,
    #darkModeToggle i,
    .dark-mode-btn .fa-moon,
    #darkModeToggle .fa-moon,
    .dark-mode-btn .fa-sun,
    #darkModeToggle .fa-sun {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 20px !important;
        font-family: "Font Awesome 6 Free", monospace !important;
        font-weight: 900 !important;
    }
    
    /* Fallback caso Font Awesome não carregue */
    .carrossel-btn i:empty,
    .carrossel-btn i:not([class*="fa-"]),
    .carrossel-btn i.fa-chevron-left:empty,
    .carrossel-btn i.fa-chevron-right:empty {
        font-family: monospace !important;
    }
    
    .carrossel-btn.prev i:empty::before {
        content: "◀" !important;
        font-family: monospace !important;
        font-size: 18px !important;
    }
    
    .carrossel-btn.next i:empty::before {
        content: "▶" !important;
        font-family: monospace !important;
        font-size: 18px !important;
    }
    
    .dark-mode-btn i:empty::before {
        content: "🌙" !important;
        font-family: monospace !important;
        font-size: 20px !important;
    }
    
    body.dark .dark-mode-btn i:empty::before {
        content: "☀️" !important;
    }
}

/* ===== TELAS MUITO GRANDES (4K) ===== */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    .carrossel-slides {
        height: 600px;
    }
    
    .produtos-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 35px;
    }
    
    .review-card img {
        height: 260px;
    }
    
    #typed-text {
        font-size: 2rem !important;
    }
}

/* ===== UTILITÁRIOS RESPONSIVOS ===== */
.hide-on-mobile {
    display: inline-block;
}

.show-on-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
    
    .show-on-mobile {
        display: inline-block;
    }
}

/* ===== AJUSTES DE TOQUE (Mobile) ===== */
@media (max-width: 768px) {
    button, 
    .btn,
    .filtro-btn,
    .slide-btn,
    .cookie-btn {
        min-height: 40px;
        cursor: pointer;
    }
    
    .carrossel-btn {
        min-height: auto;
    }
    
    a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===== PREVENIR ZOOM EM INPUTS (Mobile) ===== */
@media (max-width: 768px) {
    input, 
    select, 
    textarea {
        font-size: 16px !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    #canvas-particulas-fundo,
    .dark-mode-btn,
    .carrossel-btn,
    .cookie-consent,
    .newsletter,
    .top-banner,
    #botao-festa-junina,
    #btnVoltarTopo,
    .footer-social {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .review-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .btn {
        display: none;
    }
}