/* 20-clinica — "A clínica": grade bento (fotos em arco/cantos suaves + cartões-fato) sobre mármore */
.clinica{overflow:hidden} /* o ornamento vaza pela direita de propósito; a seção corta */
.clinica>.wrap{position:relative;z-index:1}

/* ornamento: o arco do logo, enorme, em traço dourado bem leve atrás do cabeçalho */
.clinica__ornamento{
  --traco:1.2;
  position:absolute;right:-6vw;top:-4rem;z-index:0;pointer-events:none;
  width:clamp(340px,34vw,560px);height:auto;aspect-ratio:1;
  fill:none;stroke:var(--ouro);opacity:.22;
}
@media (max-width:1024px){.clinica__ornamento{display:none}}

.clinica__cabecalho{max-width:52rem}
.clinica__cabecalho .h2{max-width:20ch}

/* ---------- grade bento ---------- */
.clinica__grade{
  display:grid;gap:clamp(.9rem,1.6vw,1.4rem);
  grid-template-columns:repeat(12,minmax(0,1fr));
}
.clinica__celula{min-width:0;display:grid}
.clinica__celula>*{min-height:0}
.clinica__celula--fachada{grid-column:1/9}
.clinica__celula--recepcao{grid-column:9/13}
.clinica__celula--fato-1{grid-column:1/4}
.clinica__celula--fato-2{grid-column:4/7}
.clinica__celula--consultorio{grid-column:7/10}
.clinica__celula--fato-3{grid-column:10/13}

/* estado inicial da entrada SÓ com animação (o JS mostra); sem JS/reduce tudo visível */
html.anim .clinica__celula{opacity:0}
html.anim .clinica__celula.is-visto{opacity:1}

/* ---------- fotos ---------- */
.clinica__foto{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--marmore);
  box-shadow:var(--sombra-suave);
  height:100%;
}
.clinica__foto--suave{border-radius:var(--raio)}
.clinica__foto--arco{border-radius:999px 999px var(--raio-sm) var(--raio-sm)}
.clinica__celula--fachada .clinica__foto{aspect-ratio:16/9}
.clinica__celula--consultorio .clinica__foto{aspect-ratio:4/5}
/* linha dourada interna que acompanha a moldura */
.clinica__foto::before{
  content:"";position:absolute;inset:.55rem;z-index:2;pointer-events:none;
  border:1px solid rgba(210,190,90,.55);border-radius:inherit;
  opacity:.75;transition:opacity .45s,inset .45s var(--ease-suave);
}
.clinica__foto--arco::before{border-radius:999px 999px calc(var(--raio-sm) - .35rem) calc(var(--raio-sm) - .35rem)}
.clinica__foto:hover::before{opacity:1;inset:.8rem}
.clinica__foto-miolo{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;transition:transform 1.1s var(--ease-suave);will-change:transform}
.clinica__foto img{width:100%;height:100%;object-fit:cover;display:block}
/* fachada: a imagem é maior que a moldura para o parallax (scrub) ter margem */
.clinica__foto--parallax img{height:124%;object-position:50% 45%;will-change:transform}
html:not(.anim) .clinica__foto--parallax img{height:100%}
/* hover: zoom leve + brilho dourado varrendo (shine) */
.clinica__foto:hover .clinica__foto-miolo{transform:scale(1.045)}
.clinica__foto::after{
  content:"";position:absolute;inset:-20% -40%;z-index:3;pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,rgba(243,230,163,.32) 48%,rgba(255,255,255,.42) 50%,rgba(243,230,163,.32) 52%,transparent 62%);
  transform:translateX(-70%);
  transition:transform 1.25s var(--ease-suave);
}
.clinica__foto:hover::after,.clinica__foto:focus-within::after{transform:translateX(70%)}

/* legenda: degradê verde-950 no pé + texto marfim em Jost */
.clinica__legenda{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.6rem 1.35rem 1.1rem;
  background:linear-gradient(180deg,transparent,rgba(15,28,18,.72));
  color:var(--marfim);
  font-family:var(--fonte-texto);font-size:.86rem;line-height:1.35;
  text-shadow:0 1px 8px rgba(15,28,18,.55);
}
.clinica__legenda span{
  display:block;margin-bottom:.15rem;
  font-family:var(--fonte-display);font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ouro-claro);
}

/* ---------- cartões-fato ---------- */
.clinica__fato{
  display:flex;flex-direction:column;gap:.55rem;
  height:100%;
  padding:clamp(1.35rem,2vw,1.8rem);
  border-color:rgba(210,190,90,.3);
}
.clinica__fato:hover{border-color:var(--ouro)}
/* ícone em arco: fundo verde profundo com traço dourado (ícone decorativo; contraste é do texto) */
.clinica__icone{
  width:60px;height:68px;margin-bottom:.6rem;
  background:linear-gradient(165deg,var(--verde-800),var(--verde-950));
  border-color:rgba(210,190,90,.55);color:var(--ouro);
  box-shadow:0 12px 26px -14px rgba(15,28,18,.55);
  transition:box-shadow .35s,translate .45s var(--ease-elastico);
}
.clinica__icone svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.clinica__fato:hover .clinica__icone{translate:0 -3px;box-shadow:0 18px 32px -14px rgba(15,28,18,.6)}
.clinica__rotulo{
  font-family:var(--fonte-display);font-size:.68rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--verde-600);
}
.clinica__fato-titulo{font-size:clamp(1rem,1.25vw,1.15rem);letter-spacing:.09em;color:var(--verde-900)}
.clinica__fato-texto{margin-top:auto;padding-top:.4rem;font-size:.94rem;line-height:1.6;color:var(--texto-suave)}

/* ---------- CTA ---------- */
.clinica__cta{margin-top:clamp(2.4rem,5vw,3.6rem)}
.clinica__linha{margin-bottom:clamp(1.4rem,3vw,2rem)}
.clinica__cta-miolo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.clinica__cta-texto{font-size:.95rem;color:var(--texto);max-width:34rem}
.clinica__botoes{gap:.4rem 1rem}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .clinica__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clinica__celula--fachada{grid-column:1/-1}
  .clinica__celula--recepcao{grid-column:1/2}
  .clinica__celula--consultorio{grid-column:2/3}
  .clinica__celula--fato-1,.clinica__celula--fato-2{grid-column:auto}
  .clinica__celula--fato-3{grid-column:1/-1}
  .clinica__celula--recepcao .clinica__foto,.clinica__celula--consultorio .clinica__foto{aspect-ratio:4/5}
  /* ordem: fachada, recepção, consultório, fatos */
  .clinica__celula--recepcao{order:1}.clinica__celula--consultorio{order:2}
  .clinica__celula--fato-1{order:3}.clinica__celula--fato-2{order:4}.clinica__celula--fato-3{order:5}
  .clinica__celula--fato-3 .clinica__fato{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:1.4rem}
  .clinica__celula--fato-3 .clinica__icone{margin-bottom:0}
  .clinica__celula--fato-3 .clinica__rotulo{flex:1 1 60%}
  .clinica__celula--fato-3 .clinica__fato-titulo{flex:1 1 100%}
  .clinica__celula--fato-3 .clinica__fato-texto{flex:1 1 100%;margin-top:0}
}
@media (max-width:760px){
  .clinica__grade{grid-template-columns:1fr;gap:1rem}
  .clinica__celula{grid-column:auto !important}
  /* alterna foto / fato para dar ritmo na rolagem */
  .clinica__celula--fachada{order:0}.clinica__celula--fato-1{order:1}.clinica__celula--recepcao{order:2}
  .clinica__celula--fato-2{order:3}.clinica__celula--consultorio{order:4}.clinica__celula--fato-3{order:5}
  .clinica__celula--recepcao .clinica__foto,.clinica__celula--consultorio .clinica__foto{aspect-ratio:4/5;max-width:440px;width:100%;margin-inline:auto}
  .clinica__celula--fato-3 .clinica__fato{flex-direction:column;align-items:stretch}
  .clinica__celula--fato-3 .clinica__icone{margin-bottom:.6rem}
  .clinica__fato-texto{margin-top:0}
  .clinica__legenda{padding:2.2rem 1.1rem .9rem;font-size:.82rem}
  .clinica__cta-miolo{flex-direction:column;align-items:stretch}
  .clinica__botoes{flex-direction:column;align-items:stretch}
  .clinica__botoes .btn{width:100%}
  .clinica__botoes .btn--fantasma{justify-content:center}
}
/* toque: sem hover — o brilho e o zoom ficam quietos */
@media (hover:none){
  .clinica__foto:hover .clinica__foto-miolo{transform:none}
  .clinica__foto:hover::after,.clinica__foto:focus-within::after{transform:translateX(-70%)}
}