/* THE CODE: versão celular/tablet (até 900px).

   Carregado só nessas larguras (media no <link>), por cima do styles.css.

   Tudo que for ajuste de celular fica aqui, o desktop não é afetado. */



:root{ --gutter:20px; --header-h:68px; }

html{ overflow-x:clip; }

html.nav-open, html.nav-open body{ overflow:hidden; }

.container{ padding-inline:var(--gutter); }



/* Quebras de linha dedicadas do celular */

.mobile-br, br.mobile-br{ display:inline !important; }



/* ---------- header: altura fixa, sem sumir nem piscar ao rolar ---------- */

.site-header{

  padding-block:12px; background:#000; border-bottom:1px solid var(--line);

  backdrop-filter:none; -webkit-backdrop-filter:none;

}

.logo-img{ height:44px; }

.site-header .logo{ transition:transform .7s cubic-bezier(.65,0,.35,1); will-change:transform; }

.site-header.scrolled .logo{ transform:translateX(calc(50vw - var(--gutter) - 50%)); }

.hamburger{ display:grid; transition:opacity .4s ease, transform .4s ease, visibility .4s; }

.site-header.scrolled .hamburger{ opacity:0; visibility:hidden; transform:scale(.85); pointer-events:none; }



/* ---------- menu: tela cheia, opções alinhadas na direita da tela ---------- */

.nav{

  position:fixed; inset:0; width:100%; height:100dvh; z-index:70; background:#000;

  flex-direction:column; align-items:flex-end; justify-content:center; gap:24px; padding:80px 32px 40px;

  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility .35s;

  text-align:right;

}

.nav[data-open="true"]{ opacity:1; visibility:visible; pointer-events:auto; }

.nav .nav-link{ font-size:1.35rem; color:var(--ink); text-align:right; }

.nav-close{

  display:grid; place-items:center; position:absolute; top:12px; right:var(--gutter);

  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ink);

}

.nav-close svg{ width:20px; height:20px; }



/* ---------- whatsapp: sempre fixo no canto de baixo ---------- */

.wa-float{ position:fixed; right:16px; bottom:16px; left:auto; top:auto; width:56px; height:56px; }

html.nav-open .wa-float{ opacity:0; pointer-events:none; }



/* ---------- cookies: sem aviso no celular ---------- */

#cookie-bar{ display:none!important; }



/* ---------- hero ---------- */

.hero{

  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:calc(var(--mobile-hero-photo-height) - 88px);

  padding-bottom:36px;

  margin-bottom:32px;

  box-sizing:border-box;

}

.hero-content{ width:100%; position:relative; z-index:3; }

.hero-content .container{ gap:var(--sp-3); }

.hero h1{ font-size:clamp(2.05rem, 1.05rem + 4.8vw, 3.2rem); }

.hero .prose{ font-size:1.02rem; max-width:none; line-height:1.45; }

.hero-substrip-scroll{ margin-top:var(--sp-3); padding-bottom:0; }



/* A foto tem altura própria para evitar o recorte causado pelo texto do hero. */
.hero, .sales-hero{
  --mobile-hero-photo-height:clamp(300px, 112vw, 560px);
}
.hero-slides, .sales-hero-slides{
  bottom:auto;
  height:var(--mobile-hero-photo-height);
}
.hero-slide::after, .advisory-page .sales-hero-scrim{
  opacity:1;
  background:linear-gradient(to bottom, transparent 68%, rgba(0,0,0,.48) 86%, #000 100%);
}
.hero-title{ text-shadow:0 2px 14px rgba(0,0,0,.85); }

/* serviços em grade uniforme e sem rebarbas */

.hero-substrip{

  display:grid; grid-template-columns:1fr 1fr; gap:1px; width:100%;

  background:var(--line); border:1px solid var(--line); font-size:.66rem; letter-spacing:.07em;

  border-radius:var(--radius-s); overflow:hidden;

}

.hero-substrip-sep{ display:none; }

.hero-substrip-item{

  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center;

  padding:12px 8px; background:rgba(0,0,0,.78); color:var(--ink);

  min-height:68px; box-sizing:border-box;

}

.hero-substrip-item:last-child{ grid-column:1 / -1; }

.hero-substrip-item:hover{ transform:none; }

.hs-desc{

  position:static; transform:none; opacity:1; margin:0; white-space:normal;

  font-size:.8rem; letter-spacing:.01em; color:var(--ink-2);

}

.hero-substrip-item:hover .hs-desc{ transform:none; }



/* ---------- blocos com foto de fundo ---------- */

.section-bg{ min-height:0; margin-block:24px; justify-content:flex-start; }

.section-bg-img{ inset:auto; top:0; right:0; left:auto; bottom:auto; height:auto; max-width:none; object-fit:fill; }



/* Sobre: fade na base da foto. */
#essencia{ padding-top:calc(24px + 78vw); padding-bottom:48px; }
#essencia .section-bg-img{
  mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
}
#essencia .section-bg-scrim{ background:none; }

#essencia .essencia-single{ max-width:none; }

#essencia .essencia-single .essencia-justify{ font-size:1.14rem; line-height:1.4; text-shadow:0 1px 12px rgba(0,0,0,.6); }



/* ---------- faixa de marcas: nomes sempre visíveis no celular ---------- */

.sand-brand-name{

  opacity:1 !important;

  transform:none !important;

  color:var(--ink-2);

  font-size:0.74rem;

  margin-top:10px !important;

  height:auto;

  line-height:1.2;

  white-space:normal;

}

.sand-brand-item.is-featured .sand-brand-name{

  color:var(--accent-hi);

  font-weight:600;

}

.sand-brand-item{

  gap:8px;

  padding:6px 10px;

  min-width:105px;

}

.sand-brand-logo-wrap{

  height:96px;

  min-width:105px;

}

.sand-brand-item.is-featured .sand-brand-logo-wrap{

  height:100px;

  min-width:170px;

}

.sand-brand-item.is-featured .sand-brand-logo-wrap img{

  max-height:94px;

  max-width:210px;

}



/* ---------- espaçamento entre Trajetória e O Organismo ---------- */

#trajetoria{ padding-bottom:calc(clamp(40px, 7vw, 52px) + 32px); }

.sand-marquee-wrap{ margin-top:clamp(20px, 3.5vw, 36px); padding-block:14px 18px; }

#experiencia{ padding-top:clamp(24px, 4vw, 38px); padding-bottom:40px; }

#experiencia .section-head{ margin-bottom:22px; }

#experiencia h2{ font-size:1.55rem; line-height:1.25; }



/* ---------- destaque nos 4 cards de caminhos ao rolar no celular ---------- */

.caminhos-grid.caminhos-grid-4 .caminho-card.is-active{

  transform:translate3d(0, -5px, 0);

  border-color:rgba(200, 169, 107, 0.45);

  box-shadow:0 16px 36px -10px rgba(0, 0, 0, 0.85);

}

.caminhos-grid.caminhos-grid-4 .caminho-card.is-active .cc-bg{

  opacity:.78;

  transform:scale(1.05) translate3d(0, 0, 0);

  filter:brightness(.95) contrast(1.06) saturate(1.05);

}

.caminhos-grid.caminhos-grid-4 .caminho-card.is-active::before{

  opacity:1;

}

.caminhos-grid.caminhos-grid-4 .caminho-card.is-active .cc-num{

  color:var(--accent-hi);

}

.caminhos-grid.caminhos-grid-4 .caminho-card.is-active .cc-go{

  color:var(--accent-hi);

  font-weight:600;

}

.caminhos-grid.caminhos-grid-4 .caminho-card.is-active .cc-go svg{

  transform:translateX(6px);

}



/* ---------- quem está por trás: foto pequena ao lado do título ---------- */

.sobre-bg{ display:none; }

.sobre-top{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; margin-bottom:var(--sp-3); }

.sobre-top .sobre-role{ margin-bottom:0; }

.sobre-top .eyebrow{ font-size:.8rem; white-space:nowrap; }

.sobre-body .prose{ text-align:left; }

.sobre-thumb{

  display:block; width:min(33vw,170px); height:auto; filter:brightness(.9) contrast(1.05);

  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 62%, transparent 100%);

  -webkit-mask-composite:source-in;

  mask-image:linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 62%, transparent 100%);

  mask-composite:intersect;

}



/* ---------- advisory: níveis empilhados ---------- */

.niveis-grid{ grid-template-columns:1fr; grid-auto-rows:auto; gap:12px; }

.niveis-grid .caminho-card{ min-height:0; padding:24px 20px; }



/* ---------- rodapé ---------- */

.footer-grid{ grid-template-columns:1fr; gap:32px; }

.footer-bottom{ flex-direction:column; gap:8px; }



@media (max-width: 480px){

  .interest-group{ gap: 8px; }

  .interest-pill{ font-size: .78rem; padding: .7em .6em; }

  .golden-banner{ padding: 10px 12px; }

  .golden-banner-text{ font-size: 0.78rem; line-height: 1.35; }

  .golden-banner-btn{ font-size: 0.74rem; padding: 4px 10px; }

}



/* Utilitários desktop vs mobile */
.desktop-only{ display: none !important; }
.mobile-only{ display: block !important; }


/* ---------- THE CODE Advisory ---------- */
.advisory-page .golden-banner{ padding:14px 6px; }
.advisory-page .golden-banner-text{
  font-size:clamp(.69rem, 3.2vw, 1.05rem);
  letter-spacing:0;
  line-height:1.42;
  white-space:nowrap;
}
.advisory-page .banner-highlight{ font-size:1em; }

.advisory-page .sales-hero{
  min-height:0;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:calc(var(--mobile-hero-photo-height) - 112px);
  padding-bottom:36px;
}
.advisory-page .sales-hero > .container{ width:100%; }
.advisory-page .sales-hero-wrap{ padding-top:0; }
.advisory-page .sales-kicker{
  margin-bottom:14px;
  font-size:clamp(.68rem, 2.85vw, .88rem);
  letter-spacing:.08em;
  color:var(--accent-hi);
}
.advisory-page .sales-hero h1{
  font-size:clamp(1.88rem, 8.25vw, 3.75rem);
  line-height:1.12;
}
.advisory-page .sales-hero .hero-lead{
  max-width:62ch;
  margin:20px 0 0;
  font-size:clamp(.98rem, 3.8vw, 1.15rem);
  text-align:justify;
  hyphens:auto;
  line-height:1.55;
}

.advisory-page h2,
.advisory-page h3,
.advisory-page .eyebrow{ text-wrap:balance; }
.advisory-page .prose,
.advisory-page .centralized-white-text,
.advisory-page .pilar-desc,
.advisory-page .depoimento-quote{ text-wrap:pretty; }
.advisory-page .eyebrow{ display:block; }
.advisory-page :is(#pilares, #depoimentos, #ofertas) .section-head .eyebrow{
  margin-bottom:18px;
  line-height:1.45;
}
.advisory-page :is(#pilares, #depoimentos, #ofertas) .section-head .prose{
  margin-top:20px !important;
}
.advisory-page #depoimentos h2{
  font-size:clamp(1.3rem, 5.7vw, 2.6rem);
}

.advisory-page .pilar-imagem-picture .pilar-img{ object-position:28% center; }
.advisory-page :is(.pilar-card, .depoimento-card-link).is-in-view,
.advisory-page .depoimento-card-link:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 28px rgba(192,149,92,.35);
  background:linear-gradient(160deg, rgba(192,149,92,.18), var(--ground-2) 72%);
}

.advisory-page .ofertas-grid-2{
  grid-template-columns:minmax(0, 1fr);
  max-width:500px;
  gap:28px;
}
.advisory-page .oferta-card{
  min-width:0;
  padding:clamp(16px, 5vw, 24px);
  padding-top:24px;
}
.advisory-page .oferta-badge{
  top:0;
  transform:translate(-50%, -50%);
  width:max-content;
  max-width:calc(100% - 16px);
  padding:5px 12px;
  font-size:clamp(.64rem, 2.7vw, .75rem);
  letter-spacing:.04em;
  text-align:center;
  white-space:normal;
  z-index:1;
}
.advisory-page .btn{ white-space:normal; }
.advisory-page #ofertas .btn{ text-align:center; text-wrap:balance; }
.advisory-page .mulheres-bonus-card{
  max-width:500px;
  margin-inline:auto;
  padding:clamp(16px, 5vw, 24px);
}
.advisory-page .product-split{ grid-template-columns:minmax(0, 1fr); }
.advisory-page .escada-etapas{
  font-size:clamp(.8rem, 3.68vw, 1.65rem);
  white-space:nowrap;
}

.advisory-page .garantia-box{ padding:28px clamp(16px, 5vw, 32px); }
.advisory-page .garantia-top-row{ flex-direction:column; gap:14px; }
.advisory-page .garantia-shield-icon svg{ width:34px; height:34px; }

@media (prefers-reduced-motion: reduce){
  .advisory-page :is(.pilar-card, .depoimento-card-link){ transition:none; }
}