/* ══════════════════════════════════════════════════════════════════
   Plastix — HOME
   Só o que não se repete em outra página. O resto vem de base.css.
   Reconstruída em grid/flex: o layout antigo usava 266 unidades cqw e
   46 position:absolute, o que travava qualquer edição de texto.
   ══════════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────────────
   Fundo laranja texturizado recortado da arte original; os copos
   entram como <img> à direita e o headline virou TEXTO. */
/* Arte de fundo do cliente; o gradiente fica como cor de base enquanto a
   imagem carrega e cobre alturas maiores que a arte. As cores dele sao a
   media da PRIMEIRA fileira da arte (esquerda -> direita), por isso a faixa
   que sobra acima dela nao aparece como emenda. */
/* A arte entra INTEIRA: `100% auto` ocupa toda a largura e a altura sai
   proporcional — nada é cortado, nem no topo nem nas laterais (era o que
   o `cover` fazia). O min-height dá ao hero a mesma proporção da arte
   (1920x1011), então ela preenche a seção exatamente. O gradiente fica
   atrás como reserva, caso o conteúdo estique o hero além disso. */
.hero--home{
  /* min-height:calc(100vw / 1.899); */
  min-height:calc(780px);
  background:
    url('../img/bg-hero-home-m.webp') center bottom / 100% auto no-repeat,
    linear-gradient(to right, #F28D39 0%, #E2721A 1%, #C75B0C 2%, #AB4704 3%,
      #9F3F00 4%, #7C2F02 6%, #7B3101 8%, #762E01 12%, #7B3003 17%, #642601 25%,
      #722D01 33%, #732D01 42%, #742D01 50%, #6F2B01 58%, #562000 67%,
      #4B1C01 75%, #421800 83%, #421A01 92%, #270F00 100%);
  /* a faixa ondulada ocupa a base: o padding evita que ela cubra os feats */
  padding-bottom:clamp(4.5rem, 3rem + 4.5vw, 8rem);
}
@media (min-width: 821px){
  .hero--home{ background-image:url('../img/bg-hero-home.webp'),
    linear-gradient(to right, #F28D39 0%, #E2721A 1%, #C75B0C 2%, #AB4704 3%,
      #9F3F00 4%, #7C2F02 6%, #7B3101 8%, #762E01 12%, #7B3003 17%, #642601 25%,
      #722D01 33%, #732D01 42%, #742D01 50%, #6F2B01 58%, #562000 67%,
      #4B1C01 75%, #421800 83%, #421A01 92%, #270F00 100%); }
}
/* Piso de altura no desktop: ate 1481px a altura proporcional (100vw/1.899)
   fica abaixo de 780px e o hero fica baixo demais. Acima disso a proporcao
   volta a mandar sozinha — se o piso valesse la, o topo da arte seria
   cortado. Duas media queries em vez de max(): CSS simples, sem funcao. */
@media (min-width: 821px) and (max-width: 1481px){
  .hero--home{ min-height:780px; }
}
/* A onda da base já vem desenhada no próprio bg-hero-home (por isso o
   background é ancorado em `bottom`). Sobrepor bar-hero-home aqui criava
   uma segunda onda: como o topo dessa faixa é reto na borda esquerda,
   aparecia a linha horizontal do corte. Mesmo tratamento da /copos-termicos. */
.hero--home::after{ display:none; }
.hero--home .wrap{ grid-template-columns:1.05fr .95fr; align-items:center; }

.hero__copy--home{ text-align:left; padding-bottom:0; }

/* headline como arte (h1-home): a sombra vem do próprio PNG, então só
   uma sombra suave pra descolar do fundo */
.hero--home .hero__h1{ width:min(100%, 560px); height:auto; margin-inline:0;
  filter:drop-shadow(0 14px 26px rgb(30 10 0 / .35)); }
@media (max-width:820px){ .hero--home .hero__h1{ width:min(88%, 430px); margin-inline:auto; } }
/* os dois CTAs têm alturas iguais (51px), mas o .pulso é inline-flex e
   arrastava a linha de base — stretch alinha os dois pelo topo/base */
/* os CTAs acompanham a largura da arte do h1 e ficam centrados sob ela */
.hero__acoes{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:14px;
  align-items:stretch; justify-content:center;
  width:min(100%, 560px); margin-inline:0; }
.hero__acoes .pulso, .hero__acoes .btn-out{ align-self:stretch; }
/* .hero__copy .pulso (base.css) aplica margin-top e desalinhava os dois
   CTAs — dentro de .hero__acoes o espaçamento já vem do próprio bloco */
.hero__acoes .pulso{ margin-top:0; }
.hero__acoes .btn-out{ display:inline-flex; }
.hero__acoes .pulso::before{ background:#37E39B; }   /* halo puxa pro verde sobre o laranja */

.hero--home .feats{ margin-top:2rem; }
.hero--home .feats li{ color:#FFFFFF; }
.hero--home .feats svg{ color:var(--amarelo); }

/* PNG com fundo transparente e composição própria: fica inteiro dentro do
   wrap (sem sangrar) e dispensa a máscara que o recorte antigo exigia. */
.hero__foto--home{ align-self:center; margin-bottom:0; }
.hero__foto--home img{ width:100%; max-width:560px; height:auto; margin-inline:auto;
  filter:drop-shadow(0 22px 34px rgb(30 10 0 / .40)); }

/* a base é desenhada pelo ::after (acima); o ::before herdado fica off */
.hero--home::before{ display:none; }

@media (max-width:820px){
  /* deitada, a arte daria ~217px de altura: baixo demais pro conteúdo.
     Aqui ela volta a cobrir e o corte acontece nas laterais. */
  .hero--home{ padding-top:7.5rem; min-height:0;
    background-size:cover, auto; }
  .hero--home .wrap{ grid-template-columns:1fr; }
  .hero__copy--home{ text-align:center; }
  .hero__acoes{ justify-content:center; }
  .hero--home .feats{ justify-content:center; }
  .hero__foto--home{ order:1; margin-top:1.5rem; margin-right:0; }
}

/* ── ARTE DE GRAÇA (fundo claro, texto à esquerda + foto) ───────── */
.arte{ background:#FFFFFF; }
.arte .wrap{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem, 3vw, 3.5rem); align-items:center; }
.arte .pulso{ margin-top:1.8rem; }
.arte__foto{ border-radius:var(--raio); overflow:hidden; }
.arte__foto img{ width:100%; height:auto; }
.hl-verde-claro{ color:var(--verde-marca); }
@media (max-width:820px){
  .arte .wrap{ grid-template-columns:1fr; }
  .arte__foto{ order:-1; }
}

/* ── ESTRUTURA PRÓPRIA (fundo escuro) ──────────────────────────── */
.estrutura{ background:url('../img/bg-estrutura.png') center top; background-size:100%;}
.estrutura__foto{ margin-top:2.2rem; border-radius:var(--raio); overflow:hidden; }
.estrutura__foto img{ width:100%; height:auto; }
.grid-cards--escuro{ margin-top:1.6rem; }
.card--escuro{ background:rgb(255 255 255 / .05); border-color:rgb(255 255 255 / .10); box-shadow:none; }
.card--escuro::before{ display:none; }             /* sem o miolo branco do card claro */
.card--escuro h3{ color:#FFFFFF; }
.card--escuro p{ color:rgb(255 255 255 / .62); }

/* ── COMO FUNCIONA ─────────────────────────────────────────────── */
.passos{ background:var(--creme); }
.passos__foto{ margin-top:2.2rem; border-radius:var(--raio); overflow:hidden;
  box-shadow:0 26px 50px -22px rgb(20 10 2 / .3); }
.passos__foto img{ width:100%; height:auto; }

/* ── QUEM SOMOS (fundo escuro, 2 colunas) ──────────────────────── */
.quem{ background:var(--escuro-2) url('../img/bg-depoimentos.webp') center center / cover no-repeat; }
.quem .wrap{ display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(1.5rem, 3vw, 3.5rem); align-items:center; }
/* lados invertidos: a foto vem antes do texto (o resto do visual — fade,
   moldura — é o componente .foto-slide compartilhado em base.css) */
.quem__foto{ order:-1; }
.quem .sub + .sub{ margin-top:.9rem; }
@media (max-width:820px){ .quem .wrap{ grid-template-columns:1fr; } }

/* telas muito estreitas (≤340px): o ícone do WhatsApp não cabe junto do
   rótulo dentro de um card de meia-largura — some, o texto continua */
@media (max-width:340px){
  .carrossel__trilho .btn-verde .wa-ico{ display:none; }
}

/* ══════════ #arte — pilares com ícone (entre a descrição e o CTA) ══════════ */
.pilares{ margin-top:1.8rem; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem 1.4rem; list-style:none; }
.pilar{ display:grid; grid-template-columns:50px 1fr; gap:.75rem; align-items:flex-start; }
.pilar__ico{ width:45px; height:45px; border-radius:11px; display:grid;
  place-items:center; background:#f7b51324; }
.pilar__ico svg{ width:21px; height:21px; color:var(--laranja); display:block; }
.pilar strong{ display:block; font-size:.95rem; color:#211C18; line-height:1.25; }
.pilar span{ display:flex; align-content:center;
  margin-top:.15rem; font-size:.85rem; color:var(--cinza-txt); line-height:1.4; }
.pilar>span { justify-content:center; }
@media (max-width:560px){ .pilares{ grid-template-columns:1fr; } }

/* ══════════ #estrutura — foto com altura controlada + ícones nos boxes ══════════ */
.estrutura__foto img{ width:100%; height:clamp(230px, 26vw, 380px); object-fit:cover;
  object-position:center 46%; }
/* imagem no topo (largura toda), depois ícone + título lado a lado e a
   descrição abaixo — mesma leitura do card de produto */
.card--escuro{ display:grid; grid-template-columns:44px 1fr; gap:.7rem .8rem;
  align-items:center; }
.card__img{ grid-column:1 / -1; border-radius:12px; overflow:hidden;
  background:rgb(255 255 255 / .04); margin-bottom:.3rem; }
.card__img img{ width:100%; height:clamp(150px, 13vw, 190px); object-fit:cover;
  object-position:center 30%; }
.card--escuro .card__ico{ width:44px; height:44px; border-radius:12px; display:grid;
  place-items:center; background:rgb(5 194 117 / .14); margin:0; }
.card--escuro .card__ico svg{ width:23px; height:23px; color:var(--verde-marca); }
.card--escuro h3{ margin:0; font-size:1rem; line-height:1.2; }
.card--escuro p{ grid-column:1 / -1; margin-top:0; }