/* Barlow (família oficial) em versão normal para textos corridos
   da seção institucional. Precisa ser a primeira regra do arquivo. */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500&display=swap");

/* ==========================================================
   SITE CONEX INTERNET — WEB / DESKTOP

   Responsabilidade:
   - estilos base do site;
   - componentes compartilhados;
   - layout desktop;
   - base herdada por tablet e mobile.

   Tablet:
   public/css/tablet.css

   Mobile:
   public/css/mobile.css
   ========================================================== */

/* ==========================================================
   BASE E VARIÁVEIS
========================================================== */

:root {
    --preto: #000000;
    --preto-suave: #080808;
    --laranja: #ff9c00;
    --laranja-claro: #ffb12c;
    --dourado: #e2aa45;
    --dourado-claro: #f3c770;
    --dourado-borda: rgba(226, 170, 69, 0.55);
    --verde-whatsapp: #25d366;
    --branco: #ffffff;
    --off-white: #e5e3d4;
    --cinza-texto: #b8b8b3;
    --cinza-borda: rgba(255, 255, 255, 0.52);
    --fonte-principal: "Barlow Condensed", Arial, sans-serif;
    --fonte-texto: "Barlow", Arial, sans-serif;

    /* Artely Inks permanece reservada aos destaques oficiais.
       A fonte não é carregada enquanto o arquivo/licença web não existir. */
    --container: 1240px;
    --margem-pagina: clamp(15px, 3.5vw, 40px);
    --espaco-secao: clamp(44px, 5vw, 68px);
    --espaco-bloco: clamp(20px, 2.6vw, 36px);

    /* Topo: container mais amplo que o restante da página. */
    --topo-largura: 1600px;
    --topo-margem: clamp(20px, 4.5vw, 88px);

    /* Eixo lateral do corpo da página: mesma margem esquerda de
       "Sobre a Conex" (--exp-margem) e da Área de Cobertura
       (--cobertura-margem). Usado pelo rodapé para alinhar ao corpo. */
    --eixo-lateral: clamp(20px, 6.5vw, 124px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--preto);
    color: var(--branco);
    font-family: var(--fonte-principal);
    font-size: 18px;
}

img,
video {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

.site-home {
    width: 100%;
}

.cobertura__container {
    width: min(calc(100% - (2 * var(--margem-pagina))), var(--container));
    margin-inline: auto;
}

/* ==========================================================
   HOME — CABEÇALHO
========================================================== */

.home-topo {
    /* Altura DEFINIDA da faixa preta (desktop). O mascote fica fora
       do cálculo (position: absolute), então não estica o topo. */
    --topo-altura: clamp(175px, calc(5vw + 120px), 215px);

    position: relative;
    /* Fica acima da faixa do vídeo: o mascote invade parte dela. */
    z-index: 2;
    width: 100%;
    height: var(--topo-altura);
    background: var(--preto);
}

.home-topo__container {
    /* ==========================================================
       HOME — MASCOTE / ROBÔ — AJUSTES DESKTOP
       ========================================================== */

    /*
     * IMAGEM — MASCOTE CONEX
     * Arquivo: /imagens/mascotes/Robô.png
     * Uso: mascote sobreposto ao cabeçalho e ao vídeo da Home.
     * Proporção: preservada com height: auto.
     */

    /*
     * TAMANHO DO ROBÔ
     * Aumente/diminua para controlar o tamanho geral acima de 1100px.
     */
    --mascote-largura: clamp(430px, calc(23vw + 202px), 645px);

    /*
     * POSIÇÃO HORIZONTAL DO ROBÔ
     * Mais negativo = direita; valor maior = interior da página.
     */
    --mascote-direita: clamp(-64px, -4vw, -40px);

    /*
     * POSIÇÃO VERTICAL DO ROBÔ
     * Valor maior = desce; valor menor = sobe no cabeçalho.
     */
    --mascote-topo: clamp(8px, 0.7vw, 14px);

    /* Usada apenas pelos layouts menores já existentes. */
    --mascote-invasao: 0.3;
    --topo-respiro: var(--mascote-topo);

    position: relative;
    width: min(calc(100% - (2 * var(--topo-margem))), var(--topo-largura));
    height: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-areas: "acoes marca mascote";
    /* Laterais iguais: o logo fica no centro real da página. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 100%;
    /* Ações e logo centralizados na faixa preta compacta. */
    align-items: center;
    gap: clamp(20px, 3vw, 56px);
}

.home-topo__acoes {
    grid-area: acoes;
    justify-self: start;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Botões → WhatsApp: o min-height de 44px do contato já soma ~6–9px
       acima do número; descontado isso, o espaço visível acompanha o
       gap horizontal entre os botões (clamp(10px, 0.9vw, 14px)). */
    gap: clamp(2px, calc(0.9vw - 8px), 8px);
}

.home-topo__botoes {
    display: flex;
    align-items: stretch;
    gap: clamp(10px, 0.9vw, 14px);
}

/* Botões de ação: fundo escuro, borda dourada discreta, ícone dourado. */
.home-topo__acao {
    display: inline-flex;
    min-height: clamp(46px, 2.6vw, 50px);
    padding: 0 clamp(16px, 1.3vw, 22px);
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--dourado-borda);
    border-radius: 10px;
    background: linear-gradient(180deg, #161412 0%, #0b0a09 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--branco);
    font-size: clamp(17px, 1.1vw, 20px);
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.home-topo__icone {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--dourado);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-topo__icone-cheio {
    fill: var(--dourado);
    stroke: none;
}

.home-topo__acao:focus-visible {
    border-color: var(--dourado-claro);
    background: linear-gradient(180deg, #1e1b17 0%, #110f0c 100%);
    outline: 2px solid var(--dourado-claro);
    outline-offset: 3px;
}

@media (hover: hover) {
    .home-topo__acao:hover {
        transform: translateY(-1px);
        border-color: var(--dourado-claro);
        background: linear-gradient(180deg, #1e1b17 0%, #110f0c 100%);
    }
}

/* Telefone / WhatsApp: ícone verde + número branco. */
.home-topo__contato {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding-left: 2px;
    color: var(--branco);
    transition: opacity 180ms ease;
}

.home-topo__whatsapp {
    flex: 0 0 auto;
    width: clamp(26px, 2vw, 30px);
    height: clamp(26px, 2vw, 30px);
    fill: var(--verde-whatsapp);
}

.home-topo__contato strong {
    font-size: clamp(25px, 1.7vw, 32px);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
}

@media (hover: hover) {
    .home-topo__contato:hover {
        opacity: 0.86;
    }
}

.home-topo__contato:focus-visible {
    outline: 2px solid var(--dourado-claro);
    outline-offset: 4px;
    border-radius: 6px;
}

.home-topo__marca {
    grid-area: marca;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

/* Compensa a área transparente da imagem e aproxima a arte das ações. */
@media (min-width: 1025px) {
    .home-topo__marca {
        top: calc(clamp(270px, 19vw, 360px) * -0.0431 - 6px);
    }
}

/* Imagem: /imagens/logos/conex-logo-principal.webp
   Uso: marca principal centralizada no cabeçalho. */
.home-topo__marca img {
    width: clamp(270px, 19vw, 360px);
    height: auto;
    object-fit: contain;
}

.home-topo__marca strong {
    color: var(--branco);
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 800;
    letter-spacing: 2px;
}

/* Posicionamento desktop do mascote documentado no bloco de variáveis. */
.home-topo__mascote {
    position: absolute;
    /* CAMADA: mantém o robô à frente do cabeçalho e do vídeo. */
    z-index: 3;

    /* CIMA / BAIXO: ajuste --mascote-topo no bloco acima. */
    top: var(--mascote-topo);

    /* DIREITA / ESQUERDA: ajuste --mascote-direita no bloco acima. */
    right: var(--mascote-direita);

    /* TAMANHO: ajuste --mascote-largura no bloco acima. */
    width: var(--mascote-largura);
    pointer-events: none;
}

.home-topo__mascote img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Sombra mínima: apenas separa o corpo do mascote do vídeo. */
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

/* ==========================================================
   HOME — VÍDEO INSTITUCIONAL
   Autoplay mudo em loop, sem capa/poster (comportamento: js/site.js).
========================================================== */

.home-video {
    position: relative;
    width: 100%;
    /* Área reservada ao vídeo institucional oficial (não é espaço vazio).
       Sem vídeo: fundo branco, altura responsiva com presença visual. */
    height: clamp(190px, 12.5vw, 240px);
    background: var(--branco);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(0, 0, 0, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Com vídeo real: a faixa ganha altura própria (faixa larga, não hero).
   Fundo preto cobre o carregamento e evita flash branco. */
.home-video--com-video {
    /* 1920 ≈ 464px · 1600 ≈ 400 · 1440 ≈ 368 · 1366 ≈ 353 · 1280 ≈ 336 */
    height: clamp(300px, calc(20vw + 80px), 470px);
    background-color: var(--preto);
}

.home-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 40% vertical: preserva rostos e o logo final do vídeo e mantém
       fora da faixa as legendas gravadas na parte inferior. */
    object-position: 50% 40%;
    /* Vídeo decorativo: sem interação nem elementos do player aparentes. */
    pointer-events: none;
}

.home-video__media::-webkit-media-controls,
.home-video__media::-webkit-media-controls-start-playback-button,
.home-video__media::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
}

.home-video__espera {
    width: 100%;
    height: 100%;
    background: var(--branco);
}

/* ==========================================================
   HOME — SOBRE A CONEX
   Esquerda: título + dois textos com divisor vertical.
   Direita: card "Baixe o App".
   Ajustes responsivos: css/tablet.css e css/mobile.css
========================================================== */

.experiencia {
    --exp-linha: rgba(229, 227, 212, 0.72);
    --exp-raio: clamp(18px, 1.6vw, 28px);
    --exp-card-topo: clamp(14px, 1.3vw, 24px);
    --exp-margem: clamp(20px, 6.5vw, 124px);

    position: relative;
    background: var(--preto);
    /* Base compacta: a cobertura começa logo abaixo da linha. */
    padding-block: clamp(28px, 2.3vw, 44px) clamp(8px, 0.8vw, 16px);
    /* Corta a continuação da linha no limite direito da página. */
    overflow: hidden;
}

.experiencia__container {
    --exp-margem-dir: clamp(20px, 10vw, 200px);

    max-width: 1760px;
    margin-left: max(var(--exp-margem), calc((100% - 1760px) / 2));
    margin-right: max(var(--exp-margem-dir), calc((100% - 1760px) / 2));
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 420px);
    align-items: stretch;
}

/* Linha decorativa integrada ao card — uma única linha de 1px:
   1. .experiencia__principal border-bottom: horizontal da esquerda
      até a curva (para --exp-raio antes do card);
   2. .app-card::before: curva que sobe para a lateral esquerda do card;
   3. .app-card bordas esquerda + topo + direita (cantos superiores
      arredondados, base aberta);
   4. .app-card::after: curva que desce da lateral direita e segue
      horizontal até a borda direita da página.
   Entrada apagada à esquerda: .experiencia__principal::after. */

.experiencia__principal {
    position: relative;
    min-width: 0;
    margin-right: var(--exp-raio);
    padding-right: clamp(32px, 3.6vw, 68px);
    padding-bottom: clamp(14px, 1.1vw, 22px);
    border-bottom: 1px solid var(--exp-linha);
}

.experiencia__principal::after {
    content: "";
    position: absolute;
    right: 100%;
    bottom: -1px;
    width: var(--exp-margem);
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(229, 227, 212, 0) 0%,
        rgba(229, 227, 212, 0.35) 55%,
        var(--exp-linha) 100%
    );
    pointer-events: none;
}

/* Rótulo "Sobre a Conex" e frase final ficam no HTML, mas não fazem
   parte da composição aprovada (referência 2026-10): ocultos. */
.experiencia__rotulo,
.experiencia__assinatura {
    display: none;
}

.experiencia__titulo {
    margin: 0;
    color: var(--branco);
    font-size: clamp(34px, 3vw, 58px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.2px;
}

.experiencia__titulo span {
    display: block;
    color: var(--laranja);
    font-weight: 700;
    white-space: nowrap;
}

.experiencia__textos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 5.4vw, 104px);
    margin-top: clamp(14px, 1.3vw, 24px);
}

/* Divisor vertical fino entre os dois textos. */
.experiencia__textos::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(229, 227, 212, 0.4);
}

.experiencia__textos p,
.experiencia__assinatura {
    margin: 0;
    color: var(--off-white);
    font-family: var(--fonte-texto);
    font-size: clamp(16px, 1.2vw, 22px);
    font-weight: 400;
    line-height: 1.32;
}

.experiencia__assinatura strong {
    color: var(--laranja);
    font-family: var(--fonte-principal);
    font-size: 1.08em;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* ==========================================================
   HOME — BAIXE O APP
   Card compacto: bordas esquerda/topo/direita fazem parte da linha.
   A base fica aberta e alinhada à linha horizontal.
========================================================== */

.app-card {
    position: relative;
    z-index: 1;
    align-self: stretch;
    margin-top: var(--exp-card-topo);
    /* O espaço da curva fica abaixo do card, até a linha. */
    margin-bottom: var(--exp-raio);
    padding:
        clamp(18px, 1.5vw, 28px)
        clamp(20px, 2.4vw, 44px)
        clamp(16px, 1.3vw, 24px);
    border: 1px solid var(--exp-linha);
    border-bottom: 0;
    border-radius: var(--exp-raio) var(--exp-raio) 0 0;
    background: var(--preto);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.app-card::before,
.app-card::after {
    content: "";
    position: absolute;
    top: 100%;
    height: var(--exp-raio);
    border-bottom: 1px solid var(--exp-linha);
    pointer-events: none;
}

/* Curva esquerda: lateral do card → linha horizontal à esquerda. */
.app-card::before {
    right: 100%;
    width: calc(var(--exp-raio) + 1px);
    border-right: 1px solid var(--exp-linha);
    border-bottom-right-radius: var(--exp-raio);
}

/* Curva direita + continuação horizontal até a borda da página. */
.app-card::after {
    left: 100%;
    width: 100vw;
    border-left: 1px solid var(--exp-linha);
    border-bottom-left-radius: var(--exp-raio);
}

.app-card h2 {
    margin: 0;
    color: var(--laranja);
    font-size: clamp(32px, 2.5vw, 48px);
    font-weight: 600;
    font-style: italic;
    line-height: 1.05;
}

.app-card p {
    max-width: 22ch;
    margin: clamp(8px, 0.8vw, 14px) 0 0;
    color: var(--branco);
    font-family: var(--fonte-texto);
    font-size: clamp(16px, 1.2vw, 22px);
    line-height: 1.3;
}

.app-card__botao {
    display: inline-flex;
    width: 100%;
    max-width: 340px;
    min-height: clamp(46px, 3.3vw, 60px);
    margin-top: clamp(14px, 1.1vw, 20px);
    padding-inline: 20px;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.6vw, 28px);
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--laranja);
    color: var(--preto);
    font-size: clamp(18px, 1.3vw, 23px);
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: transform 180ms ease, background 180ms ease;
}

.app-card__botao svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-card__botao:focus-visible {
    outline: 3px solid var(--branco);
    outline-offset: 3px;
    background: var(--laranja-claro);
}

@media (hover: hover) {
    .app-card__botao:hover {
        transform: translateY(-1px);
        background: var(--laranja-claro);
    }
}

/* ==========================================================
   HOME — ÁREA DE COBERTURA
   Composição: foto noturna ao fundo + sombra à esquerda,
   texto ancorado à esquerda e bola Conex sólida à direita,
   saindo levemente pela borda inferior.
   Ajustes responsivos: css/tablet.css e css/mobile.css
========================================================== */

.cobertura {
    position: relative;
    min-height: clamp(420px, 32vw, 620px);
    background: var(--preto);
    overflow: hidden;
}

/* Imagem: /imagens/cidades/Cidade Buritis.png
   Uso: fotografia de fundo da área de cobertura. */
.cobertura__fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Enquadra a cidade iluminada (sem o pôr do sol do topo da foto). */
    object-position: center 65%;
}

.cobertura__sombra {
    position: absolute;
    inset: 0;
    /* Topo escuro funde com a linha institucional; lateral esquerda
       escura garante contraste do texto. */
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0) 24%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.62) 24%,
            rgba(0, 0, 0, 0.2) 52%,
            rgba(0, 0, 0, 0.06) 100%
        );
}

/* Ícones Wi-Fi: camada decorativa sobre a foto, abaixo do texto e da
   bola. Cada ícone é posicionado em % da seção (centro do ícone). */
.cobertura__wifi {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cobertura__wifi-icone {
    --wifi-tamanho: clamp(20px, 1.9vw, 36px);

    position: absolute;
    width: var(--wifi-tamanho);
    height: auto;
    overflow: visible;
    transform: translate(-50%, -50%);
    fill: var(--laranja);
    stroke: var(--laranja);
    stroke-width: 3.8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(255, 156, 0, 0.55));
}

.cobertura__wifi-icone path {
    fill: none;
}

/* Wi-Fi 1 — esquerda */
.cobertura__wifi-icone--1 {
    left: 30%;
    top: 15%;
}

/* Wi-Fi 2 — central, maior */
.cobertura__wifi-icone--2 {
    --wifi-tamanho: clamp(30px, 3.3vw, 62px);

    left: 51%;
    top: 12%;
}

/* Wi-Fi 3 — direita */
.cobertura__wifi-icone--3 {
    left: 79%;
    top: 15%;
}

/* Container em largura total (não usa o container central de 1240px):
   o texto ancora na margem esquerda da página (~8vw, como na arte) e
   a bola se posiciona pela borda direita da seção. */
.cobertura__container {
    /* Mesma margem esquerda do título "Sobre a Conex". */
    --cobertura-margem: clamp(20px, 6.5vw, 124px);

    position: relative;
    z-index: 1;
    width: 100%;
    margin-inline: 0;
    padding-inline: var(--cobertura-margem);
    min-height: clamp(420px, 32vw, 620px);
    display: flex;
    align-items: center;
    /* Topo maior que a base: o bloco de texto assenta abaixo do centro. */
    padding-block: clamp(70px, 8vw, 150px) clamp(36px, 3.5vw, 70px);
}

.cobertura__conteudo {
    position: relative;
    z-index: 2;
}

.cobertura__rotulo {
    margin: 0 0 8px;
    color: var(--laranja);
    font-size: clamp(30px, 2.2vw, 44px);
    font-style: italic;
    font-weight: 600;
    line-height: 1;
}

.cobertura__cidades {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cobertura__cidades li {
    color: var(--branco);
    font-size: clamp(36px, 2.9vw, 58px);
    font-weight: 900;
    line-height: 1.04;
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.52);
}

/* Cidade com localização (abre o MODAL — LOCALIZAÇÃO): mesmo visual do
   texto da lista; só o cursor, o hover discreto e o foco indicam a ação. */
.cobertura__cidade-link {
    color: inherit;
    cursor: pointer;
    transition: color 160ms ease;
}

.cobertura__cidade-link:focus-visible {
    outline: 2px solid var(--laranja);
    outline-offset: 4px;
    border-radius: 4px;
}

@media (hover: hover) {
    .cobertura__cidade-link:hover {
        color: var(--laranja-claro);
    }
}

/* Bloco de texto: rótulo laranja + lista de cidades (hierarquia mantida). */

/* Imagem: /imagens/logos/Log-Titulo.png
   Uso: bola Conex decorativa, sólida (sem opacidade), à direita.
   --cobertura-bola controla o tamanho; ~55% da bola fica abaixo da
   borda da seção (cortada pelo overflow), como na referência. */
.cobertura__simbolo {
    --cobertura-bola: clamp(300px, 36vw, 700px);

    position: absolute;
    z-index: 1;
    right: clamp(16px, 6.4vw, 124px);
    bottom: calc(var(--cobertura-bola) * -0.55);
    width: var(--cobertura-bola);
    opacity: 1;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.cobertura__simbolo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ==========================================================
   HOME — FOTO INSTITUCIONAL
   Imagem: /imagens/extra/Caminhonete Conex com trabalhador e escada.png
   Uso: equipe técnica e veículo da Conex em largura total.
========================================================== */

.estrutura-conex {
    position: relative;
    width: 100%;
    /* Fundo preto: nenhuma sobra branca entre a foto e o rodapé
       (arredondamento de altura em vw ou foto ainda carregando).
       Sem branco: a transição é a faixa preta + linha laranja abaixo. */
    background: var(--preto);
    overflow: hidden;
}

/* ==========================================================
   HOME — TRANSIÇÃO COBERTURA / IMAGEM INSTITUCIONAL
   Faixa preta fina (border-top da seção da foto) e linha laranja
   de 1px (::before) na divisa entre a faixa e a foto.
   Espessura da faixa: --transicao-faixa (tablet/mobile ajustam).
   ========================================================== */

.estrutura-conex {
    --transicao-faixa: 12px;

    border-top: var(--transicao-faixa) solid var(--preto);
}

.estrutura-conex::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 1px;
    background: var(--laranja);
    pointer-events: none;
}

.estrutura-conex img {
    width: 100%;
    height: clamp(500px, 40vw, 620px);
    object-fit: cover;
    object-position: center;
}

/* ==========================================================
   RODAPÉ
   Três blocos: CONEX (marca + frase) · ACESSOS · LEGAL.
   Colunas separadas por linhas verticais finas.
   HTML: includes/footer.php
========================================================== */

.rodape {
    background: #070707;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.rodape__container {
    /* Mesmo eixo lateral do corpo (Sobre a Conex / Área de Cobertura):
       antes era um container central de 1240px, deslocado em relação
       às seções acima (ex.: 340px × 124px de margem em 1920px). */
    width: 100%;
    padding-inline: var(--eixo-lateral);
    display: grid;
    /* Acessos mais largo: comporta a lista em duas colunas. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.9fr);
    padding-block: clamp(28px, 2.4vw, 42px);
}

.rodape__coluna + .rodape__coluna {
    padding-left: clamp(28px, 3.4vw, 64px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.rodape__coluna--marca {
    padding-right: clamp(24px, 3vw, 56px);
}

/* Logo: /imagens/logos/conex-logo-principal.webp (arquivo quadrado,
   arte na faixa central). Margens negativas recolhem a área
   transparente, como no cabeçalho mobile. */
.rodape__logo {
    --rodape-logo-arte: clamp(150px, 11vw, 190px);
    --rodape-logo-img: calc(var(--rodape-logo-arte) / 0.8907);

    width: var(--rodape-logo-img);
    max-width: none;
    height: auto;
    margin:
        calc(var(--rodape-logo-img) * -0.3833)
        0
        calc(var(--rodape-logo-img) * -0.2972)
        calc(var(--rodape-logo-img) * -0.0546);
}

.rodape__marca-texto {
    color: var(--branco);
    font-size: 32px;
    font-weight: 800;
}

.rodape__frase {
    max-width: 26ch;
    margin: clamp(14px, 1.2vw, 20px) 0 0;
    color: var(--off-white);
    font-family: var(--fonte-texto);
    font-size: clamp(16px, 1vw, 18px);
    line-height: 1.45;
}

/* Título do bloco com traço laranja curto abaixo. */
.rodape__titulo {
    margin: 0 0 14px;
    color: var(--branco);
    font-size: clamp(20px, 1.3vw, 24px);
    font-weight: 700;
    line-height: 1;
}

.rodape__titulo::after {
    content: "";
    display: block;
    width: 38px;
    height: 2px;
    margin-top: 8px;
    background: var(--laranja);
}

.rodape__lista {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Lista em 2 colunas (Acessos), preenchida coluna a coluna (3 linhas):
   1ª coluna atendimento/conta (WhatsApp, Central do Cliente, Aplicativo),
   2ª coluna redes sociais (Instagram, YouTube). Ordem do HTML = leitura.
   1ª coluna levemente mais larga (1,08 × 0,92): comporta "Central do
   Cliente" em uma linha a partir de 1024px e no celular a partir de 360px. */
.rodape__lista--colunas {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: clamp(20px, 2.4vw, 44px);
}

/* Link: ícone · texto · seta. */
.rodape__link {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 10px;
    max-width: 280px;
    min-height: 36px;
    color: var(--off-white);
    font-family: var(--fonte-texto);
    font-size: 16px;
    transition: color 160ms ease;
}

.rodape__icone {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rodape__icone--cheio,
.rodape__icone-ponto {
    fill: currentColor;
    stroke: none;
}

.rodape__seta {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--cinza-texto);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease, stroke 160ms ease;
}

.rodape__link:focus-visible {
    color: var(--laranja);
}

@media (hover: hover) {
    .rodape__link:hover {
        color: var(--laranja);
    }

    .rodape__link:hover .rodape__seta {
        stroke: var(--laranja);
        transform: translateX(2px);
    }
}

/* ==========================================================
   MODAIS — BASE
   Estrutura compartilhada pelos modais do site.
   HTML: public/index.php (section #modais-site)
   Comportamento: public/js/site.js
   Peças: .site-modal (camada fixa) · __backdrop · __dialog ·
          __header · __body · __footer · __acao
========================================================== */

/* Trava a rolagem da página enquanto um modal está aberto. */
body.site-modal-aberto {
    overflow: hidden;
}

.site-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 40px);
}

.site-modal[hidden] {
    display: none;
}

.site-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.74);
    backdrop-filter: blur(3px);
}

.site-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 640px);
    max-height: 100%;
    overflow: hidden;
    border: 1px solid rgba(229, 227, 212, 0.22);
    border-radius: 18px;
    background: #0b0b0b;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    color: var(--branco);
}

.site-modal__dialog:focus {
    outline: none;
}

.site-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-modal__titulo {
    margin: 0;
    font-size: clamp(24px, 1.7vw, 30px);
    font-weight: 700;
    line-height: 1.1;
}

.site-modal__fechar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: transparent;
    color: var(--branco);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease;
}

.site-modal__fechar svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.site-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 20px 24px 24px;
}

.site-modal__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.site-modal__acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--dourado-borda);
    border-radius: 10px;
    background: linear-gradient(180deg, #161412 0%, #0b0a09 100%);
    color: var(--branco);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.site-modal__acao--principal {
    border-color: transparent;
    background: var(--laranja);
    color: var(--preto);
}

@media (hover: hover) {
    .site-modal__fechar:hover {
        border-color: var(--laranja);
        color: var(--laranja);
    }

    .site-modal__acao:hover {
        border-color: var(--dourado-claro);
    }

    .site-modal__acao--principal:hover {
        background: var(--laranja-claro);
    }
}

/* ==========================================================
   MODAL — ESCOLHA SEU APLICATIVO
   Cartão compacto e centralizado. Os badges são as imagens
   oficiais do projeto (proporção 3:1 preservada, sem recorte).
========================================================== */

.site-modal--aplicativo .site-modal__dialog {
    width: min(100%, 460px);
    padding: 32px 26px 24px;
    text-align: center;
}

.site-modal--aplicativo .site-modal__fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    border-color: transparent;
}

.site-modal--aplicativo .site-modal__body {
    flex: 0 0 auto;
    padding: 0;
    overflow: visible;
}

.modal-aplicativo__titulo {
    margin: 0;
    padding-inline: 36px;
    font-size: clamp(28px, 2vw, 34px);
    font-weight: 700;
    line-height: 1.1;
}

.modal-aplicativo__titulo span {
    color: var(--laranja);
    font-style: italic;
}

.modal-aplicativo__descricao {
    margin: 8px 0 0;
    color: var(--off-white);
    font-family: var(--fonte-texto);
    font-size: 16px;
}

/* Desktop/tablet: badges lado a lado, mesma largura e altura. */
.modal-aplicativo__lojas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.modal-aplicativo__loja {
    display: block;
    border-radius: 10px;
    transition: transform 160ms ease;
}

.modal-aplicativo__loja img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (hover: hover) {
    .modal-aplicativo__loja:hover {
        transform: translateY(-2px);
    }
}

.modal-aplicativo__rodape {
    display: block;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-aplicativo__rodape .site-modal__acao {
    width: 100%;
}

/* ==========================================================
   MODAL — LOCALIZAÇÃO (ÁREA DE COBERTURA)
   Mesmo cartão compacto do modal aplicativo, com borda dourada.
   Conteúdo preenchido por site.js a partir da cidade clicada.
========================================================== */

.site-modal--localizacao .site-modal__dialog {
    width: min(100%, 440px);
    padding: 34px 28px 28px;
    border-color: var(--dourado-borda);
    text-align: center;
}

.site-modal--localizacao .site-modal__fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    border-color: transparent;
}

.site-modal--localizacao .site-modal__body {
    flex: 0 0 auto;
    padding: 0;
    overflow: visible;
}

.modal-localizacao__rotulo {
    margin: 0;
    color: var(--laranja);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
}

.modal-localizacao__titulo {
    margin: 8px 0 0;
    padding-inline: 32px;
    font-size: clamp(34px, 2.5vw, 42px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.modal-localizacao__pin {
    display: block;
    width: 30px;
    height: 30px;
    margin: 18px auto 0;
    fill: none;
    stroke: var(--laranja);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modal-localizacao__endereco {
    margin: 10px 0 0;
    font-family: var(--fonte-texto);
    font-size: 17px;
    font-style: normal;
    line-height: 1.45;
}

.modal-localizacao__endereco span {
    display: block;
}

.modal-localizacao__endereco span[hidden] {
    display: none;
}

.modal-localizacao__cep {
    color: var(--off-white);
}

.modal-localizacao__texto {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--cinza-texto);
    font-family: var(--fonte-texto);
    font-size: 15px;
    line-height: 1.4;
}

.modal-localizacao__mapa {
    display: flex;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.modal-localizacao__mapa svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modal-localizacao__mapa[hidden] {
    display: none;
}

.modal-localizacao__mapa:focus-visible {
    outline: 2px solid var(--dourado-claro);
    outline-offset: 3px;
}

/* ==========================================================
   MODAL — NOSSOS ENDEREÇOS
   Todas as unidades em cartões iguais (grade 2×2 no desktop).
   Fundo escuro, borda dourada no diálogo, detalhes em laranja.
   HTML: public/index.php · Gatilho: rodapé (Legal).
========================================================== */

.site-modal--enderecos .site-modal__dialog {
    width: min(100%, 820px);
    border-color: var(--dourado-borda);
}

.modal-enderecos__header {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    padding: 26px 28px 18px;
    border-bottom: 0;
}

.modal-enderecos__icone {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    fill: var(--laranja);
}

.modal-enderecos__furo {
    fill: #0b0b0b;
}

.modal-enderecos__cabecalho {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

.site-modal--enderecos .site-modal__titulo {
    font-size: clamp(30px, 2.3vw, 38px);
}

.modal-enderecos__descricao {
    margin: 6px 0 0;
    color: var(--off-white);
    font-family: var(--fonte-texto);
    font-size: 17px;
    line-height: 1.35;
}

.site-modal--enderecos .site-modal__fechar {
    margin: -6px -8px 0 auto;
    border-color: transparent;
}

.site-modal--enderecos .site-modal__body {
    padding: 4px 28px 28px;
}

.modal-enderecos__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cartão: pin · (cidade + endereço) e, embaixo, o botão do mapa.
   1fr na 1ª linha alinha os botões na base de cartões vizinhos. */
.modal-enderecos__unidade {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 14px;
    row-gap: 18px;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: #111111;
}

.modal-enderecos__pin {
    width: 28px;
    height: 28px;
    fill: var(--laranja);
}

.modal-enderecos__info {
    min-width: 0;
}

.modal-enderecos__cidade {
    margin: 0;
    color: var(--branco);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.modal-enderecos__endereco {
    margin: 8px 0 0;
    color: var(--off-white);
    font-family: var(--fonte-texto);
    font-size: 16px;
    font-style: normal;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.modal-enderecos__endereco span {
    display: block;
}

/* Botão do mapa: contorno laranja, ícone de mapa · texto · seta. */
.modal-enderecos__mapa {
    grid-column: 1 / -1;
    align-self: end;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 16px;
    border: 1.5px solid var(--laranja);
    border-radius: 9px;
    color: var(--branco);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.modal-enderecos__mapa svg {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modal-enderecos__mapa-icone {
    width: 20px;
    height: 20px;
    stroke: var(--laranja);
    stroke-width: 1.8;
}

.modal-enderecos__mapa-seta {
    width: 14px;
    height: 14px;
    stroke: var(--laranja);
    stroke-width: 2.2;
    transition: transform 160ms ease;
}

.modal-enderecos__mapa:focus-visible {
    outline: 2px solid var(--dourado-claro);
    outline-offset: 3px;
}

@media (hover: hover) {
    .modal-enderecos__mapa:hover {
        border-color: var(--laranja-claro);
        background-color: rgba(255, 156, 0, 0.08);
        color: var(--laranja-claro);
    }

    .modal-enderecos__mapa:hover .modal-enderecos__mapa-seta {
        transform: translateX(2px);
    }
}

/* ==========================================================
   MODAL — CONTRATOS
   Ajustes específicos da listagem e visualização de PDFs.
   .is-visualizando (site.js) amplia o diálogo para o PDF.
========================================================== */

.site-modal--contratos.is-visualizando .site-modal__dialog {
    width: min(100%, 1100px);
    height: min(100%, 880px);
}

/* Lista de contratos */

.contratos-lista[hidden],
.contratos-visualizador[hidden] {
    display: none;
}

.contratos-lista__itens {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contratos-lista__item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: #121110;
    color: var(--off-white);
    font-family: var(--fonte-texto);
    font-size: 16px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.contratos-lista__icone {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--dourado);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contratos-lista__tipo {
    padding: 4px 8px;
    border: 1px solid var(--dourado-borda);
    border-radius: 6px;
    color: var(--dourado-claro);
    font-family: var(--fonte-principal);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.contratos-lista__item:focus-visible {
    border-color: var(--laranja);
}

@media (hover: hover) {
    .contratos-lista__item:hover {
        border-color: var(--dourado-borda);
        background: #1a1714;
    }
}

.contratos-lista__vazio {
    margin: 0;
    color: var(--cinza-texto);
    font-family: var(--fonte-texto);
}

/* Visualizador do contrato */

.contratos-visualizador {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.contratos-visualizador__voltar {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--laranja);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.contratos-visualizador__voltar svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contratos-visualizador__titulo {
    margin: 0;
    font-size: clamp(19px, 1.3vw, 23px);
    font-weight: 700;
    line-height: 1.2;
}

.contratos-visualizador__titulo:focus {
    outline: none;
}

.contratos-visualizador__documento {
    flex: 1 1 auto;
    min-height: 320px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: #1c1c1c;
}

.contratos-visualizador__pdf {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================
   ACESSIBILIDADE
========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--laranja);
    outline-offset: 4px;
}

/* ==========================================================
   RESPONSIVIDADE
   Os overrides ficam em css/tablet.css e css/mobile.css,
   carregados nessa ordem depois deste arquivo.
========================================================== */

/* ==========================================================
   CONSENTIMENTO DE COOKIES — AVISO E PREFERÊNCIAS
   HTML: includes/footer.php · Comportamento: public/js/site.js
   Aviso fixo no rodapé da tela, sem fundo escurecido (não bloqueia
   a navegação). Fica abaixo dos modais (z-index 1000).
   "Rejeitar opcionais" e "Aceitar todos" têm o mesmo destaque.
========================================================== */

.cookie-aviso {
    position: fixed;
    right: 0;
    bottom: clamp(12px, 2vw, 24px);
    left: 0;
    z-index: 900;
    width: min(calc(100% - 32px), 840px);
    margin-inline: auto;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: #0e0e0e;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    color: var(--branco);
}

.cookie-aviso[hidden] {
    display: none;
}

.cookie-aviso__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
}

.cookie-aviso__icone {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--laranja);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cookie-aviso__texto {
    margin: 10px 0 0;
    color: var(--off-white);
    font-family: var(--fonte-texto);
    font-size: 16px;
    line-height: 1.5;
}

.cookie-aviso__link {
    display: inline-block;
    color: var(--branco);
    font-family: var(--fonte-texto);
    text-decoration: underline;
    text-decoration-color: var(--laranja);
    text-underline-offset: 3px;
}

.cookie-aviso__texto .cookie-aviso__link {
    margin-left: 4px;
}

.cookie-aviso__link:focus-visible {
    outline: 2px solid var(--dourado-claro);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (hover: hover) {
    .cookie-aviso__link:hover {
        color: var(--laranja);
    }
}

.cookie-aviso__acoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

/* Botões do consentimento (aviso e modal). */
.cookie-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 6px 14px;
    border: 1px solid var(--laranja);
    border-radius: 9px;
    font-family: var(--fonte-principal);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cookie-botao--decisao {
    background: var(--laranja);
    color: var(--preto);
}

.cookie-botao--secundario {
    border-color: rgba(255, 255, 255, 0.32);
    background: transparent;
    color: var(--branco);
}

.cookie-botao:focus-visible {
    outline: 2px solid var(--dourado-claro);
    outline-offset: 3px;
}

@media (hover: hover) {
    .cookie-botao--decisao:hover {
        border-color: var(--laranja-claro);
        background: var(--laranja-claro);
    }

    .cookie-botao--secundario:hover {
        border-color: var(--laranja);
        color: var(--laranja);
    }
}

/* Modal de preferências (base .site-modal). */
.site-modal--cookies .site-modal__dialog {
    width: min(100%, 600px);
}

.modal-cookies__descricao {
    margin: 0;
    color: var(--off-white);
    font-family: var(--fonte-texto);
    font-size: 16px;
    line-height: 1.5;
}

.modal-cookies__categorias {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.modal-cookies__categoria {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: #111111;
}

.modal-cookies__info {
    min-width: 0;
}

.modal-cookies__nome {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
}

.modal-cookies__texto {
    margin: 4px 0 0;
    color: var(--cinza-texto);
    font-family: var(--fonte-texto);
    font-size: 15px;
    line-height: 1.45;
}

.modal-cookies__fixo {
    color: var(--laranja);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

/* Chave liga/desliga: checkbox nativo (role="switch"), desmarcado
   por padrão; marcado = laranja. */
.modal-cookies__chave {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 28px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: #2a2a2a;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.modal-cookies__chave::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--branco);
    transition: transform 160ms ease;
}

.modal-cookies__chave:checked {
    border-color: var(--laranja);
    background: var(--laranja);
}

.modal-cookies__chave:checked::before {
    transform: translateX(20px);
}

.modal-cookies__chave:focus-visible {
    outline: 2px solid var(--dourado-claro);
    outline-offset: 3px;
}

.modal-cookies__acoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.modal-cookies__salvar {
    grid-column: 1 / -1;
}

/* ==========================================================
   ACESSIBILIDADE / MOVIMENTO REDUZIDO
========================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}