/*
Theme Name: Bebedouro Pet
Theme URI: https://bebedouropet.com.br
Description: Tema próprio do bebedouropet.com.br: landing de bebedouros e guias de compra. Depende do plugin "Bebedouro Pet — núcleo" para os produtos.
Author: Wow Cubo
Version: 2.2.0
Requires PHP: 8.1
Text Domain: bebedouropet
*/

/*
 * Direção (out/2026): água em movimento. Uma ousadia só, a superfície de água que sobe no topo
 * da home; o resto é calmo. Foto em toda escolha, texto alinhado à esquerda, títulos grandes
 * em Bricolage Grotesque e texto em Figtree, as duas servidas pelo próprio site.
 */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("assets/fontes/bricolage-grotesque.woff2") format("woff2");
	font-weight: 500 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("assets/fontes/figtree.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("assets/fontes/figtree-italico.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
	--tinta: #10303a;
	--tinta-suave: #4e6971;
	--agua: #0a86a3;
	--agua-escura: #066a82;
	--raso: #ddf4f8;
	--espuma: #f3fafb;
	--palco: #eef5f6;
	--gengibre: #f2994a;
	--gengibre-claro: #fde7d3;
	--areia: #fbeedf;
	--menta: #e1f3ea;
	--linha: #d5e6ea;
	--gengibre-hover: #f5a965;
	--apagado: #c4d6db;      /* $ vazios da faixa de preço */
	--separador: #a9bcc2;    /* barra da trilha */
	--rodape-texto: #c9e2e9; /* texto sobre a tinta, no rodapé */
	--rodape-suave: #94b9c4;

	/* Cores das lojas, para o visitante reconhecer de longe. A Shopee é um tom abaixo da oficial
	   (#ee4d2d), que com texto branco dá 3,7:1. */
	--amazon: #232f3e;
	--ml: #ffe600;
	--ml-texto: #2d3277;
	--shopee: #d23f1f;

	/* Escala de texto: quatro tamanhos abaixo dos títulos. Nada abaixo de 13px. */
	--fs-legenda: .84rem;  /* 13,4px: rótulos, chips, trilha, notas */
	--fs-apoio: .92rem;    /* 14,7px: resumo de card, menu, rodapé */
	--fs-corpo: 1.05rem;   /* 16,8px: descrição de lista */
	--fs-corpo-g: 1.12rem; /* 17,9px: texto corrido e parágrafos de seção */

	/* Títulos: dois tamanhos fixos e dois fluidos. O topo da home e o mosaico têm os seus. */
	--fs-titulo: 1.15rem;   /* título de card de produto, h3 */
	--fs-titulo-g: 1.25rem; /* card de guia, blocos da página do produto, h3 dos guias */
	--fs-h2: clamp(1.7rem, 3.4vw, 2.7rem);
	--fs-h1: clamp(2rem, 4.4vw, 3.2rem);

	--titulo: "Bricolage Grotesque", ui-rounded, "Segoe UI", system-ui, sans-serif;
	--texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--raio-g: 28px;
	--raio: 20px;
	--raio-p: 12px;
	--raio-pilula: 999px;  /* botões, chips, menu */
	--agua-h: clamp(46px, 7vw, 108px);
	--saida: cubic-bezier(.2, .75, .2, 1);
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* No computador o topo é fixo (66px): âncora e foco param abaixo dele, não por baixo. */
@media (min-width: 768px) { html { scroll-padding-top: 84px; } }

body {
	margin: 0;
	font: 400 17px/1.6 var(--texto);
	color: var(--tinta);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--agua-escura); text-underline-offset: 3px; }
a:hover { color: var(--tinta); }

h1, h2, h3 {
	font-family: var(--titulo);
	color: var(--tinta);
	line-height: 1.05;
	letter-spacing: -.02em;
	text-wrap: balance;
	margin: 0 0 .5em;
}
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-titulo); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }

p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--gengibre); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.container--texto { max-width: 760px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: var(--raio-p); }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* Fundos claros por cor (situações, palcos de foto). */
.cor-raso { --fundo: var(--raso); }
.cor-menta { --fundo: var(--menta); }
.cor-areia { --fundo: var(--areia); }

/* ---------- Botões e links ---------- */

.botao {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 24px; border-radius: var(--raio-pilula); border: 0;
	font: 700 1.05rem/1 var(--texto); text-decoration: none; cursor: pointer;
	transition: transform .18s var(--saida), background-color .18s, box-shadow .18s;
}
.botao:active { transform: scale(.97); }
.botao__icone { width: 26px; height: 26px; margin-left: -4px; }
.botao--gengibre { background: var(--gengibre); color: var(--tinta); box-shadow: 0 8px 24px -10px rgba(242, 153, 74, .9); }
.botao--gengibre:hover { background: var(--gengibre-hover); color: var(--tinta); transform: translateY(-2px); }
.botao--branco { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linha); }
.botao--branco:hover { color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); transform: translateY(-2px); }
.botao--agua { background: var(--agua-escura); color: #fff; }
.botao--agua:hover { background: var(--tinta); color: #fff; }

.link-forte {
	display: inline-block; font-weight: 700; color: var(--tinta);
	text-decoration: underline; text-decoration-color: var(--gengibre);
	text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.link-forte:hover { color: var(--agua-escura); }

/* Botões das lojas nas cores de cada uma: o visitante reconhece de longe. */
.botao-loja {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 18px; border-radius: var(--raio-pilula); font: 700 1rem/1.15 var(--texto);
	text-decoration: none; transition: transform .18s var(--saida), filter .18s;
}
.botao-loja:hover { filter: brightness(.94); transform: translateY(-1px); }
.botao-loja:active { transform: scale(.97); }
.botao-loja--amazon, .botao-loja--amazon:hover { background: var(--amazon); color: #fff; }
.botao-loja--ml, .botao-loja--ml:hover { background: var(--ml); color: var(--ml-texto); }
.botao-loja--shopee, .botao-loja--shopee:hover { background: var(--shopee); color: #fff; }
.botao-loja--pequeno { padding: 8px 12px; border-radius: var(--raio-pilula); font-size: var(--fs-legenda); }

/* ---------- Topo ---------- */

.topo {
	position: sticky; top: 0; z-index: 30;
	background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid rgba(213, 230, 234, .7);
}
.topo__dentro { display: flex; align-items: center; gap: 16px; min-height: 66px; flex-wrap: wrap; }

.marca {
	display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
	color: var(--tinta); font: 800 1.3rem/1 var(--titulo); letter-spacing: -.02em;
}
.marca:hover { color: var(--tinta); }
.marca__icone { width: 34px; height: 34px; flex: none; }

.menu { margin-left: auto; }
.menu ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu a {
	display: block; padding: 9px 14px; border-radius: var(--raio-pilula); text-decoration: none;
	color: var(--tinta); font-weight: 600; font-size: var(--fs-apoio); white-space: nowrap;
}
.menu a:hover { background: var(--espuma); }
.menu a[aria-current] { background: var(--raso); }

@media (max-width: 767px) {
	.topo { position: relative; }
	.topo__dentro { padding-top: 10px; padding-bottom: 8px; gap: 8px; min-height: 0; }
	/* No celular o menu vira uma faixa rolável de ponta a ponta, sem botão de abrir. */
	.menu {
		margin: 0 -16px; width: calc(100% + 32px); padding: 0 16px;
		overflow-x: auto; scrollbar-width: none;
	}
	.menu::-webkit-scrollbar { display: none; }
	.menu a { background: var(--espuma); padding: 7px 12px; }
}
/* Os quatro rótulos longos pedem ~480px. Abaixo disso entram os curtos ("Gatos", "Todos"),
   que cabem até em 320px; o leitor de tela lê só o que está à mostra. */
.menu__curto { display: none; }
@media (max-width: 499px) {
	.menu__longo { display: none; }
	.menu__curto { display: inline; }
}

/* ---------- Topo da home ---------- */

/* Celular e tablet: foto em cima, texto embaixo. A foto fica em ~38% da tela para "Tenho gato"
   aparecer sem rolar (390 × 844 e 360 × 732). Com 64vh os botões ficavam abaixo da dobra. */
.hero {
	--foto-h: clamp(220px, 38vh, 460px);
	position: relative; isolation: isolate; overflow: hidden;
	background: var(--espuma);
}
.hero__foto { display: block; height: var(--foto-h); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.hero__conteudo { position: relative; padding-top: 6px; padding-bottom: 44px; }

.hero__titulo {
	font-size: clamp(3rem, 8vw, 6.1rem); font-weight: 800; line-height: .92;
	letter-spacing: -.045em; font-variation-settings: "opsz" 96; margin: 0 0 .32em;
}
.hero__titulo span { display: block; }
.hero__texto { font-size: var(--fs-corpo-g); color: var(--tinta-suave); max-width: 32em; margin-bottom: 1.4em; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__prova { margin: 18px 0 0; font-size: var(--fs-apoio); color: var(--tinta-suave); }

/* No celular a água fica na borda de baixo da foto, na cor do fundo da página. */
.hero__agua { --cor-agua: var(--espuma); top: calc(var(--foto-h) - var(--agua-h) + 1px); bottom: auto; }

/* Foto de fundo com o texto por cima só a partir de 1000px. Entre 760 e 1000px o rosto do gato
   ficava atrás do véu do texto. */
@media (min-width: 1000px) {
	.hero { min-height: clamp(580px, 86vh, 800px); display: flex; align-items: center; }
	.hero__foto { position: absolute; inset: 0; height: auto; z-index: -2; }
	/* Em telas médias a foto encosta na direita, para a fonte não passar atrás do texto. */
	.hero__foto img { object-position: 100% 50%; }
	/* Véu claro só do lado do texto, para o título ler bem sobre a parede da foto. */
	.hero::before {
		content: ""; position: absolute; inset: 0; z-index: -1;
		background: linear-gradient(90deg, rgba(243, 250, 251, .96) 0%, rgba(243, 250, 251, .9) 38%, rgba(243, 250, 251, .55) 50%, rgba(243, 250, 251, 0) 64%);
	}
	.hero__conteudo { padding-top: 72px; padding-bottom: calc(var(--agua-h) + 72px); }
	.hero__conteudo > * { max-width: min(36rem, 46vw); }
	.hero__agua { --cor-agua: var(--raso); top: auto; bottom: -1px; }
}
@media (min-width: 1200px) {
	.hero__foto img { object-position: 72% 50%; }
	.hero::before { background: linear-gradient(90deg, rgba(243, 250, 251, .94) 0%, rgba(243, 250, 251, .8) 34%, rgba(243, 250, 251, 0) 58%); }
}

/* Superfície de água: duas ondas de 200% de largura deslizando em velocidades diferentes.
   Ondulam por ~50 s (2 voltas da de trás, 3 da da frente) e param: movimento sem fim ao lado do
   texto cansa e pede um jeito de parar (WCAG 2.2.2). A onda é contínua, então o fim não dá salto.
   Também pausam quando o topo sai da tela (site.js). */
.agua { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--agua-h); overflow: hidden; pointer-events: none; }
.agua__onda { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; fill: var(--cor-agua, var(--raso)); }
.agua__onda--fundo { opacity: .5; animation: deriva 26s linear 2; }
.agua__onda--frente { animation: deriva 17s linear 3 reverse; }
.hero--fora .agua__onda { animation-play-state: paused; }
@keyframes deriva { to { transform: translateX(-50%); } }

/* A abertura: a foto assenta, o título sobe linha a linha e a água sobe junto. */
.js .hero__foto img { transform: scale(1.06); transition: transform 2.4s var(--saida); }
.js .hero__titulo span { opacity: 0; transform: translateY(.45em); transition: opacity .8s var(--saida), transform .8s var(--saida); }
.js .hero__titulo span:nth-child(2) { transition-delay: .09s; }
.js .hero__titulo span:nth-child(3) { transition-delay: .18s; }
.js .hero__agua { transform: translateY(100%); transition: transform 1.6s var(--saida) .15s; }
.carregado .hero__foto img,
.carregado .hero__titulo span,
.carregado .hero__agua { opacity: 1; transform: none; }

/* ---------- Seções ---------- */

.secao { padding: 56px 0; }
.secao--raso { background: var(--raso); }
.secao--espuma { background: var(--espuma); }
.secao__titulo { max-width: 22ch; margin-bottom: 28px; }
@media (min-width: 768px) { .secao { padding: 88px 0; } }

/* ---------- Mosaico de situações ---------- */

.situacoes { padding-top: 32px; }
@media (min-width: 760px) { .situacoes { padding-top: 40px; } }

.mosaico {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 172px;
}
.mosaico__item--grande { grid-column: span 2; grid-row: span 2; }
.mosaico__item--largo { grid-column: span 2; }
@media (min-width: 900px) {
	.mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 228px; gap: 16px; }
}

.mosaico__item a {
	position: relative; display: block; height: 100%; overflow: hidden;
	border-radius: var(--raio); text-decoration: none; color: var(--tinta);
	background: var(--fundo, #fff);
}
.mosaico__imagem { position: absolute; inset: 0; }
.mosaico__imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--saida); }
.mosaico__item a:hover .mosaico__imagem img,
.mosaico__item a:focus-visible .mosaico__imagem img { transform: scale(1.05); }

.mosaico__texto { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.mosaico__titulo { font: 700 1.08rem/1.12 var(--titulo); letter-spacing: -.01em; max-width: 13ch; }
.mosaico__qtd { font-size: var(--fs-legenda); font-weight: 600; color: var(--tinta-suave); }
.mosaico__item a:hover .mosaico__titulo { text-decoration: underline; text-decoration-color: var(--gengibre); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Situação com foto do produto: a foto do anúncio numa moldura branca levemente inclinada.
   Muitas fotos de loja têm fundo colorido ou cena; a moldura deixa todas com o mesmo acabamento. */
.mosaico__item--produto .mosaico__imagem {
	inset: auto 14px 14px auto; width: min(54%, 156px); aspect-ratio: 1 / 1;
	border-radius: var(--raio-p); overflow: hidden; background: #fff;
	box-shadow: 0 14px 28px -16px rgba(16, 48, 58, .55);
	transform: rotate(-3deg); transition: transform .5s var(--saida);
}
.mosaico__item--produto:nth-child(even) .mosaico__imagem { transform: rotate(3deg); }
.mosaico__item--produto .mosaico__imagem img { object-fit: contain; }
.mosaico__item--produto a:hover .mosaico__imagem,
.mosaico__item--produto a:focus-visible .mosaico__imagem { transform: rotate(0) scale(1.04); }
.mosaico__item--produto a:hover .mosaico__imagem img { transform: none; }
.mosaico__item--largo.mosaico__item--produto .mosaico__imagem { width: auto; height: calc(100% - 36px); top: 18px; right: 22px; bottom: auto; }
.mosaico__item--largo .mosaico__titulo { font-size: clamp(1.35rem, 2.4vw, 1.8rem); max-width: 10ch; }
.cor-branco { --fundo: #fff; }
.cor-gengibre { --fundo: var(--gengibre-claro); }

/* Situação com foto de ambiente: título branco sobre um escurecido só na base. */
/* O escurecido sobe até a metade e fica forte na base: várias fotos têm objetos brancos
   (fonte, kit, pote) justamente onde entra o título. */
.mosaico__item--foto a::after {
	content: ""; position: absolute; inset: 28% 0 0; z-index: 1;
	background: linear-gradient(180deg, rgba(16, 48, 58, 0) 0%, rgba(16, 48, 58, .5) 45%, rgba(16, 48, 58, .86) 100%);
}
.mosaico__item--foto .mosaico__texto { top: auto; bottom: 16px; left: 18px; right: 18px; z-index: 2; }
.mosaico__item--foto .mosaico__titulo { color: #fff; max-width: 14ch; text-shadow: 0 1px 14px rgba(8, 28, 34, .45); }
.mosaico__item--grande .mosaico__titulo { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 12ch; }
.mosaico__item--foto .mosaico__qtd { color: rgba(255, 255, 255, .88); }

/* Entrada única do mosaico, em sequência, quando ele chega na tela. */
.js [data-revelar] .mosaico__item { opacity: 0; transform: translateY(22px); }
.js [data-revelar].visivel .mosaico__item {
	opacity: 1; transform: none;
	transition: opacity .7s var(--saida), transform .7s var(--saida);
	transition-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- Vitrine dos mais vendidos ---------- */

.vitrine { padding-bottom: 24px; }
.vitrine + .porque { padding-top: 48px; }
.vitrine__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.vitrine__cabeca .secao__titulo { margin-bottom: 20px; }
.vitrine__setas { display: none; gap: 8px; margin-bottom: 24px; }
@media (min-width: 640px) { .vitrine__setas { display: flex; } }
.seta {
	width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--linha);
	background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--tinta);
	transition: border-color .18s, transform .18s var(--saida);
}
.seta:hover:not(:disabled) { border-color: var(--tinta); }
.seta:active:not(:disabled) { transform: scale(.94); }
.seta:disabled { opacity: .35; cursor: default; }
.seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.faixa {
	--margem: max(16px, calc((100% - 1200px) / 2 + 32px));
	display: grid; grid-auto-flow: column; grid-auto-columns: min(76vw, 290px); gap: 20px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	padding: 4px var(--margem) 28px; scroll-padding-inline: var(--margem);
	scrollbar-width: none;
}
.faixa::-webkit-scrollbar { display: none; }
.faixa > * { scroll-snap-align: start; }
.faixa:focus-visible { outline-offset: -3px; }
.faixa .card-produto__porque {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Na faixa o preço vem logo depois do texto. Alinhado no pé, como na grade, abria até 110px vazios
   nos cards de resumo curto (a faixa iguala a altura de todos). O card não tem fundo, então a
   diferença de altura não aparece. */
.faixa .card-produto__rodape { margin-top: 0; }
@media (max-width: 767px) { .faixa { --margem: 16px; } }

/* ---------- Card de produto ---------- */

.grade-produtos {
	display: grid; gap: 36px 20px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.card-produto { display: flex; flex-direction: column; min-width: 0; }
.card-produto__midia {
	display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
	border-radius: var(--raio); background: var(--palco);
}
/* Fotos de produto posicionadas dentro do palco (quadrado de medida fixa). Com altura em %
   num item de grid, foto vertical esticava além do palco e aparecia cortada. */
.card-produto__midia,
.produto__midia,
.porque__imagem,
.capa-produto { position: relative; }
.card-produto__midia .foto-produto,
.card-produto__midia > img {
	position: absolute; inset: 8%; width: 84%; height: 84%;
	object-fit: contain; mix-blend-mode: multiply;
	transition: transform .5s var(--saida);
}
.card-produto:hover .card-produto__midia img { transform: scale(1.05); }
.card-produto__corpo { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 2px 0; }
.card-produto__titulo { margin: 0; font-size: var(--fs-titulo); }
.card-produto__titulo a { color: var(--tinta); text-decoration: none; }
.card-produto__titulo a:hover { text-decoration: underline; text-decoration-color: var(--gengibre); text-decoration-thickness: 2px; }
.card-produto__resumo { margin: -4px 0 0; font-size: var(--fs-apoio); color: var(--tinta-suave); }
.card-produto__porque { margin: 0; font-size: var(--fs-apoio); color: var(--tinta); line-height: 1.5; }
.card-produto__rodape { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.card-produto__lojas { display: flex; flex-wrap: wrap; gap: 6px; }

.specs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.specs li { margin: 0; font-size: var(--fs-legenda); font-weight: 600; padding: 3px 10px; border-radius: var(--raio-pilula); background: var(--espuma); color: var(--tinta-suave); }

.preco { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 800; color: var(--tinta); letter-spacing: .06em; }
.preco__vazio { color: var(--apagado); }
.preco__faixa { font-weight: 500; letter-spacing: 0; color: var(--tinta-suave); font-size: var(--fs-legenda); }

/* Sem foto (só Amazon, por regra do programa): ilustração do tipo sobre a cor do tipo. */
.ilustracao {
	display: grid; place-items: center; width: 100%; height: 100%;
	background: var(--tinta-tipo, var(--palco)); color: var(--traco-tipo, var(--agua-escura));
}
.ilustracao .icone { width: 34%; height: auto; }
.ilustracao--fontes-eletricas { --tinta-tipo: #dff3f9; --traco-tipo: #0a6f88; }
.ilustracao--fontes-sem-fio { --tinta-tipo: #e5edfd; --traco-tipo: #2f5fb3; }
.ilustracao--fontes-ceramica { --tinta-tipo: #f6e8dd; --traco-tipo: #9a5a33; }
.ilustracao--automaticos { --tinta-tipo: #e2f3e8; --traco-tipo: #2f7d4f; }
.ilustracao--elevados { --tinta-tipo: #eee7f8; --traco-tipo: #6b4aa0; }
.ilustracao--portateis { --tinta-tipo: #fdeedb; --traco-tipo: #b0601a; }
.ilustracao--refis-acessorios { --tinta-tipo: #ecf0f2; --traco-tipo: #4a5a63; }

/* ---------- Por que a fonte ---------- */

.porque__dentro { display: grid; gap: 32px; align-items: center; }
.porque__imagem {
	aspect-ratio: 1 / 1; border-radius: var(--raio-g); background: var(--fundo, var(--raso));
	display: grid; place-items: center; overflow: hidden;
}
.porque__imagem img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
/* Com a foto de ambiente, ela ocupa o quadro inteiro (sem o efeito de produto "pousado" na cor). */
.porque__imagem--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.porque__texto p { font-size: var(--fs-corpo-g); color: var(--tinta-suave); max-width: 34em; }
.porque__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 8px; }
@media (min-width: 900px) {
	.porque__dentro { grid-template-columns: 1fr 1fr; gap: 72px; }
	.porque__imagem { max-width: 520px; }
}

/* ---------- Guias ---------- */

/* auto-fit: com 3 guias numa linha de 4 colunas, os 3 se esticam em vez de deixar a 4ª vazia.
   Coluna mínima de 190px: no tablet (a partir de ~650px) cabem os 3 lado a lado; com 230px
   eram 2 e o terceiro ficava sozinho numa linha meio vazia. */
.grade-guias { display: grid; gap: 32px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
/* Página Guias: o cabeçalho não tem filtros embaixo, como nas listas, então a grade abre o espaço. */
.cabeca-lista ~ .grade-guias { margin-top: 28px; }
.card-guia { display: flex; flex-direction: column; gap: 10px; }
.card-guia__midia { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--raio); background: var(--palco); }
.card-guia__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--saida); }
.card-guia:hover .card-guia__midia img { transform: scale(1.04); }
.card-guia__midia .capa-produto { display: grid; place-items: center; width: 100%; height: 100%; background: var(--areia); }
.card-guia__midia .capa-produto img { position: absolute; inset: 10% 19%; width: 62%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.card-guia__titulo { margin: 4px 0 0; font-size: var(--fs-titulo-g); }
.card-guia__titulo a { color: var(--tinta); text-decoration: none; }
.card-guia__titulo a:hover { text-decoration: underline; text-decoration-color: var(--gengibre); text-decoration-thickness: 2px; }
.card-guia__resumo { margin: 0; color: var(--tinta-suave); font-size: var(--fs-apoio); }

.como-escolhemos p { font-size: var(--fs-corpo-g); color: var(--tinta-suave); }
.como-escolhemos .secao__titulo { margin-bottom: 16px; }

/* ---------- Listas (tipo, pet, todos) ---------- */

.trilha { padding: 18px 0 0; font-size: var(--fs-legenda); }
.trilha ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; color: var(--tinta-suave); }
.trilha li + li::before { content: "/"; margin-right: 4px; color: var(--separador); }
.trilha a { color: var(--tinta-suave); text-decoration: none; }
.trilha a:hover { color: var(--tinta); text-decoration: underline; }

.cabeca-lista { display: flex; gap: 18px; align-items: center; padding: 22px 0 6px; }
.cabeca-lista h1 { margin: 0; }
.cabeca-lista__icone {
	flex: none; width: 68px; height: 68px; border-radius: var(--raio); display: grid; place-items: center;
	background: var(--tinta-tipo, var(--raso)); color: var(--traco-tipo, var(--agua-escura));
}
.cabeca-lista__icone .icone { width: 42px; height: 42px; }
.cabeca-lista__desc { margin: .4em 0 0; color: var(--tinta-suave); max-width: 44em; font-size: var(--fs-corpo); }
/* No celular o ícone vai para cima do título, para a descrição usar a largura toda. */
@media (max-width: 599px) {
	.cabeca-lista { flex-direction: column; align-items: flex-start; gap: 12px; }
	.cabeca-lista__icone { width: 52px; height: 52px; border-radius: var(--raio-p); }
	.cabeca-lista__icone .icone { width: 32px; height: 32px; }
}

/* Faixa com foto no topo das listas. Celular: foto em cima, mostrando o lado direito, onde fica o assunto.
   Computador: foto de fundo e texto sobre a metade esquerda, que as fotos deixam livre. */
.faixa-lista { position: relative; isolation: isolate; overflow: hidden; background: var(--espuma); }
.faixa-lista__foto { aspect-ratio: 4 / 3; }
.faixa-lista__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 84% 50%; }
.faixa-lista__texto { padding-top: 2px; padding-bottom: 6px; }
.faixa-lista__texto h1 { margin: 8px 0 .25em; }
@media (min-width: 760px) {
	.faixa-lista { min-height: clamp(300px, 34vw, 440px); display: flex; align-items: center; }
	.faixa-lista__foto { position: absolute; inset: 0; aspect-ratio: auto; z-index: -2; }
	.faixa-lista__foto img { object-position: right center; }
	.faixa-lista::before {
		content: ""; position: absolute; inset: 0; z-index: -1;
		background: linear-gradient(90deg, rgba(243, 250, 251, .92) 0%, rgba(243, 250, 251, .7) 36%, rgba(243, 250, 251, 0) 56%);
	}
	.faixa-lista__texto { padding-top: 12px; padding-bottom: 36px; }
	.faixa-lista__texto > * { max-width: min(34rem, 44vw); }
}

.filtros { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 26px; }
.faixa-lista + .container .filtros { margin-top: 22px; }
.filtros__linha { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0 0 4px; overflow-x: auto; scrollbar-width: none; }
.filtros__linha::-webkit-scrollbar { display: none; }
.chip {
	display: inline-block; white-space: nowrap; padding: 8px 15px; border-radius: var(--raio-pilula);
	background: var(--espuma); color: var(--tinta); text-decoration: none; font-size: var(--fs-apoio); font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--linha);
}
.chip:hover { color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.chip--ativo, .chip--ativo:hover { background: var(--tinta); color: #fff; box-shadow: none; }

.contagem { font-size: var(--fs-apoio); color: var(--tinta-suave); margin: 0 0 18px; }
.vazio { padding: 32px 0; color: var(--tinta-suave); }

/* ---------- Página do produto ---------- */

.produto { display: grid; gap: 28px; padding: 18px 0 8px; }
.produto h1 { margin-bottom: .3em; }
.produto__midia {
	aspect-ratio: 1 / 1; border-radius: var(--raio-g); background: var(--palco);
	display: grid; place-items: center; overflow: hidden;
}
.produto__midia .foto-produto, .produto__midia > img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
/* Foto clara (campo do produto): o multiply deixava produto branco da mesma cor do palco.
   Sem mesclar, a foto fica no próprio fundo branco, num quadro com o canto do card. */
img.foto-produto.foto-produto--clara { mix-blend-mode: normal; background: #fff; border-radius: var(--raio-p); }
.produto__midia .ilustracao .icone { width: 30%; }
.produto__tipo { display: inline-block; margin-bottom: 10px; font-weight: 600; color: var(--tinta-suave); text-decoration: none; }
.produto__tipo:hover { color: var(--tinta); text-decoration: underline; }
.produto__porque { font-size: var(--fs-corpo-g); margin: 0 0 22px; max-width: 34em; }
@media (min-width: 860px) {
	.produto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 28px; }
	.produto__midia { position: sticky; top: 90px; }
}

.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0 0 26px; }
.ficha > div { padding: 12px 0; border-top: 1px solid var(--linha); }
.ficha dt { font-size: var(--fs-legenda); color: var(--tinta-suave); }
.ficha dd { margin: 2px 0 0; font-weight: 700; }

.produto__lojas { padding: 20px; background: var(--espuma); border-radius: var(--raio); }
.produto__lojas-titulo { font-size: var(--fs-titulo-g); margin: 0 0 12px; }
.produto__botoes { display: flex; flex-direction: column; gap: 8px; }
.produto__nota { margin: 12px 0 0; font-size: var(--fs-legenda); color: var(--tinta-suave); }
/* A base de 180px só vale lado a lado; em coluna ela viraria altura. */
@media (min-width: 520px) {
	.produto__botoes { flex-direction: row; flex-wrap: wrap; }
	.produto__botoes .botao-loja { flex: 1 1 180px; }
}

.pros-contras { display: grid; gap: 16px; margin: 40px 0 8px; }
.pros-contras__bloco { padding: 22px 24px; border-radius: var(--raio); }
.pros-contras__bloco--bom { background: var(--menta); }
.pros-contras__bloco--atencao { background: var(--gengibre-claro); }
.pros-contras h2 { font-size: var(--fs-titulo-g); margin: 0 0 10px; }
.pros-contras ul { margin: 0; padding-left: 1.2em; }
.pros-contras li { margin: 6px 0; }
.pros-contras__bloco--bom li::marker { color: #2f7d4f; }
.pros-contras__bloco--atencao li::marker { color: #b0601a; }
@media (min-width: 760px) { .pros-contras { grid-template-columns: 1fr 1fr; } }

.produto__texto { max-width: 760px; margin-top: 28px; }
.parecidos { padding: 48px 0 8px; }

/* Barra de compra fixa, só no celular, quando "Onde comprar" já passou. */
.barra-compra { display: none; }
@media (max-width: 859px) {
	.barra-compra {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
		display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
		box-shadow: 0 -8px 24px -12px rgba(16, 48, 58, .35);
		transform: translateY(110%); transition: transform .35s var(--saida);
	}
	.barra-compra--visivel { transform: none; }
	.barra-compra__nome { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.barra-compra .botao-loja { padding: 11px 14px; font-size: var(--fs-apoio); }
	.barra-compra__mais { font-size: var(--fs-legenda); font-weight: 600; white-space: nowrap; }
	/* No fim da página a barra fica por cima do rodapé: o rodapé ganha a altura dela (~60px). */
	.tem-barra-compra .rodape { padding-bottom: calc(28px + 68px + env(safe-area-inset-bottom)); }
}

/* ---------- Texto corrido (guias, páginas) ---------- */

.texto { font-size: var(--fs-corpo-g); line-height: 1.75; }
/* As regras do texto corrido usam :where(.texto) para pesar só como a tag. Assim qualquer
   componente com classe dentro de um guia (o card de produto do [bebedouros], por exemplo)
   fica igual ao de fora. Com .texto h3 / .texto p o card ganhava margens de 16 a 30px. */
:where(.texto) h2 { margin: 1.7em 0 .5em; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
:where(.texto) h3 { margin: 1.5em 0 .4em; font-size: var(--fs-titulo-g); }
:where(.texto) p, :where(.texto) ul, :where(.texto) ol { margin: 0 0 1.1em; }
:where(.texto) li { margin: .35em 0; }
:where(.texto) table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: var(--fs-apoio); margin: 0 0 1.4em; }
:where(.texto) th, :where(.texto) td { padding: 9px 12px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
:where(.texto) blockquote { margin: 0 0 1.2em; padding: .2em 0 .2em 1em; border-left: 4px solid var(--gengibre); color: var(--tinta-suave); }
:where(.texto) img { border-radius: var(--raio); }
.texto .grade-produtos { margin: 1.6em 0 2.2em; font-size: 1rem; line-height: 1.6; }
.texto .resumo-rapido { margin: 0 0 1.6em; padding: 20px 24px; background: var(--raso); border-radius: var(--raio); }
/* O bloco de grupo do WordPress põe um div por dentro: o último item pode estar um nível abaixo. */
.texto .resumo-rapido > :last-child,
.texto .resumo-rapido > * > :last-child { margin-bottom: 0; }

.guia__cabeca { padding: 14px 0 0; }
.guia__data { color: var(--tinta-suave); font-size: var(--fs-apoio); margin: 0; }
.guia__capa { margin: 0 0 32px; aspect-ratio: 16 / 9; border-radius: var(--raio-g); overflow: hidden; background: var(--palco); }
.guia__capa img { width: 100%; height: 100%; object-fit: cover; }
.guia__capa .capa-produto { display: grid; place-items: center; width: 100%; height: 100%; background: var(--areia); }
.guia__capa .capa-produto img { position: absolute; inset: 9% 20%; width: 60%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }

.pagina { padding: 8px 0 24px; }
.pagina h1 { margin-top: .5em; }

.aviso-afiliado { margin: 28px 0; padding: 12px 16px; font-size: var(--fs-legenda); color: var(--tinta-suave); background: var(--espuma); border-radius: var(--raio-p); }
.aviso-afiliado--guia { margin: 14px 0 28px; }

/* ---------- 404 e paginação ---------- */

.pagina-404 { display: grid; gap: 28px; align-items: center; padding: 36px 0 56px; }
.pagina-404__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio-g); }
@media (min-width: 860px) { .pagina-404 { grid-template-columns: 1fr 1fr; gap: 56px; padding-top: 56px; } }
.pagina-404__links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.pagina-404__links a { display: inline-block; padding: 9px 16px; border-radius: var(--raio-pilula); background: var(--espuma); text-decoration: none; color: var(--tinta); font-weight: 600; }

.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.page-numbers { padding: 7px 13px; border-radius: var(--raio-pilula); background: var(--espuma); text-decoration: none; color: var(--tinta); }
.page-numbers.current { background: var(--tinta); color: #fff; }

/* ---------- Rodapé ---------- */

.conteudo { padding-bottom: calc(var(--agua-h) + 40px); }
.conteudo:has(> .secao:last-child) { padding-bottom: var(--agua-h); }

.rodape { position: relative; background: var(--tinta); color: var(--rodape-texto); padding: 40px 0 28px; }
/* A borda de cima do rodapé é a mesma água do topo, parada. */
.rodape__agua { --cor-agua: var(--tinta); top: calc(-1 * var(--agua-h) + 1px); bottom: auto; }
.rodape__agua .agua__onda { animation: none; }
.rodape a { color: #fff; text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-decoration-color: var(--gengibre); }
.rodape__dentro { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.rodape__marca { grid-column: 1 / -1; max-width: 34rem; }
.rodape__marca p { margin: 10px 0 0; font-size: var(--fs-apoio); }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin: 7px 0; font-size: var(--fs-apoio); }
.rodape__titulo { margin: 0 0 10px; font: 700 1rem/1.2 var(--titulo); color: #fff; letter-spacing: 0; }
.rodape__endereco { font-size: var(--fs-apoio); line-height: 1.5; }
.rodape__direitos { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-legenda); color: var(--rodape-suave); }
.marca--rodape { color: #fff; }
.marca--rodape:hover { color: #fff; text-decoration: none !important; }
.aviso-afiliado--rodape { margin: 16px 0 0; background: rgba(255, 255, 255, .06); color: var(--rodape-texto); }
.aviso-afiliado--rodape a { text-decoration: underline; }
@media (min-width: 900px) {
	.rodape__dentro { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
	.rodape__marca { grid-column: auto; }
}

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.js .hero__foto img, .js .hero__titulo span, .js .hero__agua,
	.js [data-revelar] .mosaico__item { opacity: 1 !important; transform: none !important; }
}