/* =========================================================
   EMI Odontologia — página de especialidade (single)
   Complementa style.css
   ========================================================= */

/* ---------------------------------------------------------
   HERO — tela cheia, foto de fundo, contadores e título
   --------------------------------------------------------- */
.esp-hero{
  position:sticky;top:0;width:100%;height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2rem 2rem 4rem;overflow:hidden;isolation:isolate;
}
.esp-hero .bg{position:absolute;inset:0;overflow:hidden;z-index:-1}
.esp-hero .bg img{width:100%;height:100%;object-fit:cover}
.esp-hero .bg::before{
  content:"";position:absolute;left:0;top:-2rem;width:100%;height:22rem;z-index:1;
  background:linear-gradient(0deg,rgba(18,16,15,0),var(--c-ink));
}
.esp-hero .bg::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:30rem;z-index:1;
  background:linear-gradient(180deg,rgba(18,16,15,0),rgba(18,16,15,.85) 55%,var(--c-ink));
}
.esp-points{display:grid;grid-template-columns:repeat(2,11.5rem);margin-bottom:5.375rem;color:var(--c-light-base)}
.esp-point{display:flex;align-items:flex-end;gap:.75rem;border-left:1px solid rgba(255,255,255,.5);padding-left:1rem}
.esp-point .c0{display:block}
.esp-hero .esp-title{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;color:var(--c-light-base);position:relative;
  font-size:12.5rem;line-height:90%;letter-spacing:-.625rem;
}
.esp-hero .esp-title i{font-style:italic}

/* ---------------------------------------------------------
   BLOCO 2 — resumo + texto longo
   --------------------------------------------------------- */
.esp-intro{position:relative;z-index:2;width:100%;padding:12rem 2rem 4rem;background:var(--c-light-base);color:var(--c-dark-base)}
.esp-intro .esp-summary{margin:0 auto;text-align:center;width:40.5rem;text-wrap:balance}
.esp-intro .details{display:flex;align-items:flex-start;gap:12.375rem;margin-top:4rem;width:100%}
.esp-intro .side-img{width:30.625rem;height:18.25rem;border-radius:1.5rem;overflow:hidden;flex:none}
.esp-intro .side-img img{width:100%;height:100%;object-fit:cover}
.esp-intro .details-text{width:30.625rem}

/* ---------------------------------------------------------
   INDICADORES — ticker circular
   --------------------------------------------------------- */
.esp-indicators{background:var(--c-light-base);padding:8rem 0;position:relative;overflow:hidden}
.esp-indicators .title{color:var(--c-dark-base);width:100%}
.esp-indicators .line{display:inline-flex;margin-left:2rem;width:calc(100% - 4rem)}
.esp-indicators .line.n1{display:flex;justify-content:space-between}
.esp-indicators .line.n2{justify-content:center}
.ind-ticker{height:24.875rem;margin-top:5rem;width:100%;overflow:hidden;display:flex}
.ind-track{display:flex;flex-wrap:nowrap;gap:1.5rem;padding-left:1.5rem;width:max-content;animation:tickerX 42s linear infinite}
.ind-ticker:hover .ind-track{animation-play-state:paused}
.ind-circle{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:24.875rem;height:24.875rem;border-radius:50%;
  border:1px solid var(--c-dark-10);color:var(--c-dark-base);
}
.ind-circle span{text-align:center;width:14rem;text-wrap:balance}
@keyframes tickerX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------
   SOLUÇÕES — bloco claro + cards no escuro
   --------------------------------------------------------- */
.esp-solutions .first{
  position:relative;width:100%;height:46rem;background:var(--c-light-base);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:8rem 2rem 0;isolation:isolate;
}
.esp-solutions .first .description{width:13.875rem;position:relative}
.esp-solutions .first .title{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;color:var(--c-dark-base);
}
.esp-solutions .second{
  position:relative;width:100%;background:var(--c-ink);
  padding:4.5rem 2rem 10rem;overflow:hidden;
}
.sol-grid{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}
.sol-card{
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  width:20.375rem;height:32.375rem;padding:1.5rem .5rem;
  background:var(--c-light-base);color:var(--c-dark-base);border-radius:1.875rem;
  transition:transform .4s var(--ease-out-quint);
}
.sol-card:hover{transform:translateY(-.5rem)}
.sol-card .h4{padding:0 1rem;text-align:center}
.sol-bottom{display:flex;flex-direction:column;align-items:center;width:100%}
.sol-img{aspect-ratio:1.68;border-radius:1.5rem;overflow:hidden;position:relative;width:100%}
.sol-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-quint)}
.sol-card:hover .sol-img img{transform:scale(1.05)}
.sol-desc{color:var(--c-dark-40);margin:2.5rem 0 1.5rem;text-align:center;width:15.5rem}

/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */
.esp-cta{
  position:relative;width:100%;min-height:52rem;background:var(--c-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:8rem 2rem 6rem;overflow:hidden;isolation:isolate;
}
.esp-cta .bg{position:absolute;inset:0;z-index:-1}
.esp-cta .bg img{width:100%;height:100%;object-fit:cover;opacity:.35}
.esp-cta .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,15,.35),var(--c-ink) 85%);
}
.esp-cta .content{position:relative;z-index:2;width:49.5rem;color:var(--c-light-base)}
.esp-cta .form-title{margin:0 auto 3rem;text-align:center;width:31.125rem;text-wrap:balance}
.esp-cta .form{display:grid;gap:.5rem;grid-template-columns:1fr 1fr 5rem;--placeholder-color:var(--c-light-base)}
.esp-cta .form .wrap-textarea{grid-area:2/1/3/3}
.esp-cta .btn-submit{grid-area:2/3/3/4;min-width:5rem;min-height:5rem}
.esp-cta .btn-submit .wrap-btn{width:5rem;height:5rem;border-radius:50%;background:var(--c-red);color:#fff;justify-content:center;padding:0}
.esp-cta .form-note{color:var(--c-light-40);margin-top:1rem;text-align:center}

/* ---------------------------------------------------------
   GALERIA — ticker horizontal
   --------------------------------------------------------- */
.esp-gallery{background:var(--c-ink);display:flex;flex-direction:column;padding:10rem 0 8rem;position:relative;overflow:hidden}
.esp-gallery .title{color:var(--c-light-base);margin-left:2rem;width:calc(100% - 4rem)}
.esp-gallery .line{display:flex;position:relative}
.esp-gallery .line.n1{margin-left:32.5rem}
.esp-gallery .line.n2{justify-content:space-between;width:100%}
.esp-gallery .title-tip{position:absolute;left:49.375rem;top:50%;transform:translateY(-30%);width:8.5rem;color:var(--c-light-40)}
.gal-ticker{display:flex;flex-wrap:nowrap;margin-top:5rem;overflow:hidden;width:100%}
.gal-line{display:flex;flex-wrap:nowrap;gap:.5rem;padding-left:.5rem;width:max-content;animation:tickerX 40s linear infinite}
.gal-ticker:hover .gal-line{animation-play-state:paused}
.gal-img{width:18.25rem;height:14.625rem;overflow:hidden;position:relative;flex:none;border-radius:.5rem}
.gal-img img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width:1023px){
  .esp-hero{position:relative;height:100svh;flex-direction:column-reverse;justify-content:flex-start;padding:6rem 1.5rem 2rem}
  .esp-hero .esp-title{flex-direction:column;font-size:4.3125rem;letter-spacing:-.1725rem;line-height:84%;text-align:center}
  .esp-points{display:flex;align-items:center;grid-template-columns:unset;margin:4.5rem 0 0}
  .esp-point:first-child{margin-right:2.5rem}

  .esp-intro{padding:5rem 1rem 3.5rem;overflow:hidden}
  .esp-intro .esp-summary{width:100%}
  .esp-intro .details{flex-direction:column;align-items:center;gap:0;margin-top:2.5rem}
  .esp-intro .side-img{width:100%;height:auto;aspect-ratio:1.68}
  .esp-intro .details-text{width:100%;margin-top:2rem}

  .esp-indicators{padding:3.5rem 0}
  .esp-indicators .line,.esp-indicators .line.n1{display:block;margin-left:1rem;width:calc(100% - 2rem);text-align:center}
  .ind-ticker{height:16rem;margin-top:2.5rem}
  .ind-circle{width:16rem;height:16rem}
  .ind-circle span{width:10rem}

  .esp-solutions .first{height:auto;align-items:center;padding:3.5rem 1rem 3rem}
  .esp-solutions .first .description{width:17.125rem;text-align:center}
  .esp-solutions .first .title{flex-direction:column;margin-top:2.5rem}
  .esp-solutions .second{padding:2rem 1rem 5rem}
  .sol-grid{flex-direction:column;align-items:center;gap:1rem}
  .sol-card{width:100%;max-width:20.375rem;height:auto;padding:.5rem .5rem 1.5rem}
  .sol-desc{margin:1.5rem 0 1rem;width:100%;padding:0 1rem}

  .esp-cta{min-height:0;padding:4rem 1rem 3.5rem}
  .esp-cta .content{width:100%}
  .esp-cta .form-title{width:100%;margin-bottom:2.5rem}
  .esp-cta .form{grid-template-columns:1fr;gap:1rem}
  .esp-cta .form .wrap-textarea{grid-area:auto}
  .esp-cta .btn-submit{grid-area:auto;margin:.5rem auto 0}

  .esp-gallery{padding:3.5rem 0}
  .esp-gallery .title{display:none}
  .esp-gallery .mobile-title{display:block;color:var(--c-light-base);text-align:center;width:100%;padding:0 1rem}
  .gal-ticker{margin-top:2.5rem;pointer-events:none}
  .gal-img{width:13rem;height:10.5rem}
}
.esp-gallery .mobile-title{display:none}

/* =========================================================
   LISTAGEM DE ESPECIALIDADES
   ========================================================= */
.lst-hero{
  position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:1.5rem 2rem 3rem;background:var(--c-light-base);
}
.lst-hero .bg{position:absolute;inset:0;z-index:-1}
.lst-hero .bg img{width:100%;height:100%;object-fit:cover}
.lst-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,15,.55),rgba(18,16,15,.3) 45%,rgba(18,16,15,.75))}
.lst-hero::after{
  content:"";position:absolute;left:0;bottom:-13rem;width:100%;height:18rem;
  background:linear-gradient(180deg,rgba(18,16,15,0),var(--c-ink));
}
.lst-hero .description{color:var(--c-light-base);width:15rem;text-align:center;margin-top:4.5rem}
.lst-hero .title{
  display:flex;justify-content:space-between;width:100%;
  color:var(--c-light-base);
  font-size:11rem;line-height:90%;letter-spacing:-.55rem;
}

.lst-cards{position:relative;z-index:2;padding:20rem 2rem 6.5rem;background:var(--c-ink)}
.lst-cards .description{color:var(--c-light-base);margin:0 0 5rem 44rem;width:17rem}
.lst-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}
.lst-card{
  display:flex;flex-direction:column;justify-content:space-between;
  width:20rem;height:25.75rem;padding:.5rem;border-radius:1.875rem;
  background:var(--c-dark-40);transition:background .4s var(--ease);
}
.lst-card:hover{background:rgba(177,7,16,.35)}
.lst-card .img-wrap{width:100%;height:11.25rem;border-radius:1.375rem;overflow:hidden}
.lst-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-quint)}
.lst-card:hover .img-wrap img{transform:scale(1.05)}
.lst-card .name{color:var(--c-light-base);padding-top:1.5rem;text-align:center}
.lst-card .bottom{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;margin-top:auto;padding:0 1rem 1rem}
.lst-card .category{color:var(--c-light-40);display:inline-block;width:100%;margin-bottom:1.5rem}

.lst-highlight{position:relative;height:56rem;padding:9.625rem 2rem 8.375rem;overflow:hidden;isolation:isolate}
.lst-highlight .bg-img{position:absolute;inset:0;z-index:-1}
.lst-highlight .bg-img img{width:100%;height:100%;object-fit:cover;opacity:.5}
.lst-highlight::before{content:"";position:absolute;left:0;top:0;width:100%;height:28rem;z-index:0;background:linear-gradient(0deg,rgba(18,16,15,0),var(--c-ink))}
.lst-highlight::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:24rem;z-index:0;background:linear-gradient(180deg,rgba(18,16,15,0),var(--c-ink))}
.lst-highlight .content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.lst-highlight .top{display:flex;gap:22rem}
.lst-highlight .quote{width:12.875rem;color:var(--c-light-40)}
.lst-highlight .title{color:var(--c-light-base)}
.lst-highlight .title p{margin-top:1.5rem}
.lst-highlight .bottom{display:flex;flex-direction:column;align-items:flex-start;gap:4rem;margin-left:35rem}
.lst-highlight .description{color:var(--c-light-base);width:18.125rem}
.lst-highlight .btn-more{--btn-bg:var(--c-light-base);--btn-color:var(--c-ink)}

@media (max-width:1023px){
  .lst-hero{position:relative;height:100svh;justify-content:flex-end;padding:0 1rem 2rem}
  .lst-hero .title{flex-direction:column;align-items:center;font-size:4.3125rem;letter-spacing:-.1725rem;line-height:84%}
  .lst-hero .description{color:var(--c-light-40);margin:0 0 1.5rem;width:11rem}
  .lst-cards{padding:3rem 1rem}
  .lst-cards .description{margin:0 0 3rem;width:100%;text-align:center}
  .lst-grid{grid-template-columns:1fr;justify-items:center}
  .lst-card{width:100%;max-width:22rem;height:auto}
  .lst-card .bottom{align-items:center;text-align:center;padding-top:1.5rem}
  .lst-highlight{height:auto;padding:4rem 1rem}
  .lst-highlight .top{display:block;text-align:center}
  .lst-highlight .quote{display:none}
  .lst-highlight .bottom{align-items:center;gap:2.5rem;margin:3rem 0 0;text-align:center}
  .lst-highlight .description{width:100%}
}

/* =========================================================
   SINGLE DE SOLUÇÃO (procedimento)
   Reaproveita .esp-hero, .esp-intro, .esp-indicators, .esp-cta
   e .esp-gallery; abaixo só o que é próprio da página.
   ========================================================= */

/* ---------- hero: trilha no lugar dos contadores ---------- */
.sol-crumb{display:flex;align-items:center;gap:.625rem;margin-bottom:5.375rem;color:var(--c-light-40)}
.sol-crumb a{color:var(--c-light-40);transition:color .3s var(--ease)}
.sol-crumb a:hover{color:var(--c-light-base)}
.sol-crumb .sep{opacity:.5}
/* nomes longos não cabem nos 12.5rem do título de especialidade */
.esp-hero .esp-title.t-md{font-size:9.5rem;letter-spacing:-.475rem}
.esp-hero .esp-title.t-sm{font-size:7.5rem;letter-spacing:-.375rem}

/* ---------- etapas + ficha técnica ---------- */
.sol-steps{background:var(--c-ink);color:var(--c-light-base);padding:8rem 2rem 10rem}
.steps-head{display:flex;flex-direction:column;gap:5rem}
.steps-head .description{width:13.875rem;color:var(--c-light-40)}
.steps-head .title{display:flex;align-items:center;justify-content:space-between;width:100%}
.steps-body{display:flex;align-items:flex-start;gap:6rem;margin-top:6rem}

.etapas{list-style:none;flex:1;display:flex;flex-direction:column}
.etapa{display:flex;gap:2.5rem;padding:2rem 0;border-top:1px solid var(--c-light-15)}
.etapa:last-child{border-bottom:1px solid var(--c-light-15)}
.etapa-n{color:var(--c-light-40);padding-top:.25rem;flex:none;width:2.5rem}
.etapa-txt .p3{color:var(--c-light-40);margin-top:.5rem;max-width:32rem}

.ficha{width:22rem;flex:none;background:var(--c-light-base);color:var(--c-dark-base);
  border-radius:1.875rem;padding:2rem}
.ficha-titulo{color:var(--c-dark-40);margin-bottom:1.5rem}
.ficha-item{display:flex;flex-direction:column;gap:.25rem;padding:1rem 0;border-top:1px solid var(--c-dark-10)}
.ficha-item dt{color:var(--c-dark-40)}
.ficha-nota{color:var(--c-dark-40);margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--c-dark-10)}

/* ---------- outras soluções da mesma especialidade ---------- */
.sol-irmas{background:var(--c-light-base);color:var(--c-dark-base);padding:8rem 2rem}
.irmas-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:4rem}
.irmas-head i{font-style:italic}
.sol-irmas .btn-more{--btn-bg:var(--c-ink);--btn-color:var(--c-light-base)}
.irmas-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr)}
.irma-card{display:flex;flex-direction:column;padding:.5rem .5rem 1.5rem;border-radius:1.875rem;
  background:rgba(18,16,15,.05);transition:background .4s var(--ease)}
.irma-card:hover{background:var(--c-dark-10)}
.irma-img{width:100%;aspect-ratio:1.68;border-radius:1.5rem;overflow:hidden}
.irma-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-quint)}
.irma-card:hover .irma-img img{transform:scale(1.05)}
.irma-nome{padding:1.5rem 1rem .5rem}
.irma-card .wrap-link{margin:auto 1rem 0}

@media (max-width:1023px){
  .sol-crumb{margin:4.5rem 0 0;justify-content:center;flex-wrap:wrap}
  .esp-hero .esp-title.t-md,.esp-hero .esp-title.t-sm{font-size:4.3125rem;letter-spacing:-.1725rem}

  .sol-steps{padding:3.5rem 1rem 4rem}
  .steps-head{align-items:center;gap:2.5rem;text-align:center}
  .steps-head .description{width:17.125rem}
  .steps-head .title{flex-direction:column}
  .steps-body{flex-direction:column;gap:2.5rem;margin-top:3rem}
  .etapa{gap:1.25rem;padding:1.5rem 0}
  .ficha{width:100%}

  .sol-irmas{padding:3.5rem 1rem}
  .irmas-head{flex-direction:column;align-items:center;gap:2rem;margin-bottom:2.5rem;text-align:center}
  .irmas-grid{grid-template-columns:1fr}
}

/* Parágrafos preservados na revelação por linhas. Sem isso a quebra lê
   textContent, os <br> somem e os parágrafos colam num bloco só. */
.anim-par{display:block}
.anim-par + .anim-par{margin-top:1.25em}