@charset "UTF-8";
/* =========================================================================
   Aldre Hortifruti — camada de movimento
   Cursor, revelação de texto e imagem, ticker, colagem, curvas, magnetismo.
   Tudo aqui é decorativo: se o motion.js não rodar, o site continua 100%
   usável — nada aqui é exigido para ler texto ou completar uma ação.
   ========================================================================= */

/* ------------------------------------------------------------- cursor -- */
html.cursor-ativo,
html.cursor-ativo * { cursor: none !important; }
html.cursor-ativo input,
html.cursor-ativo textarea,
html.cursor-ativo select,
html.cursor-ativo [contenteditable] { cursor: text !important; }

.cursor-ponto, .cursor-anel {
  position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none;
  opacity: 0; will-change: transform;
}
.cursor-ponto {
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--laranja);
  transition: opacity .2s ease;
}
.cursor-anel {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 1.5px solid rgb(242 73 10 / .5);
  transition: width .25s cubic-bezier(.22,1,.36,1), height .25s cubic-bezier(.22,1,.36,1),
              margin .25s cubic-bezier(.22,1,.36,1), border-color .25s ease,
              background-color .25s ease, opacity .2s ease;
}
html.cursor-visivel .cursor-ponto,
html.cursor-visivel .cursor-anel { opacity: 1; }
.cursor-anel.grande {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: rgb(242 73 10 / .12); border-color: var(--laranja);
}
.cursor-anel.escondido, .cursor-ponto.escondido { opacity: 0 !important; }

@media (pointer: coarse), (max-width: 900px) {
  .cursor-ponto, .cursor-anel { display: none !important; }
}

/* ---------------------------------------------------------- intro/loader */
.intro {
  position: fixed; inset: 0; z-index: 998;
  background: var(--laranja); color: #fff;
  display: grid; place-items: center;
  transition: transform .75s cubic-bezier(.76,0,.24,1), opacity .5s ease .15s;
}
.intro__miolo { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.intro__marca {
  width: clamp(60px, 8.5vw, 100px); height: auto;
  animation: intro-entra .7s cubic-bezier(.19,1,.22,1) both;
}
@keyframes intro-entra {
  from { transform: scale(.75) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.intro__barra {
  width: 130px; height: 2px; border-radius: 2px;
  background: rgb(255 255 255 / .28); overflow: hidden;
}
.intro__barra span {
  display: block; height: 100%; width: 0%; background: #fff; border-radius: inherit;
  animation: intro-carrega 1.15s cubic-bezier(.65,0,.35,1) .15s forwards;
}
@keyframes intro-carrega { to { width: 100%; } }
.intro.saiu { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* --------------------------------------------------- revelação de texto */
[data-texto-anima] .tx-linha {
  display: inline-block; overflow: hidden; vertical-align: top;
}
[data-texto-anima] .tx-palavra { display: inline-block; transform: none; }
[data-texto-anima].preparado .tx-palavra {
  transform: translateY(112%);
  transition: transform .85s cubic-bezier(.19,1,.22,1);
}
[data-texto-anima].anima .tx-palavra { transform: translateY(0); }

/* ------------------------------------------------------- entrada do hero */
[data-entra] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .85s cubic-bezier(.19,1,.22,1), transform .85s cubic-bezier(.19,1,.22,1);
}
[data-entra].anima { opacity: 1; transform: none; }

/* ----------------------------------------------------- grades escalonadas */
[data-revela-grade] > * {
  opacity: 0; transform: translateY(26px) scale(.97);
  transition: opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-revela-grade].anima > * { opacity: 1; transform: none; }

/* --------------------------------------------------- barra de progresso */
.progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 250;
  pointer-events: none; background: transparent;
}
.progresso span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--laranja-escuro), var(--laranja), var(--laranja-claro));
}

/* --------------------------------------------------------------- aurora */
.aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.aurora__mancha {
  position: absolute; border-radius: 50%; filter: blur(64px); opacity: .32;
  animation: deriva 24s ease-in-out infinite alternate;
}
.aurora__mancha--laranja {
  width: 40vw; height: 40vw; max-width: 540px; max-height: 540px;
  background: radial-gradient(circle, var(--laranja) 0%, transparent 72%);
  top: -12%; right: -10%;
}
.aurora__mancha--verde {
  width: 30vw; height: 30vw; max-width: 420px; max-height: 420px;
  background: radial-gradient(circle, var(--verde-claro) 0%, transparent 72%);
  bottom: -14%; left: -8%; animation-delay: -9s;
}
.aurora--escura .aurora__mancha { opacity: .16; }
.aurora--escura .aurora__mancha--verde {
  background: radial-gradient(circle, #ffb56b 0%, transparent 72%);
}
@keyframes deriva {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-4%, 5%) scale(1.1); }
}

/* --------------------------------------------------------------- grão -- */
.secao--escura, .rodape { position: relative; }
.secao--escura::after, .rodape::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.secao > .container { position: relative; z-index: 1; }
.rodape > .container { position: relative; z-index: 1; }

/* ---------------------------------------------------- brilho nos botões */
.btn--primario, .btn--zap, .btn--escuro { position: relative; overflow: hidden; }
.btn--primario::before, .btn--zap::before, .btn--escuro::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgb(255 255 255 / .38), transparent);
  transform: skewX(-20deg);
  transition: left .65s cubic-bezier(.22,1,.36,1);
}
.btn--primario:hover::before, .btn--zap:hover::before, .btn--escuro:hover::before { left: 130%; }

.btn--primario:hover {
  box-shadow: 0 12px 30px rgb(242 73 10 / .4), 0 4px 10px rgb(242 73 10 / .28);
}
.btn--zap:hover { box-shadow: 0 12px 28px rgb(31 170 84 / .38); }

.cat-card:hover, .seg-card:hover, .bento__item:hover {
  box-shadow: 0 18px 38px rgb(242 73 10 / .14), 0 4px 12px rgb(20 17 15 / .06);
}

/* ------------------------------------------------- brilho no destaque --
   cor sólida sempre visível; o gradiente animado só entra se o navegador
   suportar clipar o fundo pelo texto — sem isso, texto transparente sumiria. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 em {
    background: linear-gradient(100deg, var(--laranja-claro) 0%, #ffc98a 35%, var(--laranja-claro) 60%, #ffdca8 80%, var(--laranja-claro) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: brilho-texto 7s ease-in-out infinite;
  }
}
@keyframes brilho-texto {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* --------------------------------------------------------- barra rolagem */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--creme-2); }
::-webkit-scrollbar-thumb {
  background: var(--laranja); border-radius: 8px; border: 2.5px solid var(--creme-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--laranja-escuro); }
html { scrollbar-color: var(--laranja) var(--creme-2); scrollbar-width: thin; }

/* ------------------------------------------------------- transição de página
   Fica sempre "montada" (fora da tela via transform, nunca display:none) para
   que a transição consiga interpolar — display:none não anima. */
.transicao-pagina {
  position: fixed; inset: 0; z-index: 997;
  background: var(--laranja); pointer-events: none;
  transform: translateY(101%);
}
html.vem-de-dentro .transicao-pagina { transform: translateY(0); }
html.vem-de-dentro.transicao-pronta .transicao-pagina {
  transition: transform .6s cubic-bezier(.76,0,.24,1);
  transform: translateY(-101%);
}
.transicao-pagina.cobrindo {
  transition: transform .45s cubic-bezier(.76,0,.24,1) !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}

/* ---------------------------------------------------------- reveal-img -- */
.reveal-img {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); box-shadow: var(--sombra-lg);
}
.reveal-img img {
  display: block; width: 100%; border-radius: 0 !important; box-shadow: none !important;
  transform: scale(1.14);
  transition: transform 1.3s cubic-bezier(.16,1,.3,1);
}
.reveal-img::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--laranja); transform-origin: right; transform: scaleX(0);
}
.reveal-img.pronto::before { transform: scaleX(1); }
.reveal-img.pronto img { transform: scale(1.14); }
.reveal-img.anima::before {
  transform: scaleX(0);
  transition: transform .95s cubic-bezier(.76,0,.24,1);
}
.reveal-img.anima img { transform: scale(1); }

/* ------------------------------------------------------------- afirmação */
.secao--afirmacao { padding-block: clamp(3rem, 7vw, 5.5rem); }
.afirmacao {
  max-width: 20ch; margin-inline: auto; text-align: center;
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: clamp(1.7rem, 1rem + 3.4vw, 3.15rem);
  line-height: 1.16; letter-spacing: -.02em; color: var(--carvao);
}
.afirmacao strong { color: var(--laranja); font-weight: 800; }

/* ------------------------------------------------------------ ticker --- */
.ticker {
  background: var(--carvao); color: #fff;
  transform: rotate(-1.6deg) scale(1.03);
  margin-block: clamp(-1.5rem, -3vw, -1rem);
  padding-block: 1.15rem; overflow: hidden;
  position: relative; z-index: 3;
  box-shadow: 0 10px 30px rgb(20 17 15 / .18);
}
.ticker__trilho { display: flex; width: max-content; animation: correr 30s linear infinite reverse; }
.ticker:hover .ticker__trilho { animation-play-state: paused; }
.ticker__grupo { display: flex; align-items: center; flex: none; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 1.1rem;
  padding-inline: 1.4rem;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem);
  letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap;
}
.ticker__item::after { content: "✦"; font-size: .55em; opacity: .5; }
.ticker__item--contorno {
  color: transparent; -webkit-text-stroke: 1.4px var(--laranja-claro);
}

/* ------------------------------------------------------------- colagem - */
.colagem {
  position: relative; max-width: var(--largura); margin: clamp(1rem,3vw,2.5rem) auto 0;
  padding-inline: 1.25rem;
  height: clamp(460px, 52vw, 640px);
}
.colagem__foto {
  position: absolute; margin: 0;
  width: var(--w, 28%); left: var(--l, 0); top: var(--t, 0);
  transform: rotate(var(--r, 0deg));
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.colagem__foto img {
  width: 100%; display: block; border-radius: 16px;
  box-shadow: var(--sombra-md);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.colagem__foto:hover { z-index: 5; transform: rotate(0deg) scale(1.03); }
.colagem__foto figcaption {
  position: absolute; left: .75rem; bottom: .75rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgb(20 17 15 / .55); backdrop-filter: blur(4px);
  padding: .3rem .6rem; border-radius: var(--r-full); opacity: 0;
  transition: opacity .3s ease;
}
.colagem__foto:hover figcaption { opacity: 1; }

@media (max-width: 760px) {
  .colagem {
    height: auto; display: flex; gap: 1rem; overflow-x: auto;
    padding-block: .5rem 1rem; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .colagem::-webkit-scrollbar { display: none; }
  .colagem__foto {
    position: static; width: 72% !important; flex: none;
    transform: none !important; scroll-snap-align: start;
  }
  .colagem__foto:hover { transform: none; }
}

/* -------------------------------------------------------------- curvas - */
.curva {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: clamp(38px, 6.5vw, 88px); line-height: 0; pointer-events: none; z-index: 1;
}
.curva svg { width: 100%; height: 100%; display: block; }
.curva--creme path { fill: var(--creme); }
.curva--carvao path { fill: var(--carvao); }

/* ---------------------------------------------------------- magnetismo - */
.magnetico { transition: transform .5s cubic-bezier(.22,1,.36,1); }

@media (max-width: 640px) {
  .aurora__mancha { filter: blur(44px); opacity: .22; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .cursor-ponto, .cursor-anel { display: none !important; }
  .colagem__foto { transition: none; }
  .aurora__mancha { animation: none; }
  .hero h1 em { animation: none; background-position: 0% 50%; }
  .transicao-pagina { display: none !important; }
}