/* 14/10/2026 — ajustes de celular da home (ver js/celular.js). No computador nada muda. */
.flor-foto{display:none}
@media (max-width:760px){
  /* menu: mostra "Menu"/"Fechar" ao lado da florzinha */
  .menu span{display:inline !important;font-size:10px;letter-spacing:.16em;margin-left:6px}
  /* rótulos da flor quebram em duas linhas em vez de sair cortados pela borda */
  .pitanga .gm{max-width:24vw !important}
  .pitanga .gm b{white-space:normal;display:block;font-size:9.5px !important;letter-spacing:.08em !important;line-height:1.25}
  .pitanga .gm-L b{text-align:right}
  /* foto da pétala tocada, logo abaixo da flor */
  .flor-foto{display:block;width:100%;max-width:520px;margin:4px auto 0;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
  .flor-foto.on{opacity:1;transform:none}
  .flor-foto-q{aspect-ratio:4/3;overflow:hidden;border-radius:0 64px 0 64px;background:#2a2826}
  .flor-foto-q img{width:100%;height:100%;object-fit:cover;display:block}
  .flor-foto figcaption{display:flex;flex-direction:column;gap:4px;margin-top:12px}
  .flor-foto figcaption b{color:#E07A2E;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
  .flor-foto figcaption span{color:rgba(243,234,223,.72);font-size:14px;line-height:1.45}
  .flor-dica{margin:14px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,234,223,.45)}
  .pitanga{padding-bottom:72px !important}
  /* WhatsApp: balão só quando liberado (uma vez); o botão verde continua sempre */
  body:not(.wa-ok) .wa .wa-balao{display:none}
}
@media (prefers-reduced-motion:reduce){.flor-foto{transition:none}}

/* 15/10/2026 — hero no celular: esboço e foto no MESMO quadro e MESMO recorte; a foto aparece por dissolução vertical.
   (antes: esboço em 100% da altura e foto numa faixa de 46%, com escalas diferentes -> traço do desenho invadia a foto)
   Sem animar máscara: só opacidade, que funciona em qualquer iOS. No computador nada muda. */
@media (max-width:760px){
  .hero{transition:none}
  .hero .hero-esboco,.hero .hero-foto{top:0;bottom:auto;height:100%;object-position:85% 50%}
  .hero .hero-foto{
    -webkit-mask-image:linear-gradient(180deg,transparent 36%,#000 72%);
    mask-image:linear-gradient(180deg,transparent 36%,#000 72%);
    opacity:0;transition:opacity 2.6s ease .6s}
  .hero.revelado .hero-foto{opacity:1}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.hero .hero-foto{opacity:1;transition:none}}

/* flor: reinício instantâneo (sem transições) enquanto está fora da tela */
.flor-wrap.reinicia *{transition:none !important}

/* 15/10/2026 (b) — Reduzir Movimento (iPhone/Android): a flor aparece só por fade, sem rotação nem escala, e repete ao voltar */
@media (prefers-reduced-motion:reduce){
  .flor-wrap .campo,.flor-wrap .gomo-g image,.flor-wrap .gomo-g .tinta,.flor-wrap .semente,.flor-wrap .fios circle{transition:opacity 1.6s ease !important}
  .flor-wrap .gomo-g image,.flor-wrap .gomo-g .tinta{transition-delay:calc(var(--d) * .5 + 300ms) !important}
  .flor-wrap .fios{opacity:0;transition:opacity 1.6s ease .8s !important}
  .flor-wrap.aberta .fios{opacity:1}
  .flor-wrap .fios path{stroke-dashoffset:0 !important}
  .flor-wrap .gm{transform:translateY(-50%) !important;transition:opacity 1.2s ease calc(var(--d) * .5) !important}
  .flor-wrap.reinicia.reinicia *{transition:none !important}
}