/* Dra. Izabella Barreto: estilo compartilhado de todas as páginas.
   Regra de movimento: só transform e opacity. Tudo que se mexe fica nos blocos
   do fim (movimento reduzido e scroll-driven). Fora deles, tudo nasce visível. */

/* ---------- Fontes ---------- */
@font-face { font-family: "Cormorant"; src: url(fontes/cormorant.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Jost"; src: url(fontes/jost.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url(fontes/greatvibes.woff2) format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- Cores e medidas ---------- */
:root {
  --rose: #A66F7E;
  --rose-escuro: #7A3E52;
  --rose-medio: #C19AA0;
  --blush: #F4E1E4;
  --fundo: #FBF4F6;
  --texto: #4E2E3A;
  --salvia: #6E9179;
  --verde: #7FA38C;
  --amarelo: #D9A441;
  --coral: #D46A55;
  --texto-suave: #6B4A57;
  --linha: #ECD6DB;
  --titulo: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --corpo: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cursiva: "Great Vibes", "Snell Roundhand", cursive;
  --raio: 24px;
  --raio-secao: clamp(24px, 4vw, 48px);
  --recuo: clamp(0px, 1.2vw - 4px, 16px);
  --sombra: 0 1px 2px rgba(78, 46, 58, .06), 0 26px 50px -30px rgba(122, 62, 82, .5);
  --facil: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 1.0625rem/1.65 var(--corpo); -webkit-font-smoothing: antialiased; }
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-weight: 700; color: var(--rose-escuro); text-wrap: balance; font-variant-numeric: lining-nums; }
h1 { font-size: clamp(2.6rem, 1.3rem + 5vw, 5rem); line-height: 1.02; letter-spacing: -.01em; }
h2 { font-size: clamp(2.15rem, 1.4rem + 3vw, 3.6rem); line-height: 1.06; letter-spacing: -.005em; }
h3 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.85rem); line-height: 1.15; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--foco, var(--rose-escuro)); outline-offset: 3px; border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex: none; }

/* ---------- Peças comuns ---------- */
.caixa { width: min(1180px, 100% - 32px); margin-inline: auto; }
.secao { position: relative; padding-block: clamp(72px, 8vw, 116px); overflow-x: clip; }
.secao-escura {
  background: var(--rose-escuro); color: var(--fundo); --foco: var(--blush);
  margin-inline: var(--recuo); border-radius: var(--raio-secao);
}
.secao-escura h2, .secao-escura h3 { color: #fff; }
.secao-escura .cursiva { color: var(--blush); }
.secao-escura .lead { color: rgba(251, 244, 246, .88); }
.secao-escura .fonte { color: rgba(251, 244, 246, .8); }
.secao-escura .cartao { color: var(--texto); --foco: var(--rose-escuro); }
.secao-escura .cartao h3 { color: var(--rose-escuro); }

.cursiva { font-family: var(--cursiva); font-weight: 400; font-size: 1.2em; line-height: 1; letter-spacing: 0; color: var(--rose); }
.linha-cursiva { display: block; white-space: nowrap; line-height: 1.12; margin-top: .02em; }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--texto-suave); max-width: 36em; }
.fonte { font-size: .875rem; line-height: 1.5; color: var(--texto-suave); }

.etiqueta {
  display: inline-flex; align-items: center; padding: 7px 16px; margin-bottom: 22px;
  border: 1px solid rgba(122, 62, 82, .32); border-radius: 999px;
  font: 600 .875rem/1.25 var(--corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--rose-escuro);
}
.secao-escura .etiqueta { color: var(--blush); border-color: rgba(244, 225, 228, .42); }
/* 14 px em qualquer largura; no celular estreito o espaçamento diminui para a etiqueta do hero caber numa linha */
@media (max-width: 429.98px) { .etiqueta { padding: 6px 12px; letter-spacing: .05em; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px; border: 1.5px solid var(--rose-escuro); border-radius: 999px;
  background: var(--rose-escuro); color: #fff; font: 500 1rem/1.2 var(--corpo); letter-spacing: .01em;
  text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 12px 24px -14px rgba(122, 62, 82, .7);
}
.btn-claro { background: #fff; border-color: #fff; color: var(--rose-escuro); box-shadow: 0 12px 24px -14px rgba(30, 10, 18, .55); }
.btn-linha { background: transparent; color: var(--rose-escuro); border-color: rgba(122, 62, 82, .38); box-shadow: none; }
.secao-escura .btn-linha { color: #fff; border-color: rgba(244, 225, 228, .5); }

/* Usadas por várias páginas: .de-* (sentido da abertura no scroll: início, atendimento, colinhas, Vol. 1), .livro-3d (colinhas, Vol. 1), .atende-icone (atendimento, Vol. 1), .links-avatar (links, Vol. 1) */
.de-esquerda { transform-origin: left center; --de: rotateY(36deg); }
.de-direita { transform-origin: right center; --de: rotateY(-36deg); }

/* Livro 3D: capa (--capa), lombada, borda das páginas e verso */
.livro-3d {
  --w: 190px; --e: 18px; --h: calc(var(--w) * 1.415);
  position: relative; z-index: 1; width: var(--w); height: var(--h); transform-style: preserve-3d;
  transform: perspective(1200px) rotateY(-26deg) rotateX(6deg);
}
.livro-3d > span { position: absolute; display: block; }
.livro-capa {
  inset: 0; border-radius: 2px 5px 5px 2px; background: var(--capa) center / cover, var(--rose);
  box-shadow: inset 4px 0 0 rgba(255, 255, 255, .16), inset 12px 0 12px -8px rgba(40, 10, 20, .4);
  transform: translateZ(calc(var(--e) / 2));
}
.livro-verso { inset: 0; border-radius: 5px 2px 2px 5px; background: var(--rose-escuro); transform: translateZ(calc(var(--e) / -2)) rotateY(180deg); }
.livro-lombada {
  top: 0; left: calc(50% - var(--e) / 2); width: var(--e); height: 100%;
  background: linear-gradient(90deg, #5c2c3d, var(--rose-escuro) 45%, #8f4c62);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
}
.livro-paginas {
  top: 3px; left: calc(50% - var(--e) / 2 + 1px); width: calc(var(--e) - 2px); height: calc(100% - 6px);
  background: repeating-linear-gradient(90deg, #fffafb 0 1.5px, #e9d5da 1.5px 2.5px);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));
}
.livro-topo {
  left: 3px; top: calc(50% - var(--e) / 2 + 1px); width: calc(100% - 6px); height: calc(var(--e) - 2px);
  background: repeating-linear-gradient(0deg, #fffafb 0 1.5px, #e9d5da 1.5px 2.5px);
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 3px));
}

.atende-icone { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--blush); color: var(--rose-escuro); }
.atende-icone .i { width: 30px; height: 30px; }
.links-avatar { width: 132px; height: 132px; margin: 0 auto 18px; padding: 5px; border-radius: 50%; background: linear-gradient(135deg, var(--rose-medio), var(--rose-escuro)); box-shadow: var(--sombra); }
.links-avatar img { width: 100%; height: 100%; border: 4px solid var(--fundo); border-radius: 50%; object-fit: cover; }

.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: clamp(24px, 4vw, 36px); }

/* ---------- Pular para o conteúdo ---------- */
.pular {
  position: absolute; left: 16px; top: -90px; z-index: 100; display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--rose-escuro); color: #fff;
  font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }

/* ---------- Cabeçalho e menu ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--fundo); border-bottom: 1px solid rgba(193, 154, 160, .3); view-transition-name: topo; }
.topo-in { width: min(1240px, 100% - 32px); margin-inline: auto; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--rose-escuro); text-decoration: none; }
.marca-selo { width: 38px; height: 38px; border-radius: 10px; }
.marca-texto { display: flex; flex-direction: column; }
.marca-nome { font: 700 1.2rem/1 var(--titulo); }
.marca-sub { margin-top: 4px; font: 500 .875rem/1 var(--corpo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
#menu { list-style: none; margin: 0; padding: 0; }
#menu a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 14px; color: var(--texto); text-decoration: none; font-weight: 500; }
#menu a[aria-current="page"] { color: var(--rose-escuro); }
.menu-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(122, 62, 82, .3); border-radius: 999px; background: #fff;
  color: var(--rose-escuro); font: 500 1rem/1 var(--corpo); cursor: pointer;
}
.menu-icone { width: 16px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
@media (max-width: 999.98px) {
  .topo #menu { display: none; }
  .topo #menu:popover-open, .topo #menu.aberto {
    display: flex; flex-direction: column; gap: 2px; position: fixed; inset: 76px 12px auto 12px;
    width: auto; height: auto; margin: 0; padding: 12px; border: 1px solid var(--linha); border-radius: 24px;
    background: #fff; color: var(--texto); box-shadow: 0 30px 60px -20px rgba(78, 46, 58, .45);
  }
  #menu a:not(.btn) { font-size: 1.0625rem; }
  #menu a:not(.btn):hover { background: var(--fundo); }
  #menu .btn { width: 100%; margin-top: 8px; }
  #menu::backdrop { background: rgba(78, 46, 58, .28); }
}
@media (min-width: 1000px) {
  .menu-btn { display: none; }
  .topo #menu {
    display: flex; align-items: center; gap: 4px; position: static; inset: auto;
    width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible;
  }
  #menu a:not(.btn) { position: relative; padding: 0 14px; font-size: 1rem; }
  #menu a:not(.btn)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; }
  #menu a:not(.btn):hover::after, #menu a[aria-current="page"]::after { transform: scaleX(1); }
  #menu .btn { min-height: 46px; padding: 10px 22px; margin-left: 10px; }
}

/* ---------- Cena 3D (hero, sobre e o que mais usar) ---------- */
.cena-3d { perspective: 1100px; }
.palco { position: relative; transform-style: preserve-3d; transform: rotateY(calc(var(--mx, 0) * 8deg)) rotateX(calc(var(--my, 0) * -6deg)); }
.camada { transform: translateZ(var(--z, 0px)); }
.raminho { position: absolute; color: var(--rose); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(32px, 6vw, 80px) clamp(24px, 4vw, 56px); isolation: isolate; }
.hero-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bola { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.hero .bola-1 { width: clamp(340px, 50vw, 760px); right: -16vw; top: -18vw; background: rgba(193, 154, 160, .2); }
.hero .bola-2 { width: clamp(220px, 30vw, 440px); left: -14vw; bottom: -12vw; background: var(--blush); }
.hero-grade { display: grid; gap: clamp(44px, 6vw, 72px); align-items: center; }
.hero-texto { max-width: 640px; }
.hero h1 { margin-bottom: 24px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 599.98px) { .acoes .btn { flex: 1 1 100%; } }
@media (min-width: 900px) {
  /* o hero ocupa a primeira tela: nada que revela com a rolagem nasce meio apagado na dobra */
  .hero { display: grid; align-content: center; min-height: calc(100svh - 68px); }
  .hero-grade { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}

.hero-cena { width: min(100%, 520px); margin-inline: auto; view-timeline: --hero block; }
.hero-cena .palco { aspect-ratio: 5 / 6; }
.hero-circulo { position: absolute; left: 4%; top: 1%; width: 88%; aspect-ratio: 1; border-radius: 50%; background: var(--blush); }
.hero-cena .raminho { right: 0; top: -2%; width: 22%; }
.foto {
  position: absolute; left: 15%; top: 5%; width: 70%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 28px; background: var(--blush);
  box-shadow: 0 34px 60px -34px rgba(78, 46, 58, .6), 0 2px 6px rgba(78, 46, 58, .12);
  transform: translateZ(var(--z, 0px)) rotateY(-10deg) rotateX(6deg);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.selo {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px;
  border-radius: 999px; background: #fff; color: var(--texto); white-space: nowrap;
  font: 500 1rem/1.2 var(--corpo);
  box-shadow: 0 16px 30px -16px rgba(78, 46, 58, .55), 0 1px 3px rgba(78, 46, 58, .1);
}
.selo .i { width: 22px; height: 22px; color: var(--salvia); }
.selo-1 { left: 0; top: 9%; --sx: -24px; --sy: -30px; }
.selo-2 { right: 0; top: 50%; --sx: 30px; }
.selo-3 { left: 3%; top: 71%; --sx: -16px; --sy: 24px; }
.hero-circulo { --sy: 40px; }
.hero-cena .raminho { --sx: 24px; --sy: -30px; }
.hero-chao {
  position: absolute; left: 8%; right: 8%; bottom: 1%; height: 16%; container-type: inline-size;
  background: repeating-linear-gradient(90deg, var(--rose-medio) 0 10px, transparent 10px 18px) left bottom / 100% 2px no-repeat;
}
.hero-anda { position: absolute; left: 0; bottom: 2px; width: 46px; color: var(--rose-escuro); }
@media (max-width: 599.98px) {
  .hero-cena .palco { aspect-ratio: 5 / 6.6; }
  .foto { left: 13%; top: 3%; width: 74%; }
  .selo-1 { left: 3%; top: 5%; }
  .selo-2 { right: 4%; top: 43%; }
  .selo-3 { left: 5%; top: 64%; }
  .hero-chao { height: 17%; }
  .hero-cena .camada { --sx: 0px; --sep: 1.5; }
  .hero .bola-1 { right: -62vw; top: -20vw; }
}

/* ---------- Bonequinho de traço ---------- */
.boneco-svg { width: 100%; height: auto; overflow: visible; }
.boneco-svg .perna, .boneco-svg .braco { transform-box: fill-box; transform-origin: 50% 0; }
.boneco-svg .perna-a { transform: rotate(14deg); }
.boneco-svg .perna-b { transform: rotate(-14deg); }
.boneco-svg .braco-a { transform: rotate(-26deg); }
.boneco-svg .braco-b { transform: rotate(26deg); }

/* ---------- Duas portas ---------- */
.portas h2 { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.portas-grade { display: grid; gap: clamp(20px, 3vw, 36px); max-width: 1040px; margin-inline: auto; }
@media (min-width: 760px) { .portas-grade { grid-template-columns: 1fr 1fr; } }
.porta {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(52px, 7vw, 84px) clamp(22px, 4vw, 48px) clamp(30px, 4vw, 44px);
  border: 1px solid var(--linha); border-radius: 50% 50% 28px 28px / clamp(150px, 19vw, 240px) clamp(150px, 19vw, 240px) 28px 28px;
  background: #fff; box-shadow: var(--sombra);
}
.porta-arte { width: min(190px, 62%); height: auto; margin-bottom: 18px; color: var(--rose-escuro); }
.porta h3 { margin-bottom: 12px; }
.porta p { max-width: 30em; margin-bottom: 28px; }
.porta .btn { margin-top: auto; }
.porta-fisio { background: var(--rose-escuro); border-color: var(--rose-escuro); color: var(--fundo); --foco: var(--blush); }
.porta-fisio h3 { color: #fff; }
.porta-fisio .porta-arte { color: var(--blush); }

/* ---------- Sinais de alerta ---------- */
.sinais-grade { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) {
  .sinais-grade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .sinais-texto { position: sticky; top: 130px; }
}
.sinais-texto .fonte { margin-top: 28px; max-width: 30em; }
#sinais { min-width: 0; margin: 0; padding: 0; border: 0; }
#sinais legend { padding: 0; margin-bottom: 10px; font: 600 1.0625rem/1.45 var(--corpo); color: var(--rose-escuro); }
.sinais-lista { list-style: none; margin: 0; padding: 0; }
.sinais-lista li { font-size: 1rem; }
.sinais-lista label { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 0; border-bottom: 1px dashed var(--linha); line-height: 1.4; cursor: pointer; }
.sinais-lista input {
  -webkit-appearance: none; appearance: none; flex: none; width: 28px; height: 28px; margin: 0;
  border: 1.5px solid var(--rose); border-radius: 9px; background: #fff no-repeat center / 18px; cursor: pointer;
}
.sinais-lista input:checked {
  background-color: var(--rose-escuro); border-color: var(--rose-escuro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.medidor { margin: 26px 0 16px; }
.medidor-trilho { height: 14px; overflow: hidden; border-radius: 999px; background: var(--blush); }
.medidor-barra { height: 100%; border-radius: inherit; background: var(--verde); transform-origin: left; transform: scaleX(var(--p, .143)); }
.medidor-barra[data-nivel="1"] { background: var(--amarelo); }
.medidor-barra[data-nivel="2"] { background: var(--coral); }
.medidor-zonas { display: grid; grid-template-columns: 1fr 2fr 4fr; gap: 4px; margin-top: 6px; }
.medidor-zonas span { height: 4px; border-radius: 2px; background: var(--verde); }
.medidor-zonas span:nth-child(2) { background: var(--amarelo); }
.medidor-zonas span:nth-child(3) { background: var(--coral); }
#sinais-frase { display: flex; align-items: flex-start; gap: 12px; min-height: 5em; margin: 0 0 20px; font-weight: 500; }
#sinais-frase::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: .5em; border-radius: 50%; background: var(--verde); }
#sinais-frase[data-nivel="1"]::before { background: var(--amarelo); }
#sinais-frase[data-nivel="2"]::before { background: var(--coral); }
@media (min-width: 600px) { #sinais-frase { min-height: 3.4em; } }

/* ---------- Como funciona (lista; o corredor 3D fica no bloco de movimento) ---------- */
.corredor { background: linear-gradient(180deg, var(--fundo), var(--blush) 22%, var(--blush) 78%, var(--fundo)); }
.corredor-cabeca h2 { margin-bottom: clamp(32px, 5vw, 56px); }
.corredor-progresso, .corredor-chao { display: none; }
.corredor-lista { position: relative; display: grid; gap: 18px; width: min(760px, 100% - 32px); margin: 0 auto; padding: 0; list-style: none; }
.corredor-lista::before { content: ""; position: absolute; left: 47px; top: 30px; bottom: 30px; border-left: 2px dashed var(--rose-medio); }
.corredor-card { position: relative; }
.corredor-card h3 { margin-bottom: 8px; }
.corredor-card p { margin: 0; }
.passo-num {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: 50%; background: var(--rose-escuro); color: #fff; font: 700 1.3rem/1 var(--titulo); font-variant-numeric: lining-nums;
}
@media (min-width: 900px) {
  .corredor-lista { width: min(1080px, 100% - 32px); grid-template-columns: 1fr 1fr; gap: 24px; }
  .corredor-lista::before { display: none; }
}

/* ---------- 3 metros (TUG) ---------- */
.tug { background: var(--texto); }
.tug-grade { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .tug-grade { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.tug h2 { margin-bottom: 22px; }
.tug-texto p:not([class]) { color: rgba(251, 244, 246, .9); max-width: 32em; }
.tug-numero { margin: 26px 0 14px; font: 700 clamp(4.6rem, 3rem + 7vw, 8.5rem)/.95 var(--titulo); color: var(--blush); font-variant-numeric: lining-nums tabular-nums; }
.tug-cena { position: relative; color: var(--blush); }
.tug-fundo { width: 100%; height: auto; overflow: visible; }
.tug-piso { opacity: .3; }
.tug-fita { stroke: var(--rose-medio); }
.tug-etiqueta { fill: var(--blush); }
.tug-fundo text { font: 600 16px var(--corpo); letter-spacing: .06em; fill: var(--texto); }
.tug-pista { position: absolute; left: 17%; right: 11%; bottom: 12.9%; container-type: inline-size; }
.tug-anda { width: 15cqw; transform: translateX(40cqw); }
.ponteiro { transform-box: view-box; transform-origin: 74px 64px; }

/* ---------- O que a ciência mostra ---------- */
.ciencia-grade { display: grid; gap: 20px; margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 860px) { .ciencia-grade { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.dado { display: flex; flex-direction: column; }
.dado h3 { font-size: inherit; line-height: 1; }
.dado-num { display: block; font: 700 clamp(2.7rem, 2.2rem + 1.6vw, 3.4rem)/1 var(--titulo); color: var(--rose-escuro); font-variant-numeric: lining-nums tabular-nums; }
.dado-rotulo { display: block; margin-top: 8px; font: 600 1.0625rem/1.3 var(--corpo); color: var(--texto); }
.barra-enche { display: block; width: 64px; height: 3px; margin: 20px 0; border-radius: 2px; background: var(--salvia); transform-origin: left; }
.dado .fonte { margin: auto 0 0; padding-top: 8px; }
@media (min-width: 860px) { .dado h3 { min-height: 5.4rem; } }

/* ---------- Materiais ---------- */
.materiais-cabeca { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.materiais-cabeca h2 { margin-bottom: 18px; }
.materiais-grade { display: grid; gap: 24px; }
@media (min-width: 900px) { .materiais-grade { grid-template-columns: 1.3fr .7fr; } }
.material-colinhas { display: grid; gap: 24px; align-items: center; }
@media (min-width: 600px) { .material-colinhas { grid-template-columns: auto 1fr; gap: 36px; } }
.material-livro { position: relative; display: grid; place-items: center; padding: 18px 30px 26px 18px; }
.material-livro::after { content: ""; position: absolute; left: 22%; right: 6%; bottom: 8px; height: 26px; background: radial-gradient(closest-side, rgba(60, 20, 35, .32), transparent); }
.material-texto h3 { margin-bottom: 12px; }
.material-texto p { margin-bottom: 24px; }
.material-passo {
  display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(244, 225, 228, .38); border-radius: var(--raio); background: rgba(255, 255, 255, .05);
}
.material-arte { width: 150px; height: auto; margin-bottom: 20px; color: var(--blush); }
.material-passo h3 { margin-bottom: 12px; }
.material-passo p { margin-bottom: 26px; }
.material-passo .btn { margin-top: auto; }


/* ---------- Sobre ---------- */
.sobre-grade { display: grid; gap: clamp(44px, 6vw, 88px); align-items: center; }
@media (min-width: 900px) { .sobre-grade { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.sobre-cena { width: min(100%, 460px); margin-inline: auto; view-timeline: --sobre block; }
.sobre-cena .palco { aspect-ratio: 1 / 1.12; }
.sobre-arco { position: absolute; left: 12%; top: 0; width: 86%; height: 92%; border-radius: 999px 999px 28px 28px; background: var(--blush); }
.sobre-foto {
  position: absolute; left: 2%; top: 8%; width: 84%; height: 92%; overflow: hidden;
  border-radius: 999px 999px 28px 28px; box-shadow: 0 34px 60px -34px rgba(78, 46, 58, .6);
}
.sobre-foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre-raminho { right: 0; bottom: 6%; width: 18%; }
.sobre-texto h2 { margin-bottom: 26px; }
.sobre-texto .btn { margin-top: 10px; }

/* ---------- Perguntas ---------- */
.perguntas-grade { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .perguntas-grade { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
  .perguntas h2 { position: sticky; top: 120px; }
}
.perguntas-lista { border-top: 1px solid var(--linha); }
.perguntas-lista details { border-bottom: 1px solid var(--linha); }
.perguntas-lista summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 18px 0;
  list-style: none; cursor: pointer; font: 700 clamp(1.3rem, 1.15rem + .5vw, 1.55rem)/1.25 var(--titulo); color: var(--rose-escuro);
}
.perguntas-lista summary::-webkit-details-marker { display: none; }
.perguntas-lista summary::after {
  content: ""; flex: none; width: 36px; height: 36px; border: 1px solid var(--rose-medio); border-radius: 50%;
  background: linear-gradient(var(--rose-escuro), var(--rose-escuro)) center / 14px 2px no-repeat,
              linear-gradient(var(--rose-escuro), var(--rose-escuro)) center / 2px 14px no-repeat;
}
.perguntas-lista details[open] summary::after { transform: rotate(45deg); }
.resposta p { max-width: 40em; margin: 0 0 24px; }

/* ---------- Chamada final ---------- */
.chamada { text-align: center; padding-bottom: clamp(140px, 13vw, 180px); isolation: isolate; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.chamada-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.chamada .bola-1 { width: clamp(280px, 40vw, 580px); left: -12%; top: -38%; background: rgba(166, 111, 126, .38); }
.chamada .bola-2 { width: clamp(200px, 28vw, 420px); right: -8%; bottom: -30%; background: rgba(166, 111, 126, .28); }
.chamada-in { max-width: 820px; }
.chamada h2 { margin-bottom: 20px; }
.chamada .lead { margin: 0 auto 34px; }
.chamada-chao {
  position: absolute; left: 50%; bottom: 40px; width: min(560px, 100% - 64px); height: 72px; transform: translateX(-50%); container-type: inline-size; color: var(--blush);
  background: repeating-linear-gradient(90deg, rgba(244, 225, 228, .45) 0 10px, transparent 10px 18px) left bottom / 100% 2px no-repeat;
}
.chamada-anda { position: absolute; left: 0; bottom: 2px; width: 40px; }

/* ---------- Rodapé ---------- */
.rodape {
  margin: 0 var(--recuo) var(--recuo); padding: clamp(48px, 6vw, 72px) 0 26px;
  border-radius: 0 0 var(--raio-secao) var(--raio-secao); background: var(--rose-escuro); color: var(--fundo); --foco: var(--blush);
}
.rodape-grade { display: grid; gap: 28px; border-top: 1px solid rgba(244, 225, 228, .2); padding-top: clamp(36px, 5vw, 52px); }
@media (min-width: 800px) { .rodape-grade { grid-template-columns: 1.4fr 1fr; } }
.rodape p { margin: 0 0 6px; }
.rodape-nome { margin-bottom: 10px; font: 400 2.3rem/1.15 var(--cursiva); color: #fff; }
.rodape-links ul { display: grid; list-style: none; margin: 0; padding: 0; }
.rodape-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; color: #fff; text-decoration: none; }
.rodape-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rodape-arroba { color: var(--blush); }
.rodape-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 20px; border-top: 1px solid rgba(244, 225, 228, .2); }
.rodape-base a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape-legal { font-size: .875rem; color: rgba(251, 244, 246, .8); }
.rodape .rodape-legal { margin: 0; }

/* =====================================================================
   Movimento: só para quem não pediu movimento reduzido
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html { scroll-behavior: smooth; }

  .btn { transition: transform .3s var(--facil); }
  .btn:hover { transform: translateY(-2px); }
  #menu a:not(.btn)::after { transition: transform .3s var(--facil); }
  .palco { transition: transform .7s var(--facil); }
  .medidor-barra { transition: transform .7s var(--facil); }
  .perguntas-lista summary::after { transition: transform .3s var(--facil); }
  .perguntas-lista details[open] .resposta { animation: aparece .45s var(--facil); }
  .topo #menu:popover-open, .topo #menu.aberto { animation: aparece .28s var(--facil); }
  @keyframes aparece { from { opacity: 0; transform: translateY(-8px); } }

  /* Bonequinho: pernas e braços balançam só com .em-vista (posto pelo JS) */
  .boneco .perna, .boneco .braco { animation: passo .6s ease-in-out infinite alternate paused; }
  .boneco .braco { animation-name: balanco; }
  .boneco .perna-b, .boneco .braco-a { animation-delay: -.6s; }
  .boneco.em-vista .perna, .boneco.em-vista .braco { animation-play-state: running; }
  @keyframes passo { from { transform: rotate(22deg); } to { transform: rotate(-22deg); } }
  @keyframes balanco { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }

  /* Caminhada lenta de um lado ao outro (hero e chamada final) */
  .hero-anda, .chamada-anda { animation: atravessa 24s linear infinite paused; }
  .chamada-anda { animation-duration: 30s; animation-delay: -9s; }
  .hero-anda.em-vista, .chamada-anda.em-vista { animation-play-state: running; }
  @keyframes atravessa {
    0% { transform: translateX(0); }
    47% { transform: translateX(calc(100cqw - 46px)); }
    50% { transform: translateX(calc(100cqw - 46px)) scaleX(-1); }
    97% { transform: translateX(0) scaleX(-1); }
    100% { transform: translateX(0); }
  }

  /* ---------- Coreografia com a rolagem ---------- */
  @supports (animation-timeline: view()) {
    /* Faixas em px depois da entrada: não dependem da altura do elemento nem de sticky,
       e terminam antes do fim da página (nada fica preso meio apagado). */
    .revela { animation: revela linear both; animation-timeline: view(); animation-range: entry 0% entry 220px; }
    .revela-3d { animation: revela-3d linear both; animation-timeline: view(); animation-range: entry 0% entry 320px; }
    .barra-enche { animation: enche linear both; animation-timeline: view(); animation-range: entry 80px entry 300px; }
    @keyframes revela { from { opacity: 0; transform: translateY(36px); } }
    @keyframes revela-3d { from { opacity: 0; transform: perspective(1000px) var(--de, rotateX(18deg)) translateZ(-80px); } }
    @keyframes enche { from { transform: scaleX(0); } }

    /* Hero: ao sair da tela o cartão fica plano e as camadas se separam */
    .hero-cena .camada { animation: separa linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero-cena .foto { animation-name: achata; }
    @keyframes separa { to { transform: translate3d(var(--sx, 0px), var(--sy, 0px), calc(var(--z, 0px) * var(--sep, 2.4))); } }
    @keyframes achata { to { transform: translateZ(30px) rotateY(0deg) rotateX(0deg); } }

    /* Bolas do fundo em velocidades diferentes */
    .bola { animation: flutua linear both; animation-timeline: view(); animation-range: cover; }
    .bola-2 { animation-name: flutua-2; }
    @keyframes flutua { from { transform: translateY(-50px); } to { transform: translateY(90px); } }
    @keyframes flutua-2 { from { transform: translateY(70px); } to { transform: translateY(-70px); } }

    /* Sobre: profundidade pela rolagem */
    .sobre-cena .palco { animation: sobre-gira linear both; animation-timeline: --sobre; animation-range: cover; }
    .sobre-cena .camada { animation: sobre-camada linear both; animation-timeline: --sobre; animation-range: cover; }
    @keyframes sobre-gira { from { transform: rotateY(9deg) rotateX(4deg); } to { transform: rotateY(-7deg) rotateX(-2deg); } }
    @keyframes sobre-camada {
      from { transform: translate3d(0, calc(var(--z, 0px) * -.7), var(--z, 0px)); }
      to { transform: translate3d(0, calc(var(--z, 0px) * .7), var(--z, 0px)); }
    }

    /* Livro dos materiais gira um pouco ao passar */
    .material-livro .livro-3d { animation: livro-gira linear both; animation-timeline: view(); animation-range: cover 5% cover 60%; }
    @keyframes livro-gira {
      from { transform: perspective(1200px) rotateY(-44deg) rotateX(12deg); }
      to { transform: perspective(1200px) rotateY(-20deg) rotateX(4deg); }
    }

    /* TUG: o bonequinho vai até o cone, vira e volta; o ponteiro gira junto */
    .tug-cena { view-timeline: --tug block; }
    .tug-anda { animation: tug-anda linear both; animation-timeline: view(); animation-range: cover 20% cover 70%; }
    .ponteiro { animation: ponteiro linear both; animation-timeline: --tug; animation-range: cover 20% cover 70%; }
    @keyframes tug-anda {
      0% { transform: translateX(0); }
      45% { transform: translateX(85cqw); }
      55% { transform: translateX(85cqw) scaleX(-1); }
      100% { transform: translateX(0) scaleX(-1); }
    }
    @keyframes ponteiro { to { transform: rotate(540deg); } }
  }
}

/* Corredor 3D do "Como funciona": só no computador, com movimento e suporte */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  @supports (animation-timeline: view()) {
    .corredor { height: 320vh; padding: 0; background: none; view-timeline: --corredor block; }
    .corredor-moldura {
      position: sticky; top: 0; height: 100vh; overflow: clip;
      background: radial-gradient(ellipse 60% 55% at 50% 60%, #fff, var(--blush) 70%, #efd3d9);
    }
    .corredor-cabeca { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: 104px; }
    .corredor-cabeca h2 { margin: 0; max-width: 11em; }
    .corredor-progresso { display: block; flex: none; width: 180px; height: 3px; margin-bottom: 14px; overflow: hidden; border-radius: 2px; background: rgba(122, 62, 82, .16); }
    .corredor-progresso span { display: block; height: 100%; background: var(--rose-escuro); transform-origin: left; animation: enche linear both; animation-timeline: --corredor; animation-range: contain; }
    .corredor-palco { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 60%; }
    .corredor-trilho { position: absolute; inset: 0; transform-style: preserve-3d; animation: corredor-avanca linear both; animation-timeline: --corredor; animation-range: contain 0% contain 100%; }
    .corredor-lista { position: absolute; inset: 0; display: block; width: auto; margin: 0; transform-style: preserve-3d; }
    .corredor .corredor-card {
      position: absolute; left: 50%; top: 60%; width: min(420px, 34vw);
      transform: translate3d(calc(-50% + var(--x)), -50%, var(--z)) rotateY(var(--ry));
      animation: corredor-some linear both; animation-timeline: --corredor; animation-range: contain var(--some-de) contain var(--some-ate);
    }
    .corredor .corredor-card:nth-child(1) { --x: -21vw; --z: 0px; --ry: 16deg; --some-de: 13%; --some-ate: 24%; }
    .corredor .corredor-card:nth-child(2) { --x: 21vw; --z: -900px; --ry: -16deg; --some-de: 47%; --some-ate: 57%; }
    .corredor .corredor-card:nth-child(3) { --x: -21vw; --z: -1800px; --ry: 16deg; --some-de: 80%; --some-ate: 91%; }
    .corredor .corredor-card:nth-child(4) { --x: 21vw; --z: -2700px; --ry: -16deg; animation: none; }
    .corredor-chao {
      display: block; position: absolute; left: 50%; top: 60%; width: 1100px; height: 4000px; margin-left: -550px;
      transform-origin: 50% 0; transform: translate3d(0, 210px, 200px) rotateX(-90deg);
      background:
        linear-gradient(var(--rose) 0 50%, transparent 0) 50% 0 / 4px 80px repeat-y,
        linear-gradient(90deg, rgba(122, 62, 82, .32) 0 3px, transparent 3px calc(100% - 3px), rgba(122, 62, 82, .32) 0) 0 0 / 100% 100%;
      -webkit-mask-image: linear-gradient(#000 35%, transparent 90%);
      mask-image: linear-gradient(#000 35%, transparent 90%);
    }
    @keyframes corredor-avanca {
      0% { transform: translateZ(0); animation-timing-function: ease-in-out; }
      33.33% { transform: translateZ(900px); animation-timing-function: ease-in-out; }
      66.66% { transform: translateZ(1800px); animation-timing-function: ease-in-out; }
      100% { transform: translateZ(2700px); }
    }
    @keyframes corredor-some { to { opacity: 0; } }
  }
}
/* Telas baixas (notebook de 650 a 800 px): o cartão que passa perto da câmera desce (top 66%) e a perspectiva abre, para não tapar o título nem sair da tela */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (max-height: 820px) {
  @supports (animation-timeline: view()) {
    .corredor-palco { perspective: 2000px; perspective-origin: 50% 66%; }
    .corredor .corredor-card, .corredor-chao { top: 66%; }
  }
}

/* =====================================================================
   Página: Atendimento em casa
   ===================================================================== */
.atende-hero h1 { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.2rem); }
.at-foto { border-radius: 999px 999px 28px 28px; }
.atende-casa { position: absolute; left: -5%; top: -3%; width: 110%; height: auto; color: var(--rose-medio); --sy: -30px; }
.atende-cena .selo-1 { top: 14%; }
@media (max-width: 599.98px) { .atende-cena .selo-1 { top: 9%; } }

.atende h2 { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.atende-grade { list-style: none; display: grid; gap: 20px; max-width: 1180px; margin: 0 auto; padding: 0; }
.atende-card { display: flex; flex-direction: column; gap: 18px; }
.atende-card h3 { margin-bottom: 8px; }
.atende-card p { margin: 0; }
.atende-destaque { flex-direction: row; align-items: center; background: var(--rose-escuro); border-color: var(--rose-escuro); color: var(--fundo); transform-origin: 50% 100%; --de: rotateX(18deg); }
.atende-destaque h3 { color: #fff; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
.atende-destaque .atende-icone { width: 76px; height: 76px; }
.atende-destaque .atende-icone .i { width: 40px; height: 40px; }
@media (max-width: 479.98px) { .atende-destaque { flex-direction: column; align-items: flex-start; } }
@media (min-width: 640px) {
  .atende-grade { grid-template-columns: 1fr 1fr; }
  .atende-destaque { grid-column: 1 / -1; gap: 28px; }
}
@media (min-width: 1000px) {
  .atende-grade { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  /* coluna da esquerda abre da esquerda, a da direita abre da direita, a do meio levanta */
  .atende-grade > :nth-child(3n+2) { --de: rotateY(36deg); transform-origin: left center; }
  .atende-grade > :nth-child(3n) { --de: rotateX(22deg); transform-origin: 50% 100%; }
  .atende-grade > :nth-child(3n+1) { --de: rotateY(-36deg); transform-origin: right center; }
  .atende-grade > .atende-destaque { --de: rotateX(18deg); transform-origin: 50% 100%; }
}

.porque-grade { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .porque-grade { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.porque-lista { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.porque-lista li { display: flex; align-items: center; gap: 18px; padding: 18px 22px 18px 18px; border: 1px solid rgba(244, 225, 228, .28); border-radius: 22px; background: rgba(255, 255, 255, .06); }
.porque-lista p { margin: 0; }
.porque-lista strong { font-weight: 600; color: #fff; }

.prep h2 { text-align: center; margin-bottom: clamp(36px, 5vw, 60px); }
.prep-lista { list-style: none; counter-reset: prep; display: grid; gap: 18px; max-width: 1080px; margin: 0 auto; padding: 0; }
@media (min-width: 640px) { .prep-lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .prep-lista { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.prep-item { counter-increment: prep; padding: 26px 24px 24px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; box-shadow: var(--sombra); transform-origin: 50% 100%; }
.prep-num { display: block; }
.prep-num::before { content: counter(prep); display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: var(--rose-escuro); color: #fff; font: 700 1.5rem/1 var(--titulo); font-variant-numeric: lining-nums; }
.prep-item p { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Preparação: cada cartão está deitado no chão e se levanta, um depois do outro */
    .prep-item { animation: levanta linear both; animation-timeline: view(); animation-range: entry 0% entry 300px; }
    @media (min-width: 640px) { .prep-item:nth-child(even) { animation-range: entry 50px entry 350px; } }
    @media (min-width: 1000px) {
      .prep-item:nth-child(3) { animation-range: entry 100px entry 400px; }
      .prep-item:nth-child(4) { animation-range: entry 150px entry 450px; }
    }
    @keyframes levanta { from { opacity: 0; transform: perspective(900px) rotateX(65deg) translateY(36px); } }
  }
}

/* =====================================================================
   Página: Links (abre pelo Instagram, no celular)
   ===================================================================== */
.links-cabeca { position: relative; isolation: isolate; overflow: clip; padding: 44px 16px 8px; text-align: center; }
.links-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.links-fundo .bola-1 { width: 340px; right: -120px; top: -140px; background: rgba(193, 154, 160, .2); }
.links-fundo .bola-2 { width: 240px; left: -120px; top: -20px; background: var(--blush); }
.links-cabeca h1 { font-size: clamp(2.2rem, 9vw, 2.9rem); }
.links-sub { margin: 8px 0 0; color: var(--texto-suave); }
.links-main { padding: 24px 16px 44px; }
.links-lista { list-style: none; display: grid; gap: 12px; max-width: 480px; margin: 0 auto; padding: 0; }
.link-btn {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 22px; border: 1.5px solid var(--linha); border-radius: 999px;
  background: #fff; color: var(--rose-escuro); font: 500 1.0625rem/1.2 var(--corpo); text-decoration: none;
  box-shadow: 0 12px 24px -18px rgba(122, 62, 82, .6);
}
.link-btn span { flex: 1; }
.link-seta { opacity: .55; }
.link-zap { border-color: var(--rose-escuro); background: var(--rose-escuro); color: #fff; box-shadow: 0 14px 26px -14px rgba(122, 62, 82, .8); }
.link-zap span { text-align: center; padding-right: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .link-btn { transition: transform .3s var(--facil); }
  .link-btn:hover { transform: translateY(-2px); }
  /* Entrada em sequência ao abrir a página (tempo, não rolagem: tudo está na primeira tela) */
  .entra { animation: entra .6s var(--facil) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .links-avatar.entra { animation-name: entra-avatar; animation-duration: .8s; }
  @keyframes entra { from { opacity: 0; transform: translateY(16px); } }
  @keyframes entra-avatar { from { opacity: 0; transform: perspective(500px) rotateY(-70deg) scale(.85); } }
}

/* =====================================================================
   Página: 404
   ===================================================================== */
.erro { display: grid; align-content: center; min-height: calc(100svh - 68px - 200px); padding-bottom: clamp(150px, 16vw, 190px); text-align: center; isolation: isolate; }
.erro .bola-1 { width: clamp(260px, 40vw, 560px); right: -14vw; top: -12vw; background: rgba(193, 154, 160, .2); }
.erro .bola-2 { width: clamp(200px, 28vw, 400px); left: -12vw; bottom: -8vw; background: var(--blush); }
.erro-in { display: flex; flex-direction: column; align-items: center; }
.erro-cena { width: min(100%, 420px); margin-bottom: 12px; }
.erro-cena .palco { height: clamp(150px, 34vw, 230px); }
.erro-num { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(7.5rem, 30vw, 13rem)/1 var(--titulo); font-variant-numeric: lining-nums; letter-spacing: .02em; color: var(--blush); -webkit-text-stroke: 2px var(--rose-medio); }
.erro-ramo { right: 2%; top: -6%; width: 21%; height: auto; }
.erro h1 { margin-bottom: 16px; }
.erro .lead { margin-inline: auto; }
.erro .acoes { justify-content: center; }
.erro-chao {
  position: absolute; left: 50%; bottom: 40px; width: min(560px, 100% - 64px); height: 72px; transform: translateX(-50%); container-type: inline-size; color: var(--rose-escuro);
  background: repeating-linear-gradient(90deg, var(--rose-medio) 0 10px, transparent 10px 18px) left bottom / 100% 2px no-repeat;
}
.erro-anda { position: absolute; left: 0; bottom: 2px; width: 46px; }
@media (prefers-reduced-motion: no-preference) {
  .erro-anda { animation: atravessa 28s linear infinite paused; }
  .erro-anda.em-vista { animation-play-state: running; }
}

/* =====================================================================
   Páginas: Colinhas da Fisio (/colinhas/) e Vol. 1 (/colinhas/equilibrio-e-quedas/)
   ===================================================================== */
/* Livro de pé, de lado: lombada e borda de cima das páginas à vista.
   O olho fica acima do livro (transform-origin), por isso a borda de cima aparece. */
.livro-de-pe { transform: perspective(1200px) rotateY(26deg) rotateX(-6deg); transform-origin: 50% -40%; }

.preco { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 700 clamp(3.4rem, 2.7rem + 2.6vw, 4.6rem)/.9 var(--titulo); color: var(--rose-escuro); font-variant-numeric: lining-nums; }
.preco-moeda { margin-top: .3em; font: 600 1.125rem/1 var(--corpo); letter-spacing: .04em; }
.secao-escura .preco { color: #fff; }

.aviso { display: flex; align-items: flex-start; gap: 14px; max-width: 860px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 18px 22px; border: 1.5px dashed var(--rose-medio); border-radius: 18px; color: var(--texto-suave); }
.aviso .i { margin-top: .2em; color: var(--rose-escuro); }
.aviso p { margin: 0; }

/* ---------- Colinhas: abertura e volumes ---------- */
.colinhas-hero { isolation: isolate; padding-block: clamp(40px, 6vw, 80px) clamp(28px, 3vw, 40px); }
.colinhas-hero .bola-1 { width: clamp(300px, 44vw, 640px); right: -14vw; top: -16vw; background: rgba(193, 154, 160, .2); }
.colinhas-hero .bola-2 { width: clamp(200px, 26vw, 380px); left: -12vw; bottom: -14vw; background: var(--blush); }
.colinhas-hero h1 { margin-bottom: 20px; }
.colinhas-hero .lead { max-width: 40em; }
@media (max-width: 599.98px) { .colinhas-hero .bola-1 { right: -60vw; } }

.volumes { padding-top: clamp(16px, 2vw, 24px); }
.volumes-grade { display: grid; gap: 20px; }
@media (min-width: 640px) { .volumes-grade { grid-template-columns: 1fr 1fr; } .vol-1 { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .volumes-grade { gap: 24px; } }
.vol-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vol-tags .etiqueta { margin: 0; }
.etiqueta-breve { background: var(--blush); border-color: var(--blush); }

.vol-1 { display: grid; gap: 8px; align-items: center; }
@media (min-width: 640px) { .vol-1 { grid-template-columns: auto 1fr; gap: clamp(28px, 4vw, 48px); } }
.vol-livro { position: relative; display: grid; place-items: center; padding: 24px 44px 44px 28px; isolation: isolate; }
.vol-livro::before { content: ""; position: absolute; inset: 0 8% 10% 4%; z-index: -1; border-radius: 999px 999px 28px 28px; background: var(--blush); }
.vol-livro::after { content: ""; position: absolute; left: 20%; right: 4%; bottom: 22px; height: 30px; background: radial-gradient(closest-side, rgba(78, 46, 58, .3), transparent); }
.vol-livro .livro-3d { --w: clamp(190px, 20vw, 270px); --e: 30px; }
@media (min-width: 1000px) { .vol-1 { padding-inline: 56px 64px; } .vol-livro { padding-inline: 48px 64px; } }
.vol-1 h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); margin-bottom: 14px; }
.vol-1 p:not([class]) { max-width: 30em; }
.vol-1 .preco { margin: 6px 0 22px; }

.vol-fantasma { display: grid; grid-template-columns: auto 1fr; gap: 20px 22px; align-items: center; background: rgba(255, 255, 255, .6); box-shadow: none; }
.vol-fantasma h2 { font-size: clamp(1.6rem, 1.35rem + .8vw, 2rem); }
.vol-fantasma .btn { grid-column: 1 / -1; }
.vol-fantasma-livro { padding: 6px 16px 12px 4px; }
.vol-fantasma .livro-3d { --w: clamp(96px, 9vw, 120px); --e: 16px; }
/* Livro fantasma: só o contorno de traço */
.livro-fantasma .livro-capa, .livro-fantasma .livro-lombada, .livro-fantasma .livro-paginas, .livro-fantasma .livro-topo {
  background: #fff; border: 1.5px dashed var(--rose); box-shadow: none;
}
.livro-fantasma .livro-verso { background: none; }
.livro-num { position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(var(--w) * .58)/1 var(--titulo); font-variant-numeric: lining-nums; color: transparent; -webkit-text-stroke: 1.5px var(--rose); }

/* ---------- Vol. 1: abertura com o livro grande ---------- */
.vol1-hero h1 { font-size: clamp(2.5rem, 1.3rem + 4.2vw, 4.5rem); }
.vol1-compra { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 32px; }
.vol1-pix { margin: 18px 0 0; color: var(--texto-suave); }
/* olho acima da cena: aparecem a borda de cima e a lateral das páginas */
.vol1-cena { width: min(100%, 520px); margin-inline: auto; perspective-origin: 50% -20%; }
.vol1-cena .palco { display: grid; place-items: center; aspect-ratio: 1 / 1.04; }
.vol1-circulo { position: absolute; left: 7%; top: 3%; width: 86%; aspect-ratio: 1; border-radius: 50%; background: var(--blush); }
.vol1-raminho { right: 1%; top: 2%; width: 19%; }
.vol1-relogio { position: absolute; left: 3%; bottom: 17%; width: 17%; height: auto; color: var(--rose-medio); }
.vol1-sombra { position: absolute; left: 24%; right: 8%; bottom: 3%; height: 46px; background: radial-gradient(closest-side, rgba(78, 46, 58, .34), transparent); }
.vol1-livro { --w: min(60vw, 290px); --e: 26px; transform: rotateY(-20deg) rotateX(-4deg); }
@media (min-width: 900px) { .vol1-livro { --w: clamp(240px, 22vw, 320px); --e: 30px; } }

/* Problema (seções claras seguidas: espaço menor entre elas) */
.problema { padding-bottom: clamp(40px, 4vw, 64px); }
.dentro { padding-top: clamp(56px, 6vw, 88px); }
.publico { padding-block: clamp(48px, 5vw, 72px); }
.autora { padding-top: clamp(24px, 3vw, 40px); }
.problema-grade { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
@media (min-width: 900px) { .problema-grade { grid-template-columns: 1.05fr .95fr; } }
.problema-arte { width: min(100%, 360px); height: auto; margin-bottom: 26px; color: var(--rose-escuro); }

/* O que tem dentro: leque 3D com 3 páginas */
.dentro { background: linear-gradient(180deg, var(--fundo), var(--blush) 16%, var(--blush) 84%, var(--fundo)); }
.dentro h2 { text-align: center; }
.leque { margin: clamp(36px, 5vw, 64px) auto clamp(44px, 6vw, 76px); perspective: 1400px; perspective-origin: 50% 35%; view-timeline: --leque block; }
.leque-palco { position: relative; width: clamp(168px, 31vw, 340px); aspect-ratio: 700 / 991; margin-inline: auto; transform-style: preserve-3d; }
.folha {
  position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: #fff;
  box-shadow: 0 34px 50px -30px rgba(78, 46, 58, .6), 0 2px 8px rgba(78, 46, 58, .14);
  transform: translate3d(var(--fx, 0%), var(--fy, 0%), var(--fz, 0px)) rotateY(var(--fry, 0deg)) rotateZ(0deg);
}
.folha img { width: 100%; height: 100%; object-fit: cover; }
.folha-esq { --fx: -70%; --fy: 4%; --fz: -100px; --fry: 30deg; --fx0: -3%; --fy0: -1%; --fz0: -40px; --frz0: -5deg; }
.folha-meio { --fz: 40px; }
.folha-dir { --fx: 70%; --fy: 4%; --fz: -100px; --fry: -30deg; --fx0: 3%; --fy0: 1%; --fz0: -20px; --frz0: 4deg; }
@media (max-width: 599.98px) { .folha-esq { --fx: -60%; --fry: 34deg; } .folha-dir { --fx: 60%; --fry: -34deg; } }
.dentro-lista { list-style: none; display: grid; gap: 12px 28px; max-width: 1040px; margin: 0 auto; padding: 0; }
@media (min-width: 760px) { .dentro-lista { grid-template-columns: 1fr 1fr; } }
.dentro-lista li { display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 14px; border: 1px solid var(--linha); border-radius: 20px; background: rgba(255, 255, 255, .78); }
.dentro-lista p { margin: 0; }
.dentro-lista strong { font-weight: 600; color: var(--rose-escuro); }
.dentro-lista .atende-icone { width: 52px; height: 52px; }
.dentro-lista .atende-icone .i { width: 26px; height: 26px; }

/* Para quem é e para quem não é */
.publico-grade { display: grid; gap: 20px; max-width: 1080px; margin-inline: auto; }
@media (min-width: 760px) { .publico-grade { grid-template-columns: 1fr 1fr; gap: 24px; } }
.publico-grade h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); margin-bottom: 22px; }
.publico-lista { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.publico-lista li { display: flex; align-items: flex-start; gap: 12px; }
.publico-lista .i { width: 24px; height: 24px; margin-top: .15em; color: var(--salvia); }
.publico-nao { padding: clamp(24px, 4vw, 36px); border: 1.5px dashed var(--rose-medio); border-radius: var(--raio); }
.publico-nao .i { color: var(--rose); }

/* Quem fez */
.autora-cartao { display: grid; gap: 22px; justify-items: center; max-width: 900px; margin-inline: auto; text-align: center; }
@media (min-width: 700px) { .autora-cartao { grid-template-columns: auto 1fr; gap: 40px; justify-items: start; align-items: center; text-align: left; } }
.autora-cartao .links-avatar { margin: 0; }
.autora h2 { margin-bottom: 14px; }
.autora-cartao p { margin: 0; }
.autora-cartao .autora-assinatura { margin-top: 12px; font: 400 2.3rem/1.1 var(--cursiva); color: var(--rose); }

/* Oferta */
.oferta-grade { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (min-width: 860px) { .oferta-grade { grid-template-columns: auto 1fr; } }
.oferta-livro { position: relative; justify-self: center; display: grid; place-items: center; padding: 20px 44px 40px 28px; }
.oferta-livro::after { content: ""; position: absolute; left: 22%; right: 6%; bottom: 16px; height: 30px; background: radial-gradient(closest-side, rgba(40, 10, 20, .45), transparent); }
.oferta-livro .livro-3d { --w: clamp(180px, 19vw, 240px); --e: 28px; }
.oferta-livro .livro-lombada { background: linear-gradient(90deg, #8a5163, #a06878 50%, #b07c8a); }
.oferta h2 { margin-bottom: 26px; }
.oferta-lista { list-style: none; display: grid; gap: 12px 28px; margin: 0 0 32px; padding: 0; }
@media (min-width: 560px) { .oferta-lista { grid-template-columns: 1fr 1fr; } }
.oferta-lista li { display: flex; align-items: center; gap: 12px; }
.oferta-lista .i { color: var(--blush); }
.oferta-compra { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding-top: 28px; border-top: 1px solid rgba(244, 225, 228, .25); }

@media (prefers-reduced-motion: no-preference) {
  .vol-livro { transition: transform .45s var(--facil); }
  .vol-livro:hover { transform: translateY(-6px); }
  @supports (animation-timeline: view()) {
    /* Vol. 1 na vitrine e na oferta: sai da estante mostrando a lombada e vira a capa para quem lê */
    .livro-de-pe { animation: livro-tira linear both; animation-timeline: view(); animation-range: cover 0% cover 50%; }
    @keyframes livro-tira { from { transform: perspective(1200px) rotateY(64deg) rotateX(-8deg); } }
    .livro-fantasma { animation: none; }

    /* Abertura do Vol. 1: gira de -35° para -12° nos primeiros 280 px (computador)
       ou até o livro chegar ao meio da tela (celular, onde ele vem depois do texto) */
    .vol1-livro { animation: vol1-gira linear both; animation-timeline: view(); animation-range: cover 0% cover 50%; }
    @media (min-width: 900px) { .vol1-livro { animation-timeline: scroll(root); animation-range: 0px 280px; } }
    @keyframes vol1-gira {
      from { transform: rotateY(-35deg) rotateX(-7deg); }
      to { transform: rotateY(-12deg) rotateX(-3deg); }
    }

    /* Leque: as folhas saem da pilha e se abrem até o leque chegar ao meio da tela */
    .folha, .leque-palco { animation: leque-abre linear both; animation-timeline: --leque; animation-range: entry 10% cover 50%; }
    .leque-palco { animation-name: leque-ergue; }
    @keyframes leque-abre { from { transform: translate3d(var(--fx0, 0%), var(--fy0, 0%), var(--fz0, 0px)) rotateY(0deg) rotateZ(var(--frz0, 0deg)); } }
    @keyframes leque-ergue { from { transform: rotateX(26deg) translateY(28px); } }
  }
}