/* ==========================================================================
   Receita: Foto e Silêncio — warm-botanical
   Fotografia como peça de composição. Densidade baixa.
   O verde continua agindo só nos botões, como manda a regra de cor da família.
   Consome foundation/core-tokens.css e o tokens.css da família.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--pwb-header-h) + 14px); }

body {
  margin: 0; background: var(--pwb-shell); color: var(--pwb-text);
  font-family: var(--pwb-font-body); font-size: var(--pwb-body-size);
  line-height: var(--pwb-body-leading); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: var(--ws2-focus-width) solid var(--pwb-forest); outline-offset: var(--ws2-focus-offset); border-radius: 4px; }

.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 300; background: var(--pwb-forest); color: #fff; padding: 10px 18px; border-radius: var(--pwb-radius-action); }
.skip-link:focus { left: 16px; }

.wrap { width: min(var(--ws2-container), calc(100% - 48px)); margin-inline: auto; }
.wrap.narrow { width: min(760px, calc(100% - 44px)); }
.center { text-align: center; }

.eyebrow { font-family: var(--pwb-font-heading); font-style: italic; font-size: 16px; color: var(--pwb-bronze); margin: 0 0 6px; }
.section-title {
  font-family: var(--pwb-font-heading); font-style: italic; font-weight: 400;
  font-size: var(--pwb-section-heading); line-height: 1.1; color: var(--pwb-heading);
  text-align: center; margin: 0 auto 48px; max-width: 18ch;
}

.action {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pwb-action); color: #FCF8F3; font-family: inherit;
  font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  padding: 15px 32px; border: 0; cursor: pointer; border-radius: var(--pwb-radius-action);
  transition: background var(--ws2-duration-fast) ease, transform var(--ws2-duration-fast) var(--pwb-ease);
}
.action:hover { background: var(--pwb-action-hover); transform: translateY(-2px); }

/* Navbar · nav-signature-left ------------------------------------------------ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--pwb-header-h);
  display: flex; align-items: center; gap: 26px; padding-inline: clamp(20px, 4vw, 52px);
  background: rgba(252, 248, 243, .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: background var(--ws2-duration-fast) ease, border-color var(--ws2-duration-fast) ease;
}
.header.scrolled { background: rgba(252, 248, 243, .97); border-bottom-color: var(--pwb-line); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark { width: 38px; height: 38px; color: var(--pwb-bronze); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-family: var(--pwb-font-heading); font-style: italic; font-weight: 500; font-size: 22px; color: var(--pwb-bronze); }
.brand-copy small { font-size: 11px; color: var(--pwb-text-muted); }
.nav { display: flex; gap: clamp(14px, 2vw, 26px); }
.nav a { font-size: var(--pwb-nav-size); font-weight: 500; position: relative; padding-block: 6px; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--pwb-forest); transition: width var(--ws2-duration-fast) ease; }
.nav a:hover::after { width: 100%; }

.menu-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 1.6px; background: var(--pwb-ink); margin: 6px 0; transition: transform .3s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-mobile { display: none; flex-direction: column; position: fixed; top: var(--pwb-header-h); left: 0; right: 0; z-index: 99; background: var(--pwb-shell); border-bottom: 1px solid var(--pwb-line); padding: 6px 24px 16px; }
.nav-mobile a { padding: 12px 0; border-bottom: 1px solid var(--pwb-line); font-weight: 500; }
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile.open { display: flex; }

/* Hero · hero-photo-fullbleed -------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
/* véu: o contraste do texto não depende da fotografia */
.hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(70,60,51,.34) 0%, rgba(70,60,51,.12) 34%, rgba(70,60,51,.62) 82%, rgba(70,60,51,.78) 100%); }
.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 24px clamp(120px, 16vh, 190px); width: min(900px, 100%); }
/* a citação é o <h1> da página: zera margem e peso do navegador, a aparência é a da citação */
h1.hero-quote { margin-top: 0; font-weight: inherit; }
.hero-quote {
  font-family: var(--pwb-font-heading); font-style: italic; font-weight: 400;
  font-size: clamp(27px, 3.8vw, 54px); line-height: 1.18; color: #FCF8F3;
  margin: 0 0 14px; text-shadow: 0 2px 22px rgba(46, 40, 34, .3);
}
.hero-sub { margin: 0 0 30px; color: rgba(252, 248, 243, .84); font-size: 17px; }
.arc { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(56px, 7vw, 120px); fill: var(--pwb-shell); z-index: 3; }

/* Faixas ------------------------------------------------------------------------ */
.band { padding-block: clamp(76px, 9vw, 112px); }
.band-shell { background: var(--pwb-shell); }
.band-sand { background: var(--pwb-sand); }

/* Services · services-card-grid -------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { background: transparent; border: var(--pwb-border); border-radius: 18px; padding: 34px 30px; }
.card h3 { font-family: var(--pwb-font-heading); font-style: italic; font-weight: 500; font-size: 26px; color: var(--pwb-bronze-deep); margin: 0 0 2px; text-align: center; }
.card-kicker { text-align: center; font-size: 13px; color: var(--pwb-text-muted); margin: 0 0 18px; }
.card p:last-child { margin: 0; font-size: 16px; color: var(--pwb-text-muted); }

/* Approach · approach-petal-media ------------------------------------------------- */
.petal-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); gap: clamp(34px, 6vw, 78px); align-items: center; }
.petal-media { margin: 0; position: relative; }
/* recorte em pétala: um canto reto, os demais arredondados */
.petal-media img { width: 100%; height: clamp(380px, 46vw, 560px); object-fit: cover; border-radius: 240px 240px 240px 18px; }
.petal-media figcaption {
  position: absolute; top: 6%; right: -14px; transform: rotate(90deg); transform-origin: right top;
  font-family: var(--pwb-font-heading); font-style: italic; font-size: 17px;
  color: var(--pwb-bronze); letter-spacing: .06em; white-space: nowrap;
}
.petal-copy h2 { font-family: var(--pwb-font-heading); font-style: italic; font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); color: var(--pwb-heading); margin: 0 0 8px; }
.lead { color: var(--pwb-text-muted); margin: 0 0 24px; }
.plain-list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 10px; }
.plain-list li { position: relative; padding-left: 20px; font-size: 16px; }
.plain-list li::before { content: "·"; position: absolute; left: 4px; color: var(--pwb-bronze); font-size: 20px; line-height: 1; }
.modalities { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; border-top: 1px solid var(--pwb-line); padding-top: 26px; }
.modalities h3 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--pwb-bronze-deep); margin: 0 0 8px; font-weight: 700; font-family: var(--pwb-font-body); }
.modalities p { margin: 0; font-size: 15px; color: var(--pwb-text-muted); }

/* Recognition · recognition-two-column --------------------------------------------- */
.recognition-list { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 44px; }
.recognition-list li { position: relative; padding-left: 28px; }
.recognition-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--pwb-clay); border: 1.5px solid var(--pwb-bronze); }
.recognition-close { max-width: 60ch; margin: 44px auto 0; text-align: center; font-family: var(--pwb-font-heading); font-style: italic; font-weight: 300; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.5; color: var(--pwb-bronze-deep); }

/* Reassurance · reassurance-quiet ----------------------------------------------------- */
.quiet-text { margin: 0 auto 18px; max-width: 64ch; color: var(--pwb-text); }

/* Faq · faq-accordion-over-photo ------------------------------------------------------- */
.faq-photo { position: relative; padding-block: clamp(76px, 10vw, 130px); overflow: hidden; }
.faq-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faq-veil { position: absolute; inset: 0; background: rgba(242, 233, 223, .55); }
.faq-photo .wrap { position: relative; z-index: 2; display: flex; justify-content: flex-start; }
.faq-card {
  background: var(--pwb-shell); border-radius: 20px; padding: clamp(30px, 4vw, 48px);
  width: min(620px, 100%); box-shadow: 0 26px 60px rgba(70, 60, 51, .16);
}
.faq-card h2 { font-family: var(--pwb-font-heading); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); color: var(--pwb-heading); text-align: center; margin: 0 0 26px; }
.accordion details { border-bottom: 1px solid var(--pwb-line); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary { cursor: pointer; list-style: none; position: relative; padding: 18px 34px 18px 0; font-size: 17px; color: var(--pwb-bronze-deep); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; position: absolute; right: 8px; top: 50%; margin-top: -5px; width: 9px; height: 9px; border-right: 1.6px solid var(--pwb-bronze); border-bottom: 1.6px solid var(--pwb-bronze); transform: rotate(-45deg); transition: transform var(--ws2-duration-fast) ease; }
.accordion details[open] summary::after { transform: rotate(45deg); margin-top: -8px; }
.accordion details p { margin: 0 0 18px; font-size: 16px; color: var(--pwb-text-muted); }

/* Contact · contact-form-whatsapp -------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 70px); align-items: start; }
.contact-copy h2 { font-family: var(--pwb-font-heading); font-style: italic; font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); color: var(--pwb-heading); margin: 0 0 14px; }
.contact-copy p { max-width: 42ch; color: var(--pwb-text-muted); }
.channels { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.channels li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.channels span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--pwb-clay); color: var(--pwb-bronze-deep); font-size: 14px; }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 700; color: var(--pwb-bronze-deep); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 16px; color: var(--pwb-ink);
  background: var(--pwb-shell); border: 1px solid rgba(110, 82, 48, .28);
  border-radius: 10px; padding: 12px 14px; resize: vertical;
  transition: border-color var(--ws2-duration-fast) ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--pwb-forest); outline: none; }
.field input.invalid, .field textarea.invalid { border-color: #A4553F; }
.hint { font-size: 13px; color: var(--pwb-muted); }
.contact-form .action { grid-column: 1 / -1; justify-self: start; }
.form-status { grid-column: 1 / -1; margin: 0; font-size: 15px; font-weight: 500; color: var(--pwb-forest-deep); }
.form-status.error { color: #8C4634; }

/* Footer · footer-compact ------------------------------------------------------------------ */
.footer { background: var(--pwb-sand); padding: 30px 0; font-size: 14px; color: var(--pwb-text-muted); }
.footer-row { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer strong { font-family: var(--pwb-font-heading); font-style: italic; color: var(--pwb-bronze); font-size: 17px; }

/* Contato flutuante --------------------------------------------------------------------------- */
.floating { position: fixed; right: 20px; bottom: 20px; z-index: 120; width: 56px; height: 56px; border-radius: 50%; background: var(--pwb-forest); color: #FCF8F3; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(58, 85, 64, .3); transition: transform var(--ws2-duration-fast) var(--pwb-ease); }
.floating svg { width: 29px; height: 29px; }
.floating:hover { transform: translateY(-3px); }

/* Revelação ------------------------------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .85s var(--pwb-ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-media { opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .7s ease, clip-path 1.1s var(--pwb-ease); }
.reveal-media.in { opacity: 1; clip-path: inset(0 0 0 0); }

/* Responsivo ------------------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .cards { grid-template-columns: 1fr; gap: 18px; }
  .petal-grid, .contact-grid { grid-template-columns: 1fr; }
  .petal-media { max-width: 520px; margin-inline: auto; }
  .recognition-list { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .wrap, .wrap.narrow { width: calc(100% - 32px); }
  .hero { min-height: 92svh; }
  .hero-content { padding-bottom: clamp(90px, 14vh, 130px); }
  .modalities { grid-template-columns: 1fr; gap: 18px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .action { justify-self: stretch; }
  .petal-media figcaption { display: none; }
  .footer-row { flex-direction: column; gap: 6px; }
}

/* Movimento reduzido -------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {html:not([data-ws2-motion="full"]) { scroll-behavior: auto; }html:not([data-ws2-motion="full"]) .reveal, html:not([data-ws2-motion="full"]) .reveal-media { transform: none !important; clip-path: none !important; transition: opacity .4s ease !important; }html:not([data-ws2-motion="full"]) .reveal.in, html:not([data-ws2-motion="full"]) .reveal-media.in { opacity: 1; }html:not([data-ws2-motion="full"]) .action:hover, html:not([data-ws2-motion="full"]) .floating:hover { transform: none; }
}

/* --- v1.14 — clip-path fora do elemento observado ---
   O IntersectionObserver do Chrome calcula a área visível do alvo DEPOIS de aplicar o clip-path
   do próprio alvo. Com clip-path: inset(0 0 100% 0), a área visível é zero, o limiar nunca é
   atingido e a classe .in nunca chega: a imagem fica invisível para sempre.
   O recorte agora vive no primeiro filho (a imagem ou a moldura dela). O elemento observado
   nunca é recortado, então o observer sempre enxerga. */
.reveal-media, .reveal-media.in { clip-path: none !important; }
.reveal-media > :first-child { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s cubic-bezier(.22, 1, .36, 1); }
.reveal-media.in > :first-child { clip-path: inset(-60px); }
@media (prefers-reduced-motion: reduce) {
  html:not([data-ws2-motion="full"]) .reveal-media > :first-child { clip-path: none; transition: none; }
}