/* ─────────────────────────────────────────────────────────────
   Site institucional (dectemper.com.br / www.dectemper.com.br)

   Porte do site PHP antigo (template "The Project", Bootstrap 3 +
   jQuery + Revolution Slider) para o stack do apigodec: Bootstrap 5
   + HTMX + Alpine, sem jQuery e sem plugins de terceiros.

   A identidade veio do skin original `css/skins/light_blue.css`:
   ciano #09afdf como cor de marca, #0c9ec7 no hover e #2e3537 nas
   áreas escuras (topbar e rodapé).

   Escopo: tudo aqui é prefixado com `.site-` ou vive dentro de
   `.site-body`. O app (web./cliente.) usa o mesmo processo Go e o
   mesmo /assets/*, então um seletor solto de `.navbar` ou `.btn`
   vazaria para as telas internas.
   ───────────────────────────────────────────────────────────── */

.site-body {
  --site-brand: #09afdf;
  --site-brand-dark: #0c9ec7;
  --site-ink: #2e3537;
  --site-ink-soft: #394245;
  --site-muted: #777777;
  --site-line: #e5e9ea;

  color: var(--site-ink);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  margin: 0;
}

.site-body h1,
.site-body h2,
.site-body h3,
.site-body h4,
.site-body .site-title {
  font-family: "Raleway", "Roboto", system-ui, sans-serif;
  font-weight: 700;
}

/* :not(.btn) é obrigatório aqui. `.site-body a` tem especificidade (0,1,1) e
   vence `.btn-site-primary` (0,1,0), então sem a exceção TODO link com cara
   de botão herda o azul da marca no texto — azul sobre azul, ilegível. Foi
   exatamente o que aconteceu com os CTAs do carrossel, o "Trabalhe Conosco"
   e o "Falar no WhatsApp". Não remover. */
.site-body a:not(.btn) {
  color: var(--site-brand);
  text-decoration: none;
}

.site-body a:not(.btn):hover,
.site-body a:not(.btn):focus {
  color: var(--site-brand-dark);
  text-decoration: underline;
}

/* ── Topbar ─────────────────────────────────────────────── */

.site-topbar {
  background: var(--site-ink);
  color: #cdd4d6;
  font-size: 0.8125rem;
  padding: 0.4rem 0;
}

.site-topbar a:not(.btn) {
  color: #cdd4d6;
}

.site-topbar a:not(.btn):hover {
  color: #fff;
  text-decoration: none;
}

.site-topbar-contact {
  font-size: 0.8125rem;
}

.site-social a {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
  width: 28px;
}

.site-topbar .site-social a {
  background: rgba(255, 255, 255, 0.09);
  color: #cdd4d6;
}

.site-topbar .site-social a:hover {
  background: var(--site-brand);
  color: #fff;
}

.site-footer .site-social a {
  background: rgba(255, 255, 255, 0.08);
  color: #cdd4d6;
}

.site-footer .site-social a:hover {
  background: var(--site-brand);
  color: #fff;
}

/* ── Navbar ─────────────────────────────────────────────── */

.site-navbar {
  background: #fff;
  border-bottom: 1px solid var(--site-line);
  box-shadow: 0 1px 12px rgba(15, 23, 42, 0.06);
  padding: 0.5rem 0;
}

.site-navbar .nav-link {
  color: var(--site-ink);
  font-family: "Raleway", "Roboto", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
  color: var(--site-brand);
}

.site-navbar .dropdown-menu {
  border: 1px solid var(--site-line);
  border-radius: 0.35rem;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.12);
  font-size: 0.9rem;
  padding: 0.35rem;
}

.site-navbar .dropdown-item {
  border-radius: 0.25rem;
  padding: 0.5rem 0.65rem;
}

.site-navbar .dropdown-item:hover {
  background: rgba(9, 175, 223, 0.1);
  color: var(--site-brand-dark);
}

/* ── Botões ─────────────────────────────────────────────── */

.btn-site-primary {
  background: var(--site-brand);
  border: 1px solid var(--site-brand);
  border-radius: 50rem;
  color: #fff;
  font-weight: 600;
  padding: 0.4rem 1.1rem;
}

.btn-site-primary:hover,
.btn-site-primary:focus {
  background: var(--site-brand-dark);
  border-color: var(--site-brand-dark);
  color: #fff;
}

.btn-site-outline {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 50rem;
  color: #fff;
  font-weight: 600;
  padding: 0.4rem 1.1rem;
}

.btn-site-outline:hover,
.btn-site-outline:focus {
  background: #fff;
  color: var(--site-ink);
}

/* Acessos aos sistemas (Cliente / Colaborador).
   Antes era um dropdown "Acessar" — dois cliques e um rótulo que não
   dizia para quem servia. Agora cada público tem o próprio botão, com
   contorno da marca para pesar menos que o "Trabalhe Conosco" sólido. */
.btn-site-acesso {
  align-items: center;
  background: transparent;
  border: 1px solid var(--site-brand);
  border-radius: 50rem;
  color: var(--site-brand-dark);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.4rem;
  justify-content: center;
  line-height: 1.2;
  padding: 0.38rem 0.9rem;
  white-space: nowrap;
}

.btn-site-acesso:hover,
.btn-site-acesso:focus {
  background: var(--site-brand);
  color: #fff;
}

.site-nav-acessos {
  margin-left: 0.4rem;
}

.site-navbar .btn-site-primary {
  align-items: center;
  display: inline-flex;
  font-size: 0.875rem;
  gap: 0.4rem;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── Hero / banner ──────────────────────────────────────── */

.site-hero {
  align-items: center;
  background-color: var(--site-ink);
  background-position: center center;
  background-size: cover;
  color: #fff;
  display: flex;
  min-height: 460px;
  position: relative;
}

.site-hero::before {
  background: rgba(29, 34, 36, 0.55);
  content: "";
  inset: 0;
  position: absolute;
}

.site-hero > .container {
  position: relative;
  z-index: 1;
}

.site-hero h1,
.site-hero .site-hero-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
  margin-bottom: 1rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.site-hero p {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 42rem;
}

/* Banner menor usado no topo das páginas internas */
.site-pagehead {
  min-height: 260px;
  text-align: center;
}

.site-pagehead h1 {
  margin-bottom: 0.75rem;
}

.site-pagehead .site-breadcrumb {
  font-size: 0.875rem;
}

.site-pagehead .site-breadcrumb a {
  color: #dfe6e8;
}

.site-pagehead .site-breadcrumb .active {
  color: #fff;
  font-weight: 600;
}

/* Carrossel do hero: o slider original (Revolution) foi substituído
   pelo carousel nativo do Bootstrap 5 — mesmas imagens, sem plugin. */
.site-hero-carousel .carousel-item {
  min-height: 460px;
}

.site-hero-carousel .carousel-control-prev,
.site-hero-carousel .carousel-control-next {
  width: 8%;
}

/* ── Seções ─────────────────────────────────────────────── */

.site-section {
  padding: 3.5rem 0;
}

.site-section-tight {
  padding: 2.25rem 0;
}

.site-section-light {
  background: #f7f9fa;
}

.site-section-brand {
  background: var(--site-brand);
  color: #fff;
}

.site-section-brand a:not(.btn) {
  color: #fff;
  text-decoration: underline;
}

.site-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Traço curto sob o título — equivale ao .separator-2 do template antigo */
.site-separator {
  background: var(--site-brand);
  border-radius: 2px;
  height: 3px;
  margin-bottom: 1.25rem;
  width: 46px;
}

.site-separator-center {
  margin-left: auto;
  margin-right: auto;
}

.site-separator-light {
  background: #fff;
}

/* ── Lista com ícone de check ───────────────────────────── */

.site-list-icons {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-list-icons li {
  padding: 0.3rem 0 0.3rem 1.7rem;
  position: relative;
}

.site-list-icons li::before {
  color: var(--site-brand);
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 0.35rem;
}

/* ── Cards de destaque ──────────────────────────────────── */

.site-card {
  background: #fff;
  border: 1px solid var(--site-line);
  border-radius: 0.5rem;
  height: 100%;
  padding: 1.5rem;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.site-card:hover {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.site-card-icon {
  align-items: center;
  background: rgba(9, 175, 223, 0.12);
  border-radius: 50%;
  color: var(--site-brand);
  display: flex;
  font-size: 1.25rem;
  height: 52px;
  justify-content: center;
  margin-bottom: 1rem;
  width: 52px;
}

/* ── Galeria ────────────────────────────────────────────── */

.site-gallery-item {
  border-radius: 0.5rem;
  display: block;
  overflow: hidden;
  position: relative;
}

.site-gallery-item img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
  width: 100%;
}

.site-gallery-item:hover img {
  transform: scale(1.05);
}

/* ── Vídeo responsivo ───────────────────────────────────── */

.site-video {
  border: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* ── Formulário de contato ──────────────────────────────── */

.site-form .form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.site-form .form-control {
  border-color: #d5dcde;
  border-radius: 0.35rem;
}

.site-form .form-control:focus {
  border-color: var(--site-brand);
  box-shadow: 0 0 0 0.2rem rgba(9, 175, 223, 0.18);
}

/* Honeypot anti-spam: precisa existir no DOM e ficar longe do olho e
   do leitor de tela — `display:none` alguns bots detectam e pulam. */
.site-hp {
  height: 0;
  left: -9999px;
  opacity: 0;
  position: absolute;
  width: 0;
}

/* ── Rodapé ─────────────────────────────────────────────── */

.site-footer {
  background: var(--site-ink);
  color: #b9c2c5;
  font-size: 0.9rem;
  padding: 3rem 0 0;
}

.site-footer a:not(.btn) {
  color: #dfe6e8;
}

.site-footer a:not(.btn):hover {
  color: #fff;
}

.site-footer-title {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
  position: relative;
}

.site-footer-title::after {
  background: var(--site-brand);
  content: "";
  display: block;
  height: 3px;
  margin-top: 0.5rem;
  width: 38px;
}

.site-footer-list li {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.site-footer-list li i {
  color: var(--site-brand);
  flex: 0 0 auto;
  margin-top: 0.25rem;
}

.site-link-more {
  font-weight: 600;
}

.site-footer-bottom {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding: 1rem 0;
}

/* ── Voltar ao topo ─────────────────────────────────────── */

/* O `x-show` do Alpine esconde por style inline; usar `.d-flex` aqui
   deixaria o botão visível para sempre (o utilitário é !important e
   vence o inline). Por isso o display vem desta regra própria, sem
   !important. Não troque por d-flex. */
.site-to-top {
  align-items: center;
  background: var(--site-brand);
  border: 0;
  border-radius: 50%;
  bottom: 1.25rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
  color: #fff;
  display: flex;
  height: 44px;
  justify-content: center;
  position: fixed;
  right: 1.25rem;
  width: 44px;
  z-index: 1030;
}

.site-to-top:hover {
  background: var(--site-brand-dark);
  color: #fff;
}

/* Click-fix: o ::before do glifo FA engole o clique no centro do
   botão. Escopado ao site, como manda o padrão do projeto. */
.site-body .btn i,
.site-to-top i,
.site-social a i {
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE

   O site institucional é a primeira coisa que um cliente novo
   abre, e quase sempre abre no celular. As regras abaixo seguem
   o padrão P1+P2 do projeto (anti-zoom iOS e alvo de toque de
   40px) e vão além no que é próprio de landing page: hero que
   não engole a tela, menu que rola, e nada de texto grudado na
   borda.

   Nada aqui altera o desktop — todo bloco está sob media query.
   ═══════════════════════════════════════════════════════════ */

/* Rotacionar o aparelho fazia o WebKit inflar o corpo do texto
   por conta própria. Trava o tamanho no que o CSS define. */
.site-body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Nenhuma tela do site rola de lado. Sem isto, um elemento que
   estoure a largura (imagem larga, palavra comprida) cria a
   rolagem horizontal que faz a página "escorregar" no toque. */
.site-body {
  overflow-x: hidden;
}

/* Palavra longa (e-mail, URL, nome de rua) não fura o container. */
.site-body p,
.site-body li,
.site-body h1,
.site-body h2,
.site-body h3,
.site-footer a {
  overflow-wrap: break-word;
}

/* ── Tablet e celular: menu colapsado ───────────────────── */

@media (max-width: 991.98px) {
  /* O Alpine alterna `.show`; sem o Collapse do BS o painel
     precisa de fundo próprio para não ficar sobre o conteúdo. */
  .site-nav-collapse.show {
    background: #fff;
    border-top: 1px solid var(--site-line);
    margin-top: 0.5rem;
    padding-bottom: 0.75rem;

    /* São 8 itens de menu mais três botões de acesso. Em tela
       baixa (ou paisagem) a lista passava do fim da janela e os
       últimos itens ficavam inalcançáveis: o painel não rolava e
       a página atrás também não, porque o menu cobre a área de
       toque. Limitar à altura visível e rolar resolve. */
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-navbar .dropdown-menu {
    border: 0;
    box-shadow: none;
    padding-left: 0.85rem;
  }

  /* Item de menu com alvo confortável e separador discreto —
     no toque, linhas coladas viram clique errado. */
  .site-navbar .nav-link {
    align-items: center;
    display: flex;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
  }

  /* Os botões de acesso viram blocos de largura total, na ordem
     em que a pessoa decide: sou cliente, sou colaborador, quero
     trabalhar aqui. */
  .site-nav-acessos {
    margin-left: 0;
    margin-top: 0.5rem;
  }

  .site-nav-acessos .btn {
    justify-content: center;
    width: 100%;
  }

  .site-nav-vagas {
    margin-top: 0.75rem;
  }
}

/* ── Celular ────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  /* P1: input abaixo de 16px faz o Safari iOS dar zoom ao focar.
     Mantém o padding, só eleva a fonte. */
  .site-body .form-control,
  .site-body .form-select,
  .site-body textarea.form-control {
    font-size: 16px;
  }

  /* P2 — icon-only: 40px quadrado. */
  .site-to-top,
  .site-social a {
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    width: 40px;
  }

  /* P2 — botão com texto: só min-height. min-width/inline-flex
     aqui distorceriam o rótulo. */
  .site-body .btn {
    min-height: 40px;
  }

  /* ── Topbar ──────────────────────────────────────────── */

  /* O e-mail tem 26 caracteres: escrito por extenso, empurrava
     as redes sociais para uma segunda linha e dobrava a altura
     da barra antes mesmo de a pessoa ver o logo. Fica só o
     ícone, com alvo de toque cheio. */
  .site-topbar-rotulo {
    display: none;
  }

  .site-topbar {
    padding: 0.25rem 0;
  }

  .site-topbar-contact a {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
  }

  .site-topbar .site-social a {
    height: 34px;
    min-height: 34px;
    min-width: 34px;
    width: 34px;
  }

  /* O telefone é a ação mais provável de quem abre no celular:
     esse continua com número visível. */
  .site-topbar-contact a[href^="tel:"] .site-topbar-rotulo {
    display: inline;
    margin-left: 0.35rem;
  }

  /* ── Hero ────────────────────────────────────────────── */

  /* 360px cobria a tela inteira de um aparelho pequeno e a
     pessoa chegava no site sem ver que existe conteúdo abaixo.
     Com 300px sobra a borda do próximo bloco, que é o convite
     natural para rolar. */
  .site-hero,
  .site-hero-carousel .carousel-item {
    min-height: 300px;
  }

  .site-hero {
    padding: 2.5rem 0 3.25rem;
  }

  .site-hero h1,
  .site-hero .site-hero-title {
    font-size: 1.5rem;
  }

  .site-hero p {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
  }

  /* CTA do hero ocupa a largura: alvo grande e previsível, em
     vez de um botão estreito no meio de uma foto. */
  .site-hero .btn {
    display: block;
    text-align: center;
    width: 100%;
  }

  /* As setas do carrossel ficavam sobre o texto e o botão, com
     8% de largura — alvo pequeno e clique roubado do CTA. Os
     indicadores embaixo bastam, e o gesto de arrastar continua. */
  .site-hero-carousel .carousel-control-prev,
  .site-hero-carousel .carousel-control-next {
    display: none;
  }

  /* Indicadores maiores e fora do caminho do botão. */
  .site-hero-carousel .carousel-indicators {
    margin-bottom: 0.5rem;
  }

  .site-hero-carousel .carousel-indicators [data-bs-target] {
    height: 4px;
    width: 24px;
  }

  .site-pagehead {
    min-height: 220px;
  }

  .site-pagehead h1 {
    font-size: 1.5rem;
  }

  /* ── Seções e cards ──────────────────────────────────── */

  .site-section {
    padding: 2.25rem 0;
  }

  .site-section-tight {
    padding: 1.5rem 0;
  }

  .site-title {
    font-size: 1.25rem;
  }

  .site-card {
    padding: 1.15rem;
  }

  /* O ícone de 52px roubava altura de cada card numa coluna só. */
  .site-card-icon {
    font-size: 1.05rem;
    height: 44px;
    margin-bottom: 0.75rem;
    width: 44px;
  }

  /* Botões de loja empilhados: lado a lado estouravam a largura
     em telas de 360px e o segundo caía cortado. */
  .site-lojas .btn {
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
    width: 100%;
  }

  .site-lojas .btn + .btn {
    margin-top: 0.6rem;
  }

  /* ── Galeria da página Empresa ───────────────────────── */

  /* Sem altura fixa, cada foto do carrossel entrava com a
     proporção do arquivo e o bloco pulava de tamanho a cada
     troca de slide. */
  .site-gallery-item,
  .site-gallery-item img {
    height: 220px;
  }

  /* A galeria não tem indicadores, então as setas precisam ficar
     — mas com alvo de 40px e um disco por trás. Sobre foto clara,
     a seta branca do Bootstrap simplesmente sumia. */
  .site-galeria .carousel-control-prev,
  .site-galeria .carousel-control-next {
    align-items: center;
    display: flex;
    justify-content: center;
    opacity: 1;
    width: 22%;
  }

  .site-galeria .carousel-control-prev-icon,
  .site-galeria .carousel-control-next-icon {
    background-color: rgba(29, 34, 36, 0.55);
    background-size: 45% 45%;
    border-radius: 50%;
    height: 40px;
    width: 40px;
  }

  /* ── Página de contato ───────────────────────────────── */

  /* Telefone e e-mail da lista de unidades são o atalho de quem
     está com o aparelho na mão: precisam de linha alta o
     bastante para acertar o toque. */
  .site-contato-list a {
    display: inline-block;
    padding: 0.25rem 0;
  }

  .site-contato-cta .btn,
  .site-form button[type="submit"] {
    display: block;
    text-align: center;
    width: 100%;
  }

  /* ── Rodapé ──────────────────────────────────────────── */

  .site-footer {
    padding-top: 2.25rem;
  }

  /* space-between com dois textos longos deixava um encostado em
     cada borda. Empilhado e centrado lê melhor. */
  .site-footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    text-align: center;
  }

  .site-footer-bottom a {
    align-items: center;
    display: inline-flex;
    min-height: 40px;
  }

  /* ── Voltar ao topo ──────────────────────────────────── */

  /* Encostado no canto, cobria o último item de conteúdo e caía
     em cima da barra de gestos do iPhone. */
  .site-to-top {
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    right: 0.85rem;
  }
}

/* Faixa de segurança do iPhone (notch e barra de gestos) em
   qualquer tamanho, já que o layout usa viewport-fit=cover. */
@supports (padding: max(0px)) {
  .site-body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .site-footer-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }
}

/* Quem prefere menos movimento não deve levar carrossel animado
   nem rolagem suave na cara. */
@media (prefers-reduced-motion: reduce) {
  .site-body * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}