/* Site Iluminer — estilos complementares ao Tailwind (CDN) */

:root{
  --brand:#FF6E00;
  --brand-dark:#D94303;
  --ink:#1A1512;
  --cream:#FAF8F6;
  --muted:#5A5650;
}

html{scroll-behavior:smooth}
body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif;background:var(--cream);color:var(--ink)}
h1,h2,h3,h4,.font-display{font-family:'Sora',ui-sans-serif,system-ui,sans-serif}

[x-cloak]{display:none!important}

::selection{background:var(--brand);color:#fff}

/* Scrollbar discreta para carrosséis horizontais */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* Header: estado "encolhido" ao rolar, controlado via JS (site.js) */
#site-header.is-scrolled{box-shadow:0 8px 30px rgba(26,21,18,.08)}
#site-header.is-scrolled #site-nav{padding-top:.65rem;padding-bottom:.65rem}

/* Texto em degradê usando as cores da marca */
.text-gradient-brand{
  background:linear-gradient(115deg,var(--ink) 20%,var(--brand) 55%,var(--brand-dark) 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Blobs decorativos do hero (fundo gerado em CSS, sem foto) */
.brand-blob{
  background:radial-gradient(circle at 30% 30%, rgba(255,110,0,.55), rgba(217,67,3,.15) 60%, transparent 72%);
  filter:blur(40px);
}
.brand-blob-dark{
  background:radial-gradient(circle at 60% 60%, rgba(26,21,18,.16), transparent 70%);
  filter:blur(50px);
}

/* Padrão de linhas diagonais sutis para seções escuras (depoimentos etc.) */
.dark-lines-pattern{
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 28px);
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 40%, #000 30%, transparent 88%);
  mask-image:radial-gradient(ellipse 70% 65% at 50% 40%, #000 30%, transparent 88%);
}

/* Grid de pontos sutil no fundo do hero, nas cores da marca */
.hero-dot-grid{
  background-image:radial-gradient(rgba(217,67,3,.16) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 30%, #000 40%, transparent 85%);
  mask-image:radial-gradient(ellipse 70% 60% at 60% 30%, #000 40%, transparent 85%);
}

/* Marquee infinito de logos de clientes */
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 32s linear infinite;
}
.marquee-track:hover{animation-play-state:paused}

/* Logos de clientes na esteira: sem card, só a imagem, bem grande */
.client-logo{
  height:120px;
  width:auto;
  object-fit:contain;
  opacity:.8;
  filter:grayscale(1);
  transition:opacity .25s ease, filter .25s ease, transform .25s ease;
}
.client-logo:hover{
  opacity:1;
  filter:grayscale(0);
  transform:translateY(-3px);
}

/* Esmaece as bordas do carrossel de logos, sem corte abrupto */
.logo-fade-mask{
  -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%);
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Reveal on scroll — estado inicial (GSAP anima para o estado visível) */
.reveal{opacity:0;transform:translateY(28px)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
}

/* Card de serviço: leve elevação no hover */
.service-card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(26,21,18,.10);border-color:rgba(255,110,0,.35)}

/* Avatar com iniciais para depoimentos (sem foto real ainda) */
.avatar-initial{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff;font-family:'Sora',sans-serif;font-weight:700;
}

/* ============================================
   Formulário embutido da Atys (#atys-diagnostico)
   O embed.css deles usa "all:revert" + !important em várias
   propriedades, por isso as sobrescritas abaixo também usam
   !important, sempre restritas a este container.
   ============================================ */
#atys-diagnostico .atys-form-container{
  padding:0!important;
  animation:none!important;
}

#atys-diagnostico .atys-form-title{
  font-family:'Sora',ui-sans-serif,system-ui,sans-serif!important;
  font-weight:800!important;
  color:var(--ink)!important;
  font-size:1.5rem!important;
}

#atys-diagnostico .atys-form-description{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif!important;
  color:var(--muted)!important;
  font-size:.95rem!important;
}

#atys-diagnostico .atys-form-field{
  margin-bottom:.55rem!important;
}

#atys-diagnostico .atys-form-field label{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif!important;
  font-weight:600!important;
  font-size:.8rem!important;
  color:var(--ink)!important;
  margin-bottom:.25rem!important;
}

#atys-diagnostico .atys-form-field label .required{
  color:var(--brand-dark)!important;
}

#atys-diagnostico .atys-form-field input,
#atys-diagnostico .atys-form-field select,
#atys-diagnostico .atys-form-field textarea{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif!important;
  border:1px solid rgba(26,21,18,.15)!important;
  border-radius:.65rem!important;
  padding:.5rem .85rem!important;
  background:#fff!important;
  color:var(--ink)!important;
  transition:border-color .2s ease, box-shadow .2s ease!important;
}

#atys-diagnostico .atys-form-field textarea{
  min-height:2.75rem!important;
}

#atys-diagnostico .atys-tel-container select{
  border-radius:.75rem!important;
}

#atys-diagnostico .atys-form-field input:focus,
#atys-diagnostico .atys-form-field select:focus,
#atys-diagnostico .atys-form-field textarea:focus,
#atys-diagnostico .atys-form-field input:focus-visible,
#atys-diagnostico .atys-form-field select:focus-visible,
#atys-diagnostico .atys-form-field textarea:focus-visible{
  border-color:var(--brand)!important;
  box-shadow:0 0 0 3px rgba(255,110,0,.15)!important;
  outline:none!important;
}

#atys-diagnostico .atys-form-consent{
  background:var(--cream)!important;
  border:1px solid rgba(26,21,18,.08)!important;
  border-radius:.75rem!important;
  padding:.5rem .75rem!important;
  margin-top:.25rem!important;
  margin-bottom:.5rem!important;
  font-size:.8rem!important;
}

#atys-diagnostico .atys-form-submit{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif!important;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark))!important;
  color:#fff!important;
  border-radius:9999px!important;
  font-weight:700!important;
  padding:.65rem 1.5rem!important;
  box-shadow:0 14px 34px rgba(255,110,0,.3)!important;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease!important;
}

#atys-diagnostico .atys-form-submit:hover:not(:disabled){
  transform:translateY(-2px)!important;
  opacity:1!important;
  box-shadow:0 18px 42px rgba(255,110,0,.4)!important;
}

#atys-diagnostico .atys-form-feedback.success{
  background:#FFF3E9!important;
  color:var(--brand-dark)!important;
  border:1px solid rgba(255,110,0,.35)!important;
  border-radius:.75rem!important;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif!important;
}

#atys-diagnostico .atys-form-feedback.error,
#atys-diagnostico .atys-form-error{
  border-radius:.75rem!important;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif!important;
}