/* Ajustes finos de tipografia e leitura para desktop e mobile. */
h1{
  font-size:clamp(2.65rem,5.2vw,5.35rem);
  line-height:1.01;
}

h2{
  font-size:clamp(2rem,3.45vw,3.65rem);
  line-height:1.02;
}

/* Hero com a fachada ocupando todo o fundo. */
.hero{
  min-height:calc(100svh - 113px);
  background-image:url("../img/clinica-femiclin-hero.png.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(43,27,22,.82) 0%,rgba(66,41,33,.68) 36%,rgba(61,39,32,.34) 63%,rgba(35,23,20,.10) 100%),
    linear-gradient(180deg,rgba(35,23,20,.08),rgba(35,23,20,.28));
}

.hero-noise{
  z-index:0;
  opacity:.07;
  pointer-events:none;
}

.hero-grid{
  position:relative;
  z-index:1;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  padding:96px 0 138px;
}

.hero-copy{
  max-width:720px;
}

/* Remove o antigo card/placeholder da direita do hero. */
.hero-visual{
  display:none !important;
}

.hero-curve{
  z-index:2;
}

/* Foto real da Dra. Fátima no bloco de atendimento. */
.welcome-visual{
  min-height:0;
  aspect-ratio:1 / 1;
  background-image:url("../img/assetsimgdra-fatima-atendimento-01.png.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.welcome-visual > img,
.welcome-visual .floating-note{
  display:none !important;
}

/* Imagens dos seis serviços. */
.service-card__visual{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.service-card__visual::before{
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  transform:none;
  background:linear-gradient(180deg,rgba(50,32,26,.02) 30%,rgba(50,32,26,.38) 100%);
}

.service-card__visual::after{
  display:none;
}

.service-card__visual span{
  color:#fff;
  text-shadow:0 3px 18px rgba(45,28,23,.35);
}

.service-card__visual--1{background-image:url("../img/01-ginecologia.png") !important;}
.service-card__visual--2{background-image:url("../img/02-climaterio-e-menopausa.png") !important;}
.service-card__visual--3{background-image:url("../img/03-saude-intima.png") !important;}
.service-card__visual--4{background-image:url("../img/03-smart-multi-hifu.png") !important;}
.service-card__visual--5{background-image:url("../img/05-ninfoplastia.png") !important;}
.service-card__visual--6{background-image:url("../img/06-obstetricia.png") !important;}

/* Saúde íntima: substitui a arte abstrata pela nova foto de consultório. */
.intimate-art{
  background-image:url("../img/saude-intima-consultorio.png.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.intimate-art::before{
  background:linear-gradient(180deg,rgba(65,43,35,.02),rgba(65,43,35,.08)) !important;
}

.intimate-art .petal,
.intimate-art .intimate-art__copy{
  display:none !important;
}

/* Sobre a doutora: usa o novo retrato enviado para o bloco principal. */
.about-photo{
  background-image:url("../img/dra-fatima-sobre.png.png") !important;
  background-size:cover !important;
  background-position:center 22% !important;
  background-repeat:no-repeat !important;
}

.about-photo > img{
  display:none !important;
}

/* Galeria com a equipe em destaque e quatro imagens menores da clínica à direita. */
.gallery-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.62fr) minmax(0,.82fr) minmax(0,.82fr) !important;
  grid-template-rows:repeat(2,minmax(220px,1fr)) !important;
  grid-auto-rows:unset !important;
  gap:14px !important;
  align-items:stretch;
}

.gallery-item{
  min-height:0 !important;
  width:100%;
  height:100%;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  cursor:default;
  pointer-events:none;
}

/* As imagens ficam limpas, sem etiquetas e sem degradê por cima. */
.gallery-item::before{
  background:transparent !important;
}

.gallery-item span{
  display:none !important;
}

/* Equipe: bloco principal à esquerda, ocupando as duas linhas. */
.gallery-item:nth-child(5){
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  background-image:url("../img/DRA-FATIMA-EQUIPE-11.jpg") !important;
  background-position:center 22% !important;
}

/* Quatro fotos menores da clínica à direita. */
.gallery-item:nth-child(2){
  grid-column:2 !important;
  grid-row:1 !important;
  background-image:url("../img/04-recepcao-certificados.png") !important;
}

.gallery-item:nth-child(1){
  grid-column:3 !important;
  grid-row:1 !important;
  background-image:url("../img/06-visao-geral-clinica.png") !important;
  background-position:center center !important;
}

.gallery-item:nth-child(3){
  grid-column:2 !important;
  grid-row:2 !important;
  background-image:url("../img/02-litron.png") !important;
}

.gallery-item:nth-child(4){
  grid-column:3 !important;
  grid-row:2 !important;
  background-image:url("../img/05-sala-espera-recepcao.png") !important;
}

/* Pre-atendimento: os campos apenas liberam o CTA do WhatsApp. */
.contact-form{
  position:relative;
  overflow:hidden;
}

.whatsapp-gate__head{
  grid-column:1 / -1;
  padding:2px 2px 22px;
  margin-bottom:2px;
  border-bottom:1px solid rgba(151,86,65,.1);
}

.whatsapp-gate__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--rose-100);
  color:var(--brick);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.whatsapp-gate__badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brick);
  box-shadow:0 0 0 5px rgba(151,86,65,.08);
}

.whatsapp-gate__head strong{
  display:block;
  max-width:560px;
  margin-bottom:7px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.7rem,2.4vw,2.3rem);
  line-height:1.03;
  color:var(--ink);
}

.whatsapp-gate__head p{
  max-width:600px;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.55;
}

.whatsapp-gate__status{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:11px 14px;
  border:1px solid rgba(151,86,65,.1);
  border-radius:14px;
  background:var(--rose-50);
  color:var(--muted);
  transition:.22s ease;
}

.whatsapp-gate__status span{
  width:10px;
  height:10px;
  flex:0 0 auto;
  border-radius:50%;
  background:#c9b6ae;
  transition:.22s ease;
}

.whatsapp-gate__status strong{
  font-size:.75rem;
  line-height:1.4;
}

.whatsapp-gate__status.is-ready{
  border-color:rgba(151,86,65,.22);
  background:#fff;
  color:var(--taupe);
}

.whatsapp-gate__status.is-ready span{
  background:var(--brick);
  box-shadow:0 0 0 5px rgba(151,86,65,.1);
}

.contact-form .btn[disabled]{
  opacity:.42;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none;
  filter:saturate(.55);
}

.contact-form .btn.is-ready{
  opacity:1;
  cursor:pointer;
}

.form-note{
  max-width:560px;
  margin-inline:auto;
}

@media (max-width:1100px){
  .hero h1{font-size:clamp(2.65rem,5.8vw,4.7rem)}
  .hero-grid{grid-template-columns:minmax(0,1fr)}

  .gallery-grid{
    grid-template-columns:minmax(0,1.45fr) repeat(2,minmax(0,.8fr)) !important;
    grid-template-rows:repeat(2,minmax(190px,1fr)) !important;
  }
}

@media (max-width:820px){
  .hero{
    min-height:calc(100svh - 98px);
    background-position:center center;
  }
  .hero::before{
    background:linear-gradient(180deg,rgba(43,27,22,.54),rgba(43,27,22,.72));
  }
  .hero-grid{padding:72px 0 122px}

  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:380px 200px 200px !important;
  }

  .gallery-item:nth-child(5){grid-column:1 / -1 !important;grid-row:1 !important;background-position:center 20% !important;}
  .gallery-item:nth-child(2){grid-column:1 !important;grid-row:2 !important;}
  .gallery-item:nth-child(1){grid-column:2 !important;grid-row:2 !important;}
  .gallery-item:nth-child(3){grid-column:1 !important;grid-row:3 !important;}
  .gallery-item:nth-child(4){grid-column:2 !important;grid-row:3 !important;}

  .about-photo{
    background-position:center 20% !important;
  }
}

@media (max-width:620px){
  h1{font-size:clamp(2.35rem,11.5vw,3.25rem)}
  h2{font-size:clamp(1.9rem,9vw,2.55rem)}
  .contact-copy h2{max-width:12ch}
  .hero{
    min-height:calc(100svh - 98px);
    background-position:center center;
  }
  .hero::before{
    background:linear-gradient(180deg,rgba(43,27,22,.58),rgba(43,27,22,.76));
  }
  .hero-grid{padding:58px 0 104px}

  .gallery-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:360px repeat(4,220px) !important;
  }

  .gallery-item:nth-child(5){grid-column:1 !important;grid-row:1 !important;background-position:center 18% !important;}
  .gallery-item:nth-child(2){grid-column:1 !important;grid-row:2 !important;}
  .gallery-item:nth-child(1){grid-column:1 !important;grid-row:3 !important;}
  .gallery-item:nth-child(3){grid-column:1 !important;grid-row:4 !important;}
  .gallery-item:nth-child(4){grid-column:1 !important;grid-row:5 !important;}

  .intimate-art{
    min-height:420px !important;
    background-position:center center !important;
  }

  .about-photo{
    background-position:center 18% !important;
  }

  .whatsapp-gate__head{
    padding-bottom:18px;
  }

  .whatsapp-gate__status{
    align-items:flex-start;
  }
}


/* Serviços em acordeão horizontal inspirado no comportamento visual de PW. */
@media (min-width:1024px){
  .services-viewport{
    overflow:hidden !important;
    padding:4px 2px 18px !important;
  }

  .services-track{
    gap:12px !important;
    height:410px;
    align-items:stretch !important;
  }

  .service-card{
    position:relative;
    flex:1 1 0 !important;
    min-width:0 !important;
    height:410px;
    aspect-ratio:auto !important;
    border-radius:24px !important;
    overflow:hidden;
    cursor:pointer;
    background:var(--nude-100);
    transform:none !important;
    box-shadow:0 14px 34px rgba(74,48,39,.08);
    transition:
      flex-grow .58s cubic-bezier(.2,.72,.22,1),
      flex-basis .58s cubic-bezier(.2,.72,.22,1),
      box-shadow .3s ease,
      border-color .3s ease !important;
  }

  .service-card.is-active{
    flex-grow:2.7 !important;
    box-shadow:0 24px 56px rgba(74,48,39,.16);
    border-color:rgba(151,86,65,.18);
  }

  .service-card__visual{
    position:absolute !important;
    inset:0;
    width:100%;
    height:100% !important;
    padding:0 !important;
    transition:transform .65s cubic-bezier(.2,.72,.22,1);
  }

  .service-card.is-active .service-card__visual{
    transform:scale(1.035);
  }

  .service-card__visual::before{
    background:
      linear-gradient(180deg,rgba(43,27,22,.05) 15%,rgba(43,27,22,.18) 52%,rgba(43,27,22,.78) 100%) !important;
  }

  .service-card__visual span{
    position:absolute !important;
    top:20px;
    left:20px;
    z-index:3;
    font-size:2.25rem !important;
    line-height:1 !important;
    opacity:.92;
    transition:opacity .3s ease, transform .45s ease;
  }

  .service-card.is-active .service-card__visual span{
    transform:translateY(-2px);
  }

  .service-card__body{
    position:absolute !important;
    inset:0;
    z-index:4;
    width:100%;
    height:100% !important;
    padding:28px 20px 24px !important;
    display:flex !important;
    flex-direction:column;
    justify-content:flex-end;
    background:
      linear-gradient(180deg,rgba(43,27,22,0) 34%,rgba(43,27,22,.10) 50%,rgba(43,27,22,.84) 100%);
  }

  .service-card__body > span{
    margin:0 0 8px !important;
    color:rgba(255,255,255,.8) !important;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .28s ease .08s, transform .36s ease .08s;
  }

  .service-card h3{
    margin:0 !important;
    color:#fff !important;
    font-size:clamp(1.18rem,1.48vw,1.6rem) !important;
    line-height:1.02;
    text-shadow:0 3px 18px rgba(31,18,14,.25);
    transition:font-size .45s ease, margin .45s ease, transform .45s ease;
  }

  .service-card p,
  .service-card .card-link{
    max-height:0;
    margin:0 !important;
    padding-top:0 !important;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    transform:translateY(12px);
    transition:
      max-height .48s ease,
      opacity .28s ease,
      transform .42s ease,
      margin .42s ease,
      padding .42s ease;
  }

  .service-card p{
    color:rgba(255,255,255,.88) !important;
    font-size:.84rem !important;
    line-height:1.52 !important;
    -webkit-line-clamp:unset !important;
  }

  .service-card .card-link{
    color:#fff !important;
  }

  .service-card.is-active .service-card__body > span{
    opacity:1;
    transform:none;
  }

  .service-card.is-active h3{
    margin-bottom:10px !important;
    font-size:clamp(1.7rem,2vw,2.2rem) !important;
  }

  .service-card.is-active p{
    max-height:120px;
    margin-bottom:4px !important;
    opacity:1;
    transform:none;
  }

  .service-card.is-active .card-link{
    max-height:54px;
    padding-top:14px !important;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  .service-card:not(.is-active) .service-card__body{
    padding-inline:16px !important;
  }

  .service-card:not(.is-active) h3{
    max-width:9ch;
  }
}

@media (prefers-reduced-motion:reduce){
  .service-card,
  .service-card__visual,
  .service-card__body > span,
  .service-card h3,
  .service-card p,
  .service-card .card-link{
    transition:none !important;
  }
}


/* Identidade Femiclin no cabeçalho e rodapé. */
.brand{
  min-width:165px;
  overflow:visible;
}

.brand-logo{
  display:block;
  width:170px;
  height:76px;
  flex:0 0 auto;
  background:url("../img/femiclin-logo.svg") center center / contain no-repeat;
}

.footer-brand{
  min-width:220px;
}

.footer-brand-logo{
  display:block;
  width:230px;
  height:130px;
  background:url("../img/femiclin-logo-slogan.svg") center center / contain no-repeat;
  background-color:transparent;
  border-radius:0;
  filter:brightness(0) invert(1);
  opacity:.96;
}

@media (max-width:820px){
  .brand{
    min-width:138px;
  }

  .brand-logo{
    width:145px;
    height:68px;
    background-size:contain;
  }

  .footer-brand-logo{
    width:215px;
    height:122px;
    background-size:contain;
  }
}

@media (max-width:620px){
  .brand{
    min-width:124px;
  }

  .brand-logo{
    width:132px;
    height:62px;
    background-size:contain;
  }
}


/* Menu mobile ancorado diretamente abaixo do cabeçalho, sem faixa/gap. */
@media (max-width:820px){
  .header{
    position:sticky;
  }

  .mobile-panel{
    position:absolute !important;
    top:100% !important;
    left:0;
    right:0;
    margin:0;
  }
}


/* Serviços no mobile: mesma linguagem visual do desktop, com swipe, setas e autoplay. */
@media (max-width:1023px){
  .services-carousel{
    position:relative;
  }

  .services-carousel__top{
    align-items:center !important;
    gap:14px;
  }

  .services-nav{
    display:flex !important;
    flex:0 0 auto;
  }

  .services-arrow{
    width:44px !important;
    height:44px !important;
    display:grid !important;
    place-items:center;
  }

  .services-viewport{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    padding:6px 0 16px !important;
  }

  .services-viewport::-webkit-scrollbar{
    display:none;
  }

  .services-track{
    display:flex !important;
    gap:14px !important;
    align-items:stretch !important;
    width:max-content;
  }

  .service-card{
    position:relative !important;
    flex:0 0 min(84vw,420px) !important;
    width:min(84vw,420px) !important;
    height:430px !important;
    min-width:min(84vw,420px) !important;
    aspect-ratio:auto !important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    overflow:hidden;
    border-radius:26px !important;
    background:var(--nude-100);
    box-shadow:0 16px 36px rgba(74,48,39,.10);
    transform:scale(.965);
    opacity:.78;
    transition:
      transform .5s cubic-bezier(.2,.72,.22,1),
      opacity .38s ease,
      box-shadow .38s ease !important;
  }

  .service-card.is-active{
    transform:scale(1);
    opacity:1;
    box-shadow:0 24px 54px rgba(74,48,39,.18);
  }

  .service-card__visual{
    position:absolute !important;
    inset:0;
    width:100%;
    height:100% !important;
    padding:0 !important;
    transition:transform .62s cubic-bezier(.2,.72,.22,1);
  }

  .service-card.is-active .service-card__visual{
    transform:scale(1.035);
  }

  .service-card__visual::before{
    background:
      linear-gradient(180deg,rgba(43,27,22,.03) 18%,rgba(43,27,22,.14) 48%,rgba(43,27,22,.86) 100%) !important;
  }

  .service-card__visual span{
    position:absolute !important;
    top:20px;
    left:20px;
    z-index:3;
    color:#fff !important;
    font-size:2rem !important;
    line-height:1 !important;
  }

  .service-card__body{
    position:absolute !important;
    inset:0;
    z-index:4;
    width:100%;
    height:100% !important;
    padding:26px 22px 24px !important;
    display:flex !important;
    flex-direction:column;
    justify-content:flex-end;
    background:
      linear-gradient(180deg,rgba(43,27,22,0) 30%,rgba(43,27,22,.10) 48%,rgba(43,27,22,.88) 100%);
  }

  .service-card__body > span{
    margin:0 0 7px !important;
    color:rgba(255,255,255,.8) !important;
    font-size:.66rem !important;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .3s ease .08s, transform .38s ease .08s;
  }

  .service-card h3{
    margin:0 !important;
    max-width:11ch;
    color:#fff !important;
    font-size:clamp(1.7rem,8vw,2.2rem) !important;
    line-height:1.02;
    text-shadow:0 3px 18px rgba(31,18,14,.28);
    transform:translateY(8px);
    transition:transform .42s ease;
  }

  .service-card p,
  .service-card .card-link{
    max-height:0;
    margin:0 !important;
    padding-top:0 !important;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    transform:translateY(12px);
    transition:
      max-height .46s ease,
      opacity .3s ease,
      transform .4s ease,
      margin .4s ease,
      padding .4s ease;
  }

  .service-card p{
    color:rgba(255,255,255,.88) !important;
    font-size:.82rem !important;
    line-height:1.5 !important;
    -webkit-line-clamp:unset !important;
  }

  .service-card .card-link{
    color:#fff !important;
  }

  .service-card.is-active .service-card__body > span{
    opacity:1;
    transform:none;
  }

  .service-card.is-active h3{
    transform:none;
    margin-bottom:9px !important;
  }

  .service-card.is-active p{
    max-height:125px;
    margin-bottom:2px !important;
    opacity:1;
    transform:none;
  }

  .service-card.is-active .card-link{
    max-height:48px;
    padding-top:12px !important;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
}

@media (max-width:620px){
  .services-carousel__top{
    justify-content:flex-end;
    margin-bottom:14px;
  }

  .services-tags{
    display:none !important;
  }

  .service-card{
    flex-basis:84vw !important;
    width:84vw !important;
    min-width:84vw !important;
    height:405px !important;
  }

  .service-card__body{
    padding:24px 20px 22px !important;
  }
}
