/* ==========================================================================
   Dra. Nilza Perin · Gastropediatra
   Componentes de conteudo (Split, Citacao, Cards, Tratamentos, Trajetoria,
   Sinais, Consulta, Localizacao, FAQ, CTA final, Rodape, Reveal).
   Continuacao de style.css: fontes, tokens, reset, header e hero moram la.
   Separado desta forma porque style.css sozinho passou do teto de 500
   linhas nesta rodada (Rodada 4, ajuste do header/hero); nenhum destes
   componentes foi tocado, so movido de arquivo. Requer que style.css
   carregue primeiro (define os tokens do :root que estas regras usam).
   ========================================================================== */

/* --- Split: foto sangra ate a borda da tela, ocupando metade da secao -------
   Componente unico usado por Citacao, Sobre e Como e a consulta.
   Nada de card nem moldura: a foto e a propria metade da secao.            */
.split{display:grid;overflow:hidden}
.split__foto{position:relative;min-height:clamp(340px,56vw,520px);background:var(--azul-fundo)}
.split__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* o mapa entra no lugar da foto e preenche a coluna toda.
   flex (e nao position:absolute): o embed do Maps precisa de altura JA RESOLVIDA
   no primeiro layout, senao renderiza os tiles torto e nunca recalcula.
   Ver feedback_iframe_maps_precisa_altura_concreta. */
.split__foto--mapa{background:var(--papel);display:flex}
.split__foto--mapa iframe{flex:1 1 auto;align-self:stretch;width:100%;border:0;display:block;filter:grayscale(.28) contrast(1.04)}
.split__foto--mapa::after{display:none}
.split__corpo{padding-block:var(--secao-y);padding-inline:var(--gutter);display:flex;align-items:center}
.split__interno{width:100%;max-width:34rem}
/* o titulo do split nao tem .cabeca-secao pra dar o respiro */
.split__interno .titulo + *{margin-top:clamp(1.5rem,1rem + 1.6vw,2.25rem)}

@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;align-items:stretch}
  .split__foto{min-height:min(88vh,760px)}
  /* foto a esquerda: o texto encosta na coluna do wrap */
  .split--esq .split__corpo{padding-left:clamp(2.5rem,1rem + 3.5vw,4.5rem);padding-right:var(--gutter)}
  .split--esq .split__interno{margin-right:auto}
  /* foto a direita: inverte a ordem visual sem mexer no DOM */
  .split--dir .split__foto{order:2}
  .split--dir .split__corpo{order:1;justify-content:flex-end;padding-right:clamp(2.5rem,1rem + 3.5vw,4.5rem);padding-left:var(--gutter)}
  .split--dir .split__interno{margin-left:auto}
}
/* no mobile a foto vira faixa larga em cima: caixa baixa + foto 2:3 = corte vertical
   agressivo. O default (50% 50%) pega o tronco e decapita. Enquadrar por foto. */
@media(max-width:899px){
  .split__foto{min-height:clamp(340px,84vw,460px)}
  .split__foto img{object-position:50% 20%}
  #sobre .split__foto img{object-position:50% 12%}
  #consulta .split__foto img{object-position:50% 22%}
  #contato .split__foto img{object-position:50% 25%}
}

/* degrade sutil na juncao, pra foto e texto nao brigarem */
.split__foto::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(20,29,40,.35),rgba(20,29,40,0) 45%)}
@media(min-width:900px){
  .split--esq .split__foto::after{background:linear-gradient(to right,rgba(20,29,40,0) 70%,rgba(0,87,141,.35))}
  .split--dir .split__foto::after{background:linear-gradient(to left,rgba(20,29,40,0) 70%,rgba(0,87,141,.35))}
}

/* --- Citacao ------------------------------------------------------------- */
/* faixa de respiro entre os blocos com foto: so a fala dela, centralizada */
.citacao{text-align:center}
.citacao__bloco{max-width:46rem;margin-inline:auto}  /* rem, nao ch: o ch da serifa e estreito e virava coluna de 14 linhas */
.citacao__texto{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,1rem + 1.9vw,2.35rem);line-height:1.38;color:#FFF;letter-spacing:-.01em;text-wrap:balance}
.citacao__assina{
  margin-top:2.25rem;padding-top:1.5rem;border-top:var(--linha-clara);
  display:flex;flex-direction:column;gap:.3rem;align-items:center;
  max-width:26rem;margin-inline:auto;
}
.citacao__assina strong{font-weight:600;font-size:.95rem;letter-spacing:.02em;color:#FFF}
.citacao__assina span{font-size:var(--t-mini);letter-spacing:.15em;text-transform:uppercase;color:var(--azul-suave)}

/* --- Grade de cards ------------------------------------------------------ */
.cards{display:grid;gap:1px;background:color-mix(in srgb,var(--azul-tinta) 12%,transparent);border:var(--linha)}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--branco);padding:clamp(1.75rem,1.2rem + 1.4vw,2.5rem);display:flex;flex-direction:column;gap:.9rem;transition:background var(--transicao)}
.secao--papel .card{background:var(--papel)}
.card:hover{background:var(--azul-suave)}
.card__icone{color:var(--verde-tinta);width:38px;height:38px}
.card__icone svg{width:100%;height:100%;stroke:currentColor;fill:none}
.card__titulo{font-family:var(--sans);font-size:var(--t-h3);line-height:1.2;color:var(--azul-tinta);font-weight:700;letter-spacing:-.018em}
.card__txt{font-size:.94rem;line-height:1.62;color:var(--tinta-media)}

/* --- Tratamentos (lista numerada) ---------------------------------------- */
.trat{display:grid;gap:0;border-top:var(--linha)}
.trat__item{display:grid;gap:.6rem 2rem;padding-block:clamp(1.75rem,1.2rem + 1.5vw,2.5rem);border-bottom:var(--linha);align-items:start}
@media(min-width:820px){.trat__item{grid-template-columns:4rem 1fr 1.15fr;gap:2.5rem}}
.trat__num{font-family:var(--sans);font-weight:800;font-size:1.35rem;color:var(--verde-tinta);line-height:1.1;letter-spacing:-.02em}
.trat__nome{font-family:var(--sans);font-size:var(--t-h3);color:var(--azul-tinta);line-height:1.22;font-weight:700;letter-spacing:-.018em}
.trat__txt{font-size:.94rem;line-height:1.65;color:var(--tinta-media)}

/* --- Trajetoria ---------------------------------------------------------- */
.traj__texto p+p{margin-top:1.1rem}
.traj__texto p{color:var(--tinta-media);line-height:1.72}
.linha-tempo{margin-top:clamp(2.5rem,1.5rem + 2vw,3.5rem);border-top:var(--linha);padding-top:2rem}
.linha-tempo li{display:grid;gap:.15rem 1.5rem;padding-block:1rem;border-bottom:var(--linha)}
@media(min-width:600px){.linha-tempo li{grid-template-columns:6.5rem 1fr;align-items:baseline}}
.linha-tempo li:last-child{border-bottom:0;padding-bottom:0}
.lt__quando{font-size:var(--t-mini);letter-spacing:.13em;text-transform:uppercase;color:var(--verde-tinta);font-weight:600}
.lt__o-que{color:var(--tinta);font-size:.95rem;line-height:1.55}
.lt__o-que span{display:block;color:var(--tinta-suave);font-size:.86rem;margin-top:.15rem}

/* --- Sinais (quando procurar) -------------------------------------------- */
.sinais{display:grid;gap:1px;background:color-mix(in srgb,var(--azul-tinta) 12%,transparent);border:var(--linha);margin-top:0}
@media(min-width:600px){.sinais{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.sinais{grid-template-columns:repeat(3,1fr)}}
.sinal{background:var(--azul-suave);padding:1.5rem clamp(1.25rem,1rem + .8vw,1.75rem);display:flex;gap:.9rem;align-items:flex-start;font-size:.94rem;line-height:1.55;color:var(--tinta)}
.sinal svg{width:1.2rem;height:1.2rem;margin-top:.22rem;stroke:var(--verde);fill:none}
.aviso{margin-top:1.75rem;font-size:.86rem;color:var(--tinta-suave);font-style:italic;max-width:var(--max-texto)}

/* --- Consulta (passos) --------------------------------------------------- */
.passos{counter-reset:passo}
.passos li{counter-increment:passo;display:grid;grid-template-columns:2.6rem 1fr;gap:.25rem 1.25rem;padding-block:1.35rem;border-bottom:var(--linha)}
.passos li:first-child{border-top:var(--linha)}
.passos li::before{
  content:counter(passo,decimal-leading-zero);grid-row:1/3;font-family:var(--sans);font-weight:800;
  font-size:1.05rem;color:var(--verde-tinta);line-height:1.55;letter-spacing:-.02em;
}
.passos h3{font-size:.95rem;font-weight:600;color:var(--azul-tinta);letter-spacing:.01em}
.passos p{font-size:.93rem;line-height:1.62;color:var(--tinta-media);margin-top:.3rem}

/* --- Localizacao --------------------------------------------------------- */
.local__end{font-family:var(--sans);font-weight:800;font-size:clamp(1.45rem,1.15rem + 1.2vw,2rem);color:var(--azul-tinta);line-height:1.2;letter-spacing:-.028em}
.local__det{margin-top:1.35rem;display:flex;flex-direction:column;gap:.8rem}
.local__det li{display:flex;gap:.75rem;align-items:flex-start;font-size:.94rem;color:var(--tinta-media);line-height:1.55}
.local__det svg{width:1.15rem;height:1.15rem;margin-top:.2rem;stroke:var(--verde);fill:none}

/* --- FAQ ----------------------------------------------------------------- */
.faq{max-width:820px;margin-inline:auto;border-top:var(--linha)}
.faq details{border-bottom:var(--linha)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding-block:1.4rem;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:clamp(1.02rem,.97rem + .3vw,1.16rem);
  color:var(--azul-tinta);line-height:1.4;font-weight:700;letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';flex:none;width:1rem;height:1rem;margin-top:.35rem;
  background:linear-gradient(var(--verde-tinta),var(--verde-tinta)) center/100% 1.5px no-repeat,
             linear-gradient(var(--verde-tinta),var(--verde-tinta)) center/1.5px 100% no-repeat;
  transition:transform var(--transicao);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding-bottom:1.5rem;color:var(--tinta-media);font-size:.95rem;line-height:1.7;max-width:62ch}

/* --- CTA final ------------------------------------------------------------
   O tel: nao funciona em desktop: usa .tel + .tel-copiar (definidos no
   style.css, logo depois da barra de numeros do hero). */
.cta__acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* --- Rodape -------------------------------------------------------------- */
.rodape{background:var(--azul-rodape);color:var(--sobre-azul-suave);padding-block:clamp(3rem,2rem + 3vw,4.5rem);font-size:.88rem}
.rodape__topo{display:grid;gap:2.25rem;padding-bottom:2.5rem;border-bottom:var(--linha-clara)}
@media(min-width:820px){.rodape__topo{grid-template-columns:1.2fr 1fr 1fr;gap:3rem}}
.rodape img{height:56px;width:auto;margin-bottom:1.25rem}
.rodape h4{font-size:var(--t-mini);letter-spacing:.18em;text-transform:uppercase;color:var(--azul-suave);font-weight:600;margin-bottom:1rem}
.rodape li+li{margin-top:.55rem}
.rodape a:hover{color:#FFF}
.rodape__base{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;padding-top:2rem;font-size:.8rem;color:var(--sobre-azul-suave)}
.rodape__aviso{max-width:52ch;line-height:1.6}

/* --- Reveal no scroll ---------------------------------------------------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity 700ms ease,transform 700ms cubic-bezier(.22,.61,.36,1)}
.rv.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}