/* ============================================================
   PHYTONATUS — assets/css/style.css
   Redesign Brand Identity · Quicksand + Lato · Paleta Natural
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Lato:ital,wght@0,300;0,400;1,300&family=Figtree:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ──────────────────────────────────────── */
:root {
    /* Escuros — usados APENAS em texto */
    --c-dark:   #2C1B0A;  /* Marrom Chocolate 4625 C — texto principal, logos, linhas */
    --c-dark-2: #2C1B0A;
    --c-dark-3: #2C1B0A;

    /* Fundos escuros — Verde Escuro Pantone 350 C (único acento) */
    --c-bg-escuro:   #264E36;  /* CTAs, foco, nav ativa, fundos escuros */
    --c-bg-escuro-2: #1F4030;  /* hover/active, canvas do rodapé */
    --c-bg-escuro-3: #173025;  /* pressed state, scrims de modal */

    /* Shell — base que carrega o site todo */
    --c-cream:   #FBFAF6;   /* Off-white quente — BG principal e texto-creme sobre escuro */
    --c-cream-2: #E8EED6;   /* Sage washed — faixas alternadas, lavagem verde sutil */

    /* Bordas */
    --c-border-d: rgba(255,255,255,0.09);  /* linhas 1px sobre superfícies verdes */
    --c-border-l: rgba(26,18,8,0.12);      /* linhas 1px sobre superfícies claras */

    /* Acento principal — Verde Escuro Pantone 350 C */
    --c-accent:       #264E36;
    --c-accent-light: #D2E3B4;  /* Verde Claro Pantone 7485 C */

    /* Verdes — protagonistas (4 níveis crescentes de presença) */
    --c-sage-soft:  #DCE3D0;  /* cards sobre cream, divisões intermediárias */
    --c-sage-mid:   #7A9870;  /* accents pontuais, borders de destaque, badges */
    --c-sage-light: #D2E3B4;  /* Verde 7485 C — blocos de ênfase, dots, highlights */

    /* Bege — agora APENAS em detalhes finos */
    --c-detail-beige:        rgba(220,201,160,0.55);  /* hairlines, separadores */
    --c-detail-beige-strong: rgba(220,201,160,0.85);  /* destaques pontuais sobre branco */
    --c-beige-soft:          #DDD7C7;  /* Bege 7527 — uso pontual preservado */
    --c-beige-warm:          #DCC9A0;  /* Bege 468 — uso pontual preservado */

    /* Paleta de elementos gerais (briefing oficial) */
    --c-verde-escuro-350:  #264E36;  /* Pantone 350 C  */
    --c-verde-claro-7485:  #D2E3B4;  /* Pantone 7485 C */
    --c-bege-7527:         #DDD7C7;  /* Pantone 7527 C */
    --c-bege-468:          #DCC9A0;  /* Pantone 468 C  */
    --c-marrom-cafe-462:   #5B4B3A;  /* Pantone 462 C  */
    --c-marrom-choco-4625: #2C1B0A;  /* Pantone 4625 C */

    /* ── Cores por marca (briefing 24/04 — paleta exata) ── */

    /* PHYTONATUS APICULTOR (produto) */
    --c-phyto-apicultor:        #2C1B0A;  /* Marrom 4625 C  */
    --c-phyto-apicultor-amarelo:#F1B500;  /* Amarelo 7406 C */
    --c-phyto-apicultor-bordo:  #3F1B1B;  /* Pantone 4975 C */
    --c-phyto-apicultor-preto:  #241F20;  /* Pantone 412 C  */

    /* PHYTONATUS MARCA MÃE */
    --c-phyto-mae-claro:  #A1B07A;  /* Verde claro 5835 C  */
    --c-phyto-mae-escuro: #009A44;  /* Verde escuro 347 C  */

    /* EMPÓRIO DO MEL */
    --c-mel-marrom:    #2C1B0A;  /* Marrom 4625 C  */
    --c-mel-amarelo-1: #F4ED7C;  /* Pantone 602 C  */
    --c-mel-amarelo-2: #F8DD7B;  /* Pantone 120 C  */

    /* EMPÓRIO NUTS */
    --c-nuts-vermelho: #DC241F;  /* Vermelho 485 C */
    --c-nuts-bege-1:   #DDD7C7;  /* Pantone 7527 C */
    --c-nuts-bege-2:   #D9CDA5;  /* Pantone 7502 C */
    --c-nuts-marrom:   #2C1B0A;  /* Pantone 4625 C */
    --c-nuts-preto:    #241F20;  /* Pantone 412 C  */

    /* VIDA GOURMET */
    --c-gourmet-vermelho: #C8102E;  /* Vermelho 186 C */
    --c-gourmet-bege-1:   #F0E6C5;  /* Pantone 7499 C */
    --c-gourmet-bege-2:   #DCC9A0;  /* Pantone 468 C  */

    /* Aliases curtos (compatibilidade) */
    --c-phyto:   #009A44;
    --c-phyto-2: #A1B07A;
    --c-mel:     #2C1B0A;
    --c-mel-2:   #F1B500;
    --c-nuts:    #DC241F;
    --c-gourmet: #C8102E;

    /* Textos */
    --c-text-d:  rgba(210,227,180,0.95);   /* Verde claro 7485 C com alta opacidade */
    --c-muted-d: rgba(210,227,180,0.65);   /* Verde claro 7485 C — substitui cinza */
    --c-muted-l: rgba(38,78,54,0.62);      /* Verde escuro 350 C — substitui cinza claro */

    /* Tipografia */
    --f-title: 'Quicksand', sans-serif;
    --f-body:  'Lato', sans-serif;
    --f-support: 'Figtree', sans-serif;

    --c-amber:      #C8881E;
    --c-amber-soft: #E3B25A;
    --c-cream-soft: #F0E6C5;

    --r-pill: 100px;
    --r-lg:   21px;

    /* Layout */
    --nav-h:    88px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: var(--f-body);
    font-weight: 300;
    background: var(--c-cream);
    color: var(--c-dark);
    line-height: 1.6;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; cursor: pointer; }
button { cursor: pointer; font-family: var(--f-body); }
::selection { background: var(--c-accent); color: #fff; }

/* ── Cursor: enxame de abelhas (estilo Empório do Mel) ───── */
/* As abelhas ORBITAM o ponteiro (nunca ficam embaixo dele).
   Silhueta marrom monocromática com o laço em "8" das asas,
   igual à marca Empório do Mel. O halo creme garante leitura
   tanto sobre fundos claros (creme) quanto escuros (verde 350 C). */
.bee-swarm {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}
.bee {
    position: fixed;
    left: 0;
    top: 0;
    width: 30px;
    height: 24px;
    pointer-events: none;
    /* FORMATO EXATO do vetor do cliente (laço em "8" + corpo + 2 bolinhas),
       no MARROM do Empório do Mel (#4A3728), sem listras, + dois OLHOS
       BRANCOS pequenos (#FBFAF6) nas bolinhas. A faixa diagonal vazada
       do esboço dá o "stripe" do logo. */
    background-image: url("../images/cursor-bee.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* halo claro reforçado: o marrom precisa de contorno p/ não sumir no verde escuro */
    filter: drop-shadow(0 0 1px rgba(251,250,246,.95)) drop-shadow(0 0 2px rgba(251,250,246,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.3));
    will-change: transform;
}

/* Legado: a antiga abelha-cursor e o ponto ficam ocultos
   (o JS também os esconde, isto é só uma garantia). */
.cursor, .cursor-dot { display: none !important; }

@media (hover: none), (max-width: 760px) {
    .bee-swarm, .cursor, .cursor-dot { display: none !important; }
    a, button { cursor: auto; }
}

/* ── Grain overlay (desligado para performance) ──────────── */
.grain { position: relative; }

/* Overlay escuro + blur do fundo nas heros das subpaginas —
   deixa as headlines legiveis. Nao afeta a home (hero sem .grain). */
.hero.grain::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.55) 100%);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    z-index: 1;
    pointer-events: none;
}

/* ── Reveal / fade animations ───────────────────────────── */
/* .reveal / .reveal-inner: cada fragmento do headline em sua propria linha.
   Texto puro, sempre visivel — sem animacao, sem dependencia de JS/GSAP. */
.reveal { display: block; }
.reveal-inner { display: block; }
.fade-in { opacity: 0; transform: translateY(32px); }
.clip-reveal { clip-path: inset(0 100% 0 0); }

/* Selo Eu Reciclo: logo largo (473x181) — aumentado para boa leitura
   no card de certificacao (quadrado 130px). */
.cert-card-img img.cert-logo-eureciclo {
    width: 190px;
    height: auto;
    max-width: none;
    object-fit: contain;
}

/* ── Page overlay ───────────────────────────────────────── */
#page-overlay {
    position: fixed; inset: 0;
    background: var(--c-bg-escuro); z-index: 8000;
    transform-origin: bottom; transform: scaleY(0);
    pointer-events: none;
}

/* ── Preloader fullscreen autoral (botanical reveal) ──── */
#preloader {
    position: fixed; inset: 0;
    background: radial-gradient(ellipse at 50% 38%, #FFFFFF 0%, var(--c-cream) 45%, var(--c-cream-2) 100%);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .8s, visibility .8s;
    overflow: hidden;
}
#preloader.done { opacity: 0; visibility: hidden; }

/* Folhas botânicas decorativas (2 cantos diagonais) */
#preloader::before,
#preloader::after {
    content: '';
    position: absolute;
    width: 75vmin; height: 75vmin;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none'><path d='M110,15 C155,55 185,100 178,145 C172,185 135,205 110,210 C85,205 48,185 42,145 C35,100 65,55 110,15 Z' fill='%23264E36' fill-opacity='0.14'/><path d='M110,28 L110,205' stroke='%23264E36' stroke-opacity='0.32' stroke-width='2'/><path d='M110,68 Q145,80 168,112' stroke='%23264E36' stroke-opacity='0.26' stroke-width='1.4' fill='none'/><path d='M110,108 Q145,122 165,158' stroke='%23264E36' stroke-opacity='0.26' stroke-width='1.4' fill='none'/><path d='M110,68 Q75,80 52,112' stroke='%23264E36' stroke-opacity='0.26' stroke-width='1.4' fill='none'/><path d='M110,108 Q75,122 55,158' stroke='%23264E36' stroke-opacity='0.26' stroke-width='1.4' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    animation: preloader-breathe 5s ease-in-out infinite;
}
#preloader::before { top: -22vmin; left: -22vmin;  transform: rotate(-32deg); }
#preloader::after  { bottom: -22vmin; right: -22vmin; transform: rotate(148deg); animation-delay: -2.5s; }

@keyframes preloader-breathe {
    0%,100% { opacity: .8;  filter: blur(0px); }
    50%     { opacity: 1;   filter: blur(.5px); }
}

/* Anel ornamental atrás do logo */
.preloader-stage {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    gap: 1.75rem;
    animation: preloader-stage-in 1s ease-out both;
}
.preloader-stage::before { display: none; }
@keyframes preloader-ring {
    0%   { transform: translate(-50%,-50%) scale(.96); opacity: .4; }
    50%  { transform: translate(-50%,-50%) scale(1.04); opacity: .8; }
    100% { transform: translate(-50%,-50%) scale(.96); opacity: .4; }
}

.preloader-logo-img {
    width: clamp(280px, 36vw, 520px);
    height: auto; display: block;
    position: relative; z-index: 1;
    animation: preloader-logo-in 1.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes preloader-logo-in {
    from { opacity: 0; transform: scale(.88) translateY(8px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes preloader-stage-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Legado — esconder elementos antigos */
.preloader-logo, .preloader-floral { display: none !important; }
@media (max-width: 600px) {
    .preloader-stage::before { width: 92vw; }
}

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
#header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--nav-h); z-index: 1000;
    display: flex; align-items: center;
    transition: background .4s, border-color .4s;
    background: rgba(245,241,225,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-border-l);
}
#header.scrolled {
    background: rgba(38,78,54,0.96);
    border-color: var(--c-border-d);
}
#header.light {
    background: rgba(245,241,225,0.97);
    border-color: var(--c-border-l);
}

/* Tagline absoluta no canto superior-esquerdo do hero (Phytonatus) */
.hero-tagline-top {
    position: absolute;
    top: calc(var(--nav-h) + clamp(1.25rem, 2.5vw, 2.25rem));
    left: clamp(1.5rem, 4vw, 3.5rem);
    z-index: 5;
    margin: 0;
    max-width: 480px;
    color: var(--c-cream);
    font-family: var(--f-title);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    letter-spacing: 0.04em;
    line-height: 1.45;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
@media (max-width: 760px) {
    .hero-tagline-top { max-width: 280px; font-size: 0.92rem; top: calc(var(--nav-h) + 1rem); left: 1.25rem; }
}

/* Botão Catálogo no header — download direto */
.nav-cta-catalog {
    font-family: var(--f-title);
    font-size: 0.68rem; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600;
    padding: 9px 22px;
    border: 1.5px solid var(--c-accent);
    border-radius: 100px;
    color: var(--c-accent);
    background: transparent;
    transition: all .25s;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.nav-cta-catalog:hover { background: var(--c-accent); color: #fff; }
.nav-cta-catalog .arrow-dl { font-size: 0.95rem; line-height: 1; transform: translateY(1px); }
/* Botao catalogo e um botao-pilula — nao deve ter o sublinhado dos links de nav */
.nav-links a.nav-cta-catalog::after { display: none; }
.header-inner {
    width: min(1280px,94%); margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between;
}
.logo {
    font-family: var(--f-title);
    font-size: 1.25rem; font-weight: 700;
    letter-spacing: 0.14em; color: var(--c-dark);
    transition: color .3s; text-transform: uppercase;
}
#header.light .logo { color: var(--c-dark); }
#header.scrolled .logo { color: var(--c-cream); }
.logo.logo-img { display: inline-flex; align-items: center; padding: 0; }
.logo.logo-img img {
    height: 58px;
    width: auto;
    display: block;
}

.nav-links { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.25rem); list-style: none; flex-wrap: nowrap; }
.nav-links a {
    font-family: var(--f-title);
    font-size: 0.74rem; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600;
    color: var(--c-dark); transition: color .2s;
    position: relative;
    white-space: nowrap;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: -3px; left: 0;
    width: 0; height: 2px; background: var(--c-accent);
    transition: width .3s var(--ease-out);
}
.nav-links a:hover { color: var(--c-accent); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--c-accent); }
.nav-links a.active::after { width: 100%; }
#header.light .nav-links a { color: var(--c-dark); }
#header.light .nav-links a:hover { color: var(--c-accent); }
#header.scrolled .nav-links a { color: rgba(245,241,225,0.75); }
#header.scrolled .nav-links a:hover { color: var(--c-cream); }

.nav-cta {
    font-family: var(--f-title);
    font-size: 0.68rem; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600;
    padding: 9px 22px;
    border: 1.5px solid rgba(0,154,68,0.7);
    border-radius: 100px; color: var(--c-accent);
    transition: all .25s;
}
.nav-cta:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--c-dark); transition: all .3s; }
#header.light .hamburger span { background: var(--c-bg-escuro); }
#header.scrolled .hamburger span { background: var(--c-cream); }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav */
.mobile-menu {
    display: none; position: fixed; inset: 0;
    background: var(--c-bg-escuro); z-index: 900;
    flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
    font-family: var(--f-title);
    font-size: clamp(2rem,6vw,3.5rem); font-weight: 500;
    color: var(--c-cream); letter-spacing: 0.05em; transition: color .2s;
}
.mobile-menu a:hover { color: var(--c-accent); }
.mobile-menu .m-cta {
    position: absolute;
    bottom: clamp(24px, 5vw, 40px);
    right: clamp(24px, 5vw, 40px);
    margin-top: 0;
    padding: 14px 26px;
    background: var(--c-accent);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    transition: transform .2s, background .2s;
}
.mobile-menu .m-cta:hover {
    background: #007d37;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
footer {
    background: var(--c-bg-escuro);
    color: var(--c-muted-d);
    padding: clamp(48px,6vw,80px) 0 clamp(32px,4vw,48px);
}
.footer-top {
    width: min(1280px,94%); margin-inline: auto;
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 2rem;
    padding-bottom: clamp(32px,4vw,48px);
    border-bottom: 1px solid var(--c-border-d);
    margin-bottom: clamp(24px,3vw,36px);
}
.footer-logo-block .footer-logo {
    font-family: var(--f-title); font-size: 1.2rem;
    font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: rgba(245,241,225,.9); margin-bottom: .3rem;
}
.footer-logo-block span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted-d); }
.footer-nav-col { display: flex; flex-direction: column; gap: .6rem; }
.footer-nav-col h4 { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--c-muted-d); margin-bottom: .5rem; font-family: var(--f-title); font-weight: 600; }
.footer-nav-col a { font-size: .82rem; color: rgba(245,241,225,.6); transition: color .2s; }
.footer-nav-col a:hover { color: var(--c-cream); }
.footer-nav-col a.footer-sac { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid rgba(245,241,225,.12); font-family: var(--f-title); font-weight: 600; letter-spacing: .04em; color: var(--c-accent); }
.footer-nav-col a.footer-sac:hover { color: var(--c-cream); }
.footer-loja-block { text-align: right; }
.footer-loja-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--c-accent); border: 1.5px solid rgba(0,154,68,.45);
    padding: 10px 22px; border-radius: 100px; transition: all .25s;
    font-family: var(--f-title); font-weight: 600;
}
.footer-loja-link:hover { background: var(--c-accent); color: #fff; }
.footer-bottom {
    width: min(1280px,94%); margin-inline: auto;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.footer-copy { font-size: .72rem; color: var(--c-muted-d); }
.lojas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 940px;
    margin-top: -1rem;   /* sobe levemente o bloco inteiro de logos */
}
.loja-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    padding: 1rem;
    min-height: 130px;
    background: transparent;
    border: none;
    transition: transform .2s;
}
.loja-card:hover { transform: translateY(-3px); }
/* Box de altura fixa centraliza cada logo, garantindo que o "Comprar"
   fique a mesma distancia do logo nos 3 cards (padronizacao). */
.loja-card-logo-box {
    width: 100%;
    height: 210px;   /* +40% (era 150px) */
    display: flex;
    align-items: flex-end;   /* logos alinhados pela base -> "Comprar" colado embaixo de cada um e alinhado entre os 3 */
    justify-content: center;
}
.loja-card-logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 210px;   /* +40% (era 150px) */
    object-fit: contain;
    object-position: bottom;
    mix-blend-mode: multiply;
    filter: saturate(0.95) contrast(1.05);
    transition: transform .25s var(--ease-out);
}
/* Alturas +40% por peso optico (define o tamanho visual de cada logo). */
.loja-card-logo--phyto  { max-height: 118px; }  /* 84 * 1.4 */
.loja-card-logo--amazon { max-height: 157px; }  /* 112 * 1.4 */
.loja-card-logo--ml     { max-height: 165px; }  /* reduzido p/ alinhar com amazon (~157) */
/* Compensacao da borda branca residual de cada PNG: amazon e ml tem ~17% de
   espaco vazio embaixo, fazendo o logo VISIVEL flutuar acima da base da imagem
   (e o "Comprar" desalinhar). Empurra cada logo pra baixo pela altura dessa
   borda (17% do max-height), alinhando a base visivel dos tres. Phytonatus
   nao tem borda -> 0. Valores escalados +40% junto com o tamanho. */
.loja-card-logo--amazon { transform: translateY(27px); }
.loja-card-logo--ml     { transform: translateY(28px); }
.loja-card-logo--phyto  { transform: translateY(0); }
/* preserva o lift do hover somando a compensacao */
.loja-card:hover .loja-card-logo--amazon { transform: translateY(24px); }
.loja-card:hover .loja-card-logo--ml     { transform: translateY(25px); }
.loja-card:hover .loja-card-logo--phyto  { transform: translateY(-3px); }
/* Card sempre transparente — multiply do logo bleacha o fundo branco do PNG */
.loja-card {
    padding: 0.75rem 0.85rem;
    background: transparent !important;
    border-radius: 12px;
    transition: transform .25s var(--ease-out);
}
.loja-card:hover .loja-card-logo { transform: translateY(-3px); }
.loja-card-name {
    font-family: var(--f-title);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-dark);
}
.loja-card-cta {
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-accent);
}
@media(max-width:560px) { .lojas-grid { grid-template-columns: 1fr; } }

.footer-socials { display: flex; gap: 1rem; align-items: center; }
.footer-socials a { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted-d); transition: color .2s; }
.footer-socials a:hover { color: var(--c-cream); }
.footer-policy-link {
    font-family: var(--f-title);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-muted-d);
    padding: 8px 18px;
    border: 1px solid rgba(245,241,225,.22);
    border-radius: 100px;
    transition: color .2s, border-color .2s, background .2s;
    white-space: nowrap;
}
.footer-policy-link:hover {
    color: var(--c-cream);
    border-color: var(--c-cream);
    background: rgba(245,241,225,.08);
}
.footer-socials a.social-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(245,241,225,.18); border-radius: 50%; padding: 0; }
.footer-socials a.social-icon svg { display: block; }
.footer-socials a.social-icon[aria-label="Instagram"] { color: #E1306C; border-color: rgba(225,48,108,.55); }
.footer-socials a.social-icon[aria-label="LinkedIn"]  { color: #0A66C2; border-color: rgba(10,102,194,.55); }
.footer-socials a.social-icon[aria-label="YouTube"]   { color: #FF0000; border-color: rgba(255,0,0,.55); }
.footer-socials a.social-icon[aria-label="Instagram"]:hover { color: #fff; background: #E1306C; border-color: #E1306C; }
.footer-socials a.social-icon[aria-label="LinkedIn"]:hover  { color: #fff; background: #0A66C2; border-color: #0A66C2; }
.footer-socials a.social-icon[aria-label="YouTube"]:hover   { color: #fff; background: #FF0000; border-color: #FF0000; }

/* ── Footer claro (variante) ── */
footer.footer--light { background: var(--c-cream-2); color: var(--c-muted-l); }
footer.footer--light .footer-top { border-bottom-color: var(--c-border-l); }
footer.footer--light .footer-logo-img { display: block; height: clamp(56px, 6vw, 80px); width: auto; object-fit: contain; }
footer.footer--light .footer-logo-block span { color: var(--c-muted-l); }
footer.footer--light .footer-nav-col a { color: var(--c-dark); opacity: .78; }
footer.footer--light .footer-nav-col a:hover { color: var(--c-accent); opacity: 1; }
footer.footer--light .footer-nav-col a.footer-sac { color: var(--c-accent); border-top-color: rgba(0,0,0,.1); }
footer.footer--light .footer-copy { color: var(--c-muted-l); }
footer.footer--light .footer-policy-link { color: var(--c-muted-l); border-color: rgba(0,0,0,.15); }
footer.footer--light .footer-policy-link:hover { color: var(--c-dark); border-color: var(--c-dark); background: rgba(0,0,0,.04); }
footer.footer--light .footer-socials-list { display: flex; flex-direction: row; gap: 1rem; align-items: center; }
footer.footer--light .footer-socials-list a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    transition: transform .2s, filter .2s;
    border-radius: 8px;
    overflow: hidden;
}
footer.footer--light .footer-socials-list a:hover { transform: translateY(-3px); filter: brightness(1.1); }
footer.footer--light .footer-socials-list svg { width: 36px; height: 36px; flex-shrink: 0; display: block; }

/* ── Botão flutuante de Loja Online (presente em todas páginas) ── */
.floating-shop-btn {
    position: fixed;
    right: clamp(14px, 2vw, 24px);
    bottom: clamp(14px, 2vw, 24px);
    z-index: 950;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: 12px 20px;
    background: var(--c-accent);
    color: #fff;
    font-family: var(--f-title);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.1);
    transition: transform .25s var(--ease-out), box-shadow .25s, background .25s;
    white-space: nowrap;
}
.floating-shop-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.12); background: #007d37; }
.floating-shop-btn svg { width: 16px; height: 16px; }
@media(max-width:560px) {
    .floating-shop-btn { padding: 10px 16px; font-size: .7rem; }
    .floating-shop-btn .floating-shop-btn-label { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   SHARED SECTION STYLES
═══════════════════════════════════════════════════════════ */
.s-pad    { padding-block: clamp(60px,7.5vw,110px); }
.s-pad-sm { padding-block: clamp(44px,5.5vw,76px); }

/* Topo ondulado para seções — onda em altura fixa (não se estica conforme altura da seção) */
.wavy-top-section {
    --wave-h: clamp(110px, 12vw, 180px);
    -webkit-mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,100 C220,-60 480,260 720,100 C960,-60 1220,260 1440,100 L1440,200 L0,200 Z' fill='white'/></svg>"),
        linear-gradient(#fff, #fff);
            mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,100 C220,-60 480,260 720,100 C960,-60 1220,260 1440,100 L1440,200 L0,200 Z' fill='white'/></svg>"),
        linear-gradient(#fff, #fff);
    -webkit-mask-size: 100% var(--wave-h), 100% calc(100% - var(--wave-h) + 1px);
            mask-size: 100% var(--wave-h), 100% calc(100% - var(--wave-h) + 1px);
    -webkit-mask-position: top center, bottom center;
            mask-position: top center, bottom center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    /* Overlap total: a onda fica inteiramente dentro da secao anterior,
       eliminando a "terceira cor" do body bleeding por baixo */
    margin-top: calc(-1 * var(--wave-h));
    padding-top: calc(var(--wave-h) + clamp(0.35rem, 0.7vw, 0.85rem));
    position: relative; z-index: 1;
}
/* Anti-clipping direto (exceto footer, que é o último). A próxima
   .wavy-top-section invade -wave-h pra cima; padding-bottom suficiente
   garante que a curva 2-oscilações (que sobe ~73% da wave-h em alguns x)
   não cubra o conteúdo. */
.wavy-top-section:not(footer):not(footer .wavy-top-section) {
    padding-bottom: calc(var(--wave-h) + clamp(4rem, 6vw, 7rem)) !important;
}
/* Variante compacta — usa wave-h pequeno + respiro pequeno */
.wavy-top-section.wavy-compact:not(footer) {
    padding-bottom: calc(clamp(48px, 5.5vw, 78px) + clamp(1.75rem, 2.6vw, 2.75rem)) !important;
}

/* Wave dividers — quebram a quadratura entre seções */
.wave-divider {
    display: block;
    width: 100%;
    height: clamp(110px, 12vw, 180px);
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 3;
}
.wave-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}
.wave-divider.wave-up { margin-top: calc(-1 * clamp(110px, 12vw, 180px)); position: relative; z-index: 2; }

/* Variante COMPACTA — onda menor visualmente para faixas estreitas
   (ex: "Phytonatus desde 1999"). A curva mantém as 2 oscilações,
   mas com altura reduzida para encostar mais perto do texto. */
.wave-divider.wave-compact {
    height: clamp(48px, 5.5vw, 78px);
}
.wave-divider.wave-compact.wave-up {
    margin-top: calc(-1 * clamp(48px, 5.5vw, 78px));
}
.wavy-top-section.wavy-compact {
    --wave-h: clamp(48px, 5.5vw, 78px);
}

/* ─────────────────────────────────────────────────────────────
   ANTI-CLIPPING: toda seção que precede uma onda divisora precisa
   absorver os ~110–180px que a próxima seção sobe (margin-top:-wave-h)
   E também o "pico mais baixo" da curva 2-oscilações (que desce
   ~73% da wave-h dentro da seção anterior em x=540 e x=1260).

   Respiro de 64–112px garante que NENHUM elemento (cards, logos,
   imagens, botões, formulários) fique coberto pela curva.

   Detecta tanto .wavy-top-section quanto .brand-block-full (marcas.html
   cria a onda via ::before sem a classe wavy-top-section).

   .pre-wave-tight: variante onde o conteúdo DEVE ficar colado
   na curva (faixas decorativas tipo "Phytonatus desde 1999").
───────────────────────────────────────────────────────────── */
:is(section, div, article, footer, main):has(+ :is(.wavy-top-section, .brand-block-full)):not(.pre-wave-tight):not(.hero):not(.brand-block-full) {
    padding-bottom: calc(clamp(110px, 12vw, 180px) + clamp(4rem, 6vw, 7rem)) !important;
}
/* Quando a próxima seção é COMPACTA, ajusta padding pra menor */
:is(section, div, article, footer, main):has(+ .wavy-top-section.wavy-compact):not(.pre-wave-tight):not(.hero):not(.brand-block-full) {
    padding-bottom: calc(clamp(48px, 5.5vw, 78px) + clamp(1.75rem, 2.6vw, 2.75rem)) !important;
}
.pre-wave-tight:has(+ :is(.wavy-top-section, .brand-block-full)) {
    padding-bottom: calc(clamp(110px, 12vw, 180px) + clamp(0.25rem, 0.45vw, 0.5rem)) !important;
}
.pre-wave-tight:has(+ .wavy-top-section.wavy-compact) {
    padding-bottom: calc(clamp(48px, 5.5vw, 78px) + clamp(0.2rem, 0.35vw, 0.4rem)) !important;
}

.container { width: min(1280px,94%); margin-inline: auto; }

.section-eyebrow {
    display: flex; align-items: center; gap: 1rem;
    font-size: .65rem; letter-spacing: .28em;
    text-transform: uppercase; font-weight: 600;
    font-family: var(--f-title);
    color: var(--c-accent);
    margin-bottom: clamp(1rem,2vw,1.5rem);
}
.section-eyebrow::before { content: none; }

.section-title-xl {
    font-family: var(--f-title);
    font-size: clamp(3rem,7vw,7.5rem);
    font-weight: 300; line-height: .95; letter-spacing: -.01em;
}
.section-title-lg {
    font-family: var(--f-title);
    font-size: clamp(2.2rem,4.5vw,5rem);
    font-weight: 300; line-height: 1.05; letter-spacing: -.01em;
}
.section-title-md {
    font-family: var(--f-title);
    font-size: clamp(1.8rem,3.5vw,3.5rem);
    font-weight: 400; line-height: 1.1;
}
.body-lead {
    font-size: clamp(1.1rem,1.7vw,1.3rem);
    font-weight: 600; line-height: 1.75; color: rgba(38,78,54,0.95);
}
.body-lead.light { color: var(--c-text-d); }

/* ── Botões ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 30px; font-size: .72rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    border-radius: 100px; transition: all .25s var(--ease-out);
    border: 1.5px solid currentColor; font-family: var(--f-title);
}
.btn-light   { color: var(--c-cream); border-color: rgba(245,241,225,.45); }
.btn-light:hover { background: rgba(245,241,225,.12); border-color: var(--c-cream); }
.btn-accent  { color: var(--c-accent); border-color: rgba(0,154,68,.55); }
.btn-accent:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.btn-dark    { color: var(--c-dark); border-color: rgba(26,18,8,.35); }
.btn-dark:hover { background: var(--c-bg-escuro); color: var(--c-cream); }
.btn-solid-accent { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.btn-solid-accent:hover { opacity: .85; }
.btn-arrow { font-size: 1.1rem; transition: transform .2s; }
.btn:hover .btn-arrow { transform: translateX(4px); }

.divider-line      { width: 100%; height: 1px; background: var(--c-border-l); }
.divider-line.dark { background: var(--c-border-d); }
.index-number      { font-family: var(--f-body); font-size: .6rem; letter-spacing: .25em; color: var(--c-muted-d); font-weight: 300; }
.index-number.light { color: var(--c-muted-l); }

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
    position: relative; min-height: 100vh;
    background: var(--c-bg-escuro);
    display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;
}
.hero.hero-top-aligned { justify-content: flex-start; padding-top: clamp(8rem, 14vh, 12rem); padding-bottom: clamp(3rem, 6vw, 6rem); align-items: flex-start; }

/* ── Hero com video de fundo (performance-aware) ── */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}
.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.34) 55%, rgba(0,0,0,0.55) 100%);
    z-index: 1;
    pointer-events: none;
}
.hero-with-video .hero-content { position: relative; z-index: 2; }

/* Parallax fix-attachment falla em iOS — fallback para mobile */
@media (max-width: 900px) {
    .pl-teaser-light { background-attachment: scroll !important; }
}
.hero.grain::after { z-index: 2; }
.hero-content {
    position: relative; z-index: 3;
    width: 100%; max-width: 1320px; margin-inline: 0;
    padding-inline: clamp(1.5rem, 5vw, 5rem);
    padding-bottom: clamp(60px,8vh,100px);
    padding-top: calc(var(--nav-h) + 60px);
    text-align: left;
}
.hero-eyebrow {
    display: flex; align-items: center; gap: 1rem;
    font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
    color: var(--c-text-d); margin-bottom: clamp(1.5rem,3vw,2.5rem);
    font-family: var(--f-title); font-weight: 600;
    text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.hero-eyebrow::before { content: none; }
.hero-title {
    font-family: var(--f-title);
    font-size: clamp(2.8rem, 8vw, 5.5rem);
    font-weight: 600; line-height: .95; letter-spacing: -.02em;
    color: var(--c-cream); margin-bottom: clamp(2rem,4vw,3rem);
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
    overflow-wrap: break-word;
}
.hero-content p { text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.hero-title.hero-title-home {
    letter-spacing: -.02em;
    line-height: 1;
}
/* Headline da home — composicao em escala: lead fino + statement em destaque */
.hl-lead {
    display: block;
    font-size: clamp(1.05rem, 1.8vw, 1.65rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: rgba(245,241,225,1);
    margin-bottom: clamp(1.6rem, 4.5vh, 3.25rem);
}
.hl-statement { display: block; }
.hl-statement .reveal:first-child {
    font-size: clamp(2.4rem, 5.2vw, 4.6rem);
    font-weight: 600;
}
.hl-statement .reveal:last-child {
    font-size: clamp(2.8rem, 6.2vw, 5.6rem);
    font-weight: 300;
    line-height: 1.04;
}
.hero-title em { font-style: normal; color: var(--c-accent); font-weight: 600; }
.hero-footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1.5rem;
    padding-top: clamp(32px,4vw,48px);
    border-top: 1px solid var(--c-border-d);
    margin-top: clamp(2rem,4vw,4rem);
}
.hero-stats { display: flex; gap: clamp(2rem,4vw,4rem); flex-wrap: wrap; }
.hero-stat-item { display: flex; flex-direction: column; gap: 2px; }
.hero-stat-num {
    font-family: var(--f-title); font-size: 1.6rem;
    font-weight: 600; color: var(--c-cream); line-height: 1;
}
.hero-stat-label { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted-d); }
.scroll-hint {
    font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--c-muted-d); display: flex; align-items: center; gap: 10px;
    font-family: var(--f-title); font-weight: 500;
}
.scroll-hint::before {
    content: ''; display: block; width: 1px; height: 36px;
    background: var(--c-muted-d); animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: .3; transform: scaleY(.5); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); }
}

/* ═══════════════════════════════════════════════════════════
   BRAND CARDS TEASER
═══════════════════════════════════════════════════════════ */
.brands-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; }
.brand-card { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--c-bg-escuro-2); }
/* Default: foto suavemente "respirando" pra fora; no hover ela cresce mais. */
.brand-card > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .9s var(--ease-out); will-change: transform; }
.brand-card:hover > img { transform: scale(1.22); }
/* Default: overlay CLARO (creme) + backdrop-filter blur. Funciona com todas
   as marcas (incluindo logos escuros), criando frosted glass uniforme.
   Hover: blur some + overlay quase transparente, revela foto limpa e ampliada. */
.brand-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(252,248,232,.7) 0%, rgba(252,248,232,.55) 45%, rgba(252,248,232,.42) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(.85);
            backdrop-filter: blur(12px) saturate(.85);
    transition: background .5s var(--ease-out),
                -webkit-backdrop-filter .5s var(--ease-out),
                backdrop-filter .5s var(--ease-out);
}
.brand-card:hover .brand-card-overlay {
    background: linear-gradient(to top, rgba(252,248,232,.18) 0%, rgba(252,248,232,.08) 50%, transparent 100%);
    -webkit-backdrop-filter: blur(0) saturate(1);
            backdrop-filter: blur(0) saturate(1);
}
.brand-card-logo-wrap {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(.85rem, 1.4vw, 1.25rem);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    pointer-events: none;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.brand-card-logo {
    max-width: 62%;
    max-height: 48%;
    width: auto; height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.2));
}
.brand-card-tagline {
    margin: 0;
    font-family: var(--f-title);
    font-size: clamp(.95rem, 1.25vw, 1.15rem);
    font-weight: 500;
    color: var(--c-dark);
    text-align: center;
    line-height: 1.4;
    max-width: 88%;
    letter-spacing: .01em;
    text-shadow: 0 1px 6px rgba(255,255,255,.5);
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
/* Hover: logo + tagline somem, deixando a imagem aumentada visível. */
.brand-card:hover .brand-card-logo-wrap {
    opacity: 0;
    transform: translateY(-8px) scale(1.02);
}
.brand-card:hover .brand-card-tagline {
    opacity: 0;
    transform: translateY(-6px);
}
.brand-card-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(1rem,2vw,1.5rem);
}
.brand-card-badge {
    font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
    font-family: var(--f-title); color: var(--c-accent);
    margin-bottom: .4rem; transform: translateY(8px); opacity: 0;
    transition: all .4s var(--ease-out);
}
.brand-card:hover .brand-card-badge { transform: translateY(0); opacity: 1; }
.brand-card-name {
    font-family: var(--f-title); font-size: clamp(1.85rem,3.1vw,2.55rem);
    font-weight: 600; color: var(--c-cream); line-height: 1.05; margin-bottom: .7rem;
}
.brand-card-desc {
    font-size: clamp(1.1rem,1.4vw,1.3rem); color: var(--c-cream); opacity: .92; line-height: 1.5;
    max-height: 0; overflow: hidden; transition: max-height .5s var(--ease-out);
}
.brand-card:hover .brand-card-desc { max-height: 180px; }
.brand-card-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
    font-family: var(--f-title); color: var(--c-accent);
    margin-top: .5rem; opacity: 0; transform: translateY(6px);
    transition: all .4s .1s var(--ease-out);
}
.brand-card:hover .brand-card-link { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════
   STATS (mantido mas não usado na index)
═══════════════════════════════════════════════════════════ */
.stats-section { background: var(--c-bg-escuro-2); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-block { padding: clamp(2.5rem,5vw,5rem) clamp(1.5rem,3vw,3rem); border-right: 1px solid var(--c-border-d); display: flex; flex-direction: column; gap: .5rem; }
.stat-block:last-child { border-right: none; }
.stat-number { font-family: var(--f-title); font-size: clamp(3rem,6vw,6rem); font-weight: 300; color: var(--c-cream); line-height: 1; }
.stat-number span { color: var(--c-accent); }
.stat-label { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted-d); font-family: var(--f-title); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   FILOSOFIA (mantido para compatibilidade)
═══════════════════════════════════════════════════════════ */
.filosofia-section { background: var(--c-cream); }
.filosofia-inner { display: grid; grid-template-columns: 200px 1fr; gap: clamp(2rem,5vw,6rem); align-items: start; }
.filosofia-num { font-family: var(--f-title); font-size: 6rem; font-weight: 300; color: rgba(26,18,8,.07); line-height: 1; margin-bottom: 1rem; }
.filosofia-quote { font-family: var(--f-title); font-size: clamp(1.6rem,3vw,2.8rem); font-weight: 300; line-height: 1.4; color: var(--c-dark); max-width: 760px; margin-bottom: 2rem; }
.filosofia-quote::before { content: '\201C'; color: var(--c-accent); }
.filosofia-quote::after  { content: '\201D'; color: var(--c-accent); }

/* ═══════════════════════════════════════════════════════════
   PRIVATE LABEL TEASER
═══════════════════════════════════════════════════════════ */
.pl-teaser { background: var(--c-bg-escuro-3); position: relative; overflow: hidden; }
.pl-teaser-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.pl-teaser-title { font-family: var(--f-title); font-size: clamp(2.2rem,5vw,5rem); font-weight: 300; color: var(--c-cream); line-height: 1.05; max-width: 620px; }
.pl-teaser-title em { font-style: normal; color: var(--c-accent); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   CLIENTES TICKER
═══════════════════════════════════════════════════════════ */
.clients-ticker-section {
    background: var(--c-cream-2); overflow: hidden;
}
.clients-ticker-header {
    width: min(1280px,94%); margin-inline: auto;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
    padding-block: clamp(1.5rem,3vw,2rem);
    border-bottom: 1px solid var(--c-border-l);
}
.clients-ticker-label {
    font-size: clamp(1rem,1.4vw,1.35rem); letter-spacing: .22em; text-transform: uppercase;
    color: var(--c-dark); font-family: var(--f-title); font-weight: 600;
}
.ticker-track-wrapper {
    display: flex; overflow: hidden;
    padding-block: clamp(1.5rem,3vw,2.5rem);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.ticker-track {
    display: flex; gap: clamp(3rem,5vw,6rem); align-items: center;
    animation: tickerScroll 28s linear infinite;
    will-change: transform; flex-shrink: 0; white-space: nowrap;
}
.ticker-track:nth-child(2) { animation-delay: -14s; }
@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-item {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: clamp(200px, 18vw, 280px);
    height: clamp(140px, 14vw, 200px);
    padding: clamp(12px, 1.4vw, 22px);
    background: transparent;
    border: none;
}
.ticker-item-name {
    font-family: var(--f-title); font-size: clamp(1.4rem,2.5vw,2rem);
    font-weight: 500; color: var(--c-dark); letter-spacing: .02em; transition: color .2s;
}
.ticker-item-sep { color: var(--c-accent); font-size: 1.2rem; opacity: .5; flex-shrink: 0; }
.ticker-item img, .ticker-item-lg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.ticker-item-lg img { height: 100%; }
.ticker-track-wrapper:hover .ticker-track { animation-play-state: paused; }

/* ═══════════════════════════════════════════════════════════
   FOOTER MINI FORM
═══════════════════════════════════════════════════════════ */
.footer-contact-section {
    background: var(--c-bg-escuro-2);
    padding-top: calc(clamp(110px, 12vw, 180px) + clamp(3rem, 5vw, 5rem));
    padding-bottom: clamp(64px,7vw,100px);
    padding-inline: 0;
}
/* Garante contraste em eyebrows e labels dentro do footer escuro */
.footer-contact-section .section-eyebrow,
.footer-contact-section .float-label {
    color: var(--c-accent-light) !important;
}
.footer-contact-inner {
    width: min(1280px,94%); margin-inline: auto;
    display: grid; grid-template-columns: 1fr 1.2fr;
    gap: clamp(3rem,6vw,8rem); align-items: start;
}
.footer-contact-info h3 {
    font-family: var(--f-title); font-size: clamp(1.8rem,3.5vw,3.2rem);
    font-weight: 300; color: var(--c-cream); line-height: 1.1; margin-bottom: 1rem;
}
.footer-contact-info h3 em { font-style: normal; color: var(--c-accent); font-weight: 600; }
.footer-contact-info p { font-size: clamp(1.05rem,1.3vw,1.2rem); font-weight: 400; color: rgba(245,241,225,0.95); line-height: 1.8; max-width: 460px; }
.footer-mini-form { display: flex; flex-direction: column; gap: 1rem; }
.footer-mini-form .float-group { position: relative; margin-bottom: 0; }
.footer-mini-form .float-input { background: rgba(245,241,225,.06); border-color: var(--c-border-d); color: var(--c-cream); }
.footer-mini-form .float-input:focus { border-color: var(--c-accent); }
.footer-mini-form .float-label { color: var(--c-muted-d); }
.footer-mini-form .float-input:focus ~ .float-label,
.footer-mini-form .float-input:not(:placeholder-shown) ~ .float-label { color: var(--c-accent); }
.footer-mini-form textarea.float-input { min-height: 100px; }
.footer-mini-form select.float-input { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F5F1E1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.footer-mini-form select.float-input option { background: var(--c-bg-escuro-2); color: var(--c-cream); }
.footer-mini-form .btn-submit-full { background: var(--c-accent); color: #fff; border: 1.5px solid var(--c-accent); border-radius: 100px; }
.footer-mini-form .btn-submit-full:hover { background: transparent; color: var(--c-accent); }
@media(max-width:760px) { .footer-contact-inner { grid-template-columns: 1fr; } }

/* Brand block contain mode */
.brand-block-img.contain-mode img { object-fit: contain; padding: clamp(2rem,4vw,4rem); }

/* ═══════════════════════════════════════════════════════════
   MARCAS PAGE
═══════════════════════════════════════════════════════════ */
.brand-block-full { display: grid; grid-template-columns: 1fr 1fr; min-height: 90vh; }
.brand-block-full.reverse { direction: rtl; }
.brand-block-full.reverse > * { direction: ltr; }
.brand-block-img { position: relative; overflow: hidden; background: var(--c-bg-escuro-2); }
.brand-block-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform 10s linear; }
.brand-block-full:hover .brand-block-img img { transform: scale(1.04); }
.brand-block-info { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem,6vw,8rem) clamp(2.5rem,5vw,7rem); }
.brand-block-info.dark  { background: var(--c-bg-escuro-2); }
.brand-block-info.light { background: var(--c-cream); }
.brand-badge {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
    font-weight: 600; font-family: var(--f-title); margin-bottom: 1.5rem;
}
.brand-badge::before { content: ''; width: 24px; height: 2px; background: currentColor; }
.brand-block-title { font-family: var(--f-title); font-size: clamp(2.5rem,5vw,5rem); font-weight: 600; line-height: .95; margin-bottom: 1.5rem; }
.brand-block-text { font-size: clamp(1.05rem, 1.25vw, 1.18rem); font-weight: 600; line-height: 1.75; margin-bottom: 1.75rem; max-width: 540px; opacity: 1; }
.brand-block-products { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.product-chip {
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 14px; border: 1.5px solid currentColor;
    border-radius: 100px; opacity: .65; font-family: var(--f-title); font-weight: 600;
}
.brand-block-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════
   PRIVATE LABEL PAGE
═══════════════════════════════════════════════════════════ */
.pl-pilares { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--c-border-d); }
.pl-pilar { background: var(--c-bg-escuro-2); padding: clamp(2.5rem,4vw,4rem); transition: background .3s; }
.pl-pilar:hover { background: var(--c-bg-escuro-3); }
.pl-pilar-icon { width: 52px; height: 52px; color: var(--c-accent-light); margin-bottom: 1.5rem; }
.pl-pilar-icon svg { width: 100%; height: 100%; stroke-width: 1.6; }
.pl-pilar-num { font-family: var(--f-title); font-size: 3.5rem; font-weight: 400; color: var(--c-accent-light); opacity: 0.85; line-height: 1; margin-bottom: 1rem; letter-spacing: 0.04em; }
.pl-pilar-title { font-family: var(--f-title); font-size: clamp(1.3rem,2.5vw,1.9rem); font-weight: 600; color: var(--c-cream); margin-bottom: .75rem; }
.pl-pilar-text { font-size: .88rem; font-weight: 600; color: var(--c-cream); line-height: 1.8; opacity: 0.95; }
.process-steps { counter-reset: step; }
.process-step { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; padding: clamp(1.5rem,3vw,2.5rem) 0; border-bottom: 1px solid var(--c-border-l); align-items: start; counter-increment: step; }
.process-step-num { font-family: var(--f-title); font-size: 2.5rem; font-weight: 300; color: rgba(26,18,8,.15); line-height: 1; }
.process-step-title { font-family: var(--f-title); font-size: clamp(1.2rem,2vw,1.6rem); font-weight: 600; margin-bottom: .5rem; }
.process-step-text { font-size: .88rem; color: var(--c-muted-l); line-height: 1.8; }
.certs-strip { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: center; padding: clamp(2rem,4vw,3rem) 0; }
.cert-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 130px; padding: 1.25rem 0.75rem; border: 1.5px solid var(--c-border-l); border-radius: 12px; justify-content: center; transition: border-color .2s; }
.cert-badge img { width: 60px; height: 60px; object-fit: contain; }
.cert-badge:hover { border-color: var(--c-accent); }
.cert-badge svg { color: var(--c-accent); opacity: .7; }
.cert-badge span { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted-d); font-family: var(--f-title); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   CONTATO PAGE
═══════════════════════════════════════════════════════════ */
.contato-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(3rem,6vw,8rem); align-items: start; }
.contato-aside h2 { font-family: var(--f-title); font-size: clamp(1.8rem,3.5vw,3rem); font-weight: 300; line-height: 1.2; margin-bottom: 1.5rem; }
.contato-info { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.contato-info-item { display: flex; gap: 1rem; align-items: flex-start; font-size: .88rem; color: var(--c-muted-l); line-height: 1.6; }
.contato-info-item svg { color: var(--c-accent); flex-shrink: 0; margin-top: 2px; }
.form-card { background: var(--c-cream); border: 1px solid var(--c-border-l); border-radius: 12px; padding: clamp(2rem,4vw,3.5rem); }
.dest-tabs { display: flex; gap: 3px; margin-bottom: 2rem; background: var(--c-cream-2); padding: 4px; border-radius: 100px; }
.dest-tab {
    flex: 1; padding: 10px; text-align: center;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 600; color: var(--c-muted-l);
    background: none; border: none; border-radius: 100px;
    transition: all .2s; font-family: var(--f-title);
}
.dest-tab.active { background: var(--c-bg-escuro); color: var(--c-cream); }
.float-group { position: relative; margin-bottom: 1.5rem; }
.float-input {
    width: 100%; padding: 20px 14px 8px;
    border: 1.5px solid var(--c-border-l); border-radius: 8px;
    background: var(--c-cream-2); font-size: .95rem;
    font-weight: 300; font-family: var(--f-body); color: var(--c-dark);
    transition: border-color .2s; appearance: none;
}
.float-input:focus { outline: none; border-color: var(--c-accent); }
.float-label { position: absolute; top: 14px; left: 14px; font-size: .8rem; color: var(--c-muted-l); transition: all .2s; pointer-events: none; font-weight: 300; }
.float-input:focus ~ .float-label,
.float-input:not(:placeholder-shown) ~ .float-label { top: 6px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); }
textarea.float-input { min-height: 130px; resize: vertical; }
.attach-zone { border: 1.5px dashed var(--c-border-l); border-radius: 8px; padding: 1.25rem; text-align: center; transition: border-color .2s; margin-bottom: 1.5rem; background: var(--c-cream-2); }
.attach-zone:hover { border-color: var(--c-accent); }
.attach-zone label { font-size: .78rem; color: var(--c-muted-l); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.attach-zone svg { color: var(--c-accent); }
.attach-zone input { display: none; }
.btn-submit-full {
    width: 100%; padding: 16px;
    background: var(--c-accent); color: #fff;
    border: 1.5px solid var(--c-accent); border-radius: 100px;
    font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 600; font-family: var(--f-title); transition: all .25s;
}
.btn-submit-full:hover { background: transparent; color: var(--c-accent); }
.form-note { font-size: .72rem; color: var(--c-muted-l); margin-top: 1rem; text-align: center; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO
═══════════════════════════════════════════════════════════ */
@media(max-width:960px) {
    .nav-links, .nav-cta { display: none; }
    .hamburger { display: flex; }
    .brands-grid { grid-template-columns: repeat(2,1fr); }
    .brand-card { aspect-ratio: 3/4; }
    /* Mobile não tem hover — sempre mostrar foto + logo. Overlay vira gradiente
       parcial que cobre só os ~45% inferiores; foto fica visivel acima e o
       logo + tagline ficam ancorados no rodape do card. */
    .brand-card > img { transform: none; }
    .brand-card-overlay,
    .brand-card:hover .brand-card-overlay {
        background: linear-gradient(to top,
            rgba(252,248,232,.95) 0%,
            rgba(252,248,232,.88) 30%,
            rgba(252,248,232,.55) 50%,
            rgba(252,248,232,.18) 65%,
            transparent 80%) !important;
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
    }
    .brand-card-logo-wrap,
    .brand-card:hover .brand-card-logo-wrap {
        justify-content: flex-end !important;
        padding-bottom: clamp(1.25rem, 4vw, 2rem) !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .brand-card-tagline,
    .brand-card:hover .brand-card-tagline {
        opacity: 1 !important;
        transform: none !important;
    }
    .brand-card-logo { max-height: 38%; }
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .stat-block:nth-child(2) { border-right: none; }
    .stat-block:nth-child(1), .stat-block:nth-child(2) { border-bottom: 1px solid var(--c-border-d); }
    .filosofia-inner { grid-template-columns: 1fr; }
    .filosofia-num { display: none; }
    .pl-pilares { grid-template-columns: 1fr; }
    .brand-block-full { grid-template-columns: 1fr; min-height: unset; }
    .brand-block-full.reverse { direction: ltr; }
    .brand-block-img { aspect-ratio: 16/9; }
    .contato-layout { grid-template-columns: 1fr; }
    .contato-aside { display: none; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-loja-block { text-align: left; }
}
@media(max-width:600px) {
    .brands-grid { grid-template-columns: 1fr; }
    .brand-card { aspect-ratio: 3/2; }
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .hero-stats { gap: 1.5rem; }
    .brand-block-actions { flex-direction: column; }
}

/* ============================================================
   HERO AV — espelha referência phytonatus-ref01.vercel.app
   ============================================================ */
.hero.av-hero { justify-content: center; min-height: 100dvh; }
.av-hero__inner {
    position: relative; z-index: 10;
    width: min(1280px, 92%); margin-inline: auto;
    padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vh, 3.5rem));
    /* padding-bottom reserva a zona da onda do próximo bloco (~wave-h + buffer),
       garantindo que CTA do hero (botão) fique sempre acima da curva. */
    padding-bottom: clamp(170px, 20vh, 240px);
    color: var(--c-cream);
}
.av-hero__title {
    font-family: var(--f-title); font-weight: 600;
    font-size: clamp(2.9rem, 8.4vw, 6.6rem); line-height: .9;
    letter-spacing: -.035em; color: var(--c-cream);
    text-shadow: 0 2px 26px rgba(0,0,0,.5);
    margin-bottom: clamp(1.4rem, 3vw, 2.1rem);
}
.av-hero__title .av-line { display: block; }
.av-hero__title em { font-style: normal; color: var(--c-amber-soft); }
/* O nome da marca usa o verde da empresa (nunca o ambar de destaque). */
.av-hero__title em.brand-name { color: var(--c-accent-light); }
.av-hero__lead {
    font-family: var(--f-body);
    font-size: clamp(1.18rem, 1.75vw, 1.45rem); line-height: 1.55;
    font-weight: 600;
    max-width: 36rem; color: rgba(245,241,225,1);
    text-shadow: 0 1px 12px rgba(0,0,0,.6);
    margin-bottom: clamp(1.6rem, 3vw, 2.3rem);
}
.av-scroll-cue {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: clamp(1.1rem, 3vh, 2.1rem);
    z-index: 10;
    display: flex; flex-direction: column; align-items: center; gap: .65rem;
    font-family: var(--f-support);
    font-size: .58rem; font-weight: 700; letter-spacing: .24em;
    text-transform: uppercase; color: rgba(245,241,225,.72);
    pointer-events: none;
}
.av-scroll-cue__line {
    width: 1px; height: 44px;
    background: rgba(245,241,225,.28);
    position: relative; overflow: hidden;
}
.av-scroll-cue__line::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: 45%;
    background: linear-gradient(rgba(227,178,90,0), var(--c-amber-soft));
    animation: av-scroll-run 2.4s var(--ease-out) infinite;
}
@keyframes av-scroll-run {
    0%   { transform: translateY(-110%); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: translateY(260%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .av-scroll-cue__line::after { animation: none; opacity: .6; }
}
@media (max-width: 760px) { .av-scroll-cue { display: none; } }

/* ── AV Botões ──────────────────────────────────────────── */
.av-btn {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--f-support);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .95rem 1.6rem; border-radius: var(--r-pill);
    border: 1.5px solid transparent;
    transition: background .25s var(--ease-out), color .25s,
                border-color .25s, transform .25s;
}
.av-btn:hover { transform: translateY(-2px); }
.av-btn__arrow { transition: transform .25s var(--ease-out); }
.av-btn:hover .av-btn__arrow { transform: translateX(3px); }
.av-btn--amber   { background: var(--c-amber); color: #fff; }
.av-btn--amber:hover { background: #a96f12; }