/* =========================================================
   02-secoes-hero-clientes.css
   Landing page Artegraf — arquivo gerado na refatoração.
   Mantém CSS separado por responsabilidade para evitar monólito.
========================================================= */


/* ── SEÇÃO INICIAL ── */

/* Hero ocupa quase a tela toda menos o header (68px).
   Layout em duas colunas: texto à esquerda, imagem à direita. */
.hero{min-height:calc(100vh - 68px);max-width:1280px;margin:0 auto;padding:64px 24px 48px;display:flex;align-items:center;gap:48px}

/* Coluna do texto — cresce mas não ultrapassa 580px */
.hero-txt{flex:1;min-width:0;max-width:580px;display:flex;flex-direction:column;gap:22px}

/* Coluna da imagem — altura mínima para não colapsar antes de carregar */
.hero-vis{flex:1;min-width:0;max-width:500px;position:relative;min-height:440px;display:flex;justify-content:center;align-items:flex-end}

/* Animação de entrada do texto (vem da esquerda) e da imagem (vem da direita).
   A classe .in é adicionada pelo JS depois de um pequeno delay. */
.fu-left{opacity:0;transform:translateX(-28px);transition:opacity .7s ease,transform .7s ease}
.fu-right{opacity:0;transform:translateX(28px);transition:opacity .7s ease,transform .7s ease}
.fu-left.in,.fu-right.in{opacity:1;transform:none}

/* Pílula acima do título — ex: "Gráfica em Campina Grande".
   O pontinho azul antes do texto é gerado pelo ::before, sem HTML extra. */
.hero-eye{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;background:var(--pf);color:var(--p);border-radius:999px;font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;width:fit-content}
.hero-eye::before{content:'';width:6px;height:6px;background:var(--p);border-radius:50%}

/* Título principal — fonte condensada, bem grande.
   clamp() garante tamanho fluido entre mobile e desktop. */
.hero-h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(3rem,7vw,6rem);font-weight:900;line-height:.92;color:var(--h);text-transform:uppercase;letter-spacing:-.01em;overflow-wrap:break-word}

/* <em> no título recebe a cor azul primária sem ficar itálico */
.hero-h1 em{font-style:normal;color:var(--p)}

/* Subtítulo abaixo do título */
.hero-sub{font-size:1.05rem;color:var(--b);line-height:1.75;max-width:460px}

/* Linha de benefícios rápidos: "Arte inclusa · 4 dias úteis · CG e JP" */
.hero-checks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:4px}
.hck{display:flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--m)}

/* Bolinha verde com ícone de check antes de cada benefício */
.hck-dot{width:20px;height:20px;flex-shrink:0;background:var(--ct);border-radius:50%;display:flex;align-items:center;justify-content:center}
.hck-dot svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* Fundo azul atrás da imagem do hero — dá profundidade visual */
/* .hero-bg removido — a imagem do hero agora tem fundo próprio */

/* Imagem do wind banner — sai um pouco para baixo do container (height: 110%)
   para dar sensação de profundidade. drop-shadow cria sombra na imagem recortada. */
.hero-img{position:relative;z-index:1;width:100%;height:110%;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 24px 40px rgba(0,0,0,.2))}


/* ── FAIXA DE BENEFÍCIOS ── */

/* Faixa azul que aparece logo abaixo do hero com os 4 diferenciais rápidos */
.tstrip{background:var(--p)}

/* Grid de 4 colunas — cada coluna é um diferencial */
.ts{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr)}

/* Cada item tem borda direita semitransparente como separador.
   O último item não tem borda direita. */
.ts-i{display:flex;align-items:center;gap:14px;padding:22px 18px;border-right:1px solid rgba(255,255,255,.14)}
.ts-i:last-child{border-right:none}

/* Ícone dentro de um quadrado com fundo branco suave */
.ts-ico{width:40px;height:40px;flex-shrink:0;background:rgba(255,255,255,.14);border-radius:var(--r1);display:flex;align-items:center;justify-content:center}
.ts-ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Texto do diferencial — título em branco, descrição em branco suave */
.ts-lbl{font-size:.88rem;font-weight:700;color:#fff;line-height:1.2}
.ts-dsc{font-size:.72rem;color:rgba(255,255,255,.65);margin-top:2px}


/* ── CLIENTES ── */

/* Seção com carrossel infinito de logos dos clientes */
.clients{padding:60px 0;overflow:hidden}

/* Título acima do carrossel — pequeno, em caixa alta, discreto */
.cli-kk{text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m);margin-bottom:28px}

/* Máscara que esmaece as bordas do carrossel, criando efeito de fade nas pontas */
.cli-mask{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}

/* Trilho do carrossel — animação contínua da esquerda para a direita.
   O HTML duplica os logos 3x para o loop parecer infinito. */
.cli-track{display:flex;gap:20px;animation:ticker 28s linear infinite;width:max-content}

/* Keyframe do carrossel — move exatamente 1/3 do trilho (um conjunto completo de logos) */
/* Velocidade ajustada para 11 logos — mais tempo para o loop não aparecer cortado */
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}

/* Cada bolinha de logo — fundo azul primário para as logos aparecerem bem */
.cli-item{width:92px;height:92px;flex-shrink:0;background:var(--p);border:1px solid var(--p);border-radius:50%;display:flex;align-items:center;justify-content:center;padding:16px;transition:transform .25s}

/* Leve aumento ao passar o mouse */
.cli-item:hover{transform:scale(1.06)}

/* Logos em branco sobre o fundo azul.
   grayscale(1) remove as cores, brightness(10) clareia até ficar branco.
   No hover, volta às cores originais da logo. */
.cli-item img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) brightness(10);transition:filter .3s}
.cli-item:hover img{filter:grayscale(0) opacity(1)}


/* ── UTILITÁRIOS DE SEÇÃO ── */

/* Kicker — texto pequeno em caixa alta acima dos títulos de seção.
   Ex: "Wind Banners", "Por que Artegraf" */
.sec-kicker{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p);margin-bottom:10px}

/* Título de seção — fonte condensada, grande, sempre em caixa alta */
.sec-t{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.9rem,4vw,2.9rem);font-weight:900;text-transform:uppercase;color:var(--h);line-height:1;letter-spacing:-.01em}

/* Cabeçalho de seção centralizado — usado na maioria das seções */
.sec-hd{text-align:center;margin-bottom:48px}

/* Cabeçalho de seção alinhado à esquerda — usado na seção de endereço */
.sec-hd-l{text-align:left;margin-bottom:16px}