/* ==========================================================================
   Dra. Layla Saliba — Nutrição infantil
   Folha de estilos única (sem build). Índice:
    1. Fontes            7. Hero                 13. Mascotes
    2. Tokens            8. Sobre                14. Arco-íris (trajetórias)
    3. Base              9. Atendimentos         15. Preloader e entrada
    4. Utilitários      10. Palestras            16. Revelação no scroll
    5. Botões e links   11. Depoimentos          17. Movimento reduzido
    6. Header e menu    12. Dúvidas, contato, rodapé  18. Celular
   ========================================================================== */

/* 1. Fontes (hospedadas no projeto; subconjunto latino cobre todo o português) */
@font-face {
  font-family: "Sour Gummy";
  src: url("../fonts/sour-gummy-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens */
:root {
  /* Papel e tinta. --paper é exatamente o fundo das fotos da hero (#FFFAF1). */
  --paper: #FFFAF1;
  --paper-warm: #FFF2DC;
  --card: #FFFEFB;
  --ink: #2A2340;
  --ink-soft: #544D69;
  --ink-faint: rgba(42, 35, 64, .16);

  /* Arco-íris: as mesmas cores do SVG original */
  --c-red: #E82F2B;
  --c-coral: #F45149;
  --c-orange: #F87810;
  --c-yellow: #FBD20D;
  --c-green: #4DAE47;
  --c-green-deep: #339935;
  --c-blue: #0E9DE6;
  --c-blue-deep: #047FCF;
  --c-violet: #A056C2;
  --c-lilac: #C189D8;

  /* Tons suaves para superfícies */
  --t-red: #FFE3DE;
  --t-orange: #FFE8D1;
  --t-yellow: #FFF3C2;
  --t-green: #E1F3DA;
  --t-blue: #DAEFFB;
  --t-violet: #F0E2F8;

  /* Degradês (o amarelo é um pouco mais fechado para manter a leitura) */
  --g-rainbow: linear-gradient(90deg, #E82F2B 0%, #F87810 21%, #EDB200 39%, #4DAE47 57%, #0E9DE6 77%, #A056C2 100%);
  --g-red: linear-gradient(90deg, #E82F2B 0%, #F45149 45%, #F87810 100%);
  --g-orange: linear-gradient(90deg, #F87810 0%, #EDB200 48%, #4DAE47 100%);
  --g-green: linear-gradient(90deg, #339935 0%, #4DAE47 35%, #0E9DE6 100%);
  --g-blue: linear-gradient(90deg, #047FCF 0%, #0E9DE6 30%, #A056C2 100%);
  --g-violet: linear-gradient(90deg, #A056C2 0%, #C14E9A 50%, #E82F2B 100%);

  /* Tipografia */
  --font-display: "Sour Gummy", "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-hero: clamp(2.2rem, 1.55rem + 4.1vw, 5.15rem);
  --fs-h2: clamp(2.05rem, 1.45rem + 2.1vw, 3.3rem);
  --fs-h3: clamp(1.28rem, 1.15rem + .5vw, 1.55rem);
  --fs-lead: clamp(1.12rem, 1.02rem + .38vw, 1.34rem);
  --fs-body: clamp(1.03rem, .99rem + .18vw, 1.14rem);
  --fs-small: .93rem;

  /* Espaço e layout */
  --container: 1180px;
  /* env(): com viewport-fit=cover, o iPhone deitado põe o conteúdo sob o recorte da tela */
  --gutter: max(clamp(1.15rem, .6rem + 2.4vw, 2.75rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --section-pad: clamp(4.5rem, 3rem + 4.6vw, 7.5rem);
  --content-left: calc(max(0px, (100vw - var(--container) - 2 * var(--gutter)) / 2) + var(--gutter));
  --header-h: 70px;
  --logo-w: 86px;

  /* Formas */
  --stroke: 2.5px;
  --r-pill: 999px;
  --r-card: 30px 38px 28px 40px / 36px 28px 40px 30px;
  --r-blob: 46% 54% 44% 56% / 52% 44% 56% 48%;
  --lift: 0 6px 0 var(--ink);

  /* Movimento */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}
@media (min-width: 1100px) {
  :root { --header-h: 92px; --logo-w: 118px; }
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* Safari anterior ao 16 não conhece clip */
  overflow-x: clip;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 800; }
[hidden] { display: none !important; }

::selection { background: var(--c-yellow); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 10px;
}
/* Seções recebem foco por script ao navegar pelo menu: sem contorno no bloco inteiro */
section[tabindex="-1"]:focus { outline: none; }

html.menu-open { overflow: hidden; }

/* 4. Utilitários */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: .7em 1.1em;
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  border-radius: var(--r-pill);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .25s var(--ease-out);
}
.skip-link:focus-visible { transform: none; outline-color: var(--c-yellow); }

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

.icon { width: 1.3em; height: 1.3em; flex: none; }
.nowrap { white-space: nowrap; }

/* Títulos com degradê de arco-íris + "relevo" em tinta, como um adesivo */
.section-title,
.hero__headline {
  font-family: var(--font-display);
  font-weight: 850;
  font-stretch: 106%;
  line-height: 1.04;
  letter-spacing: -.005em;
  filter: drop-shadow(0 .055em 0 var(--ink));
  text-wrap: balance;
}
.section-title { font-size: var(--fs-h2); }

.rainbow-text {
  background-image: var(--g, var(--g-rainbow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .06em;
}
.rainbow-text--red { --g: var(--g-red); }
.rainbow-text--orange { --g: var(--g-orange); }
.rainbow-text--green { --g: var(--g-green); }
.rainbow-text--blue { --g: var(--g-blue); }
.rainbow-text--violet { --g: var(--g-violet); }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .rainbow-text { color: var(--ink); -webkit-text-fill-color: currentColor; background: none; }
}

.section-head { max-width: 44rem; margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-lead {
  margin-top: 1.1rem;
  max-width: 36em;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}

/* Etiqueta de conteúdo provisório */
.pending-tag {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .18em .7em .22em;
  border: 2px dashed var(--ink);
  border-radius: var(--r-pill);
  background: var(--t-yellow);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.pending-tag::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--c-orange); }
.pending-tag--inline { transform: none; vertical-align: .1em; margin-left: .35em; }
dd[data-pending], span[data-pending]:not(.pending-tag) { color: var(--ink-soft); font-style: italic; }
html[data-hide-pending] [data-pending],
html[data-hide-pending] [data-pending-card],
html[data-hide-pending] [data-pending-block] { display: none !important; }

/* 5. Botões e links */
.btn {
  --btn-bg: var(--card);
  --btn-fg: var(--ink);
  --btn-shadow: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3.3rem;
  padding: .78em clamp(1.05em, .6em + 1.6vw, 1.45em) .82em;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 5px 0 var(--btn-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .25s ease;
}
.btn .icon { transition: transform .45s var(--ease-spring); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--btn-shadow); }
.btn:hover .icon { transform: rotate(-12deg) scale(1.12); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-shadow); transition-duration: .06s; }
.btn:focus-visible { outline-offset: 5px; border-radius: var(--r-pill); }

.btn--primary { --btn-bg: #67C25F; }
.btn--primary:hover { --btn-bg: #74CB6C; }
.btn--secondary { --btn-bg: var(--card); }
.btn--secondary:hover { --btn-bg: var(--t-yellow); }
.btn--small { min-height: 2.9rem; padding: .6em 1.15em .64em; font-size: .97rem; box-shadow: 0 4px 0 var(--btn-shadow); }
.btn--small:hover { box-shadow: 0 6px 0 var(--btn-shadow); }

.text-link {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--c-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .28em;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.text-link:hover { text-decoration-color: var(--c-violet); color: var(--c-violet); }

/* 6. Header e menu */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  transition: background-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 250, 241, .88);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 1px 0 var(--ink-faint), 0 14px 30px -24px rgba(42, 35, 64, .5);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.5rem, 1.2vw, 1.25rem);
}
.site-header__brand {
  flex: none;
  display: flex;
  align-items: center;
  width: var(--logo-w);
  border-radius: 14px;
  transition: transform .45s var(--ease-spring);
}
.site-header__brand:hover { transform: rotate(-3deg) scale(1.04); }
.site-header__logo { width: 100%; height: auto; display: block; }

.site-nav { margin-left: auto; display: none; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.1rem, .35vw, .45rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: .48em clamp(.5em, .65vw, .85em) .52em;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: clamp(.875rem, .92vw, .98rem);
  line-height: 1.2;
  text-decoration: none;
  isolation: isolate;
  transition: color .2s ease;
}
.site-nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--tone-soft);
  border: 2px solid var(--tone);
  opacity: 0;
  transform: scale(.7) rotate(-4deg);
  transition: opacity .25s ease, transform .4s var(--ease-spring);
}
.site-nav__link:hover::before,
.site-nav__link[aria-current="true"]::before { opacity: 1; transform: none; }
.site-nav__link[aria-current="true"]::before { background: var(--card); }

.site-header__cta { margin-left: auto; flex-shrink: 0; white-space: nowrap; }
.site-header__cta-text { display: none; }
.site-header__cta.btn { padding-inline: .8em; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.9rem;
  padding: .5em .95em .5em .8em;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.menu-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.menu-toggle:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.menu-toggle__lines { display: grid; gap: 4px; width: 20px; }
.menu-toggle__lines span { display: block; height: 2.6px; border-radius: 3px; background: var(--ink); }
.menu-toggle__lines span:nth-child(2) { width: 75%; }

@media (min-width: 560px) {
  .site-header__cta-text { display: inline; }
  .site-header__cta.btn { padding-inline: 1.15em; }
}
@media (min-width: 1100px) {
  .site-nav { display: block; }
  .site-header__cta { margin-left: .5rem; }
  .menu-toggle { display: none; }
}

/* Menu do celular (dialog) */
.mobile-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0 var(--gutter) max(2rem, env(safe-area-inset-bottom));
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu::backdrop { background: rgba(42, 35, 64, .3); }
.mobile-menu[open] { display: flex; flex-direction: column; animation: menu-in .5s var(--ease-out); }
.mobile-menu.is-closing { animation: menu-out .28s ease-in forwards; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-10px) scale(.98); } }

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  flex: none;
}
.mobile-menu__logo { width: var(--logo-w); }
.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.9rem;
  padding: .5em 1em .5em .8em;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--t-yellow);
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 800;
  cursor: pointer;
}
.mobile-menu__close .icon { width: 1.15em; height: 1.15em; }
.mobile-menu__nav { margin-top: clamp(1rem, 4vh, 2.5rem); }
.mobile-menu__nav li {
  opacity: 0;
  transform: translateX(-16px);
  animation: menu-item .5s var(--ease-out) forwards;
}
.mobile-menu__nav li:nth-child(1) { animation-delay: .06s; }
.mobile-menu__nav li:nth-child(2) { animation-delay: .1s; }
.mobile-menu__nav li:nth-child(3) { animation-delay: .14s; }
.mobile-menu__nav li:nth-child(4) { animation-delay: .18s; }
.mobile-menu__nav li:nth-child(5) { animation-delay: .22s; }
.mobile-menu__nav li:nth-child(6) { animation-delay: .26s; }
@keyframes menu-item { to { opacity: 1; transform: none; } }
.mobile-menu__nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .32rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
}
.mobile-menu__nav a::before {
  content: "";
  width: .45em;
  height: .45em;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--tone);
  transition: transform .35s var(--ease-spring);
}
.mobile-menu__nav a:hover::before { transform: scale(1.35); }
.mobile-menu__actions {
  display: grid;
  gap: .9rem;
  margin-top: 2rem;
  margin-bottom: -2rem; /* a laranja sobe até a linha do Instagram, à direita dele */
  max-width: 26rem;
}
.mobile-menu__insta { display: inline-flex; align-items: center; gap: .5rem; justify-self: start; margin-top: .3rem; }
/* No fluxo, depois dos botões: em tela baixa o menu rola, e ela nunca fica por cima deles */
.mascote.mobile-menu__mascote {
  position: relative;
  flex: none;
  align-self: flex-end;
  margin-top: auto;
  width: clamp(96px, 26vw, 150px);
}
@media (min-height: 860px) { .mascote.mobile-menu__mascote { width: clamp(110px, 30vw, 170px); } }

/* 7. Hero */
.hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  /* Mesmo cálculo usado em telas largas: altura da foto e faixa da mesa */
  --hero-h: 100svh;
  /* Morango (sprite 271×340, pés a 45,6% / 97,2% do quadro) e altura do tampo da mesa */
  --morango-h: clamp(66px, 19vw, 96px);
  --morango-w: calc(var(--morango-h) * .797);
  --mesa: 2.7vw;
}
.hero__photo { position: relative; z-index: 1; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Cenário atrás da foto recortada: creme quente com brilhos pastel, um "sol" com arcos do
   arco-íris atrás da doutora e rabiscos de frutas nas áreas livres (longe do texto). */
.hero__cenario {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(42% 50% at 72% 40%, rgba(255, 221, 186, .58), rgba(255, 221, 186, 0) 72%),
    radial-gradient(38% 46% at 20% 32%, rgba(255, 240, 178, .5), rgba(255, 240, 178, 0) 72%),
    radial-gradient(30% 38% at 4% 98%, rgba(207, 235, 196, .55), rgba(207, 235, 196, 0) 72%),
    radial-gradient(26% 32% at 98% 2%, rgba(231, 211, 244, .6), rgba(231, 211, 244, 0) 72%),
    var(--paper);
}
.hero__cenario::after {
  /* granulação de papel, bem leve */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__sol {
  position: absolute;
  left: var(--sol-x, 18vw);
  bottom: var(--sol-y, 37vw);
  width: var(--sol-w, 104vw);
}
.hero__sol svg { width: 100%; height: auto; overflow: visible; }
.hero__rabiscos { position: absolute; inset: 0; }
.rabisco, .confete { position: absolute; display: block; }
.rabisco { width: var(--r-w, 10vw); height: auto; aspect-ratio: 1; transform: rotate(var(--r-rot, 0deg)); }
.rabisco--brilho { animation: brilhar 3.8s ease-in-out infinite; }
.rabisco--b { animation-delay: -1.9s; }
@keyframes brilhar {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(.72) rotate(20deg); opacity: .7; }
}
.confete {
  width: var(--c-w, 2.2vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--c);
}
.confete--1 { --c: #F9A39A; }
.confete--2 { --c: #9DD2F2; }
.confete--3 { --c: #FFE07A; }
.confete--4 { --c: #CDA6E6; }
.confete--5 { --c: #A8DC9E; }

/* Celular: rabiscos à esquerda da doutora, acima do cotovelo dela */
.rabisco--folha   { --r-w: 11vw; --r-rot: -10deg; left: 4vw;  bottom: 106vw; }
.rabisco--a       { --r-w: 6vw;  left: 27vw; bottom: 113vw; }
.rabisco--coracao { --r-w: 6.5vw; --r-rot: -12deg; left: 13vw; bottom: 86vw; }
.rabisco--ervilha { --r-w: 10vw; --r-rot: -16deg; left: 2.5vw; bottom: 68vw; }
.rabisco--cenoura, .rabisco--maca, .rabisco--gota, .rabisco--b, .confete--2, .confete--4, .confete--5 { display: none; }
.confete--1 { left: 32vw; bottom: 100vw; }
.confete--3 { left: 22vw; bottom: 78vw; --c-w: 1.8vw; }

.hero__content {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--header-h) + clamp(1.4rem, 5vw, 3rem));
}
.hero__title { display: grid; gap: .55rem; }
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  justify-self: start;
  font-family: var(--font-body);
  font-size: clamp(.98rem, .92rem + .3vw, 1.12rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
.hero__kicker::before {
  content: "";
  width: 1.9em;
  height: .62em;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--g-rainbow);
  border: 2px solid var(--ink);
}
.hero__headline { font-size: var(--fs-hero); font-weight: 880; font-stretch: 110%; }
.hero__lead {
  margin-top: 1.15rem;
  max-width: 31em;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1rem;
  margin-top: 1.7rem;
}

/* Celular: texto em cima, foto abaixo (o topo creme da foto se funde ao fundo) */
.hero { display: flex; flex-direction: column; }
.hero__content { order: 1; }
.hero__photo { order: 2; aspect-ratio: 1080 / 1450; margin-top: calc(-1 * clamp(1.5rem, 9vw, 3.5rem)); }
/* O morango termina o caminho na ponta livre da mesa, antes do cotovelo da doutora (≈18%) */
.hero__mascote {
  width: var(--morango-w);
  left: calc(17vw - var(--morango-w));
  bottom: calc(var(--mesa) - var(--morango-h) * .028);
}
/* Âncora: onde ficam os pés no começo do caminho (no celular e no tablet, fora da tela) */
.hero__trilha { position: absolute; bottom: 0; left: calc(var(--morango-w) * -.75); width: 0; height: 0; pointer-events: none; }

/* Tablet: recorte horizontal da foto do desktop */
@media (min-width: 600px) and (max-width: 1199px) {
  .hero { --morango-h: clamp(92px, 12vw, 132px); --mesa: 2.36vw; }
  .hero__photo { aspect-ratio: 1280 / 1080; margin-top: -2rem; }
  .hero__content { padding-top: calc(var(--header-h) + 3rem); }
  .hero__headline { font-size: clamp(2.65rem, 1.6rem + 3.2vw, 4rem); }
  .hero__mascote { left: calc(21.5vw - var(--morango-w)); }
  .hero__sol { --sol-w: 78vw; --sol-x: 16vw; --sol-y: 12.5vw; }
  .rabisco--folha   { --r-w: 7vw; left: 4vw; bottom: 62vw; }
  .rabisco--a       { --r-w: 4vw; left: 21vw; bottom: 76vw; }
  .rabisco--coracao { --r-w: 4vw; left: 3vw; bottom: 30vw; }
  .rabisco--ervilha { --r-w: 6.5vw; left: 13vw; bottom: 44vw; }
  .rabisco--cenoura { display: block; --r-w: 6vw; --r-rot: 10deg; left: 88vw; bottom: 70vw; }
  .rabisco--b       { display: block; --r-w: 3vw; left: 92vw; bottom: 56vw; }
  .confete--1 { left: 25vw; bottom: 60vw; --c-w: 1.5vw; }
  .confete--3 { left: 9vw; bottom: 22vw; --c-w: 1.3vw; }
  .confete--2 { display: block; left: 84vw; bottom: 82vw; --c-w: 1.2vw; }
}

/* Desktop: foto em tela cheia, texto na área creme à esquerda, morango sobre a mesa */
@media (min-width: 1200px) {
  .hero {
    /* A hero tem a proporção exata da foto (16:9): nada da doutora é cortado e a área
       creme à esquerda fica com o máximo de espaço para o texto. */
    --photo-h: 56.25vw;
    /* Borda esquerda da doutora na foto (x ≈ 1000 de 1920 → 52,1% da largura) */
    --subject-left: 52.1vw;
    display: block;
    height: var(--photo-h);
  }
  /* -0,6% à esquerda: a mesa da foto original começa ~8px depois da borda */
  .hero__photo { position: absolute; inset: 0 0 0 -.6%; margin: 0; aspect-ratio: auto; }
  .hero__photo img { object-position: right bottom; }
  .hero__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    padding-top: var(--header-h);
    /* reserva a mesa (9,3% da foto) e o espaço do morango */
    padding-bottom: calc(var(--photo-h) * .093 + var(--morango-h) * .74);
  }
  .hero__text { max-width: min(37rem, calc(var(--subject-left) - var(--content-left) - 56px)); }
  .hero__headline { font-size: clamp(2.6rem, 3.6vw + .3rem, 4rem); }
  .hero__lead { font-size: clamp(1.1rem, .55rem + .75vw, 1.3rem); }
  .hero__lead { margin-top: 1rem; }
  .hero__actions { margin-top: 1.5rem; column-gap: .75rem; }
  /* O morango anda da coluna de texto até antes do cotovelo da doutora (≈48% da foto) */
  .hero { --morango-h: clamp(100px, 9.2vw, 160px); --mesa: calc(var(--photo-h) * .028); }
  .hero__mascote { left: calc(46.5vw - var(--morango-w)); }
  .hero__trilha { left: calc(var(--content-left) + var(--morango-w) * .456); }
  /* Sol atrás da cabeça e dos ombros; rabiscos entre o texto e a doutora e no canto direito */
  .hero__sol { --sol-w: 46vw; --sol-x: 45vw; --sol-y: auto; top: 3.5vw; }
  .rabisco--a       { --r-w: 2.3vw; left: 50.5vw; top: 15%; bottom: auto; }
  .rabisco--folha   { --r-w: 3.4vw; --r-rot: -12deg; left: 88.5vw; top: 14%; bottom: auto; }
  .rabisco--cenoura { display: block; --r-w: 3.6vw; --r-rot: 8deg; left: 92vw; top: 34%; bottom: auto; }
  .rabisco--maca    { display: block; --r-w: 3vw; left: 2.2vw; top: 30%; bottom: auto; }
  .rabisco--ervilha { --r-w: 3.3vw; --r-rot: -14deg; left: 49.3vw; top: 47%; bottom: auto; }
  .rabisco--coracao { --r-w: 1.9vw; --r-rot: -10deg; left: 44.5vw; top: 13.5%; bottom: auto; }
  .rabisco--gota    { display: block; --r-w: 2vw; left: 2.6vw; top: 63%; bottom: auto; }
  .rabisco--b       { display: block; --r-w: 1.6vw; left: 96vw; top: 21%; bottom: auto; }
  .confete { --c-w: .9vw; bottom: auto; }
  .confete--1 { left: 47.6vw; top: 36%; }
  .confete--2 { display: block; left: 80vw; top: 13%; --c-w: .7vw; }
  .confete--3 { left: 5.2vw; top: 84%; --c-w: .8vw; }
  .confete--4 { display: block; left: 97vw; top: 45%; }
  .confete--5 { display: block; left: 53.6vw; top: 31%; --c-w: .6vw; }
}
/* margem esquerda estreita: os rabiscos dela ficariam atrás do título */
@media (min-width: 1200px) and (max-width: 1339px) {
  .rabisco--maca, .rabisco--gota, .confete--3 { display: none; }
}

/* 8. Sobre */
.section { position: relative; z-index: 1; padding-block: var(--section-pad); }

.about__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  align-items: start;
}
.about__figure {
  position: relative;
  width: min(100%, 480px);
  margin-inline: auto;
}
.about__blob-bg {
  position: absolute;
  inset: 4% -5% -4% 6%;
  border-radius: 36px 48px 34px 50px;
  background: var(--t-orange);
  border: var(--stroke) solid var(--ink);
  transform: rotate(4deg);
  z-index: 0;
}
.photo-blob {
  position: relative;
  z-index: 1;
  aspect-ratio: 800 / 1060;
  overflow: hidden;
  border: 3.5px solid var(--ink);
  border-radius: 32px 42px 34px 44px;
  background: var(--t-orange);
  box-shadow: 0 10px 0 var(--ink);
}
.photo-blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.about__text {
  display: flex;
  flex-direction: column;
}
.about__copy {
  display: grid;
  gap: 1.15rem;
  margin-top: 1.2rem;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 38em;
}
.about__signature {
  margin-top: .6rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--c-green);
  line-height: 1.4;
}

.ficha {
  position: relative;
  margin-top: 2rem;
  max-width: 38rem;
  padding: 1.4rem 1.6rem 1.2rem;
  background: var(--card);
  border: var(--stroke) solid var(--ink);
  border-radius: 22px 30px 24px 32px;
  box-shadow: 6px 7px 0 var(--ink);
}
.ficha__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.ficha__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; line-height: 1.1; }
.ficha__list { display: grid; margin-top: .65rem; }
.ficha__row {
  display: grid;
  grid-template-columns: minmax(9.5rem, 36%) 1fr;
  gap: .3rem 1rem;
  padding: .65rem 0;
  border-top: 2px dotted var(--ink-faint);
  font-size: .98rem;
}
.ficha__row dt { font-weight: 800; }
@media (max-width: 479px) { .ficha__row { grid-template-columns: 1fr; } }

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 4.3fr) minmax(0, 5.7fr);
    align-items: start;
    gap: clamp(2.5rem, 3.5vw, 4.5rem);
  }
  .about__figure {
    margin-inline: 0;
    width: 100%;
    max-width: 480px;
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

/* 9. Atendimentos */
.services__grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  align-items: start;
}
.service-card {
  position: relative;
  height: 100%;
  padding: 1.6rem 1.45rem 1.75rem;
  background: var(--tone-soft);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 6px 8px 0 var(--ink);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .45s var(--ease-spring), box-shadow .35s var(--ease-out);
}
.service-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 8px 14px 0 var(--ink); }
.service-card .pending-tag { position: absolute; top: -.85rem; right: 1.1rem; }
.service-card__icon {
  display: grid;
  place-items: center;
  width: 4.1rem;
  height: 4.1rem;
  margin-bottom: 1.1rem;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  transition: transform .5s var(--ease-spring);
}
.service-card__icon svg { width: 2.6rem; height: 2.6rem; }
.service-card:hover .service-card__icon { transform: rotate(-10deg) scale(1.08); }
.service-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; line-height: 1.1; }
.service-card p { margin-top: .65rem; font-size: 1rem; color: var(--ink-soft); }

@media (min-width: 1100px) {
  .services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .services__item:nth-child(even) { margin-top: 2.75rem; }
}

.services__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.services__note, .talks__note { font-size: var(--fs-small); color: var(--ink-soft); max-width: 22rem; }

/* 9.1 Atendimento (Locais e Formatos) */
.locations .container { position: relative; z-index: 2; }
.locations .section-head { margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.2rem); }
.locations .section-lead { max-width: 38em; margin-inline: auto; color: var(--ink); line-height: 1.6; }
.locations__grid {
  display: grid;
  gap: clamp(1.8rem, 2.5vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  align-items: stretch;
  margin-top: 1.8rem;
}
.location-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 2vw, 2.3rem) clamp(1.6rem, 1.8vw, 2rem);
  background: var(--tone-soft);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 6px 8px 0 var(--ink);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .45s var(--ease-spring), box-shadow .35s var(--ease-out);
}
.location-card:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 8px 14px 0 var(--ink);
}
.location-card__badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.location-card__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  color: var(--tone);
  box-shadow: 2px 3px 0 var(--ink);
}
.location-card__icon svg { width: 2.3rem; height: 2.3rem; }
.location-card__tag {
  display: inline-block;
  padding: .35em .9em .38em;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 800;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: 2px 2px 0 var(--ink);
}
.location-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.15;
}
.location-card__desc {
  margin-top: .85rem;
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.location-card__address {
  margin-top: 1.35rem;
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, .75);
  border: 2px dashed rgba(42, 35, 64, .35);
  border-radius: 14px;
  font-size: .96rem;
  color: var(--ink);
  line-height: 1.5;
}
.location-card__note {
  margin-top: .4rem;
  font-size: .88rem;
  color: var(--ink-soft);
  font-style: italic;
}
.location-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  margin-top: auto;
  padding-top: 1.6rem;
}

/* 10. Vivências Pedagógicas: folha de caderno escolar */
.talks__wrap { position: relative; padding-top: clamp(4.5rem, 10vw, 8rem); }
.notebook {
  --line-gap: 2.1rem;
  --margin-x: clamp(3.4rem, 2.6rem + 3vw, 5.2rem);
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 20px 30px 24px 34px;
  background-color: #FFFEFA;
  background-image:
    linear-gradient(90deg, transparent calc(var(--margin-x) - 1px), rgba(232, 47, 43, .42) calc(var(--margin-x) - 1px) calc(var(--margin-x) + 1px), transparent calc(var(--margin-x) + 1px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--line-gap) - 2px), rgba(14, 157, 230, .16) calc(var(--line-gap) - 2px) var(--line-gap));
  background-position: 0 1.4rem;
  box-shadow: 10px 12px 0 var(--ink);
}
.notebook__holes {
  position: absolute;
  top: 1.6rem;
  bottom: 1.6rem;
  left: clamp(.85rem, .5rem + 1vw, 1.4rem);
  width: 1.35rem;
  background: radial-gradient(circle at 50% 50%, var(--paper) 0 .5rem, var(--ink) calc(.5rem + .5px) calc(.5rem + 2.5px), transparent calc(.5rem + 3px)) 0 0 / 100% 4.6rem;
  background-repeat: no-repeat space;
}
.notebook__body {
  display: grid;
  /* minmax(0, …): a coluna nunca passa da largura do caderno, seja qual for o conteúdo */
  grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem;
  padding: clamp(2rem, 1.4rem + 3vw, 3.75rem) clamp(1.4rem, 1rem + 2vw, 3.5rem) clamp(2.25rem, 1.6rem + 3vw, 3.75rem) calc(var(--margin-x) + clamp(1.1rem, .8rem + 1.5vw, 2.4rem));
}
.notebook__lead { margin-top: 1.1rem; font-size: var(--fs-lead); color: var(--ink-soft); max-width: 32em; }
.talks__topics { margin-top: 1.8rem; }
.talks__topics-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.talks__subtitle { font-family: var(--font-display); font-size: 1.28rem; font-weight: 800; line-height: 1.15; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .42em .95em .46em .75em;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--card);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.2;
  transition: transform .35s var(--ease-spring), background-color .2s ease;
}
.chip::before { content: ""; width: .65em; height: .65em; border-radius: 50%; background: var(--tone); border: 2px solid var(--ink); }
.chip:hover { transform: translateY(-3px) rotate(-2deg); background: var(--t-yellow); }
.talks__audience { margin-top: 1rem; font-size: 1rem; color: var(--ink-soft); }
.talks__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 2rem; }

.polaroid {
  position: relative;
  justify-self: center;
  width: min(100%, 540px);
  padding: 1.15rem 1.15rem 1.35rem;
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  box-shadow: 8px 10px 0 var(--ink);
  /* sem inclinação no hover: o brócolis aterrissa em cima da moldura */
  transform: rotate(2deg);
}
.polaroid:focus-visible {
  outline: 3px solid var(--c-green);
  outline-offset: 4px;
}
.polaroid__tape {
  position: absolute;
  top: -1.05rem;
  left: 50%;
  width: 7.5rem;
  height: 1.85rem;
  background: rgba(251, 210, 13, .68);
  border: 1.5px solid rgba(42, 35, 64, .24);
  transform: translateX(-50%) rotate(-3.5deg);
  z-index: 10;
  pointer-events: none;
}
.polaroid__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3.15;
  overflow: hidden;
  border-radius: 6px;
  border: 2.5px solid var(--ink);
  background: #fff;
}
.polaroid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* Galeria com profundidade e sobreposição */
.polaroid-gallery__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.15;
  border-radius: 6px;
}
.polaroid-gallery__deck {
  position: relative;
  width: 100%;
  height: 100%;
}
.polaroid-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .45s var(--ease-spring), opacity .35s ease;
  transform-origin: center 80%;
}
.polaroid-slide .polaroid__photo {
  width: 100%;
  height: 100%;
  box-shadow: 2px 3px 0 rgba(42, 35, 64, .18);
}
.polaroid-slide.is-active {
  z-index: 4;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  pointer-events: auto;
}
.polaroid-slide.is-next {
  z-index: 3;
  opacity: .88;
  transform: translate3d(20px, -10px, 0) scale(.96) rotate(3deg);
  pointer-events: auto;
  cursor: pointer;
}
.polaroid-slide.is-prev {
  z-index: 2;
  opacity: .7;
  transform: translate3d(-18px, -8px, 0) scale(.94) rotate(-2.8deg);
  pointer-events: auto;
  cursor: pointer;
}
.polaroid-slide.is-hidden {
  z-index: 1;
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
}

/* Controles da Galeria */
.polaroid-gallery__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .85rem;
  padding: .35rem .7rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: 2px 2px 0 var(--ink);
}
.polaroid-gallery__btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 1.5px 2px 0 var(--ink);
  transition: transform .25s var(--ease-spring), background-color .2s ease;
}
.polaroid-gallery__btn:hover {
  transform: scale(1.12);
  background: var(--t-yellow);
}
.polaroid-gallery__btn:active {
  transform: scale(.94);
}
.polaroid-gallery__btn .icon {
  width: 1.2rem;
  height: 1.2rem;
}
.polaroid-gallery__counter {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  user-select: none;
}
.polaroid__caption {
  margin-top: .75rem;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: center;
  min-height: 2.8em;
  transition: opacity .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .polaroid-slide { transition: none !important; }
}

/* O brócolis começa na borda de cima do caderno (âncora .notebook__apoio) e pula para a
   moldura da foto (.polaroid__pouso). O CSS deixa ele no ponto de partida; o JS faz o salto.
   Sprite 332×460, pés a 52% / 98% do quadro. */
.talks__wrap { --stage: 8.75rem; --broc-h: 9.2rem; padding-top: var(--stage); }
.talks__mascote {
  width: calc(var(--broc-h) * .722);
  right: 4%;
  top: calc(var(--stage) - var(--broc-h) * .98);
}
.notebook__apoio { position: absolute; top: -2px; right: 9%; width: 0; height: 0; pointer-events: none; }
.polaroid__pouso { position: absolute; top: -1px; left: 40%; width: 0; height: 0; pointer-events: none; }
.salto-sombra {
  position: absolute;
  z-index: 2;
  width: calc(var(--broc-h) * .44);
  height: calc(var(--broc-h) * .07);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 35, 64, .3), rgba(42, 35, 64, 0));
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.salto-sombra--inicio { opacity: 1; }
@media (max-width: 599px) {
  .notebook { --margin-x: 2.6rem; }
  .notebook__holes { left: .6rem; width: 1.15rem; }
  .notebook__body { padding: 1.9rem 1rem 2.2rem calc(var(--margin-x) + .75rem); }
}
/* Telas estreitas: a foto vai para o topo do caderno, com linhas livres acima para o pouso */
@media (max-width: 899px) {
  .polaroid {
    order: -1;
    margin-top: 2.4rem;
    width: 100%;
    max-width: 480px;
    justify-self: center;
  }
}

@media (min-width: 900px) {
  .notebook__body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(2rem, 3.5vw, 4rem);
  }
  .polaroid {
    justify-self: center;
    width: 100%;
    max-width: 540px;
  }
  /* Altura mínima só aqui: com aspect-ratio, ela vira uma largura mínima (≈330px),
     e no celular isso empurrava o caderno inteiro para fora da tela. */
  .polaroid__photo, .polaroid-gallery__viewport { min-height: clamp(260px, 32vw, 410px); }
  .talks__wrap { --stage: clamp(7rem, 12vw, 10rem); --broc-h: clamp(196px, 16.4vw, 244px); }
  .notebook__apoio { right: 5%; }
}

/* 11. Depoimentos */
.testimonials__empty {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.2rem) clamp(1.4rem, 1rem + 3vw, 3.4rem);
  text-align: center;
  background: var(--card);
  border: var(--stroke) dashed var(--ink);
  border-radius: 40px 46px 38px 48px;
}
.testimonials__empty::after {
  /* "rabinho" do balão de fala */
  content: "";
  position: absolute;
  left: 22%;
  bottom: -17px;
  width: 30px;
  height: 30px;
  background: var(--card);
  border-right: var(--stroke) dashed var(--ink);
  border-bottom: var(--stroke) dashed var(--ink);
  border-bottom-right-radius: 6px;
  transform: rotate(45deg);
}
.testimonials__quote {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background: var(--t-blue);
  color: var(--c-blue-deep);
}
.testimonials__quote svg { width: 2.2rem; height: 2.2rem; }
.testimonials__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; line-height: 1.15; }
.testimonials__empty p { margin: .8rem auto 1.2rem; max-width: 32em; color: var(--ink-soft); }
.testimonials__principles { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.2rem 0; }
.testimonials__disclaimer { font-size: .95rem; color: var(--ink-soft); max-width: 34rem; margin: 0 auto 1.4rem !important; }

.testimonials__list {
  display: grid;
  gap: clamp(1.6rem, 2.5vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20.5rem), 1fr));
  align-items: stretch;
}
.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.85rem 1.65rem 1.75rem;
  background: var(--card);
  border: var(--stroke) solid var(--ink);
  border-radius: 22px 28px 24px 30px;
  box-shadow: 6px 8px 0 var(--ink);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .4s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.testimonial-card:hover {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: 8px 12px 0 var(--ink);
}
.testimonial-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1.15rem;
}
.testimonial-card__tag {
  display: inline-block;
  padding: .32em .85em .35em;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 800;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--tone-soft, var(--t-yellow));
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.testimonial-card__icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--tone-soft, var(--t-yellow));
  color: var(--ink);
  border: 2px solid var(--ink);
}
.testimonial-card__icon svg { width: 1.35rem; height: 1.35rem; }
.testimonial-card__quote {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink);
  font-style: italic;
  flex: 1;
}
.testimonial-card__author {
  margin-top: 1.35rem;
  padding-top: .9rem;
  border-top: 2px dotted var(--ink-faint);
  font-size: .95rem;
  color: var(--ink-soft);
}
.testimonial-card__author strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}
.testimonial-card__author span {
  display: block;
  font-size: .88rem;
  margin-top: .15rem;
  color: var(--ink-soft);
}
.testimonials__footer {
  text-align: center;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.testimonials__disclaimer {
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 36rem;
  margin: 0 auto;
}

/* 12. Dúvidas */
.faq__wrap { max-width: calc(52rem + 2 * var(--gutter)); }
.faq__list { display: grid; gap: 1rem; }
.faq-item {
  background: var(--card);
  border: var(--stroke) solid var(--ink);
  border-radius: 24px 28px 22px 30px;
  box-shadow: 0 5px 0 var(--ink);
  transition: box-shadow .3s var(--ease-out), background-color .3s ease;
}
.faq-item[open] { background: var(--tone-soft); box-shadow: 0 7px 0 var(--ink); }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 1.15rem 1.45rem;
  font-weight: 800;
  font-size: clamp(1.03rem, .98rem + .25vw, 1.16rem);
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }
.faq-item__q:focus-visible { outline-offset: -6px; }
.faq-item__icon {
  position: relative;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background: var(--tone-soft);
  transition: transform .45s var(--ease-spring), background-color .25s ease;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .9rem;
  height: 2.6px;
  border-radius: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item__q:hover .faq-item__icon { transform: rotate(90deg) scale(1.06); }
.faq-item[open] .faq-item__icon { transform: rotate(135deg); background: var(--card); }
.faq-item.is-closing { background: var(--card); box-shadow: 0 5px 0 var(--ink); }
.faq-item.is-closing .faq-item__icon { transform: none; background: var(--tone-soft); }
.faq-item__a { overflow: hidden; }
.faq-item__a > * { padding: 0 1.45rem 1.35rem; color: var(--ink-soft); max-width: 44em; }
.faq-item__pending .pending-tag { margin: 0 .35em 0 0; }

/* Chamada final */
/* espaço extra embaixo: palco da laranja sobre a onda do rodapé */
.contact { padding-bottom: calc(var(--section-pad) + 4.5rem); }
.contact .container { position: relative; }
.contact__panel {
  position: relative;
  display: grid;
  gap: 2rem;
  justify-items: center;
  padding: clamp(2rem, 1.4rem + 3vw, 3.75rem) clamp(1.3rem, .9rem + 3vw, 3.75rem);
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 44px 54px 40px 58px;
  box-shadow: 12px 14px 0 var(--ink);
  text-align: center;
}
.contact__portrait {
  width: clamp(150px, 34vw, 230px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 9px var(--t-violet), 0 0 0 11.5px var(--ink);
}
.contact__portrait img { width: 100%; height: 100%; object-fit: cover; }
.contact__title { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem); }
.contact__lead { margin-top: .9rem; font-size: var(--fs-lead); color: var(--ink-soft); }
.contact__choices { display: grid; gap: 1rem; margin-top: 1.8rem; text-align: left; }
.choice-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--tone-soft);
  border: var(--stroke) solid var(--ink);
  border-radius: 24px 28px 22px 30px;
  box-shadow: 0 5px 0 var(--ink);
  text-decoration: none;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.choice-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); }
.choice-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); transition-duration: .06s; }
.choice-card:focus-visible { outline-offset: 5px; border-radius: 26px; }
.choice-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  transition: transform .5s var(--ease-spring);
}
.choice-card__icon svg { width: 2.1rem; height: 2.1rem; }
.choice-card:hover .choice-card__icon { transform: rotate(-12deg) scale(1.08); }
.choice-card__text { display: grid; gap: .1rem; flex: 1; }
.choice-card__title { font-family: var(--font-display); font-size: 1.32rem; font-weight: 800; line-height: 1.15; }
.choice-card__hint { font-size: .95rem; color: var(--ink-soft); }
.choice-card__go { width: 1.6rem; height: 1.6rem; color: var(--c-green-deep); }
.contact__insta { margin-top: 1.5rem; color: var(--ink-soft); }

@media (max-width: 479px) {
  .contact__panel { padding-inline: 1rem; }
  .choice-card { gap: .75rem; padding: .9rem .9rem .9rem .8rem; }
  .choice-card__icon { width: 2.9rem; height: 2.9rem; }
  .choice-card__icon svg { width: 1.8rem; height: 1.8rem; }
  .choice-card__title { font-size: 1.2rem; }
}
@media (max-width: 399px) {
  .choice-card__go { display: none; }
}

@media (min-width: 900px) {
  .contact__panel { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; gap: clamp(2rem, 4vw, 4rem); }
  .contact__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Rodapé */
.site-footer {
  position: relative;
  z-index: 2;
  color: #F5F0FF;
  background: var(--ink);
  padding: 3.5rem 0 max(2rem, env(safe-area-inset-bottom));
}
.site-footer__wave { position: absolute; z-index: 2; left: 0; bottom: calc(100% - 1px); width: 100%; height: 34px; color: var(--ink); }

/* Laranja dando tchau, de pé na crista da onda (75% da largura). O palco recorta a parte de
   baixo: quando ela desce, some atrás da "colina". Sprite 285×300, pés a 46% / 98,2%. */
.rodape__palco {
  --lar-h: clamp(88px, 8.4vw, 128px);
  --lar-w: calc(var(--lar-h) * .95);
  position: absolute;
  z-index: 1;
  right: calc(25% - var(--lar-w) * .54);
  bottom: calc(100% + 27px);
  width: calc(var(--lar-w) * 2.7);
  height: calc(var(--lar-h) + 4px);
  overflow: hidden;
  pointer-events: none;
}
.rodape__laranja { right: 0; bottom: 0; width: var(--lar-w); transform-origin: 46% 100%; }
.rodape__palco .rodape__fala {
  top: auto;
  left: auto;
  right: calc(var(--lar-w) * .86);
  bottom: calc(var(--lar-h) * .5);
  border-radius: 18px 18px 4px 18px;
  transform-origin: 100% 100%;
}
.rodape__palco.is-falando .rodape__fala { opacity: 1; transform: rotate(-4deg); }
.site-footer__inner { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site-footer__logo { width: 150px; }
.site-footer__brand p { margin-top: .8rem; color: #CFC7E6; }
.site-footer__heading { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; margin-bottom: .7rem; color: #fff; }
.site-footer ul { display: grid; gap: .35rem; }
.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #F5F0FF;
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
  transition: color .2s ease;
}
.site-footer a:hover { color: var(--c-yellow); text-decoration: underline wavy; text-underline-offset: .3em; }
.site-footer a:focus-visible { outline-color: var(--c-yellow); }
.site-footer__legal { display: grid; gap: .35rem; font-size: .92rem; color: #CFC7E6; }
.site-footer__legal strong { color: #fff; }
.site-footer__legal span[data-pending] { color: #F2D27A; }
@media (max-width: 1099px) {
  .site-footer__legal { grid-column: 1 / -1; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* 13. Mascotes — host (posição guiada pelo scroll) › .mascote__body (vira de lado)
   › .mascote__sprite (janela de um quadro) › .mascote__folha (os 10 quadros originais) */
.mascote { position: absolute; z-index: 3; display: block; pointer-events: none; will-change: transform; }
mascote-morango { --quadro: 271 / 340; --pe: .456; }
mascote-brocolis { --quadro: 332 / 460; --pe: .52; }
mascote-laranja { --quadro: 285 / 300; --pe: .46; }
.mascote__body {
  display: block;
  transform-origin: calc(var(--pe, .5) * 100%) 100%;
  transition: transform .2s var(--ease-out);
}
.mascote__body.is-virado { transform: scaleX(-1); }
.mascote__sprite { display: block; overflow: hidden; aspect-ratio: var(--quadro, 1); }
.mascote__folha { display: block; width: 1000%; max-width: none; height: auto; }
/* sombra de contato no chão (não acompanha o giro) */
.mascote__sombra {
  position: absolute;
  z-index: -1;
  left: calc(var(--pe, .5) * 100%);
  bottom: 1.4%;
  width: 62%;
  aspect-ratio: 6 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 35, 64, .26), rgba(42, 35, 64, 0));
  transform: translate(-50%, 50%);
}
/* Aceno da laranja: quadros 2 a 10 do arquivo em loop, só enquanto ela está na tela */
.mascote--aceno .mascote__folha { animation: aceno 1.15s steps(9) infinite; animation-play-state: paused; }
.mascote--aceno[data-visible]:not(.is-escondida) .mascote__folha { animation-play-state: running; }
@keyframes aceno {
  from { transform: translate3d(-10%, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
.mascote__fala {
  position: absolute;
  top: -6%;
  right: -20%;
  z-index: 1;
  padding: .25em .7em .3em;
  border: var(--stroke) solid var(--ink);
  border-radius: 18px 18px 18px 4px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem);
  font-weight: 800;
  line-height: 1.1;
  box-shadow: 0 4px 0 var(--ink);
  opacity: 0;
  transform: scale(.4) rotate(-10deg);
  transform-origin: 0% 100%;
  transition: opacity .3s ease .35s, transform .6s var(--ease-spring) .35s;
}

/* 14. Arco-íris — fica atrás do conteúdo; trajetória definida pelos pontos .rb-point */
.site-main { position: relative; overflow-x: clip; }
rainbow-trail {
  --rainbow-width: 74px;
  --rainbow-stretch: 1.45;
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
/* camada própria: o desenho progressivo não obriga a redesenhar o resto da página */
rainbow-trail .rainbow-trail__svg { position: absolute; left: 0; width: 100%; overflow: hidden; will-change: transform; }
.rb-point { position: absolute; width: 0; height: 0; pointer-events: none; }

/* Celular e tablet (até 1099px): pontos .rb-m (posição via --x/--y no HTML). A faixa
   cruza a tela quase na horizontal no respiro entre seções, como um divisor, e faz as
   curvas fora da tela — nunca passa por trás de um texto. */
.rb-m { left: var(--x); top: var(--y); }
@media (max-width: 1099px) {
  rainbow-trail { --rainbow-width: 58px; --rainbow-stretch: 1.45; }
  .rb-point:not(.rb-m) { display: none; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  rainbow-trail { --rainbow-width: 80px; --rainbow-stretch: 1.25; }
}

/* Desktop: a faixa contorna os blocos de texto e passa por trás de fotos e cartões */
@media (min-width: 1100px) {
  rainbow-trail { --rainbow-width: 128px; --rainbow-stretch: 1.05; }
  .rb-m { display: none; }
  .rb-p10 { left: 34%; bottom: 60px; }
  .rb-p20 { left: 20%; top: 9%; }
  .rb-p22 { left: 9%; top: 52%; }
  .rb-p24 { left: 30%; top: 96%; }
  .rb-p30 { left: 78%; top: 9%; }
  .rb-p32 { left: 92%; top: 30%; }
  .rb-p34 { left: 62%; top: 86%; }
  /* entra por trás do caderno no canto superior esquerdo e sai no inferior direito */
  .rb-p40 { left: 12%; top: 16%; }
  .rb-p42 { left: 52%; top: 55%; }
  .rb-p44 { left: 90%; top: 99%; }
  /* desce pela margem direita, ao lado do balão de depoimentos e da lista de dúvidas */
  .rb-p50 { left: 89%; top: 40%; }
  .rb-p52 { left: 90%; top: 96%; }
  .rb-p60 { left: 89%; top: 32%; }
  .rb-p62 { left: 88%; top: 84%; }
  .rb-p64 { left: 40%; top: 103%; }
  .rb-p70 { left: 22%; top: 30%; }
  .rb-p72 { left: 46%; top: 50%; }
}

/* 15. Preloader e entrada da página */
.preloader { display: none; }
.js.is-loading { overflow: hidden; }
.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.js:not(.is-loading) .preloader { display: none; }
.preloader__veil { position: absolute; inset: 0; background: var(--paper); }
.preloader__stage { position: relative; width: min(74vw, 540px); }
.preloader__logo {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(.86) rotate(-3deg);
  will-change: transform, opacity;
}
.preloader.is-ready .preloader__logo {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .9s var(--ease-spring);
}
.preloader.is-ready.is-breathing .preloader__logo { animation: logo-breathe 2.4s ease-in-out infinite; }
@keyframes logo-breathe { 50% { transform: scale(1.025) rotate(.6deg); } }
.preloader__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: var(--c);
  border: 2px solid var(--ink);
  opacity: 0;
  transform: scale(0);
}
.preloader.is-ready .preloader__dot {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease calc(.25s + var(--d) * .3), transform .6s var(--ease-spring) calc(.25s + var(--d) * .3);
  animation: dot-float 3.2s ease-in-out var(--d) infinite;
}
@keyframes dot-float { 50% { translate: 0 -9px; } }

/* Header: logo escondido até o logo do preloader pousar; itens entram em seguida */
.is-loading .site-header__logo { visibility: hidden; }
.js .site-nav__list > li,
.js .site-header__cta,
.js .menu-toggle {
  transition: opacity .5s var(--ease-out), translate .6s var(--ease-out);
}
.js.is-loading .site-nav__list > li,
.js.is-loading .site-header__cta,
.js.is-loading .menu-toggle { opacity: 0; translate: 0 -12px; }
.js .site-nav__list > li:nth-child(2) { transition-delay: .05s; }
.js .site-nav__list > li:nth-child(3) { transition-delay: .1s; }
.js .site-nav__list > li:nth-child(4) { transition-delay: .15s; }
.js .site-nav__list > li:nth-child(5) { transition-delay: .2s; }
.js .site-header__cta { transition-delay: .25s; }

/* Hero: entrada orquestrada após o preloader */
.js [data-enter] {
  transition: opacity .8s var(--ease-out) calc(var(--enter-delay, 0ms) + 150ms), translate .9s var(--ease-out) calc(var(--enter-delay, 0ms) + 150ms);
}
.js.is-loading [data-enter] { opacity: 0; translate: 0 22px; }
/* o morango entra caminhando (js/components/mascote-morango.js); aqui só aparece */
.js .hero__mascote { transition: opacity .45s ease .15s; }
.js.is-loading .hero__mascote { opacity: 0; }

/* 16. Revelação no scroll (ativada por js/site.js) */
.reveal-ready [data-reveal] {
  opacity: 0;
  translate: 0 30px;
  transition: opacity .85s var(--ease-out) var(--reveal-delay, 0ms), translate .9s var(--ease-out) var(--reveal-delay, 0ms), scale .9s var(--ease-out) var(--reveal-delay, 0ms), rotate .9s var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal="pop"] { translate: 0 20px; scale: .94; rotate: -1.5deg; }
.reveal-ready [data-reveal].is-revealed { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }

/* 17. Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .reveal-ready [data-reveal] { opacity: 1; translate: none; scale: none; rotate: none; }
  /* mascotes parados num quadro; a laranja com a mão erguida */
  .mascote--aceno .mascote__folha { animation: none !important; transform: translate3d(-20%, 0, 0); }
  .rabisco--brilho { animation: none !important; }
}

/* 18. Celular: tudo no mesmo eixo. Cartão inclinado e sombra para o lado funcionam onde há
   sobra; aqui os blocos ocupam a largura toda, e isso comia a margem direita. A sombra fica
   reta para baixo, como a dos botões, e as duas margens ficam iguais. */
@media (max-width: 599px) {
  .service-card, .location-card, .testimonial-card, .polaroid { transform: none; }
  .ficha, .service-card, .location-card, .testimonial-card, .polaroid { box-shadow: 0 6px 0 var(--ink); }
  .service-card:hover, .location-card:hover, .testimonial-card:hover { box-shadow: 0 10px 0 var(--ink); }
  .notebook, .contact__panel { box-shadow: 0 8px 0 var(--ink); }

  /* A foto já ocupa a largura toda: o fundo laranja só caberia passando da margem */
  .about__blob-bg { display: none; }

  /* Botões de um mesmo bloco com a mesma largura: dividem a linha ou ficam um por linha */
  .hero__actions .btn,
  .services__cta .btn,
  .location-card__actions .btn,
  .talks__cta .btn { flex: 1 1 auto; }

  /* O arco-íris atrás da doutora começa abaixo dos botões, sem ficar coberto por eles */
  .hero__photo { margin-top: .5rem; }

  /* Galeria: mais área para as fotos (são verticais) e pilha contida na moldura */
  .polaroid { padding: .7rem .7rem .85rem; }
  .polaroid-gallery__viewport { aspect-ratio: 1; }
  .polaroid-slide.is-next { transform: translate3d(8px, -5px, 0) scale(.97) rotate(1.6deg); }
  .polaroid-slide.is-prev { transform: translate3d(-8px, -4px, 0) scale(.96) rotate(-1.5deg); }
  /* reserva as linhas da legenda mais longa: a página não pula ao trocar de foto */
  .polaroid__caption { min-height: 5.6em; }
}
@media (max-width: 359px) {
  .polaroid__caption { min-height: 7em; }
}