/*
 * Malucolândia — revisão visual e responsiva de 24/09/2026.
 * Mantém o bundle original e concentra as correções aprovadas em uma camada
 * final, carregada após o CSS principal.
 */

/* Ordem: Festas, Oficinas, Corporativos e Casamentos. */
.pillar-grid > .pillar-card:nth-child(1) { order: 1; }
.pillar-grid > .pillar-card:nth-child(2) { order: 3; }
.pillar-grid > .pillar-card:nth-child(3) { order: 2; }
.pillar-grid > .pillar-card:nth-child(4) { order: 4; }

.pillar-card { cursor: pointer; }
.pillar-card .pillar-whatsapp-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  border-radius: inherit;
}
.pillar-card .pillar-whatsapp-link:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: -5px;
}
.pillar-card .card-arrow { z-index: 6; pointer-events: none; }

/* Imagens homologadas, visíveis também antes do término da hidratação. */
.hero-artwork-link picture {
  background: #fff url("/assets/kids-day-hero-desktop-original-20260924.png") center top / 100% auto no-repeat;
}
.hero-artwork-link .hero-artwork { opacity: 0; }
html.malucolandia-updates-ready .hero-artwork-link picture { background-image: none; }
html.malucolandia-updates-ready .hero-artwork-link .hero-artwork { opacity: 1; }

.services-track > .service-card:nth-child(5) .service-image {
  background: var(--green) url("/assets/service-camarim-fashion-client-20260915.png") center / contain no-repeat;
}
.services-track > .service-card:nth-child(5) .service-image img { opacity: 0; }
html.malucolandia-updates-ready .services-track > .service-card:nth-child(5) .service-image {
  background-color: var(--green);
  background-image: none;
}
html.malucolandia-updates-ready .services-track > .service-card:nth-child(5) .service-image img { opacity: 1; }

/* Ritmo e hierarquia compartilhados em todas as seções. */
:root {
  --malu-font-family: Arial, Helvetica, sans-serif;
  --malu-section-title: clamp(44px, 5vw, 74px);
  --malu-title-weight: 900;
  --malu-body-weight: 400;
}

/*
 * Tipografia unificada: títulos fortes e textos corridos regulares.
 * A declaração explícita impede que os títulos injetados pela seção de
 * propósito herdem o peso normal definido pelo reset do bundle principal.
 */
main h2,
main h3 {
  font-family: var(--malu-font-family);
  font-style: normal;
  font-weight: var(--malu-title-weight);
}

.welcome-copy > p,
.about-copy > p,
.pillar-content > p,
.service-card > p,
.contact-copy > p:not(.kicker),
.purpose-scroll__intro-copy,
.purpose-step p,
.purpose-values span {
  font-family: var(--malu-font-family);
  font-style: normal;
  font-weight: var(--malu-body-weight);
}

.welcome-grid h2,
.section-heading h2,
.manifesto-sticky h2,
.about-copy h2,
.services-intro h2,
.reviews-heading h2,
.clients-section h2,
.contact-copy h2,
.purpose-scroll__intro h2 {
  font-size: var(--malu-section-title);
  line-height: .98;
  letter-spacing: -.05em;
}

@media (min-width: 1181px) {
  .welcome-section,
  .pillars-section,
  .about-section,
  .services-section,
  .reviews-section,
  .clients-section,
  .contact-section { padding-top: 128px; padding-bottom: 128px; }
}

/* Tablet recebe composição própria: não herda os vazios de 100/170vh. */
@media (min-width: 761px) and (max-width: 1180px) {
  :root { --malu-section-title: clamp(45px, 6.1vw, 60px); }

  .hero-scroll { padding-top: calc(clamp(190px, 55.55vw, 300px) + 12px); }

  .welcome-section,
  .pillars-section,
  .about-section,
  .reviews-section,
  .clients-section,
  .contact-section {
    padding: 84px clamp(34px, 6vw, 64px);
  }

  .welcome-section,
  .manifesto-sticky,
  .about-section,
  .reviews-section,
  .contact-section {
    padding-right: clamp(40px, 6.5vw, 76px);
    padding-left: clamp(40px, 6.5vw, 76px);
  }

  .welcome-grid,
  .manifesto-sticky > p,
  .manifesto-sticky > h2,
  .manifesto-sticky > .manifesto-tags {
    margin-right: 0;
    margin-left: 0;
  }

  .welcome-grid { grid-template-columns: 1fr; gap: 26px; }
  .welcome-copy { max-width: 700px; padding-top: 0; }
  .section-heading { max-width: 760px; margin-bottom: 46px; }

  .pillar-grid { gap: 18px; }
  .pillar-card { min-height: 480px; }
  .pillar-card h3 { font-size: 29px; }

  .manifesto-section { height: auto; }
  .manifesto-sticky {
    min-height: auto;
    padding: 96px clamp(34px, 6vw, 64px);
    position: relative;
  }
  .manifesto-sticky h2 { max-width: 780px; }
  .manifesto-tags { margin-top: 34px; }

  .about-section {
    min-height: auto;
    grid-template-columns: minmax(250px, .86fr) minmax(0, 1.14fr);
    gap: clamp(46px, 7vw, 74px);
  }
  .about-year { right: -24px; }

  .services-section { padding: 84px 0; }
  .services-intro { margin-bottom: 46px; padding: 0 clamp(34px, 6vw, 64px); }
  .services-intro > div { max-width: 680px; }
  .services-track { padding-right: clamp(34px, 6vw, 64px); padding-left: clamp(34px, 6vw, 64px); }

  .reviews-heading { align-items: start; gap: 30px; margin-bottom: 46px; }
  .featured-review { min-height: 470px; padding: 60px 46px 42px; }

  .clients-section { padding-right: 0; padding-left: 0; }
  .clients-section h2 { margin-bottom: 50px; padding-inline: clamp(34px, 6vw, 64px); }

  .contact-section { grid-template-columns: 1fr; gap: 48px; }
  .contact-copy { max-width: 720px; }

  [data-reveal] { transform: translateY(24px); }
}

@media (min-width: 761px) and (max-width: 880px) {
  .about-section { grid-template-columns: 1fr; }
  .about-copy { max-width: 680px; }
  .about-media { width: min(620px, 92%); }
}

@media (max-width: 760px) {
  :root { --malu-section-title: clamp(39px, 11vw, 46px); }

  .hero-artwork-link picture {
    background-image: url("/assets/kids-day-hero-mobile-client-20260915.png");
  }

  .welcome-section,
  .pillars-section,
  .about-section,
  .reviews-section,
  .clients-section,
  .contact-section { padding-top: 84px; padding-bottom: 84px; }

  .services-section { padding-top: 84px; padding-bottom: 84px; }
  .services-intro h2 { font-size: var(--malu-section-title); }
}

/* --------------------------------------------------------------------------
 * Missão, visão e valores — fundo claro e voo do foguete guiado pela rolagem
 * ----------------------------------------------------------------------- */
.purpose-scroll {
  --purpose-accent: var(--yellow);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(104px, 10vw, 150px) clamp(24px, 6vw, 88px);
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, #f4b4032b 0 9%, transparent 26%),
    radial-gradient(circle at 93% 74%, #b0c50226 0 12%, transparent 29%),
    #fff9ed;
}

.purpose-scroll::before,
.purpose-scroll::after {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  content: "";
  filter: blur(2px);
}
.purpose-scroll::before {
  top: 7%;
  right: -90px;
  width: 250px;
  height: 76px;
  background: #d28c3524;
  transform: rotate(-17deg);
}
.purpose-scroll::after {
  bottom: 7%;
  left: -100px;
  width: 300px;
  height: 92px;
  background: #da060a12;
  transform: rotate(14deg);
}

.purpose-scroll[data-active="missao"] { --purpose-accent: var(--yellow); }
.purpose-scroll[data-active="visao"] { --purpose-accent: var(--green); }
.purpose-scroll[data-active="valores"] { --purpose-accent: var(--red); }

.purpose-scroll__shell { width: min(1180px, 100%); margin-inline: auto; }
.purpose-scroll__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: end;
  padding-bottom: clamp(66px, 7vw, 102px);
}
.purpose-scroll__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: #d86118;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.purpose-scroll__eyebrow::before {
  width: 38px;
  height: 3px;
  border-radius: 99px;
  content: "";
  background: currentColor;
}
.purpose-scroll__intro h2 { max-width: 780px; margin: 0; color: var(--ink); }
.purpose-scroll__intro-copy {
  max-width: 450px;
  margin: 0 0 6px;
  color: #07242cbd;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.65;
}

.purpose-scroll__story {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: clamp(54px, 7vw, 104px);
  align-items: start;
}
.purpose-scroll__visual {
  position: sticky;
  top: clamp(86px, 12vh, 138px);
  min-height: 570px;
}
.purpose-scroll__stage {
  position: relative;
  width: min(100%, 470px);
  height: 570px;
  margin-inline: auto;
}
.purpose-scroll__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.purpose-scroll__path path {
  fill: none;
  stroke: #d28c3570;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 3 15;
}
.purpose-scroll__checkpoint {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid #fff9ed;
  border-radius: 50%;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 30px #07242c1c;
}
.purpose-scroll__checkpoint--one { top: 8%; left: 12%; background: var(--yellow); }
.purpose-scroll__checkpoint--two { top: 45%; right: 13%; background: var(--green); }
.purpose-scroll__checkpoint--three { bottom: 5%; left: 16%; color: #fff; background: var(--red); }

.purpose-scroll__rocket {
  position: absolute;
  z-index: 4;
  top: 4%;
  left: 25%;
  width: clamp(92px, 10vw, 132px);
  transition: top 900ms cubic-bezier(.2,.8,.2,1), left 900ms cubic-bezier(.2,.8,.2,1), transform 900ms cubic-bezier(.2,.8,.2,1);
  transform: rotate(12deg);
  filter: drop-shadow(0 18px 22px #07242c2b);
}
.purpose-scroll__rocket img {
  width: 100%;
  border-radius: 24px;
  mix-blend-mode: multiply;
}
.purpose-scroll[data-active="visao"] .purpose-scroll__rocket {
  top: 40%;
  left: 64%;
  transform: rotate(126deg);
}
.purpose-scroll[data-active="valores"] .purpose-scroll__rocket {
  top: 76%;
  left: 27%;
  transform: rotate(326deg);
}
.purpose-scroll__signature {
  position: absolute;
  top: 37%;
  left: 13%;
  width: 64%;
  padding: 28px;
  border-left: 6px solid var(--purpose-accent);
  transition: border-color 500ms ease;
}
.purpose-scroll__signature strong {
  display: block;
  font-size: clamp(31px, 3vw, 47px);
  line-height: .94;
  letter-spacing: -.045em;
}
.purpose-scroll__signature span {
  display: block;
  margin-top: 13px;
  color: #d86118;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.purpose-scroll__steps { margin-top: -5vh; }
.purpose-step {
  display: flex;
  align-items: center;
  min-height: 70vh;
  padding-block: 8vh;
}
.purpose-step__content {
  width: 100%;
  padding: clamp(30px, 4vw, 50px) 0;
  border-top: 4px solid color-mix(in srgb, var(--step-color) 34%, transparent);
  opacity: .35;
  transform: translateY(28px);
  transition: opacity 550ms ease, transform 650ms cubic-bezier(.2,.8,.2,1), border-color 500ms ease;
}
.purpose-step.is-active .purpose-step__content {
  border-color: var(--step-color);
  opacity: 1;
  transform: translateY(0);
}
.purpose-step__index {
  display: block;
  margin-bottom: 24px;
  color: #d86118;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.purpose-step h3 {
  margin: 0 0 20px;
  color: var(--ink);
  font-family: var(--malu-font-family);
  font-size: clamp(42px, 5vw, 70px);
  font-style: normal;
  font-weight: var(--malu-title-weight);
  line-height: .96;
  letter-spacing: -.05em;
}
.purpose-step p {
  max-width: 700px;
  margin: 0;
  color: #07242cd1;
  font-family: var(--malu-font-family);
  font-size: clamp(18px, 1.65vw, 22px);
  font-style: normal;
  font-weight: var(--malu-body-weight);
  line-height: 1.62;
}
.purpose-values { margin: 20px 0 0; padding: 0; list-style: none; }
.purpose-values li {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid #07242c20;
}
.purpose-values strong { color: var(--ink); font-size: 17px; }
.purpose-values span { color: #07242ca8; font-size: 15px; line-height: 1.5; }

@media (min-width: 761px) and (max-width: 1180px) {
  .purpose-scroll { padding: 92px clamp(34px, 6vw, 64px); }
  .purpose-scroll__intro { gap: 36px; padding-bottom: 62px; }
  .purpose-scroll__story { grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: clamp(34px, 5vw, 58px); }
  .purpose-scroll__visual { top: 70px; min-height: 500px; }
  .purpose-scroll__stage { height: 500px; }
  .purpose-scroll__signature { top: 35%; left: 7%; width: 78%; padding: 22px; }
  .purpose-scroll__rocket { width: 92px; }
  .purpose-step { min-height: 56vh; padding-block: 5vh; }
  .purpose-step h3 { font-size: clamp(44px, 6.2vw, 58px); }
  .purpose-step p { font-size: 18px; }
  .purpose-values li { grid-template-columns: 125px 1fr; }
}

@media (max-width: 760px) {
  .purpose-scroll { padding: 84px 20px; }
  .purpose-scroll__intro,
  .purpose-scroll__story { grid-template-columns: 1fr; }
  .purpose-scroll__intro { gap: 24px; padding-bottom: 46px; }
  .purpose-scroll__intro-copy { font-size: 16px; }
  .purpose-scroll__story { display: block; }
  .purpose-scroll__visual {
    position: sticky;
    z-index: 2;
    top: 62px;
    min-height: 360px;
    padding-top: 8px;
    background: linear-gradient(180deg, #fff9ed 0 87%, #fff9ed00 100%);
  }
  .purpose-scroll__stage { width: min(360px, 92vw); height: 350px; }
  .purpose-scroll__path { height: 420px; transform: scaleY(.66); transform-origin: top; }
  .purpose-scroll__checkpoint--one { top: 6%; }
  .purpose-scroll__checkpoint--two { top: 38%; }
  .purpose-scroll__checkpoint--three { bottom: 7%; }
  .purpose-scroll__rocket { width: 78px; }
  .purpose-scroll[data-active="visao"] .purpose-scroll__rocket { top: 34%; left: 64%; }
  .purpose-scroll[data-active="valores"] .purpose-scroll__rocket { top: 72%; }
  .purpose-scroll__signature { top: 31%; left: 12%; width: 68%; padding: 18px; }
  .purpose-scroll__signature strong { font-size: 30px; }
  .purpose-scroll__steps { position: relative; z-index: 1; margin-top: -350px; }
  .purpose-step { min-height: 100svh; padding: 410px 0 76px; }
  .purpose-step__content { padding: 30px 0; opacity: .55; }
  .purpose-step h3 { font-size: 44px; }
  .purpose-step p { font-size: 17px; }
  .purpose-values li { grid-template-columns: 1fr; gap: 5px; padding: 16px 0; }
}

/* A avaliação mantém aspas e estrelas em áreas independentes. */
.review-quote-icon {
  top: 38px;
  left: 48px;
}
.review-stars {
  position: absolute;
  top: 46px;
  right: 48px;
  margin: 0;
}
.review-content { padding-top: 76px; }

@media (max-width: 760px) {
  .review-quote-icon { top: 30px; left: 26px; }
  .review-stars { top: 38px; right: 26px; }
  .review-content { padding-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .purpose-scroll *,
  .purpose-scroll *::before,
  .purpose-scroll *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}