/* RBF — overrides finos não cobertos pelo Tailwind */

.crosshatch {
  background-image: repeating-linear-gradient(45deg, #E5E7EB 0, #E5E7EB 1px, transparent 0, transparent 12px);
}

.placeholder-img {
  background-color: #EEF1F4;
  background-image: repeating-linear-gradient(45deg, #D6D6D6 0, #D6D6D6 1px, transparent 0, transparent 14px);
}

/* Trust strip: client logos em escala de cinza, ganham cor no hover */
.client-logo {
  filter: grayscale(1) opacity(.65);
  transition: filter 220ms ease;
}
.client-logo:hover,
.client-logo:focus-visible {
  filter: grayscale(0) opacity(1);
}

/* =====================================================================
   REDESIGN 2026 — acento industrial, profundidade e hero com banner
   ===================================================================== */
:root{
  --hero-bg: none;                 /* a HOME define a imagem inline via style="--hero-bg:..." */
  --hero-bg-pos: center right;
  --hero-scrim: linear-gradient(to right,
      #FFFFFF 0%, rgba(255,255,255,.94) 30%, rgba(255,255,255,.55) 54%, rgba(255,255,255,0) 78%);
}
@media (max-width:1023px){
  :root{ --hero-scrim: linear-gradient(to right,
      #FFFFFF 0%, rgba(255,255,255,.95) 58%, rgba(255,255,255,.72) 100%); }
}

/* Hero com altura fixa no desktop — regra reutilizável pra TODAS as páginas */
@media (min-width:1024px){ .hero{ height:450px; } }

.hero--banner{ background:#1A2535; }   /* cor-base enquanto a imagem carrega */
.hero-bg{
  background-image: var(--hero-bg, none);
  background-size: var(--hero-bg-size, cover);
  background-position: var(--hero-bg-pos, center);
  background-repeat: no-repeat;
  /* máscara opcional p/ dissolver a borda da imagem no fundo (blending) */
  -webkit-mask-image: var(--hero-bg-mask, none);
          mask-image: var(--hero-bg-mask, none);
}
.hero-scrim{ background: var(--hero-scrim); }
/* Banner ESCURO: adicione a classe .hero--ink na <section> e o texto vira claro */
.hero--ink h1, .hero--ink .hero-lead strong{ color:#FFFFFF !important; }
.hero--ink .hero-lead{ color:#E5E7EB !important; }
.hero--ink .hero-eyebrow, .hero--ink .hero-readout{ color:#D6D6D6 !important; }
.hero--ink .btn-ghost{ border-color:#FFFFFF; color:#FFFFFF; }

/* Malha "blueprint" sutil — motivo intencional (faixa de números) */
.blueprint{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* CARDS com profundidade (substituem o traço 1px uniforme) */
.card{
  background:#fff;
  box-shadow:0 1px 2px rgba(15,24,34,.06), 0 22px 48px -26px rgba(15,24,34,.45);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.card::before{                       /* aresta de acento no topo (no hover) */
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:#F5B301; transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.card:hover{ transform:translateY(-6px); }
.card:hover::before{ transform:scaleX(1); }
/* card em DESTAQUE (Von Restorff) */
.card-feature{ background:#1A2535; color:#fff; }
.card-feature::before{ transform:scaleX(1); }   /* aresta amarela sempre visível */

/* PAINEL: profundidade SEM hover-lift (formulários, sidebars — não devem "pular") */
.panel{ box-shadow:0 1px 2px rgba(15,24,34,.06), 0 18px 40px -26px rgba(15,24,34,.4); }

/* Formulário: seleção (radio) e foco com acento amarelo */
.radio-card input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.radio-card input:checked + label{ border-color:#F5B301; background:rgba(245,179,1,.10); box-shadow:inset 0 0 0 1px #F5B301; }
.contact-form input:not([type=radio]):not([type=checkbox]):focus,
.contact-form select:focus,
.contact-form textarea:focus{ outline:none; border-color:#D99A00; box-shadow:0 0 0 3px rgba(245,179,1,.18); }

/* Logo do rodapé sobre fundo escuro: clareada via brightness sobre o PNG transparente */
.logo-invert{ filter: brightness(1.4); }

/* Títulos de seção no desktop: 1.8rem em vez do text-5xl (3rem).
   O seletor h2.lg:text-5xl não atinge os números da tarja (que são <p> text-accent),
   nem o mobile (que continua em text-3xl). */
@media (min-width:1024px){
  h2.lg\:text-5xl{ font-size:1.8rem; line-height:1.1; }
}

/* Eyebrows de seção (rótulo acima do título): maiores que o text-xs padrão.
   p.eyebrow vence .text-xs por especificidade; não atinge menu/legendas/faixa de logos. */
p.eyebrow{ font-size:1.2rem; line-height:1.3; }

/* Carrossel de logos (Confiado por) — marquee contínuo, pausa no hover. */
.logo-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-track{ width:max-content; animation:logo-scroll 30s linear infinite; }
.logo-marquee:hover .logo-track{ animation-play-state:paused; }
@keyframes logo-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}