@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Poppins:wght@500;600;700&display=swap');

/* =========================================================
   TEMA CLEAN CLARO — camada de aparência sobre o styles.css
   Mesma estrutura editorial do ORYZO (caixa-alta peso 500,
   fios tracejados, cantos de 12px, zero sombra), invertida
   para fundo claro, com as cores da logo LisPet.
   NÃO altera textos, estrutura nem a mecânica de scroll.
   Para voltar ao visual LisPet original: apague a linha
   <link rel="stylesheet" href="theme-clean.css"> do index.html
   ========================================================= */

:root{
  --c-canvas:#fffcf6;   /* fundo da página: branco quente */
  --c-surface:#f7f1e4;  /* cards e superfícies elevadas */
  --c-border:#e6dcc9;   /* fios e bordas tracejadas */
  --c-mid:#9c9184;      /* tom médio, só para divisores e ornamentos */
  --c-text:#241812;     /* grafite quente — o preto da logo */
  --c-accent:#d11c15;   /* vermelho da logo (levemente fechado p/ contraste) */
  --c-brand:#ffcb05;    /* amarelo da logo */
  --c-orange:#f26b1d;   /* laranja da logo */

  /* remapeia os tokens do site */
  --amarelo:var(--c-brand);
  --amarelo-claro:var(--c-brand);
  --amarelo-suave:var(--c-surface);
  --vermelho:var(--c-accent);
  --vermelho-esc:var(--c-accent);
  --laranja:var(--c-canvas);
  --laranja-med:var(--c-canvas);
  --laranja-esc:var(--c-canvas);
  --grafite:var(--c-text);
  --grafite-2:var(--c-text);
  --creme:var(--c-canvas);
  --creme-2:var(--c-surface);
  --branco:var(--c-canvas);
  --texto:var(--c-text);
  --texto-suave:var(--c-text);
  --linha:var(--c-border);

  --sombra:none;
  --sombra-forte:none;
  --r:12px;
  --r-lg:12px;
  --fonte:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- base ---------- */
html{overflow-x:clip}
body{
  background:var(--c-canvas);
  color:var(--c-text);
  font-family:var(--fonte);
  font-weight:400;
  line-height:1.26;
}

/* caixa-alta peso 500 em tudo, menos a voz descritiva */
h1,h2,h3,h4,
.kicker,.nav a,.btn,.tab,.step-n,.prod-tag,
.hero-trust li,.footer h4,.foot-bottom,.calc-out small,.fld>span,
summary,.marquee-track span{
  font-family:var(--fonte);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:normal;
}
h1,h2,h3,h4{color:var(--c-text)}

/* caixa mista peso 400 — texto de leitura */
.lead,.sub,.bene p,.step p,.tcard blockquote,
details p,.footer p,.calc-notes li,
.prod .prod-sub,.small,.tiny,.calc-fine{
  text-transform:none;
  font-weight:400;
  color:var(--c-text);
}

/* escala de tipos */
/* Poppins nos títulos; o resto do site segue em Inter */
.hero h1,.title{font-family:'Poppins',var(--fonte);font-weight:600}
.hero h1{font-size:clamp(34px,5.4vw,51px);line-height:.95}
.title{font-size:clamp(28px,3.6vw,41px);line-height:.95}
/* o design pedia 29px aqui, mas nesta página o parágrafo é longo
   e competia com o título — 19px máx. deixa a hierarquia clara */
.lead,.sub{font-size:clamp(15px,1.35vw,19px);line-height:1.5;max-width:46ch}
.kicker{font-size:12px;color:var(--c-accent);letter-spacing:normal}
.bene h3,.step h3,.tcard figcaption{font-size:24px;line-height:1.09}
.prod h3,.footer h4{font-size:18px;line-height:1}
.nav a,.btn,.tab,.prod-tag{font-size:13px}
.small,.tiny,.calc-fine,.foot-bottom{font-size:12px}

/* acento: frases curtas, tags e créditos */
.hl{color:var(--c-accent)}
.hl::after{display:none}
.hl-red{color:var(--c-accent)}
.logo-word{color:var(--c-accent)}
.logo-word i{color:var(--c-accent);-webkit-text-stroke:0}

/* ---------- superfícies: dois degraus claros, sem sombra ---------- */
.hero,.benefits,.products,.testi,.calc,.faq,
.recipe,.marquee{
  background:var(--c-canvas);
  box-shadow:none
}
/* ---------- hero com foto de fundo ----------
   A foto já traz a lata e os ingredientes à direita, então a lata
   solta em PNG sai de cena para não duplicar o produto.
   O véu claro à esquerda é o que segura a leitura do texto. */
.hero{
  background:
    linear-gradient(100deg,
      rgba(255,252,246,.94) 0%,
      rgba(255,252,246,.88) 30%,
      rgba(255,252,246,.45) 50%,
      rgba(255,252,246,0) 66%),
    url('assets/fundo.webp') right center / cover no-repeat,
    var(--c-canvas);
  min-height:clamp(520px,66vh,720px);
  display:flex;align-items:center
}
.hero-art .glow{display:none}
.hero-art{min-height:clamp(300px,38vw,460px)}

/* linhas dos cards até os alimentos — ficam atrás dos cards,
   então o traço parece sair de trás de cada um */
.hero-links{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;overflow:visible
}
.hero-link{
  fill:none;stroke:var(--c-text);stroke-width:1.5;
  stroke-linecap:round;opacity:.42;
  stroke-dasharray:var(--traco,0);stroke-dashoffset:var(--traco,0);
  animation:desenhaLinha 1.1s var(--ease) .5s forwards
}
.hero-dot{fill:var(--c-text);opacity:0;animation:aparecePonto .4s ease 1.4s forwards}
@keyframes desenhaLinha{to{stroke-dashoffset:0}}
@keyframes aparecePonto{to{opacity:.55}}
.recipe{background-image:none;background:var(--c-canvas);color:var(--c-text)}


.bene,.prod,.tcard,.calc-box,details,.float-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:12px;
  box-shadow:none
}
details[open]{
  box-shadow:none;border-color:var(--c-text)
}

/* ---------- grade das latas ----------
   flex em vez de grid: com grid de 3 colunas, uma aba com 2 latas
   deixaria as duas encostadas à esquerda. Com flex centralizado,
   qualquer quantidade fica no meio — 3 por linha no desktop, então
   os adultos ficam em cima e os filhotes embaixo. */
.prod-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:20px;max-width:830px;margin-inline:auto
}
.prod{width:min(250px,100%)}

/* ---------- cards das latas: mesmo efeito amarelo dos benefícios ---------- */
.prod:hover{
  border-color:var(--c-brand);
  background:#fffbe9;
  box-shadow:none
}
.prod::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:4px;background:var(--c-brand);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)
}
.prod:hover::after{transform:scaleX(1)}

/* ---------- cards de benefício: efeito amarelo no mouse ----------
   fundo levemente amarelado, borda da marca e um filete amarelo
   correndo na base. overflow:hidden faz o filete respeitar os cantos. */
.bene{overflow:hidden}
.bene:hover{
  border-color:var(--c-brand);
  background:#fffbe9;
  box-shadow:none
}
.bene::before{
  display:block;content:"";
  position:absolute;left:0;right:0;bottom:0;top:auto;
  width:auto;height:4px;border-radius:0;
  background:var(--c-brand);opacity:1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)
}
/* opacity:1 é obrigatório aqui: o styles.css deixa .bene:hover::before
   em 0.16 e, sem isso, o filete sairia quase transparente */
.bene:hover::before{transform:scaleX(1);opacity:1}

/* ---------- divisores tracejados ---------- */
.marquee{border-block:1px dashed var(--c-border)}
.header.scrolled{border-bottom:1px dashed var(--c-border)}
.foot-bottom{border-top:1px dashed rgba(255,252,246,.35)}

/* ---------- topo e navegação ---------- */
.header{background:rgba(255,252,246,.85);backdrop-filter:blur(14px)}
.nav a{color:var(--c-text);font-size:13px}
/* efeito do mouse no menu: o traço é o laranja da logo */
.nav a::after{background:var(--c-orange);height:2px}
.nav a:hover{color:var(--c-text)}
.nav a.active{color:var(--c-text)}
.nav a.active::after{background:var(--c-orange);height:2px}
.burger span{background:var(--c-text)}
.scroll-progress span{background:var(--c-accent);box-shadow:none}

/* ---------- botões ---------- */
.btn{box-shadow:none;border-radius:36px}
.btn:hover{transform:none;box-shadow:none}
/* CTA no amarelo da marca: numa página de venda o botão precisa
   puxar o olho, e o amarelo com texto grafite dá 10:1 de contraste */
.btn-primary{background:var(--c-brand);color:var(--c-text);border-color:transparent}
.btn-primary:hover{background:#ffd83f}
.btn-ghost{
  background:transparent;color:var(--c-text);
  border:1px solid var(--c-text);border-radius:22.5px
}
.btn-ghost:hover{background:transparent;color:var(--c-text);border-color:var(--c-accent)}
.btn-dark{background:var(--c-text);color:var(--c-canvas)}
.btn-dark:hover{background:#3a2a22}

.tab{
  background:transparent;color:var(--c-text);
  border:1px solid var(--c-border);border-radius:22.5px;box-shadow:none
}
.tab:hover{border-color:var(--c-text);color:var(--c-text)}
/* aba selecionada no amarelo da logo, com texto grafite (10:1) */
.tab.active{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-text);box-shadow:none}

/* ---------- hero ---------- */
.hero-trust b{color:var(--c-accent);font-weight:500}
.hero-trust li{font-size:12px;color:var(--c-text)}
.blob{display:none}
.paw{opacity:.10;filter:none}
.hero-art .glow{background:radial-gradient(circle,rgba(255,203,5,.30) 0%,transparent 68%);animation:none}
.hero-pet{display:none}   /* cachorro e gato fora do hero */
.float-card small{color:var(--c-text)}
/* o card de fibras ficava colado na batata doce e escondia a própria
   linha; subiu para o alto da foto, deixando o traço visível */
.fc2{top:9%;bottom:auto;right:-2%}
.scroll-hint{color:var(--c-text)}
.mouse{border-color:var(--c-text)}
.mouse i{background:var(--c-text)}

/* ---------- faixa de selos ---------- */
/* faixa de selos no amarelo da logo, texto grafite (10:1 de contraste) */
.marquee{background:var(--c-brand);color:var(--c-text);border-block:0}
.marquee-track span{font-size:14px;letter-spacing:normal;color:var(--c-text)}
.marquee-track em{color:var(--c-text);opacity:.45}

/* ---------- seção da lata ---------- */
.recipe .kicker{color:var(--c-accent)}
.recipe .title{color:var(--c-text)}
.recipe .hl{color:var(--c-accent)}
.step{border-left:1px dashed var(--c-border)}
.step.on{border-left:1px solid var(--c-accent)}
.step-n{color:var(--c-mid)}
.step.on .step-n{color:var(--c-accent)}
.step h3{color:var(--c-text)}
.step p{color:var(--c-text);font-size:18px}
.recipe-bar{background:var(--c-border)}
.recipe-bar span{background:var(--c-brand)}
.recipe-ring{border:1px dashed var(--c-border)}
.recipe-ring span{background:conic-gradient(var(--c-brand) calc(var(--p,0)*1%),transparent 0)}
.can-stage{filter:drop-shadow(0 24px 30px rgba(36,24,18,.22))}
/* vapor: no claro o branco sumiria — vira um cinza quente translúcido */
.steam i{background:radial-gradient(circle,rgba(120,105,92,.30) 0%,rgba(120,105,92,.10) 45%,rgba(120,105,92,0) 72%)}

/* ---------- produtos ---------- */
.prod-tag{background:var(--c-accent);color:#fff;border:0;border-radius:9999px;font-size:10px}
.prod .prod-w{color:var(--c-accent);font-weight:500}
.prod .prod-sub{color:var(--c-text);font-size:14px}
.prod-img img{filter:drop-shadow(0 14px 16px rgba(36,24,18,.18))}

/* ---------- depoimentos ---------- */
.tcard .stars{color:#a8660a;-webkit-text-stroke:0;font-size:13px}
.tcard blockquote{font-size:18px;line-height:1.35}
/* a faixa quase dobrou de comprimento (6 → 11 depoimentos);
   sem esticar o tempo, ela passaria correndo */
.testi-track{animation-duration:84s}
.tcard figcaption{color:var(--c-text);font-size:12px}
.testi-row{-webkit-mask:none;mask:none}

/* ---------- calculadora ---------- */
.fld>span{font-size:12px;color:var(--c-text)}
.fld>span b{color:var(--c-accent)}
/* background-color, não o atalho background: o atalho zerava o
   repeat/position herdados e a setinha virava textura repetida */
.fld select{
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23241812' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 4px center;
  color:var(--c-text);
  border:0;border-bottom:1px solid var(--c-text);border-radius:0;
  padding:10px 30px 10px 2px
}
.fld select:focus{border-color:var(--c-accent)}
input[type=range]{background:var(--c-border)}
input[type=range]::-webkit-slider-thumb{background:var(--c-brand);border-color:var(--c-canvas);box-shadow:none}
input[type=range]::-moz-range-thumb{background:var(--c-brand);border-color:var(--c-canvas);box-shadow:none}
.calc-out{background:var(--c-canvas);border:1px dashed var(--c-border);border-radius:12px}
.calc-out small{color:var(--c-text);font-size:10px}
.calc-out b{color:var(--c-text);font-weight:500}
.calc-fine{color:var(--c-text)}

/* ---------- dúvidas ---------- */
summary{color:var(--c-text);font-size:18px}
summary::after{color:var(--c-accent)}
details p{font-size:18px}
details a{color:var(--c-accent);text-decoration:underline}

/* ---------- fechamento e rodapé ---------- */
/* rodapé no vermelho da marca. Aqui o texto inverte para creme:
   sobre o vermelho o grafite cairia para 3,2 e o creme dá 5,4 */
.footer{background:var(--c-accent);color:var(--c-canvas)}
.footer h4,.footer p,.footer a{color:var(--c-canvas)}
.footer a:hover{color:var(--c-canvas);text-decoration:underline}
/* logo sem o quadrado branco. Como o PNG foi recortado (a arte ocupava
   só 21% do arquivo), a altura agora vale para a arte de verdade */
.foot-logo{background:none;padding:0;border-radius:0;height:clamp(46px,5vw,62px)}
.brand img{height:clamp(28px,2.6vw,34px)}
.header.scrolled .brand img{height:clamp(24px,2.2vw,29px)}
/* eram 4 colunas; sem a de cuidados, sobraram 3.
   Só no desktop: no celular 3 colunas espremem o e-mail, que é uma
   palavra sem espaços, e ele empurrava a página para 455px de largura. */
@media (min-width:861px){
  .foot-grid{grid-template-columns:1.5fr 1fr 1.2fr}
}
/* e-mail longo precisa poder quebrar em tela estreita */
.footer a{overflow-wrap:anywhere}

/* ---------- hero no celular ----------
   Em coluna única a foto ficaria atrás do texto todo, então o véu
   passa a ser vertical e a imagem, mais leve, ancora embaixo. */
/* ---------- hero no celular ----------
   Em tela vertical o "cover" ampliava tanto a foto panorâmica que
   só sobrava um pedaço da carne. Aqui ela vira imagem de verdade,
   num recorte vertical que mostra a cena inteira, com os balões
   por cima apontando cada alimento. */
@media (max-width:860px){
  .hero{
    background:var(--c-canvas);
    min-height:auto;display:block;
    padding-bottom:0
  }
  .hero-art{
    min-height:0;
    aspect-ratio:900/647;
    background:url('assets/fundo-mobile.webp') center/cover no-repeat;
    border-radius:12px;
    margin-top:18px;
    overflow:visible
  }
  .hero-links{display:none}   /* em tela pequena as linhas poluem */

  /* balões sobre os alimentos do recorte:
     carne em 17,6% / 66,5% · vegetal em 69,6% / 75,6% */
  .float-card{
    display:block;position:absolute;
    padding:8px 12px;font-size:12px;
    max-width:47%;animation:none
  }
  .float-card b{font-size:12px}
  .float-card small{font-size:11px;line-height:1.3;display:block}
  .fc1{top:auto;bottom:30%;left:2%;right:auto}
  .fc2{top:auto;bottom:4%;right:2%;left:auto}
}

/* ---------- flutuantes ---------- */
/* sem o botão do WhatsApp, o "voltar ao topo" ocupa o canto sozinho */
.to-top{background:var(--c-text);color:var(--c-canvas);bottom:18px}
.to-top:hover{background:var(--c-accent)}

/* =========================================================
   CELULAR — seção da lata
   O styles.css desliga o sticky abaixo de 860px e a animação
   inteira acontecia fora da tela. Aqui ela volta a ficar presa —
   mas o bloco precisa de FUNDO SÓLIDO, senão os passos rolam
   por baixo e aparecem através do título e da lata.
   ========================================================= */
@media (max-width:860px){
  .recipe-sticky{
    position:sticky;top:0;z-index:3;
    background:var(--c-canvas);
    padding:10px 0 8px;
    border-bottom:1px dashed var(--c-border)
  }
  .recipe .kicker{margin-bottom:4px}
  .recipe .title{font-size:clamp(22px,6.4vw,28px);margin-bottom:0}
  .recipe-visual{padding-top:clamp(38px,6vh,58px);margin:6px 0 8px;min-height:0}
  .can-stage{width:min(56%,200px)}
  .recipe-bar{max-width:none;height:4px}

  /* passos mais curtos: com 34vh cada a seção passava de 2300px */
  .step{min-height:22vh;padding:14px 0 14px 20px}
  .step h3{font-size:19px}
  .step p{font-size:15px}
  .recipe-steps{gap:10px;padding-block:14px 40px}
}


/* ---------- latas em duas colunas no celular ----------
   A .prod-grid é flex e o card tem width:min(250px,100%). Num celular de
   375px sobram 335px úteis, então 250px só deixa uma lata por linha e a
   sessão fica comprida demais. Aqui o card passa a valer metade da linha. */
@media (max-width:860px){
  .prod-grid{gap:12px}
  .prod{width:calc(50% - 6px);padding:14px 10px 16px}
  .prod h3{font-size:15px}
  .prod .prod-sub{font-size:12.5px;margin-bottom:8px}
  .prod .prod-w{font-size:15px}
  .prod-tag{top:8px;left:8px;font-size:9px;padding:3px 7px;letter-spacing:.04em}

  /* Cada linha vira um sabor: adulto à esquerda, filhote à direita.
     O catálogo entrega os três adultos e depois os três filhotes, que é a
     ordem de que o desktop precisa (adultos em cima, filhotes embaixo).
     Então aqui só trocamos a ordem visual, sem mexer no HTML nem no desktop.
     Fica preso ao data-cat para não bagunçar gatos e LisPet Natural. */
  .prod-grid[data-cat="caes"] .prod:nth-child(1){order:1}  /* carne adulto    */
  .prod-grid[data-cat="caes"] .prod:nth-child(4){order:2}  /* carne filhote   */
  .prod-grid[data-cat="caes"] .prod:nth-child(2){order:3}  /* frango adulto   */
  .prod-grid[data-cat="caes"] .prod:nth-child(5){order:4}  /* frango filhote  */
  .prod-grid[data-cat="caes"] .prod:nth-child(3){order:5}  /* cordeiro adulto */
  .prod-grid[data-cat="caes"] .prod:nth-child(6){order:6}  /* cordeiro filhote*/
}

/* ---------- link do Instagram no rodapé ----------
   O .footer a é display:block e só ganha sublinhado no hover, então no
   celular nada indicava que dava para tocar. O ícone resolve isso. */
.footer a.foot-social{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;
  /* o texto sozinho dava 19px de altura: alvo pequeno demais para o dedo */
  min-height:40px;margin-bottom:0
}
.footer a.foot-social svg{
  flex:none;fill:none;
  stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round
}
.footer a.foot-social svg .ponto{fill:currentColor;stroke:none}
.footer a.foot-social:hover{text-decoration:underline}