/* =====================================================
   CROMOFLIX - Vitrine (landing page)
   Direcao: vender a EMOCAO de colecionar figurinhas.
   Assinatura: figurinhas retangulares com numeracao e margem branca,
   se encaixando no album (fiel ao produto real).
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --tinta: #14121F;
  --papel: #FAF8F5;
  --branco: #FFFFFF;
  --magenta: #E0347C;
  --ciano: #16B5D8;
  --violeta: #6C3FC5;
  --dourado: #E8A93C;
  --grafite: #5C5A68;
  --linha: #EAE7E1;
  --fonte-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --fonte-corpo: 'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--fonte-corpo);
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- Marca ---------------- */
.v-marca {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
  display: flex; align-items: center; gap: 9px;
}
.v-marca-cromo {
  width: 17px; height: 20px; border-radius: 2px;
  background: linear-gradient(135deg, var(--magenta) 0 50%, var(--ciano) 50% 100%);
  outline: 2px solid var(--branco); outline-offset: 2px;
  border: 1px solid var(--tinta);
}

/* ---------------- Botões ---------------- */
.v-btn, .v-btn-ghost {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 0.95rem;
  transition: transform 0.12s, box-shadow 0.18s, background 0.18s;
  cursor: pointer;
  border: none;
}
.v-btn {
  background: var(--magenta);
  color: var(--branco);
  box-shadow: 0 4px 16px rgba(224,52,124,0.28);
}
.v-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(224,52,124,0.4); }
.v-btn-ghost {
  background: transparent;
  color: var(--tinta);
  border: 1.5px solid var(--linha);
}
.v-btn-ghost:hover { border-color: var(--tinta); }
.v-btn-grande { padding: 15px 30px; font-size: 1.02rem; border-radius: 12px; }
.v-btn-claro { background: var(--branco); color: var(--tinta); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.v-btn-claro:hover { background: #fff; }

/* ---------------- Topo ---------------- */
.v-topo {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 30px;
  padding: 16px 6vw;
  background: rgba(250,248,245,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.v-nav { display: flex; gap: 26px; flex: 1; }
.v-nav a { color: var(--grafite); text-decoration: none; font-weight: 500; font-size: 0.92rem; }
.v-nav a:hover { color: var(--tinta); }
.v-topo-acoes { display: flex; gap: 10px; align-items: center; }

/* ---------------- Herói ---------------- */
.v-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
  padding: 70px 6vw 90px;
  max-width: 1300px; margin: 0 auto;
}
.v-eyebrow {
  display: inline-block;
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--magenta);
  background: rgba(224,52,124,0.09);
  padding: 5px 12px; border-radius: 20px;
  margin-bottom: 18px;
}
.v-hero h1 {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.v-destaque {
  background: linear-gradient(120deg, var(--magenta), var(--violeta));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.v-sub {
  color: var(--grafite);
  font-size: 1.1rem;
  margin: 22px 0 30px;
  max-width: 500px;
}
.v-hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.v-hero-nums {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--linha);
}
.v-hero-nums div { font-size: 0.9rem; color: var(--grafite); }
.v-hero-nums strong { display: block; font-family: var(--fonte-display); font-size: 1.5rem; color: var(--tinta); }

/* Assinatura: álbum com figurinhas se encaixando */
.v-hero-album { display: flex; justify-content: center; }
.v-album-capa {
  background: linear-gradient(150deg, var(--violeta), var(--magenta));
  border-radius: 16px;
  padding: 30px 26px 34px;
  width: 100%; max-width: 380px;
  box-shadow: 0 30px 70px rgba(108,63,197,0.35);
  transform: rotate(-2deg);
}
.v-album-titulo {
  font-family: var(--fonte-display);
  font-weight: 800; color: #fff;
  font-size: 1.4rem; letter-spacing: 0.04em;
  text-align: center; margin-bottom: 22px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.v-album-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* Cada figurinha: retangular, margem branca, numerada (fiel ao produto) */
.v-fig {
  aspect-ratio: 51 / 61;
  background: #fff;
  border-radius: 3px;
  padding: 4px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: v-encaixa 0.5s ease both;
  animation-delay: var(--d);
}
.v-fig::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 2px;
}
.v-fig-0::after { background: linear-gradient(135deg, #FDE1EC, #F8C6DC); }
.v-fig-1::after { background: linear-gradient(135deg, #D6F0F8, #B4E4F1); }
.v-fig-2::after { background: linear-gradient(135deg, #E7DEF7, #CDBBEE); }
.v-fig-3::after { background: linear-gradient(135deg, #FCEFD3, #F7DCA1); }
.v-fig-num {
  position: absolute;
  bottom: 6px; right: 7px;
  font-size: 0.65rem; font-weight: 700;
  color: var(--tinta);
  z-index: 2;
  background: rgba(255,255,255,0.8);
  padding: 0 4px; border-radius: 3px;
}
@keyframes v-encaixa {
  from { opacity: 0; transform: scale(0.6) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------------- Seções ---------------- */
.v-secao { padding: 80px 6vw; max-width: 1300px; margin: 0 auto; }
.v-secao-cinza { max-width: none; background: var(--branco); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.v-secao-cinza > * { max-width: 1300px; margin-left: auto; margin-right: auto; }
.v-secao-cabecalho { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.v-secao-cabecalho h2 {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.v-secao-sub { color: var(--grafite); margin-top: 12px; font-size: 1.05rem; }
.v-secao-acao { text-align: center; margin-top: 44px; }

/* Passos */
.v-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.v-passo {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 30px 26px;
  transition: transform 0.15s, box-shadow 0.18s;
}
.v-passo:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20,18,31,0.08); }
.v-passo-num {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--magenta), var(--violeta));
  color: #fff; font-family: var(--fonte-display); font-weight: 800;
  font-size: 1.3rem; border-radius: 12px; margin-bottom: 18px;
}
.v-passo h3 { font-family: var(--fonte-display); font-weight: 700; font-size: 1.2rem; margin-bottom: 8px; }
.v-passo p { color: var(--grafite); font-size: 0.96rem; }

/* Modelos */
.v-modelos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}
.v-modelo {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.18s;
}
.v-modelo:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20,18,31,0.1); }
.v-modelo-thumb {
  height: 140px;
  display: flex; align-items: center; justify-content: center;
}
.v-linha-familia { background: linear-gradient(135deg, #FDE7F1, #FBF3E7); }
.v-linha-comercial { background: linear-gradient(135deg, #E7F3FB, #EAF7F0); }
.v-modelo-emoji { font-size: 3.4rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); }
.v-modelo-corpo { padding: 16px 18px 20px; }
.v-modelo-nome { font-family: var(--fonte-display); font-weight: 700; font-size: 1.05rem; }
.v-modelo-desc { color: var(--grafite); font-size: 0.85rem; margin-top: 4px; line-height: 1.45; }

/* Linhas Família / Comercial */
.v-linhas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.v-linha-card {
  border-radius: 18px;
  padding: 36px 32px;
  border: 1px solid var(--linha);
}
.v-linha-card-familia { background: linear-gradient(140deg, #FDE7F1, #FFF6F0); }
.v-linha-card-comercial { background: linear-gradient(140deg, #E7F3FB, #EAF7F0); }
.v-linha-card h3 { font-family: var(--fonte-display); font-weight: 700; font-size: 1.4rem; margin-bottom: 10px; }
.v-linha-card p { color: var(--grafite); margin-bottom: 20px; }
.v-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.v-tags span {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(20,18,31,0.08);
  padding: 5px 12px; border-radius: 20px;
  font-size: 0.82rem; font-weight: 500;
}

/* Preços */
.v-preco-card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 38px 34px;
  max-width: 440px; margin: 0 auto;
  position: relative;
  box-shadow: 0 20px 50px rgba(20,18,31,0.08);
}
.v-preco-linha {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 1.02rem;
}
.v-preco-linha strong { font-family: var(--fonte-display); font-size: 1.3rem; color: var(--magenta); }
.v-preco-btn { width: 100%; text-align: center; margin-top: 26px; }
/* marcas de corte no card de preço (assinatura) */
.corte-v { position: absolute; width: 12px; height: 12px; }
.corte-v.tl { top: -6px; left: -6px; border-left: 2px solid var(--magenta); border-top: 2px solid var(--magenta); }
.corte-v.tr { top: -6px; right: -6px; border-right: 2px solid var(--magenta); border-top: 2px solid var(--magenta); }
.corte-v.bl { bottom: -6px; left: -6px; border-left: 2px solid var(--magenta); border-bottom: 2px solid var(--magenta); }
.corte-v.br { bottom: -6px; right: -6px; border-right: 2px solid var(--magenta); border-bottom: 2px solid var(--magenta); }

/* CTA final */
.v-cta {
  text-align: center;
  padding: 90px 6vw;
  background: linear-gradient(140deg, var(--violeta), var(--magenta));
  color: #fff;
}
.v-cta h2 { font-family: var(--fonte-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.02em; }
.v-cta p { font-size: 1.15rem; margin: 14px 0 32px; opacity: 0.95; }

/* Rodapé */
.v-rodape {
  text-align: center;
  padding: 50px 6vw;
  background: var(--tinta);
  color: #B4B2C0;
}
.v-rodape .v-marca { color: #fff; justify-content: center; margin-bottom: 10px; }
.v-rodape p { font-size: 0.9rem; }
.v-rodape-links { display: flex; gap: 20px; justify-content: center; margin-top: 18px; }
.v-rodape-links a { color: #B4B2C0; text-decoration: none; font-size: 0.9rem; }
.v-rodape-links a:hover { color: #fff; }

/* ---------------- Responsivo ---------------- */
@media (max-width: 880px) {
  .v-nav { display: none; }
  .v-hero { grid-template-columns: 1fr; gap: 40px; padding: 44px 6vw 60px; }
  .v-hero-album { order: -1; }
  .v-album-capa { max-width: 300px; transform: rotate(-1deg); }
  .v-passos, .v-linhas { grid-template-columns: 1fr; }
  .v-secao { padding: 56px 6vw; }
}
@media (max-width: 520px) {
  .v-topo { gap: 14px; padding: 14px 5vw; }
  .v-topo-acoes .v-btn-ghost { display: none; }
  .v-hero-nums { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-fig { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
}