/* Nanda Coutinho · Estética Avançada · fullface
   Versão 4 (22/10/2026): a foto panorâmica da sala é o fundo contínuo da seção inteira.
   A copy fica sobre a parede bege à esquerda e a Nanda à direita; nenhuma coluna com fundo próprio.
   A foto não é alterada: só recorte por object-fit. Fundo de apoio = tom da parede da foto (#C6B2A7). */
.ffp{--ffp-wall:#C6B2A7;--ffz-wine:#572438;--ffz-ink:#33262A;--ffz-soft:#46363A;--ffp-gutter:clamp(24px,5vw,72px);
  padding:clamp(12px,1.6vw,24px);background:#FFFFFF;font-family:'Manrope',system-ui,sans-serif;color:var(--ffz-ink)}
.ffp-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;background:var(--ffp-wall);
  display:grid;height:clamp(520px,40vw,600px);width:100%;max-width:1600px;margin:0 auto;
  grid-template-columns:var(--ffp-gutter) minmax(0,min(46%,640px)) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);
  grid-template-areas:". . ." ". text ." ". action ." ". . ."}

/* Foto como fundo da seção inteira */
.ffp-media{position:absolute;inset:0;z-index:-1}
.ffp-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:78% 24%}
/* Luz natural sobre a parede, à esquerda: marfim e bege da própria foto, some antes do rosto da Nanda.
   Só gradientes, sem blur e sem caixa atrás da copy. No celular a foto é recortada na Nanda, então a luz não se aplica. */
.ffp-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 54% 78% at 16% 44%,rgba(251,245,239,.32) 0%,rgba(244,234,226,.19) 36%,rgba(232,218,208,.07) 62%,rgba(232,218,208,0) 82%),
    linear-gradient(90deg,rgba(247,239,232,.14) 0%,rgba(247,239,232,.07) 30%,rgba(247,239,232,0) 52%)}

/* Copy sobre a parede (o botão usa a classe compartilhada .cta-agendar, em tokens.css) */
.ffz-text{grid-area:text}
.ffz-title{margin:0;font-family:inherit;font-weight:600;font-size:clamp(38px,4vw,58px);line-height:1.06;letter-spacing:-.028em;color:var(--ffz-wine);text-wrap:balance;max-width:560px}
.ffz-copy{margin-top:clamp(20px,2vw,28px);max-width:620px}
.ffz-copy p{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.65;text-wrap:pretty}
.ffz-copy p + p{margin-top:12px}

.ffz-action{grid-area:action;padding-top:clamp(28px,2.8vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ffz-note{margin:0;font-size:13px;color:var(--ffz-soft)}

/* Telas médias: a parede ocupa menos espaço, então a copy fica mais estreita */
/* Telas de 1181 a 1600 px: o painel é mais baixo que a foto; subir o recorte para o corte cair acima das mãos */
@media (min-width:1181px) and (max-width:1600px){.ffp-media img{object-position:78% 2%}}

@media (max-width:1180px) and (min-width:861px){
  .ffp-panel{height:540px;grid-template-columns:var(--ffp-gutter) minmax(0,46%) minmax(0,1fr)}
  .ffp-media img{object-position:82% 22%}
}

/* Celular: copy, foto em largura total, botão; mesmo bege contínuo */
@media (max-width:860px){
  .ffp{padding:0}
  .ffp-panel{border-radius:0;height:auto;max-width:none;
    grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"text" "media" "action"}
  .ffp-media{position:relative;inset:auto;z-index:auto;grid-area:media;aspect-ratio:4 / 5;overflow:hidden}
  .ffp-media::after{display:none}
  .ffp-media::before{content:"";position:absolute;inset:0 0 auto;height:44px;background:linear-gradient(var(--ffp-wall),rgba(198,178,167,0));z-index:1;pointer-events:none}
  .ffp-media img{object-position:91% 50%}
  .ffz-text{padding:56px 24px 28px}
  .ffz-title{font-size:clamp(34px,9.6vw,42px)}
  .ffz-copy p{font-size:17px}
  .ffz-action{padding:28px 24px 56px;align-items:stretch}
}