/* =====================================================================
   ATELIER SERENO — Odontologia estética (pólo LEVE + GENIAL)
   Off-white quente + verde sereno + dourado contido.
   Fraunces editorial leve + Inter humanista. O ar é o luxo.
   Mobile-first; desktop com layout próprio. Motion contido (só
   opacity/transform), tudo respeitando prefers-reduced-motion.
   ===================================================================== */

/* ----------------------------------------------------------------- TOKENS */
:root {
  /* Paleta */
  --offwhite:   #FBF9F5;  /* fundo base, marfim quente */
  --sand:       #F1ECE3;  /* seções alternadas, cards */
  --sand-deep:  #E7E0D3;  /* bordas suaves */
  --petrol:     #1F2A2E;  /* texto principal (no lugar do preto) */
  --teal:       #5B8C86;  /* cor de marca */
  --teal-deep:  #3F6E68;  /* hover de marca, contraste AA */
  --mint:       #A9CBC4;  /* hover, halos, tags */
  --mint-soft:  #DCEAE6;  /* fundos de tag muito suaves */
  --gold:       #C9A86A;  /* acento premium, parcimônia */
  --sage:       #5A6968;  /* texto secundário (escurecido p/ AA) */

  /* Tipografia */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1.00vw, 2.30rem);
  --step-3:  clamp(2.05rem, 1.70rem + 1.75vw, 3.40rem);
  --step-4:  clamp(2.60rem, 2.00rem + 3.00vw, 4.80rem);

  /* Ritmo */
  --gut: clamp(1.25rem, 0.80rem + 2.20vw, 2.50rem);   /* margens laterais */
  --sec: clamp(4.50rem, 3.00rem + 7.00vw, 9.50rem);   /* respiro vertical entre seções */
  --radius: clamp(1rem, 0.60rem + 1.60vw, 1.75rem);
  --maxw: 1240px;
  --read: 38rem;   /* ~608px, leitura confortável */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--petrol);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3.5rem;
  z-index: 200;
  background: var(--petrol);
  color: var(--offwhite);
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* ----------------------------------------------------------------- TIPOGRAFIA */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}
em {
  font-style: italic;
  color: var(--teal-deep);
}

/* Kicker — etiqueta editorial com ponto e fio dourado */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.25rem;
}
.kicker__dot {
  width: 1.6rem;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}
.kicker--light { color: var(--mint); }
.kicker--light .kicker__dot { background: var(--gold); }

/* ----------------------------------------------------------------- LAYOUT BASE */
main { display: block; }

section {
  padding-inline: var(--gut);
  padding-block: var(--sec);
  max-width: var(--maxw);
  margin-inline: auto;
}

/* ----------------------------------------------------------------- TOPBAR */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gut);
  background: color-mix(in srgb, var(--offwhite) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--sand-deep);
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.topbar__mark {
  width: 2rem;
  height: 2rem;
  color: var(--teal);
  flex-shrink: 0;
}
.topbar__mark svg { width: 100%; height: 100%; }
.topbar__words { display: flex; flex-direction: column; line-height: 1.15; }
.topbar__name {
  font-family: var(--display);
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}
.topbar__role {
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sage);
}
.topbar__nav { display: flex; align-items: center; gap: 1.75rem; }
.topbar__nav > a:not(.topbar__cta) { display: none; }
.topbar__cta {
  font-size: var(--step--1);
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--teal);
  border-radius: 2rem;
  color: var(--teal-deep);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.topbar__cta:hover { background: var(--teal); color: var(--offwhite); }

/* ----------------------------------------------------------------- WHATSAPP BTN */
.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--teal-deep); /* AA: branco sobre teal-deep = 5.48:1 */
  color: var(--offwhite);
  font-weight: 500;
  padding: 0.95rem 1.5rem;
  border-radius: 2.5rem;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.wa-btn:hover { background: #356159; transform: translateY(-3px); }
.wa-btn__icon { width: 1.35rem; height: 1.35rem; fill: currentColor; flex-shrink: 0; }

.ghost-link {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  color: var(--teal-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ghost-link:hover { border-color: var(--teal); }

/* ===================================================================
   1) HERO
   =================================================================== */
.hero {
  padding-top: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1rem + 6vw, 3.5rem);
}
.hero__title {
  font-size: var(--step-4);
  font-weight: 300;
  margin-block: 0.5rem 1.5rem;
}
.hero__title em { font-weight: 400; }
.hero__lead {
  max-width: var(--read);
  color: var(--petrol);
  font-size: var(--step-1);
  line-height: 1.55;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 2rem;
}
.hero__frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  box-shadow: 0 30px 60px -40px rgba(31, 42, 46, 0.45);
}
.hero__frame img { width: 100%; height: auto; object-fit: cover; }
.hero__cap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  font-style: italic;
  font-family: var(--display);
  color: var(--sage);
  font-size: var(--step-0);
}
.hero__cap-line { width: 2rem; height: 1px; background: var(--gold); display: inline-block; }

/* ===================================================================
   2) MANIFESTO
   =================================================================== */
.manifesto { text-align: left; }
.manifesto__decl {
  font-size: var(--step-3);
  font-weight: 300;
  max-width: 22ch;
  margin-bottom: 2rem;
}
.manifesto__decl span { display: block; }
.manifesto__turn { color: var(--teal-deep); }
.manifesto__accent { font-style: italic; color: var(--teal-deep); }
.manifesto__body {
  max-width: var(--read);
  display: grid;
  gap: 1.1rem;
  color: var(--petrol);
}

/* ===================================================================
   3) TRATAMENTOS
   =================================================================== */
.trats { background: var(--sand); border-radius: var(--radius); max-width: var(--maxw); }
.trats__head { max-width: var(--read); margin-bottom: clamp(2rem, 1rem + 4vw, 3.5rem); }
.trats__title { font-size: var(--step-3); font-weight: 300; margin-bottom: 1rem; }
.trats__lead { color: var(--sage); }

.trats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 2.5rem);
}
.trat {
  background: var(--offwhite);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--sand-deep);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.trat:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -36px rgba(31, 42, 46, 0.4);
}
.trat__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); }
.trat__media img { width: 100%; height: 100%; object-fit: cover; }
.trat__body { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.trat__index {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}
.trat__name {
  font-size: var(--step-2);
  font-weight: 400;
  margin: 0.35rem 0 0.6rem;
}
.trat__for {
  font-style: italic;
  font-family: var(--display);
  color: var(--teal-deep);
  margin-bottom: 0.75rem;
}
.trat__desc { color: var(--petrol); font-size: var(--step-0); }

/* ===================================================================
   4) PLANEJAMENTO DIGITAL
   =================================================================== */
.plan { display: flex; flex-direction: column; gap: clamp(2rem, 1rem + 5vw, 3.5rem); }
.plan__media { position: relative; }
.plan__frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  box-shadow: 0 30px 60px -42px rgba(31, 42, 46, 0.45);
}
.plan__frame img { width: 100%; height: auto; object-fit: cover; }
.plan__seal {
  position: absolute;
  bottom: -0.75rem;
  right: 1rem;
  background: var(--petrol);
  color: var(--offwhite);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--step-0);
  padding: 0.55rem 1.1rem;
  border-radius: 2rem;
  border: 1px solid var(--gold);
}
.plan__title { font-size: var(--step-3); font-weight: 300; margin-bottom: 1rem; }
.plan__lead { max-width: var(--read); color: var(--petrol); margin-bottom: 2.25rem; }

.plan__steps { display: grid; gap: 1.75rem; max-width: var(--read); }
.plan-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.plan-step > div { min-width: 0; }
.plan-step__n {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--teal);
  color: var(--teal-deep);
  font-family: var(--display);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.plan-step h3 {
  font-family: var(--body);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.plan-step p { color: var(--sage); }

/* ===================================================================
   5) AMBIENTE — mosaico
   =================================================================== */
.ambiente__head { max-width: var(--read); margin-bottom: clamp(2rem, 1rem + 4vw, 3rem); }
.ambiente__title { font-size: var(--step-3); font-weight: 300; margin-bottom: 1rem; }
.ambiente__lead { color: var(--sage); }

.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 0.4rem + 1.5vw, 1.25rem); }
.mosaic__item {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
}
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; }
.mosaic__item--wide { grid-column: 1 / -1; }
.mosaic__item { aspect-ratio: 4 / 5; }
.mosaic__item--wide { aspect-ratio: 16 / 10; }

/* ===================================================================
   6) EQUIPE
   =================================================================== */
.equipe { display: flex; flex-direction: column; gap: clamp(2rem, 1rem + 5vw, 3.5rem); }
.equipe__frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  box-shadow: 0 30px 60px -42px rgba(31, 42, 46, 0.45);
}
.equipe__frame img { width: 100%; height: auto; object-fit: cover; }
.equipe__title { font-size: var(--step-3); font-weight: 300; margin-bottom: 1.5rem; }
.equipe__body { max-width: var(--read); color: var(--petrol); margin-bottom: 1.1rem; }
.equipe__creds {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand-deep);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--sage);
}
.equipe__creds li { display: flex; align-items: center; gap: 0.6rem; }
.equipe__creds li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* ===================================================================
   7) PROVAS / TRANSFORMAÇÕES
   =================================================================== */
.provas { background: var(--petrol); color: var(--offwhite); border-radius: var(--radius); max-width: var(--maxw); }
.provas .kicker { color: var(--mint); }
.provas__head { max-width: var(--read); margin-bottom: clamp(2rem, 1rem + 4vw, 3.5rem); }
.provas__title { font-size: var(--step-3); font-weight: 300; margin-bottom: 1rem; color: var(--offwhite); }
.provas__title em { color: var(--mint); }
.provas__lead { color: var(--mint); }

.provas__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 1rem + 3vw, 2.75rem); }
.prova {
  background: color-mix(in srgb, var(--offwhite) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--mint) 22%, transparent);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2rem);
}
.prova__portrait {
  border-radius: calc(var(--radius) - 0.4rem);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 1.5rem;
  background: color-mix(in srgb, var(--offwhite) 10%, transparent);
}
.prova__portrait img { width: 100%; height: 100%; object-fit: cover; }
.prova__quote {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--offwhite);
  margin-bottom: 1.25rem;
}
.prova__quote em { color: var(--mint); font-style: italic; }
.prova__meta { display: flex; flex-direction: column; gap: 0.2rem; }
.prova__meta strong { font-weight: 600; }
.prova__meta span { color: var(--mint); font-size: var(--step--1); }

/* ===================================================================
   8) JORNADA
   =================================================================== */
.jornada__head { max-width: var(--read); margin-bottom: clamp(2rem, 1rem + 4vw, 3.5rem); }
.jornada__title { font-size: var(--step-3); font-weight: 300; }

.jornada__steps { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 2vw, 2rem); }
.jstep {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--sand);
  border-radius: var(--radius);
  border-top: 2px solid var(--gold);
}
.jstep__n {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--teal-deep);
  display: block;
  margin-bottom: 0.75rem;
}
.jstep__name {
  font-family: var(--body);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.jstep__desc { color: var(--sage); font-size: var(--step-0); }

/* ===================================================================
   9) FAQ
   =================================================================== */
.faq__head { max-width: var(--read); margin-bottom: clamp(2rem, 1rem + 4vw, 3rem); }
.faq__title { font-size: var(--step-3); font-weight: 300; }

.faq__list { max-width: 48rem; display: grid; gap: 0.75rem; }
.qa {
  background: var(--sand);
  border: 1px solid var(--sand-deep);
  border-radius: calc(var(--radius) - 0.4rem);
  overflow: hidden;
}
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
}
.qa summary::-webkit-details-marker { display: none; }
.qa__q {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--petrol);
}
.qa__icon {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.qa__icon::before, .qa__icon::after {
  content: "";
  position: absolute;
  background: var(--teal-deep);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.qa__icon::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.qa__icon::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.qa[open] .qa__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.qa__a {
  padding: 0 clamp(1.1rem, 0.8rem + 1vw, 1.5rem) clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
}
.qa__a p { color: var(--petrol); max-width: var(--read); }

/* ===================================================================
   10) CONVITE
   =================================================================== */
.convite {
  background: var(--petrol);
  color: var(--offwhite);
  border-radius: var(--radius);
  max-width: var(--maxw);
  text-align: left;
}
.convite__title {
  font-size: var(--step-4);
  font-weight: 300;
  color: var(--offwhite);
  margin-bottom: 1.5rem;
}
.convite__title em { color: var(--mint); }
.convite__body { max-width: var(--read); color: var(--mint); margin-bottom: 2.25rem; }
.convite__cta { margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem); }

.convite__info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  padding-top: 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--mint) 25%, transparent);
}
.info-block { min-width: 0; }
.info-block__label {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 0.5rem;
}
.info-block p { color: var(--offwhite); }
.info-block a { color: var(--mint); border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); }
.info-block a:hover { border-color: var(--mint); }

.convite__map {
  margin-top: 2.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--offwhite) 8%, transparent);
}
.convite__map img { width: 100%; height: auto; object-fit: cover; opacity: 0.92; }

/* ===================================================================
   FOOTER
   =================================================================== */
.foot {
  /* clearance extra no rodapé p/ a barra fixa de WhatsApp não cobrir o texto (mobile) */
  padding: 2.5rem var(--gut) calc(6rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
  color: var(--sage);
  font-size: var(--step--1);
  border-top: 1px solid var(--sand-deep);
}
.foot__by a { color: var(--teal-deep); border-bottom: 1px solid transparent; }
.foot__by a:hover { border-color: var(--teal); }

/* ===================================================================
   WHATSAPP STICKY (mobile) — barra no rodapé
   =================================================================== */
.wa-sticky {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--teal-deep); /* AA: branco sobre teal-deep = 5.48:1 */
  color: var(--offwhite);
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border-radius: 2.5rem;
  box-shadow: 0 14px 30px -12px rgba(31, 42, 46, 0.55);
}
.wa-sticky__icon { width: 1.3rem; height: 1.3rem; fill: currentColor; }

/* ===================================================================
   REVEAL (motion contido) — estado inicial; JS adiciona .is-in
   =================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ===================================================================
   DESKTOP — layout próprio (não esticado)
   =================================================================== */
@media (min-width: 760px) {
  .topbar__nav > a:not(.topbar__cta) {
    display: inline-flex;
    font-size: var(--step--1);
    color: var(--petrol);
    border-bottom: 1px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .topbar__nav > a:not(.topbar__cta):hover { color: var(--teal-deep); border-color: var(--teal); }

  /* esconde a barra sticky de WhatsApp no desktop */
  .wa-sticky { display: none; }

  /* sem barra fixa no desktop: rodapé não precisa da folga extra */
  .foot { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }

  /* HERO assimétrico: texto coluna estreita, foto sangrando à direita */
  .hero {
    flex-direction: row;
    align-items: center;
    gap: clamp(2rem, 0rem + 5vw, 5rem);
  }
  .hero__text { flex: 1 1 46%; min-width: 0; }
  .hero__media { flex: 1 1 54%; min-width: 0; transform: translateY(-2%); }
  .hero__actions { flex-direction: row; align-items: center; flex-wrap: wrap; }

  /* TRATAMENTOS — grade 2 col com alturas alternadas (ritmo editorial) */
  .trats__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .trat--tall { margin-top: clamp(2rem, 0rem + 4vw, 4rem); }
  .trat--tall .trat__media { aspect-ratio: 4 / 5; }

  /* MOSAICO — larguras desiguais */
  .mosaic {
    grid-template-columns: 1.55fr 1fr;
    grid-auto-rows: 1fr;
  }
  .mosaic__item--wide { grid-column: auto; }
  .mosaic__item:nth-child(1) { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 11; }
  .mosaic__item:nth-child(2) { grid-column: 2; grid-row: 1; aspect-ratio: auto; }
  .mosaic__item:nth-child(3) { grid-column: 1; grid-row: 2; aspect-ratio: auto; }
  .mosaic__item:nth-child(4) { grid-column: 2; grid-row: 2; aspect-ratio: 16 / 11; }

  /* PROVAS — primeira maior */
  .provas__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .prova--lg { grid-row: span 2; }
  .prova--lg .prova__portrait { aspect-ratio: 4 / 5; }
  .prova__portrait { aspect-ratio: 5 / 4; }

  /* JORNADA — 2 colunas */
  .jornada__steps { grid-template-columns: 1fr 1fr; }

  /* CONVITE info — 3 colunas */
  .convite__info { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

@media (min-width: 1040px) {
  /* HERO — coluna de texto ainda mais estreita, mais ar */
  .hero__text { flex: 0 1 42%; }
  .hero__media { flex: 1 1 58%; }

  /* PLANEJAMENTO — split 50/50 com imagem sticky enquanto texto rola */
  .plan {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(3rem, 1rem + 5vw, 6rem);
  }
  .plan__media {
    flex: 1 1 50%;
    min-width: 0;
    position: sticky;
    top: clamp(5rem, 4rem + 4vw, 7rem);
  }
  .plan__text { flex: 1 1 50%; min-width: 0; }

  /* EQUIPE — split foto à esquerda, texto à direita */
  .equipe {
    flex-direction: row;
    align-items: center;
    gap: clamp(3rem, 1rem + 5vw, 6rem);
  }
  .equipe__media { flex: 0 1 44%; min-width: 0; }
  .equipe__text { flex: 1 1 56%; min-width: 0; }

  /* Manifesto: declaração maior, mais ar */
  .manifesto__decl { font-size: var(--step-4); }
}

/* ===================================================================
   MOTION CONTIDO — respiração da CTA final (desktop apenas)
   =================================================================== */
@media (min-width: 760px) and (hover: hover) {
  .wa-btn--breathe { animation: breathe 4.5s var(--ease) infinite; }
  @keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }
  .wa-btn--breathe:hover { animation: none; }
}

/* ===================================================================
   PREFERS-REDUCED-MOTION — conteúdo visível imediatamente
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wa-btn--breathe { animation: none !important; }
  .hero__media { transform: none !important; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* fallback se JS desligado: garante visibilidade */
.no-js .reveal { opacity: 1; transform: none; }