/* Layout da landing. Componentes ficam em components.css; valores em tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.band { padding-block: clamp(72px, 9vw, 112px); }
.band--soft { background: var(--surface-soft); }
:root { color-scheme: light; }

/* Barra da proposta */
.proposal { background: var(--surface-mint); color: var(--ink); font-size: 12px; letter-spacing: .04em; }
.proposal .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding-block: 8px; text-align: center; }
.proposal b { letter-spacing: .14em; }
.proposal span { opacity: .75; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 80px; }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand img { width: 56px; height: 56px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: #fff; object-fit: contain; }
.brand span { font: 400 20px/1 var(--font-display); letter-spacing: -0.01em; }
.site-nav { display: flex; gap: var(--space-8); }
.site-nav a { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink-muted); }
.site-nav a:hover { color: var(--ink); }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-12); align-items: center; padding-block: clamp(40px, 6vw, 88px); }
.hero__copy { min-width: 0; }
.hero__intro { max-width: 44ch; margin-block: var(--space-8); font-size: 18px; color: var(--ink-muted); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.hero__media { position: relative; justify-self: center; width: min(100%, 440px); }
.hero__media .pm-ba { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); }
.hero__media .pm-stamp { position: absolute; left: -36px; bottom: 64px; z-index: 4; }
.hero__media figcaption { margin-top: var(--space-3); font-size: 13px; color: var(--ink-muted); text-align: center; }
.bubble { position: absolute; border-radius: var(--radius-pill); border: 2px solid var(--mint-vivid); opacity: .5; pointer-events: none; }
.bubble--a { width: 120px; height: 120px; top: -28px; right: -24px; }
.bubble--b { width: 44px; height: 44px; top: 120px; right: -56px; background: var(--surface-mint); border-color: transparent; opacity: 1; }

/* Cuidado */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-12); align-items: start; }
.split > * { min-width: 0; }
.lead { font-size: 18px; color: var(--ink-muted); max-width: 46ch; margin-top: var(--space-6); }
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.services li { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.services .dot { width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--mint); display: grid; place-items: center; }
.services .dot svg { width: 24px; height: 24px; stroke: var(--on-mint); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.services h3 { font: 600 20px/1.3 var(--font-sans); }
.services p { margin-top: 4px; color: var(--ink-muted); }
.services__source { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-4); }
.services + .pm-note { margin-top: var(--space-6); }

/* Galeria */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-12); }
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.photos .pm-photo:nth-child(2) { margin-top: var(--space-12); }
.fineprint { margin-top: var(--space-8); font-size: 13px; color: var(--ink-muted); }

/* Visite */
.visit { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-8); padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.visit > * { min-width: 0; }
.visit address { font-style: normal; margin-top: var(--space-6); font: 400 clamp(24px, 3vw, 32px)/1.2 var(--font-display); }
.visit address small { display: block; margin-top: var(--space-2); font: 400 15px/1.5 var(--font-sans); color: var(--ink-muted); }
.visit dl { display: grid; gap: var(--space-4); margin: 0; align-content: start; }
.visit dt { font: 700 12px/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.visit dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; }
.visit dd span { font-weight: 400; color: var(--ink-muted); font-size: 14px; display: block; }
.visit .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* FAQ */
.faq-side .pm-link { margin-top: var(--space-6); }

/* CTA final */
.cta { background: var(--surface-mint); color: var(--ink); text-align: center; }
.cta p { max-width: 46ch; margin: var(--space-6) auto var(--space-8); font-size: 18px; }
.cta .phone { display: block; margin-top: var(--space-4); font-size: 14px; }

/* Rodapé */
.site-footer { background: var(--surface-soft); font-size: 14px; color: var(--ink-muted); padding-bottom: 96px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); padding-block: var(--space-12); }
.site-footer .brand span { color: var(--ink); }
.site-footer b { color: var(--ink); letter-spacing: .14em; }

/* Loader com rastro de patinhas */
#page-loader { display: none; position: fixed; inset: 0; z-index: 100; background: var(--surface-mint); color: var(--mint-deep); place-items: center; }
.is-loading #page-loader { display: grid; }
.is-loading body { overflow: hidden; }
.paw-trail { position: relative; width: min(420px, 78vw); height: 110px; margin-inline: auto; }
.paw-trail svg { position: absolute; width: 38px; height: 38px; left: calc(var(--i) * 12%); top: 6px; fill: currentColor; opacity: 0; transform: rotate(90deg); animation: paw-step .8s ease-out forwards; animation-delay: calc(var(--i) * .26s); }
.paw-trail svg:nth-child(even) { top: 60px; }
#page-loader p { margin-top: var(--space-4); text-align: center; font: 400 22px/1.2 var(--font-display); }
@keyframes paw-step { 0% { opacity: 0; transform: translateX(-6px) rotate(90deg) scale(.8); } 40%, 70% { opacity: 1; transform: rotate(90deg); } 100% { opacity: .3; transform: rotate(90deg); } }

/* Revelação ao rolar (o conteúdo fica visível sem JS) */
.motion-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.3,1); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .hero .wrap, .split, .visit { grid-template-columns: 1fr; }
  .hero__media { width: min(100%, 380px); }
  .hero__media .pm-stamp { left: -12px; width: 96px; }
  .bubble--b { display: none; }
}
@media (max-width: 600px) {
  .site-header .wrap { height: 68px; }
  .brand img { width: 46px; height: 46px; }
  .brand span { display: none; }
  .photos { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .photos .pm-photo:nth-child(2) { margin-top: 0; }
  .photos .pm-photo:nth-child(3) { grid-column: 1 / -1; }
  .photos .pm-photo:nth-child(3) .pm-photo__frame { aspect-ratio: 4 / 3; }
  .pm-chat-launch .label { display: none; }
  .pm-chat-launch { padding: 0 var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .paw-trail svg { animation: none; opacity: .7; }
  .motion-ready .reveal { opacity: 1; transform: none; transition: none; }
}