/* LA Alimentos (LA Frutas Premium): site. Cores do logo: laranja #ff8525 e vermelho-laranja #ff4428.
   Texto branco só sobre os tons escurecidos (--marca, --marca-escura), para passar de 4,5:1. */
@font-face { font-family: "Urbanist"; src: url("../fonts/urbanist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Urbanist"; src: url("../fonts/urbanist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --laranja: #ff8525;
  --vermelho: #ff4428;
  --marca: #c2301a;
  --marca-escura: #9e2614;
  --topo-1: #c94a0a;
  --topo-2: #c2301a;
  --tinta: #2b2523;
  --texto: #4a413d;
  --suave: #fff5ee;
  --borda: #f0dfd5;
  --escuro: #2b1710;
  --raio: 18px;
  --sombra: 0 10px 30px rgba(80, 30, 10, .12);
  --fonte: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--fonte); font-size: 1.0625rem; line-height: 1.6; color: var(--texto); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: var(--marca); }
h1, h2, h3 { color: var(--tinta); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
p { margin: 0 0 1em; }
.conteiner { width: min(1200px, 100% - 32px); margin-inline: auto; }
.ico { width: 1.2em; height: 1.2em; flex: none; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; color: var(--marca); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.pular:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.selo { display: inline-block; margin: 0 0 .6em; font-size: .85rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--marca); }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.5em; border: 2px solid var(--marca); border-radius: 999px; background: var(--marca); color: #fff; font: 800 1rem/1.2 var(--fonte); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.botao:hover { background: var(--marca-escura); border-color: var(--marca-escura); transform: translateY(-1px); }
.botao--claro { background: #fff; border-color: #fff; color: var(--marca); }
.botao--claro:hover { background: var(--suave); border-color: var(--suave); color: var(--marca-escura); }
.botao--contorno { background: transparent; color: var(--marca); }
.botao--contorno:hover { color: #fff; }
.botao--contorno-claro { background: transparent; border-color: #fff; color: #fff; }
.botao--contorno-claro:hover { background: #fff; border-color: #fff; color: var(--marca); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 50; background: linear-gradient(90deg, var(--topo-1), var(--topo-2)); box-shadow: 0 2px 14px rgba(120, 30, 0, .25); }
.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.topo__logo img { width: 190px; height: auto; }
.topo__abrir { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.topo__abrir .ico { width: 30px; height: 30px; }
.topo__ico-fechar { display: none; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu__lista { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.menu__item { position: relative; }
.menu__link { display: block; padding: 10px 14px; color: #fff; text-decoration: none; font-weight: 800; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; }
.menu__link:hover, .menu__link.is-ativo { background: rgba(255, 255, 255, .16); }
.menu__sub { position: absolute; left: 0; top: 100%; min-width: 220px; list-style: none; margin: 0; padding: 10px; background: #fff; border-radius: 14px; box-shadow: var(--sombra); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s; }
.menu__item--sub:hover .menu__sub, .menu__item--sub:focus-within .menu__sub { opacity: 1; visibility: visible; transform: none; }
.menu__sub a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-weight: 700; }
.menu__sub a:hover { background: var(--suave); color: var(--marca); }
.menu__fone { min-height: 44px; padding: .5em 1.1em; font-size: .95rem; }

@media (max-width: 960px) {
  .topo__logo img { width: 160px; }
  .topo__abrir { display: block; }
  .menu { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 16px 24px; background: var(--topo-2); max-height: calc(100vh - 76px); overflow-y: auto; display: none; }
  .topo.is-aberto .menu { display: flex; }
  .topo.is-aberto .topo__ico-abrir { display: none; }
  .topo.is-aberto .topo__ico-fechar { display: block; }
  .menu__lista { flex-direction: column; }
  .menu__link { padding: 12px 14px; }
  .menu__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255, 255, 255, .1); display: grid; grid-template-columns: 1fr 1fr; }
  .menu__sub a { color: #fff; font-weight: 600; }
  .menu__sub a:hover { background: rgba(255, 255, 255, .15); color: #fff; }
}

/* Slide do topo. Slide de produto: painel na cor da fruta (texto) + foto enquadrada na fruta + tigela recortada
   flutuando na divisa. O texto nunca fica em cima da fruta, em nenhuma largura de tela. */
.slides { position: relative; overflow: hidden; background: #f4ece6; }
.slides__trilho { display: grid; }
.slide { grid-area: 1 / 1; position: relative; min-height: clamp(480px, 74vh, 680px); opacity: 0; visibility: hidden; z-index: 1; transition: opacity 0s .9s, visibility 0s .9s; }
/* O novo slide entra por cima; o anterior fica inteiro embaixo até a entrada terminar (sem os dois meio transparentes). */
.slide.is-ativo { opacity: 1; visibility: visible; z-index: 2; transition: opacity .9s ease, visibility 0s; }
.slide__sobre { margin: 0 0 16px; font-size: .9rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.slide__titulo { margin: 0 0 16px; color: inherit; line-height: .92; }
.slide__forte { display: block; font-size: clamp(2.8rem, 5.4vw, 4.8rem); font-weight: 900; letter-spacing: -.035em; text-transform: uppercase; }
.slide__leve { display: block; font-size: clamp(1.7rem, 3.2vw, 2.8rem); font-weight: 500; letter-spacing: -.01em; margin-top: 6px; }
.slide__frase { font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 500; margin: 0 0 28px; max-width: 340px; opacity: .95; }
/* Entrada do texto a cada troca */
.slide__texto > * { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.slide.is-ativo .slide__texto > * { opacity: 1; transform: none; }
.slide.is-ativo .slide__texto > :nth-child(2) { transition-delay: .12s; }
.slide.is-ativo .slide__texto > :nth-child(3) { transition-delay: .24s; }
.slide.is-ativo .slide__texto > :nth-child(4) { transition-delay: .36s; }

/* Banner contínuo: o fundo é a cor da própria foto; a foto fica à direita, posicionada pela fruta (--foco = centro
   da fruta na foto, 0 a 1), e se dissolve no fundo por todos os lados (máscara radial menor que a distância até a borda mais próxima da foto), sem linha de emenda. */
.slide--produto { --h: clamp(480px, 74vh, 680px); --w: calc(var(--h) * 16 / 9); display: flex; align-items: center; min-height: var(--h); background: var(--fundo-fruta); color: #fff; overflow: hidden; }
.slide--produto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(20, 0, 0, var(--escurece, .2)) 0%, rgba(20, 0, 0, 0) 55%); }
.slide__painel { position: relative; z-index: 2; width: 46%; padding: 60px 24px 90px max(16px, calc((100vw - 1200px) / 2 + 64px)); }
.slide__midia { position: absolute; top: 0; height: 100%; width: var(--w); left: calc(70% - var(--foco) * var(--w)); -webkit-mask-image: radial-gradient(ellipse 33% 47% at calc(var(--foco) * 100%) 50%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 33% 47% at calc(var(--foco) * 100%) 50%, #000 52%, transparent 100%); }
.slide__midia picture, .slide__midia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.slide.is-ativo .slide__midia img { animation: aproximar 9s ease-out both; }
@keyframes aproximar { from { transform: scale(1.12); } to { transform: scale(1); } }
/* Tigela à esquerda e embaixo da fruta, sem cobrir a fruta nem o texto. */
.slide__tigela { --tw: clamp(200px, 18vw, 310px); position: absolute; z-index: 3; left: calc(70% - var(--w) * .21 - var(--tw) * .2); bottom: 4%; width: var(--tw); transform: translateX(-44%); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45)); }
.slide.is-ativo .slide__tigela { animation: tigela-entra 1s cubic-bezier(.2, .9, .3, 1.2) .25s both, flutuar 5s ease-in-out 1.3s infinite; }
@keyframes tigela-entra { from { opacity: 0; transform: translate(-44%, 40px) scale(.85); } to { opacity: 1; transform: translate(-44%, 0) scale(1); } }
@keyframes flutuar { 0%, 100% { transform: translate(-44%, 0); } 50% { transform: translate(-44%, -12px); } }

/* Embalagem de 400 g em pé à direita da fruta, levemente inclinada, entrando depois da tigela. */
.slide__emb { --ew: clamp(150px, 13vw, 240px); position: absolute; z-index: 3; left: calc(70% + var(--w) * .085); bottom: 5%; width: var(--ew); transform: rotate(6deg); transform-origin: 50% 100%; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .45)); }
.slide__emb img { width: 100%; height: auto; }
.slide.is-ativo .slide__emb { animation: emb-slide 1s cubic-bezier(.2, .9, .3, 1.2) .5s both; }
@keyframes emb-slide { from { opacity: 0; transform: translateY(50px) rotate(14deg); } to { opacity: 1; transform: rotate(6deg); } }

/* Slide da linha: leque de embalagens sobre o verde do catálogo da LA */
.slide--linha { --h: clamp(480px, 74vh, 680px); display: flex; align-items: center; min-height: var(--h); color: #fff; overflow: hidden; background: radial-gradient(55% 80% at 72% 58%, #47b552 0%, #1d7a34 46%, #0c3f1d 100%); }
.slide--linha::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 25, 8, .35) 0%, rgba(0, 25, 8, 0) 55%); }
.slide__leque { position: absolute; z-index: 2; top: 50%; right: max(16px, calc((100vw - 1200px) / 2)); width: min(50vw, 640px); aspect-ratio: 1.45; transform: translateY(-48%); }
.slide__leque::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 2%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); z-index: -1; }
.leque__item { position: absolute; bottom: 6%; width: 27%; transform-origin: 50% 100%; filter: drop-shadow(0 20px 20px rgba(0, 20, 5, .45)); }
.leque__item img { width: 100%; height: auto; }
.leque__item--1 { left: 0; --r: -15deg; z-index: 1; }
.leque__item--2 { left: 17%; --r: -7deg; bottom: 9%; z-index: 2; }
.leque__item--3 { left: 35%; width: 31%; --r: 0deg; bottom: 11%; z-index: 4; }
.leque__item--4 { left: 56%; --r: 7deg; bottom: 9%; z-index: 3; }
.leque__item--5 { left: 73%; --r: 15deg; z-index: 2; }
.leque__item { transform: rotate(var(--r)); }
.slide.is-ativo .leque__item { animation: leque-abre .9s cubic-bezier(.2, .9, .3, 1.15) both; }
.slide.is-ativo .leque__item--2, .slide.is-ativo .leque__item--4 { animation-delay: .1s; }
.slide.is-ativo .leque__item--1, .slide.is-ativo .leque__item--5 { animation-delay: .2s; }
@keyframes leque-abre { from { opacity: 0; transform: translateY(40px) rotate(0deg); } to { opacity: 1; transform: rotate(var(--r)); } }

/* Cor de fundo e enquadramento de cada foto (a fruta fica em lugares diferentes em cada uma) */
.slide.cor-morango { --fundo-fruta: #b4202a; --foco: .63; --escurece: .25; }
.slide.cor-amora { --fundo-fruta: #3a2877; --foco: .36; --escurece: .15; }
.slide.cor-framboesa { --fundo-fruta: #be2465; --foco: .63; --escurece: .3; }
.slide.cor-mirtilo { --fundo-fruta: #58197f; --foco: .35; --escurece: .15; }
.slide.cor-abacaxi { --fundo-fruta: #ec6001; --foco: .34; --escurece: .5; }

/* Slide de abertura: vitrine com três tigelas da LA sobre o laranja da marca */
.slide--capa { --h: clamp(480px, 74vh, 680px); display: flex; align-items: center; min-height: var(--h); color: #fff; overflow: hidden; background: radial-gradient(60% 85% at 74% 55%, #ff9a3c 0%, #f2611c 42%, #c2301a 100%); }
.slide--capa::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(60, 10, 0, .3) 0%, rgba(60, 10, 0, 0) 55%); }
.slide--capa .slide__forte { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.slide__vitrine { position: absolute; z-index: 2; top: 50%; right: max(16px, calc((100vw - 1200px) / 2)); width: min(50vw, 640px); aspect-ratio: 1.5; transform: translateY(-54%); }
.vitrine__item { position: absolute; filter: drop-shadow(0 24px 26px rgba(80, 10, 0, .45)); }
.vitrine__item img { width: 100%; height: auto; }
.vitrine__item--abacaxi { left: -4%; top: 2%; width: 56%; }
.vitrine__item--mirtilo { right: -6%; top: -4%; width: 56%; }
.vitrine__item--morango { left: 18%; bottom: 0; width: 66%; z-index: 2; }
.slide.is-ativo .vitrine__item { animation: flutuar-livre 6s ease-in-out infinite; }
.slide.is-ativo .vitrine__item--mirtilo { animation-delay: -2s; }
.slide.is-ativo .vitrine__item--morango { animation-delay: -4s; }
@keyframes flutuar-livre { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.slides__seta { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(30, 10, 5, .35); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s, color .2s; }
.slides__seta:hover { background: #fff; color: var(--marca); }
.slides__seta .ico { width: 22px; height: 22px; }
.slides__seta--ant { left: 20px; }
.slides__seta--prox { right: 20px; }
.slides__pontos { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 5; display: flex; justify-content: center; gap: 2px; }
.slides__pontos button { width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.slides__pontos button::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); transition: width .3s, background .3s; }
.slides__pontos button[aria-current="true"]::before { width: 26px; background: var(--laranja); }

@media (max-width: 1100px) { .slides__seta { display: none; } }
@media (max-width: 700px) {
  .slide { min-height: 0; }
  .slide--produto { display: block; min-height: 0; padding-top: 300px; }
  .slide__midia { top: 0; height: 300px; left: 50%; transform: translateX(calc(var(--foco) * -100%)); width: 534px; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 30%); mask-image: linear-gradient(0deg, transparent 0, #000 30%); }

  .slide__painel { width: auto; padding: 24px 16px 72px; }
  .slide--produto::after { background: linear-gradient(0deg, rgba(20, 0, 0, var(--escurece, .2)) 0%, rgba(20, 0, 0, 0) 60%); }
  .slide__tigela { --tw: 150px; left: auto; right: -30px; bottom: auto; top: 190px; }
  .slide--capa { display: block; min-height: 0; padding-top: 300px; }
  .slide__vitrine { top: 24px; right: 50%; width: 330px; transform: translateX(50%); }
  .slide__emb { --ew: 84px; left: 14px; bottom: auto; top: 176px; }
  .slide--linha { display: block; min-height: 0; padding-top: 290px; }
  .slide__leque { top: 18px; right: 50%; width: 360px; transform: translateX(50%); }
}

/* Linha de produtos: tigela recortada saindo de uma forma laranja, como embalagem de vitrine */
.linha { padding: 72px 0 64px; background: #f7f2ee; }
.linha__titulo { text-align: center; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--marca); margin-bottom: 40px; }
.linha__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 26px; }
.linha__lista--emb { grid-template-columns: repeat(5, 1fr); gap: 40px 34px; }
.linha__item { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: var(--marca); font-weight: 800; font-size: 1.15rem; text-align: center; }
.linha__palco { position: relative; width: 100%; aspect-ratio: 1 / .95; display: flex; align-items: flex-end; justify-content: center; }
.linha__palco::before { content: ""; position: absolute; left: 3%; right: 3%; bottom: 0; height: 52%; border-radius: 26px; background: linear-gradient(160deg, var(--laranja) 0%, #ff6a1f 55%, var(--vermelho) 100%); box-shadow: 0 14px 26px rgba(255, 90, 30, .28), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .35s, box-shadow .35s; }
.linha__img { position: relative; z-index: 1; flex: none; width: 100%; max-width: none; margin-bottom: 0; margin-left: 12%; filter: drop-shadow(0 14px 14px rgba(90, 20, 0, .35)); transition: transform .45s cubic-bezier(.2, .9, .3, 1.3); }
.linha__img img { width: 100%; height: auto; }
/* Recortes no mesmo quadro (840x672): a tigela fica a 44% da largura; margin-left a centraliza sobre a forma. */
/* Embalagem em pé sobre o palco laranja (quadro 3:4, apoiada embaixo) */
.linha__img--emb { width: 66%; margin-left: 0; margin-bottom: 7%; filter: drop-shadow(0 16px 14px rgba(90, 20, 0, .3)); }
.linha__item:hover .linha__img { transform: translateY(-12px) scale(1.06) rotate(-2deg); }
.linha__item:hover .linha__palco::before { transform: scale(1.04); box-shadow: 0 20px 34px rgba(255, 90, 30, .38), inset 0 1px 0 rgba(255, 255, 255, .35); }
.linha__item:hover .linha__nome { color: var(--marca-escura); }
@media (max-width: 1100px) { .linha__lista { grid-template-columns: repeat(4, 1fr); gap: 34px 18px; } }
@media (max-width: 560px) { .linha__lista { grid-template-columns: repeat(2, 1fr); gap: 30px 14px; } .linha__item { font-size: 1.05rem; } }
.linha__lista--escura { grid-template-columns: repeat(5, 1fr); margin-top: 32px; }
@media (max-width: 900px) { .linha__lista.linha__lista--escura { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .linha__lista.linha__lista--escura { grid-template-columns: repeat(2, 1fr); } }

/* Mosaico (Seja parceiro) */
.mosaico { padding: 72px 0; }
.mosaico__grade { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; min-height: 600px; }
.cartao { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: 24px; color: #fff; text-decoration: none; min-height: 270px; box-shadow: var(--sombra); background: #111; isolation: isolate; }
.cartao--grande { grid-row: span 2; }
.cartao__foto, .cartao__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.cartao__foto--direita img { object-position: 70% center; }
.cartao:hover .cartao__foto img { transform: scale(1.07); }
.cartao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, 0)); transition: opacity .4s; }
.cartao__texto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 32px; transition: transform .4s; }
.cartao:hover .cartao__texto { transform: translateY(-4px); }
.cartao__selo { font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffd2b8; }
.cartao__titulo { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.05; font-weight: 900; letter-spacing: -.02em; }
.cartao--grande .cartao__titulo { font-size: clamp(2.1rem, 3.8vw, 3.3rem); }
.cartao__frase { max-width: 440px; font-weight: 500; font-size: 1.08rem; }
.cartao .botao { margin-top: 10px; }
/* Palco dos cartões: caixa e embalagens da LA sobre a cor da linha (sem foto de fruta) */
.cartao--parceiro { background: radial-gradient(circle at 50% 30%, #d8481f, var(--marca-escura) 70%); }
.cartao--sabor { background: radial-gradient(circle at 75% 40%, #7b3a9e, #3a1757 75%); }
.cartao--linha { background: radial-gradient(circle at 75% 40%, #ff9a2e, #c94a0a 75%); }
.cartao--parceiro::after, .cartao--sabor::after, .cartao--linha::after { background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 45%); }
.cartao__palco { position: absolute; inset: 0; pointer-events: none; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.cartao:hover .cartao__palco { transform: scale(1.04); }
.cartao__palco img { display: block; width: 100%; height: auto; }
.cartao__caixa, .cartao__emb { position: absolute; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .4)); }
.cartao--parceiro .cartao__caixa { top: 9%; left: 50%; width: 68%; transform: translateX(-50%); }
.cartao--parceiro .cartao__emb { top: 33%; width: 20%; }
.cartao--parceiro .cartao__emb--1 { left: 10%; transform: rotate(-9deg); }
.cartao--parceiro .cartao__emb--2 { left: 40%; top: 37%; width: 18%; z-index: 1; }
.cartao--parceiro .cartao__emb--3 { right: 10%; transform: rotate(9deg); }
.cartao--sabor .cartao__emb, .cartao--linha .cartao__emb { bottom: 6%; }
.cartao--sabor .cartao__emb--1 { right: 33%; width: 23%; transform: rotate(-8deg); }
.cartao--sabor .cartao__emb--2 { right: 18%; width: 21%; bottom: 6%; z-index: 1; }
.cartao--sabor .cartao__emb--3 { right: 3%; width: 23%; transform: rotate(8deg); }
.cartao--linha .cartao__emb--1 { right: 39%; width: 13%; }
.cartao--linha .cartao__emb--2 { right: 22%; width: 18%; }
.cartao--linha .cartao__emb--3 { right: 2%; width: 23%; }
.cartao--sabor .cartao__texto, .cartao--linha .cartao__texto { max-width: 46%; }
@media (max-width: 800px) {
  .mosaico__grade { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .cartao--grande { grid-row: auto; min-height: 440px; }
  .cartao--grande.cartao--parceiro { min-height: 560px; }
  .cartao--parceiro .cartao__caixa { top: 5%; width: 80%; }
  .cartao--parceiro .cartao__emb { top: 27%; width: 24%; }
  .cartao--parceiro .cartao__emb--2 { left: 38%; top: 30%; width: 22%; }
  .cartao--sabor .cartao__texto, .cartao--linha .cartao__texto { max-width: 100%; }
  .cartao--sabor, .cartao--linha { min-height: 340px; align-items: flex-end; }
  .cartao--sabor .cartao__emb, .cartao--linha .cartao__emb { top: 8%; bottom: auto; }
  .cartao--sabor .cartao__emb--1 { right: 52%; width: 26%; }
  .cartao--sabor .cartao__emb--2 { right: 37%; width: 23%; }
  .cartao--sabor .cartao__emb--3 { right: 18%; width: 26%; }
  .cartao--linha .cartao__emb--1 { right: 60%; width: 15%; top: 22%; }
  .cartao--linha .cartao__emb--2 { right: 39%; width: 20%; top: 14%; }
  .cartao--linha .cartao__emb--3 { right: 13%; width: 25%; }
}

/* Empresa + redes: duas metades de ponta a ponta */
.empresa { display: grid; grid-template-columns: 1fr 1fr; background: var(--suave); }
.empresa__texto { padding: 96px 64px 96px max(16px, calc((100vw - 1200px) / 2)); }
.empresa__chamada { font-size: 1.3rem; font-weight: 700; color: var(--tinta); line-height: 1.45; }
.empresa__desde { display: flex; align-items: center; gap: 18px; margin: 32px 0 0; padding-top: 22px; border-top: 1px solid var(--borda); }
.empresa__desde strong { font-size: 3.2rem; line-height: 1; font-weight: 900; letter-spacing: -.03em; color: var(--marca); }
.empresa__desde span { font-weight: 600; color: var(--tinta); }
.redes { position: relative; overflow: hidden; display: flex; align-items: center; padding: 96px max(16px, calc((100vw - 1200px) / 2)) 96px 64px; color: #fff; background: radial-gradient(80% 70% at 100% 0%, rgba(255, 133, 37, .55), transparent 60%), linear-gradient(150deg, #c94a0a 0%, #a8260f 55%, #5c1408 100%); }
.redes::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; bottom: -220px; border-radius: 50%; border: 70px solid rgba(255, 255, 255, .06); }
.redes__in { position: relative; width: 100%; }
.redes__selo { margin: 0 0 10px; font-weight: 700; font-size: .9rem; letter-spacing: .18em; text-transform: uppercase; color: #ffd2b8; }
.redes__titulo { color: #fff; font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 900; letter-spacing: -.02em; margin-bottom: 8px; }
.redes__frase { font-size: 1.12rem; font-weight: 500; margin-bottom: 28px; }
.redes__posts { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.redes__posts a { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: #111; box-shadow: 0 14px 30px rgba(40, 5, 0, .35); }
.redes__posts li:nth-child(2) a { transform: translateY(22px); }
.redes__posts picture, .redes__posts img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.redes__posts li:nth-child(1) img { object-position: 64% center; }
.redes__posts li:nth-child(2) img { object-position: 64% center; }
.redes__posts li:nth-child(3) img { object-position: 60% center; }
.redes__posts a:hover img { transform: scale(1.08); }
.redes__ico { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--marca); opacity: 0; transform: scale(.7); transition: .3s; }
.redes__posts a:hover .redes__ico, .redes__posts a:focus-visible .redes__ico { opacity: 1; transform: none; }
.redes .botao { margin-top: 18px; }
@media (max-width: 900px) {
  .empresa { grid-template-columns: 1fr; }
  .empresa__texto { padding: 64px 16px; }
  .redes { padding: 64px 16px 72px; }
}

/* Missão, visão e valores: três colunas de texto, divisória fina, sem ícone nem cartão */
.mvv { padding: 72px 0 80px; background: #fff; }
.mvv__grade { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.mvv__grade::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tinta); transform-origin: left; }
.mvv__item h3 { position: relative; display: inline-block; padding-bottom: 6px; }
.mvv__item h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 18px; height: 2px; background: var(--laranja); transition: width .4s ease; }
.mvv__item:hover h3::after { width: 100%; }
/* Efeito ao aparecer: a linha se desenha e as colunas sobem uma após a outra (só com JS; sem ele fica tudo visível). */
.js .mvv__grade[data-revelar] { opacity: 1; transform: none; }
.js .mvv__grade::before { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.js .mvv__grade.is-visivel::before { transform: scaleX(1); }
.js .mvv__item { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .mvv__grade.is-visivel .mvv__item { opacity: 1; transform: none; }
.js .mvv__grade.is-visivel .mvv__item:nth-child(1) { transition-delay: .35s; }
.js .mvv__grade.is-visivel .mvv__item:nth-child(2) { transition-delay: .5s; }
.js .mvv__grade.is-visivel .mvv__item:nth-child(3) { transition-delay: .65s; }
.mvv__item { padding: 26px 32px 0 0; }
.mvv__item + .mvv__item { padding-left: 32px; border-left: 1px solid var(--borda); }
.mvv__item h3 { margin: 0 0 10px; font-size: .9rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--marca); }
.mvv__item p { margin: 0; font-size: 1.3rem; line-height: 1.45; font-weight: 600; color: var(--tinta); }
@media (max-width: 800px) {
  .mvv__grade { grid-template-columns: 1fr; }
  .mvv__item, .mvv__item + .mvv__item { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--borda); }
}
/* Revelação ao rolar (só com JS; sem ele tudo aparece normal) */
.js [data-revelar] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.js [data-revelar].is-visivel { opacity: 1; transform: none; }
.linha__lista > li:nth-child(2) { transition-delay: .06s; }
.linha__lista > li:nth-child(3) { transition-delay: .12s; }
.linha__lista > li:nth-child(4) { transition-delay: .18s; }
.linha__lista > li:nth-child(5) { transition-delay: .24s; }
.linha__lista > li:nth-child(6) { transition-delay: .3s; }
.linha__lista > li:nth-child(7) { transition-delay: .36s; }
.mosaico__grade > :nth-child(2) { transition-delay: .12s; }
.mosaico__grade > :nth-child(3) { transition-delay: .24s; }

/* Faixa de título das páginas internas */
.faixa { padding: 44px 0 48px; background: linear-gradient(90deg, var(--topo-1), var(--topo-2)); color: #fff; }
.faixa h1 { color: #fff; margin-bottom: .2em; }
.faixa p { margin: 0; font-size: 1.15rem; font-weight: 600; }
.trilha { font-size: .95rem; margin-bottom: 14px; }
.trilha a { color: inherit; }
.produto .trilha { color: var(--texto); }

/* Seções */
.secao { padding: 64px 0; }
.secao--suave { background: var(--suave); }
.secao__titulo { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.secao__frase { margin-top: -.3em; }

/* Cores de cada linha (texto branco sobre elas passa de 4,5:1) */
.cor-morango { --cor-fruta: #b71c24; }
.cor-amora { --cor-fruta: #3b2f86; }
.cor-framboesa { --cor-fruta: #ad1457; }
.cor-mirtilo { --cor-fruta: #4a2390; }
.cor-abacaxi { --cor-fruta: #a8420a; }
.cor-abacaxi-hortela { --cor-fruta: #2e6b34; }
.cor-acerola { --cor-fruta: #b3202a; }
.cor-cereja { --cor-fruta: #7a1631; }
.cor-frutas-vermelhas { --cor-fruta: #b01c2e; }
.cor-goiaba { --cor-fruta: #b2353b; }
.cor-uva-bordo { --cor-fruta: #4b1f63; }
.cor-maracuja { --cor-fruta: #7d5a00; }
.cor-tropical { --cor-fruta: #a8460a; }
.cor-maca-verde { --cor-fruta: #3c6e1a; }
.cor-mamao { --cor-fruta: #b0470c; }

/* Produtos */
.produtos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.produto-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--raio); overflow: hidden; text-decoration: none; background: var(--cor-fruta, var(--marca)); color: #fff; box-shadow: var(--sombra); transition: transform .25s; }
.produto-card:hover { transform: translateY(-4px); }
.produto-card__foto { aspect-ratio: 1; overflow: hidden; padding: 26px 18% 0; background: radial-gradient(60% 55% at 50% 60%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 72%), var(--cor-fruta, var(--marca)); }
.produto-card__foto picture { height: 100%; }
.produto-card__foto img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .3)); transition: transform .5s; }
.produto-card:hover .produto-card__foto img { transform: translateY(-6px) scale(1.04); }
.produto-card__texto { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px 22px; }
.produto-card__texto strong { font-size: 1.6rem; line-height: 1.1; }
.produto-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 800; }
@media (max-width: 900px) { .produtos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .produtos { grid-template-columns: 1fr; } }

.produto { padding: 32px 0 72px; }
.produto__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* Estúdio da embalagem: fundo na cor da fruta escurecendo nas bordas, luz atrás, sombra no chão e a embalagem flutuando. */
.produto__foto { position: relative; aspect-ratio: 1 / 1.04; border-radius: 28px; overflow: hidden; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(48% 40% at 50% 44%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 70%), radial-gradient(130% 100% at 50% 20%, var(--cor-fruta, var(--marca)) 0%, color-mix(in srgb, var(--cor-fruta, var(--marca)) 52%, #0d0303) 100%);
  box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--cor-fruta, var(--marca)) 70%, #000), inset 0 1px 0 rgba(255, 255, 255, .18); }
.produto__foto::before { content: ""; position: absolute; inset: auto 0 0; height: 34%; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .22)); }
.produto__foto::after { content: ""; position: absolute; left: 50%; bottom: 9%; width: 44%; height: 5%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); filter: blur(3px); z-index: -1; animation: sombra-respira 5s ease-in-out infinite; }
.produto__emb { grid-area: 1 / 1; width: 54%; margin-bottom: 8%; animation: emb-flutua 5s ease-in-out infinite; }
.produto__emb[hidden] { display: none; }
.produto__emb.is-ativa picture { animation: emb-entra .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.produto__emb img { width: 100%; height: auto; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .35)); }
@keyframes emb-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes sombra-respira { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(.86); opacity: .7; } }
@keyframes emb-entra { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
/* Selo em forma de carimbo: branco, com a cor da fruta e um anel tracejado por dentro */
.produto__selo { position: absolute; top: 22px; right: 22px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%; text-align: center; line-height: 1; color: var(--cor-fruta); background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); transform: rotate(-10deg); }
.produto__selo::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed currentColor; opacity: .45; }
.produto__selo strong { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.produto__selo span { font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-top: 1px; }
.produto__selo small { max-width: 64%; line-height: 1.2; margin-top: 5px; padding-top: 4px; border-top: 1px solid currentColor; font-size: .5rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); }
.produto__rotulo { margin: 0 0 10px; font-weight: 800; color: var(--tinta); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.produto__embalagens { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.produto__embalagens button { width: 92px; padding: 10px 8px 8px; border: 2px solid transparent; border-radius: 16px; background: var(--suave); text-align: center; font: inherit; font-weight: 800; color: var(--tinta); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.produto__embalagens button:hover { transform: translateY(-3px); }
.produto__embalagens button[aria-pressed="true"] { border-color: var(--cor-fruta); background: #fff; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--cor-fruta) 60%, transparent); }
.produto__embalagens img { width: 100%; height: auto; }
.produto__embalagens span { display: block; margin-top: 4px; }
@media (max-width: 560px) {
    .produto__selo { width: 84px; height: 84px; top: 12px; right: 12px; }
    .produto__selo strong { font-size: 1.4rem; }
    .produto__selo span { font-size: .72rem; }
    .produto__selo small { font-size: .42rem; margin-top: 3px; padding-top: 3px; }
}
@media (prefers-reduced-motion: reduce) { .produto__emb, .produto__foto::after, .produto__emb.is-ativa picture { animation: none; } }
.produto__texto h1 { color: var(--cor-fruta); font-size: clamp(2.4rem, 5vw, 3.6rem); text-transform: uppercase; margin-bottom: .1em; }
.produto__nomes { font-size: 1.2rem; font-weight: 700; color: var(--tinta); }
.produto__itens { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; }
.produto__itens li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--tinta); }
.produto__itens .ico { color: #fff; background: var(--cor-fruta); border-radius: 50%; padding: 4px; width: 26px; height: 26px; }
.produto__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .produto__grade { grid-template-columns: 1fr; gap: 28px; } }

/* Chamada */
.chamada { padding: 56px 0; background: linear-gradient(90deg, var(--topo-1), var(--topo-2)); color: #fff; }
.chamada__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.chamada h2 { color: #fff; margin-bottom: .2em; }
.chamada p { margin: 0; font-size: 1.1rem; font-weight: 600; max-width: 560px; }
.chamada__botoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* Contato */
.contato { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.contato__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contato__lista li { display: flex; gap: 14px; align-items: flex-start; }
.contato__lista small { display: block; font-size: .9rem; color: var(--texto); }
.contato__lista a, .contato__lista strong { display: block; font-weight: 800; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.contato__lista a:hover { color: var(--marca); }
.contato__ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--suave); color: var(--marca); }
.contato__assuntos { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px; }
.contato__assuntos .botao { width: 100%; justify-content: center; }
.form { background: #fff; border-radius: var(--raio); padding: 32px; box-shadow: var(--sombra); border: 1px solid var(--borda); }
.form__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.campo { margin: 0 0 16px; }
.campo--largo { grid-column: 1 / -1; }
.campo label { display: block; font-weight: 700; color: var(--tinta); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid #d8c7bd; border-radius: 12px; font: 500 1rem var(--fonte); color: var(--tinta); background: #fff; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(194, 48, 26, .18); }
.form__aceite { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: .95rem; }
.form__aceite input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--marca); flex: none; }
.form__turnstile { min-height: 65px; margin-bottom: 16px; }
.form__status { margin: 14px 0 0; font-weight: 700; }
.form__status:empty { display: none; }
.form__status.is-ok { color: #2e7d32; }
.form__status.is-erro { color: var(--marca); }
.form__lgpd { font-size: .88rem; margin: 14px 0 0; }
@media (max-width: 860px) { .contato { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { padding: 22px 18px; } .form__grade { grid-template-columns: 1fr; } }

/* Avisos (obrigado, erro) e texto longo */
.aviso { padding: 96px 0; text-align: center; }
.aviso__in { max-width: 640px; }
.aviso__ico { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--suave); color: var(--marca); margin-bottom: 18px; }
.aviso__ico .ico { width: 40px; height: 40px; }
.aviso__botoes { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.texto-longo { max-width: 780px; }
.texto-longo h2 { font-size: 1.4rem; margin-top: 1.6em; }
.texto-longo__data { font-size: .9rem; margin-top: 2em; }

/* Rodapé */
.rodape { background: var(--escuro); color: #f3e6df; }
.rodape__grade { display: grid; grid-template-columns: 1.3fr .8fr 1.6fr 1.3fr; gap: 40px; padding: 60px 0 44px; }
.rodape__marca img { width: 200px; margin-bottom: 16px; }
.rodape__titulo { color: #fff; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Produtos em duas colunas, para o rodapé não ficar comprido */
.rodape__lista--duas { display: block; columns: 2; column-gap: 28px; }
.rodape__lista--duas li { break-inside: avoid; margin-bottom: 8px; }
.rodape a { color: #f3e6df; text-decoration: none; }
.rodape a:hover { color: var(--laranja); }
.rodape__contato a, .rodape__contato span { display: inline-flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.rodape__contato .ico { color: var(--laranja); }
.rodape__redes { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.rodape__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.rodape__redes a:hover { background: var(--marca); color: #fff; }
.rodape__base { border-top: 1px solid rgba(255, 255, 255, .12); }
.rodape__base-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0; font-size: .92rem; }
.rodape__base p { margin: 0; }
.rodape__privacidade { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rodape__grade { grid-template-columns: 1fr; gap: 28px; } }

/* WhatsApp flutuante (só com número cadastrado) */
.zap { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #1f8f4e; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.zap .ico { width: 30px; height: 30px; }