/* ============================================================
   Web4Business - Layout 2026  ·  CSS DA CAPA (home)
   Apenas os elementos da página inicial: Hero, Serviços,
   Porque Escolher, Clientes, Portfólio, Produtos, Depoimentos
   e os temas dos carrosséis (Slick) usados na capa.
   Depende de css/css.css (variáveis, reset, helpers,
   Header e Footer).
   ============================================================ */

/* ============================================================
   HERO  (referência: 626px, H1 86px, features 20px)
   ============================================================ */
.hero {
    position: relative;
    min-height: 626px;
    display: flex;
    align-items: center;
    background: #000 url('/imagens/banner-topo-fundo_02.jpg') center/cover no-repeat;
    overflow: hidden;
    isolation: isolate;
}

/* Video de fundo do HERO (fundo1.mp4; fundo1-mobile.mp4 no celular).
   Fica na camada 0, abaixo do veu (.hero-overlay), da aurora (.hero::before)
   e da grade (.hero::after). O <source> vem pronto do HTML (index.php escolhe
   a variante por $IsMobile) -- se o video nao carregar, valem o poster do
   proprio <video> e o JPG de fundo do .hero. */
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    /* mesmo enquadramento do poster: nada de faixa vazia antes do video vir.
       Sem cor de fundo solida: se o poster nao pintar (iOS com preload baixo),
       o preto chapado cobriria o JPG do proprio .hero. */
    background: url('/imagens/banner-topo-fundo_02.jpg') center/cover no-repeat;
}

/* ---------- Fundo animado do HERO (CSS puro, GPU-friendly) ----------
   Camada 1: véu de gradiente (legibilidade).
   Camada 2 (.hero::before): "aurora" de glows que derivam suavemente.
   Camada 3 (.hero::after): malha de grade tênue com leve respiração.
   Tudo anima apenas transform/opacity -> sem reflow. */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .38) 40%, rgba(0, 0, 0, .65) 100%),
        rgba(0, 0, 0, .35);
}

.hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    mix-blend-mode: screen;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background:
        radial-gradient(44% 44% at 18% 28%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(40% 40% at 84% 20%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(50% 50% at 72% 86%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(38% 38% at 38% 78%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 62%);
    filter: blur(8px) saturate(1.15);
    will-change: transform, opacity;
    animation: heroAurora 18s ease-in-out infinite alternate;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    mix-blend-mode: screen;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 0%, transparent 80%);
    mask-image: radial-gradient(70% 70% at 50% 45%, #000 0%, transparent 80%);
    will-change: transform, opacity;
    animation: heroGrid 12s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes heroAurora {
    0% {
        transform: translate3d(-4%, -2%, 0) scale(1.05) rotate(0deg);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate3d(5%, 3%, 0) scale(1.15) rotate(8deg);
        opacity: .92;
    }
}

@keyframes heroGrid {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .5;
    }

    100% {
        transform: translate3d(2%, 1.5%, 0) scale(1.06);
        opacity: .8;
    }
}

/* Acessibilidade: pausa os fundos animados para quem pede menos movimento.

   O .hero-video NAO entra mais aqui. Ele tinha display:none nesta media query,
   e era isso que sumia com o video no iPhone do cliente: o iOS liga
   prefers-reduced-motion junto com o MODO DE BAIXO CONSUMO, entao quem so
   queria poupar bateria perdia o video (e nenhum ajuste de autoplay/preload
   resolveria -- elemento com display:none nao toca).

   O video e fundo decorativo, mudo, em loop e atras do veu.

   Em 08/08/2026 a decisao foi estendida a todo o site: nenhuma animacao e mais
   desligada por prefers-reduced-motion, porque no iOS ela vem junto com o
   Modo de Baixo Consumo. A aurora e a grade do hero (.hero::before/::after)
   tambem continuam animando. */

.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%
}

.hero-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0 60px;
    text-align: center
}

.hero h1 {
    color: #fff;
    font-weight: 400;
    font-size: clamp(44px, 6vw, 86px);
    line-height: 1.0;
    letter-spacing: -1px;
    margin-bottom: 46px;
}

.hero h1 strong {
    font-weight: 400
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 18px 60px;
    margin-bottom: 54px;
    width: fit-content;
    margin-inline: auto;
}

.hero-features li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 400;
    text-align: center;
}

/* bullet do hero: ícone de check (Lucide) substituindo 00banner.png */
.hero-features .feat-dot {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #fff;
    stroke-width: 2.5;
}

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
}

/* "Quer saber mais?" - Light 18px, sem underline (referencia: layout) */
.hero-cta-q {
    color: #fff;
    font-weight: 300;
    font-size: 18px;
}

/* "Fale com nossa Equipe!" - Light 18px, seta em imagem + underline no texto */
.hero-cta .link-light {
    font-weight: 300;
    font-size: 18px;
    gap: 10px;
    text-decoration: none;
}

.hero-cta .arrow-img {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: #fff;
}

.btn-pill {
    display: inline-block;
    background: #fff;
    color: #0d0d10;
    font-weight: 600;
    font-size: 16px;
    padding: 14px 32px;
    border-radius: 30px;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.btn-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45)
}

/* ============================================================
   SERVIÇOS  (referência: título 86px, h3 40px, p 20px)
   ============================================================ */
.services {
    background: #fff
}

.services .section-title {
    margin-bottom: 90px
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 90px;
    max-width: 1320px;
    margin: 0 auto;
}

.service {
    display: flex;
    gap: 26px;
    align-items: flex-start
}

.service-icon {
    flex: 0 0 58px;
    width: 58px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
}

.service-icon i {
    width: 48px;
    height: 48px;
    color: var(--accent);
    stroke-width: 1.6;
}

/* ícones de serviço do layout de referência (a1-a10) */
.service-icon img {
    width: auto;
    max-width: 58px;
    height: auto;
    max-height: 58px;
}

.service-text h3 {
    font-weight: 600;
    font-size: clamp(26px, 2.8vw, 36px);
    line-height: 1.05;
    margin-bottom: 12px;
    color: var(--ink)
}

.service-text p {
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 300;
    color: var(--ink);
    line-height: 1.25
}

.services-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 80px;
    background: url('/imagens/botao cessao2.png') center/contain no-repeat;
    padding: 20px 60px;
    width: fit-content;
    margin-inline: auto;
    min-height: 59px;
}

.services-foot span {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink)
}

.services-foot .link-dark {
    font-weight: 400
}

/* ============================================================
   PORQUE ESCOLHER  (referência: título 86px, h3 39px, lista 28px)
   ============================================================ */
/* fundo ondulado (fundo2.png) ocupa 100% da largura do monitor, ancorado
   na base da seção; os celulares encostam exatamente na borda da seção
   de Clientes (sem padding inferior) - como na referência */
.why {
    background: #fff url('/imagens/fundo2.png') center bottom/100% auto no-repeat;
    padding-top: 60px;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}

.why .section-title {
    margin-bottom: 60px
}

.why-sub {
    max-width: 940px;
    margin: 0 auto 70px;
    text-align: center
}

.why-sub-icon {
    width: auto;
    height: 41px;
    margin: 0 auto 22px;
    display: block;
}

.why-sub h3 {
    font-weight: 600;
    font-size: clamp(28px, 3vw, 39px);
    margin-bottom: 20px;
    color: var(--ink)
}

.why-sub p {
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 300;
    color: var(--gray);
    line-height: 1.3
}

/* grid fiel: mockup com largura nativa (811px) à esquerda, checklist à direita.
   A lista alinha ao topo dos celulares, com espaçamento amplo entre itens. */
.why-content {
    position: relative;
    display: grid;
    grid-template-columns: 811px 1fr;
    column-gap: 70px;
    align-items: end;
    max-width: 1441px;
    margin: 80px auto 0;
    min-height: 629px;
}

.why-mockup {
    align-self: end;
    min-width: 0
}

.why-mockup img {
    width: 811px;
    max-width: 100%;
    margin: 0;
    display: block;
    /* base encosta na borda de Clientes */
}

.why-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 48px;
    align-self: stretch;
    padding: 70px 0 0px;
}

.why-list li {
    display: flex;
    align-items: center;
    gap: 26px;
    font-weight: 600;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.15;
    color: var(--ink);
}

.why-list li .check-icon {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
}

/* ============================================================
   CLIENTES (dark)  (referência: 942px, título 86px)
   ============================================================ */
.clients {
    background: #000 url('/imagens/fundoclientes1_02.jpg') center/cover no-repeat;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* sem padding inferior: o laptop ancorado na base da slide encosta no
       limite inferior da seção (referência) */
    padding-bottom: 0;
}

/* Fundo animado DISCRETO da seção Clientes: dois glows que derivam
   lentamente, sem competir com os logos/laptop. Só transform/opacity. */
.clients::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -20%;
    background:
        radial-gradient(40% 40% at 25% 70%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(36% 36% at 80% 25%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 60%);
    filter: blur(10px);
    will-change: transform, opacity;
    animation: clientsGlow 26s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes clientsGlow {
    0% {
        transform: translate3d(-3%, 2%, 0) scale(1.05);
        opacity: .75;
    }

    100% {
        transform: translate3d(4%, -3%, 0) scale(1.18);
        opacity: 1;
    }
}

.clients .container {
    position: relative;
    z-index: 2
}

.clients .section-title {
    text-align: center;
    margin-bottom: 10px
}

.clients .section-sub {
    justify-content: center
}

.clients-stage {
    margin-top: 70px;
    position: relative
}

/* o track do Slick não pode cortar o laptop full-bleed: o .client-laptop é
   absoluto em left:calc(50% - 50vw), ou seja vaza até a borda do viewport.
   Um overflow:hidden aqui cortaria o laptop, então o clip do carrossel é
   feito lá em cima, no overflow:hidden da seção .clients (que tem a largura
   total da tela). O !important também neutraliza o overflow inline que o
   Slick aplica no .slick-list. */
.clients-slick,
.clients-slick .slick-list,
.clients-slick .slick-track {
    overflow: visible !important;
}

/* ANIMACAO: FADE (cross-fade de opacidade), nao deslizamento lateral.

   Por que nao desliza mais: o .client-laptop e full-bleed
   (left:calc(50% - 50vw), 75vw), ou seja vaza para MUITO alem da caixa do
   slide. No slide lateral o vizinho precisa ficar visivel durante o
   movimento (senao nao ha o que mostrar deslizando), e por vazar assim ele
   sobrava na tela ate o fim da animacao - era o "pedaco de banner" parado
   no canto ao clicar nas setas. Recortar por geometria (clip-path) nao
   resolve: o clip que salva o laptop do slide atual e exatamente a abertura
   onde mora o laptop do vizinho.

   Com fade o Slick empilha todos os slides na MESMA posicao e cruza a
   opacidade, entao so um ocupa a cena por vez e nao existe vizinho lateral
   a esconder - o problema some na raiz, sem depender de timing de classe.

   O slick.css deste projeto e um build enxuto e NAO traz regra de transition
   (0 ocorrencias no arquivo), entao a transicao de opacidade e declarada
   aqui - sem ela o Slick apenas troca o opacity e o banner mudaria de golpe. */
.clients-slick.slick-initialized .slick-slide {
    transition: opacity .5s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}

.clients-slick.slick-initialized .slick-slide.slick-active,
.clients-slick.slick-initialized .slick-slide.slick-current {
    pointer-events: auto;
}

/* respeita quem pediu menos movimento */
/* O carrossel de clientes continua deslizando com movimento reduzido: esta
   media query zerava a transicao dos slides e, como o iOS a liga junto com o
   Modo de Baixo Consumo, no celular do cliente os slides trocavam secamente.
   Removida em 08/08/2026 -- ver nota no css.css, bloco .reveal. */

.client-slide {
    position: relative;
    min-height: calc(75vw * 634 / 1485);
}

/* Slick aplica float/display nos slides; garantimos altura coerente */
.clients-slick .slick-slide {
    height: auto;
}

/* ANTI-FLASH: o slick.css marca .slick-slide{display:none} e so reexibe
   com .slick-initialized. Como o slick.css entra async e o Slick (JS) boota
   com defer, ha uma janela em que TODOS os slides somem e o card fica em
   branco por varios segundos ate o Slick inicializar. Enquanto o Slick nao
   inicializou, mostramos o 1o slide (os demais ficam escondidos) para o card
   aparecer imediatamente; ao inicializar, o Slick assume o controle. */
.clients-slick:not(.slick-initialized) {
    display: block;
}

.clients-slick:not(.slick-initialized) .client-slide {
    display: none;
}

.clients-slick:not(.slick-initialized) .client-slide:first-child {
    display: block;
}

/* Notebook + mesa + screenshot numa única imagem (Laptop-clientes_02-b.png - 
   1485×634). Na referência ocupa ~100% da largura do monitor, ancorado à
   esquerda - então é full-bleed (vaza além do container). */
.client-laptop {
    position: absolute;
    left: calc(50% - 50vw);
    bottom: 0;
    width: 75vw;
}

.client-shot-link {
    display: block;
}

.client-shot {
    width: 100%;
    height: auto;
    display: block;
}

/* Layout da referência: o card (client-info) fica à ESQUERDA e a
   navegação (setas/dots) à DIREITA, lado a lado, ambos centralizados
   verticalmente no laptop. A nav ocupa ~191px (duas setas) na borda
   direita; o card é recuado para abrir esse espaço. */
.client-info {
    position: absolute;
    right: 310px;
    /* nav ocupa ~191px na borda; +119px de gap até o card */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 3;
    width: 329px;
}

/* o card inteiro e clicavel (abre o site do cliente): e um <a>, entao
   zera a decoracao herdada e ganha o hover que antes era do .client-link */
.client-card {
    background: url('/imagens/clientes 1.png') center/100% 100% no-repeat;
    width: 329px;
    flex: 0 0 329px;
    min-height: 158px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 32px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

.client-card:hover .client-link {
    opacity: .7;
    transform: translateX(3px)
}

/* Nav (setas + dots) à direita do card, na mesma faixa vertical:
   duas setas lado a lado em cima, dots logo abaixo (referência).
   É irmão do track do Slick, por isso posicionado em absoluto. */
.client-nav {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    z-index: 4;
    /* a navegação nunca deve ficar oculta
       (o Slick também adiciona .slick-arrow nas setas) */
    visibility: visible;
}

.client-nav .dots {
    margin: 0;
    justify-content: center;
}

.client-tag {
    color: #fff;
    font-size: 18px;
    font-weight: 300
}

.client-url {
    color: #fff;
    font-weight: 300;
    font-size: 14px
}

.client-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    text-decoration: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.client-link .link-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.client-link:hover {
    opacity: .7;
    transform: translateX(3px)
}

.clients-controls {
    display: flex;
    gap: 45px
}

.arrow {
    width: 73px;
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1.5px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    /* o ícone (Lucide vira <svg> com stroke:currentColor) precisa herdar branco */
    color: #fff;
    transition: transform .25s var(--ease), background .25s var(--ease);
}

.arrow:hover {
    background: rgba(255, 255, 255, .12);
}

/* mira <i> e o <svg> que o Lucide gera no lugar do <i> */
.arrow i,
.arrow svg {
    width: 38px;
    height: 38px;
    color: #fff;
    stroke: #fff;
    stroke-width: 1.5;
}

.arrow:hover {
    transform: translateY(-3px)
}

/* Dots */
.dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 40px
}

.dots .dot {
    width: 40px;
    height: 11px;
    border-radius: 6px;
    background: #cfcfd4;
    cursor: pointer;
    transition: all .3s var(--ease);
}

.clients .dots {
    justify-content: flex-start;
    gap: 12px;
    margin-top: 0;
    padding-left: 4px;
}

/* inativos: pill vazado com borda branca; ativo: barra branca sólida (menor) */
.clients .dots .dot {
    width: 40px;
    height: 11px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .85);
}

.clients .dots .dot.active {
    width: 30px;
    background: #fff;
    border-color: #fff;
}

.dots .dot.active {
    background: #fff
}

.testimonials .dots .dot {
    background: #cfcfd4
}

.testimonials .dots .dot.active {
    background: #1b1b1f
}

/* ============================================================
   SLICK - temas dos carrosséis (dots/arrows na identidade do layout)
   ============================================================ */
/* Reset dos defaults visuais do slick-theme que não usamos */
.slick-dots {
    position: static;
    display: flex !important;
    width: auto;
    margin: 0;
    padding: 0;
}

.slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
}

.slick-dots li button {
    width: auto;
    height: auto;
    padding: 0;
}

.slick-dots li button:before {
    content: none;
}

/* --- Dots dos CLIENTES (pílulas vazadas; ativo = barra branca) ---
   Slick injeta um <ul.slick-dots> DENTRO de #cliDots (.dots), por isso
   o seletor é descendente (#cliDots .slick-dots), não no mesmo elemento. */
#cliDots .slick-dots {
    position: static;
    gap: 12px;
    justify-content: center;
    width: auto;
}

#cliDots .slick-dots li button {
    width: 40px;
    height: 11px;
    border-radius: 6px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .85);
    cursor: pointer;
    transition: all .3s var(--ease);
    text-indent: -9999px;
    overflow: hidden;
}

#cliDots .slick-dots li.slick-active button {
    width: 30px;
    background: #fff;
    border-color: #fff;
}

/* --- Setas dos CLIENTES (usam .arrow já estilizado); estado disabled --- */
.clients-controls .arrow.slick-disabled {
    opacity: .4;
    cursor: default;
}

/* --- DEPOIMENTOS: cada slide é uma célula; dots escuros --- */
.testi-slick .slick-track {
    display: flex;
    align-items: stretch;
}

.testi-slick .slick-slide {
    height: auto;
}

.testi-slick .slick-slide>div {
    height: 100%;
}

/* ANTI-FLASH (mesmo caso dos clientes): mostra o 1o card ate o Slick
   inicializar, evitando que a area fique em branco enquanto o slick.css
   (async) esconde os slides e o Slick (defer) ainda nao bootou. */
.testi-slick:not(.slick-initialized) .testi-cell {
    display: none;
}

.testi-slick:not(.slick-initialized) .testi-cell:first-child {
    display: block;
}

.testi-cell {
    height: 100%;
    padding: 0 18px;
    /* gutter entre cards (~36px total como na referência) */
    box-sizing: border-box;
}

.testi-slick .slick-dots {
    justify-content: center;
    gap: 9px;
    margin-top: 48px;
}

.testi-slick .slick-dots li button {
    width: 40px;
    height: 11px;
    border-radius: 6px;
    background: #cfcfd4;
    cursor: pointer;
    transition: all .3s var(--ease);
    text-indent: -9999px;
    overflow: hidden;
}

.testi-slick .slick-dots li.slick-active button {
    width: 30px;
    background: #1b1b1f;
}

/* ============================================================
   PORTFÓLIO  (referência: título 86px, imagens 487×267, h3 18px)
   ============================================================ */
.portfolio {
    background: #fff
}

.portfolio .section-title {
    margin-bottom: 10px
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 36px;
    margin-top: 60px;
}

.port-item {
    text-align: center
}

.port-shot {
    margin-bottom: 18px;
}

.port-shot a {
    display: block;
}

.port-shot img {
    width: 100%;
    height: auto;
    transition: transform .4s var(--ease);
}

.port-item:hover .port-shot img {
    transform: translateY(-8px) scale(1.01)
}

.port-item h3 {
    font-weight: 300;
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center
}

.port-item .link-dark {
    font-size: 18px;
    font-weight: 400;
    /* underline só no .link-text (Saiba mais), não no link inteiro/seta */
    text-decoration: none;
    /* no layout o "Saiba mais" alinha à direita do item (célula align="right") */
    display: flex;
    justify-content: flex-end
}

/* ============================================================
   PRODUTOS  (referência: título 57px)
   ============================================================ */
.products {
    background: #fff;
    padding-top: 60px;
    padding-bottom: 90px
}

.products .section-title {
    margin-bottom: 90px;
    font-size: clamp(36px, 4vw, 57px)
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 70px;
    max-width: 1504px;
    margin: 0 auto;
    align-items: end;
}

.product img {
    width: 100%;
    /* height:auto p/ nao distorcer ao encolher (o <img> tem height fixo) */
    height: auto;
    transition: transform .35s var(--ease);
}

.product:hover img {
    transform: translateY(-10px)
}

/* ============================================================
   DEPOIMENTOS  (referência: bg #f3f3f3, título 69px, cards depo1.png)
   ============================================================ */
.testimonials {
    background: var(--bg-soft);
    overflow: hidden;
}

/* o stage do slider de depoimentos não pode deixar o track vazar */
.testi-stage,
.testi-slick,
.testi-slick .slick-list {
    overflow: hidden;
}

.testimonials .section-title {
    margin-bottom: 70px;
    font-weight: 300;
    font-size: clamp(40px, 4.6vw, 69px)
}

.testi-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 34px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.testi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .09)
}

.testi-card .quote {
    display: block;
    height: 28px;
}

/* aspas do layout de referência (aspas-depoimento.png) */
.testi-card .quote img {
    width: 23px;
    height: 18px;
}

.testi-card h3 {
    font-weight: 300;
    font-size: 22px;
    color: var(--ink);
    margin: 18px 0 14px
}

.testi-card .stars {
    display: flex;
    gap: 3px;
    margin-bottom: 18px
}

.testi-card .stars .star {
    width: 19px;
    height: 19px;
    color: var(--star);
    stroke: var(--star);
}

.testi-card .stars .star.filled {
    fill: var(--star);
}

.testi-card p {
    font-size: 20px;
    font-weight: 300;
    color: #000;
    line-height: 1.7
}

/* ---- Carrossel de depoimentos (Slick) ---- */
.testi-stage {
    max-width: 1320px;
    margin: 0 auto
}

/* depoimento cortado em 4 linhas; o botao "Ler mais" abre o texto completo.
   Texto alinhado ao topo; a sobra de altura fica embaixo (o Slick equaliza
   a altura dos cards). */
.testi-card p {
    margin-bottom: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* expandido: volta ao fluxo normal, sem corte */
.testi-card.is-open p {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
}

/* "Ler mais" / "Ler menos" - link discreto, mono grafite (sem azul) */
.testi-more {
    align-self: flex-start;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    color: #3a3a3a;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .2s var(--ease);
}

.testi-more:hover {
    color: #000;
}

.testi-more:focus-visible {
    outline: 2px solid #3a3a3a;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============================================================
   RESPONSIVO - SEÇÕES DA CAPA
   Breakpoints: 1460 / 1200 / 1024 / 860 / 768 / 560 / 414 / 360
   (os ajustes de Header/Footer/helpers ficam em css.css)
   ============================================================ */

/* ---- 1460px: mockup "porque escolher" encolhe proporcionalmente ---- */
@media(max-width:1460px) {
    .why-content {
        grid-template-columns: minmax(0, 811px) 1fr;
        column-gap: 50px
    }

    .why-mockup img {
        width: 100%
    }
}

/* ---- 1200px: empilha mockup/checklist; clientes vira layout centrado ---- */
@media(max-width:1200px) {
    .services-grid {
        gap: 48px 60px
    }

    .why {
        background-size: cover
    }

    .why-content {
        grid-template-columns: 1fr;
        gap: 40px;
        min-height: 0;
        align-items: center
    }

    .why-mockup {
        justify-self: center
    }

    .why-mockup img {
        margin: 0 auto;
        width: 100%;
        max-width: 560px;
        /* o atributo height="629" do <img> distorcia a imagem ao encolher */
        height: auto
    }

    .why-list {
        max-width: 600px;
        margin: 0 auto;
        align-self: center;
        padding-top: 0;
        padding-bottom: 40px;
        gap: 40px
    }

    /* CLIENTES: deixa de ser full-bleed; laptop contido e centralizado,
       card e navegação empilhados abaixo (não mais flutuando à direita). */
    .clients {
        padding-bottom: 10px;
    }

    /* no mobile o laptop é contido (não full-bleed), então o list pode
       e DEVE clipar - precisa de !important p/ vencer a regra desktop */
    .clients-slick,
    .clients-slick .slick-list,
    .clients-slick .slick-track {
        overflow: hidden !important;
    }

    .client-slide {
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        text-align: center
    }

    .client-laptop {
        position: static;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: 760px;
        margin: 0 auto
    }

    .client-info {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        justify-content: center;
        align-items: center;
        gap: 0
    }

    .client-card {
        margin: 0 auto
    }

    /* navegação volta ao fluxo, centralizada abaixo do card */
    .client-nav {
        position: static;
        top: auto;
        right: auto;
        width: auto;
        margin: 8px auto 0;
        align-items: center
    }

    .clients-controls {
        justify-content: center
    }

    #cliDots .slick-dots {
        justify-content: center
    }
}

/* ---- 1024px: portfólio 2 col, produtos 3 col, depoimentos 2 por vez ---- */
@media(max-width:1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 50px
    }
}

/* ---- 860px: serviços em 1 coluna ---- */
@media(max-width:860px) {
    .hero-features {
        grid-template-columns: 1fr 1fr
    }

    .services-grid {
        grid-template-columns: 1fr;
        max-width: 640px
    }

    /* depoimentos: 1 card por vez já a partir daqui no slider; setas de toque */
    .testi-cell {
        padding: 0 10px
    }
}

/* ---- 768px (tablets retrato): ajustes finos ---- */
@media(max-width:768px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px
    }

    .client-card {
        width: 300px;
        flex-basis: 300px
    }

    /* setas dos clientes: alvo de toque confortável */
    .arrow {
        width: 56px;
        height: 56px
    }

    .arrow i,
    .arrow svg {
        width: 28px;
        height: 28px
    }
}

/* ---- 560px (smartphones): 1 coluna geral ---- */
@media(max-width:560px) {

    .hero-content {
        padding: 30px 0 120px
    }

    /* h1 do hero menor no mobile (o clamp travava no piso de 44px) */
    .hero h1 {
        font-size: clamp(32px, 8.6vw, 44px);
        margin-bottom: 36px
    }

    .hero-features {
        grid-template-columns: 1fr;
        width: fit-content;
        gap: 14px
    }

    /* icone de servico menor no mobile */
    .service-icon {
        flex-basis: 44px;
        width: 44px
    }

    .service-icon img {
        max-width: 44px;
        max-height: 44px
    }

    .service {
        gap: 18px
    }

    .services-foot {
        background: none;
        padding: 18px 0;
        text-align: center;
        flex-direction: column;
        gap: 12px
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px
    }

    /* card de cliente reduzido, CENTRALIZADO e afastado do laptop/setas.
       IMPORTANTE: o Slick forca display:block no .client-slide, entao
       flex/gap nao valem aqui -- centraliza com margin auto (bloco) e
       espaca com margin-top/bottom (nao com gap). */
    .client-info {
        width: 100%;
        max-width: 300px;
        margin: 34px auto 0;
        /* reserva espaco ABAIXO do card, dentro do slide, para a nav
           (setas/dots) nao colar no card -- padding nao colapsa */
        padding-bottom: 40px;
        justify-content: center
    }

    .client-card {
        width: 100%;
        max-width: 280px;
        flex-basis: auto;
        min-height: 0;
        gap: 10px;
        padding: 22px 24px;
        margin: 0 auto
    }

    .client-tag,
    .client-link {
        font-size: 14px
    }

    .client-url {
        font-size: 12px
    }

    /* setas dos clientes: menores e mais alinhadas no mobile
       (44px = alvo de toque minimo; cluster setas+dots mais junto) */
    .arrow {
        width: 44px;
        height: 44px
    }

    .arrow i,
    .arrow svg {
        width: 22px;
        height: 22px
    }

    .clients-controls {
        gap: 20px
    }

    /* o Slick e a nav sao irmaos dentro de .clients-stage; como flex-column
       as margens nao colapsam (o margin-bottom:30px que o Slick injeta no
       slider deixa de "engolir" o afastamento da nav) */
    .clients-stage {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    /* o track do slider ocupa a largura toda mesmo como item flex */
    .clients-stage .clients-slick {
        width: 100%;
        margin-bottom: 0
    }

    /* afasta a navegacao (setas/dots) do card */
    .client-nav {
        gap: 14px;
        margin-top: 40px
    }

    /* depoimentos: fontes reduzidas no mobile */
    .testi-card h3 {
        font-size: 19px;
        margin: 14px 0 12px
    }

    .testi-card p {
        font-size: 17px
    }

    .testi-more {
        font-size: 16px
    }
}

/* ---- 414px e abaixo (iPhone Plus/XR, etc.) ---- */
@media(max-width:414px) {
    .testi-card {
        padding: 28px 24px
    }
}

/* ---- 360px / 320px (small Android, iPhone SE 1ª ger.) ----
   Garante zero overflow horizontal e legibilidade no menor alvo. */
@media(max-width:360px) {
    .hero h1 {
        margin-bottom: 32px
    }

    .hero-cta {
        flex-direction: column;
        gap: 6px
    }

    .services-foot span {
        font-size: 16px
    }

    .client-card {
        max-width: 100%;
        padding: 22px 18px
    }

    .testi-card {
        padding: 24px 20px
    }

    .testi-cell {
        padding: 0 6px
    }
}