/* ============================================================
   responsive.css - Adaptação para telas pequenas (mobile/tablet)
   ============================================================
   Aqui usamos "media queries" para mudar o layout dependendo
   do tamanho da tela. A estratégia é "mobile-first" inverso:
   o style.css atende telas grandes; aqui adaptamos pra menores.

   Pontos de quebra (breakpoints):
   - 1024px: Tablets/laptops pequenos
   - 768px: Tablets em pé
   - 480px: Celulares
   ============================================================ */


/* ------------------------------------------------------------
   TABLETS E LAPTOPS PEQUENOS (até 1024px)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {

    /* Reduz tamanhos de heading */
    h1 { font-size: var(--fonte-4xl); }
    h2 { font-size: var(--fonte-3xl); }
    h3 { font-size: var(--fonte-2xl); }

    /* Reduz padding das seções */
    .secao { padding: var(--espaco-16) 0; }

    /* Footer: 2 colunas em vez de 4 */
    .rodape-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--espaco-8);
    }
}


/* ------------------------------------------------------------
   TABLETS EM PÉ E CELULARES GRANDES (até 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {

    /* ---- HEADER ---- */

    /* Esconde o menu desktop e mostra o hamburguer */
    .menu {
        position: fixed;
        top: 72px;             /* Abaixo do header */
        left: 0;
        right: 0;
        background-color: var(--branco);
        flex-direction: column;
        gap: 0;
        padding: var(--espaco-6);
        box-shadow: var(--sombra-lg);
        transform: translateY(-200%);  /* Escondido por padrão */
        transition: transform var(--transicao-media);
        border-bottom: 1px solid var(--borda);
    }

    /* Quando ativo (clicou no hamburguer), desce */
    .menu.ativo {
        transform: translateY(0);
    }

    .menu a {
        padding: var(--espaco-4) 0;
        border-bottom: 1px solid var(--borda);
        width: 100%;
    }
    .menu a:last-child {
        border-bottom: none;
    }
    .menu .botao {
        margin-top: var(--espaco-4);
        width: 100%;
        justify-content: center;
    }

    /* ---- Dropdown "Serviços" vira acordeão no mobile ---- */
    .menu-item-dropdown {
        width: 100%;
    }
    .menu-dropdown-botao {
        width: 100%;
        justify-content: space-between;
        padding: var(--espaco-4) 0;
        border-bottom: 1px solid var(--borda);
    }
    /* Painel deixa de flutuar e vira lista recolhível inline */
    .menu-dropdown-painel {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        padding: 0 0 0 var(--espaco-4);
        background: transparent;
        border: none;
        box-shadow: none;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transicao-media);
    }
    .menu-dropdown-painel.aberto {
        max-height: 400px;
        transform: none;   /* anula o translateX(-50%) do desktop (centraliza o painel flutuante) */
    }
    .menu-dropdown-painel a {
        padding: var(--espaco-3) 0;
        border-bottom: 1px solid var(--borda);
        border-radius: 0;
        white-space: normal;
    }
    .menu-dropdown-painel a:last-child {
        border-bottom: none;
    }

    /* Mostra o botão hamburguer */
    .menu-toggle {
        display: flex;
    }

    /* Animação do hamburguer ao virar X */
    .menu-toggle.ativo span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .menu-toggle.ativo span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.ativo span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }


    /* ---- HERO ---- */
    .hero {
        padding: var(--espaco-16) 0 var(--espaco-12);
    }
    .hero h1 {
        font-size: var(--fonte-4xl);
    }
    .hero-subtitulo {
        font-size: var(--fonte-base);
    }
    .hero-botoes {
        flex-direction: column;  /* Botões empilhados */
        gap: var(--espaco-3);
    }
    .hero-botoes .botao {
        width: 100%;
    }


    /* ---- SEÇÕES ---- */
    .secao { padding: var(--espaco-12) 0; }
    h1 { font-size: var(--fonte-3xl); }
    h2 { font-size: var(--fonte-3xl); }
    h3 { font-size: var(--fonte-xl); }


    /* ---- GRIDS ---- */
    /* Cards em coluna única em telas pequenas */
    .grid-2col,
    .grid-cards,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--espaco-4);
    }

    /* Cards menores em mobile */
    .card {
        padding: var(--espaco-6);
    }

    /* v1.2.0 — Tech cards mais compactos em mobile (reduz scroll vertical).
       Em mobile não precisa do min-height grande, fica mais respirável. */
    .tech-card {
        min-height: 88px;
        padding: var(--espaco-3) var(--espaco-2);
        gap: var(--espaco-2);
    }
    .tech-icon {
        width: 32px;
        height: 32px;
    }


    /* ---- FOOTER ---- */
    .rodape-grid {
        grid-template-columns: 1fr;
        gap: var(--espaco-8);
        text-align: center;
    }
    .rodape-bottom {
        flex-direction: column;
        text-align: center;
    }


    /* ---- WHATSAPP FLUTUANTE ---- */
    .whatsapp-flutuante {
        width: 56px;
        height: 56px;
        bottom: var(--espaco-4);
        right: var(--espaco-4);
    }
}


/* ------------------------------------------------------------
   CELULARES (até 480px)
   ------------------------------------------------------------ */
@media (max-width: 480px) {

    /* Reduz padding lateral do container */
    .container {
        padding: 0 var(--espaco-4);
    }

    /* Botões menores */
    .botao {
        padding: var(--espaco-3) var(--espaco-5);
        font-size: var(--fonte-sm);
    }
    .botao-grande {
        padding: var(--espaco-3) var(--espaco-6);
        font-size: var(--fonte-base);
    }

    /* Hero ainda mais compacto */
    .hero h1 {
        font-size: var(--fonte-3xl);
    }

    /* Cards mais compactos */
    .card {
        padding: var(--espaco-5);
    }
}


/* ------------------------------------------------------------
   CELULARES PEQUENOS (até 360px)
   ------------------------------------------------------------ */
@media (max-width: 360px) {
    h1, .hero h1 { font-size: var(--fonte-2xl); }
    h2 { font-size: var(--fonte-xl); }

    .container {
        padding: 0 var(--espaco-3);
    }
}
/* ============================================================
   CARROSSEL HORIZONTAL — v3.0.1
   ============================================================
   Padrão visual pra seções com 4+ cards onde grid normal
   ficaria desbalanceada (3+2, 3+3+1, 3+1).

   Comportamento:
   - Desktop ≥ 1024px: 3 cards visíveis por vez
   - Tablet 768-1023px: 2 cards visíveis
   - Mobile < 768px: 1 card visível (96vw)
   - Scroll-snap nos cards (não para no meio)
   - Setas ← → flutuantes (some quando nada pra deslizar)
   - Dots indicadores embaixo
   - Touch/swipe nativo
   - prefers-reduced-motion respeitado

   Markup esperado:
   <div class="carrossel" data-carrossel>
     <button class="carrossel-seta carrossel-seta-esq" aria-label="Anterior">←</button>
     <div class="carrossel-track">
       <div class="card">...</div>
       <div class="card">...</div>
       ...
     </div>
     <button class="carrossel-seta carrossel-seta-dir" aria-label="Próximo">→</button>
     <div class="carrossel-dots" role="tablist"></div>
   </div>
   ============================================================ */

.carrossel {
    position: relative;
    margin-top: var(--espaco-6);
}

/* Track horizontal scrollável com scroll-snap
   v3.0.4 — Scrollbar escondida (feedback de "arrastar" vem via cursor
   grab + setas visíveis + dots). Scrollbar visível ficava feia embaixo
   dos cards no dark mode. */
.carrossel-track {
    display: grid;
    grid-auto-flow: column;
    /* Cada card ocupa 1/3 do container (3 visíveis) */
    grid-auto-columns: calc((100% - var(--espaco-6) * 2) / 3);
    gap: var(--espaco-6);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 0;
    scroll-behavior: smooth;
    /* Padding vertical pra shadow não cortar; horizontal=0 pra snap exato */
    padding: var(--espaco-3) 0;
    cursor: grab;
    user-select: none;
    /* Scrollbar escondida em todos os navegadores */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / Edge legado */
}
.carrossel-track.arrastando { cursor: grabbing; scroll-behavior: auto; }
.carrossel-track::-webkit-scrollbar { display: none; }  /* Chrome / Safari / Opera */

/* Cada card "snap" no início da viewport do carrossel */
.carrossel-track > * {
    scroll-snap-align: start;
    /* Card precisa de altura mínima coerente entre slides */
    height: auto;
}

/* ===== Setas de navegação ===== */
.carrossel-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cor-acento);
    color: var(--branco-puro, #fff);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.4);
    transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
    z-index: 2;
    /* Setas ficam um pouco "pra fora" do track no desktop */
}
.carrossel-seta:hover {
    transform: translateY(-50%) scale(1.08);
}
.carrossel-seta:focus-visible {
    outline: 3px solid var(--cor-primaria, #1a1a2e);
    outline-offset: 3px;
}
.carrossel-seta[disabled] {
    opacity: 0;
    pointer-events: none;
}
.carrossel-seta-esq { left: -22px; }
.carrossel-seta-dir { right: -22px; }

/* SVG dentro da seta */
.carrossel-seta svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Dots ===== */
.carrossel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--espaco-5);
}
/* Dots — v3.0.6: usando valores absolutos (sem var()) na regra .ativo
   pra garantir visibilidade independente do tema. Transition explícita
   em todas as props animáveis. */
.carrossel-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: width 250ms ease, height 250ms ease, background-color 250ms ease, border-radius 250ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.carrossel-dot:hover { background: rgba(255, 255, 255, 0.5); }
.carrossel-dot.ativo {
    width: 28px !important;
    background: #00D4FF !important;
    border-radius: 5px !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}
.carrossel-dot:focus-visible {
    outline: 2px solid #00D4FF;
    outline-offset: 2px;
}

/* ===== Responsivo ===== */
@media (max-width: 1023px) {
    .carrossel-track {
        /* 2 cards visíveis em tablet */
        grid-auto-columns: calc((100% - var(--espaco-6)) / 2);
    }
}

@media (max-width: 767px) {
    .carrossel-track {
        /* 1 card visível em mobile, com peek do próximo */
        grid-auto-columns: 88%;
        gap: var(--espaco-4);
    }
    /* Setas escondidas em mobile (swipe é mais natural) */
    .carrossel-seta { display: none; }
}

/* ===== Acessibilidade: reduce motion ===== */
@media (prefers-reduced-motion: reduce) {
    .carrossel-track { scroll-behavior: auto; }
    .carrossel-seta,
    .carrossel-dot { transition: none; }
}