/* =========================================================================
   Centro Médico Nazareno — estilos do site
   Identidade: azul #0053BD · Poppins (títulos) + Inter (texto)
   Assinatura: espectro de cores da roda da logo como fio condutor
   ========================================================================= */

:root{
  /* cor institucional */
  --azul:#0053BD;
  --azul-700:#003C86;
  --azul-900:#0A2A52;
  --azul-050:#EAF1FC;

  /* neutros */
  --tinta:#16181D;
  --cinza:#586073;
  --cinza-300:#98A1B2;
  --nuvem:#F4F7FC;
  --nuvem-2:#EAF0FA;
  --linha:#E3E9F3;
  --branco:#FFFFFF;

  /* espectro do símbolo */
  --c1:#FEC133; --c2:#FF9800; --c3:#FF5900; --c4:#E20018; --c5:#90003F;
  --c6:#005099; --c7:#0094D7; --c8:#00C4D3; --c9:#40D1D4; --c10:#1DBE6E;
  --espectro: linear-gradient(90deg,
    var(--c1) 0 10%, var(--c2) 10% 20%, var(--c3) 20% 30%, var(--c4) 30% 40%,
    var(--c5) 40% 50%, var(--c6) 50% 60%, var(--c7) 60% 70%, var(--c8) 70% 80%,
    var(--c9) 80% 90%, var(--c10) 90% 100%);

  /* whatsapp */
  --zap:#25D366; --zap-700:#1da851;

  /* tipografia */
  --display:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* medidas */
  --maxw:1180px;
  --gut:24px;
  --r:16px;
  --r-lg:22px;
  --r-pill:999px;
  --sh-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sh:0 8px 24px rgba(15,40,90,.08);
  --sh-lg:0 24px 60px rgba(15,40,90,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--body); color:var(--tinta);
  background:var(--branco); line-height:1.6;
  font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--azul); text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--display); color:var(--tinta); line-height:1.18; margin:0; font-weight:600; letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid rgba(0,83,189,.45); outline-offset:2px; border-radius:6px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
section{padding:94px 0}
.tint{background:var(--nuvem)}
.muted{color:var(--cinza)}

/* eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul); margin-bottom:16px;
}
.eyebrow::before{content:""; width:22px; height:3px; border-radius:3px; background:var(--espectro)}

.section-head{max-width:680px; margin-bottom:46px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(1.8rem, 3.4vw, 2.55rem)}
.section-head p{margin-top:14px; color:var(--cinza); font-size:1.06rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:.98rem;
  padding:13px 22px; border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px}
.btn-primary{background:var(--azul); color:#fff; box-shadow:0 8px 20px rgba(0,83,189,.25)}
.btn-primary:hover{background:var(--azul-700); transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,83,189,.32)}
.btn-ghost{background:#fff; color:var(--azul); border-color:var(--linha)}
.btn-ghost:hover{border-color:var(--azul); transform:translateY(-2px); box-shadow:var(--sh-sm)}
.btn-zap{background:var(--zap); color:#fff; box-shadow:0 8px 20px rgba(37,211,102,.3)}
.btn-zap:hover{background:var(--zap-700); transform:translateY(-2px)}
.btn-light{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.2); transform:translateY(-2px)}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid transparent;
  transition:box-shadow .25s, border-color .25s, background .25s;
}
.site-header::before{ content:""; display:block; height:4px; background:var(--espectro) }
.site-header.scrolled{box-shadow:0 6px 20px rgba(15,40,90,.07); border-bottom-color:var(--linha)}
.nav{display:flex; align-items:center; justify-content:space-between; height:74px}
.brand{display:flex; align-items:center}
.brand img{height:42px; width:auto}
.nav-links{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0}
.nav-links a{
  font-family:var(--display); font-weight:500; font-size:.96rem; color:var(--tinta);
  position:relative; padding:6px 0;
}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--azul); transition:right .25s var(--ease)}
.nav-links a:hover{color:var(--azul)}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex; align-items:center; gap:12px}
.nav-toggle{display:none; background:none; border:0; width:44px; height:44px; cursor:pointer; color:var(--tinta)}
.nav-toggle svg{width:26px; height:26px}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative; overflow:hidden; padding:84px 0 90px}
.hero::after{ /* brilho de fundo sutil */
  content:""; position:absolute; top:-180px; right:-160px; width:560px; height:560px; z-index:0;
  background:radial-gradient(circle, rgba(0,148,215,.10), rgba(0,83,189,0) 62%);
}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center}
.hero h1{font-size:clamp(2.25rem, 4.6vw, 3.5rem); letter-spacing:-.02em}
.hero h1 .grad{
  background:linear-gradient(90deg, var(--azul), var(--c7)); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.hero-lead{margin-top:20px; font-size:1.16rem; color:var(--cinza); max-width:540px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero-trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px}
.hero-trust span{display:inline-flex; align-items:center; gap:8px; font-size:.93rem; color:var(--cinza)}
.hero-trust svg{width:18px; height:18px; color:var(--c10)}

/* painel visual */
.hero-visual{position:relative; display:flex; justify-content:center}
.hero-card{
  position:relative; width:100%; max-width:430px; aspect-ratio:1/1; border-radius:30px;
  background:linear-gradient(160deg, #fff, var(--azul-050)); border:1px solid var(--linha);
  box-shadow:var(--sh-lg); display:grid; place-items:center;
}
.hero-card::before{ /* anel suave */
  content:""; position:absolute; inset:13%; border-radius:50%;
  background:radial-gradient(circle, rgba(0,83,189,.06), rgba(0,83,189,0) 70%);
}
.hero-card img{width:54%; position:relative; filter:drop-shadow(0 16px 30px rgba(15,40,90,.18))}
.chip{
  position:absolute; display:flex; align-items:center; gap:9px; background:#fff;
  border:1px solid var(--linha); box-shadow:var(--sh); border-radius:14px;
  padding:10px 14px; font-family:var(--display); font-weight:500; font-size:.86rem;
}
.chip svg{width:18px; height:18px; color:var(--c10)}
.chip.tl{top:8%; left:-6%}
.chip.br{bottom:9%; right:-5%}
.chip.br svg{color:var(--azul)}

/* faixa de logos de programas (selo de normas) */
.norm-strip{border-top:1px solid var(--linha); margin-top:64px; padding-top:30px;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px; justify-content:center}
.norm-strip .lbl{font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cinza-300)}
.norm-strip b{font-family:var(--display); font-weight:600; color:var(--azul-900); font-size:.98rem}

/* =========================================================================
   CARDS DE SERVIÇO
   ========================================================================= */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:22px}
.card{
  background:#fff; border:1px solid var(--linha); border-radius:var(--r-lg); padding:30px 28px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
  position:relative; overflow:hidden;
}
.card::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--espectro); opacity:0; transition:opacity .22s}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent}
.card:hover::before{opacity:1}
.card .ic{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:var(--azul-050); color:var(--azul); margin-bottom:18px;
}
.card .ic svg{width:27px; height:27px}
.card h3{font-size:1.22rem; margin-bottom:10px}
.card p{color:var(--cinza); font-size:1rem}
.card ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.card ul li{
  font-family:var(--display); font-weight:500; font-size:.82rem; color:var(--azul-900);
  background:var(--nuvem); border:1px solid var(--linha); border-radius:var(--r-pill); padding:5px 12px;
}

/* =========================================================================
   ESPECIALIDADES (assinatura: marcador colorido do espectro)
   ========================================================================= */
.specialty-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(215px,1fr)); gap:12px}
.spec{
  display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--linha);
  border-radius:14px; padding:15px 16px; transition:transform .18s var(--ease), box-shadow .18s, border-color .18s;
}
.spec:hover{transform:translateY(-3px); box-shadow:var(--sh); border-color:transparent}
.spec .dot{width:11px; height:11px; border-radius:50%; flex:none; box-shadow:0 0 0 4px rgba(0,0,0,.03)}
.spec span{font-family:var(--display); font-weight:500; font-size:.98rem; color:var(--tinta)}
/* 10 cores do espectro, ciclando */
.spec:nth-child(10n+1) .dot{background:var(--c1)}
.spec:nth-child(10n+2) .dot{background:var(--c2)}
.spec:nth-child(10n+3) .dot{background:var(--c3)}
.spec:nth-child(10n+4) .dot{background:var(--c4)}
.spec:nth-child(10n+5) .dot{background:var(--c5)}
.spec:nth-child(10n+6) .dot{background:var(--c6)}
.spec:nth-child(10n+7) .dot{background:var(--c7)}
.spec:nth-child(10n+8) .dot{background:var(--c8)}
.spec:nth-child(10n+9) .dot{background:var(--c9)}
.spec:nth-child(10n)   .dot{background:var(--c10)}
.spec-note{margin-top:22px; color:var(--cinza); font-size:.98rem}

/* exames complementares */
.exam-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.exam-tags span{
  font-family:var(--display); font-weight:500; font-size:.92rem; color:var(--azul-900);
  background:#fff; border:1px solid var(--linha); border-radius:var(--r-pill); padding:9px 16px;
  transition:border-color .18s, color .18s, transform .15s var(--ease);
}
.exam-tags span:hover{border-color:var(--azul); color:var(--azul); transform:translateY(-2px)}

/* =========================================================================
   DIFERENCIAIS
   ========================================================================= */
.feature-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:26px 30px}
.feature{display:flex; gap:16px}
.feature .ic{flex:none; width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:var(--azul-050); color:var(--azul)}
.feature .ic svg{width:24px; height:24px}
.feature h3{font-size:1.1rem; margin-bottom:5px}
.feature p{color:var(--cinza); font-size:.98rem}

/* =========================================================================
   PROCESSO (sequência real → numeração faz sentido)
   ========================================================================= */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; position:relative}
.steps::before{content:""; position:absolute; top:27px; left:11%; right:11%; height:2px; background:var(--linha); z-index:0}
.step{position:relative; z-index:1; text-align:center}
.step .num{
  counter-increment:step; width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; background:#fff; border:2px solid var(--azul);
  color:var(--azul); font-family:var(--display); font-weight:700; font-size:1.3rem;
}
.step h3{font-size:1.08rem; margin-bottom:6px}
.step p{color:var(--cinza); font-size:.95rem}

/* =========================================================================
   FAIXA CTA
   ========================================================================= */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(135deg, var(--azul-900), var(--azul-700)); color:#fff; border-radius:28px; padding:54px 48px}
.cta-band::after{content:""; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(0,196,211,.18), transparent 65%)}
.cta-band .inner{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap}
.cta-band h2{color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); max-width:620px}
.cta-band p{color:rgba(255,255,255,.82); margin-top:10px; max-width:560px}
.cta-band .actions{display:flex; gap:14px; flex-wrap:wrap}

/* =========================================================================
   CONTATO
   ========================================================================= */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start}
.contact-info .item{display:flex; gap:15px; padding:16px 0; border-bottom:1px solid var(--linha)}
.contact-info .item:last-child{border-bottom:0}
.contact-info .ic{flex:none; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--azul-050); color:var(--azul)}
.contact-info .ic svg{width:22px; height:22px}
.contact-info .it-label{font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cinza-300); margin-bottom:3px}
.contact-info .it-val{font-size:1.04rem; color:var(--tinta)}
.contact-info .it-val a{color:var(--tinta)}
.contact-info .it-val a:hover{color:var(--azul)}
.contact-map{margin-top:22px; border-radius:var(--r); overflow:hidden; border:1px solid var(--linha); box-shadow:var(--sh-sm)}
.contact-map iframe{width:100%; height:240px; border:0; display:block; filter:grayscale(.15)}

.form-card{background:#fff; border:1px solid var(--linha); border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh)}
.form-card h3{font-size:1.3rem; margin-bottom:6px}
.form-card .sub{color:var(--cinza); font-size:.97rem; margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block; font-family:var(--display); font-weight:500; font-size:.86rem; margin-bottom:7px; color:var(--tinta)}
.field input, .field textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--tinta);
  padding:13px 15px; border:1.5px solid var(--linha); border-radius:12px; background:var(--nuvem);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--azul); background:#fff; box-shadow:0 0 0 4px rgba(0,83,189,.1)}
.field textarea{resize:vertical; min-height:110px}
.form-card .btn{width:100%; justify-content:center; margin-top:4px}
.form-note{font-size:.82rem; color:var(--cinza-300); text-align:center; margin-top:12px}

/* =========================================================================
   FAQ (accordion)
   ========================================================================= */
.faq{max-width:820px; margin:0 auto}
.acc-item{background:#fff; border:1px solid var(--linha); border-radius:14px; margin-bottom:12px; overflow:hidden; transition:box-shadow .2s, border-color .2s}
.acc-item.open{box-shadow:var(--sh); border-color:transparent}
.acc-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:none; border:0; cursor:pointer; text-align:left; padding:20px 22px;
  font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--tinta);
}
.acc-q .pm{flex:none; width:26px; height:26px; position:relative}
.acc-q .pm::before, .acc-q .pm::after{content:""; position:absolute; background:var(--azul); border-radius:2px; transition:transform .25s var(--ease), opacity .25s}
.acc-q .pm::before{top:12px; left:4px; width:18px; height:2px}
.acc-q .pm::after{left:12px; top:4px; width:2px; height:18px}
.acc-item.open .acc-q .pm::after{transform:rotate(90deg); opacity:0}
.acc-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease)}
.acc-a p{padding:0 22px 22px; color:var(--cinza); font-size:1rem}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--azul-900); color:#fff}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:64px 0 44px}
.f-brand img{height:62px; width:auto; margin-bottom:18px}
.f-brand p{color:rgba(255,255,255,.66); font-size:.96rem; max-width:300px}
.f-col h4{font-family:var(--display); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:16px}
.f-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.f-col a, .f-col li{color:rgba(255,255,255,.82); font-size:.97rem}
.f-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12)}
.footer-bottom .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 24px; flex-wrap:wrap}
.footer-bottom p{color:rgba(255,255,255,.6); font-size:.85rem}
.footer-spectrum{height:4px; background:var(--espectro)}

/* =========================================================================
   FLUTUANTES
   ========================================================================= */
.fab{
  position:fixed; right:22px; bottom:22px; z-index:70; width:58px; height:58px; border-radius:50%;
  background:var(--zap); color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.45);
  transition:transform .2s var(--ease);
}
.fab svg{width:30px; height:30px}
.fab:hover{transform:scale(1.08)}
.fab::after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* =========================================================================
   REVELAÇÃO AO ROLAR
   ========================================================================= */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width:980px){
  section{padding:72px 0}
  .hero{padding:54px 0 64px}
  .hero-grid{grid-template-columns:1fr; gap:42px}
  .hero-visual{order:-1}
  .hero-card{max-width:340px}
  .hero-lead{max-width:none}
  .steps{grid-template-columns:1fr 1fr; gap:30px}
  .steps::before{display:none}
  .contact-grid{grid-template-columns:1fr; gap:34px}
  .footer-top{grid-template-columns:1fr 1fr; gap:34px}
  .f-brand{grid-column:1 / -1}
  /* nav mobile */
  .nav-links, .nav-cta .btn-ghost{display:none}
  .nav-toggle{display:grid; place-items:center}
  .mobile-menu{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background:#fff; z-index:65;
    transform:translateX(100%); transition:transform .3s var(--ease); box-shadow:-20px 0 50px rgba(15,40,90,.18);
    padding:96px 28px 32px; display:flex; flex-direction:column; gap:6px;
  }
  .mobile-menu.open{transform:none}
  .mobile-menu a{font-family:var(--display); font-weight:500; font-size:1.05rem; color:var(--tinta); padding:14px 0; border-bottom:1px solid var(--linha)}
  .mobile-menu .btn{margin-top:18px; justify-content:center}
  .menu-backdrop{position:fixed; inset:0; background:rgba(10,42,82,.45); z-index:64; opacity:0; visibility:hidden; transition:opacity .3s}
  .menu-backdrop.open{opacity:1; visibility:visible}
}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:60px 0}
  .cta-band{padding:38px 26px; border-radius:22px}
  .cta-band .inner{flex-direction:column; align-items:flex-start}
  .steps{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .hero-actions .btn{flex:1 1 auto; justify-content:center}
  .chip{display:none}
}

/* desktop: esconder elementos mobile */
@media (min-width:981px){
  .mobile-menu, .menu-backdrop{display:none}
}

/* movimento reduzido */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .btn, .card, .spec, .feature, .fab{transition:none}
}

/* ===== Hero com foto profissional (substitui o símbolo) ===== */
.hero-photo{position:relative;width:100%;max-width:460px;margin-left:auto}
.hero-photo-img{border-radius:24px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 60px rgba(15,40,90,.22);background:#eaf0fb}
.hero-photo-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:880px){ .hero-photo{max-width:380px;margin:0 auto} }

/* ===== Quem somos ===== */
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center}
.about-media img{width:100%;border-radius:20px;box-shadow:0 24px 50px rgba(15,40,90,.18);display:block;aspect-ratio:4/3;object-fit:cover}
.about-copy h2{font-size:30px;line-height:1.16;margin:8px 0 14px;color:#003C86;font-family:"Poppins",system-ui,sans-serif}
.about-copy p{color:#5C6470;margin:0 0 12px;font-size:15.5px;line-height:1.7}
.about-copy p strong{color:#1D1D1B}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}
.stat-item{background:#fff;border:1px solid #DFE5EF;border-radius:16px;padding:20px 14px;text-align:center;box-shadow:0 6px 22px rgba(15,40,90,.05)}
.stat-item b{display:block;font-family:"Poppins",system-ui,sans-serif;font-size:30px;color:#0053BD;line-height:1}
.stat-item span{display:block;margin-top:7px;color:#5C6470;font-size:13px;font-weight:500;line-height:1.3}
@media (max-width:880px){ .about-grid{grid-template-columns:1fr;gap:24px} .about-stats{grid-template-columns:1fr 1fr} }

/* ===== Hero: cartão de credibilidade (sem foto) ===== */
.trust-card{background:#fff;border:1px solid #DFE5EF;border-radius:24px;box-shadow:0 30px 60px rgba(15,40,90,.18);padding:30px;max-width:440px;margin-left:auto}
.tc-top{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#0053BD;background:#EAF1FC;border-radius:999px;padding:8px 14px;font-size:13px}
.tc-top svg{width:16px;height:16px}
.tc-big{margin:20px 0 4px}
.tc-big b{display:block;font-family:"Poppins",system-ui,sans-serif;font-size:46px;color:#0053BD;line-height:1}
.tc-big span{display:block;color:#5C6470;font-size:14px;margin-top:8px;max-width:260px}
.tc-list{display:grid;gap:12px;margin-top:20px;border-top:1px solid #DFE5EF;padding-top:18px}
.tc-list div{display:flex;align-items:center;gap:10px;font-weight:600;color:#1D1D1B;font-size:14.5px}
.tc-list svg{width:18px;height:18px;color:#1DBE6E;flex:0 0 18px}
/* Quem somos centralizado (sem foto) */
.about-copy-center{max-width:820px;margin:0 auto;text-align:center}
@media (max-width:880px){ .trust-card{max-width:100%;margin:0 auto} }

/* ===== Hero: ilustrações que passam (slideshow) ===== */
.hero-slides{position:relative;width:100%;max-width:520px;margin-left:auto;aspect-ratio:4/3}
.hero-slides .hs{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.98);transition:opacity .8s ease, transform .8s ease}
.hero-slides .hs.active{opacity:1;transform:scale(1)}
.hs-dots{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.hs-dots span{width:8px;height:8px;border-radius:50%;background:#cfdcef;transition:.3s}
.hs-dots span.active{background:#0053BD;width:22px;border-radius:5px}
@media(max-width:880px){.hero-slides{max-width:420px;margin:0 auto}}