/* ==========================================================================
   Dra. Jéssica Rodrigues Pedroso · Ginecologia e Obstetrícia
   Folha de estilo única do site. Ordem das seções = ordem da página.
   ========================================================================== */

:root{
  /* ——— paleta da marca ——— */
  --rosa:      #B97A6B;
  --areia:     #D6B08A;
  --creme:     #F3EBDD;
  --nude:      #C9A88E;
  --terracota: #A86D57;
  --taupe:     #B8A79B;
  --dourado:   #C49A52;
  --tinta:     #4C3A32;
  --tinta-70:  #6B554A;
  --escuro:    #33241E;
  --fio:       rgba(168,109,87,.18);
  --ease:      cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--tinta);
  font-family:"Lato",-apple-system,"Segoe UI",sans-serif;
  font-weight:400;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-color:#EFE6D7;
  background-image:
    url("../img/textura-fundo.png"),
    linear-gradient(165deg,#F4ECDF 0%,#EFE6D7 48%,#E9DDCB 100%);
  background-repeat:repeat,no-repeat;
  background-attachment:fixed,fixed;
  background-position:center center,center center;
  background-size:clamp(112px,11vw,150px) auto,cover;
}
/* grão sobre o fundo */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.10;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='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ═══ coluna ═══ */
.page{
  position:relative;z-index:2;
  width:100%;max-width:520px;margin:0 auto;
  background:var(--creme);overflow:hidden;
  box-shadow:0 0 70px -12px rgba(76,50,38,.34);
}
.page::after{                    /* grão fino sobre a coluna inteira */
  content:"";position:absolute;inset:0;z-index:30;pointer-events:none;
  opacity:.055;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pad{padding-left:clamp(20px,5.5vw,34px);padding-right:clamp(20px,5.5vw,34px)}
.cg{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400}

/* ═══ 1 · HERO ═══ */
/* a foto entra no fluxo, em tamanho natural: nunca é recortada. */
.hero{position:relative;overflow:hidden;background:#2A1C15}
.hero__img{display:block;position:relative}
.hero__img img{display:block;width:100%;height:auto}
.hero__img picture{display:block}
.hero__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(170deg,rgba(214,176,138,.20),rgba(168,109,87,.22));
  mix-blend-mode:multiply;
}
/* escurece só o rodapé da imagem, o bastante para o texto ler,
   e termina numa divisão reta com a dobra seguinte */
.hero__veu{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(38,25,19,.10) 0%,
    rgba(38,25,19,.03) 24%,
    rgba(38,25,19,.26) 46%,
    rgba(38,25,19,.62) 64%,
    rgba(38,25,19,.84) 80%,
    rgba(38,25,19,.90) 100%);
}
.hero__in{
  position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;
  padding:0 clamp(20px,5.5vw,34px) clamp(30px,7vw,42px);
}
.hero__titulo{margin:0;font-size:inherit;font-weight:inherit;line-height:0}
.hero__logo{
  display:block;margin:0 auto;
  width:clamp(158px,42vw,206px);height:auto;
  filter:drop-shadow(0 8px 24px rgba(24,15,10,.6));
}
.hero__sub{
  margin:20px auto 0;max-width:28ch;font-size:13.5px;line-height:1.6;
  color:rgba(251,246,236,.85);text-shadow:0 1px 10px rgba(24,15,10,.6);
}
.hero__loc{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:20px 0 0;font-size:9.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(251,246,236,.78);
  text-shadow:0 1px 8px rgba(24,15,10,.7);
}
.hero__loc::before,.hero__loc::after{content:"";width:20px;height:1px;background:var(--dourado);opacity:.85}
.desce{
  display:block;margin:18px auto 0;width:22px;color:rgba(251,246,236,.55);
  animation:respira 2.6s ease-in-out infinite;
}
.desce svg{display:block}
@keyframes respira{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ═══ 2 · QUEM SOU EU ═══ */
.sobre{position:relative;overflow:hidden;padding:clamp(44px,10vw,64px) 0 clamp(30px,7vw,44px)}
.sobre::before{
  content:"";position:absolute;left:50%;top:0;width:1px;height:36px;
  background:linear-gradient(to bottom,transparent,var(--dourado));opacity:.65;
}
.sobre__wm{
  position:absolute;z-index:0;pointer-events:none;
  width:min(84%,380px);aspect-ratio:1/1;
  top:clamp(96px,24vw,150px);left:50%;transform:translateX(-44%);
  background:url("../img/marca-dagua.png") center/contain no-repeat;opacity:.085;
}
.sobre__in{position:relative;z-index:1}
.tit{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(30px,8vw,38px);line-height:1.08;margin:0;
}
.tit i{font-style:italic;color:var(--terracota)}
.rule{width:30px;height:1px;background:var(--dourado);margin:20px 0 24px;opacity:.85}
.sobre p{margin:0;font-size:15px;line-height:1.82;color:var(--tinta-70)}
.sobre p + p{margin-top:16px}
.sobre p b{font-weight:700;color:var(--tinta)}
.fecho{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300;
  font-size:20px!important;line-height:1.5!important;color:var(--terracota)!important;
  margin-top:26px!important;padding-left:18px;border-left:1px solid var(--dourado);
}

/* ═══ 3 · GALERIA ═══ */
.galeria{padding:clamp(8px,2vw,14px) 0 clamp(30px,7vw,44px)}
.galeria__grade{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.galeria figure{margin:0;overflow:hidden;border-radius:5px;background:var(--nude);position:relative}
.galeria figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(170deg,rgba(214,176,138,.16),rgba(168,109,87,.14));
  mix-blend-mode:multiply;
}
.galeria picture{display:block;width:100%;height:100%}
.galeria img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.galeria figure:hover img{transform:scale(1.035)}
.g--larga{grid-column:1/-1;aspect-ratio:4/5}
.g--alta{aspect-ratio:3/4}
.leg{
  text-align:center;font-size:9.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--taupe);margin:16px 0 0;
}

/* ═══ 4 · BOTÕES ═══ */
.acao{padding:clamp(30px,7vw,46px) 0 clamp(34px,8vw,52px)}
.acao__cab{text-align:center;margin-bottom:26px}
.acao__cab .no{
  width:9px;height:9px;border-radius:50%;border:1px solid var(--dourado);
  margin:0 auto 20px;
}
.acao__cab h2{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:29px;letter-spacing:.005em;margin:0;
}
.acao__cab p{font-size:14px;color:var(--tinta-70);max-width:34ch;margin:10px auto 0}
.links{display:flex;flex-direction:column;gap:12px;max-width:460px;margin:0 auto}
.link{
  display:flex;align-items:center;gap:15px;
  padding:19px 22px;border-radius:15px;
  text-decoration:none;color:inherit;
  transition:transform .35s var(--ease),background-color .35s ease,border-color .35s ease;
}
.link__ring{
  flex:0 0 auto;width:11px;height:11px;border-radius:50%;
  border:1px solid currentColor;opacity:.55;
  transition:background-color .35s ease,opacity .35s ease;
}
.link__txt{flex:1 1 auto;min-width:0}
.link__label{font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.2}
.link__sub{font-size:11.5px;opacity:.75;margin-top:4px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link__arrow{flex:0 0 auto;opacity:.5;transition:transform .35s var(--ease)}
.link--primary{background:var(--rosa);color:var(--creme);box-shadow:0 16px 32px -20px rgba(168,109,87,.95)}
.link--ghost{background:rgba(255,252,246,.7);color:var(--tinta);border:1px solid var(--nude)}
.link:hover,.link:focus-visible{transform:translateY(-2px)}
.link:hover .link__ring,.link:focus-visible .link__ring{background:currentColor;opacity:1}
.link:hover .link__arrow,.link:focus-visible .link__arrow{transform:translateX(3px)}
.link--primary:hover,.link--primary:focus-visible{background:var(--terracota)}
.link--ghost:hover,.link--ghost:focus-visible{background:#FFFDF8;border-color:var(--terracota)}

/* ═══ 5 · RODAPÉ ═══ */
.pe{
  background:#EDE1CF;border-top:1px solid rgba(201,168,142,.5);
  text-align:center;
  padding:36px clamp(20px,5.5vw,34px) calc(34px + env(safe-area-inset-bottom));
}
.pe__selo{width:84px;height:auto;display:block;margin:0 auto 26px;opacity:.9}
.pe__soc{display:flex;gap:10px;justify-content:center;margin-bottom:20px}
.pe__soc a{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--nude);
  display:grid;place-items:center;color:var(--terracota);
  transition:background-color .3s ease,border-color .3s ease,color .3s ease;
}
.pe__soc a:hover{background:var(--rosa);border-color:var(--rosa);color:var(--creme)}
.pe__soc svg{width:18px;height:18px}
.pe p,
.pe address{font-size:12.5px;font-style:normal;color:var(--tinta-70);line-height:1.7;max-width:32ch;margin:0 auto}
.pe a.tel{color:var(--terracota);text-decoration:none;border-bottom:1px solid rgba(196,154,82,.55)}
.pe a.tel:hover{color:var(--rosa)}
.pe__crm{
  font-size:9.5px!important;font-weight:700;letter-spacing:.22em;line-height:2;
  text-transform:uppercase;color:var(--taupe)!important;margin-top:22px!important;
}

a:focus-visible{outline:2px solid var(--terracota);outline-offset:3px;border-radius:3px}

/* ═══ movimento ═══ */
.rise{opacity:0;transform:translateY(14px);animation:rise .85s var(--ease) forwards}
.d1{animation-delay:.08s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s var(--ease)}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{animation:none;opacity:1;transform:none}
  .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}
@media (max-width:359px){
  .hero__logo{width:142px}
}