/*
 * style-v2.css — camada de sobreposição do site público (preview).
 *
 * Carregado por cima de assets/css/style.min.css SOMENTE quando o modo de
 * preview está ativo (?preview=v2 — ver toggle em
 * application/views/site/template/header.php). O style.min.css nunca é
 * editado diretamente — todo ajuste visual (tipografia, tamanho de imagem,
 * responsivo) entra neste arquivo, por fase.
 *
 * Ver plano: /home/ubuntu/.claude/plans/radiant-whistling-phoenix.md
 */

/* ---------------------------------------------------------------------
 * FASE 1 — tipografia global e elementos compartilhados
 * (menu, cabeçalho, rodapé — presentes em toda página via header.php/
 * footer.php). Nenhuma view foi alterada, só este arquivo.
 *
 * A redução não é um multiplicador único: elementos claramente grandes
 * demais (menu mobile, títulos) levam um corte mais forte (~68-80% do
 * tamanho atual); elementos já modestos (rodapé, ícones) levam um corte
 * mais leve ou nenhum, pra não prejudicar legibilidade.
 * ------------------------------------------------------------------- */

/* Títulos (Bootstrap fluid headings) — style.min.css original entre
   parênteses em cada comentário */
h1, .h1 { font-size: calc(1.1rem + 1.2vw); }              /* calc(1.375rem + 1.5vw) */
h2, .h2 { font-size: calc(1.06rem + 0.72vw); }             /* calc(1.325rem + 0.9vw) */
h3, .h3 { font-size: calc(1.04rem + 0.48vw); }             /* calc(1.3rem + 0.6vw) */
h4, .h4 { font-size: calc(1.02rem + 0.24vw); }             /* calc(1.275rem + 0.3vw) */
h5, .h5 { font-size: 1rem; }                               /* 1.25rem */
h6, .h6 { font-size: .85rem; }                             /* 1rem — corte mais leve */

@media (min-width: 1200px) {
    h1, .h1 { font-size: 2rem; }    /* 2.5rem */
    h2, .h2 { font-size: 1.6rem; }  /* 2rem */
    h3, .h3 { font-size: 1.4rem; }  /* 1.75rem */
    h4, .h4 { font-size: 1.2rem; }  /* 1.5rem */
}

/* Menu principal (desktop) — .menu-header li a: 23px -> 18px */
.menu-header li a {
    font-size: 18px;
}

/* Menu mobile (gaveta lateral) — .menu-mobile li a: reduzido só em
   telas <=576px (47px original -> 30px próprio do site -> 32px aqui,
   testado e aprovado no iPhone SE). ACIMA de 576px (tablets, ex. iPad
   Mini 768px de largura) o site original já usa 47px sem redução — uma
   tentativa anterior reduziu isso também pra 32px, deixando pequeno e
   com vão vazio demais nessas telas. Mantendo o tamanho original acima
   de 576px, sem sobrescrever nada aqui. */
@media (max-width: 576px) {
    .menu-mobile li a {
        font-size: 32px;
    }
}

/* BUG PRÉ-EXISTENTE (não introduzido por esta fase): em telas <=576px,
   style.min.css tem ".menu-mobile{margin-top:-105px}", que sobrepõe a
   lista do menu em cima da faixa do logo/botão fechar (~102-110px de
   altura) — o primeiro item ("sobre") fica escondido atrás do logo.
   Zerando a margem pra o menu ficar abaixo da faixa do logo, sem
   sobreposição; o espaçamento entre as duas faixas passa a vir só do
   justify-content:space-between do .container-menu. */
@media (max-width: 576px) {
    .menu-mobile {
        margin-top: 0;
    }
}

/* Logo do cabeçalho — .img-logo: 250px -> 200px (mobile), 321px -> 260px (>=768px) */
.img-logo {
    max-width: 200px;
    filter: none;  /* remove o drop-shadow do CSS original, em qualquer largura */
}
@media screen and (min-width: 768px) {
    .img-logo {
        max-width: 260px;
    }
}

/* Ícones sociais (cabeçalho e rodapé) — SVG tinha 50.191/50.73px fixos
   via atributo width/height no HTML. Reduzido só em telas <=576px, pelo
   mesmo motivo do menu mobile acima: sem media query isso encolhia os
   ícones em tablets também (ex. iPad Mini), onde o tamanho original já
   era adequado. */
@media (max-width: 576px) {
    .icon-socialMedia {
        width: 40px;
        height: 40px;
    }
}

/* Botão flutuante do HandTalk (Libras/acessibilidade): tentativa de
   aumentar via transform:scale() revertida — o transform não avisa o
   container do widget que o botão cresceu, e como os dois ícones
   (acessibilidade + Libras) ficam colados um no outro, aumentar cada
   um fez eles se sobreporem. Widget de terceiro, fora do nosso
   controle direto — deixado no tamanho original deles. */

/* ---------------------------------------------------------------------
 * FASE 2 — home e páginas estáticas/institucionais
 * (home.php, sobre.php, lojas.php, lojas-online.php, politicas-privacidade.php)
 * Nenhuma dessas páginas tem <style> inline. A única exceção de HTML é
 * a classe "img-sobre", adicionada em sobre.php nas 2 imagens que não
 * tinham nenhuma classe própria pra servir de gancho de tamanho — sem
 * efeito na v1, só existe pra este arquivo poder mirar nelas.
 *
 * lojas.php e lojas-online.php não entraram aqui: os links de loja usam
 * .btn-default (Bootstrap, tamanho normal) e um ícone já pequeno (14px)
 * com style inline — nada ali estava de fato grande demais.
 * ------------------------------------------------------------------- */

/* Títulos de seção — .title-default: 30/47px -> 24/38px */
.title-default {
    font-size: 24px;
}
@media screen and (min-width: 768px) {
    .title-default {
        font-size: 38px;
    }
}

/* Título de banner de página — .title-default_pages: 30/54px -> 24/43px */
.title-default_pages {
    font-size: 24px;
}
@media screen and (min-width: 768px) {
    .title-default_pages {
        font-size: 43px;
    }
}

/* Blocos de sustentabilidade — .title-sustainability: 30px -> 24px;
   variante em modal (.title-sustainability-modal): 46px -> 36px */
.title-sustainability {
    font-size: 24px;
}
.title-sustainability-modal {
    font-size: 36px;
}

/* Números de destaque ("zero", "100%") — .title-number: 95px -> 68px.
   Era o texto mais desproporcional de toda a home.
   CORREÇÃO (Fase 6): o site original já tinha 5 breakpoints próprios
   (991/768/576/375/320px, de 95px até 35px) que essa regra sem media
   query estava sobrescrevendo tudo pra 68px — deixando MAIOR que o
   original em telas pequenas. Espelhando a mesma proporção (~72%) em
   cada breakpoint já existente. */
.title-number {
    font-size: 68px;                              /* 95px, base */
}
@media (max-width: 991px) {
    .title-number { font-size: 54px; }            /* 75px */
}
@media (max-width: 768px) {
    .title-number { font-size: 43px; }            /* 60px */
}
@media (max-width: 576px) {
    .title-number { font-size: 35px; }            /* 48px */
}
@media (max-width: 375px) {
    .title-number { font-size: 29px; }            /* 40px */
}
@media (max-width: 320px) {
    .title-number { font-size: 25px; }            /* 35px */
}

/* .box-numbers (caixa que envolve title-number/text-numbers) já tem
   display:flex;justify-content:center no CSS original, então deveria
   centralizar sozinha — mas o original também tem um margin-left
   (20-40px conforme a tela) que empurra a caixa pra direita, tirando
   o conjunto do centro. Com o texto gigante de antes (95px) isso quase
   não se notava; com o texto menor, ficou visível. Zerando essa
   margem só na faixa onde ela existe (<=991px, onde os cards empilham
   em coluna única). */
@media (max-width: 991px) {
    .box-numbers {
        margin-left: 0;
    }
}

/* Textos de apoio */
.text-default { font-size: 17px; }               /* 19px */
@media screen and (min-width: 768px) {
    .text-default { font-size: 19px; }            /* 22px */
}
.text-default-small { font-size: 17px; }          /* 20px */
.text-pages { font-size: 17px; }                  /* 20px */
.text-numbers { font-size: 19px; }                /* 23px, base */
/* CORREÇÃO (Fase 6): mesmo problema do .title-number acima — o
   original tinha 5 breakpoints (991/768/576/375/320px, 23px até 11px)
   sendo sobrescritos por essa regra sem media query. */
@media (max-width: 991px) {
    .text-numbers { font-size: 17px; }            /* 21px */
}
@media (max-width: 768px) {
    .text-numbers { font-size: 14px; }            /* 17px */
}
@media (max-width: 576px) {
    .text-numbers { font-size: 12px; }            /* 14px */
}
@media (max-width: 375px) {
    .text-numbers { font-size: 10px; }            /* 12px */
}
@media (max-width: 320px) {
    .text-numbers { font-size: 9px; }             /* 11px */
}
.text-sustainability { font-size: 16px; }         /* 18px */

/* Banner/vídeo do topo da home — application/views/site/sliders.php
   (partial carregado junto com home.php, não estava no escopo original
   da Fase 2). .title-slogan: 35/50/60px -> 27/39/47px */
.title-slogan { font-size: 27px; }                /* 35px, <425px */
@media screen and (min-width: 425px) {
    .title-slogan { font-size: 39px; }            /* 50px */
}
@media screen and (min-width: 768px) {
    .title-slogan { font-size: 47px; }            /* 60px */
}

/* Imagens da home */
.img-meat { max-width: 600px; }                   /* 768px */
.img-ingredients { max-width: 260px; height: auto; } /* sem regra própria antes, só o HTML 321x330 */
.img-tree { max-width: 500px; }                   /* 650px, tamanho igual em toda largura */
/* .container-sustainability-tree (a caixa que centraliza a árvore) tem
 * só 266px de altura (definida pela imagem menor "melhor para seu
 * pet", que fica por cima) — a árvore é posicionada com absolute e
 * centralizada por cima, ficando mais alta (406px, com o max-width
 * acima) que a própria caixa. Como position:absolute não conta pro
 * cálculo de altura do fluxo normal, a section ao redor (que tem
 * overflow-x:hidden — e por regra do CSS, isso obriga overflow-y a
 * virar "auto" também, mesmo sem ninguém ter pedido) não "sabe" que
 * precisa de mais espaço, e mostra uma barra de rolagem em vez de
 * crescer. Em vez de encolher a árvore, dá min-height na própria
 * caixa (altura da árvore + folga) — ela passa a contar no fluxo
 * normal e a section cresce sozinha, sem precisar de scroll. Só em
 * 577-991px (iPad Mini/Air, onde o bug foi confirmado); telas
 * maiores/menores não relataram esse problema até agora. */
@media (min-width: 577px) and (max-width: 991px) {
    .container-sustainability-tree {
        min-height: 420px;
    }
}
.icon-sustainability { max-width: 90px; }         /* 115px */

.img-packages { max-width: 500px; }               /* 630px */
@media (min-width: 769px) {
    .img-packages { max-width: 540px; }           /* 671px */
}

.img-about { max-width: 290px; }                  /* 360px */
@media screen and (min-width: 1024px) {
    .img-about { max-width: 460px; }              /* 579px */
}

/* Imagens de sobre.php sem classe própria (ver comentário no topo da fase) */
.img-sobre {
    max-width: 420px;
}

/* ---------------------------------------------------------------------
 * FASE 3 — catálogo (caes.php, caes-detalhes.php, gatos.php,
 * gatos-detalhes.php + os fragmentos AJAX caes-ajax.php/gatos-ajax.php,
 * que reusam as mesmas classes dos cards de produto, então já ficam
 * cobertos aqui sem precisar de regra própria).
 *
 * Vários elementos aqui (.text-porte, .title-info, .title-info_small,
 * .text-info_products, .text-barcode) já tinham 3 a 5 breakpoints
 * próprios no site original (768/576/425/375/320px, valores diferentes
 * em cada um). Reduzi só a ponta maior de cada um (tamanho base e
 * ≤768px) e mantive os breakpoints menores (375px, 320px) como estavam
 * — já são bem pequenos, reduzir mais ali prejudicaria a leitura.
 *
 * ".text-tag" (usada em caes.php) não tem nenhuma regra de CSS no site
 * original — só ".text-tag-cat" (gatos.php) é estilizada. Não é algo
 * pra esta fase corrigir (seria mudar aparência, não só tamanho), só
 * registrando a inconsistência.
 * ------------------------------------------------------------------- */

/* Botão de filtro, títulos de filtro e labels dos checkboxes */
.btn-filter { font-size: 14px; }          /* 16px */
.title-filter { font-size: 17px; }        /* 20px */
.form-check-label { font-size: 15px; }    /* 17px */

/* Cards de produto (listagem) */
.text-tag-cat { font-size: 13px; }        /* 15px */
.title-products { font-size: 19px; }      /* 22px */
.img-packages_products { max-width: 250px; } /* 307px */

/* Rótulo pequeno acima do título (ex. "CÃES RAÇAS X") */
.text-porte { font-size: 14px; }                  /* 16px, base */
@media (max-width: 768px) {
    .text-porte { font-size: 11px; }              /* 12px */
}
/* <=425/375/320px (10/10/9px) mantidos como no original */

/* Título grande da página de detalhe (ex. "Filhote") */
.title-info { font-size: 36px; }                  /* 44px, base */
@media (max-width: 768px) {
    .title-info { font-size: 32px; }              /* 38px */
}
@media (max-width: 425px) {
    .title-info { font-size: 26px; }              /* 30px */
}
/* <=375/320px (28/25px) mantidos como no original */

/* Benefícios do produto — CORREÇÃO (Fase 6): essas duas regras tinham
   comentário dizendo que os breakpoints <=425/375/320px do original
   ficavam "mantidos", mas não estavam de fato restritas por media
   query nenhuma — sobrescreviam tudo pra 16px, maior que os 14/12px
   que o original já usava nas telas menores. Agora só valem >=426px;
   abaixo disso o CSS original (16/14/12px) volta a valer sozinho. */
@media (min-width: 426px) {
    .title-info_small { font-size: 16px; }    /* 18px */
    .text-info_products { font-size: 16px; }  /* 18px */
}

/* Transição de 5 dias */
.title-transition { font-size: 25px; }    /* 30px */
.text-transition { font-size: 19px; }     /* 22px */

/* Abas de composição/enriquecimento/garantia */
.btn-tab-button { font-size: 17px; }      /* 19px */

/* Código de barras */
.text-barcode { font-size: 17px; }                /* 20px, base */
@media (max-width: 576px) {
    .text-barcode { font-size: 14px; }            /* 16px */
}
.btn-barcode { font-size: 17px; }                 /* 20px — só a fonte; max-width/padding
                                                       do botão não são mexidos aqui (alvo
                                                       de toque, não é tipografia) */

/* ---------------------------------------------------------------------
 * FASE 4 — compra / onde comprar / programa criador
 * (comprar.php, comprar-pesquisa.php + comprar-ajax.php, programa-
 * criador.php + -formulario.php + -termo.php)
 *
 * comprar.php e as páginas de programa-criador usam as mesmas classes
 * já cobertas nas fases anteriores (.title-default_pages, .btn-default
 * etc.) — só .title-creator/.title-creator-box precisavam de ajuste
 * próprio.
 *
 * comprar-pesquisa.php/comprar-ajax.php (resultado da busca "onde
 * comprar") usam um sistema de classes bem mais antigo que o resto do
 * site — a maioria (fontsite-bold2, font10/15/17/20, l-loja etc.) não
 * tem NENHUMA regra de tamanho no CSS (cai no padrão do navegador,
 * ~16px), então não há o que reduzir ali. Só ".font24" (telefone da
 * loja) tinha um tamanho real. Não mexi em nada do mapa/InfoBox do
 * Google Maps (.infoBox, marcadores) — é posicionado em pixel via
 * JavaScript, então alterar tamanho de fonte ali arrisca quebrar
 * funcionalidade, não só aparência.
 * ------------------------------------------------------------------- */

/* Hero e cards de benefício do Programa Criador */
.title-creator,
.title-creator-box {
    font-size: 24px;                              /* 28px, base */
}
@media (min-width: 1024px) {
    .title-creator,
    .title-creator-box {
        font-size: 21px;                          /* 24px */
    }
}

/* Telefone da loja no resultado de busca (única classe realmente
   grande no sistema legado desta página) */
.font24 {
    font-size: 1.25em !important;                 /* 1.5em (24px) */
}

/* ---------------------------------------------------------------------
 * FASE 6 (achado adicional) — texto "Feito com ingredientes da nossa
 * terra" (home.php) ficava muito colado na borda da tela no mobile.
 * A coluna só tem o padding padrão do .container (12px), sem gutter
 * de coluna próprio nessa faixa (o grid de 2 colunas só ativa em
 * >=992px). Adiciona um respiro extra só nessa faixa, via a classe
 * "col-terra-texto" adicionada no HTML (sem efeito na v1). */
@media (max-width: 991px) {
    .col-terra-texto {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Título do banner da página Sobre (título[$sobre[0]->titulo] sobre foto
 * grande) — a redução geral de .title-default_pages (24/43px) deixou
 * pequeno demais nesse banner específico. Fica maior só aqui, via a
 * classe "titulo-sobre-banner" (sem afetar as outras páginas que
 * também usam .title-default_pages). Redução mais leve que a geral,
 * mais perto do tamanho original (30/54px). */
.titulo-sobre-banner { font-size: 28px; }
@media screen and (min-width: 768px) {
    .titulo-sobre-banner { font-size: 48px; }
}

/* sobre.php: texto1/imagem1/imagem2/texto2 empilham nessa ordem no
 * mobile (<=991px, onde a grade de 2 colunas do desktop vira 1 coluna)
 * porque não têm nenhuma classe order-lg-* — no desktop isso forma um
 * zigue-zague natural (texto+imagem / imagem+texto) só pelo wrap do
 * grid de 12 colunas. No mobile, o primeiro par aparece como
 * texto-depois-imagem; o segundo já aparece imagem-depois-texto.
 * CORREÇÃO: a primeira tentativa só deu "order" pro primeiro par,
 * deixando o segundo par (sem order, valor padrão 0) pular pra frente
 * de tudo — invertendo as duas seções. Agora as 4 colunas têm order
 * explícito, preservando a sequência inteira e só trocando a imagem
 * de lugar com o texto dentro do primeiro par. */
@media (max-width: 991px) {
    .sobre-imagem-1 { order: 1; }
    .sobre-texto-1  { order: 2; }
    .sobre-imagem-2 { order: 3; }
    .sobre-texto-2  { order: 4; }
}

/* Filtro de busca (caes.php/gatos.php) — #filtro tem padding de 4rem
 * (.py-6) em cima/embaixo, e cada linha divisória entre as seções
 * (Idade/Porte/Necessidade) tem mais 4rem de margem (.my-6) — soma
 * bastante vazio numa lista que já é comprida no mobile. Reduz só em
 * <=991px (não mexe nas classes genéricas .py-6/.my-6, que podem
 * estar em uso em outros lugares do site — só no #filtro específico e
 * na classe nova "linha-filtro" adicionada nas imagens divisórias).
 *
 * CORREÇÃO: .py-6 usa !important, e minha primeira tentativa não
 * espelhou isso — o padding continuava em 64px mesmo depois do fix.
 *
 * .box-filter é display:flex;justify-content:center, e #filtro (item
 * desse flex) não tinha largura própria — encolhia pro tamanho mínimo
 * do conteúdo (159px, medido) e ficava centralizado como uma coluna
 * estreita, sobrando bastante espaço vazio nas laterais.
 *
 * REESTRUTURAÇÃO: em vez de forçar width:100% "por fora" da lógica do
 * flex, usa flex:1 — a forma correta em flexbox pra um item único
 * preencher o espaço do container (cresce/encolhe conforme o espaço
 * disponível, em vez de um valor fixo). Não mexe em position/overflow/
 * transition do .box-filter nem no JS que abre/fecha o painel — isso
 * é comportamento de animação, não tamanho, e continua funcionando
 * igual.
 *
 * CORREÇÃO: tentativa de centralizar (text-align:center + .form-check
 * inline-block) deixou cada seção com uma largura de bloco diferente
 * (proporcional ao rótulo mais longo dela: "Peles Sensíveis" em
 * Necessidade é bem maior que "Filhote" em Idade), então cada título
 * centralizava numa posição diferente — Necessidade "não seguia o
 * padrão" das outras duas. Título e opções ficam alinhados à esquerda
 * entre si, com um respiro fixo da borda (em vez de colado nela). */
@media (max-width: 991px) {
    #filtro {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        flex: 1;
    }
    .linha-filtro {
        display: block;
        margin-top: 24px !important;
        margin-bottom: 24px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* .box-filter (o painel do filtro) vira position:relative em <=1024px
 * no CSS original (site.min.css), então passa a empurrar o conteúdo
 * abaixo dele em vez de sobrepor — mas sem margem própria, fica colado
 * direto embaixo do botão "FILTRO DE BUSCA". Adiciona um respiro. */
@media (max-width: 1024px) {
    .box-filter {
        margin-top: 16px;
    }
}

/* Parágrafo "Salmão, tilápia, cordeiro e frango..." (home) — o CSS
 * original já dá um respiro de 10px nas bordas (.alimento-salmao) só
 * em <=576px (celular). Entre 577-991px (tablet, ex. iPad Mini 768px,
 * iPad Air 820px) não tem respiro nenhum, ficando colado nas bordas —
 * essa é exatamente a faixa que faltava. Acima de 992px o
 * .container-lg já limita a largura da seção sozinho (sem precisar de
 * padding extra). Restrito só a essa faixa pra não alterar o celular
 * (que já tem seu próprio respiro) nem o desktop (que já está bom). */
@media (min-width: 577px) and (max-width: 991px) {
    .alimento-salmao {
        padding: 0 24px;
    }
}

/* Mesmo parágrafo — no desktop (1280px, 1920px etc.) a quebra de linha
 * "gulosa" padrão do navegador deixava a 1ª linha bem cheia e a 2ª
 * linha curta, desequilibrado. text-wrap:balance reequilibra o
 * comprimento das linhas automaticamente, recalculando pra cada
 * largura de tela — não precisa de breakpoint específico, funciona
 * em qualquer tamanho onde o texto quebra em mais de uma linha. */
.alimento-salmao {
    text-wrap: balance;
}

/* ---------------------------------------------------------------------
 * FASE 7 — unifica todo o texto do site na fonte "Le Monde Courrier
 * Std" (já carregada no site, hoje usada só em títulos/menus). O
 * texto corrido hoje usa Montserrat/AmsiPro em várias classes — nenhuma
 * delas usa !important, então dá pra sobrescrever com segurança via
 * seletor de tag + !important, sem precisar listar cada classe.
 *
 * Exclusões de propósito:
 * - <i> (ícones do Font Awesome) nunca entra na lista de tags abaixo.
 * - <div> também fica de fora — didaticamente não carrega texto direto
 *   na maioria dos casos, e evitar div reduz o risco de atingir
 *   widgets de terceiro (HandTalk, tela de "carregando") que usam
 *   muita div de estrutura.
 * - span/a/button ganham :not([class*="ht-"]):not([class*="sc-"]) —
 *   HandTalk (Libras/acessibilidade) injeta os próprios elementos com
 *   essas classes; não deve ter a fonte trocada, pra não arriscar
 *   quebrar a legibilidade de uma ferramenta de acessibilidade.
 * ------------------------------------------------------------------- */
body,
p, h1, h2, h3, h4, h5, h6,
span:not([class*="ht-"]):not([class*="sc-"]),
a:not([class*="ht-"]):not([class*="sc-"]),
li, label,
input, textarea, select,
button:not([class*="ht-"]):not([class*="sc-"]),
td, th, blockquote, figcaption {
    font-family: "Le Monde Courrier Std", monospace !important;
}

/* "Linha Cães" / "Linha Gatos" (home) — no desktop (>=992px, onde as
 * classes Bootstrap "text-lg-start"/"ms-lg-10" entram em ação) o
 * título ficava alinhado à esquerda e deslocado 150px pra direita,
 * enquanto o botão "Conheça" logo abaixo é sempre centralizado — os
 * dois não alinhavam entre si. Restrito a >=992px de propósito, já
 * que abaixo disso as classes -lg- do Bootstrap nem chegam a agir
 * (o título já fica centralizado por padrão, igual ao botão). */
@media (min-width: 992px) {
    .titulo-linha-produto {
        text-align: center !important;
        margin-left: 0 !important;
    }
}