/* =========================================================
   Quitandinha da Oli
   Mobile first: base = 375px. Breakpoints com min-width.
   ========================================================= */

:root{
  color-scheme:light dark;

  /* superfícies */
  --kraft:      #F7EFE0;
  --papel:      #FFFBF3;
  --creme:      #FDF6E9;
  --brilho:     #FFF7E8;

  /* marca */
  --verde:      #3E7A4E;
  --verde-esc:  #2E5B3B;
  --verde-clr:  #8FBF6A;
  --laranja:    #EE7B3C;
  --laranja-esc:#C2541C;
  --amarelo:    #F5C33B;
  --pitaya:     #E24A7E;
  --pitaya-esc: #C93A6C;
  --toldo:      #E24A7E;
  --botao-topo: #CE3E71;
  --botao-base: #A82750;
  --botao-degrau:#7A1938;
  --uva:        #6B4A7A;
  --madeira:    #95622F;
  --madeira-clr:#C98B52;
  --laranja-txt:#B34E17;
  --pitaya-txt: #C93A6C;
  --erro:       #A94833;

  /* texto */
  --titulo:     #2E5B3B;
  --sobre-vivo: #3B2A1D;   /* texto sobre laranja e amarelo, sempre escuro */
  --sobre-verde:#FDF6E9;   /* texto sobre as caixas verdes, sempre claro */
  --tinta:      #3B2A1D;
  --tinta-fraca:#7A6552;
  --tinta-tenue:#7F6C57;

  /* traços */
  --borda:      rgba(169,113,63,.24);
  --borda-forte:rgba(169,113,63,.34);
  --tracejado:  rgba(169,113,63,.30);

  /* caixote e trilha */
  --caixote:    linear-gradient(180deg,#C98B52,#A9713F);
  --moldura:    linear-gradient(155deg,#FFFDF8 0%,#FAF3E5 55%,#F3E9D6 100%);
  --etiqueta:   linear-gradient(160deg,#F3E7D3,#EFE0C8);

  --radius:     22px;
  --radius-sm:  14px;
  --sombra:     0 10px 30px rgba(59,42,29,.10);
  --sombra-alta:0 18px 44px rgba(59,42,29,.16);
  --grao-op:    .045;

  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* A feira à noite: mesma identidade, luz baixa. */
@media (prefers-color-scheme:dark){
  :root{
    --kraft:      #221A11;
    --papel:      #2E2318;
    --creme:      #291F15;
    --brilho:     #33261A;

    --verde:      #356743;
    --verde-esc:  #1F4630;
    --verde-clr:  #9ECB7A;
    --laranja:    #F2884B;
    --laranja-esc:#B94E18;
    --amarelo:    #F7CE55;
    --pitaya:     #EC6394;
    --pitaya-esc: #B8305F;
    --toldo:      #C93A6C;
    --botao-topo: #C93A6C;
    --botao-base: #A02649;
    --botao-degrau:#78182F;
    --madeira:    #CE9964;
    --madeira-clr:#B07E4E;
    --laranja-txt:#F2884B;
    --pitaya-txt: #EC6394;
    --erro:       #E88A70;

    --titulo:     #9CD0AB;
    --tinta:      #F4E9D6;
    --tinta-fraca:#BFAB8F;
    --tinta-tenue:#AB9679;

    --borda:      rgba(233,201,150,.20);
    --borda-forte:rgba(233,201,150,.30);
    --tracejado:  rgba(233,201,150,.26);

    --caixote:    linear-gradient(180deg,#7A5230,#5C3D22);
    --moldura:    linear-gradient(155deg,#3A2C1E 0%,#332618 55%,#2B2015 100%);
    --etiqueta:   linear-gradient(160deg,#3A2C1D,#332617);

    --sombra:     0 10px 30px rgba(0,0,0,.4);
    --sombra-alta:0 18px 44px rgba(0,0,0,.5);
  }
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Nunito",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--tinta);
  background:var(--kraft);
  background-image:var(--grao);
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
[hidden]{ display:none !important; }

.wrap{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 22px;
}

/* ---------- tipografia base ---------- */
.olho{
  font-family:"Caveat",cursive;
  font-size:1.45rem;
  font-weight:700;
  color:var(--laranja);
  margin:0 0 4px;
  letter-spacing:.01em;
}
.olho--claro{ color:var(--amarelo); }

.titulo{
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:clamp(1.75rem,7.5vw,2.9rem);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--titulo);
  margin:0 0 16px;
  text-wrap:balance;
}
.titulo--claro{ color:var(--sobre-verde); }

.intro{
  margin:0 auto 34px;
  max-width:56ch;
  color:var(--tinta-fraca);
  font-size:1.02rem;
}

/* ---------- botoes ---------- */
.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:1.08rem;
  letter-spacing:.005em;
  line-height:1;
  padding:17px 32px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--botao-topo), var(--botao-base));
  color:#fff;
  text-decoration:none;
  box-shadow:0 8px 0 var(--botao-degrau), 0 18px 30px rgba(150,30,70,.28);
  transition:transform .15s ease, box-shadow .15s ease;
  min-height:54px;
}
.botao:active{ transform:translateY(6px); box-shadow:0 2px 0 var(--botao-degrau), 0 8px 16px rgba(150,30,70,.2); }
.botao--grande{ font-size:1.14rem; padding:19px 38px; }

/* ---------- toldo listrado ---------- */
.toldo{
  position:relative;
  height:34px;
  background:repeating-linear-gradient(90deg,
    var(--toldo) 0 26px, var(--creme) 26px 52px);
  box-shadow:0 6px 18px rgba(59,42,29,.15);
  z-index:3;
}
.toldo::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-12px;
  height:24px;
  background:radial-gradient(circle 13px at 13px 0, var(--kraft) 12.4px, transparent 13px) repeat-x;
  background-size:26px 24px;
}
.toldo--baixo{ transform:rotate(180deg); box-shadow:none; }
.toldo--baixo::after{ background:radial-gradient(circle 13px at 13px 0, var(--verde-esc) 12.4px, transparent 13px) repeat-x; background-size:26px 24px; }

@media (min-width:760px){
  .toldo{ height:44px; background-size:auto; background:repeating-linear-gradient(90deg, var(--toldo) 0 40px, var(--creme) 40px 80px); }
  .toldo::after{ background:radial-gradient(circle 20px at 20px 0, var(--kraft) 19.4px, transparent 20px) repeat-x; background-size:40px 30px; bottom:-15px; height:30px; }
  .toldo--baixo::after{ background:radial-gradient(circle 20px at 20px 0, var(--verde-esc) 19.4px, transparent 20px) repeat-x; background-size:40px 30px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  padding:40px 0 44px;
  text-align:center;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--brilho) 0%, transparent 60%),
    var(--kraft);
}
.hero__conteudo{ position:relative; z-index:2; }

.hero__titulo{ margin:0; }
.hero__titulo .risca{
  display:block;
  font-family:"Caveat",cursive;
  font-size:clamp(1.7rem,8vw,2.6rem);
  font-weight:700;
  color:var(--madeira);
  line-height:1;
  transform:rotate(-2.5deg);
}
.hero__titulo .nome{
  display:block;
  font-family:"Fredoka",sans-serif;
  font-weight:700;
  font-size:clamp(3.6rem,19vw,7.5rem);
  line-height:.92;
  letter-spacing:-.03em;
  color:var(--titulo);
  margin-top:2px;
  text-shadow:3px 4px 0 rgba(238,123,60,.22);
}

.hero__idade{
  display:inline-flex;
  align-items:baseline;
  gap:9px;
  margin:10px 0 20px;
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:1.1rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--laranja-esc);
}
.hero__idade::before,.hero__idade::after{
  content:"";
  width:26px; height:2px;
  background:var(--laranja);
  opacity:.5;
  align-self:center;
}
.hero__idade span{ font-size:1.6rem; font-weight:700; }

/* caixote com a foto */
.caixote{
  position:relative;
  margin:0 auto 22px;
  max-width:246px;
  padding:11px 11px 38px;
  background:var(--caixote);
  border-radius:var(--radius);
  box-shadow:var(--sombra-alta);
}
.caixote::before{
  content:"";
  position:absolute; inset:7px;
  border:2px dashed rgba(255,255,255,.35);
  border-radius:16px;
  pointer-events:none;
}
.caixote__foto{
  border-radius:14px;
  overflow:hidden;
  background:var(--creme);
  aspect-ratio:4/5;
}
.caixote__foto img{ width:100%; height:100%; object-fit:cover; }
.caixote__etiqueta{
  position:absolute;
  left:50%; bottom:12px;
  transform:translateX(-50%) rotate(-1.5deg);
  white-space:nowrap;
  background:var(--creme);
  color:var(--madeira);
  font-family:"Caveat",cursive;
  font-size:1.15rem;
  font-weight:700;
  padding:3px 18px;
  border-radius:6px;
  box-shadow:0 3px 8px rgba(0,0,0,.16);
}

.hero__texto{
  margin:0 auto 24px;
  max-width:40ch;
  color:var(--tinta-fraca);
  font-size:1.02rem;
}

/* lona de feira ao fundo, camada mais distante do parallax */
.hero__lona{
  position:absolute;
  left:-6%; right:-6%;
  top:-14%;
  height:118%;
  z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--toldo) 9%, transparent) 0 32px,
      transparent 32px 64px);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 34%, transparent 66%);
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 34%, transparent 66%);
}

@media (prefers-color-scheme:dark){
  .hero__lona{ opacity:.5; }
}

/* frutas flutuando */
.hero__frutas{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.flutua{
  position:absolute;
  width:46px; height:46px;
  opacity:.9;
  animation:flutuar 7s ease-in-out infinite;
}
.f1{ top:6%;  left:5%;  width:40px; height:40px; animation-delay:-.4s; }
.f2{ top:15%; right:6%; width:52px; height:52px; animation-delay:-2.1s; }
.f3{ top:44%; left:2%;  width:38px; height:38px; animation-delay:-3.4s; }
.f4{ top:52%; right:3%; width:44px; height:44px; animation-delay:-1.2s; }
.f5{ bottom:8%; left:9%; width:34px; height:34px; animation-delay:-4.6s; }
.f6{ bottom:5%; right:8%;width:40px; height:40px; animation-delay:-5.5s; }

@keyframes flutuar{
  0%,100%{ transform:translateY(0) rotate(-6deg); }
  50%    { transform:translateY(-14px) rotate(6deg); }
}

@media (min-width:760px){
  .hero{ padding:62px 0 78px; }
  .caixote{ max-width:330px; padding:14px 14px 46px; margin-bottom:30px; }
  .caixote__foto{ aspect-ratio:5/7; }
  .flutua{ width:64px; height:64px; }
  .f1{ left:9%; } .f2{ right:11%; } .f3{ left:6%; } .f4{ right:7%; }
  .f5{ left:15%; } .f6{ right:14%; }
  .hero__lona{
    background:repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--toldo) 8%, transparent) 0 52px,
      transparent 52px 104px);
  }
}

/* ---------------------------------------------------------
   Parallax do hero, nativo.
   Cada camada sobe num ritmo diferente conforme a rolagem.
   Quanto mais ao fundo, mais ela se desloca. Sem JS de scroll.
   --------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .tem-scroll-timeline .hero{ view-timeline-name:--heroi; }

    .tem-scroll-timeline [data-camada]{
      will-change:transform;
      animation:subir linear both;
      animation-timeline:--heroi;
      animation-range:exit-crossing 0% exit 100%;
    }
    .tem-scroll-timeline [data-camada="1"]{ --sobe:26%; }
    .tem-scroll-timeline [data-camada="2"]{ --sobe:17%; }
    .tem-scroll-timeline [data-camada="3"]{ --sobe:9%; }
    .tem-scroll-timeline [data-camada="4"]{ --sobe:3.5%; }
  }
}

@keyframes subir{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(0,var(--sobe,0),0); }
}

/* =========================================================
   CONTAGEM
   ========================================================= */
.contagem{
  background:var(--creme);
  padding:52px 0 56px;
  text-align:center;
  border-top:3px dashed var(--tracejado);
}
.relogio{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  list-style:none;
  margin:22px 0 0;
  padding:0;
  max-width:460px;
  margin-inline:auto;
}
.relogio li{
  background:var(--papel);
  border:2px solid var(--borda);
  border-radius:var(--radius-sm);
  padding:12px 4px 10px;
  box-shadow:var(--sombra);
}
.relogio strong{
  display:block;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:clamp(1.6rem,8vw,2.4rem);
  line-height:1;
  color:var(--pitaya);
  font-variant-numeric:tabular-nums;
}
.relogio span{
  display:block;
  margin-top:4px;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinta-fraca);
}
.relogio__aberto{
  margin:22px 0 0;
  font-family:"Caveat",cursive;
  font-size:1.5rem;
  color:var(--verde);
}

/* =========================================================
   AVISO DO HORARIO
   Faixa de largura total, como a fita de um toldo.
   ========================================================= */
.aviso{ padding:56px 0 46px; }

.aviso__faixa{
  position:relative;
  padding:52px 0 44px;
  background:var(--verde-esc);
  color:var(--sobre-verde);
  text-align:center;
}
.aviso__faixa::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:14px;
  background:radial-gradient(circle 9px at 9px 0, var(--kraft) 8.4px, transparent 9px) repeat-x;
  background-size:18px 14px;
}
.aviso__faixa::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:14px;
  background:radial-gradient(circle 9px at 9px 14px, var(--kraft) 8.4px, transparent 9px) repeat-x;
  background-size:18px 14px;
}
.aviso__icone{
  position:absolute;
  top:-34px; left:50%;
  transform:translateX(-50%) rotate(8deg);
  width:74px; height:74px;
  filter:drop-shadow(0 8px 12px rgba(59,42,29,.22));
}
.aviso__hora{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:12px;
  margin:8px 0 18px;
  font-family:"Fredoka",sans-serif;
  color:var(--amarelo);
}
.aviso__hora strong{
  font-size:clamp(2.6rem,15vw,4.6rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
}
.aviso__hora span{
  font-family:"Caveat",cursive;
  font-size:1.5rem;
  color:var(--sobre-verde);
  opacity:.8;
}
.aviso__texto{
  margin:0 auto;
  max-width:46ch;
  color:color-mix(in srgb, var(--sobre-verde) 88%, transparent);
  font-size:1.04rem;
}
@media (min-width:760px){
  .aviso__faixa{ padding:62px 0 54px; }
  .aviso__icone{ top:-40px; width:84px; height:84px; }
}

/* =========================================================
   DETALHES
   Comanda de feira: rótulo à esquerda, informação à direita.
   ========================================================= */
.detalhes{ padding:8px 0 58px; text-align:center; }

.comanda{
  max-width:640px;
  margin:26px auto 0;
  padding:6px 20px;
  background:var(--papel);
  border:2px solid var(--borda);
  border-radius:var(--radius);
  box-shadow:var(--sombra);
  text-align:left;
}
.comanda__linha{
  display:grid;
  gap:2px 14px;
  padding:18px 0;
}
.comanda__linha + .comanda__linha{
  border-top:1px dashed var(--tracejado);
}
.comanda dt{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:"Caveat",cursive;
  font-size:1.4rem;
  font-weight:700;
  line-height:1;
  color:var(--madeira);
}
.comanda__fruta{ width:30px; height:30px; flex:none; }
.comanda dd{ margin:0; }
.comanda dd b{
  display:block;
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:1.16rem;
  line-height:1.3;
  color:var(--titulo);
}
.comanda dd span{
  display:block;
  margin-top:3px;
  font-size:.92rem;
  color:var(--tinta-fraca);
}
.comanda__link{
  display:inline-block;
  margin-top:9px;
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:.95rem;
  color:var(--pitaya-txt);
  text-decoration:none;
  border-bottom:2px solid color-mix(in srgb, var(--pitaya-txt) 40%, transparent);
  padding-bottom:2px;
}

@media (min-width:620px){
  .comanda{ padding:6px 30px; }
  .comanda__linha{
    grid-template-columns:11rem 1fr;
    align-items:baseline;
    padding:20px 0;
  }
  .comanda dt{ font-size:1.5rem; }
}

/* =========================================================
   MENSARIO
   Prateleira de frutas à esquerda, vitrine com a foto à direita.
   No celular a prateleira vira uma faixa que corre na horizontal.
   ========================================================= */
.mensario{
  background:var(--creme);
  padding:58px 0 62px;
  text-align:center;
  border-top:3px dashed var(--tracejado);
  border-bottom:3px dashed var(--tracejado);
}

.prateleira{
  display:grid;
  gap:0;
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--sombra-alta);
  text-align:left;
}

/* ---------- os chips das frutas ---------- */
.prateleira__trilho{
  position:relative;
  background:var(--caixote);
  padding:16px 0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.prateleira__trilho::-webkit-scrollbar{ display:none; }

.prateleira__pista{
  display:flex;
  gap:8px;
  padding:0 16px;
  width:max-content;
}

.prateleira__chip{
  display:flex;
  align-items:center;
  gap:9px;
  flex:none;
  padding:10px 16px 10px 12px;
  border:2px solid rgba(255,255,255,.26);
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.82);
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:.95rem;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.prateleira__chip:hover{ border-color:rgba(255,255,255,.55); color:#fff; }
.prateleira__chip:focus-visible{ outline:3px solid var(--amarelo); outline-offset:2px; }
.prateleira__chip[aria-selected="true"]{
  background:var(--papel);
  border-color:var(--papel);
  color:var(--titulo);
}
.prateleira__fruta{ width:22px; height:22px; flex:none; }
.prateleira__n{
  font-size:.72rem;
  letter-spacing:.1em;
  opacity:.7;
  font-variant-numeric:tabular-nums;
}
.prateleira__chip[aria-selected="true"] .prateleira__n{ color:var(--laranja-txt); opacity:1; }

/* ---------- a vitrine com a foto ---------- */
.vitrine{
  position:relative;
  background:var(--papel);
  padding:20px 18px 24px;
}
.vitrine__carta{
  margin:0;
  animation:entra-carta .55s cubic-bezier(.22,1,.36,1) both;
}
.vitrine__foto{
  aspect-ratio:7/5;
  border-radius:16px;
  overflow:hidden;
  background:var(--moldura);
  border:1px solid var(--borda);
}
.vitrine__foto img{ width:100%; height:100%; object-fit:contain; }

/* mês cuja foto ainda não chegou */
.vitrine__foto--espera{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:2px dashed var(--tracejado);
  background:color-mix(in srgb, var(--kraft) 60%, transparent);
}
.vitrine__espera{
  width:58px; height:58px;
  opacity:.85;
  animation:respira 3.4s ease-in-out infinite;
}
.vitrine__foto--espera p{
  margin:0;
  font-family:"Caveat",cursive;
  font-size:1.35rem;
  font-weight:700;
  color:var(--madeira);
  text-align:center;
  padding:0 20px;
}
@keyframes respira{
  0%,100%{ transform:scale(1)   rotate(-3deg); }
  50%    { transform:scale(1.08) rotate(3deg); }
}

.vitrine__legenda{ padding:16px 2px 0; }
.vitrine__mes{
  margin:0;
  font-family:"Fredoka",sans-serif;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--laranja-txt);
}
.vitrine__legenda h3{
  margin:3px 0 6px;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:1.5rem;
  line-height:1.15;
  color:var(--titulo);
}
.vitrine__frase{
  margin:0;
  font-size:1rem;
  line-height:1.5;
  color:var(--tinta-fraca);
}

@keyframes entra-carta{
  from{ opacity:0; transform:translateX(22px) scale(.97); }
  to  { opacity:1; transform:none; }
}
.vitrine[data-sentido="tras"] .vitrine__carta{ animation-name:entra-carta-tras; }
@keyframes entra-carta-tras{
  from{ opacity:0; transform:translateX(-22px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* ---------- fecho da seção ---------- */
.prateleira__final{
  margin:30px auto 0;
  max-width:44ch;
  font-size:1.02rem;
  color:var(--tinta-fraca);
}
.prateleira__final b{ color:var(--titulo); }
.prateleira__final .botao{ display:flex; margin-top:16px; }

/* ---------- a partir do tablet, prateleira em pé ---------- */
@media (min-width:820px){
  .prateleira{ grid-template-columns:19rem 1fr; }

  .prateleira__trilho{
    min-height:30rem;
    padding:0;
    overflow:hidden;
    display:flex;
    align-items:center;
  }
  .prateleira__trilho::before,
  .prateleira__trilho::after{
    content:"";
    position:absolute;
    left:0; right:0;
    height:5.5rem;
    z-index:2;
    pointer-events:none;
  }
  .prateleira__trilho::before{ top:0;    background:linear-gradient(180deg,#C98B52,transparent); }
  .prateleira__trilho::after { bottom:0; background:linear-gradient(0deg,#A9713F,transparent); }

  .prateleira__pista{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    width:100%;
    padding:0 20px;
    transition:transform .6s cubic-bezier(.22,1,.36,1);
  }
  .prateleira__chip{ width:100%; }
  .prateleira__chip[aria-selected="true"]{ transform:translateX(6px); }

  .vitrine{ padding:26px 26px 30px; display:flex; align-items:center; }
  .vitrine__carta{ width:100%; }
  .vitrine__legenda h3{ font-size:1.7rem; }

  .prateleira__final{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    max-width:none;
    margin-top:34px;
  }
  .prateleira__final .botao{ display:inline-flex; margin-top:0; flex:none; }
}

@media (prefers-color-scheme:dark){
  .prateleira__trilho::before{ background:linear-gradient(180deg,#7A5230,transparent); }
  .prateleira__trilho::after { background:linear-gradient(0deg,#5C3D22,transparent); }
}

/* =========================================================
   GALERIA EM LEQUE
   ========================================================= */
.galeria{ padding:58px 0 56px; text-align:center; }

.leque{
  position:relative;
  overflow:hidden;
  padding:0 8px;

  --carta-l:10rem;    /* largura da carta */
  --palco-a:17.5rem;    /* altura do palco */
  --abre-x:0.10;      /* o quanto o leque abre na horizontal */
  --abre-y:0.16;      /* o quanto as pontas descem */
}
.leque__palco{
  position:relative;
  height:var(--palco-a);
  margin-inline:auto;
  max-width:80rem;
  touch-action:pan-y;
}

.carta{
  position:absolute;
  top:50%; left:50%;
  width:var(--carta-l);
  margin:calc(var(--carta-l) * -0.75) 0 0 calc(var(--carta-l) / -2);
  padding:9px 9px 0;
  border:0;
  border-radius:12px;
  background:var(--papel);
  box-shadow:0 14px 34px rgba(59,42,29,.26);
  cursor:pointer;
  opacity:0;
  transform-origin:50% 130%;
  transition:transform .62s cubic-bezier(.22,1.2,.36,1), opacity .4s ease;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.carta__foto{
  display:block;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:6px;
  background:var(--kraft);
}
.carta__foto img{
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
.carta__etiqueta{
  display:block;
  padding:7px 4px 9px;
  font-family:"Caveat",cursive;
  font-size:1.1rem;
  font-weight:700;
  line-height:1.1;
  color:var(--madeira);
}
.carta:focus-visible{ outline:3px solid var(--laranja); outline-offset:4px; }
.carta[data-centro="sim"]{ cursor:zoom-in; }

/* controles */
.leque__controles{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:22px;
}
.leque__seta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  flex:none;
  border:2px solid var(--borda-forte);
  border-radius:50%;
  background:var(--papel);
  color:var(--titulo);
  cursor:pointer;
  box-shadow:var(--sombra);
  transition:transform .18s ease, border-color .18s ease;
}
.leque__seta:active{ transform:scale(.9); }
.leque__seta:hover{ border-color:var(--laranja); }
.leque__seta svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

.leque__pontos{ display:flex; align-items:center; gap:7px; }
.ponto{
  width:8px; height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--borda-forte);
  cursor:pointer;
  transition:transform .25s ease, background .25s ease;
}
.ponto[aria-current="true"]{ background:var(--pitaya); transform:scale(1.45); }

@media (min-width:480px){
  .leque{ --carta-l:11.5rem; --palco-a:19.5rem; --abre-x:0.16; --abre-y:0.22; }
}
@media (min-width:640px){
  .leque{ --carta-l:13rem; --palco-a:22rem; --abre-x:0.26; --abre-y:0.34; }
}
@media (min-width:768px){
  .leque{ --carta-l:15rem; --palco-a:26rem; --abre-x:0.44; --abre-y:0.58; }
  .carta{ padding:12px 12px 0; border-radius:14px; }
  .carta__etiqueta{ font-size:1.25rem; padding:9px 4px 11px; }
  .leque__seta{ width:54px; height:54px; }
}
@media (min-width:1024px){
  .leque{ --carta-l:17.5rem; --palco-a:30rem; --abre-x:0.66; --abre-y:0.82; }
}

/* =========================================================
   CONFIRMAR
   ========================================================= */
.confirmar{ padding:44px 0 64px; }
.confirmar__caixa{
  position:relative;
  max-width:640px;
  margin-inline:auto;
  background:var(--verde);
  border-radius:26px;
  padding:62px 24px 40px;
  text-align:center;
  box-shadow:var(--sombra-alta);
}
.confirmar__caixa::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px);
  pointer-events:none;
}
.confirmar__fruta{
  position:absolute;
  top:-42px; left:50%;
  transform:translateX(-50%) rotate(-8deg);
  width:78px; height:78px;
  filter:drop-shadow(0 8px 12px rgba(59,42,29,.2));
}
.confirmar__texto{
  margin:0 auto 26px;
  max-width:44ch;
  color:color-mix(in srgb, var(--sobre-verde) 90%, transparent);
  font-size:1.04rem;
}
.confirmar__texto strong{ color:var(--amarelo); }

/* ---------- ficha de confirmacao ---------- */
.ficha{
  position:relative;
  text-align:left;
  background:var(--papel);
  border-radius:20px;
  padding:22px 18px 24px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.campo{ margin-bottom:16px; }
.campo__rotulo{
  display:block;
  margin:0 0 7px;
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:.95rem;
  color:var(--titulo);
}
.campo__rotulo--legenda{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:0;
  margin-bottom:11px;
}
.campo__rotulo--legenda .campo__icone--solto{ margin-top:2px; }
.campo__caixa{ position:relative; }
.campo__icone{
  position:absolute;
  left:13px; top:50%;
  transform:translateY(-50%);
  width:19px; height:19px;
  color:var(--madeira);
  pointer-events:none;
}
.campo__icone--solto{
  position:static;
  transform:none;
  width:19px; height:19px;
  color:var(--laranja);
  flex:none;
}
.campo__input{
  width:100%;
  height:52px;
  padding:0 14px 0 42px;
  border:2px solid var(--borda-forte);
  border-radius:13px;
  background:var(--creme);
  color:var(--tinta);
  font-family:"Nunito",sans-serif;
  font-size:16px;
  transition:border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
.campo__input::placeholder{ color:var(--tinta-tenue); }
.campo__input:focus{
  outline:none;
  border-color:var(--laranja);
  box-shadow:0 0 0 4px rgba(238,123,60,.18);
}
.campo__input[aria-invalid="true"]{ border-color:var(--erro); background:color-mix(in srgb, var(--erro) 9%, var(--creme)); }
.campo__erro{
  margin:6px 0 0;
  font-size:.85rem;
  font-weight:600;
  color:var(--erro);
}


.campo__dica{
  margin:-2px 0 8px;
  font-size:.86rem;
  line-height:1.4;
  color:var(--tinta-fraca);
}
.campo__dica--fim{ margin:10px 0 0; }

/* ---- sugestões da busca ---- */
.sugestoes{
  list-style:none;
  margin:8px 0 0;
  padding:6px;
  max-height:260px;
  overflow-y:auto;
  border:2px solid var(--borda);
  border-radius:14px;
  background:var(--creme);
  box-shadow:0 10px 24px rgba(59,42,29,.14);
}
.sugestao{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:10px;
  cursor:pointer;
  text-align:left;
}
.sugestao:hover,.sugestao:focus{ background:rgba(238,123,60,.12); }
.sugestao__nome{
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:1.02rem;
  color:var(--titulo);
}

/* ---- cabeçalho do convite achado ---- */
.convite{
  margin:0 0 20px;
  padding:16px 16px 14px;
  border-radius:16px;
  background:var(--etiqueta);
  text-align:center;
}
.convite__olho{
  margin:0;
  font-family:"Fredoka",sans-serif;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--laranja-txt);
}
.convite__nome{
  margin:2px 0 0;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:1.3rem;
  line-height:1.2;
  color:var(--titulo);
}
.convite__trocar{
  margin-top:8px;
  padding:0 0 2px;
  border:0;
  background:none;
  font-family:"Caveat",cursive;
  font-size:1.15rem;
  font-weight:700;
  color:var(--pitaya);
  border-bottom:2px solid rgba(226,74,126,.35);
  cursor:pointer;
}

/* ---- cartão de cada pessoa ---- */
.pessoa{
  margin-bottom:16px;
  padding:16px 14px 6px;
  border:2px dashed var(--tracejado);
  border-radius:16px;
  background:color-mix(in srgb, var(--kraft) 55%, transparent);
  transition:opacity .25s ease;
}
.pessoa[data-fora="sim"]{ opacity:.55; }
.pessoa__titulo{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 12px;
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:.95rem;
  color:var(--titulo);
}
.pessoa__num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  flex:none;
  border-radius:50%;
  background:var(--laranja);
  color:var(--sobre-vivo);
  font-size:.82rem;
  font-weight:700;
}

.escolha{ margin-bottom:14px; }
.escolha__rotulo{
  display:block;
  margin-bottom:7px;
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:.88rem;
  color:var(--tinta-fraca);
}
.escolha__opcoes{ display:flex; gap:8px; }

.chip{ position:relative; flex:1 1 0; }
.chip input{
  position:absolute;
  opacity:0;
  width:100%; height:100%;
  margin:0;
  cursor:pointer;
}
.chip span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 10px;
  border:2px solid var(--borda-forte);
  border-radius:12px;
  background:var(--papel);
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:.98rem;
  color:var(--titulo);
  text-align:center;
  transition:all .18s ease;
}
.chip input:checked + span{
  background:var(--verde);
  border-color:var(--titulo);
  color:var(--sobre-verde);
}
.chip--nao input:checked + span{
  background:var(--erro);
  border-color:color-mix(in srgb, var(--erro) 70%, #000);
  color:#FFF4EF;
}
.chip input:focus-visible + span{ box-shadow:0 0 0 4px rgba(238,123,60,.3); }

.resumo{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:12px;
  background:color-mix(in srgb, var(--verde-clr) 20%, transparent);
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:1rem;
  color:var(--titulo);
  text-align:center;
}

.botao--enviar{ width:100%; margin-top:4px; }
.ficha__aviso{
  margin:14px 0 0;
  font-size:.92rem;
  font-weight:600;
  color:var(--erro);
  text-align:center;
}
.ficha__aviso[data-tipo="enviando"]{ color:var(--tinta-fraca); }

.ficha__ok{
  background:var(--papel);
  border-radius:20px;
  padding:34px 22px 30px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.ficha__ok-selo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:62px; height:62px;
  margin-bottom:14px;
  border-radius:50%;
  background:var(--verde-clr);
  color:#16330F;
}
.ficha__ok-selo svg{ width:30px; height:30px; }
.ficha__ok h3{
  margin:0 0 8px;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size:1.55rem;
  color:var(--titulo);
}
.ficha__ok p{ margin:0; color:var(--tinta-fraca); }
.ficha__outra{
  margin-top:18px;
  border:0;
  background:none;
  font-family:"Fredoka",sans-serif;
  font-weight:500;
  font-size:.95rem;
  color:var(--pitaya);
  border-bottom:2px solid rgba(226,74,126,.35);
  padding:0 0 2px;
  cursor:pointer;
}

@media (min-width:620px){
  .ficha, .ficha__ok{ padding:28px 26px 30px; }
  .chip:first-child{ flex:1 1 130px; }
}

/* =========================================================
   RODAPE
   ========================================================= */
.rodape{
  position:relative;
  background:var(--verde-esc);
  padding:58px 0 0;
  text-align:center;
}
.rodape__conteudo{ padding-bottom:52px; }
.rodape__foto{
  width:132px; height:132px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 20px;
  border:5px solid var(--sobre-verde);
  box-shadow:0 10px 26px rgba(0,0,0,.3);
}
.rodape__assinatura{
  margin:0 0 14px;
  font-family:"Caveat",cursive;
  font-size:1.85rem;
  font-weight:700;
  line-height:1.25;
  color:var(--sobre-verde);
}
.rodape__marca{
  margin:0;
  font-family:"Fredoka",sans-serif;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--sobre-verde) 74%, transparent);
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(46,32,21,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 14px;
}
.lightbox[hidden]{ display:none; }
.lightbox__img{
  max-width:100%;
  max-height:100%;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.lightbox__fechar,
.lightbox__nav{
  position:absolute;
  border:0;
  background:rgba(253,246,233,.14);
  color:var(--sobre-verde);
  border-radius:50%;
  width:46px; height:46px;
  font-size:1.9rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__fechar{ top:14px; right:14px; font-size:1.7rem; }
.lightbox__nav--ant{ left:10px; top:50%; transform:translateY(-50%); }
.lightbox__nav--prox{ right:10px; top:50%; transform:translateY(-50%); }
@media (min-width:760px){
  .lightbox__fechar,.lightbox__nav{ width:54px; height:54px; }
  .lightbox__nav--ant{ left:26px; }
  .lightbox__nav--prox{ right:26px; }
}

/* =========================================================
   REVELAR NO SCROLL
   ========================================================= */
.revelar{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.revelar.visivel{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .revelar{ opacity:1; transform:none; }
}