/* ============================================================
   LP GRUPOS VIPS ABELA
   CSS único, mobile-first, sem framework.
   Ordem: tokens -> reset -> base -> componentes -> seções -> media queries
   ============================================================ */


/* ------------------------------------------------------------
   0. FONTE — Poppins, a mesma da marca.
   Hospedada localmente em assets/fonts/, não puxada do Google:
   sem DNS/TLS para um terceiro, sem rastreio, e cai no mesmo
   cache-control do resto dos assets. Subset "latin" apenas —
   cobre todo o português (ã õ ç á é í ó ú estão em U+0000-00FF).
   3 pesos = 23 KB no total.

   font-display: swap -> o texto aparece imediatamente na fonte do
   sistema e troca para Poppins quando ela chega. Nunca há texto
   invisível esperando download.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700.woff2') format('woff2');
}


/* ------------------------------------------------------------
   1. TOKENS — TROQUE AQUI QUANDO O BRAND KIT CHEGAR.
   Todo o resto do arquivo consome estas variáveis.
   ------------------------------------------------------------ */
:root {
  /* --- Camada 1: paleta da marca (ver BRAND.md). Não use direto nas regras. --- */
  --marca-magenta:       #832D53;
  --marca-magenta-esc:   #6B2444;  /* derivada, para hover */
  --marca-rosa-amaranto: #E78FAE;
  --marca-rosa-suave:    #F8CAE4;
  --marca-coral:         #FF8A5B;
  --marca-laranja:       #FF6D32;
  --marca-lilas:         #B5ADEA;
  --marca-lavanda:       #D3CEF2;
  --marca-verde-olivina: #ACC693;
  --marca-verde-cha:     #CDDDBE;
  --marca-preto:         #292A32;
  --marca-branco:        #FFFFFF;

  /* --- Camada 2: papéis semânticos. É ISTO que o resto do arquivo consome. ---
     Para mudar a direção visual, edite só esta camada.                        */
  --cor-fundo:          var(--marca-branco);
  --cor-superficie:     #FDF7FA;                 /* rosa quase branco */
  --cor-borda:          var(--marca-rosa-suave);
  --cor-texto:          var(--marca-preto);
  --cor-texto-suave:    #6B6C77;                 /* preto dessaturado, 5.5:1 no branco */
  --cor-accent:         var(--marca-magenta);
  --cor-accent-hover:   var(--marca-magenta-esc);
  --cor-accent-texto:   var(--marca-branco);     /* texto sobre o accent — 8:1 */

  /* Tipografia — Poppins (fonte da marca), com a stack do sistema como
     fallback enquanto o woff2 não chega. */
  --fonte-base: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: var(--fonte-base);

  /* Escala tipográfica fluida: cresce sozinha entre mobile e desktop.
     clamp(mínimo, preferido, máximo) — dispensa media query pra fonte. */
  --fs-h1:    clamp(2rem,   7vw,  3.5rem);
  --fs-h2:    clamp(1.5rem, 5vw,  2.25rem);
  --fs-h3:    clamp(1.1rem, 3vw,  1.25rem);
  --fs-body:  clamp(1rem,   2.6vw, 1.125rem);
  --fs-small: 0.875rem;

  /* Espaçamento */
  --gap:            1rem;
  --gap-lg:         1.5rem;
  --secao-py:       clamp(3rem, 10vw, 6rem);
  --container-max:  1120px;
  --container-px:   1.25rem;

  --raio:      14px;
  --raio-btn:  100px;

  --transicao: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ------------------------------------------------------------
   2. RESET mínimo
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* iOS não aumenta a fonte no giro */
  scroll-behavior: smooth;          /* âncoras suaves sem JS */
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;               /* trava scroll lateral em mobile */
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;               /* evita órfãs em títulos */
}

p  { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

img, svg {
  display: block;
  max-width: 100%;
  height: auto;                     /* com width/height no HTML: zero CLS */
}

a { color: inherit; text-decoration: none; }

/* Foco visível só para navegação por teclado */
:focus-visible {
  outline: 2px solid var(--cor-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respeita quem desativou animações no sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.section { padding-block: var(--secao-py); }

.section__title {
  font-size: var(--fs-h2);
  text-align: center;
  margin-bottom: var(--gap-lg);
}

.section__lead {
  color: var(--cor-texto-suave);
  text-align: center;
  max-width: 46ch;
  margin: 0 auto var(--gap-lg);
}

.accent { color: var(--cor-accent); }


/* ------------------------------------------------------------
   4. BOTÃO — o componente mais importante da página.
   Alvo de toque >= 48px de altura (recomendação de acessibilidade).
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.9rem 2rem;
  border: 0;
  border-radius: var(--raio-btn);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transicao), background-color var(--transicao),
              box-shadow var(--transicao);
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  background: var(--cor-accent);
  color: var(--cor-accent-texto);
  box-shadow: 0 8px 24px -8px rgba(131, 45, 83, 0.5);
}

/* :hover só onde existe mouse — evita estado "grudado" no touch */
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--cor-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(131, 45, 83, 0.65);
  }
}

.btn:active { transform: scale(0.98); }

.btn--block { width: 100%; }

.btn__icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;               /* svh = altura real no mobile (barra do navegador) */
  padding-block: 3rem;
  overflow: hidden;
  /* Auréola com as cores frias e quentes da marca, bem diluídas.
     Dá cor à primeira dobra sem competir com o botão. */
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%,  var(--marca-lavanda),    transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 10%, var(--marca-rosa-suave), transparent 60%),
    radial-gradient(ellipse 90% 40% at 50% 100%, var(--marca-verde-cha), transparent 70%),
    var(--cor-fundo);
}

/* Fallback para navegadores sem svh */
@supports not (height: 100svh) {
  .hero { min-height: 100vh; }
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap);
}

/* Logo horizontal (2.44:1). Dimensionada pela LARGURA — por altura, o
   "COSMETICS" (que é pequeno na arte) ficaria ilegível no mobile. */
.hero__logo {
  width: clamp(160px, 46vw, 250px);
  height: auto;
  margin-bottom: 0.5rem;
}

.hero__eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-accent);
}

.hero__title { font-size: var(--fs-h1); }

.hero__subtitle {
  color: var(--cor-texto-suave);
  max-width: 42ch;
}

.hero .btn { margin-top: 0.75rem; }

.hero__note {
  font-size: var(--fs-small);
  color: var(--cor-texto-suave);
}


/* ------------------------------------------------------------
   6. CARDS DE BENEFÍCIO
   1 coluna no mobile -> auto-fit a partir de ~560px, sem media query
   ------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
}

.card {
  position: relative;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--gap-lg);
  overflow: hidden;
}

/* Faixa colorida no topo de cada card: usa três cores da paleta em rodízio.
   É onde as cores de apoio da marca aparecem sem virar texto (não têm
   contraste para isso — ver BRAND.md). */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--card-cor, var(--marca-rosa-amaranto));
}

.card:nth-child(3n + 1) { --card-cor: var(--marca-coral); }
.card:nth-child(3n + 2) { --card-cor: var(--marca-lilas); }
.card:nth-child(3n + 3) { --card-cor: var(--marca-verde-olivina); }

.card__title {
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
  color: var(--cor-accent);
}

.card__text { color: var(--cor-texto-suave); }


/* ------------------------------------------------------------
   6b. CARROSSEL DE PRINTS
   Rolagem horizontal com scroll-snap nativo: o swipe do dedo
   funciona sem uma linha de JS. O JS só desenha os pontinhos.
   ------------------------------------------------------------ */
.section--prova {
  background: var(--cor-superficie);
  border-block: 1px solid var(--cor-borda);
}

.carrossel__trilho {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* O padding lateral iguala o container: o 1º e o último slide
     param alinhados com o texto acima, e não colados na borda. */
  padding: 0.5rem var(--container-px) 1rem;
  overscroll-behavior-x: contain;
  scrollbar-width: none;              /* Firefox */
}

.carrossel__trilho::-webkit-scrollbar { display: none; }

.carrossel__item {
  flex: 0 0 auto;
  width: min(62vw, 250px);
  scroll-snap-align: center;
}

/* A partir de 900px os 3 slides cabem juntos — sem rolagem, centralizados.
   (Só é seguro centralizar quando não há overflow, senão o 1º item fica
   inacessível pela rolagem.) */
@media (min-width: 900px) {
  .carrossel__trilho { justify-content: center; }
}

/* --- Moldura de celular --- */
.fone {
  padding: 8px;
  background: linear-gradient(160deg, #3A3B42, #1C1D22 40%);
  border-radius: 30px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,   /* brilho da borda */
    0 18px 40px -18px rgba(41, 42, 50, 0.55);
}

.fone__tela {
  aspect-ratio: 560 / 1214;                    /* trava a altura: zero CLS */
  border-radius: 23px;
  overflow: hidden;
  background: #000;
}

.fone__tela img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Pontos indicadores (criados pelo JS) --- */
.carrossel__pontos {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.carrossel__pontos:empty { display: none; }    /* sem JS, nada aparece */

.ponto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--marca-rosa-amaranto);
  cursor: pointer;
  transition: width var(--transicao), background-color var(--transicao);
}

.ponto.is-ativo {
  width: 26px;
  border-radius: 5px;
  background: var(--cor-accent);
}

/* Em desktop os 3 slides já aparecem juntos: o indicador vira ruído. */
@media (min-width: 900px) {
  .carrossel__pontos { display: none; }
}


/* ------------------------------------------------------------
   7. CTA FINAL + FOOTER
   ------------------------------------------------------------ */
.section--cta {
  text-align: center;
  border-top: 1px solid var(--cor-borda);
}

.footer {
  padding-block: 2rem;
  border-top: 1px solid var(--cor-borda);
}

.footer__text {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--cor-texto-suave);
}


/* ------------------------------------------------------------
   8. CTA STICKY — mobile apenas.
   .is-visible é adicionada pelo JS ao sair do hero.
   ------------------------------------------------------------ */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 0.75rem var(--container-px);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); /* notch iOS */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--cor-borda);
  transform: translateY(110%);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-cta.is-visible { transform: translateY(0); }

/* Espaço no fim da página para o sticky não cobrir o footer */
@media (max-width: 767px) {
  body { padding-bottom: 88px; }
}

/* Desktop não precisa do sticky — o CTA final já basta */
@media (min-width: 768px) {
  .sticky-cta { display: none; }
}


/* ------------------------------------------------------------
   9. REVEAL ON SCROLL — progressive enhancement.
   Sem JS, tudo fica visível (o .js-reveal só é ativado pelo script).
   ------------------------------------------------------------ */
.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.js-reveal.is-in { opacity: 1; transform: none; }