/* ============================================================
   Estúdio Malice — Home
   ============================================================ */

/* 1 · Hero */
.hero { padding-top: calc(var(--nav-height) + var(--space-xl)); padding-bottom: var(--space-xl); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); align-items: center; }
.hero-copy h1 { font-size: var(--text-hero); margin-bottom: var(--space-md); max-width: 14ch; }
.hero-badges { display: flex; align-items: center; gap: 0.9rem; margin-top: var(--space-lg); font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); }
.hero-badges img { width: 64px; height: 64px; object-fit: contain; }
.hero-visual { position: relative; }
.hero-img-main { aspect-ratio: 3 / 4; box-shadow: 0 40px 90px -40px rgba(43, 35, 32, 0.4); }
.hero-img-off {
  position: absolute;
  bottom: -12%;
  left: -18%;
  width: 52%;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--porcelain);
  box-shadow: 0 30px 60px -30px rgba(43, 35, 32, 0.45);
}

/* 2 · Números */
.numbers { padding-block: var(--space-xl); }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); text-align: center; }
.number-big { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--rose-deep); display: block; line-height: 1; }
.number-item p { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.5rem; }
.number-item .stars { font-size: 0.75rem; display: block; }

/* 3 · Manifesto */
.manifesto-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); align-items: center; }
.manifesto-img { aspect-ratio: 3 / 4; max-width: 440px; transform: rotate(-2deg); border: 8px solid var(--white-warm); box-shadow: 0 30px 70px -30px rgba(43, 35, 32, 0.35); }
.manifesto-copy p + p { margin-top: var(--space-sm); }
.manifesto-copy .link-underline { display: inline-block; margin-top: var(--space-md); }

/* 4 · Ensaios (rows editoriais) */
.services-list { margin-top: var(--space-lg); display: grid; }
.service-row {
  display: grid;
  grid-template-columns: 80px 1fr 300px 60px;
  gap: var(--space-md);
  align-items: center;
  text-decoration: none;
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(201, 138, 125, 0.25);
  transition: background var(--duration-fast) ease;
}
.service-row:last-child { border-bottom: 1px solid rgba(201, 138, 125, 0.25); }
.service-index { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--rose); }
.service-info h3 { font-size: var(--text-xl); margin-bottom: 0.5rem; transition: color var(--duration-fast) ease; }
.service-info p { color: var(--ink-soft); max-width: 52ch; font-size: 0.98rem; }
.service-img { aspect-ratio: 4 / 3; opacity: 0.92; transition: opacity var(--duration-fast) ease; }
.service-arrow { font-size: 1.6rem; color: var(--rose); transition: transform var(--duration-fast) var(--ease-out-expo); }
.service-row:hover .service-info h3 { color: var(--rose-deep); }
.service-row:hover .service-img { opacity: 1; }
.service-row:hover .service-arrow { transform: translateX(8px); }

/* 6 · Por que */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-top: var(--space-lg); max-width: 980px; }
.why-card {
  background: var(--white-warm);
  border-radius: var(--radius-card);
  padding: 2.2rem;
  border: 1px solid rgba(201, 138, 125, 0.14);
}
.why-card-offset { transform: translateY(28px); }
.why-num { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--gold); display: block; margin-bottom: 0.8rem; }
.why-card h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.why-card p { color: var(--ink-soft); font-size: 0.96rem; }

/* 7 · 28 dias */
.urgency { overflow: hidden; }
.urgency-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xl); align-items: center; }
.urgency-number {
  font-family: var(--font-display);
  font-size: var(--text-giant);
  font-weight: 600;
  font-style: italic;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rose-soft);
  user-select: none;
}

/* 8 · Galeria */
.gallery-grid {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.g-tall { aspect-ratio: 3 / 4; }
.g-wide { aspect-ratio: 4 / 3; align-self: end; }
.g-down { transform: translateY(2.4rem); }

/* 9 · Passos */
.steps-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  counter-reset: step;
}
.steps-list li { position: relative; padding-top: 1rem; border-top: 2px solid rgba(201, 138, 125, 0.35); }
.step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--rose);
  line-height: 1;
  display: block;
  margin-bottom: 0.7rem;
}
.steps-list h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.steps-list p { font-size: 0.92rem; color: var(--ink-soft); }

/* 10 · Sobre teaser */
.about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-xl); align-items: center; }
.about-img { aspect-ratio: 3 / 4; max-width: 460px; justify-self: end; box-shadow: 0 34px 80px -36px rgba(43, 35, 32, 0.4); }
.about-copy p + p { margin-top: var(--space-sm); }
.about-copy .btn { margin-top: var(--space-md); }

/* 11 · Bastidores */
.backstage-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: center; }
.backstage-video {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-img);
  justify-self: center;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6);
}

/* 12 · Depoimentos */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.testimonials-grid .quote-card:nth-child(2) { transform: translateY(24px); }

/* 13 · Estúdio teaser */
.studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.studio-imgs { position: relative; min-height: 480px; }
.studio-img-a { position: absolute; top: 0; left: 0; width: 78%; aspect-ratio: 4 / 3; }
.studio-img-b {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 46%;
  aspect-ratio: 3 / 4;
  border: 6px solid var(--blush);
  box-shadow: 0 26px 60px -26px rgba(43, 35, 32, 0.4);
}
.studio-list { list-style: none; display: grid; gap: 0.9rem; margin-block: var(--space-md); }
.studio-list li { padding-left: 1.6rem; position: relative; color: var(--ink-soft); }
.studio-list li::before { content: "✦"; position: absolute; left: 0; color: var(--rose); font-size: 0.8rem; top: 0.3rem; }

/* 14 · FAQ título centrado */
.faq .section-title { margin-bottom: var(--space-lg); }

/* 15 · CTA final */
.cta-final { padding-block: var(--space-section); }

/* ---- responsivo ---- */
@media (max-width: 1024px) {
  .hero-grid, .manifesto-grid, .about-grid, .backstage-grid, .studio-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; }
  .urgency-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .steps-list { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 620px; }
  .testimonials-grid .quote-card:nth-child(2) { transform: none; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .about-img { justify-self: start; }
}
@media (max-width: 768px) {
  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-sm); }
  .service-row { grid-template-columns: 1fr; gap: var(--space-sm); }
  .service-img { max-width: 420px; }
  .service-arrow { display: none; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card-offset { transform: none; }
  .steps-list { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .g-down { transform: none; }
  .studio-imgs { min-height: 0; }
  .studio-img-a { position: static; width: 100%; }
  .studio-img-b { display: none; }
  .manifesto-img { transform: none; }
  .hero-img-off { display: none; }
}