/* Dra. Teodora Lins · direção A "O mapa da geladeira" (direcao.md).
   A página começa clara (a geladeira menta), afunda no verde petróleo (o mapa e a hora),
   volta à luz (as perguntas presas na geladeira), passa pelo pêssego (onde) e fecha claro. */

/* ---------- 1. Tokens ---------- */
@font-face { font-family: "Epilogue"; src: url("../fonts/epilogue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Epilogue"; src: url("../fonts/epilogue-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --geladeira: #E3EEEA;        /* a porta da geladeira (foto) */
  --menta: #EDF3F1;            /* paleta dela */
  --papel: #F4EEE3;
  --verde: #1E5C5A;            /* paleta dela */
  --noite: #10302F;            /* paleta dela: tinta e fundo profundo */
  --pessego: #E0B48A;          /* paleta dela */
  --mostarda: #D9A63A;         /* as almofadas do consultório */
  --tinta: #10302F;
  --tinta-suave: #2F5552;

  --letra: "Epilogue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-0: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --t-2: clamp(1.9rem, 1.4rem + 2.2vw, 3.6rem);
  --t-3: clamp(2.6rem, 1.6rem + 5vw, 6.4rem);
  --linha: 1.45;
  --e-1: 0.5rem; --e-2: 1.25rem; --e-3: 2rem; --e-4: 3rem; --e-5: clamp(4rem, 2.5rem + 6vw, 9rem);
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --rapido: 180ms;
  --medio: 480ms;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--geladeira); color: var(--tinta); font: var(--t-0)/var(--linha) var(--letra); text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-2); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--mostarda); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; display: inline-flex; align-items: center; min-height: 44px; padding: var(--e-1) var(--e-2); background: var(--noite); color: var(--menta); z-index: 100; }
.skip:focus { left: var(--e-2); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.85rem 1.6rem;
  border-radius: 999px; background: var(--noite); color: var(--menta); text-decoration: none; font-weight: 800; font-size: 1.05rem;
  transition: transform var(--rapido) var(--curva), background-color var(--rapido);
}
.botao:hover { transform: translateY(-2px); background: var(--verde); }
.link { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 0.25em; font-weight: 800; }

/* ---------- 3. A folha na geladeira ---------- */
.abertura { position: relative; height: 100svh; min-height: 600px; max-height: 1100px; overflow: hidden; background: var(--geladeira); }
.abertura__cena { position: absolute; inset: 0; }
.cena { position: absolute; inset: 0; width: 100%; height: 100%; }
.cena--larga { display: none; }
.tinta { mix-blend-mode: multiply; }
/* a caneta passa: a tinta aparece da esquerda para a direita e de cima para baixo */
@keyframes caneta { from { clip-path: inset(0 100% 35% 0); } 55% { clip-path: inset(0 0 35% 0); } to { clip-path: inset(0 0 0 0); } }
.tinta { animation: caneta 2.2s 0.3s var(--curva) both; }
.abertura__frase { position: absolute; z-index: 2; top: 18px; left: 20px; right: 20px; font-size: clamp(1.6rem, 1.2rem + 2vw, 2rem); line-height: 1; color: var(--noite); }
.abertura__nome { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 84px; font-size: 0.95rem; color: var(--tinta-suave); }
.abertura__nome strong { color: var(--noite); }
.abertura__botao { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; }

/* ---------- 4. O mapa do seu filho ---------- */
.mapa { background: var(--verde); color: var(--menta); padding: var(--e-4) 16px var(--e-4); display: grid; gap: var(--e-2); }
.mapa h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); max-width: 14ch; }
.mapa__dica { color: #F6DCC0; margin-top: 0.6rem; font-size: 1rem; }
.mapa__folha {
  position: relative; background: var(--papel) url("../img/papel.webp") center/cover; color: var(--noite);
  padding: 44px 18px 22px; transform: rotate(-1.2deg); box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 24px 40px -18px rgba(5,20,19,.55);
  border-radius: 2px 2px 26px 2px; max-width: 34rem; width: 100%; justify-self: center;
}
.ima { position: absolute; top: -14px; left: 50%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F2CD73, var(--mostarda) 45%, #9C7420 100%); box-shadow: 0 6px 10px rgba(0,0,0,.3); }
.folha__desenho { position: relative; }
.folha__curva { width: 100%; mix-blend-mode: multiply; }
.folha__estrela {
  position: absolute; width: 17%; height: auto; margin: -8.5% 0 0 -8.5%; touch-action: none; cursor: grab;
  filter: drop-shadow(0 2px 2px rgba(16,48,47,.25)); transition: left 380ms var(--curva), top 380ms var(--curva), transform 200ms var(--curva);
}
.folha__estrela.arrastando { transition: none; transform: scale(1.18); cursor: grabbing; }
.folha__idade { position: absolute; left: 6%; top: -6px; font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); letter-spacing: -0.03em; }
.folha__lista { margin: 14px 0 0; padding-left: 1.7em; font-size: 1.15rem; line-height: 1.5; }
.folha__lista li::marker { font-weight: 800; }
.folha__extra { margin-top: 10px; font-size: 0.95rem; color: var(--tinta-suave); }
.mapa__idades { -webkit-mask-image: linear-gradient(90deg,#000 80%,transparent); mask-image: linear-gradient(90deg,#000 80%,transparent); display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; margin: 0 -16px; padding-inline: 16px; }
.mapa__idades::-webkit-scrollbar { display: none; }
.mapa__idades button {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(237,243,241,.55); background: transparent; color: var(--menta);
  font: 800 0.95rem var(--letra); cursor: pointer;
}
.mapa__idades button[aria-pressed="true"] { background: var(--mostarda); border-color: var(--mostarda); color: var(--noite); }
.mapa__nota { font-size: 1rem; color: var(--menta); max-width: 34rem; }
.mapa__nota span { font-weight: 800; color: #F6DCC0; }

/* ---------- 5. Uma hora ---------- */
.hora { background: var(--noite); color: var(--menta); padding: var(--e-5) 20px; position: relative; overflow: hidden; }
.hora h2 { font-size: var(--t-2); color: var(--pessego); }
.hora__topo { display: grid; gap: var(--e-3); align-content: start; }
.hora__grande { display: block; font-size: clamp(5rem, 3rem + 12vw, 13rem); color: var(--menta); letter-spacing: -0.06em; line-height: .85; margin-bottom: .1em; }
.hora__trilha { position: relative; margin-top: var(--e-4); padding-left: 56px; }
.hora__linha { position: absolute; left: 0; top: 0; width: 40px; height: 100%; overflow: visible; }
.hora__linha path { fill: var(--pessego); }
.hora__momentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6rem; }
.hora__momentos li { display: grid; gap: 4px; max-width: 26ch; opacity: .35; transform: translateY(14px); transition: opacity 600ms var(--curva), transform 600ms var(--curva); }
.hora__momentos li.vista { opacity: 1; transform: none; }
.hora__momentos b { font-size: 0.85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mostarda); }
.hora__momentos span { font-size: 1.3rem; line-height: 1.3; }
.hora__retorno { font-weight: 800; font-size: var(--t-1); color: var(--pessego); }

/* ---------- 6. Perguntas presas na geladeira ---------- */
.perguntas { background: var(--geladeira) url("../img/geladeira-sombra.webp") center / cover no-repeat; padding: var(--e-5) 16px calc(var(--e-5) + 40px); }
.perguntas h2 { max-width: 13ch; margin-bottom: var(--e-4); }
.bilhetes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 14px; align-items: start; }
.bilhete {
  position: relative; background: var(--papel) url("../img/papel.webp") center/cover; padding: 26px 14px 16px; transform: rotate(var(--g));
  box-shadow: 0 16px 24px -16px rgba(5,20,19,.45); transition: transform var(--medio) var(--curva);
}
.bilhete::before { content: ""; position: absolute; top: -12px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), var(--ima) 45%, color-mix(in srgb, var(--ima) 60%, #000) 100%); box-shadow: 0 4px 6px rgba(0,0,0,.25); }
.bilhete button { all: unset; display: block; cursor: pointer; font-weight: 800; font-size: 1.05rem; line-height: 1.2; min-height: 44px; }
.bilhete button:focus-visible { outline: 3px solid var(--mostarda); outline-offset: 6px; }
.bilhete p { margin-top: 10px; font-size: 1.05rem; line-height: 1.35; }
.bilhete.aberto { transform: rotate(0deg) scale(1.02); background-color: #FFF9EE; z-index: 2; }


/* ---------- 7. Onde ---------- */
.onde { background: var(--pessego); padding: var(--e-5) 16px; overflow: hidden; }
.onde h2 { max-width: 14ch; }
.onde__mapa { width: 170%; max-width: none; margin: var(--e-3) 0 var(--e-3) -35%; mix-blend-mode: multiply; }
.onde__dados { display: grid; gap: var(--e-3); font-size: 1.1rem; }
.onde address { font-style: normal; }
.onde__tem { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.onde__tem { gap: 4px 0; }
.onde__tem li { font-size: 1rem; }
.onde__tem li:not(:last-child)::after { content: "·"; margin: 0 .55em; }

/* ---------- 8. Fechamento ---------- */
.fechamento { background: var(--menta); padding: var(--e-5) 20px; display: grid; gap: var(--e-3); justify-items: start; }
.fechamento__ela { margin: 0 -20px; display: grid; }
.fechamento__ela img { width: 100%; height: auto; }
.fechamento__ela figcaption { padding: 14px 20px 0; font-weight: 800; font-size: var(--t-1); line-height: 1.15; max-width: 22ch; }
.fechamento__fatos { font-size: 1rem; color: var(--tinta-suave); }
.fechamento h2 { font-size: var(--t-2); max-width: 15ch; }

.rodape { background: var(--noite); color: var(--menta); padding: var(--e-4) 20px calc(var(--e-4) + 4.5rem); font-size: 0.9rem; display: grid; gap: 4px; }
.rodape a { display: inline-flex; min-height: 44px; align-items: center; }
.rodape__previa { opacity: .7; margin-top: 8px; }

/* ---------- 9. Barra de contato e pausa (kit) ---------- */
.barra-contato {
  position: fixed; inset: auto 0 0 0; z-index: 30; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%); visibility: hidden; transition: transform var(--medio) var(--curva), visibility 0s linear var(--medio);
}
.barra-contato .botao { width: 100%; background: var(--mostarda); color: var(--noite); box-shadow: 0 10px 30px -10px rgba(5,20,19,.6); }
.barra-contato .botao:hover { background: #E6B85A; }
.barra-contato.visivel { transform: none; visibility: visible; transition: transform var(--medio) var(--curva); }
.pausar {
  position: fixed; right: 12px; bottom: calc(var(--barra-altura, 4.5rem) + 8px); z-index: 31; min-height: 44px; padding: 0.5rem 1rem;
  border: 1.5px solid currentColor; border-radius: 999px; background: var(--menta); color: var(--noite); font: 800 .9rem var(--letra); cursor: pointer;
}

/* ---------- 10. Computador ---------- */
@media (min-width: 900px) {
  .cena--alta { display: none; }
  .cena--larga { display: block; }
  .abertura__frase { top: auto; left: auto; right: 5vw; bottom: 26%; width: 20vw; min-width: 260px; font-size: clamp(2.2rem, 1rem + 2.4vw, 3.4rem); }
  .abertura__nome { left: 56px; right: auto; top: 40px; bottom: auto; font-size: 1rem; }
  .abertura__botao { left: auto; right: 5vw; bottom: 14%; width: 20vw; min-width: 260px; }

  .mapa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "texto folha" "idades folha" "nota folha"; padding: var(--e-5) 6vw; align-items: center; column-gap: 6vw; }
  .mapa__texto { grid-area: texto; align-self: end; }
  .mapa__folha { grid-area: folha; padding: 64px 40px 34px; }
  .mapa__idades { grid-area: idades; flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; align-self: start; -webkit-mask-image: none; mask-image: none; }
  .mapa__nota { grid-area: nota; align-self: start; }

  .hora { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; padding: var(--e-5) 6vw; }
  .hora__trilha { margin-top: 0; }
  .hora__topo { position: sticky; top: 15vh; align-self: start; }

  .perguntas { padding: var(--e-5) 6vw; }
  .bilhetes { grid-template-columns: repeat(4, 1fr); gap: 34px 24px; }
  .bilhete { padding: 30px 20px 20px; }

  .onde { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6vw; padding: var(--e-5) 6vw; }
  .onde__mapa { grid-column: 1 / -1; width: 110%; margin: var(--e-3) -5%; }
  .onde h2 { grid-row: 1; }
  .onde__dados { grid-template-columns: 1fr 1fr; grid-column: 1 / -1; }
  .onde__tem { grid-column: 1 / -1; }

  .fechamento { padding: var(--e-5) 6vw; grid-template-columns: 1.2fr 1fr; align-items: end; column-gap: 5vw; }
  .fechamento__ela { margin: 0; grid-column: 1; grid-row: 1 / span 3; }
  .fechamento__fatos, .fechamento h2, .fechamento .botao { grid-column: 2; }
  .fechamento { align-content: center; row-gap: var(--e-3); }
  .fechamento__ela figcaption { padding-left: 0; }
  .fechamento h2 { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 4.4rem); max-width: 14ch; }
  .fechamento .botao { justify-self: start; }
  .rodape { padding: var(--e-4) 6vw; }
  .barra-contato { inset: auto 24px 24px auto; padding: 0; }
  .barra-contato .botao { width: auto; }
  .pausar { right: 24px; bottom: calc(24px + var(--barra-altura, 3.5rem) + 8px); }
}

/* ---------- 11. Movimento reduzido e pausa ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hora__momentos li { opacity: 1; transform: none; }
}
html[data-movimento="pausado"] *, html[data-movimento="pausado"] *::before, html[data-movimento="pausado"] *::after { animation-play-state: paused !important; }

/* ---------- 12. Páginas simples (privacidade, 404) ---------- */
.secao { max-width: 40rem; margin: 0 auto; padding: var(--e-5) 20px; display: grid; gap: 1rem; }
.secao h1 { font-size: var(--t-2); }
.secao h2 { font-size: var(--t-1); margin-top: 1rem; }

/* ---------- 13. Respostas ao mouse ---------- */
@media (hover: hover) and (pointer: fine) {
  .bilhete:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 30px -18px rgba(5,20,19,.5); }
  .folha__estrela:hover { transform: scale(1.12) rotate(-8deg); }
  .mapa__folha:hover { transform: rotate(-0.4deg); }
  .mapa__folha { transition: transform var(--medio) var(--curva); }
  .mapa__idades button:hover { background: rgba(237,243,241,.15); }
  .abertura__cena .cena { transition: transform 1.2s var(--curva); }
  .abertura:hover .cena { transform: scale(1.015); }
  .onde__mapa { transition: transform 1.2s var(--curva); }
  .onde:hover .onde__mapa { transform: translateX(-1.5%); }
  .fechamento .botao:hover, .abertura__botao:hover { transform: translateY(-3px) rotate(-1deg); }
}
.folha__desenho { cursor: pointer; }

/* A pausa do kit congela animações onde estiverem (#136): a tinta da abertura nunca pode ficar escondida. */
@media (prefers-reduced-motion: reduce) { .tinta { animation: none !important; clip-path: none !important; } }
html[data-movimento="pausado"] .tinta { animation: none !important; clip-path: none !important; }