@charset "UTF-8";
/* =========================================================================
   YLLIME — Home
   ========================================================================= */


/* -------------------------------------------------------------------------
   Banner — slider
   Mesma mecânica das vitrines: scroll-snap nativo. O navegador cuida do
   gesto, da inércia e do teclado; o JavaScript só liga setas, pontos e o
   avanço automático. Sem slider, o banner ainda arrasta com o dedo.
   ------------------------------------------------------------------------- */
.hero-slider{
  position:relative;
  background:var(--c-green-700);
  color:#FFFFFF;
}

.hero-slider__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.hero-slider__track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){
  .hero-slider__track{scroll-behavior:auto}
}

.hero-slide{
  position:relative;
  flex:0 0 100%;
  scroll-snap-align:start;
  display:flex;
  min-height:clamp(420px,62vh,660px);
  overflow:hidden;
}

.hero-slide__media{position:absolute;inset:0}
.hero-slide__media picture{display:block;width:100%;height:100%}
.hero-slide__img{width:100%;height:100%;object-fit:cover}

/* O véu é o que mantém o texto branco legível sobre qualquer foto.
   A intensidade é escolhida banner a banner, no admin. */
.hero-slide__media::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
}
.hero-slide--veil-bottom .hero-slide__media::after{
  background:linear-gradient(
    to top,
    rgba(22,33,15,.74) 0%,
    rgba(22,33,15,.44) 42%,
    rgba(22,33,15,.10) 78%,
    rgba(22,33,15,0) 100%
  );
}
.hero-slide--veil-full .hero-slide__media::after{
  background:rgba(22,33,15,.48);
}
.hero-slide--veil-none .hero-slide__media::after{display:none}

/* Banner só de imagem: o link cobre a área toda */
.hero-slide__cover{position:absolute;inset:0;z-index:2}

.hero-slide__inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  width:100%;
  padding-block:clamp(3rem,6vw,5rem) clamp(4.5rem,8vw,6.5rem);
}
.hero-slide__content{max-width:36rem}

.hero-slide--align-center .hero-slide__inner{justify-content:center;text-align:center}
.hero-slide--align-center .hero-slide__content{margin-inline:auto}
.hero-slide--align-center .hero-slide__actions{justify-content:center}
.hero-slide--align-right .hero-slide__inner{justify-content:flex-end;text-align:right}
.hero-slide--align-right .hero-slide__actions{justify-content:flex-end}

.hero-slider .eyebrow{color:rgba(255,255,255,.74)}

.hero-slide__title{
  color:#FFFFFF;
  font-size:var(--t-2xl);
  font-weight:400;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  text-wrap:balance;
  margin-bottom:var(--s-4);
}

.hero-slide__text{
  color:rgba(255,255,255,.88);
  font-size:var(--t-md);
  max-width:34rem;
  margin-bottom:var(--s-6);
}
.hero-slide--align-center .hero-slide__text{margin-inline:auto}
.hero-slide--align-right .hero-slide__text{margin-left:auto}

.hero-slide__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* Botão discreto sobre foto precisa de borda clara para existir */
.hero-slide__actions .btn--quiet{
  --btn-fg:#FFFFFF;
  --btn-bd:rgba(255,255,255,.55);
}
.hero-slide__actions .btn--quiet:hover{
  --btn-bg:#FFFFFF;
  --btn-fg:var(--c-green-700);
  --btn-bd:#FFFFFF;
}

/* ---- Controles ---- */
.hero-slider__ui{
  position:absolute;
  left:0;right:0;bottom:clamp(1.25rem,3vw,2rem);
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--s-3);
  pointer-events:none;             /* só os controles recebem clique */
}
.hero-slider__ui > *{pointer-events:auto}

.hero-slider__arrow{
  border:1px solid rgba(255,255,255,.45);
  color:#FFFFFF;
  background:rgba(22,33,15,.22);
  backdrop-filter:blur(2px);
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease);
}
.hero-slider__arrow:hover{background:rgba(22,33,15,.5);border-color:#FFFFFF;color:#FFFFFF}
.hero-slider__arrow:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}

.hero-slider__dots{display:flex;align-items:center;gap:var(--s-2);margin-right:auto}

.hero-slider__dot{
  width:28px;height:3px;
  background:rgba(255,255,255,.38);
  transition:background var(--dur) var(--ease);
}
.hero-slider__dot[aria-current="true"]{background:#FFFFFF}
.hero-slider__dot:hover{background:rgba(255,255,255,.7)}
.hero-slider__dot:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px}

@media (max-width:560px){
  .hero-slider__arrow{display:none}       /* no celular o gesto basta */
  .hero-slider__dots{margin-inline:auto}
  .hero-slider__ui{justify-content:center}
}

/* ---- Sem banner cadastrado ---- */
.hero-slider--empty{background:var(--c-green-700)}
.hero-slider--empty .hero-slide__inner{
  align-items:center;
  padding-block:clamp(3.5rem,8vw,6rem);
}
.hero-slider__tip{
  position:relative;
  z-index:2;
  padding:var(--s-3) var(--gutter);
  background:rgba(0,0,0,.28);
  font-size:var(--t-xs);
  color:rgba(255,255,255,.9);
}
.hero-slider__tip a{color:#FFFFFF;text-decoration:underline}


/* -------------------------------------------------------------------------
   Faixa de garantias
   ------------------------------------------------------------------------- */
.trust{border-bottom:var(--hairline)}

.trust__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s-5) var(--s-4);
  padding-block:var(--s-6);
  list-style:none;
}
.trust__item{display:flex;align-items:center;gap:var(--s-4)}
.trust__icon{flex:none;color:var(--c-ink)}
.trust__icon svg{stroke-width:1.15}
.trust__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.trust__title{
  font-size:var(--t-sm);
  font-weight:500;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
}
.trust__text{font-size:var(--t-xs);color:var(--c-muted)}

@media (max-width:900px){
  .trust__grid{grid-template-columns:repeat(2,1fr)}
}
/*
 * Uma coluna até 560, e não até 420: em duas colunas num aparelho de 430px
 * sobram ~140px por item, e rótulos como "ENVIO NACIONAL" quebram em duas
 * linhas. Quatro linhas limpas leem melhor que duas colunas espremidas.
 */
@media (max-width:560px){
  .trust__grid{grid-template-columns:1fr}
}


/* -------------------------------------------------------------------------
   Categorias
   ------------------------------------------------------------------------- */
.cats{list-style:none}

.cat{display:block}
.cat__media{background:var(--c-canvas)}
.cat__img{transition:transform var(--dur-slow) var(--ease)}
@media (hover:hover){
  .cat:hover .cat__img{transform:scale(1.03)}
}

.cat__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  margin-top:var(--s-4);
  padding-bottom:var(--s-3);
  border-bottom:var(--hairline);
  transition:border-color var(--dur) var(--ease);
}
.cat:hover .cat__label{border-color:var(--c-green-700)}

.cat__name{
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
}
.cat__label svg{flex:none;color:var(--c-muted)}
.cat:hover .cat__label svg{color:var(--c-green-700)}


/* -------------------------------------------------------------------------
   Bloco institucional
   Duas metades de tela cheia. Empilha no celular, com a imagem em cima.
   ------------------------------------------------------------------------- */
.manifesto{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:clamp(420px,52vw,560px);
  /* Sem margem própria: as seções vizinhas já têm padding de --section-y.
     Somar as duas coisas dobrava o espaço e quebrava o ritmo vertical. */
}

.manifesto__text{
  display:flex;
  align-items:center;
  background:var(--c-canvas);
  padding:var(--s-8) var(--gutter);
}
.manifesto__inner{max-width:30rem;margin-left:auto;padding-right:var(--s-6)}
.manifesto__inner h2{margin-block:var(--s-2) var(--s-4)}
.manifesto__inner p{color:var(--c-muted);margin-bottom:var(--s-6)}

.manifesto__media{background:var(--c-green-50);position:relative}
.manifesto__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (max-width:900px){
  .manifesto{grid-template-columns:1fr;min-height:auto}
  .manifesto__media{order:-1;aspect-ratio:16/10}
  .manifesto__text{padding-block:var(--s-7)}
  .manifesto__inner{margin-left:0;padding-right:0;max-width:none}
}