/* ==========================================================================
   Kimania Sorvetes — correções de responsividade
   Carregado por último, depois do <style> inline de cada página.

   Escopo: telas até 968px. O layout desktop fica exatamente como estava —
   as regras que mudam estrutura vivem todas dentro de media queries.

   Regras do design system (.design-engineer/system.md):
     1. width fixo em px sempre com max-width:100%  -> usar width: min(x, 100%)
     2. item de grid/flex com texto precisa de min-width: 0
     3. min-width:100% em flex item exige max-width:100%
     4. tipografia de display com clamp(), não valor por breakpoint
     5. decorativo absoluto não gera scroll (pai com overflow:hidden)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Correções que valem em qualquer largura
   Verificadas em 1440px: não alteram o render desktop.
   -------------------------------------------------------------------------- */

/* Itens de grid não encolhem por causa do min-width:auto padrão. Era o que
   fazia a coluna da seção Revendedor travar em 550px e jogar o conteúdo
   180px para fora da tela. */
.reseller-grid > *,
.features-grid > *,
.lines-grid > *,
.about-intro-grid > *,
.footer-grid > *,
.form-content-wrapper > *,
.kimania-grid > * {
    min-width: 0;
}

/* Tinha width:550px / height:550px fixos e nenhuma media query. Sendo filho
   do grid, arrastava a coluna inteira junto. Em desktop continua 550x550. */
.freezer-showcase-wrapper {
    width: min(550px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Imagens nunca estouram o container */
.carousel-slide img,
.reseller-freezer-side img,
.line-card img,
.feature-card img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   2. Tablet e mobile — até 968px
   -------------------------------------------------------------------------- */

@media (max-width: 968px) {

    /* --- carrossel do hero ---
       .carousel-inner é o trilho. Sem largura própria e com min-width:auto
       de flex item, esticava até o max-content dos slides (840px numa tela
       de 375) e o <h1> era cortado dos dois lados. O JS desloca o trilho em
       porcentagem (translateX(-n*100%)), então fixar 100% mantém o passo. */
    .carousel-inner {
        width: 100%;
        min-width: 0;
    }

    .carousel-slide {
        flex: 0 0 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .slide-content,
    .slide-image {
        min-width: 0;
        max-width: 100%;
    }

    /* height:100vh fixo cortava o conteúdo assim que o texto passava a
       quebrar corretamente. A altura passa a seguir o conteúdo: os slides
       são flex items lado a lado e se esticam para o mais alto, então o
       carrossel não pula ao trocar de slide. */
    .hero,
    .carousel-container,
    .carousel-slide {
        height: auto;
        min-height: 0;
    }

    /* Sem isto o bloco da imagem herda flex:1, absorve a altura que sobra
       e centraliza a foto no meio dela — era a origem do vão vazio entre
       o botão e o produto. */
    .slide-image {
        flex: 0 0 auto;
    }

    /* --- menu mobile ---
       O menu é clonado por JS a partir de .nav-links. Os itens ficavam com
       33px de altura; 44px é o alvo de toque mínimo recomendado. */
    .nav-links-mobile a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0.25rem 1rem;
    }

    /* --- tipografia fluida ---
       Substitui os saltos por breakpoint. O teto de cada clamp é o tamanho
       que o site já usava em desktop, então nada muda acima de 968px. */
    /* Dois seletores: .slide-3 .slide-content h1 existe no CSS original com
       especificidade maior que .slide-content h1 e venceria a regra abaixo. */
    .slide-content h1,
    .carousel-slide .slide-content h1 {
        font-size: clamp(1.9rem, 7.5vw, 4rem);
        line-height: 1.12;
    }

    .slide-content p {
        font-size: clamp(0.98rem, 3.6vw, 1.25rem);
        line-height: 1.5;
    }

    .reseller-section-v2 .reseller-title {
        font-size: clamp(1.9rem, 7.5vw, 3.5rem);
        line-height: 1.15;
    }

    .reseller-section-v2 .reseller-subtitle {
        font-size: clamp(1.05rem, 4vw, 1.5rem);
        line-height: 1.35;
    }

    /* Títulos de seção. Sem clamp eles ficavam entre 40 e 48px em telas de
       360px: "Nossas Linhas Exclusivas" ocupava 177px de altura em três
       linhas. Os tetos preservam o tamanho de desktop. */
    .features-main-title,
    .kimania-lines-title,
    .story-title,
    .mvv-main-title,
    .contact-title,
    .industries-title,
    .form-title,
    .flow-title,
    .intro-title {
        font-size: clamp(1.75rem, 8vw, 3rem);
        line-height: 1.15;
    }

    .mvv-title {
        font-size: clamp(1.35rem, 5.5vw, 2rem);
    }

    /* O clamp original começava em 3rem, então o título nunca descia de 48px
       por mais estreita que fosse a tela. */
    .about-title-new {
        font-size: clamp(1.85rem, 7.5vw, 2.5rem);
        line-height: 1.15;
        margin-bottom: 1.75rem;
    }

    /* O <br> do markup foi escrito para a quebra de duas linhas do desktop.
       Em telas estreitas ele deixava "ficam" sozinho numa linha; sem ele o
       texto quebra sozinho onde couber. */
    .about-title-new br {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   3. Mobile — até 600px
   Densidade: o ritmo vertical cai de 5–8rem para 2.5–3rem. O objetivo é
   encurtar a página, não empilhar os blocos com o espaçamento de desktop.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

    /* --- ritmo vertical das seções (home) ---
       Só o eixo vertical. Estas seções trazem 5% de padding lateral do CSS
       original e o shorthand `padding` apagaria essa folga, colando o texto
       na borda da tela. */
    .about-redesigned {
        padding-top: 3rem;
        padding-bottom: 2.5rem;
    }

    .kimania-lines,
    .features-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .reseller-section-v2 {
        padding: 3rem 5%;
    }

    .main-footer {
        padding-top: 2.5rem;
    }

    /* --- páginas internas ---
       Hero interno: 6rem no topo cobre o header fixo (72px) com folga. */
    .hero-about-intro {
        padding-top: 6rem;
        padding-bottom: 2.5rem;
    }

    .our-story-section,
    .mvv-section,
    .our-lines-section,
    .partner-flow-section,
    .contact-section,
    .industries-section,
    .form-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* --- ondas de transição entre seções ---
       São divs absolutos ancorados em bottom:-1px, com 100px de altura e
       z-index acima do conteúdo. Com o padding original (64–128px) sobrava
       folga; com o ritmo compacto elas passaram a cobrir o último botão ou
       card de cada seção. Reduzir a altura mantém a transição e devolve a
       folga sem reinflar a página. */
    .section-wave-transition,
    .section-wave-transition-bottom,
    .contact-wave,
    .industries-wave {
        height: 40px;
    }

    /* Folga garantida abaixo do conteúdo nas seções que terminam em onda. */
    .reseller-section-v2,
    .partner-flow-section,
    .contact-section,
    .industries-section {
        padding-bottom: 3.5rem;
    }

    /* O formulário some 10px para fora do próprio container porque o padding
       de 1.5rem soma à largura em vez de caber dentro dela, e as margens
       ficam desiguais (18px de um lado, 8px do outro). */
    .contact-form {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    /* Mesmo efeito nos campos: o padding interno somava à largura e cada
       campo passava 10px da borda direita do formulário. */
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    /* --- hero ---
       .hero já reserva 90px no topo para o header fixo; o slide não precisa
       repetir a folga. Somados davam 170px de vazio antes do título. */
    .carousel-slide {
        padding: 1rem 5% 2.5rem;
        gap: 1.25rem;
        justify-content: center;
    }

    /* Os slides se igualam à altura do mais alto. Com flex:1 o bloco de
       texto engolia sozinho essa sobra e abria um vão de 157px entre o
       botão e a foto. Fixando o tamanho no conteúdo, a sobra vira folga
       simétrica acima e abaixo. */
    .slide-content {
        flex: 0 0 auto;
        text-align: center;
    }

    .slide-image {
        padding: 0;
    }

    /* --- títulos de seção: menos respiro abaixo --- */
    .features-main-title,
    .kimania-lines-title,
    .story-title,
    .mvv-main-title,
    .contact-title,
    .industries-title,
    .form-title {
        margin-bottom: 1.5rem;
    }

    /* --- seção revendedor --- */
    .reseller-content-side {
        padding-right: 0;
    }

    .reseller-grid {
        gap: 2rem;
    }

    .mini-benefits {
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .reseller-cta-v2 {
        flex-direction: column;
        gap: 0.75rem;
    }

    .reseller-cta-v2 .btn-primary-v2,
    .reseller-cta-v2 .btn-secondary-v2 {
        display: block;
        width: 100%;
        text-align: center;
        padding: 1rem 1.5rem;
        box-sizing: border-box;
    }

    /* O botão tinha 2.8rem de padding lateral e o texto quebrava em duas
       linhas, alargando o CTA até quase encostar no WhatsApp flutuante. */
    .about-cta-button {
        padding: 1rem 1.6rem;
        font-size: 0.85rem;
        gap: 0.5rem;
    }

    /* --- WhatsApp flutuante ---
       Os rótulos tinham opacity:1 fixo, então ficavam permanentemente
       abertos sobre o conteúdo. Em tela de toque não existe hover. */
    .whatsapp-label {
        display: none;
    }

    /* Empilhados, os dois botões cobriam uma faixa de 112px de altura e
       caíam por cima de botões da página. Lado a lado ocupam 52px. */
    .whatsapp-buttons {
        flex-direction: row;
        bottom: 16px;
        right: 16px;
        gap: 8px;
    }

    .whatsapp-btn {
        width: 52px;
        height: 52px;
    }

    .whatsapp-btn svg {
        width: 27px;
        height: 27px;
    }
}

/* --------------------------------------------------------------------------
   4. Telas estreitas — até 380px
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {
    .carousel-slide {
        padding: 0.75rem 4% 2rem;
    }

    /* Mantém a folga inferior da onda; só o lateral e o topo encolhem. */
    .reseller-section-v2 {
        padding: 2.5rem 4% 3.5rem;
    }
}