/* ================= BOTÕES ================= */
/* css/bootstrap.min.css é um build customizado (ver AGENTS.md) e nele .btn-secondary já nasce
   com --bs-btn-color:#000 — fazia sentido com a cor secundária antiga (um azul), mas com a
   marca da Orizzonte (--secondary-color laranja) o texto precisa ser branco, igual o .btn-primary
   já faz. Não dá pra editar o bootstrap.min.css direto, então o ajuste fica aqui (carrega depois
   e vence por ordem, mesma especificidade). Mesmo ajuste no hover/active do outline-secondary,
   que preenche com laranja e caía no mesmo problema. */
.btn-secondary{--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-disabled-color:#fff}
.btn-outline-secondary{--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}

/* ================= HEADER ================= */
/* Fundo sólido roxo da marca (pedido de alteração — era translúcido com blur; como agora é
   opaco, o backdrop-filter saiu junto: evita o bug de position:fixed do #offcanvasNavbar
   descrito no guia de protótipo, já que header deixou de ser containing block). */
header.header{
  background-color:var(--primary-color);
  box-shadow:0 2px 16px rgba(0,0,0,.05)
}
/* 1.25rem = 1rem do container + .25rem do bloco de conteúdo (altura final de 88px no desktop) */
header .header__row{padding-block:1.25rem}
header .logo-desktop,header .logo-mobile-menu{width:164px;height:auto;margin:0}
header .header__actions{gap:.5rem}

/* Links do menu — texto branco sobre o fundo roxo; hover/active em laranja (secundária) pra
   não repetir o roxo do fundo. */
header .navbar{
  --bs-navbar-padding-y:0;
  --bs-navbar-color:var(--bs-white);
  --bs-navbar-hover-color:var(--secondary-color);
  --bs-navbar-active-color:var(--secondary-color)
}
header .navbar-nav{--bs-nav-link-padding-x:.75rem;--bs-nav-link-padding-y:.75rem;--bs-nav-link-font-weight:500}
header .navbar-nav .nav-link{border-radius:1rem;line-height:1.5}
@media screen and (min-width:992px){
  header .navbar-nav{gap:.75rem}
  header .navbar-nav .nav-link:hover,header .navbar-nav .nav-link:focus-visible{background-color:rgba(255,255,255,.12)}
}

/* Botão de menu (mobile) com o ícone do design */
header .navbar-toggler{--bs-navbar-toggler-border-color:transparent;--bs-navbar-toggler-padding-x:.75rem;--bs-navbar-toggler-padding-y:.75rem;border:0}
header .navbar-toggler-icon{
  width:1.125rem;height:.75rem;
  background-image:none;
  background-color:var(--bs-white);
  -webkit-mask:url(../imagens/icones/menu.svg) center/contain no-repeat;
  mask:url(../imagens/icones/menu.svg) center/contain no-repeat
}

/* CTA "Solicite um orçamento" */
.btn--cta{
  --bs-btn-padding-x:1.5rem;
  --bs-btn-padding-y:.75rem;
  --bs-btn-border-width:0;
  --bs-btn-border-radius:1rem;
  --bs-btn-font-weight:500;
  gap:.75rem
}
.icon{display:inline-block;flex:0 0 auto;background-color:currentColor}
.icon--chevron{
  width:1.25rem;height:1.25rem;
  -webkit-mask:url(../imagens/icones/chevron-right.svg) center/contain no-repeat;
  mask:url(../imagens/icones/chevron-right.svg) center/contain no-repeat
}

/* ================= HERO BANNER (banner padrão / home) ================= */
/* splide/splide.min.css fixa ".splide-banner{height:var(--slider-height)}" (33.3vw) pensado para os
   temas de banner com imagem de fundo em tela cheia (renderTheme2/3, proporção fixa 1920x640). Este
   hero tem altura de conteúdo variável, então precisamos de mais especificidade que o seletor do vendor
   (:has escopa a mudança só para este slide — os demais temas de banner mantêm a altura fixa original). */
.splide-banner:has(.hero-banner),
.splide-banner:has(.hero-banner) .splide__track,
.splide-banner:has(.hero-banner) .splide__list,
.splide-banner:has(.hero-banner) .splide__slide{height:auto}

/* Banner SIG tema 1 ("só imagem" — dr_sliders, <a><img> direto no slide, sem overlay de
   texto): mesmo problema do hero acima. A imagem cadastrada (2752x1536) não é 1920x640, então
   travar a altura em 33.3vw cortaria o topo/rodapé da arte via object-fit:cover. Trocamos por
   aspect-ratio na proporção real da imagem — se o banner for substituído por outro de proporção
   diferente pelo SIG, ajuste (ou remova) esse aspect-ratio. */
.splide-banner:has(.splide__slide > a > img){height:auto}
.splide-banner:has(.splide__slide > a > img) .splide__track,
.splide-banner:has(.splide__slide > a > img) .splide__list{height:auto}
.splide-banner:has(.splide__slide > a > img) .splide__slide{height:auto;aspect-ratio:1920/1072}
.splide-banner .splide__slide>a{display:block;height:100%}
.hero-banner{
  padding-block:6rem;
  /* Wash radial do design: branco no centro esmaecendo para um tom lilás claro (tint do primary) */
  background-image:radial-gradient(ellipse 70% 140% at center, var(--bs-tertiary-bg) 0%, rgba(229,215,237,.5) 100%);
}
.hero-banner__row{display:flex;flex-wrap:wrap;align-items:center;row-gap:2.5rem;column-gap:7.5rem}
.hero-banner__box{display:flex;flex-direction:column;gap:3.5rem;width:100%;max-width:470px}
.hero-banner__content{display:flex;flex-direction:column;gap:2.5rem}
.hero-banner__title{margin:0;font-family:var(--secondary-font);font-weight:700;font-size:2.5rem;line-height:1.2;color:var(--bs-body-color)}
.hero-banner__title span{color:var(--primary-color)}
.hero-banner__text{margin:0;color:var(--grey);font-size:1rem;line-height:1.5}
.hero-banner__cta{--bs-btn-padding-x:2rem;--bs-btn-padding-y:1rem;--bs-btn-font-size:1.125rem;gap:1rem}
.hero-banner__image{flex:1 1 0;min-width:350px;height:523px;border-radius:var(--bs-border-radius-xl);overflow:hidden}
.hero-banner__image img{width:100%;height:100%;object-fit:cover;display:block}

@media screen and (min-width:992px){
  .hero-banner__box{flex:1 1 0;min-width:470px}
}
@media screen and (max-width:576px){
  .hero-banner{padding-block:3rem}
  .hero-banner__title{font-size:1.75rem}
  .hero-banner__image{height:320px;min-width:100%}
}

/* Ícone do botão "Solicitar orçamento" (mascarado em currentColor, como .icon--chevron) */
.icon--arrow{
  width:1.25rem;height:1.375rem;
  -webkit-mask:url(../imagens/icones/arrow-right.svg) center/contain no-repeat;
  mask:url(../imagens/icones/arrow-right.svg) center/contain no-repeat
}

/* ================= FOOTER (Figma node-id=384002:6305) ================= */
/* #281532 é um 5º degrau da marca ("primary/full"), literal pelo mesmo motivo
   do #432354 usado em .diferenciais/.cta-contato — só existe neste fundo. */
.footer{background-color:#281532;padding-block:5rem 0;margin-top:3rem}
.footer__row{display:flex;flex-wrap:wrap;row-gap:3.5rem;column-gap:4rem;justify-content:center;padding-bottom:3.5rem}

.footer__info{flex:1 1 0;min-width:320px;max-width:320px;display:flex;flex-direction:column;gap:1.5rem}
.footer__logo{width:164px;height:auto}
.footer__desc{margin:0;color:#c3c3c3;font-size:.875rem}
.footer__social-icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid var(--bs-white);border-radius:1rem;color:var(--bs-white);transition:var(--transition)}
.footer__social-icon:hover{background-color:var(--bs-white);color:#281532}

.footer__columns{flex:2 1 0;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:4rem;row-gap:2rem}
.footer__column{flex:1 1 180px;min-width:180px;max-width:330px}
.footer__heading{margin:0 0 1.5rem;font-family:var(--secondary-font);font-weight:700;font-size:.875rem;letter-spacing:.1875rem;text-transform:uppercase;color:var(--bs-white)}
.footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;color:#c3c3c3}
.footer__list a{color:#c3c3c3;text-decoration:none;transition:var(--transition)}
.footer__list a:hover{color:var(--bs-white)}
.footer__list--plain{font-size:.875rem}

.footer__bottom{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;padding-block:1rem;border-top:1px solid rgba(255,255,255,.1)}
.footer__copy{margin:0;flex:1 1 0;min-width:280px;font-size:.875rem;color:#c3c3c3}
.footer__badges{display:flex;align-items:center;gap:1rem}
.footer__w3c{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:#c3c3c3;text-decoration:none}
.footer__w3c:hover{color:var(--bs-white)}
.footer__selo{height:34px;width:auto;object-fit:contain}
.footer__divider{width:1px;height:1rem;background-color:rgba(255,255,255,.15)}
.footer__top{display:flex;align-items:center;gap:1rem;background:none;border:0;padding:0;font-size:.875rem;font-weight:600;color:var(--bs-white);cursor:pointer}
.footer__top i{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:1rem;background-color:var(--secondary-color);color:var(--bs-white);font-size:.875rem}

@media screen and (max-width:768px){
  .footer__columns{width:100%;justify-content:flex-start}
}

@media screen and (max-width:576px){
  .footer{padding-block:3rem 0}
  .footer__bottom{justify-content:center;text-align:center}
  .footer__copy{text-align:center}
}

.card.card--23{all:unset;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:space-between;flex-flow:column nowrap;gap:1rem;background-color:var(--dark);background-image:linear-gradient(-45deg,var(--dark),var(--grey)),var(--card-background);background-size:cover;background-repeat:no-repeat;background-position:center;background-blend-mode:multiply,normal;border-radius:1rem;padding:1rem;position:relative;height:100%}
.card.card--23:focus-within,.card.card--23:hover{box-shadow:0 0 0 2px var(--secondary-color)}
.card.card--23 .card__title{color:#fff;font-size:1.25rem;text-shadow:0 0 .25rem var(--dark);margin:0;min-height:calc(1.25rem * 2 * 1.3)}
.card.card--23 .card__link{z-index:1;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;flex-flow:row nowrap;padding:.5rem .75rem;font-size:.875rem;text-transform:uppercase;transition:var(--transition);color:var(--light);font-weight:600;border:2px solid currentColor;border-radius:99px}
.card.card--23 .card__link>span{width:0;max-width:fit-content;opacity:0;transition:var(--transition)}
.card.card--23 .card__link:focus>span,.card.card--23 .card__link:hover>span{width:100px;opacity:1;margin-right:.5rem}
.card.card--23 .card__link::before{content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1;backface-visibility:visible}
.card.card--23 .card__link:focus,.card.card--23 .card__link:hover{border-color:var(--primary-color);background-color:var(--primary-color)}

.shadow-19{box-shadow:rgba(50,50,93,.25) 0 2px 5px -1px,rgba(0,0,0,.3) 0 1px 3px -1px}

/* ================= SOBRE (Quem Somos — inc/sobre-inc.php, usado em home.php e empresa.php) ================= */
.about-section{background-color:var(--bs-tertiary-bg);padding-block:7.5rem}
.about-section__row{display:flex;flex-wrap:wrap;align-items:center;gap:2rem 4.5rem}
/* Versão da empresa.php: imagem à direita. Só a partir do breakpoint em que as colunas
   ficam lado a lado — no mobile empilhado as duas versões devem parecer iguais (imagem no topo). */
@media screen and (min-width:577px){
  .about-section--reverse .about-section__row{flex-direction:row-reverse}
}
.about-section__image{flex:1 1 0;min-width:350px;height:530px;border-radius:var(--bs-border-radius-xl);overflow:hidden}
.about-section__image img{width:100%;height:100%;object-fit:cover;display:block}
.about-section__image iframe{width:100%;height:100%;display:block;border:0}
.about-section__content{flex:1 1 0;min-width:350px;display:flex;flex-direction:column;align-items:start;gap:2rem}
.about-section__title-group{display:flex;flex-direction:column;gap:1rem}
.about-section__eyebrow{margin:0;font-family:var(--secondary-font);font-weight:500;font-size:1rem;letter-spacing:.3125rem;text-transform:uppercase;color:var(--primary-color)}
.about-section__title{margin:0;font-family:var(--secondary-font);font-weight:700;font-size:2rem;line-height:1.2;color:var(--bs-body-color)}
.about-section__text{color:var(--grey);font-size:1.125rem;line-height:1.4}
.about-section__text p{margin:0 0 1rem}
.about-section__text p:last-child{margin-bottom:0}
.btn--cta-outline{--bs-btn-padding-x:1.5rem;--bs-btn-padding-y:.75rem;--bs-btn-border-radius:1rem;--bs-btn-font-weight:500}

@media screen and (max-width:576px){
  .about-section{padding-block:4rem}
  .about-section__image{height:320px;min-width:100%}
  .about-section__title{font-size:1.5rem}
}

/* ================= DIFERENCIAIS ================= */
/* Fundo em camadas, igual ao do Figma: véu preto 20% uniforme sobre um radial da marca.
   O tom mais escuro da ponta (#432354) é um 4º degrau ("primary/darker") que só existe
   neste gradiente decorativo — não é um token reaproveitável, por isso fica literal.
   Variante escura (fundo cheio, cards roxos com escrita branca) — usada na página Empresa
   (o padrão do partial é este; ver empresa.php, que não sobrescreve $diferenciaisVariante). */
.diferenciais{
  padding-block:11rem;
  background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),
    radial-gradient(ellipse 90% 145% at center, var(--primary-color) 0%, #432354 100%);
}
.diferenciais__header{display:flex;flex-direction:column;gap:1rem;margin-bottom:4rem}
.diferenciais__eyebrow{margin:0;font-family:var(--secondary-font);font-weight:500;font-size:1rem;letter-spacing:.3125rem;text-transform:uppercase;color:var(--secondary-color)}
.diferenciais__title{margin:0;font-family:var(--secondary-font);font-weight:700;font-size:2rem;line-height:1.2;color:var(--bs-white)}
.diferenciais__grid{display:flex;flex-wrap:wrap;gap:1rem}
.diferenciais__card{flex:1 1 0;min-width:290px;padding:1.5rem;border:1px solid #e9e9e9;border-radius:.75rem;background-image:linear-gradient(to bottom, rgba(246,246,246,.08), rgba(226,226,226,0));transition:var(--transition)}
.diferenciais__card:hover{transform:translateY(-6px)}
.diferenciais__number{display:block;margin:0 0 1rem;font-family:var(--secondary-font);font-weight:700;font-size:1.375rem;color:var(--secondary-color)}
.diferenciais__card-title{margin:0 0 .75rem;font-family:var(--primary-font);font-weight:500;font-size:1.125rem;color:var(--bs-white)}
.diferenciais__card-text{margin:0;font-size:1rem;line-height:1.5;color:#c3c3c3}

/* Variante clara (cards brancos com escrita roxa, sem o fundo cheio) — usada na home
   (ver home.php, que define $diferenciaisVariante = 'claro' antes do include). */
.diferenciais--light{padding-block:3.5rem;background-image:none;background-color:var(--bs-tertiary-bg)}
.diferenciais--light .diferenciais__eyebrow{color:var(--secondary-color)}
.diferenciais--light .diferenciais__title{color:var(--bs-body-color)}
.diferenciais--light .diferenciais__card{border-color:var(--bs-border-color);background-image:none;background-color:var(--bs-white);box-shadow:0 2px 16px rgba(0,0,0,.05)}
.diferenciais--light .diferenciais__card-title{color:var(--primary-color)}
.diferenciais--light .diferenciais__card-text{color:var(--primary-color)}

@media screen and (max-width:576px){
  .diferenciais{padding-block:5rem}
  .diferenciais__title{font-size:1.5rem}
}

/* ================= CTA CONTATO (home — substitui o cta-default nesta página) ================= */
/* Mesmo fundo em camadas do .diferenciais (véu preto 20% + radial da marca) — ver comentário lá. */
.cta-contato{
  padding-block:11rem;
  background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),
    radial-gradient(ellipse 90% 145% at center, var(--primary-color) 0%, #432354 100%);
}
.cta-contato__row{display:flex;flex-wrap:wrap;row-gap:2rem;column-gap:7.5rem;align-items:center}
.cta-contato__content{flex:1 1 0;min-width:350px;max-width:510px;display:flex;flex-direction:column;gap:2rem}
.cta-contato__intro{display:flex;flex-direction:column;gap:1.5rem}
.cta-contato__title{margin:0;font-family:var(--secondary-font);font-weight:700;font-size:2rem;line-height:1.2;color:var(--bs-white)}
.cta-contato__text{margin:0;color:var(--bs-white)}
.cta-contato__info{display:flex;flex-direction:column;gap:2rem}
.cta-contato__info-label{margin:0 0 .5rem;font-family:var(--secondary-font);font-weight:500;font-size:1rem;letter-spacing:.125rem;text-transform:uppercase;color:var(--bs-white)}
.cta-contato__info-value{color:var(--bs-white);text-decoration:none}
.cta-contato__info-value:hover{color:var(--secondary-color)}

.cta-contato__form-wrap{flex:1 1 0;min-width:350px;padding:2.5rem 2rem;background-image:linear-gradient(to bottom, rgba(246,246,246,.08), rgba(226,226,226,0));border:1.5px solid #e9e9e9;border-radius:var(--bs-border-radius-xl)}
.cta-contato__fields{display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:1.5rem}
.cta-contato__field{flex:1 1 0;min-width:250px;display:flex;flex-direction:column;gap:1rem}
.cta-contato__label{margin:0;color:#c3c3c3;font-weight:500}
.cta-contato__input{width:100%;background-color:rgba(250,250,250,.15);border:0;border-radius:.75rem;padding:1rem .75rem;color:var(--bs-white);font-size:.875rem}
.cta-contato__input::placeholder{color:#c3c3c3}
.cta-contato__input:focus{background-color:rgba(250,250,250,.25);color:var(--bs-white);box-shadow:0 0 0 2px rgba(255,255,255,.3);outline:0}
/* Reaproveita o <select> nativo do Bootstrap, só recolorindo a seta pro tom claro do design */
.cta-contato__select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c3c3c3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
.cta-contato__select option{color:var(--bs-body-color)}
.cta-contato__required{margin:0 0 1.5rem;text-align:right;font-size:.875rem;color:#c3c3c3}
.cta-contato__submit{width:100%;--bs-btn-padding-x:2rem;--bs-btn-padding-y:1rem;--bs-btn-font-size:1.125rem;gap:1rem}

@media screen and (max-width:576px){
  .cta-contato{padding-block:5rem}
  .cta-contato__title{font-size:1.5rem}
  .cta-contato__form-wrap{padding:1.5rem}
  .cta-contato__required{text-align:left}
}

/* ================= CLIENTES ================= */
.clientes .clientes__item{display:grid;place-items:center;padding:1rem;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden}
.clientes .clientes__item img{width:100%;aspect-ratio:1/1;object-fit:contain;margin:0 auto;opacity:.75;border-radius:var(--bs-border-radius-sm);transition:opacity var(--transition)}
.clientes .clientes__item:hover img{opacity:1}

/* ================= AVALIAÇÕES (depoimentos) ================= */
.avaliacoes__panel{background-color:var(--bs-tertiary-bg);border:1px solid #e9e9e9;border-radius:var(--bs-border-radius-xl);padding:3.5rem}
.avaliacoes__header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem;margin-bottom:3.5rem}
.avaliacoes__title-group{display:flex;flex-direction:column;gap:1rem;min-width:290px}
.avaliacoes__eyebrow{margin:0;font-family:var(--secondary-font);font-weight:500;font-size:1rem;letter-spacing:.3125rem;text-transform:uppercase;color:var(--primary-color)}
.avaliacoes__title{margin:0;font-family:var(--secondary-font);font-weight:700;font-size:2rem;line-height:1.2;color:var(--bs-body-color)}
.avaliacoes__rating{display:flex;flex-direction:column;align-items:end;gap:1rem;min-width:290px}
.avaliacoes__rating-row{display:flex;align-items:center;gap:1rem}
.avaliacoes__stars{display:flex;gap:.5rem}
.avaliacoes__score{margin:0;font-family:var(--secondary-font);font-weight:700;font-size:2rem;color:var(--bs-body-color)}
.avaliacoes__caption{margin:0;color:var(--grey);text-align:right}

.avaliacoes__grid{display:flex;flex-wrap:wrap;gap:1rem}
.avaliacoes__card{flex:1 1 0;min-width:290px;min-height:210px;display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background-color:var(--bs-body-bg);border:1px solid #e9e9e9;border-radius:.75rem;transition:var(--transition)}
.avaliacoes__card:hover{transform:translateY(-6px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.avaliacoes__card .avaliacoes__stars{margin-bottom:.5rem}

/* Selo "avaliações do Google" (logo + verificado), ao lado da nota geral */
.avaliacoes__google{display:flex;align-items:center;gap:.5rem}
.avaliacoes__google-icon{width:1.25rem;height:1.25rem;flex:0 0 auto}
.avaliacoes__google-name{font-family:var(--secondary-font);font-weight:600;color:var(--bs-body-color)}
.avaliacoes__verified{display:inline-flex;align-items:center;gap:.25rem;font-size:.8125rem;font-weight:500;color:var(--success)}
.avaliacoes__verified svg{width:1rem;height:1rem}
.avaliacoes__quote{margin:0;color:var(--grey)}
.avaliacoes__footer{margin-top:auto;padding-top:1rem;display:flex;align-items:center;gap:.75rem}
.avaliacoes__author-image{width:100%;max-width:48px;aspect-ratio:1/1;object-fit:cover;border-radius:999px}
.avaliacoes__name{display:block;font-weight:600;color:var(--bs-body-color);font-style:normal}
.avaliacoes__company{display:block;font-size:.875rem;color:var(--grey)}

/* Estrela com cor própria do design (dourado) — não usa currentColor como .icon--chevron/.icon--arrow */
.icon--star{
  display:inline-block;flex:0 0 auto;width:1.5rem;height:1.5rem;
  background-image:url(../imagens/icones/estrela.svg);
  background-size:contain;background-repeat:no-repeat;background-position:center
}
.avaliacoes__card .icon--star{width:1rem;height:1rem}

@media screen and (max-width:576px){
  .avaliacoes__panel{padding:1.5rem}
  .avaliacoes__title{font-size:1.5rem}
  .avaliacoes__header{gap:1.5rem}
  .avaliacoes__rating{align-items:start}
  .avaliacoes__caption{text-align:left}
}

/* ================= CARD SERVIÇO (Layout::RenderServiceCard — /servicos e home) ================= */
.card-servico{display:flex;flex-direction:column;background-color:var(--bs-body-bg);border:1.5px solid #e9e9e9;border-radius:var(--bs-border-radius-xl);overflow:hidden}
.card-servico__image{ aspect-ratio: 1.5; padding:.625rem;background-color:var(--bs-white)}
.card-servico__image img{width:100%;height:100%;object-fit:cover;display:block}
.card-servico__body{flex:1 1 0;display:flex;flex-direction:column;gap:1rem;padding:1.5rem}
.card-servico__title{margin:0;font-family:var(--secondary-font);font-weight:700;font-size:1.125rem;color:#4a4848}
.card-servico__text{flex:1 1 0;margin:0;color:var(--grey)}
.card-servico__link{margin-top:auto;align-self:start;display:inline-flex;align-items:center;gap:.75rem;color:var(--secondary-color);font-weight:500;text-decoration:none}
.card-servico__link:hover{color:var(--primary-color)}

/* Página interna de serviço: respiro entre a breadcrumb e o conteúdo (antes era 0) */
.service-inc{padding-block:3.5rem}
/* serv_content vem do editor WYSIWYG do painel (perde classes manuais em cada edição), então
   o estilo de lista precisa vir do container — mesmos valores do .list/.list li de style-base.css */
.service-inc ul{margin:0 0 20px 40px}
.service-inc ul li{list-style:disc;margin:5px 0;font-size:1rem;line-height:1.5em;text-align:left}

/* Hero da página interna de serviço (Figma node-id=384023:5853) */
.servico-hero{display:flex;flex-wrap:wrap;row-gap:2rem;column-gap:5.5rem;align-items:center}
.servico-hero__content{flex:1 1 0;min-width:350px;display:flex;flex-direction:column;align-items:start;gap:2rem}
.servico-hero__title{margin:0;font-family:var(--secondary-font);font-weight:700;font-size:2rem;line-height:1.2;color:var(--bs-body-color)}
.servico-hero__text{color:var(--grey)}
.servico-hero__cta{--bs-btn-padding-x:2rem;--bs-btn-padding-y:1rem;--bs-btn-font-size:1.125rem}
/* object-fit:contain (não cover, como no Figma) — as imagens reais são infográficos com texto
   até a borda; cover cortava título/rodapé do infográfico, igual ao problema já corrigido
   em .card-servico__image (ver item 4 do checklist anterior). */
.servico-hero__image{flex:1 1 0;min-width:350px;display:flex;height:558px;padding:.625rem;background-color:var(--bs-white);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius-xl);overflow:hidden}
.servico-hero__image img{width:100%;height:100%;object-fit:contain;display:block;margin:auto}

@media screen and (max-width:576px){
  .servico-hero__title{font-size:1.5rem}
  .servico-hero__image{height:320px}
}

/* Box "Entre em contato" do aside de serviços — antes usava .bg-light (cinza genérico do Bootstrap) */
.aside-cta{background-color:var(--primary-color);border-radius:var(--bs-border-radius);padding:1rem}
.aside-cta__title{color:var(--bs-white);font-size:1.125rem;margin:0 0 1rem}