/* ------------------------------------------------------------------
   sections · composição de cada seção (mobile primeiro)
   ------------------------------------------------------------------ */
[data-theme] { background: var(--bg); color: var(--fg); }

.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.section-kicker { display: block; }

/* ==================================================================
   01 · HERO · a lupa
   ================================================================== */
.hero { position: relative; }
.hero__pin {
  position: relative; height: 100svh; min-height: 600px; overflow: hidden;
  background: var(--creme);
}

/* foto: no celular ocupa a metade de cima, abaixo da nav */
.hero__photo {
  position: absolute; left: 0; right: 0; top: 4.4rem; height: calc(52svh - 4.4rem); margin: 0;
  overflow: hidden; background: var(--creme-2);
  touch-action: pan-y;
}
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: blur(var(--blur, 0px)); transform: scale(var(--sc, 1));
  will-change: filter, transform;
}

.hero__copy {
  position: absolute; left: var(--margin); right: var(--margin);
  top: calc(52svh + 1.1rem); bottom: calc(1.25rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: flex-start;
}
.hero__kicker { margin-bottom: .7rem; }
.hero__title { font-size: clamp(2.6rem, 11.6vw, 3.6rem); line-height: .94; letter-spacing: -.02em; }
.hero__line { display: block; }
.hero__lede { margin-top: .9rem; font-size: .98rem; line-height: 1.45; color: var(--fg-soft); max-width: 32rem; text-wrap: pretty; }
.hero__actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; }

/* a lupa: camada do tamanho da hero inteira, recortada em círculo */
.lens {
  position: absolute; inset: 0; pointer-events: none;
  clip-path: circle(0px at 50% 50%);
}
.lens__view { position: absolute; inset: 0; background-repeat: no-repeat; background-color: var(--cacau-2); }
.lens__shade { position: absolute; inset: 0; background: var(--cacau); opacity: 0; }

.lens-ring {
  position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none;
  will-change: transform, width, height;
}
/* o anel se desenha por uma máscara cônica (--draw 0 → 360deg), a partir do topo.
   Tracejado com pathLength falha no Chrome junto com non-scaling-stroke. */
.lens-ring svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  -webkit-mask: conic-gradient(#000 var(--draw, 360deg), transparent 0);
  mask: conic-gradient(#000 var(--draw, 360deg), transparent 0);
}
.lens-ring circle {
  fill: none; stroke: var(--creme); stroke-width: 1.6; vector-effect: non-scaling-stroke;
  /* contorno fino cacau por trás, para o anel não sumir sobre o fundo claro */
  filter: drop-shadow(0 0 .5px rgba(42, 25, 17, .55));
}
.lens-ring__label {
  position: absolute; left: 50%; top: calc(100% + .55rem); transform: translateX(-50%);
  font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: var(--creme); white-space: nowrap;
  padding: .12rem .45rem; background: rgba(42, 25, 17, .55);
}

.hero__hint { position: absolute; left: var(--margin); top: calc(52svh - 2.2rem); pointer-events: none; }
.hero__hint span { display: inline-block; color: var(--creme); background: rgba(42, 25, 17, .55); padding: .3rem .6rem; }

/* a citação que aparece quando a lupa vira a tela inteira */
.hero__zoom { display: none; }
.js .hero__zoom {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center;
  padding: 5rem var(--margin); text-align: center; color: var(--creme);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.hero__zoom-kicker { color: var(--mel-claro); }
.hero__quote {
  margin-top: 1.4rem; max-width: 18ch;
  font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 5.6rem); line-height: 1.02; letter-spacing: -.015em;
  text-wrap: balance;
}
.hero__sign { margin-top: 1.6rem; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--mel-claro); }

/* estados iniciais (só com JS) */
.js .hero__line, .js .hero__kicker, .js .hero__lede, .js .hero__actions, .js .hero__hint span { opacity: 0; }
.js .hero__photo { opacity: 0; }

/* sem movimento: tudo à vista, sem zoom (a citação aparece na seção seguinte) */
.hero--static .hero__line, .hero--static .hero__kicker, .hero--static .hero__lede,
.hero--static .hero__actions, .hero--static .hero__photo { opacity: 1 !important; }
.hero--static .hero__zoom { display: none !important; }
.hero--static .hero__img { --blur: 0px !important; --sc: 1 !important; }

/* sem GSAP a lupa não existe: esconde a dica. Com movimento reduzido ela funciona, parada */
html:not(.js) .hero__hint { display: none; }
.reduced .hero__hint span { opacity: 1; }

/* tablet em pé: mais foto e título maior, para a abertura ocupar a tela */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 800px) {
  .hero__photo { height: calc(58svh - 4.4rem); }
  .hero__copy { top: calc(58svh + 1.6rem); }
  .hero__hint { top: calc(58svh - 2.5rem); }
  .hero__title { font-size: clamp(3.6rem, 9vw, 5.2rem); }
  .hero__lede { font-size: var(--fs-lede); max-width: 34rem; }
}

@media (max-height: 700px) and (max-width: 899px) {
  .hero__photo { height: calc(46svh - 4.4rem); }
  .hero__copy { top: calc(46svh + .9rem); }
  .hero__hint { top: calc(46svh - 2.2rem); }
  .hero__lede { display: none; }
}

@media (min-width: 900px) {
  .hero__pin { min-height: 640px; }
  .hero__photo { top: 4.9rem; bottom: 0; left: auto; right: 0; width: 56vw; height: auto; touch-action: auto; }
  .hero__copy {
    left: var(--margin); right: auto; top: 0; bottom: 0; width: calc(44vw - var(--margin) - var(--gutter) * 1.5);
    justify-content: center; padding-top: 4.5rem;
  }
  .hero__kicker { margin-bottom: clamp(1.25rem, 3vh, 2rem); }
  .hero__title { font-size: clamp(3.4rem, 6.6vw, 8rem); line-height: .92; }
  .hero__lede { margin-top: clamp(1.5rem, 3.4vh, 2.25rem); font-size: var(--fs-lede); max-width: 27rem; }
  .hero__actions { margin-top: clamp(1.5rem, 3.4vh, 2.25rem); }
  .hero__hint { left: auto; right: 1.5rem; top: auto; bottom: 1.5rem; }
}

/* ==================================================================
   02 · DIFERENCIAL · os seis verbos
   ================================================================== */
.diff { padding: var(--section-gap) var(--margin); }
.diff__quote { display: none; margin-bottom: clamp(3rem, 7vw, 6rem); max-width: 22ch; font-family: var(--font-display); font-size: var(--fs-display-m); line-height: 1.05; }
html:not(.js) .diff__quote, .hero--static + .diff .diff__quote { display: block; }
.diff__lead { margin-bottom: 1.25rem; }
.verbs { border-top: 1px solid var(--fg); }
.verbs li { border-bottom: 1px solid var(--hair); }
.vb {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .5rem; row-gap: .45rem; align-items: baseline;
  padding: 1rem 0 1.15rem;
}
.vb__em { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--muted); }
.vb__word {
  font-family: var(--font-display); font-size: clamp(2.6rem, 11.5vw, 9rem); line-height: .95; letter-spacing: -.02em;
  transition: transform var(--m-med) var(--ease-editorial);
}
.vb--long .vb__word { font-size: clamp(2.2rem, 9vw, 7rem); }
.vb__note { grid-column: 2; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-soft); max-width: 26rem; }
.vb:hover .vb__word, .vb:focus-visible .vb__word { transform: translateX(.12em); }
.diff__source { margin-top: 1.5rem; }

@media (min-width: 900px) {
  .vb { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 22rem); column-gap: var(--gutter); padding: 1.1rem 0 1.25rem; }
  .vb__em { font-size: 1.6rem; }
  .vb__note { grid-column: 3; align-self: center; opacity: .72; transition: opacity var(--m-fast) var(--ease-standard); }
  .vb:hover .vb__note, .vb:focus-visible .vb__note { opacity: 1; }
}

/* abertura de cada seção: verbo + título */
.verb { margin-bottom: 1.4rem; }

/* ==================================================================
   03 · OUVIR · primeira vez
   ================================================================== */
.ouvir { padding: var(--section-gap) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
.ouvir__head { grid-column: 1 / -1; }
.ouvir__title { font-size: var(--fs-display-l); }
.ouvir__photo { grid-column: 3 / -1; margin: 0; aspect-ratio: 360 / 350; background: var(--creme-2); }
.ouvir__photo img { width: calc(512 / 360 * 100%); left: calc(-110 / 360 * 100%); top: calc(-115 / 350 * 100%); }
.steps { grid-column: 1 / -1; display: grid; gap: 2rem; counter-reset: s; }
.step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; row-gap: .35rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); }
.step__no { grid-row: span 2; font-family: var(--font-display); font-style: italic; font-size: 3rem; line-height: .8; color: var(--mel); }
.step__name { font-family: var(--font-display); font-size: var(--fs-display-s); line-height: 1.05; }
.step__text { color: var(--fg-soft); max-width: 30rem; }

@media (min-width: 900px) {
  .ouvir__head { grid-column: 1 / 8; }
  .ouvir__photo { grid-column: 9 / 13; grid-row: 1 / 3; align-self: start; }
  .steps { grid-column: 1 / 8; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); row-gap: 2.5rem; }
}

/* ==================================================================
   04 · ACOLHER · o espaço
   ================================================================== */
.acolher { padding: var(--section-gap) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
.acolher__head { grid-column: 1 / -1; }
.acolher__title { font-size: var(--fs-display-l); }
/* no celular a foto do espaço fica mais baixa (logo e encosto da poltrona) e deslocada à direita */
.acolher__photo { grid-column: 2 / -1; margin: 0; }
.acolher__crop { aspect-ratio: 430 / 600; background: var(--creme); }
/* recorte medido na foto em 900 px de largura: começa em x 470, y 440 (abaixo dos balões) */
.acolher__crop img { width: calc(900 / 430 * 100%); left: calc(-470 / 430 * 100%); top: calc(-440 / 600 * 100%); }
@media (min-width: 900px) {
  .acolher__crop { aspect-ratio: 430 / 700; }
  .acolher__crop img { top: calc(-440 / 700 * 100%); }
}
.acolher__photo figcaption { margin-top: .7rem; }
.acolher__side { grid-column: 1 / -1; display: grid; gap: 2.5rem; align-content: start; }
.score { display: flex; align-items: flex-end; gap: .9rem; }
.score__n { font-family: var(--font-display); font-size: clamp(5rem, 12vw, 9rem); line-height: .8; letter-spacing: -.03em; }
.score__t { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); padding-bottom: .5rem; }
.review { display: grid; gap: .9rem; padding-top: 1.5rem; border-top: 1px solid var(--hair); }
.review p { font-family: var(--font-display); font-size: var(--fs-display-s); line-height: 1.15; text-wrap: pretty; }

@media (min-width: 900px) {
  .acolher__head { grid-column: 7 / 13; grid-row: 1; align-self: end; }
  .acolher__photo { grid-column: 1 / 6; grid-row: 1 / 3; max-height: none; }
  .acolher__side { grid-column: 7 / 12; grid-row: 2; }
}

/* ==================================================================
   05 · ESTUDAR · formação
   ================================================================== */
.estudar { padding: var(--section-gap) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
.estudar__head { grid-column: 1 / -1; }
.estudar__title { font-size: var(--fs-display-l); max-width: 16ch; }
.estudar__aula { grid-column: 1 / 8; margin: 0; }
.estudar__crop { aspect-ratio: 240 / 390; background: var(--creme-2); }
.estudar__crop img { width: calc(360 / 240 * 100%); left: calc(-120 / 240 * 100%); top: calc(-170 / 390 * 100%); }
.estudar__aula figcaption { display: grid; gap: .3rem; margin-top: .8rem; font-size: var(--fs-small); line-height: 1.45; color: var(--fg-soft); max-width: 22rem; }
.estudar__aula figcaption .label { color: var(--accent); }
.facts { grid-column: 1 / -1; border-top: 1px solid var(--fg); }
.facts > div { display: grid; gap: .45rem; padding: 1.1rem 0 1.25rem; border-bottom: 1px solid var(--hair); }
.facts dd { font-size: var(--fs-lede); line-height: 1.4; }
.estudar__mesa { grid-column: 6 / -1; margin: 0; aspect-ratio: 360 / 380; background: var(--creme-2); }
.estudar__mesa img { width: 100%; left: 0; top: calc(-70 / 380 * 100%); }
.estudar__quote { grid-column: 1 / -1; font-family: var(--font-display); font-size: var(--fs-display-s); line-height: 1.2; max-width: 30ch; }
.negra { grid-column: 1 / -1; margin-top: 2rem; padding-top: 2.5rem; border-top: 1px solid var(--hair); display: grid; gap: 1.25rem; }
.negra p { font-family: var(--font-display); font-size: var(--fs-display-m); line-height: 1.08; max-width: 24ch; text-wrap: balance; }

@media (min-width: 900px) {
  .estudar__head { grid-column: 1 / 10; }
  .estudar__aula { grid-column: 1 / 5; grid-row: 2 / 4; align-self: start; }
  .facts { grid-column: 6 / 13; grid-row: 2; }
  .estudar__quote { grid-column: 6 / 10; grid-row: 3; align-self: center; }
  .estudar__mesa { grid-column: 10 / 13; grid-row: 3; }
  .negra { grid-column: 2 / 12; grid-row: 4; margin-top: 3rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: end; }
  .negra footer { padding-bottom: .6rem; }
}

/* ==================================================================
   06 · PERSONALIZAR · painéis
   ================================================================== */
.pers { padding: var(--section-gap) var(--margin); }
.pers__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.pers__head .verb, .pers__title, .pers__lede { grid-column: 1 / -1; }
.pers__title { font-size: var(--fs-display-l); }
.pers__lede { max-width: 34rem; }

.panels { display: grid; gap: 3.5rem; }
.panel { display: grid; gap: 1.25rem; outline-offset: 6px; }
.panel__img { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--creme-2); }
/* fotos de banco ganham um tom quente para conversar com o creme; as reais ficam como são */
.panel__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74) sepia(.12) contrast(1.02); transition: transform 1.4s var(--ease-standard); }
#corporal .panel__img img { object-position: 50% 62%; }
#bem-estar .panel__img img { object-position: 36% 50%; }
.panel__body { display: grid; gap: .9rem; align-content: start; }
.panel__no { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--mel); line-height: 1; }
.panel__name { font-size: var(--fs-display-m); }
.panel__list { border-top: 1px solid var(--hair); }
.panel__list li { display: grid; gap: .2rem; padding: .75rem 0 .8rem; border-bottom: 1px solid var(--hair); }
.panel__list strong { font-weight: 600; }
.panel__list span { font-size: var(--fs-small); color: var(--fg-soft); line-height: 1.5; }
.panel .link--arrow { justify-self: start; margin-top: .4rem; }

@media (min-width: 900px) {
  .pers__head .verb { grid-column: 1 / -1; }
  .pers__title { grid-column: 1 / 8; }
  .pers__lede { grid-column: 8 / 13; align-self: end; }

  .panels { display: flex; gap: var(--gutter); height: clamp(640px, 86svh, 860px); }
  .panel {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; cursor: pointer;
    transition: flex-grow 1s var(--ease-editorial);
  }
  .panel.is-active { flex-grow: 2.35; cursor: default; }
  .panel__img { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
  .panel:hover .panel__img img { transform: scale(1.03); }
  .panel__body { flex: 0 0 auto; height: 21rem; overflow: hidden; grid-template-rows: auto auto 1fr; }
  .panel__head { display: flex; align-items: baseline; gap: .8rem; }
  .panel__list, .panel .link--arrow {
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .35s var(--ease-standard), transform .6s var(--ease-standard), visibility 0s linear .35s;
  }
  .panel.is-active .panel__list, .panel.is-active .link--arrow {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .6s var(--ease-standard) .35s, transform .9s var(--ease-reveal) .35s, visibility 0s;
  }
  .panel__list { min-width: 26rem; }
  .panel:not(.is-active) .panel__name { color: var(--fg-soft); }
}

/* ==================================================================
   07 · RESULTADOS · não é magia
   ================================================================== */
.res { padding: var(--section-gap) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
.res__head { grid-column: 1 / -1; }
.res__title { font-size: var(--fs-display-xl); line-height: .9; margin-top: .8rem; }

.ba { grid-column: 1 / -1; margin: 0; }
/* O post tem as duas fotos empilhadas (640 × 640). Medido no canvas: o depois está 12 px à
   esquerda e 325 px abaixo do antes, e as legendas manuscritas ocupam x < 106.
   Janela de 518 × 315: antes em x 122–640, y 0–315; depois em x 110–628, y 325–640. */
.ba__frame { position: relative; aspect-ratio: 518 / 315; overflow: hidden; background: var(--creme-2); touch-action: pan-y; }
.ba__layer {
  position: absolute; inset: 0; background-image: url("../img/real-ba-nariz.jpg"); background-repeat: no-repeat;
  background-size: calc(640 / 518 * 100%) auto;
}
.ba__layer--antes { background-position: 100% 0%; }
.ba__layer--depois { background-position: calc(110 / 122 * 100%) 100%; clip-path: circle(var(--br, 0px) at var(--bx, 50%) var(--by, 50%)); }
.ba__ring {
  position: absolute; left: 0; top: 0; width: calc(var(--br, 0px) * 2); height: calc(var(--br, 0px) * 2);
  transform: translate(calc(var(--bx, 0px) - var(--br, 0px)), calc(var(--by, 0px) - var(--br, 0px)));
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--creme), 0 0 0 1px rgba(42, 25, 17, .35);
  pointer-events: none;
}
.ba__tag { position: absolute; left: .8rem; top: .7rem; color: var(--creme); background: rgba(42, 25, 17, .5); padding: .25rem .5rem; }
.ba__cap { display: grid; gap: .6rem; margin-top: 1rem; justify-items: start; }
.ba__line { font-family: var(--font-display); font-size: var(--fs-display-s); line-height: 1.1; }
.ba__toggle {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--fg);
  font-size: .9rem; font-weight: 600;
}
.ba__toggle[aria-pressed="true"] { background: var(--cacau); color: var(--creme); }
.ba__how { display: none; }

.body { grid-column: 1 / -1; margin: 0; }
.body img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--creme-2); }
.body__cap { display: grid; gap: .6rem; margin-top: 1rem; }
.ba-labels { display: grid; grid-template-columns: 1fr 1fr; }
.ba-labels span + span { padding-left: .9rem; border-left: 1px solid var(--hair); }

.res__quote { grid-column: 1 / -1; display: grid; gap: .9rem; }
.res__quote p { font-family: var(--font-display); font-size: var(--fs-display-m); line-height: 1.05; max-width: 22ch; }
.res__note { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--muted); max-width: 40rem; border-top: 1px solid var(--hair); padding-top: 1.25rem; }

@media (hover: hover) and (pointer: fine) {
  .ba__frame { cursor: crosshair; }
  .ba__toggle { display: none; }
  .ba__how { display: block; }
}
@media (min-width: 900px) {
  .res__title { grid-column: 1 / -1; }
  .ba { grid-column: 1 / 8; }
  .body { grid-column: 9 / 13; align-self: end; }
  .res__quote { grid-column: 2 / 10; }
  .res__note { grid-column: 2 / 10; }
}

/* ==================================================================
   08 · EXPLICAR · caderno
   ================================================================== */
.dicas { padding: var(--section-gap) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
.dicas__head { grid-column: 1 / -1; }
.dicas__title { font-size: var(--fs-display-l); }
.tips { grid-column: 1 / -1; border-top: 1px solid var(--fg); }
.tip { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 1rem; padding: 1.4rem 0 1.5rem; border-bottom: 1px solid var(--hair); }
.tip__no { font-family: var(--font-display); font-style: italic; font-size: 2.4rem; line-height: .85; color: var(--mel-escuro); }
.tip__text { font-family: var(--font-display); font-size: clamp(1.45rem, 2.3vw, 2.4rem); line-height: 1.18; text-wrap: pretty; }
.dicas__review { grid-column: 1 / -1; display: grid; gap: .9rem; }
.dicas__review p { font-size: var(--fs-lede); line-height: 1.5; max-width: 40rem; color: var(--fg-soft); }

@media (min-width: 900px) {
  .dicas__head { grid-column: 1 / 9; }
  /* a margem do caderno: numerais de um lado da linha mel, texto do outro */
  .tips { grid-column: 2 / 12; }
  .tip { grid-template-columns: 6rem minmax(0, 1fr); column-gap: 2rem; position: relative; }
  .tip::before { content: ""; position: absolute; left: 6.9rem; top: 0; bottom: 0; width: 1px; background: rgba(197, 139, 43, .55); }
  .tip__no { text-align: right; padding-right: .4rem; }
  .dicas__review { grid-column: 4 / 11; }
}

/* ==================================================================
   09 · VIVER · quem sou
   ================================================================== */
.viver { padding: var(--section-gap) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; }
.viver .verb { grid-column: 1 / -1; margin-bottom: 0; }
.viver__name { grid-column: 1 / -1; font-size: var(--fs-display-xl); line-height: .88; }
.viver__photo { grid-column: 1 / -1; margin: 0; aspect-ratio: 599 / 505; background: var(--creme-2); }
.viver__photo img { width: 100%; left: 0; top: 0; }
.viver__text { grid-column: 1 / -1; display: grid; gap: 1.5rem; align-content: start; }
.viver__lede { font-family: var(--font-display); font-size: var(--fs-display-m); line-height: 1.08; text-wrap: pretty; }
.viver__body { color: var(--fg-soft); max-width: 32rem; }
.viver__aniv { display: grid; gap: .4rem; padding: 1.1rem 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-family: var(--font-display); font-style: italic; font-size: var(--fs-display-s); line-height: 1.15; max-width: 30rem; }
.viver__text .link--arrow { justify-self: start; }

@media (min-width: 900px) {
  .viver__photo { grid-column: 1 / 6; }
  .viver__text { grid-column: 7 / 12; padding-top: 1rem; }
}

/* ==================================================================
   10 · AGENDAR
   ================================================================== */
.cta { padding: var(--section-gap) var(--margin) clamp(5rem, 9vw, 8rem); border-top: 1px solid var(--hair); }
.cta__title { font-size: clamp(2.4rem, 6.2vw, 7.4rem); line-height: .98; max-width: 17ch; }
.cta__row { margin-top: clamp(3rem, 6vw, 5rem); display: grid; gap: 2.5rem; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.cta__info { display: grid; gap: 1.5rem; border-top: 1px solid var(--fg); padding-top: 1.5rem; }
.cta__info div { display: grid; gap: .45rem; }
.cta__info dd { line-height: 1.55; }

@media (min-width: 900px) {
  .cta__title { max-width: 20ch; }
  .cta__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
  .cta__actions { padding-top: 1.5rem; }
  .cta__info { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
  .cta__info div { align-content: start; }
}

/* ==================================================================
   FOOTER
   ================================================================== */
.footer { padding: clamp(4rem, 8vw, 6.5rem) var(--margin) 2rem; }
.footer__grid { display: grid; gap: 3rem; }
.footer__mono {
  display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 1px solid var(--mel);
  font-family: var(--font-display); font-size: 1.9rem; letter-spacing: -.05em; color: var(--mel-claro); margin-bottom: 1.5rem;
}
.footer__name { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .92; letter-spacing: -.015em; }
.footer__name em { color: var(--mel-claro); }
.footer__tag { margin-top: 1rem; }
.footer__info { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem var(--gutter); }
.footer__info dt { margin-bottom: .8rem; }
.footer__info dd { font-size: var(--fs-small); line-height: 1.7; color: var(--fg-soft); }
.footer__base { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--hair); display: grid; gap: .75rem; }
.footer__demo { font-size: .78rem; line-height: 1.5; color: var(--muted); max-width: 52rem; }

@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 5fr 7fr; align-items: end; }
  .footer__info { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__base { grid-template-columns: 1fr auto; align-items: start; }
}