/* ==========================================================================
   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:not(.line-image),
.feature-card img {
    max-width: 100%;
    height: auto;
}


/* --------------------------------------------------------------------------
   Alinhamento dos blocos de texto corrido — todas as larguras
   Justificado deixa a margem direita reta, com recuo na primeira linha.
   A hifenização foi desligada a pedido do cliente: nenhuma palavra quebrada
   com hífen. Em troca, o navegador só tem os espaços para esticar e algumas
   linhas ficam com vãos mais largos — é inerente a justificar sem hífen numa
   coluna estreita. Se um dia os vãos incomodarem, o meio-termo é
   `hyphens: auto` com `hyphenate-limit-chars: 10 5 4`, que só corta palavras
   de dez letras ou mais.
   Vale para os blocos longos; frases curtas centralizadas ficam como estão.
   -------------------------------------------------------------------------- */

.story-paragraphs > p,
.story-highlight,
.about-intro,
.about-factories,
.reseller-text,
.flow-text,
.industry-text {
    text-align: justify;
    text-indent: 1.5em;

    /* Sem hifenização, a pedido: nenhuma palavra é cortada com hífen no fim
       da linha. O custo é que o navegador só tem os espaços para esticar, e
       algumas linhas ficam com vãos maiores entre as palavras. */
    hyphens: none;
    -webkit-hyphens: none;
}

/* --------------------------------------------------------------------------
   Card de linha (página de produtos) — mobile
   O wrapper tem altura fixa de 450px e a arte é um banner largo (2.3:1).
   Preenchendo, a arte era cortada ao meio e sumia a lista de sabores;
   inteira, sobravam 297px de branco e ela parecia minúscula. Soltando a
   altura, cada card acompanha a proporção da sua arte: a imagem aparece
   completa e ocupa toda a área que lhe cabe.
   -------------------------------------------------------------------------- */

@media (max-width: 968px) {
    .line-image-wrapper {
        height: auto;
    }

    .line-image {
        height: auto;
        object-fit: contain;
        display: block;
    }
}

/* --------------------------------------------------------------------------
   Legenda das fotos de fábrica
   Vinha pedindo 'Caveat', que nenhuma página chega a carregar. O navegador
   caía no `cursive` genérico e usava a manuscrita do sistema — diferente em
   cada aparelho e fora do padrão do site. Passa a usar a Inter, como o resto.
   -------------------------------------------------------------------------- */

.polaroid-caption {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Abaixo de 380px a coluna fica estreita demais para justificar sem hífen:
   medido em 320px, 12 das 42 linhas abriam vãos acima de 20px, com um caso
   de 101px — um buraco no meio do texto. Nessa faixa o alinhamento à
   esquerda lê melhor do que a margem direita reta. */
@media (max-width: 379px) {
    .story-paragraphs > p,
    .story-highlight,
    .about-intro,
    .about-factories,
    .reseller-text,
    .flow-text,
    .industry-text {
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   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;
    }

    /* Respiro inferior do slide. As setas e os pontinhos são absolutos,
       ancorados na base do carrossel: quanto maior este padding, mais os
       controles descem e mais a foto sobe. É o que impede a seta de cair
       em cima dos potes de açaí. O bloco de 600px refina o valor. */
    .carousel-slide {
        padding-bottom: 7rem;
    }

    /* --- 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, em dois grupos, cada um calibrado pelo tamanho que o site já
       usava. A primeira versão disto nivelava todos por baixo e encolhia os
       títulos de destaque em até 35%, achatando a hierarquia da página.

       Grupo 1 — os de destaque, que no original iam a 40–48px. O clamp segura
       os casos ruins ("Nossas Linhas Exclusivas" ocupava 177px em três linhas
       a 48px) sem tirar a presença dos demais. */
    .intro-title,
    .about-title-new,
    .kimania-lines-title,
    .story-title,
    .mvv-main-title,
    .contact-title,
    .industries-title,
    .form-title {
        font-size: clamp(2.25rem, 10vw, 3rem);
        line-height: 1.15;
    }

    /* Grupo 2 — os de apoio, que no original ficavam em 32px. */
    .features-main-title,
    .flow-title,
    .mvv-title {
        font-size: clamp(1.75rem, 8.2vw, 2rem);
        line-height: 1.2;
    }

    .about-title-new {
        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;
    }

    /* Os textos de introdução vêm partidos em <span> por causa da animação
       de entrada. Como inline-block, cada trecho vira uma caixa fechada: o
       trecho seguinte não sobe para completar a linha e o final do anterior
       fica órfão ("em" sozinho, em Quem Somos). Em inline o parágrafo volta
       a quebrar onde couber. A animação continua, em fade — translateY não
       se aplica a inline, e o deslocamento nem se nota em tela pequena. */
    .text-reveal {
        display: inline;
        margin: 0;
    }
}

/* --------------------------------------------------------------------------
   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. */
    /* Estas duas seções abrem com uma onda de 50px ancorada no topo, que come
       o padding. Com 3rem sobrava só 33px de respiro entre a curva e o
       título; o original dava 86–171px, exagerado para mobile. 5rem fica no
       meio: a curva respira sem reinflar a página. */
    .about-redesigned {
        padding-top: 5rem;
        padding-bottom: 2.5rem;
    }

    .features-section {
        padding-top: 5rem;
        padding-bottom: 3rem;
    }

    .kimania-lines {
        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. */
    /* O respiro inferior não é decoração: as setas e os pontinhos são
       absolutos, ancorados na base do carrossel. Aumentar este padding faz
       o carrossel crescer, os controles descerem e a foto subir — é o que
       tira as setas de cima dos potes de açaí. */
    .carousel-slide {
        padding: 1rem 5% 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;
    }

    /* --- slide do açaí ---
       O bloco de produtos estava preso em 280x280 e a imagem dos potes
       ocupava só 287x165 no meio de um vão grande. Passa a usar a largura
       útil do slide. */
    /* O bloco estava preso em 280x280 e a foto dos potes saía com 287x165,
       bem menor que o sorvete do slide 1. O arquivo também foi recortado:
       metade da largura dele era margem transparente, então o CSS vinha
       escalando ar. Os limites abaixo deixam o açaí com altura equivalente
       à do sorvete. */
    /* O respiro inferior tira os potes de baixo das setas e dos pontinhos do
       carrossel, que ficam ancorados na base do hero. A foto do slide 1 é
       estreita embaixo e convive com eles; a do açaí é larga e cheia. */
    .slide-2-products {
        width: 100%;
        max-width: 360px;
        height: auto;
        padding-bottom: 56px;
        box-sizing: content-box;
    }

    /* A proporção acompanha a da foto recortada (656x510). Quadrado, o bloco
       sobrava 78px de altura e empurrava os potes por cima das setas. */
    .acai-spotlight {
        width: 100%;
        max-width: 330px;
        height: auto;
        aspect-ratio: 656 / 510;
    }

    .acai-product-general {
        width: 100%;
        max-width: 330px;
    }

    /* --- 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;
    }


    /* --- marcas flutuantes do slide do revendedor ---
       O CSS original esconde Novas Embalagens e Kikone abaixo de 600px e
       deixa a Kids atrás da borda inferior do freezer. As quatro voltam,
       penduradas nos cantos laterais como no desktop: o selo de "20 linhas"
       ocupa o canto superior direito, e entre o freezer e as setas do
       carrossel sobram 19px, então nada pode ficar embaixo. */
    .floating-product-1 { display: block; width: 72px; height: auto; top: 12%; left: -6%;  right: auto; bottom: auto; }  /* Fruta: alto à esquerda */
    .floating-product-2 { display: block; width: 84px; height: auto; top: 7%;  left: 30%;  right: auto; bottom: auto; }  /* Novas embalagens: alto, no meio, sobre a tampa */
    .floating-product-3 { display: block; width: 88px; height: auto; top: 60%; left: -10%; right: auto; bottom: auto; }  /* Kids: baixo à esquerda */
    .floating-product-4 { display: block; width: 52px; height: auto; top: 52%; right: -7%; left: auto;  bottom: auto; }  /* Kikone: meio à direita, abaixo do selo */

    /* --- 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: 340px) {
    /* Nas telas mais estreitas o palco já encosta nas bordas; as marcas
       penduram menos para fora, senão saem da tela. */
    .floating-product-1 { left: -2%; }
    .floating-product-3 { left: -3%; }
    .floating-product-4 { right: 5%; }   /* rotacionada 20°, a caixa dela é mais larga que a imagem */
}

@media (max-width: 380px) {
    /* Só o topo e o lateral encolhem. O respiro inferior é o que mantém as
       setas do carrossel fora da foto, e telas estreitas precisam dele até
       mais do que as largas, porque o texto quebra em mais linhas. */
    .carousel-slide {
        padding: 0.75rem 4% 6rem;
    }

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