/* === Global: impede scroll horizontal em qualquer viewport === */
html, body { overflow-x: hidden; }

/* === Gotham (fonte do KV da Linha UP) — self-hosted ===
   ATENCAO/RISCO DE LICENCA: arquivos fornecidos pelo cliente, de origem nao-oficial
   (freefontsfamily.com), SEM licenca comercial confirmada. Uso sinalizado ao cliente
   na tarefa do ClickUp. Substituir pelos arquivos da licenca oficial (Hoefler&Co)
   antes do uso comercial definitivo. */
@font-face{font-family:'Gotham';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/GothamLight.woff2') format('woff2')}
@font-face{font-family:'Gotham';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/GothamBook.woff2') format('woff2')}
@font-face{font-family:'Gotham';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/GothamMedium.woff2') format('woff2')}
@font-face{font-family:'Gotham';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/GothamBold.woff2') format('woff2')}
@font-face{font-family:'Gotham';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/Gotham-Black.woff2') format('woff2')}
/* =====================================================
   UP FACIAL — Ilikia
   Estrutura: 7 seções do briefing
   Paleta clara — teal Ilikia (#08B2AC) sobre off-white
   Sem animações de entrada
   ===================================================== */

:root {
  /* Cores da marca */
  --ilikia-deep:     #0F4F4D;   /* petróleo escuro */
  --ilikia-teal:     #08B2AC;   /* teal Ilikia oficial */
  --ilikia-teal-soft:#7FC4BE;   /* teal claro */
  --up-deep:         #8C2E4F;   /* vinho/magenta (UP Deep) */
  --up-contour:      #E26C3F;   /* laranja (UP Contour) */

  /* Neutros claros */
  --bg:              #08B2AC;
  --bg-soft:         #08B2AC;
  --bg-card:         #FFFFFF;
  --text:            #0F4F4D;
  --text-soft:       #555555;
  --text-mute:       #8A8A8A;
  --border:          #E4E2DC;

  /* Tipografia (inspirada nas LPs irmãs) */
  --font-display: 'Gotham', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font:         'Gotham', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Espaçamento / radius */
  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 24px;
  --shadow:    0 8px 32px rgba(15, 79, 77, 0.08);
  --shadow-strong: 0 12px 48px rgba(15, 79, 77, 0.16);
}

/* =========== RESET =========== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* =========== ANIMAÇÕES — REVEAL ON SCROLL =========== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }
.stagger.is-visible > *:nth-child(7) { transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Kill-switch global pra usuários que preferem menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
sup { font-size: 0.65em; vertical-align: super; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

/* =========== TIPOGRAFIA / ELEMENTOS BASE =========== */
h2.h-section {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ilikia-deep);
  margin-bottom: 24px;
}
h2.h-section em {
  font-style: italic;
  font-weight: 500;
  color: var(--ilikia-teal);
}
h2.h-section.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 880px;
}

.accent {
  color: var(--ilikia-teal);
  font-weight: 600;
}

.p-body {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 640px;
}
.p-body.center { margin: 0 auto; text-align: center; }
.p-body sup { color: var(--ilikia-teal); font-weight: 600; }

.section { padding: 96px 0; position: relative; }
@media (max-width: 768px) { .section { padding: 64px 0; } }

/* =========== BOTÕES =========== */
.btn-primary {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--ilikia-deep);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  text-align: center;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(15, 79, 77, 0.10);
  transition: background 0.35s ease,
              color 0.35s ease,
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}
.btn-primary:hover {
  background: var(--ilikia-teal);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(8, 178, 172, 0.25);
}

/* =====================================================
   NAV (fixo no topo, igual referências)
   ===================================================== */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ilikia-deep);
  border-bottom: 1px solid rgba(127, 196, 190, 0.16);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 32px;
  gap: 32px;
}
@media (max-width: 640px) { .nav-inner { padding: 14px 20px; gap: 16px; } }

.nav-logo {
  display: inline-flex;
  align-items: center;
  height: 36px;
  text-decoration: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-logo:hover { transform: scale(1.04); }
.nav-logo img {
  height: 100%;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  transition: opacity 0.35s ease;
}
.nav-logo:hover img { opacity: 1; }

/* Pareamento Ilikia + UP Facial no nav */
.nav-logo-ilikia {
  height: 60%;
  width: auto;
  display: block;
  opacity: 0.85;
}
.nav-logo-up {
  height: 24px;
  width: auto;
}
.nav-logo-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.3);
  margin: 0 10px;
  flex-shrink: 0;
}
@media (max-width: 880px) {
  .nav-logo-ilikia { display: none; }
  .nav-logo-sep { display: none; }
  .nav-logo-up { height: 30px; }
}

.nav-links {
  display: none;
  gap: 36px;
  align-items: center;
}
@media (min-width: 880px) { .nav-links { display: flex; } }

.nav-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
}
.nav-link:hover { color: #fff; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

.nav-cta {
  position: relative;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--ilikia-deep);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.35s ease,
              color 0.35s ease,
              border-color 0.35s ease,
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: cta-glow 2.4s ease-in-out infinite;
}
.nav-cta:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}

@keyframes cta-glow {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(8, 178, 172, 0.2),
      0 0 26px rgba(8, 178, 172, 0.1);
  }
  50% {
    box-shadow:
      0 0 28px rgba(8, 178, 172, 0.6),
      0 0 60px rgba(8, 178, 172, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta::before,
  .btn-submit::before { animation: none; }
}

/* Hambúrguer + drawer mobile (esconde em ≥880px) */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}
.nav-toggle-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 88px 28px 40px;
  background: var(--ilikia-deep);
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 49;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease;
  border-bottom: 1px solid rgba(127, 196, 190, 0.18);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
}
.nav-mobile[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-mobile-link {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(127, 196, 190, 0.10);
  transition: color 0.25s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-mobile-link:hover,
.nav-mobile-link:focus-visible {
  color: var(--ilikia-teal-soft);
  transform: translateX(4px);
  outline: none;
}
.nav-mobile-cta {
  margin-top: 20px;
  padding: 16px 28px;
  background: #fff;
  color: var(--ilikia-deep);
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}
.nav-mobile-cta:hover,
.nav-mobile-cta:focus-visible {
  background: var(--ilikia-teal);
  color: #fff;
  outline: none;
}

@media (max-width: 879px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .nav-mobile { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-line,
  .nav-mobile { transition: none !important; }
}

/* =====================================================
   SEÇÃO 1 — HERO (vídeo em tela cheia + texto sobreposto)
   ===================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 79, 77, 0.88) 0%, rgba(15, 79, 77, 0.65) 30%, rgba(15, 79, 77, 0.25) 55%, rgba(15, 79, 77, 0.0) 75%),
    linear-gradient(180deg, rgba(15, 79, 77, 0.25) 0%, rgba(15, 79, 77, 0.0) 25%, rgba(15, 79, 77, 0.0) 75%, rgba(15, 79, 77, 0.35) 100%);
}
@media (max-width: 880px) {
  .hero::after {
    background: linear-gradient(180deg, rgba(15,79,77,0.92) 0%, rgba(15,79,77,0.82) 45%, rgba(15,79,77,0.7) 100%);
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 80px 32px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 640px) {
  .hero { min-height: auto; height: auto; }
  .hero-bg-video { object-position: center center; }
  .hero::after {
    background: linear-gradient(180deg, rgba(0,30,30,0.5) 0%, rgba(0,30,30,0.78) 100%);
  }
  .hero-content { padding: 90px 20px 56px; text-align: center; }
  .headline {
    margin-left: auto; margin-right: auto;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45), 0 0 40px rgba(15,79,77,0.3);
  }
  .hero-products, .hero-sub, .hero-cta-row { text-align: center; }
  .hero-tag { display: none; }
}

.headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 28px;
  max-width: 720px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.45);
}
.headline em {
  font-style: italic;
  font-weight: 500;
  color: var(--ilikia-teal-soft);
}
.headline strong { font-weight: 600; }

.hero-products {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.hero-products .sep {
  color: var(--ilikia-teal-soft);
  margin: 0 8px;
  font-weight: 300;
}
.hero-products-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
  font-style: italic;
  font-family: var(--font-display);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-tag {
  font-size: 16px;
  color: #fff;
  margin-bottom: 36px;
  max-width: 540px;
  line-height: 1.65;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.hero-tag sup { color: var(--ilikia-teal-soft); }

/* Botão no hero — fundo branco, texto petróleo; vira ghost branco no hover */
.hero .btn-primary {
  background: #fff;
  color: var(--ilikia-deep);
  border: 2px solid transparent;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: background 0.35s ease,
              color 0.35s ease,
              border-color 0.35s ease,
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}
.hero .btn-primary:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

/* Hover por produto no nome da linha */
.hero-product {
  display: inline-block;
  cursor: default;
  transition: color 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-product--fine:hover    { color: #59bbb3; transform: translateY(-2px); }
.hero-product--deep:hover    { color: #b06884; transform: translateY(-2px); }
.hero-product--contour:hover { color: #f69050; transform: translateY(-2px); }


/* =====================================================
   SEÇÃO 2 — NATURALIDADE + SEGURANÇA (duas colunas)
   ===================================================== */
.section-2 { background: var(--bg); position: relative; overflow: visible; }
.section-2 > .wrap { position: relative; z-index: 1; }

.s2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .s2-grid { grid-template-columns: 1fr; gap: 40px; }
}

.s2-text .h-section { text-align: left; font-size: clamp(22px, 2.8vw, 34px); }
.s2-text .p-body { max-width: none; }

/* S2 — texto branco sobre fundo teal (só o que ficava verde escuro) */
.section-2 .h-section        { color: #FFFFFF !important; }
.section-2 .p-body            { color: rgba(255,255,255,0.92) !important; }
.section-2 .s2-bullets li     { color: #FFFFFF !important; }

.kicker {
  display: inline-block;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 700;
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}

.s2-bullets {
  list-style: none;
  margin-top: 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s2-bullets li {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  padding-left: 24px;
  position: relative;
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.s2-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 2px;
  background: rgba(255,255,255,0.7);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s ease;
}
.s2-bullets li:hover { transform: translateX(4px); }
.s2-bullets li:hover::before {
  width: 22px;
  background: #FFFFFF;
}

.s2-visual {
  position: relative;
}
.s2-visual-tilt {
  width: 100%;
}
.s2-products {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2%;
  padding: 6% 2% 12% 2%;
}
.s2-product-wrap {
  position: relative;
  z-index: 1;
  width: 30%;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.s2-product-wrap--deep { z-index: 2; }

.s2-product {
  width: 100%;
  height: auto;
  display: block;
  will-change: transform, filter;
}
.s2-product--fine    { animation: s2-float-fine    6.8s ease-in-out infinite; }
.s2-product--deep    { animation: s2-float-deep    7.6s ease-in-out -1.2s infinite; }
.s2-product--contour { animation: s2-float-contour 7.2s ease-in-out -2.5s infinite; }

/* Float + drop-shadow em camadas: a sombra acompanha a silhueta inclinada
   e fica mais difusa quando o produto sobe (afasta da "superfície") */
@keyframes s2-float-fine {
  0%, 100% {
    transform: translateY(6%) rotate(8deg);
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.22)) drop-shadow(0 18px 28px rgba(0,0,0,0.10));
  }
  50% {
    transform: translateY(-2%) rotate(9.5deg);
    filter: drop-shadow(0 16px 18px rgba(0,0,0,0.16)) drop-shadow(0 30px 44px rgba(0,0,0,0.08));
  }
}
@keyframes s2-float-deep {
  0%, 100% {
    transform: translateY(-6%) rotate(-3deg);
    filter: drop-shadow(0 14px 16px rgba(0,0,0,0.18)) drop-shadow(0 28px 42px rgba(0,0,0,0.09));
  }
  50% {
    transform: translateY(-14%) rotate(-2deg);
    filter: drop-shadow(0 22px 24px rgba(0,0,0,0.14)) drop-shadow(0 40px 58px rgba(0,0,0,0.07));
  }
}
@keyframes s2-float-contour {
  0%, 100% {
    transform: translateY(4%) rotate(-10deg);
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.22)) drop-shadow(0 20px 32px rgba(0,0,0,0.10));
  }
  50% {
    transform: translateY(-4%) rotate(-11.5deg);
    filter: drop-shadow(0 18px 20px rgba(0,0,0,0.16)) drop-shadow(0 32px 48px rgba(0,0,0,0.08));
  }
}

@media (prefers-reduced-motion: reduce) {
  .s2-product { animation: none; }
}

/* =====================================================
   SEÇÃO 3 — DESTAQUE DE LEITURA (vídeo de fundo)
   ===================================================== */
.pullquote {
  position: relative;
  background: var(--ilikia-deep);
  color: #fff;
  padding: 144px 0;
  text-align: center;
  overflow: hidden;
}
@media (max-width: 640px) { .pullquote { padding: 88px 0; } }

.pullquote-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pullquote-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 79, 77, 0.78) 0%, rgba(15, 79, 77, 0.88) 100%);
}
.pullquote-content {
  position: relative;
  z-index: 2;
}

.pq-text {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 920px;
  margin: 0 auto;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}
.pq-text em {
  font-style: italic;
  font-weight: 500;
  color: var(--ilikia-teal-soft);
}

/* Assinatura da marca após a frase — fecha o pull-quote */
.pq-signature {
  margin: 44px auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  position: relative;
  padding-top: 28px;
}
.pq-signature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 1px;
  background: var(--ilikia-teal-soft);
  opacity: 0.55;
}
.pq-signature em {
  font-style: italic;
  font-weight: 400;
  color: var(--ilikia-teal-soft);
}

/* Wave-text: cada palavra sobe levemente no hover, esquerda → direita (easing suave) */
.pq-word {
  display: inline-block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.pq-text:hover .pq-word {
  transform: translateY(-3px);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.06s);
}

/* =====================================================
   SEÇÃO 4 — LINHA UP
   ===================================================== */
.section-4 {
  background: var(--bg-soft);
  padding-bottom: 40px; /* aproxima da ficha técnica que vem a seguir */
}
@media (max-width: 768px) {
  .section-4 { padding-bottom: 28px; }
}

/* Layout: 4 colunas (h2, imagem, titles, desc+CTA) em uma única linha */
.s4-row {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.25fr)  /* h2 título (mais largo, quebra menos) */
    minmax(170px, 0.75fr)  /* imagem */
    minmax(180px, 0.85fr)  /* titles UP Fine/Deep/Contour */
    minmax(330px, 1.35fr); /* descrição + CTA empilhados */
  gap: clamp(20px, 2.2vw, 32px);
  align-items: stretch;
}
@media (max-width: 1100px) {
  .s4-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 32px 40px;
    align-items: start;
  }
  .s4-row .s4-head             { grid-column: 1 / -1; }
  .s4-row .hover-slider-images { grid-column: 1; grid-row: 2; }
  .s4-row .hover-slider-titles { grid-column: 2; grid-row: 2; align-self: center; }
  .s4-row .s4-end              { grid-column: 1 / -1; grid-row: 3; }
}
/* ---- S4 mobile: rewrite limpo ---- */
@media (max-width: 640px) {
  /* Grid: 1 coluna, 4 rows explícitas, cada bloco no seu espaço */
  .s4-row {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
  }

  /* 1) Título da seção */
  .s4-row .s4-head { text-align: center; width: 100%; }

  /* 2) Imagem do rosto — altura automática, rosto completo */
  .s4-row .hover-slider-images {
    width: 100%;
    height: auto !important;
    max-height: 360px !important;
    position: relative;
    overflow: visible !important;
  }
  .s4-row .hover-slider-images .slide-image,
  .s4-row .hover-slider-images .slide-image img {
    height: auto !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center;
  }

  /* 3) Nomes UP Fine / Deep / Contour — centralizados, fundo legível */
  .s4-row .hover-slider-titles {
    width: 100%;
    align-items: center;
    text-align: center;
    height: auto;
  }
  .hover-slider-titles .slide-title {
    width: auto;
    margin: 0 auto;
    text-align: center;
  }

  /* 4) Descrição + CTA — centralizado */
  .s4-row .s4-end {
    width: 100%;
    text-align: center;
    align-items: center !important;
    height: auto;
  }
  .s4-end .slide-info { text-align: center; }
  .s4-end .slide-info-title,
  .s4-end .slide-info-desc { margin-left: auto; margin-right: auto; max-width: 100%; }
  .s4-end .s4-cta {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  .s4-end .btn-primary {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    padding: 16px 20px !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* Coluna 4: descrição + CTA centralizados verticalmente, próximos */
.s4-end {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  gap: 8px;
}

.s4-head {
  text-align: left;
  display: flex;
  align-items: center;
  height: 100%;
}
.s4-head .h-section {
  max-width: 100%;
  font-size: clamp(26px, 2.8vw, 40px);
  color: #FFFFFF;
}
.section-4 .h-section em { color: #FFFFFF; }

/* Titles clicáveis com efeito stagger (coluna 3 do s4-row) — centralizados */
.hover-slider-titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 100%;
}

.slide-title {
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  width: max-content;
  max-width: 100%;
}
.slide-title:focus-visible { outline: 2px solid var(--ilikia-teal); outline-offset: 4px; border-radius: 4px; }

.slide-stagger { display: inline-block; }

.slide-stagger .char-wrap {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  line-height: 1.3;
  padding-bottom: 0.05em;
}
.slide-stagger .char-original,
.slide-stagger .char-duplicate {
  display: inline-block;
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  line-height: 1.05;
}
/* era 0.45: a camada visivel do nome INATIVO ficava a 45%, entao UPDeep e
   UPContour liam como versoes lavadas da cor de marca — foi isso que a Mari
   apontou em 21/08 ("as cores das marcacoes estao muito mais claras").
   Em 1 a cor bate exatamente com a do produto e com a marcacao no rosto.
   Efeito colateral aceito: os tres nomes ficam com o mesmo peso; quem sinaliza
   o ativo passa a ser o rosto que troca e o texto da direita. */
.slide-stagger .char-original { opacity: 1; }
.slide-stagger .char-duplicate {
  position: absolute;
  left: 0; top: 0;
  transform: translateY(110%);
}
.slide-title[data-active="true"] .char-original { transform: translateY(-110%); }
.slide-title[data-active="true"] .char-duplicate { transform: translateY(0%); }

.slide-fine[data-active="true"]    .char-duplicate { color: #FFFFFF; }
.slide-deep[data-active="true"]    .char-duplicate { color: var(--up-deep); }
.slide-contour[data-active="true"] .char-duplicate { color: var(--up-contour); }

/* Pilha de imagens (coluna 2 do s4-row) — segue altura da row, ancora embaixo */
.hover-slider-images {
  display: grid;
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  justify-self: stretch;
}
.hover-slider-images > * {
  grid-column: 1;
  grid-row: 1;
}

.slide-image {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1),
              transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.slide-image[data-active="true"] {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.slide-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* 21/08 — brightness(1.5) removido: clareava o traco do rosto (#A8A8A8, ja
   fraco sobre o neutro #E8E8E8) e as marcacoes junto, deixando tudo lavado
   (queixa da Mari 21/08). Traco e marcacao agora vem corrigidos no proprio
   PNG (*-indic-v2.png): traco #4A4A4A e marcacao na cor do produto. */
.slide-fine img,
.slide-deep img,
.slide-contour img { filter: none; }

/* Descrição (dentro de .s4-end) — grid stacking */
.hover-slider-info {
  display: grid;
  position: relative;
  width: 100%;
}
.hover-slider-info > * {
  grid-column: 1;
  grid-row: 1;
}
.slide-info {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
  text-align: left;
}
.slide-info[data-active="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.slide-info-title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  color: #FFFFFF;
  margin-bottom: 8px;
  max-width: 320px;
  transition: color 0.4s ease;
}
.slide-info-desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  max-width: 320px;
}

/* Cor do título da descrição = cor do produto ativo */
.slide-info[data-slide="0"] .slide-info-title { color: #FFFFFF; }
.slide-info[data-slide="1"] .slide-info-title { color: var(--up-deep); }
.slide-info[data-slide="2"] .slide-info-title { color: var(--up-contour); }

/* CTA (dentro de .s4-end) */
.s4-cta { margin-top: 0; }
.s4-end .btn-primary { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .slide-stagger .char-original,
  .slide-stagger .char-duplicate,
  .slide-image,
  .slide-info {
    transition: none !important;
  }
}

/* =====================================================
   SEÇÃO 4.5 — FICHA TÉCNICA (tabela comparativa)
   ===================================================== */
.section-spec {
  background: var(--bg-soft);   /* mesma cor da S4: sem seam */
  padding: 40px 0 110px;        /* topo pequeno: encosta na S4 */
}
@media (max-width: 768px) {
  .section-spec { padding: 28px 0 64px; }
}

/* ---------- Título: 1 linha, menor, abaixo do header da S4 ---------- */
.spec-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: -0.005em;
  text-align: center;
  margin: 0 0 26px;
  line-height: 1.2;
}
.spec-title em {
  font-style: normal;
  font-weight: 700;
  color: #FFFFFF;
}

/* ---------- Box da tabela com shine border ---------- */
.spec-table-box {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  margin: 0 auto;
  max-width: 1280px;
  padding: 24px;
}
.spec-table-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background-image: radial-gradient(
    transparent,
    transparent,
    #59bbb3,
    #b06884,
    #f69050,
    transparent,
    transparent
  );
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: shine-pulse 14s linear infinite;
}
@media (max-width: 720px) {
  .spec-table-box { padding: 16px; }
}

/* ---------- Wrapper com scroll horizontal ---------- */
.spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 79, 77, 0.18) transparent;
  border-radius: calc(var(--radius-lg) - 12px);
}
.spec-table-wrap::-webkit-scrollbar { height: 6px; }
.spec-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(15, 79, 77, 0.22);
  border-radius: 3px;
}

/* ---------- Tabela ---------- */
.spec-tbl {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font);
}

/* Larguras explícitas — Indicações ganha mais espaço */
.spec-col-name         { width: 16%; }
.spec-col-concentracao { width: 8%;  }
.spec-col-particula    { width: 9%;  }
.spec-col-mod          { width: 6%;  }
.spec-col-reticulacao  { width: 9%;  }
.spec-col-lidocaina    { width: 6%;  }
.spec-col-quantidade   { width: 11%; }
.spec-col-plano        { width: 13%; }
.spec-col-indicacoes   { width: 22%; }

.spec-tbl th,
.spec-tbl td {
  text-align: left;
  vertical-align: middle;
  padding: 20px 16px;
  color: var(--ilikia-deep);
  font-weight: 400;
  transition: background-color 0.3s ease;
}

/* Header row — case natural (MoD continua MoD) */
.spec-tbl thead th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
  padding: 8px 16px 18px;
  vertical-align: bottom;
}
.spec-th-corner { padding: 0 !important; }

/* Linhas de produto — tintadas na cor, destaque horizontal no hover */
.spec-row {
  transition: background-color 0.4s ease;
}
.spec-row--fine          { background: rgba(8, 178, 172, 0.07);  }
.spec-row--deep          { background: rgba(140, 46, 79, 0.07);  }
.spec-row--contour       { background: rgba(226, 108, 63, 0.07); }
.spec-row--fine:hover    { background: rgba(8, 178, 172, 0.16);  }
.spec-row--deep:hover    { background: rgba(140, 46, 79, 0.16);  }
.spec-row--contour:hover { background: rgba(226, 108, 63, 0.16); }

/* Coluna do nome — mini-mockup CSS da caixa do produto */
.spec-tbl tbody th[scope="row"] {
  padding: 16px;
}
/* Imagem da caixa do produto */
.spec-prod-img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(15, 79, 77, 0.18));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s ease;
}
.spec-row:hover .spec-prod-img {
  transform: translateY(-3px);
  filter: drop-shadow(0 12px 22px rgba(15, 79, 77, 0.28));
}

/* Valores */
.spec-tbl tbody td {
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 500;
}

/* ---------- Ícones inline (Partícula + Reticulação) ---------- */
.spec-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Partícula: bolinha que cresce conforme o tamanho */
.spec-particle {
  flex-shrink: 0;
  display: inline-block;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.spec-particle[data-size="s"] { width: 6px;  height: 6px;  }
.spec-particle[data-size="m"] { width: 10px; height: 10px; }
.spec-particle[data-size="l"] { width: 14px; height: 14px; }

/* Reticulação: 3 barras crescentes, nível 1/2/3 */
.spec-bars {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.spec-bars i {
  width: 3px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.22;
}
.spec-bars i:nth-child(1) { height: 6px;  }
.spec-bars i:nth-child(2) { height: 10px; }
.spec-bars i:nth-child(3) { height: 14px; }

.spec-bars[data-level="1"] i:nth-child(1)                                  { opacity: 1; }
.spec-bars[data-level="2"] i:nth-child(1),
.spec-bars[data-level="2"] i:nth-child(2)                                  { opacity: 1; }
.spec-bars[data-level="3"] i                                               { opacity: 1; }

/* Mobile: vira cards empilhados (mais leitor-friendly que scroll horizontal) */
@media (max-width: 640px) {
  .spec-tbl { min-width: 0; table-layout: auto; }
  .spec-tbl colgroup,
  .spec-tbl thead,
  .spec-th-corner { display: none; }
  .spec-tbl,
  .spec-tbl tbody,
  .spec-tbl tr,
  .spec-tbl td,
  .spec-tbl th[scope="row"] { display: block; width: 100%; }

  .spec-tbl tbody tr.spec-row {
    margin-bottom: 18px;
    padding: 18px 18px 6px;
    border-radius: 12px;
  }
  .spec-tbl tbody tr.spec-row:last-child { margin-bottom: 0; }

  .spec-tbl tbody th[scope="row"] {
    padding: 0 0 14px;
    text-align: center;
  }
  .spec-prod-img { margin: 0 auto; max-width: 140px; }

  .spec-tbl tbody td {
    padding: 10px 0;
    border-bottom: 1px solid rgba(15, 79, 77, 0.08);
    font-size: 14px;
  }
  .spec-tbl tbody td:last-child { border-bottom: none; }

  .spec-tbl tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
}

/* Plano de aplicação: 3 camadas empilhadas (derme/sub.sup/sub.prof) */
.spec-depth {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  width: 14px;
}
.spec-depth i {
  height: 4px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.22;
}
.spec-depth[data-level="1"] i:nth-child(1) { opacity: 1; }
.spec-depth[data-level="2"] i:nth-child(2) { opacity: 1; }
.spec-depth[data-level="3"] i:nth-child(3) { opacity: 1; }

/* Cor dos ícones segue a linha */
.spec-row--fine    .spec-particle,
.spec-row--fine    .spec-bars i,
.spec-row--fine    .spec-depth i { color: var(--ilikia-teal); }
.spec-row--deep    .spec-particle,
.spec-row--deep    .spec-bars i,
.spec-row--deep    .spec-depth i { color: var(--up-deep); }
.spec-row--contour .spec-particle,
.spec-row--contour .spec-bars i,
.spec-row--contour .spec-depth i { color: var(--up-contour); }

/* =====================================================
   SEÇÃO 5 — PERFORMANCE (fundo verde escuro)
   ===================================================== */
.section-5 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(8, 178, 172, 0.10), transparent 70%),
    var(--ilikia-deep);
}
.section-5 > .wrap { position: relative; z-index: 1; }
.section-5 .h-section { color: #fff; }
.section-5 .h-section em { color: var(--ilikia-teal-soft); }
.section-5 .p-body { color: rgba(255, 255, 255, 0.72); }
.section-5 .p-body sup { color: var(--ilikia-teal-soft); }

.s5-head { text-align: center; margin-bottom: 64px; }

/* ---------- Bolhas de gel subindo ---------- */
.gel-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bubble {
  position: absolute;
  bottom: -120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(200, 240, 235, 0.22) 28%,
      rgba(127, 196, 190, 0.14) 55%,
      rgba(8, 178, 172, 0.06) 80%,
      transparent 100%);
  box-shadow:
    inset 0 -6px 14px rgba(8, 90, 88, 0.18),
    inset 0 4px 8px rgba(255, 255, 255, 0.22),
    0 0 24px rgba(127, 196, 190, 0.08);
  opacity: 0;
  filter: blur(0.4px);
  animation: float-up linear infinite;
  will-change: transform, opacity;
}
@keyframes float-up {
  0%   { transform: translate3d(0, 0, 0) scale(0.85);    opacity: 0; }
  8%   { opacity: 0.55; }
  50%  { transform: translate3d(14px, -55vh, 0) scale(1); opacity: 0.6; }
  92%  { opacity: 0.4; }
  100% { transform: translate3d(-10px, -115vh, 0) scale(1.08); opacity: 0; }
}
.bubble.b1  { left: 5%;  width: 22px; height: 22px; animation-duration: 9.5s;  animation-delay:  0s;    }
.bubble.b2  { left: 12%; width: 14px; height: 14px; animation-duration: 11.5s; animation-delay:  1s;    }
.bubble.b3  { left: 22%; width: 38px; height: 38px; animation-duration: 13.5s; animation-delay:  2s;    }
.bubble.b4  { left: 31%; width: 18px; height: 18px; animation-duration: 8.5s;  animation-delay:  0.5s;  }
.bubble.b5  { left: 42%; width: 28px; height: 28px; animation-duration: 12.5s; animation-delay:  2.75s; }
.bubble.b6  { left: 51%; width: 48px; height: 48px; animation-duration: 15s;   animation-delay:  1.25s; }
.bubble.b7  { left: 60%; width: 16px; height: 16px; animation-duration: 10s;   animation-delay:  3.25s; }
.bubble.b8  { left: 68%; width: 24px; height: 24px; animation-duration: 12s;   animation-delay:  1.75s; }
.bubble.b9  { left: 77%; width: 34px; height: 34px; animation-duration: 13s;   animation-delay:  0.25s; }
.bubble.b10 { left: 85%; width: 20px; height: 20px; animation-duration: 9s;    animation-delay:  2.25s; }
.bubble.b11 { left: 93%; width: 42px; height: 42px; animation-duration: 14s;   animation-delay:  1.5s;  }
.bubble.b12 { left: 38%; width: 12px; height: 12px; animation-duration: 7.5s;  animation-delay:  3.5s;  }
.bubble.b13 { width: 16px; height: 16px; animation-duration: 8s;    animation-delay: 0.4s; }
.bubble.b14 { width: 32px; height: 32px; animation-duration: 11.5s; animation-delay: 2.6s; }
.bubble.b15 { width: 22px; height: 22px; animation-duration: 9.5s;  animation-delay: 1.4s; }
.bubble.b16 { width: 14px; height: 14px; animation-duration: 7s;    animation-delay: 3.1s; }
.bubble.b17 { width: 28px; height: 28px; animation-duration: 12s;   animation-delay: 1.1s; }
.bubble.b18 { width: 18px; height: 18px; animation-duration: 10s;   animation-delay: 2.1s; }
.bubble.b19 { width: 24px; height: 24px; animation-duration: 13s;   animation-delay: 0.8s; }
.bubble.b20 { width: 12px; height: 12px; animation-duration: 8.5s;  animation-delay: 3.4s; }
.bubble.b21 { width: 36px; height: 36px; animation-duration: 14s;   animation-delay: 1.3s; }
.bubble.b22 { width: 20px; height: 20px; animation-duration: 11s;   animation-delay: 0.2s; }
.bubble.b23 { width: 26px; height: 26px; animation-duration: 10.5s; animation-delay: 2.7s; }
.bubble.b24 { width: 14px; height: 14px; animation-duration: 9s;    animation-delay: 1.9s; }

/* Variante para fundo claro (seção 2): neutro/cinza, sem tom verde */
.gel-bubbles--light .bubble {
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(245, 245, 245, 0.55) 18%,
      rgba(200, 200, 200, 0.35) 45%,
      rgba(110, 110, 110, 0.22) 80%,
      transparent 100%);
  box-shadow:
    inset 0 -6px 14px rgba(60, 60, 60, 0.32),
    inset 0 4px 8px rgba(255, 255, 255, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.10);
}

/* Variante "boiando próximo aos produtos" — espalha e troca subida por drift orgânico */
.gel-bubbles--float { overflow: visible; }
.gel-bubbles--float .bubble {
  bottom: auto;
  opacity: 0.88;
  animation-name: bubble-drift;
  animation-timing-function: ease-in-out;
}
@keyframes bubble-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(var(--dx, 20px), calc(var(--dy, -20px) * 0.4), 0) scale(1.06); }
  66%      { transform: translate3d(calc(var(--dx, 20px) * -0.3), var(--dy, -20px), 0) scale(0.94); }
}
.gel-bubbles--float .b1  { left:  4%; top: 18%; --dx:  28px; --dy: -32px; }
.gel-bubbles--float .b2  { left: 18%; top:  6%; --dx: -26px; --dy:  22px; }
.gel-bubbles--float .b3  { left: 32%; top: 38%; --dx:  22px; --dy:  30px; }
.gel-bubbles--float .b4  { left: 48%; top:  4%; --dx: -24px; --dy:  26px; }
.gel-bubbles--float .b5  { left: 64%; top: 28%; --dx:  30px; --dy: -24px; }
.gel-bubbles--float .b6  { left: 84%; top: 12%; --dx: -32px; --dy:  28px; }
.gel-bubbles--float .b7  { left:  8%; top: 65%; --dx:  26px; --dy: -22px; }
.gel-bubbles--float .b8  { left: 34%; top: 78%; --dx: -24px; --dy: -20px; }
.gel-bubbles--float .b9  { left: 55%; top: 88%; --dx:  22px; --dy: -28px; }
.gel-bubbles--float .b10 { left: 78%; top: 70%; --dx: -30px; --dy: -22px; }
.gel-bubbles--float .b11 { left: 90%; top: 48%; --dx: -24px; --dy:  26px; }
.gel-bubbles--float .b12 { left:  2%; top: 42%; --dx:  28px; --dy:  24px; }
.gel-bubbles--float .b13 { left: 12%; top: 30%; --dx: -26px; --dy:  20px; }
.gel-bubbles--float .b14 { left: 26%; top: 52%; --dx:  22px; --dy: -26px; }
.gel-bubbles--float .b15 { left: 42%; top: 22%; --dx: -28px; --dy:  22px; }
.gel-bubbles--float .b16 { left: 58%; top: 58%; --dx:  26px; --dy: -20px; }
.gel-bubbles--float .b17 { left: 72%; top: 42%; --dx: -22px; --dy:  28px; }
.gel-bubbles--float .b18 { left: 88%; top: 32%; --dx:  24px; --dy: -22px; }
.gel-bubbles--float .b19 { left: 16%; top: 82%; --dx: -28px; --dy: -24px; }
.gel-bubbles--float .b20 { left: 42%; top: 94%; --dx:  20px; --dy: -30px; }
.gel-bubbles--float .b21 { left: 68%; top: 84%; --dx: -30px; --dy: -22px; }
.gel-bubbles--float .b22 { left:  6%; top:  4%; --dx:  26px; --dy:  26px; }
.gel-bubbles--float .b23 { left: 96%; top:  4%; --dx: -28px; --dy:  22px; }
.gel-bubbles--float .b24 { left: 50%; top: 50%; --dx:  20px; --dy: -24px; }

/* Garante que os produtos fiquem acima das bolinhas dentro de .s2-visual */
.s2-visual-tilt { position: relative; z-index: 1; }

/* Camada ambiente — espalha algumas bolinhas pela seção inteira, desfocadas (sensação de fundo) */
.gel-bubbles--ambient .bubble {
  opacity: 0.55;
  filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; opacity: 0; }
}

/* ---------- Grid de cards ---------- */
.performance-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.perf-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 30px 28px 30px;
  width: calc((100% - 48px) / 4);
  box-shadow: 0 0 0 rgba(8, 178, 172, 0);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s ease,
              background-color 0.45s ease,
              box-shadow 0.55s ease;
}
.perf-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(127, 196, 190, 0.28), transparent 65%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.perf-card > * { position: relative; z-index: 1; }
.perf-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(127, 196, 190, 0.6);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.25),
    0 0 60px rgba(8, 178, 172, 0.22);
}
.perf-card:hover::before { opacity: 1; }

@media (max-width: 1000px) {
  .perf-card { width: calc((100% - 16px) / 2); }
}
@media (max-width: 540px) {
  .perf-card { width: 100%; padding: 28px 24px; }
}

.perf-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(127, 196, 190, 0.12);
  border: 1px solid rgba(127, 196, 190, 0.22);
  color: var(--ilikia-teal-soft);
  margin-bottom: 22px;
  transition: background-color 0.4s ease,
              border-color 0.4s ease,
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.perf-icon svg { width: 26px; height: 26px; display: block; }
.perf-card:hover .perf-icon {
  background: rgba(127, 196, 190, 0.20);
  border-color: rgba(127, 196, 190, 0.45);
  transform: translateY(-2px);
}

.perf-title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.003em;
  color: #fff;
  margin: 0 0 12px;
}

.perf-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}
.perf-desc sup { color: var(--ilikia-teal-soft); }

/* =====================================================
   SEÇÃO 6 — FORMULÁRIO
   ===================================================== */
.section-6 {
  background: #08B2AC;
  color: #FFFFFF;
  padding: 110px 0;
}

/* Esconde <br> forçados do título no mobile pra evitar quebras estranhas */
@media (max-width: 600px) {
  .s6-head h2 br { display: none; }
}

.s6-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .s6-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ---------- Lado esquerdo ---------- */
.s6-head {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.s6-head h2 {
  color: #FFFFFF;
  margin: 0;
}
.s6-head h2 em {
  color: #FFFFFF;
  font-style: italic;
}

.s6-intro {
  color: rgba(255,255,255,0.8);
  font-size: 16px;
  line-height: 1.6;
  margin: 20px 0 0;
  max-width: 460px;
}

.s6-benefits {
  list-style: none;
  margin: 36px 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.s6-benefit {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.s6-benefit:hover { transform: translateX(4px); }

.s6-benefit-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: background-color 0.4s ease,
              border-color 0.4s ease,
              color 0.4s ease,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.s6-benefit-icon svg {
  width: 19px;
  height: 19px;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.s6-benefit:hover .s6-benefit-icon {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--ilikia-teal);
  transform: scale(1.08);
}
.s6-benefit:hover .s6-benefit-icon svg { transform: rotate(-6deg); }

.s6-benefit-text { padding-top: 2px; }
.s6-benefit-title {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 3px;
  line-height: 1.25;
  transition: color 0.3s ease;
}
.s6-benefit:hover .s6-benefit-title { color: #FFFFFF; }

.s6-benefit-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,0.75);
  margin: 0;
  line-height: 1.45;
}

/* ---------- Form shell (carrega o glow externo) ---------- */
.form-shell {
  position: relative;
}
.form-shell::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--radius-lg) + 4px);
  background-image: radial-gradient(
    transparent,
    transparent,
    #59bbb3,
    #b06884,
    #f69050,
    transparent,
    transparent
  );
  background-size: 300% 300%;
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  will-change: opacity, background-position;
  animation: shine-pulse 14s linear infinite;
  transition: opacity 0.6s ease;
}
.form-shell:hover::after { opacity: 0.9; }

/* ---------- Form card com shine border (21st.dev style) ---------- */
.form-card {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 56px 44px 44px;
  color: var(--text);
  box-shadow:
    0 18px 40px rgba(15, 79, 77, 0.08),
    0 3px 10px rgba(15, 79, 77, 0.04);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
}
.form-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background-image: radial-gradient(
    transparent,
    transparent,
    #59bbb3,
    #b06884,
    #f69050,
    transparent,
    transparent
  );
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  will-change: background-position;
  animation: shine-pulse 14s linear infinite;
}
.form-shell:hover .form-card {
  transform: translateY(-4px);
  box-shadow:
    0 28px 56px rgba(15, 79, 77, 0.14),
    0 6px 18px rgba(15, 79, 77, 0.07);
}

@keyframes shine-pulse {
  0%   { background-position: 0% 0%;     }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%;     }
}

@media (prefers-reduced-motion: reduce) {
  .form-card::before,
  .form-shell::after { animation: none; }
}

@media (max-width: 520px) { .form-card { padding: 36px 24px 28px; } }

.form-row { margin-bottom: 28px; }
.form-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 520px) { .form-row.two { grid-template-columns: 1fr; gap: 20px; } }

.form-field { position: relative; }

label {
  display: block;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  color: var(--ilikia-deep);
  margin-bottom: 6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

input, select {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1.5px solid rgba(15, 79, 77, 0.15);
  border-radius: 0;
  font-size: 15px;
  font-family: inherit;
  color: var(--ilikia-deep);
  background: transparent;
  transition: border-color 0.3s ease;
}
input::placeholder { color: rgba(15, 79, 77, 0.32); }

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0' fill='%2308B2AC'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
}
input:focus, select:focus {
  outline: none;
  border-bottom-color: var(--ilikia-teal);
}

.btn-submit {
  position: relative;
  width: 100%;
  padding: 18px 28px;
  border-radius: 999px;
  background: var(--ilikia-deep);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.35s ease, gap 0.35s ease;
}
.btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: cta-glow 2.4s ease-in-out infinite;
}
.btn-submit > * { position: relative; z-index: 1; }
.btn-submit-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-submit:hover {
  background: var(--ilikia-teal);
  gap: 18px;
}
.btn-submit:hover .btn-submit-arrow { transform: translateX(3px); }

.form-disclaimer {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 18px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.form-disclaimer svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--ilikia-teal);
}

/* Consent LGPD */
.form-consent,
.form-consent * {
  text-transform: none;
  letter-spacing: 0;
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 6px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-mute);
  cursor: pointer;
  user-select: none;
}
.form-consent input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 2px 0 0;
  border: none;
  padding: 0;
  accent-color: var(--ilikia-teal);
  cursor: pointer;
}
.form-consent strong {
  color: var(--ilikia-deep);
  font-weight: 600;
}
.form-consent a {
  color: var(--ilikia-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-consent a:hover { color: var(--ilikia-deep); }

.form-error {
  margin: 12px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #b04a3a;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  min-height: 0;
}
.form-error.visible {
  opacity: 1;
  transform: translateY(0);
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 0;
  gap: 18px;
}
.form-success[hidden] { display: none; }
.form-success-icon {
  width: 56px;
  height: 56px;
  color: var(--ilikia-teal);
}
.form-success-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  color: var(--ilikia-deep);
  line-height: 1.2;
  margin: 0;
}
.form-success-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 360px;
  margin: 0;
}

/* =====================================================
   REFERÊNCIAS (bloco dentro do footer)
   ===================================================== */
.footer-refs {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.refs-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 20px;
  text-align: left;
}
.refs-list {
  list-style: decimal;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  columns: 2;
  column-gap: 48px;
  margin: 0;
}
@media (max-width: 768px) { .refs-list { columns: 1; } }
.refs-list li {
  margin-bottom: 6px;
  break-inside: avoid;
}
.refs-list li::marker { color: var(--ilikia-teal-soft); }
.refs-list em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
}

/* =====================================================
   FOOTER (estilo upfull/upmax)
   ===================================================== */
.site-footer {
  background:
    radial-gradient(ellipse 54% 34% at 22% 0%, rgba(8, 178, 172, 0.12), transparent 70%),
    var(--ilikia-deep);
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-shell {
  padding-top: 80px;
  padding-bottom: 32px;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(140px, 0.65fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 980px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-main { grid-template-columns: 1fr; } }

.footer-brand-block { max-width: 420px; }

.footer-product-logo {
  display: block;
  width: auto;
  height: 70px;
  margin-bottom: 22px;
  opacity: 0.95;
  filter: brightness(0) invert(1);
}

/* Pareamento Ilikia + UP Facial no footer */
.footer-logo-pair {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 22px;
}
.footer-logo-pair .footer-product-logo {
  margin-bottom: 0;
}
.footer-logo-pair .footer-product-logo:first-child {
  height: 45px;
  filter: none;
}
.footer-logo-pair .footer-product-logo:last-child {
  height: 36px;
}
.footer-logo-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.2);
  margin: 0 16px;
  flex-shrink: 0;
}

.footer-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ilikia-teal-soft);
  font-weight: 500;
  margin-bottom: 14px;
}

.footer-description {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.55);
}

.footer-col h4 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ilikia-teal-soft);
  font-weight: 500;
  margin-bottom: 18px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.footer-col a,
.footer-col span {
  text-decoration: none;
  font-size: 13px;
  line-height: 1.5;
  display: inline-block;
}
.footer-col a {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease,
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-col a:hover {
  color: #fff;
  transform: translateX(3px);
}
.footer-col span {
  color: rgba(255, 255, 255, 0.32);
  font-style: italic;
  cursor: default;
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}
.footer-bottom > :first-child { justify-self: start; }
.footer-bottom > :last-child  { justify-self: end; }
.footer-bottom .footer-logos  { justify-self: center; }
@media (max-width: 640px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .footer-bottom > :first-child,
  .footer-bottom > :last-child  { justify-self: center; }
}
.footer-logos {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-logo-ilikia {
  height: 22px;
  width: auto;
  opacity: 0.75;
  filter: brightness(0) invert(1);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.footer-logo-ilikia:hover {
  opacity: 1;
  transform: scale(1.06);
}
.footer-hashtag {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0.04em;
  font-size: 16px;
  color: var(--ilikia-teal-soft);
  opacity: 0.8;
}

/* ============================================================
   AJUSTES 16/07/2026 — feedback do cliente 15/07 (task 86ah2xyqw)
   CSS aditivo: fix "vê/sentem", florzinha no kicker e bullets,
   bolhas de vidro da pasta no lugar das "balas", boxes de
   performance mais brancos, imagem única das caixas novas.
   ============================================================ */
/* "vê."/"sentem." sumiam (teal sobre teal) — cliente pediu a fonte no verde escuro */
.section-2 .h-section em{color:var(--ilikia-deep)}
/* kicker: sai o traço/sublinhado, entra a florzinha Ilikia */
.kicker{border-bottom:0;padding-bottom:0;position:relative;padding-left:22px}
.kicker::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:14px;height:14px;background:currentColor;-webkit-mask:url('assets/images/flor-ilikia.svg') center/contain no-repeat;mask:url('assets/images/flor-ilikia.svg') center/contain no-repeat}
/* tópicos: florzinha no lugar do travessão */
.s2-bullets li::before{width:14px;height:14px;top:.28em;background:currentColor;-webkit-mask:url('assets/images/flor-ilikia.svg') center/contain no-repeat;mask:url('assets/images/flor-ilikia.svg') center/contain no-repeat}
/* moléculas CSS pareciam balas -> textura real de bolhas de vidro (pasta do cliente) */
.gel-bubbles{display:none}
.section-2{background:url('assets/images/bg-bolhas.jpg') center/cover no-repeat var(--bg);background-blend-mode:soft-light}
.section-5{background-image:url('assets/images/bg-bolhas.jpg');background-size:cover;background-position:center;background-blend-mode:soft-light}
/* caixas novas: imagem única, estática */
.s2-kv{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.28))}
/* boxes de performance mais brancos (estavam apagados) */
.perf-card{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.95)}
.perf-card:hover{background:#fff}
.perf-card .perf-title{color:var(--ilikia-deep)}
.perf-card .perf-desc{color:#39615f}
.perf-card .perf-icon{background:rgba(8,178,172,.12);border-color:rgba(8,178,172,.25);color:var(--ilikia-teal)}
/* CORREÇÕES pós-review visual 16/07:
   - footer: o :first-child do pareamento tinha filter:none (o PNG antigo já era
     branco); o logo-ilikia-std.svg é preto (currentColor) -> reativa o invert.
   - .cta-row: os CTAs adicionados precisam de container centralizado próprio
     (o .s4-cta original só centraliza dentro do grid .s4-end). */
.footer-logo-pair .footer-product-logo:first-child{filter:brightness(0) invert(1)}
.cta-row{display:flex;justify-content:center;width:100%;margin-top:44px}
/* hero estático: caixas da arte aparecem à direita, texto continua sobre o overlay escuro */
.hero-bg-video{object-position:center right}
@media (max-width:880px){.hero-bg-video{object-position:center center}}

/* ============================================================
   AJUSTES 16/07/2026 (2ª leva) — review Gabs (task 86ah2xyqw)
   ============================================================ */
/* NAV sticky morta: html/body com overflow-x:hidden viram scroll container
   e quebram position:sticky. Mesmo gotcha resolvido na UP Max — clip corta
   o overflow horizontal SEM criar scroll container. (Fallback: navegadores
   sem 'clip' ignoram esta regra e ficam como estavam.) */
html, body { overflow-x: clip; }
/* Seção do formulário: sai o verde chapado (item 9 da Mari — "muito verde
   água, sem variação"). Bolhas do produto em soft-light + degradê leve pra
   dar profundidade; card branco do form segue protagonista. */
.section-6 {
  background-image: url('assets/images/bg-bolhas.jpg'),
    linear-gradient(165deg, #10bdb6 0%, #08b2ac 48%, #077f7b 100%);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: soft-light, normal;
}
/* respiro do título da seção do form */
.s6-head h2 { margin-bottom: 14px; }

/* ============================================================
   AJUSTES 17/07/2026 (noturno) — feedback Mari 16/07 17:50–17:58
   (thread do card 86ah2xyqw)
   ============================================================ */

/* 1) HERO reconstruído: split texto × arte oficial (sem overlay em cima
   do produto). "a foto do banner principal nao ficou legal … de modo que
   os textos nao tampem o produto" + mobile "muito desconstruído". */
.hero--split {
  background: linear-gradient(160deg, #0a3f3d 0%, #0F4F4D 55%, #0b6763 100%);
  min-height: auto;
}
.hero--split::after { content: none; } /* overlay era pro fundo full-bleed; sem ele o produto fica limpo */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-art img,
.hero-art-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  aspect-ratio: 1 / 1.12;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 28px;
  box-shadow: 0 34px 70px rgba(0, 20, 20, 0.4);
}
/* o vídeo é 16:9 com as caixas ao centro-direita; puxa o enquadramento p/ elas */
.hero-art-video { object-position: 62% center; background: #0a2b2b; }
@media (max-width: 880px) {
  .hero-split { grid-template-columns: 1fr; gap: 36px; }
  .hero--split .hero-content { padding-top: 96px; }
  .hero-art img { aspect-ratio: 4 / 4.6; max-height: none; object-position: center 32%; }
  .hero-art-video { aspect-ratio: 4 / 4.6; max-height: none; object-position: 60% center; }
}

/* 2) florzinha do kicker centralizada verticalmente com o texto
   ("o simbolo de ilikia nao ta centralizado aqui") */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}
.kicker::before {
  position: static;
  transform: none;
  flex: none;
}

/* 21/07: removido o círculo (disco bg-bolhas mascarado) atrás das caixas, a pedido
   do cliente — as caixas ficam sobre o fundo da seção + bolhas de gel, sem o disco. */
.section-2 { background: var(--bg); }
.s2-visual .s2-kv { position: relative; z-index: 1; }

/* 4) bug dos "ups" (cópia fantasma visível antes do clique): o char-wrap
   era mais alto (line-height 1.3) que o char (1.05) e o duplicate em
   translateY(110%) ainda aparecia dentro da caixa. Trava dupla:
   alturas iguais + duplicate invisível até ativar. */
.slide-stagger .char-wrap { line-height: 1.05; }
.slide-stagger .char-duplicate {
  transform: translateY(130%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease;
}
.slide-title[data-active="true"] .char-duplicate { opacity: 1; }

/* 5) "trazer as cores das outras embalagens pra alguns blocos": ícones dos
   boxes de performance alternam as 3 cores da linha (fine/deep/contour).
   Proposta conservadora — variação sem sair do sistema da marca. */
.performance-grid .perf-card:nth-child(3n+2) .perf-icon {
  background: rgba(140, 46, 79, 0.10);
  border-color: rgba(140, 46, 79, 0.28);
  color: var(--up-deep);
}
.performance-grid .perf-card:nth-child(3n) .perf-icon {
  background: rgba(226, 108, 63, 0.10);
  border-color: rgba(226, 108, 63, 0.30);
  color: var(--up-contour);
}

/* ============================================================
   HERO v3 GEL + vídeo na Tecnologia R² + cores v2 nos blocos
   (17/07 — decisão Gabs; substitui o hero-vídeo-no-card)
   ============================================================ */

/* --- fundo de gel tingido teal, camada ÚNICA full-bleed (mata a "linha vertical":
       sem container/card, cover cobre a largura toda) --- */
.hero--gel { position: relative; overflow: hidden; background: #0F4F4D; }
.hero--gel::after { content: none; }
.hero--gel .hero-bg-layer {
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/images/hero-bg-gel.jpg?v=30') center/cover no-repeat;
}
/* degradê só p/ legibilidade do texto à esquerda — suave, sem emenda */
.hero--gel .hero-bg-layer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, #0F4F4D 0%, rgba(15,79,77,.82) 30%, rgba(15,79,77,.34) 62%, rgba(11,103,99,.12) 100%);
}
.hero--gel .hero-split { position: relative; z-index: 2;
  grid-template-columns: minmax(0,1.04fr) minmax(0,0.96fr);
  gap: clamp(24px,4vw,56px); align-items: center;
}

/* --- produto recortado LIMPO: reseta a herança do card antigo (.hero-art img:
       border-radius/box-shadow/aspect-ratio/object-fit cover) --- */
.hero--gel .hero-art { position: relative; }
.hero--gel .hero-art .hero-prod {
  width: 100%; height: auto; max-height: 86vh;
  aspect-ratio: auto; border-radius: 0; background: none;
  object-fit: contain;
  box-shadow: none;
  filter: drop-shadow(0 26px 34px rgba(0,14,14,.5)) drop-shadow(0 10px 14px rgba(0,14,14,.32));
}
@media (max-width: 880px) {
  .hero--gel .hero-split { grid-template-columns: 1fr; gap: 26px; }
  .hero--gel .hero-art .hero-prod { max-height: none; width: 88%; margin: 0 auto; display: block; }
}

/* --- CORES v2 nos blocos ("uma cor só na LP" — Mari): pullquote com wash
       vinho→laranja + topo dos cards de performance nas 3 cores da linha --- */
.pullquote .pullquote-overlay {
  background: linear-gradient(120deg, rgba(122,43,70,.90) 0%, rgba(157,54,97,.86) 42%, rgba(194,90,52,.88) 100%) !important;
}
.performance-grid .perf-card { border-top: 3px solid var(--ilikia-teal); }
.performance-grid .perf-card:nth-child(3n+2) { border-top-color: var(--up-deep); }
.performance-grid .perf-card:nth-child(3n) { border-top-color: var(--up-contour); }

/* ============================================================
   18/07 — Tecnologia R² volta ao formato ORIGINAL (caixas-kv-3d): produtos
   em PNG transparente flutuando DIRETO sobre o fundo da seção (bolhas + glow),
   SEM card/moldura. Usa a base .s2-kv (drop-shadow nas caixas). Blindagem "ups".
   ============================================================ */
/* drop-shadow sutil NAS CAIXAS (não no container) — refina a base p/ o cutout limpo */
.s2-kv {
  filter: drop-shadow(0 24px 30px rgba(0, 20, 20, 0.42)) drop-shadow(0 8px 12px rgba(0, 20, 20, 0.28));
}

/* BLINDAGEM do fantasma "ups": além do opacity:0, garante que a cópia
   duplicada NUNCA renderize até o título ficar ativo (visibility). Custo zero,
   funciona mesmo se um CSS/asset velho ficar em cache. */
.slide-stagger .char-duplicate { visibility: hidden; }
.slide-title[data-active="true"] .char-duplicate { visibility: visible; }

/* ============================================================
   22/07/2026 — INVERSÃO DE TONS hero <-> bloco 2 (pedido Mari 22/07 13:47:
   "percebe que o bloco 2 tá mais claro que o banner principal? eles querem
   que o tom mais claro esteja no banner"). Hero -> CLARO, section-2 -> ESCURO.
   Rollback = deletar este bloco. [86ah2xyqw]
   ============================================================ */
/* HERO -> claro */
.hero--gel { background: var(--ilikia-teal); }
.hero--gel .hero-bg-layer { filter: brightness(1.30) saturate(.90); }
.hero--gel .hero-bg-layer::after {
  background: linear-gradient(100deg,
    rgba(255,255,255,.93) 0%, rgba(236,250,248,.82) 30%,
    rgba(214,242,239,.44) 62%, rgba(214,242,239,.10) 100%);
}
.hero--gel .headline,
.hero--gel .hero-products,
.hero--gel .hero-tag { color: var(--ilikia-deep); text-shadow: none; }
.hero--gel .hero-products-sub { color: rgba(15,79,77,.82); }
.hero--gel .headline em { color: var(--ilikia-teal); }
.hero--gel .hero-tag sup { color: var(--ilikia-teal); }
.hero--gel .btn-primary { background: var(--ilikia-deep); color: #fff; }
.hero--gel .btn-primary:hover { background: transparent; color: var(--ilikia-deep); border-color: var(--ilikia-deep); }

/* SECTION-2 -> escuro (texto do bloco já é branco !important) */
.section-2 { background: var(--ilikia-deep) !important; background-image: none !important; }
.section-2 .h-section em { color: var(--ilikia-teal-soft); }

/* ============================================================
   RODADA 19/08/2026 — paleta: sai o verde escuro das áreas
   grandes, entram o verde claro e o neutro (card 86ah2xyqw)

   Pedido da Mari (19/08 10:41) + mockup "Sugestão para próxima
   versão" que veio junto. Leitura do pedido, para o registro:
   "remover o verde escuro em todos os pontos" vale para FUNDO de
   área grande. O próprio mockup mantém o verde escuro na
   tipografia de destaque e nos botões — e a Mari pede
   explicitamente "podemos usar o verde escuro na fonte para
   destacar o título". Então o que sai é a superfície, não a cor.

   Sobre os dois tons novos: o teal oficial #08B2AC tem contraste
   2.63:1 com texto branco, abaixo do mínimo legível (4.5:1). O
   próprio mockup do cliente já mostra um teal mais fechado nas
   áreas de texto branco (amostrado #3A827E na performance,
   #50AEA9 no menu). Fixei em #1E7C78 (4.99:1) para superfície e
   #17706C (4.80:1 sobre o neutro) para texto de destaque em fundo
   claro. Continua sendo o verde claro da linha, e legível.
   ============================================================ */
:root {
  --neutral:      #E8E8E8;  /* fundo neutro, amostrado do mockup */
  --neutral-line: #D5D5D5;
  --teal-surface: #1E7C78;  /* fundo grande com texto branco */
  --teal-ink:     #17706C;  /* destaque de texto sobre fundo claro */
}

/* ---- 1. o verde escuro sai das superfícies ---- */
.topnav,
.nav-mobile { background: var(--teal-surface); }

.site-footer {
  background:
    radial-gradient(ellipse 54% 34% at 22% 0%, rgba(255, 255, 255, 0.10), transparent 70%),
    var(--teal-surface);
}

/* ---- 4. performance: fundo verde claro, textura do gel MANTIDA ----
   `background-color` de propósito: a camada de 17/07 põe o bg-bolhas.jpg
   em `background-image`, e trocar pelo shorthand apagaria o gel. */
.section-5 { background-color: var(--teal-surface); }

/* ---- 2. seção 2: fundo neutro, título em verde escuro ---- */
.section-2 {
  background: var(--neutral) !important;
  background-image: none !important;
}
.section-2 .h-section { color: var(--ilikia-deep); }
.section-2 .h-section em { color: var(--teal-ink); }
.section-2 .kicker { color: var(--teal-ink); }
.section-2 .p-body { color: var(--text-soft); }
.section-2 .p-body strong { color: var(--ilikia-deep); }
.section-2 .p-body sup,
.section-2 .h-section sup { color: var(--teal-ink); }
.section-2 .s2-bullets li { color: var(--ilikia-deep); }

/* A modelo entra como foto de verdade: tem fundo próprio (cinza do KV),
   então perde o drop-shadow de recorte e ganha moldura arredondada.
   O enquadramento é do CSS, não do arquivo — assim o retrato funciona em
   qualquer largura sem gerar um corte novo por breakpoint. */
.s2-kv--modelo {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 72% center;
  border-radius: var(--radius-lg);
  filter: none;
}
@media (max-width: 768px) {
  .s2-kv--modelo { aspect-ratio: 16 / 10; object-position: 68% center; }
}

/* ---- 3. seção 4 + ficha técnica: fundo neutro ----
   Estavam em --bg-soft, que é o teal. O `em` do título era branco (lia
   sobre o teal) e sobre o neutro sumiria. */
.section-4,
.section-spec { background: var(--neutral); }
.section-4 .h-section { color: var(--ilikia-deep); }
.section-4 .h-section em { color: var(--teal-ink); }

/* ---- 5. formulário: fundo neutro, sem imagem de fundo ---- */
.section-6 {
  background: var(--neutral) !important;
  background-image: none !important;
  color: var(--text);
}
.section-6 .s6-head h2 { color: var(--ilikia-deep); }
.section-6 .s6-head h2 em { color: var(--teal-ink); }
.section-6 .s6-head p,
.section-6 .s6-lead { color: var(--text-soft); }

/* ---- Contraste: o que era branco sobre fundo escuro precisa de cor
   nova agora que o fundo é claro. Sem isto os tópicos da seção 2 e a
   descrição da seção 4 ficam brancos sobre #E8E8E8 (1,23:1 — some).
   Todos os valores abaixo foram medidos na página renderizada e
   passam o mínimo de 4,5:1 (3:1 nos títulos grandes). ---- */

/* seção 2 — o bloco original ("texto branco sobre fundo teal") é todo
   `!important`, então o título, o corpo e os tópicos precisam ser também.
   Sem isto os três continuam brancos sobre o neutro: 1,23:1, ilegíveis. */
.section-2 .h-section     { color: var(--ilikia-deep) !important; }
.section-2 .p-body        { color: var(--text-soft) !important; }
.section-2 .s2-bullets li { color: var(--ilikia-deep) !important; }

/* seção 4 — "cada indicação em uma cor" (item 3 do pedido) vale também
   para os rótulos, não só para os desenhos: cada produto passa a usar a
   sua própria cor no nome e no título da indicação.
   O laranja da marca (#E26C3F) tem só 2,66:1 sobre o neutro. Para TEXTO
   uso um tom fechado da mesma família (4,77:1); a cor de marca continua
   intacta nas pastilhas, bordas e caixas. */
:root { --up-contour-ink: #A84722; }

.slide-info-desc { color: var(--text-soft); }
.slide-info-title { color: var(--teal-ink); }
.slide-info[data-slide="0"] .slide-info-title { color: var(--teal-ink); }
.slide-info[data-slide="2"] .slide-info-title { color: var(--up-contour-ink); }

.slide-title { color: var(--ilikia-deep); }
.slide-title.slide-fine    { color: var(--teal-ink); }
.slide-title.slide-deep    { color: var(--up-deep); }
.slide-title.slide-contour { color: var(--up-contour-ink); }

/* seção 5 e rodapé — o teal-soft #7FC4BE lia bem sobre o verde escuro,
   mas cai para 2,50:1 sobre a superfície nova. */
.section-5 .h-section em,
.section-5 .p-body sup { color: #C9E9E5; }
.footer-hashtag { color: #FFFFFF; opacity: 0.9; }

/* O nome do produto ativo tem uma segunda camada de letras (efeito de
   troca no hover) com cor própria. A do UP Fine era branca — sobre o
   neutro sumia justamente no item que está aberto por padrão. */
.slide-fine[data-active="true"]    .char-duplicate { color: var(--teal-ink); }
.slide-contour[data-active="true"] .char-duplicate { color: var(--up-contour-ink); }

/* Título da ficha técnica: era branco (lia sobre o teal da seção). */
.spec-title { color: var(--ilikia-deep); }
.spec-title em { color: var(--teal-ink); }

/* Miudezas do card do formulário — não foram tocadas nesta rodada, mas já
   estavam abaixo do mínimo legível sobre o card branco (2,63:1 e 3,45:1).
   Como são o link da política e o aviso de destinação a profissional de
   saúde, corrigidos aqui de uma vez. */
.section-6 .form-consent a { color: var(--teal-ink); }
.section-6 .form-disclaimer,
.section-6 .form-consent { color: #6B6B6B; }

/* 21/08 — este bloco subia a opacidade do nome inativo de 45% para 62% para
   recuperar legibilidade. Continuava falseando a cor: 62% de #8C2E4F sobre o
   neutro lia como #AE7489, e foi isso que a Mari apontou ("as cores estão
   muito mais claras"). Em 1 o nome bate exatamente com a cor do produto e com
   a marcação no rosto. A regra original ficava mais acima no arquivo e era
   sobrescrita por esta — as duas foram para 1. */
.slide-stagger .char-original { opacity: 1; }