/* ------------------------------------------------------------
   Cores tiradas do consultório da Thamyres: a parede azul, a
   jaqueta jeans, a parede verde-oliva, o sofá de veludo
   azul-petróleo e o rosa da almofada bordada.
------------------------------------------------------------ */
:root {
  --azul-parede: #C7DBE1;
  --azul-nevoa: #E5EEF0;
  --jeans: #2B4A80;
  --jeans-escuro: #1D3561;
  --tinta: #1C2333;
  --tinta-suave: #4B5468;
  --papel: #FFFCF7;
  --oliva: #737040;
  --petroleo: #1F5158;
  --petroleo-escuro: #163C42;
  --rosa: #C25B74;
  --rosa-claro: #F7D6DD;
  --verde-linha: #5E7A45;
  --verde-folha: #6F8C50;
  --ocre: #E2A944;

  /* linhas do bordado (cada faixa colorida troca as suas) */
  --cor-linha: var(--verde-linha);
  --cor-folha: var(--verde-folha);
  --cor-flor: var(--rosa);
  --cor-petala: var(--rosa-claro);

  --titulo: "Young Serif", Georgia, serif;
  --texto: "Figtree", system-ui, sans-serif;
  --mao: "Nanum Pen Script", "Segoe Print", cursive;

  --largura: 68rem;
  --margem: max(1.25rem, calc((100% - var(--largura)) / 2));

  /* desenhos pequenos usados como fundo */
  --img-flor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Cg fill='%23F7D6DD' stroke='%23C25B74' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath id='p' d='M0-2.2C-3.2-5.5-3-10.5 0-11.5 3-10.5 3.2-5.5 0-2.2Z'/%3E%3Cuse href='%23p' transform='rotate(72)'/%3E%3Cuse href='%23p' transform='rotate(144)'/%3E%3Cuse href='%23p' transform='rotate(216)'/%3E%3Cuse href='%23p' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='2.7' fill='%23E2A944'/%3E%3Ccircle cx='-1.5' cy='-1.2' r='1' fill='%23C0841F'/%3E%3Ccircle cx='1.4' cy='1.2' r='.9' fill='%23C0841F'/%3E%3C/svg%3E");
  --img-botao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 28 28'%3E%3Cpath d='M0 13V3' fill='none' stroke='%235E7A45' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='2.6 2.2'/%3E%3Cpath d='M0 3C-5.5 0-4.5-8.5 0-11 4.5-8.5 5.5 0 0 3Z' fill='%23F7D6DD' stroke='%23C25B74' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M0 3C-3.5 2.5-5.5-.5-5-4M0 3C3.5 2.5 5.5-.5 5-4' fill='none' stroke='%235E7A45' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --img-sublinhado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C30 2 52 9 80 5s56-3 84 1c12 2 24 0 34-2' fill='none' stroke='%23C25B74' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --img-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22'%3E%3Cpath d='M42 15C32 6 20 5 5 10M5 10l7-6M5 10l8 4' fill='none' stroke='%232B4A80' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --img-circulo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M31 6C17 5 7 15 7 29s10 25 24 24c13-1 22-11 21-25C51 15 41 6 28 8' fill='none' stroke='%23C25B74' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --img-ponto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='4'%3E%3Cline x1='2' y1='2' x2='9' y2='2' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --img-caule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='150' viewBox='0 0 44 150'%3E%3Cpath d='M22 0C32 25 32 50 22 75S12 125 22 150' fill='none' stroke='%235E7A45' stroke-width='2' stroke-linecap='round' stroke-dasharray='5 4' pathLength='153'/%3E%3Cg fill='%236F8C50'%3E%3Cpath transform='translate(30 38) rotate(-35)' d='M0 0C-2-2-8-3-8 3-8 9-2 12 0 16 2 12 8 9 8 3 8-3 2-2 0 0Z'/%3E%3Cpath transform='translate(14.5 112) rotate(35)' d='M0 0C-2-2-8-3-8 3-8 9-2 12 0 16 2 12 8 9 8 3 8-3 2-2 0 0Z'/%3E%3C/g%3E%3Cpath transform='translate(30 38) rotate(-35)' d='M0 2V13' stroke='%23A9BE85' stroke-width='.9' stroke-linecap='round'/%3E%3Cpath transform='translate(14.5 112) rotate(35)' d='M0 2V13' stroke='%23A9BE85' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --img-vaso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 96'%3E%3Ccircle cx='38' cy='6' r='3.6' fill='none' stroke='%239C6E45' stroke-width='1.6'/%3E%3Cpath d='M38 10 15 53M38 10V53M38 10 61 53' fill='none' stroke='%23B98E5E' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='3 2.4'/%3E%3Cg fill='%239C6E45'%3E%3Ccircle cx='27.5' cy='30' r='2'/%3E%3Ccircle cx='38' cy='30' r='2'/%3E%3Ccircle cx='48.5' cy='30' r='2'/%3E%3C/g%3E%3Cpath d='M24 55C14 62 11 77 16 96' fill='none' stroke='%235E7A45' stroke-width='2' stroke-linecap='round' stroke-dasharray='5 4'/%3E%3Cpath d='M12 52H64V60H12Z' fill='%232F6B72'/%3E%3Cpath d='M15 60H61L56 88Q55 92 51 92H25Q21 92 20 88Z' fill='%231F5158'/%3E%3Cpath d='M18 74H58' stroke='%23F7D6DD' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='3 2.6'/%3E%3Cg fill='%236F8C50'%3E%3Cpath transform='translate(24 54) rotate(30)' d='M0 0C-2-2-8-3-8 3-8 9-2 12 0 16 2 12 8 9 8 3 8-3 2-2 0 0Z'/%3E%3Cpath transform='translate(52 53) rotate(-28)' d='M0 0C-2-2-8-3-8 3-8 9-2 12 0 16 2 12 8 9 8 3 8-3 2-2 0 0Z'/%3E%3Cpath transform='translate(13 72) rotate(20)' d='M0 0C-2-2-8-3-8 3-8 9-2 12 0 16 2 12 8 9 8 3 8-3 2-2 0 0Z'/%3E%3C/g%3E%3C/svg%3E");
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--texto);
  -webkit-font-smoothing: antialiased;
}

main,
.rodape { overflow-x: clip; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--jeans);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
}
a:hover { color: var(--rosa); }

:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--rosa-claro); }

.pular {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 50;
  padding: .6rem 1rem;
  border-radius: .5rem;
  background: var(--jeans);
  color: #fff;
}
.pular:focus { top: 1rem; color: #fff; }

.moldes { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Topo ---------- */
.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1rem;
  padding: 1.1rem var(--margem) .4rem;
  background: var(--azul-parede);
}
.marca { display: grid; line-height: 1.15; color: var(--tinta); text-decoration: none; }
.marca:hover { color: var(--tinta); }
.marca-nome { font-family: var(--titulo); font-size: 1.15rem; }
.marca-sub { font-size: .8rem; color: var(--tinta-suave); }
.topo nav { order: 3; width: 100%; }
.topo ul { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; margin: 0; padding: 0; list-style: none; }
.topo nav a { color: var(--tinta); font-size: .95rem; text-decoration: none; }
.topo nav a:hover { color: var(--jeans); text-decoration: underline; }

/* ---------- Botões com cara de adesivo ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.35rem;
  border-radius: .9rem;
  background: var(--jeans);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 0 0 4px #fff, 0 12px 22px -10px rgb(29 53 97 / .6);
  transform: rotate(-1.5deg);
  transition: transform .25s ease, background-color .25s ease;
}
.botao:hover { background: var(--jeans-escuro); color: #fff; transform: rotate(0) translateY(-2px); }
.botao--pequeno {
  padding: .5rem .95rem;
  font-size: .9rem;
  box-shadow: 0 0 0 3px #fff, 0 8px 14px -8px rgb(29 53 97 / .6);
}
.botao--claro { background: var(--rosa-claro); color: var(--tinta); }
.botao--claro:hover { background: #fff; color: var(--tinta); }
.icone { flex: none; width: 1.25em; height: 1.25em; fill: currentColor; }

/* ---------- Costura nas bordas das faixas coloridas ---------- */
.costura { position: relative; }
.costura::before,
.costura::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--cor-costura, rgb(43 74 128 / .35));
  -webkit-mask: var(--img-ponto) repeat-x 0 0 / 14px 4px;
  mask: var(--img-ponto) repeat-x 0 0 / 14px 4px;
  pointer-events: none;
}
.costura::before { top: .8rem; }
.costura::after { bottom: .8rem; }
.abertura::before { content: none; }

/* ---------- Bordado (ramos, folhas e flores) ---------- */
.ramo,
.trepadeira { color: var(--cor-linha); overflow: visible; }

.ponto {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--espessura, 1.8);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--ponto, 4.5 3);
}
.traco {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset var(--dur, 1s) ease-out var(--d, 0s);
}
.revela {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur, 1.6s) cubic-bezier(.45, .05, .35, 1) var(--d, 0s);
}
.folha { color: var(--cor-folha); }
.flor { color: var(--cor-flor); --petala: var(--cor-petala); }
.petalas {
  fill: var(--petala, var(--rosa-claro));
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

html.js .brota {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform .6s cubic-bezier(.3, 1.5, .55, 1) var(--d, 0s);
}
html.js .flor.brota { transform-origin: 50% 50%; transform: scale(0) rotate(-70deg); }
html.js .bordando .brota,
html.js .brota.aberta { transform: none; }

/* ---------- Trepadeira lateral ---------- */
.trepadeira {
  display: none;
  position: fixed;
  left: 10px;
  top: 0;
  z-index: 5;
  width: 46px;
  height: 100vh;
  pointer-events: none;
  --ponto: 5 4;
  --espessura: 2;
}
.trepadeira .revela { transition: none; }
html.js .trepadeira .brota { transition-delay: 0s; }

/* ---------- Abertura ---------- */
.abertura {
  display: grid;
  gap: 2.2rem;
  padding: 2rem var(--margem) 5.5rem;
  background: var(--azul-parede);
  --cor-costura: rgb(43 74 128 / .4);
}
.abertura h1 {
  margin: 0 0 .4em;
  font-size: clamp(2.9rem, 1.5rem + 6.2vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.02em;
}
.abertura hgroup p { margin: 0; font-size: 1.15rem; color: var(--tinta-suave); }
.abertura-texto { max-width: 34ch; margin: 0; font-size: 1.2rem; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin: .4rem 0 0; }

/* --foto-l: largura da foto; a altura é 1,5× (retrato 2:3) */
.foto-principal { --foto-l: min(22rem, 76vw); position: relative; width: var(--foto-l); margin: 1.5rem auto 0; }
.foto-principal img,
.foto-online img,
.foto-sofa img {
  border: 7px solid #fff;
  border-radius: 3px;
  box-shadow: 0 26px 40px -24px rgb(28 35 51 / .6);
}
.ramo-foto {
  position: absolute;
  left: -14%;
  top: calc(var(--foto-l) * -.06);
  width: 40%;
  height: auto;
  --espessura: 1.7;
  --ponto: 4 2.8;
}
.seta { display: none; }
.foto-principal figcaption {
  margin-top: 1rem;
  font-family: var(--mao);
  font-size: 1.65rem;
  line-height: 1.05;
  color: var(--jeans);
  transform: rotate(-1.5deg);
}
.foto-principal cite {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.adesivo {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  border: 4px solid #fff;
  box-shadow: 0 8px 16px -8px rgb(28 35 51 / .5);
}
.adesivo-redondo {
  right: -1.5rem;
  top: calc(var(--foto-l) * 1.5 - 8.8rem);
  width: 6.6rem;
  aspect-ratio: 1;
  padding: .8rem;
  border-radius: 50%;
  background: var(--jeans);
  color: #fff;
  font-family: var(--titulo);
  font-size: .98rem;
  line-height: 1.08;
  transform: rotate(10deg);
}
.adesivo-coracao {
  position: absolute;
  right: 4.6rem;
  top: calc(var(--foto-l) * 1.5 - 3.2rem);
  width: 2.6rem;
  fill: #C2372F;
  stroke: #fff;
  stroke-width: 3.5;
  paint-order: stroke;
  filter: drop-shadow(0 4px 4px rgb(28 35 51 / .3));
  transform: rotate(-14deg);
}

/* ---------- A abordagem ---------- */
.abordagem { padding: clamp(4.5rem, 10vw, 8rem) var(--margem); }
.abordagem > p { max-width: 62ch; }

.bastidor { max-width: 24rem; margin: 2.5rem auto; }
.bastidor svg { display: block; width: 100%; height: auto; }
.bastidor figcaption {
  margin-top: .4rem;
  font-family: var(--mao);
  font-size: 1.6rem;
  line-height: 1.1;
  text-align: center;
  color: var(--tinta-suave);
  transform: rotate(-2deg);
}
.batata { fill: #E4C59E; }
.olho { fill: #8C6440; }
.terra { color: #9C6E45; }
.ocre { color: #D39A2F; }
.luz { color: #E8BE5C; --ponto: 3 4; --espessura: 1.4; }
.verde { color: var(--verde-linha); }

.abordagem > h3 { margin-top: 1rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.atitudes { display: grid; gap: 1.6rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.atitudes li { display: grid; gap: .5rem; padding-top: 1.4rem; border-top: 1.5px dashed rgb(94 122 69 / .45); }
.atitudes p { max-width: 46ch; margin: 0; font-size: 1.15rem; }
.atitudes em {
  padding-bottom: .12em;
  background: var(--img-sublinhado) left bottom / 100% .5em no-repeat;
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.atitudes small {
  justify-self: start;
  padding-left: 2.8rem;
  background: var(--img-seta) left 55% / 2.3rem auto no-repeat;
  font-family: var(--mao);
  font-size: 1.65rem;
  line-height: 1;
  color: var(--jeans);
  transform: rotate(-2deg);
}

/* ---------- Citação ---------- */
.citacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: clamp(4.5rem, 9vw, 6.5rem) var(--margem) clamp(3.5rem, 7vw, 5rem);
  background: var(--oliva);
  color: #FBF6EA;
  text-align: center;
  --cor-costura: rgb(251 246 234 / .45);
  --cor-linha: #EAE5C3;
  --cor-folha: #B9C281;
  --cor-flor: #F3C1CB;
  --cor-petala: #FCE9ED;
}
.citacao blockquote { margin: 0; }
.citacao blockquote p {
  max-width: 24ch;
  margin: 0 auto;
  font-family: var(--titulo);
  font-size: clamp(1.7rem, 1.1rem + 2.7vw, 2.9rem);
  line-height: 1.22;
  text-wrap: balance;
}
.citacao blockquote p::before { content: "“"; }
.citacao blockquote p::after { content: "”"; }
.citacao figcaption { margin-top: 1.6rem; font-size: 1rem; }
.citacao .nota {
  display: inline-block;
  margin-left: .3rem;
  font-family: var(--mao);
  font-size: 1.6rem;
  color: var(--rosa-claro);
  transform: rotate(-2deg);
}
.ramo-faixa {
  order: 2;
  display: block;
  width: 100%;
  max-width: 62rem;
  height: clamp(6.5rem, 12vw, 8.5rem);
  margin-top: 1.5rem;
  --espessura: 2.2;
  --ponto: 6 4.5;
}

/* ---------- Quando a terapia pode ajudar ---------- */
.quando { padding: clamp(4.5rem, 10vw, 8rem) var(--margem); }
.quando > header p { max-width: 40ch; margin: 0; font-size: 1.1rem; color: var(--tinta-suave); }

/* jiboia num vaso de macramê: o caule desce conforme a lista aparece */
.motivos {
  --caule-x: .6rem;
  position: relative;
  display: grid;
  gap: 2rem;
  margin: 7.5rem 0 0;
  padding: 1.2rem 0 0 4.6rem;
  list-style: none;
}
.motivos::before {
  content: "";
  position: absolute;
  left: var(--caule-x);
  top: 0;
  width: 44px;
  height: calc(var(--p, 1) * 100%);
  background: var(--img-caule) repeat-y 0 0 / 44px 150px;
}
.motivos::after {
  content: "";
  position: absolute;
  left: calc(var(--caule-x) + 6px);
  top: -96px;
  width: 76px;
  height: 96px;
  background: var(--img-vaso) no-repeat center / contain;
}
html.js .motivos { --p: 0; }
.motivos li { position: relative; }
.motivos li::before {
  content: "";
  position: absolute;
  left: calc(var(--caule-x) + 22px - 4.6rem - 15px);
  top: .1rem;
  width: 30px;
  height: 30px;
  background: var(--img-flor) no-repeat center / contain;
}
html.js .motivos li::before {
  transform: scale(0) rotate(-60deg);
  transition: transform .6s cubic-bezier(.3, 1.5, .55, 1);
}
html.js .motivos li.aberta::before { transform: none; }
.motivos h3 { margin: 0 0 .2rem; font-size: 1.35rem; }
.motivos p { max-width: 44ch; margin: 0; color: var(--tinta-suave); }
.motivos li:last-child h3 {
  font-family: var(--mao);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--jeans);
}

/* ---------- Como funciona ---------- */
.como {
  padding: clamp(4.5rem, 10vw, 8rem) var(--margem);
  background: var(--azul-nevoa);
  --cor-costura: rgb(43 74 128 / .3);
}
.passos {
  display: grid;
  gap: 1.8rem;
  margin: 2rem 0 2.5rem;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}
.passos li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: 1.1rem;
  counter-increment: passo;
}
.passos li::before {
  content: counter(passo);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  background: var(--img-circulo) no-repeat center / contain;
  font-family: var(--titulo);
  font-size: 1.6rem;
  color: var(--jeans);
}
.passos li > * { grid-column: 2; }
.passos h3 { margin: .45rem 0 .25rem; }
.passos p { max-width: 48ch; margin: 0; color: var(--tinta-suave); }

.ficha {
  display: grid;
  gap: 1rem 2rem;
  margin: 0;
  padding-top: 1.6rem;
  border-top: 1.5px dashed rgb(43 74 128 / .35);
}
.ficha dt { font-family: var(--mao); font-size: 1.55rem; line-height: 1; color: var(--rosa); }
.ficha dd { margin: .2rem 0 0; }

.foto-online { width: min(20rem, 76vw); margin: 3rem auto 0; }
.foto-online img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; transform: rotate(2deg); }
.foto-online figcaption {
  margin-top: 1rem;
  font-family: var(--mao);
  font-size: 1.6rem;
  line-height: 1.05;
  text-align: center;
  color: var(--jeans);
  transform: rotate(-1.5deg);
}

/* ---------- Sobre mim ---------- */
.sobre { padding: clamp(4.5rem, 10vw, 8rem) var(--margem); }
.sobre p { max-width: 58ch; }
.foto-sofa { position: relative; width: min(21rem, 76vw); margin: 0 auto 3rem; }
.foto-sofa img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%; transform: rotate(-2deg); }
.adesivo-nome {
  top: -1.1rem;
  right: -1.4rem;
  padding: .45rem .9rem .3rem;
  border-radius: .7rem;
  background: var(--rosa-claro);
  color: var(--tinta);
  font-family: var(--mao);
  font-size: 1.6rem;
  line-height: 1;
  transform: rotate(7deg);
}
.assinatura {
  margin-top: 1.2rem;
  font-family: var(--mao);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--jeans);
  transform: rotate(-4deg);
  transform-origin: left;
}

/* ---------- Dúvidas ---------- */
.duvidas { padding: clamp(4.5rem, 10vw, 7rem) max(1.25rem, calc((100% - 46rem) / 2)); }
.duvidas h2 { margin-bottom: 1.4rem; }
.duvidas details { border-top: 1.5px dashed rgb(94 122 69 / .45); }
.duvidas details:last-of-type { border-bottom: 1.5px dashed rgb(94 122 69 / .45); }
.duvidas summary {
  position: relative;
  padding: 1.15rem 3rem 1.15rem 0;
  font-family: var(--titulo);
  font-size: 1.2rem;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after {
  content: "";
  position: absolute;
  right: .2rem;
  top: 50%;
  width: 30px;
  height: 30px;
  translate: 0 -50%;
  background: var(--img-botao) no-repeat center / contain;
  transition: transform .4s ease;
}
.duvidas details[open] summary::after { background-image: var(--img-flor); transform: rotate(40deg); }
.duvidas summary:hover { color: var(--jeans); }
.duvidas details p { max-width: 60ch; margin: 0 0 1.3rem; color: var(--tinta-suave); }

/* ---------- Contato ---------- */
.contato {
  padding: clamp(5rem, 11vw, 8rem) var(--margem) 11rem;
  background: var(--petroleo);
  color: #EEF3F1;
  text-align: center;
  --cor-costura: rgb(238 243 241 / .35);
  --cor-linha: #CFDDB0;
  --cor-folha: #93B07C;
  --cor-flor: #F2B8C4;
  --cor-petala: #FCE7EC;
}
.contato h2 { color: #fff; }
.contato > p { max-width: 42ch; margin-inline: auto; }
.contato > p:has(.botao) { margin-top: 2rem; }
.contato address { margin-top: 2.6rem; font-style: normal; }
.contato address ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contato address span {
  display: block;
  font-family: var(--mao);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rosa-claro);
}
.contato address a { color: #fff; }
.contato address a:hover { color: var(--rosa-claro); }
.ramo-canto {
  position: absolute;
  bottom: 0;
  width: clamp(100px, 16vw, 210px);
  height: auto;
  --espessura: 2;
  --ponto: 5 3.8;
}
.ramo-canto--esquerda { left: 0; }
.ramo-canto--direita { right: 0; transform: scaleX(-1); }

/* ---------- Rodapé ---------- */
.rodape {
  padding: 2.6rem var(--margem);
  background: var(--petroleo-escuro);
  color: rgb(238 243 241 / .78);
  font-size: .92rem;
  text-align: center;
}
.rodape p { margin: .35rem 0; }
.rodape strong { color: #fff; font-weight: 600; }
.rodape a { color: #fff; }
.rodape .rodape-aviso {
  max-width: 62ch;
  margin: 1.3rem auto;
  padding-top: 1.3rem;
  border-top: 1px solid rgb(238 243 241 / .16);
}

/* ---------- WhatsApp flutuante e aviso de cookies ---------- */
.whatsapp-flutuante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 3px #fff, 0 10px 20px -8px rgb(0 0 0 / .45);
  transform: rotate(-8deg);
  transition: transform .25s ease, bottom .3s ease;
}
.whatsapp-flutuante:hover { transform: rotate(0) scale(1.06); }
.whatsapp-flutuante svg { width: 1.8rem; height: 1.8rem; fill: #fff; }
body:has(.aviso-cookies[open]) .whatsapp-flutuante { bottom: 10rem; }

.aviso-cookies {
  position: fixed;
  inset: auto .75rem .75rem;
  z-index: 40;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 0;
  border-radius: 1rem;
  background: #fff;
  color: var(--tinta);
  box-shadow: 0 0 0 3px var(--azul-parede), 0 20px 40px -18px rgb(28 35 51 / .45);
}
.aviso-cookies p { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.5; }
.aviso-cookies form { display: flex; justify-content: flex-end; gap: .6rem; }
.aviso-cookies button {
  padding: .55rem 1.1rem;
  border: 1.5px solid var(--jeans);
  border-radius: .7rem;
  background: transparent;
  color: var(--jeans);
  font: 600 .92rem var(--texto);
  cursor: pointer;
}
.aviso-cookies button[value="aceito"] { background: var(--jeans); color: #fff; }

@keyframes surgir { from { opacity: 0; translate: 0 8px; } }

/* ---------- Telas médias ---------- */
@media (min-width: 48rem) {
  .ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aviso-cookies { inset: auto auto 1.2rem 1.2rem; width: 25rem; }
  body:has(.aviso-cookies[open]) .whatsapp-flutuante { bottom: 1.1rem; }
}

@media (min-width: 52rem) {
  .topo { column-gap: 2rem; padding-bottom: 1.1rem; }
  .marca-nome { font-size: 1.3rem; }
  .topo nav { order: 0; width: auto; margin-left: auto; }
}

/* ---------- Telas largas ---------- */
@media (min-width: 60rem) {
  .abertura {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(4rem, 8vw, 7rem);
    row-gap: 0;
    padding-block: 3rem 7rem;
  }
  .abertura > * { grid-column: 2; }
  .abertura hgroup { margin-top: 10rem; }
  .abertura-texto { margin-top: 1.6rem; }
  .acoes { margin-top: 2.2rem; }
  .foto-principal {
    grid-column: 1;
    grid-row: 1 / span 4;
    --foto-l: 26rem;
    margin: 0;
    transform: rotate(-1.2deg);
  }
  .seta {
    display: block;
    position: absolute;
    left: 70%;
    top: 0;
    width: 40%;
    height: auto;
    color: var(--jeans);
    overflow: visible;
  }
  .foto-principal figcaption {
    position: absolute;
    left: calc(100% + 1.3rem);
    top: .1rem;
    width: 15rem;
    margin: 0;
    font-size: 1.8rem;
    transform: rotate(-3deg);
  }
  html.js .foto-principal figcaption { animation: surgir .8s ease-out 3s both; }

  .abordagem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    column-gap: clamp(3rem, 7vw, 6rem);
    align-items: start;
  }
  .abordagem > * { grid-column: 1; }
  .bastidor { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .abordagem > h3,
  .atitudes { grid-column: 1 / -1; }
  .abordagem > h3 { margin-top: 3.5rem; }
  .atitudes li { grid-template-columns: minmax(0, 1fr) 19rem; align-items: center; column-gap: 2rem; }

  .quando {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    column-gap: clamp(3rem, 9vw, 8rem);
    align-items: start;
  }
  .quando > header { position: sticky; top: 3rem; }
  .motivos { margin-top: 6.5rem; }

  .como {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(3rem, 8vw, 7rem);
  }
  .como > * { grid-column: 1; }
  .foto-online { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 100%; margin: 0; }

  .sobre {
    display: grid;
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    grid-template-rows: repeat(5, auto) 1fr;
    column-gap: clamp(3rem, 8vw, 7rem);
    align-items: start;
  }
  .sobre > * { grid-column: 2; }
  .foto-sofa { grid-column: 1; grid-row: 1 / span 6; width: 100%; margin: 0; }
  .sobre h2 { margin-top: 2.5rem; }

  .contato { padding-bottom: clamp(8rem, 12vw, 10rem); }
}

/* a trepadeira só aparece quando sobra margem para ela não encostar no texto */
@media (min-width: 80rem) {
  .trepadeira { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; }
  html.js .motivos { --p: 1; }
}