/* ==========================================================
   SITE CONEX INTERNET — MOBILE

   Faixa:
   até 600px.

   Este arquivo contém somente overrides específicos para
   celulares.

   Base:
   public/css/web.css
   ========================================================== */

@media (max-width: 600px) {
    /* EIXO LATERAL MOBILE: 20px em todas as seções (cabeçalho,
       Sobre a Conex, Área de Cobertura e rodapé), sem variar com a
       largura do aparelho. */
    :root {
        --topo-margem: 20px;
        --eixo-lateral: 20px;
    }

    body {
        font-size: 16px;
    }

    /* ==========================================================
       HOME — CABEÇALHO
       Logo e, abaixo, uma linha: [WhatsApp] [Assine agora] [Já sou cliente].
       ========================================================== */

    .home-topo {
        height: auto;
    }

    .home-topo__container {
        /* Ajustes independentes do robô no celular.
           Faixa: mesma altura de .home-video--com-video (mobile).
           Largura: tamanho do robô, proporcional à faixa (1,1× ≈ 62% da tela).
           Centro: eixo horizontal (% da largura da tela) — à direita.
           Sobra: quanto o robô começa acima do vídeo (cabeça logo abaixo dos botões).
           Topo: início da janela do robô. */
        --mascote-mobile-faixa: clamp(160px, 56.25vw, 240px);
        --mascote-mobile-largura: calc(var(--mascote-mobile-faixa) * 1.1);
        --mascote-mobile-centro: 78%;
        --mascote-mobile-sobra: calc(var(--mascote-mobile-largura) * 0.08);
        --mascote-mobile-direita: calc(-1 * var(--topo-margem));
        --mascote-mobile-topo: calc(100% - var(--mascote-mobile-sobra));

        --mascote-largura: var(--mascote-mobile-largura);
        --mascote-direita: var(--mascote-mobile-direita);
        --mascote-topo: var(--mascote-mobile-topo);

        height: auto;
        padding-block: 20px 20px;
        /* Linha 1: logo central · Linha 2: WhatsApp + botões. */
        grid-template-areas:
            "marca"
            "botoes";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        justify-items: center;
        gap: 10px;
    }

    /* ==========================================================
       HOME — LOGO MOBILE
       O arquivo conex-logo-principal.webp é quadrado (1080×1080) e a
       arte ocupa só a faixa central (x 59–1021, y 414–759).
       Margens negativas recolhem a área transparente, para que o
       espaço do topo seja o da arte, e não o do quadrado.
       ========================================================== */

    .home-topo__marca {
        --logo-mobile-arte: clamp(180px, 53vw, 240px);
        --logo-mobile-img: calc(var(--logo-mobile-arte) / 0.8907);

        z-index: 4;
        margin-bottom: 11px;
        /* A área transparente inferior do logo (margem negativa) cobre a
           linha de ações; o logo não é link, então não captura toques. */
        pointer-events: none;
    }

    .home-topo__marca img {
        flex: 0 0 auto;
        width: var(--logo-mobile-img);
        max-width: none;
        margin:
            calc(var(--logo-mobile-img) * -0.3833)
            calc(var(--logo-mobile-img) * -0.0546)
            calc(var(--logo-mobile-img) * -0.2972);
    }

    /* ==========================================================
       HOME — LINHA DE AÇÕES MOBILE
       .home-topo__acoes vira a linha (flex) e .home-topo__botoes deixa
       de gerar caixa: WhatsApp e os dois botões passam a ser irmãos,
       com o mesmo gap e a mesma altura (align-items: stretch).
       WhatsApp: quadrado (altura = largura); botões dividem o resto.
       ========================================================== */

    .home-topo__acoes {
        --topo-acao-altura: 46px;

        grid-area: botoes;
        justify-self: center;
        z-index: 4;
        width: min(100%, 420px);
        flex-direction: row;
        align-items: stretch;
        gap: clamp(6px, 2vw, 10px);
    }

    .home-topo__botoes {
        display: contents;
    }

    .home-topo__acao {
        flex: 1 1 0;
        min-width: 0;
        min-height: var(--topo-acao-altura);
        padding-inline: clamp(7px, 2.3vw, 10px);
        gap: clamp(5px, 1.5vw, 7px);
        font-size: clamp(15px, 4.2vw, 17px);
    }

    .home-topo__icone {
        width: 16px;
        height: 16px;
    }

    /* ==========================================================
       HOME — WHATSAPP MOBILE
       Primeiro item da linha, só o ícone, com o mesmo acabamento dos
       botões (borda, raio e fundo de .home-topo__acao).
       O número fica oculto visualmente; href e aria-label permanecem.
       ========================================================== */

    .home-topo__contato {
        order: -1;
        flex: 0 0 var(--topo-acao-altura);
        width: var(--topo-acao-altura);
        min-height: var(--topo-acao-altura);
        padding: 0;
        justify-content: center;
        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);
    }

    .home-topo__contato strong {
        display: none;
    }

    .home-topo__whatsapp {
        width: 26px;
        height: 26px;
    }

    /* ==========================================================
       HOME — MASCOTE / ROBÔ
       Robô grande sobre o vídeo. O wrapper vira uma "janela" do
       tamanho da faixa do vídeo, de borda a borda da tela, com
       overflow: hidden: o robô fica à direita, com a mão direita
       cortada na borda da tela e a base cortada no fim do vídeo,
       sem criar rolagem horizontal e sem cobrir a seção seguinte.
       ========================================================== */

    .home-topo__mascote {
        top: var(--mascote-mobile-topo);
        right: var(--mascote-mobile-direita);
        left: var(--mascote-mobile-direita);
        width: auto;
        height: calc(var(--mascote-mobile-faixa) + var(--mascote-mobile-sobra));
        overflow: hidden;
    }

    .home-topo__mascote img {
        position: absolute;
        top: 0;
        left: calc(var(--mascote-mobile-centro) - (var(--mascote-mobile-largura) / 2));
        width: var(--mascote-mobile-largura);
        max-width: none;
    }

    /* ==========================================================
       HOME — VÍDEO INSTITUCIONAL
       Mantém a faixa mobile e o funcionamento definido no HTML.
       ========================================================== */

    .home-video {
        height: clamp(140px, 38vw, 170px);
    }

    .home-video--com-video {
        height: clamp(160px, 56.25vw, 240px);
    }

    /* ==========================================================
       HOME — SOBRE A CONEX / DEMAIS SEÇÕES
       Consolidação do resultado efetivo dos overrides antigos.
       ========================================================== */

    .experiencia {
        --exp-margem: var(--eixo-lateral);

        padding-block: clamp(36px, 10vw, 48px) clamp(16px, 5vw, 24px);
    }

    .experiencia__container {
        margin-inline: var(--exp-margem);
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(32px, 5vw, 44px);
    }

    /* SOBRE A CONEX: empilhado; linha sob os textos e card fechado. */
    .experiencia__principal {
        margin-right: 0;
        padding-right: 0;
        padding-bottom: 24px;
    }

    .experiencia__principal::before,
    .experiencia__textos::before {
        display: none;
    }

    .experiencia__rotulo {
        margin-bottom: 14px;
        font-size: 12px;
    }

    .experiencia__rotulo::before {
        width: 28px;
    }

    .experiencia__titulo {
        font-size: clamp(30px, 8.6vw, 38px);
        line-height: 1.08;
    }

    .experiencia__titulo span {
        white-space: normal;
    }

    .experiencia__textos {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 14px;
        column-gap: 36px;
    }

    .experiencia__textos p,
    .experiencia__assinatura {
        font-size: 17px;
        line-height: 1.5;
    }

    .experiencia__assinatura {
        margin-top: 22px;
    }

    .app-card {
        width: 100%;
        justify-self: center;
        margin: 0;
        padding: 26px 20px 28px;
        border: 1px solid var(--exp-linha);
        border-radius: var(--exp-raio);
    }

    .app-card::before,
    .app-card::after {
        display: none;
    }

    .app-card h2 {
        font-size: clamp(34px, 10vw, 40px);
    }

    .app-card__botao {
        min-height: 54px;
    }

    /* ==========================================================
       HOME — ÁREA DE COBERTURA — MOBILE
       Referência aprovada (vertical): céu do pôr do sol no topo,
       Wi-Fi sobre a cidade, rótulo + cidades grandes à esquerda e a
       bola Conex grande, centralizada, cortada pela base da seção.
       Medidas em vw (proporcionais à tela), com limites por clamp().
       ========================================================== */

    .cobertura,
    .cobertura__container {
        min-height: clamp(560px, 160vw, 820px);
    }

    .cobertura__container {
        --cobertura-margem: var(--eixo-lateral);

        align-items: flex-start;
        /* Texto começa abaixo do céu e dos Wi-Fi (~56% da largura). */
        padding-block: clamp(200px, 56vw, 300px) 0;
    }

    .cobertura__conteudo {
        max-width: none;
    }

    /* Foto ocupa a altura toda: o céu iluminado aparece no topo e o
       recorte horizontal prioriza o pôr do sol e a avenida central. */
    .cobertura__fundo {
        object-position: 70% center;
    }

    /* Sombra mais leve que antes: preserva o horizonte claro e escurece
       só o necessário atrás do texto e na base. */
    .cobertura__sombra {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.85) 0%,
                rgba(0, 0, 0, 0) 10%,
                rgba(0, 0, 0, 0) 30%,
                rgba(0, 0, 0, 0.35) 55%,
                rgba(0, 0, 0, 0.45) 100%
            ),
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.25) 60%,
                rgba(0, 0, 0, 0.1) 100%
            );
    }

    .cobertura__rotulo {
        margin-bottom: clamp(8px, 2.6vw, 14px);
        font-size: clamp(36px, 11.2vw, 56px);
    }

    .cobertura__cidades li {
        font-size: clamp(40px, 12.75vw, 64px);
        line-height: 1;
    }

    /* Wi-Fi: três pontos sobre a cidade, abaixo do céu (22% da seção). */
    .cobertura__wifi-icone {
        --wifi-tamanho: clamp(24px, 7.5vw, 36px);

        top: 22%;
    }

    .cobertura__wifi-icone--1 {
        left: 18%;
    }

    .cobertura__wifi-icone--2 {
        --wifi-tamanho: clamp(30px, 9.3vw, 44px);

        left: 50%;
        top: 21.5%;
    }

    .cobertura__wifi-icone--3 {
        left: 83%;
    }

    /* Bola grande (~98% da largura), centralizada, sólida; 60% fica
       abaixo da borda da seção (cortada pelo overflow). O topo encosta
       na base de CABECEIRAS-GO; o texto fica por cima (z-index 2). */
    .cobertura__simbolo {
        --cobertura-bola: min(98vw, 520px);

        right: auto;
        left: 50%;
        bottom: calc(var(--cobertura-bola) * -0.6);
        transform: translateX(-50%);
    }

    /* HOME — TRANSIÇÃO COBERTURA / IMAGEM — MOBILE */
    .estrutura-conex {
        --transicao-faixa: 6px;
    }

    .estrutura-conex img {
        height: clamp(240px, 68vw, 330px);
        object-position: 72% center;
    }

    /* RODAPÉ: blocos empilhados, separados por linhas horizontais. */
    .rodape__container {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 34px;
    }

    .rodape__coluna + .rodape__coluna,
    .rodape__coluna--marca {
        padding: 0 0 24px;
        border-left: 0;
    }

    .rodape__coluna + .rodape__coluna {
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .rodape__coluna:last-child {
        padding-bottom: 0;
    }

    /* Bloco CONEX: só a logo centralizada; a frase segue à esquerda.
       As margens laterais da logo ficam simétricas para a arte ficar
       no centro real. */
    .rodape__coluna--marca {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .rodape__logo {
        margin-inline: calc(var(--rodape-logo-img) * -0.0546);
    }

    .rodape__frase {
        align-self: flex-start;
        text-align: left;
    }

    .rodape__link {
        max-width: none;
        min-height: 44px;
    }

    /* Acessos em 2 colunas também no celular; sem a seta para caber. */
    .rodape__lista--colunas {
        column-gap: 16px;
    }

    .rodape__lista--colunas .rodape__link {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .rodape__lista--colunas .rodape__seta {
        display: none;
    }

    /* ==========================================================
       MODAIS — MOBILE
       Praticamente tela cheia; ações em grade; sem scroll lateral.
       ========================================================== */

    .site-modal {
        padding: 0;
    }

    .site-modal__dialog,
    .site-modal--contratos.is-visualizando .site-modal__dialog {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .site-modal__header {
        padding: 14px 16px;
    }

    .site-modal__titulo {
        font-size: 24px;
    }

    .site-modal__body {
        padding: 16px;
    }

    .site-modal__footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-modal__acao {
        padding: 0 10px;
        font-size: 16px;
        text-align: center;
    }

    .site-modal__acao--fechar {
        grid-column: 1 / -1;
    }

    .contratos-lista__item {
        gap: 12px;
        padding: 12px 14px;
        font-size: 15px;
    }

    .contratos-visualizador__titulo {
        font-size: 18px;
    }

    .contratos-visualizador__documento {
        min-height: 240px;
    }

    /* ==========================================================
       MODAL CONTRATOS — MOBILE (LISTA)
       Na lista, mesmo cartão compacto do modal aplicativo: altura
       pelo conteúdo, centralizado, margens laterais. Ao abrir um PDF
       (.is-visualizando) volta ao tela-cheia da base, para o documento.
       ========================================================== */

    .site-modal--contratos:not(.is-visualizando) {
        padding: 16px;
    }

    .site-modal--contratos:not(.is-visualizando) .site-modal__dialog {
        width: 100%;
        max-width: 400px;
        height: auto;
        max-height: 100%;
        border: 1px solid rgba(229, 227, 212, 0.22);
        border-radius: 16px;
    }

    /* ==========================================================
       MODAL APLICATIVO — MOBILE
       Cartão compacto (altura pelo conteúdo), centralizado, com
       margens laterais. Desfaz só para este modal o tela-cheia da
       base mobile; o modal de contratos segue em tela cheia.
       ========================================================== */

    .site-modal--aplicativo {
        padding: 16px;
    }

    .site-modal--aplicativo .site-modal__dialog {
        width: 100%;
        max-width: 400px;
        height: auto;
        max-height: 100%;
        overflow-y: auto;
        padding: 24px 18px 20px;
        border: 1px solid rgba(229, 227, 212, 0.22);
        border-radius: 16px;
    }

    .site-modal--aplicativo .site-modal__fechar {
        top: 8px;
        right: 8px;
    }

    .modal-aplicativo__titulo {
        padding-inline: 30px;
        font-size: 25px;
    }

    .modal-aplicativo__descricao {
        margin-top: 6px;
        font-size: 15px;
    }

    /* Badges empilhados, menores e centralizados (proporção 3:1). */
    .modal-aplicativo__lojas {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        width: min(100%, 300px);
        margin: 18px auto 0;
    }

    .modal-aplicativo__rodape {
        margin-top: 16px;
        padding-top: 16px;
    }

    /* ==========================================================
       MODAL LOCALIZAÇÃO — MOBILE
       Mesmo cartão do desktop, ~90% da largura da tela, altura pelo
       conteúdo e centralizado. Desfaz só para este modal o
       tela-cheia da base mobile.
       ========================================================== */

    .site-modal--localizacao {
        padding: 5vw;
    }

    .site-modal--localizacao .site-modal__dialog {
        width: 100%;
        max-width: 400px;
        height: auto;
        max-height: 100%;
        overflow-y: auto;
        padding: 30px 18px 20px;
        border: 1px solid var(--dourado-borda);
        border-radius: 16px;
    }

    .site-modal--localizacao .site-modal__fechar {
        top: 8px;
        right: 8px;
    }

    .modal-localizacao__rotulo {
        font-size: 14px;
    }

    .modal-localizacao__titulo {
        padding-inline: 34px;
        font-size: clamp(30px, 8.6vw, 36px);
    }

    .modal-localizacao__endereco {
        font-size: 16px;
    }

    .modal-localizacao__texto {
        margin-top: 16px;
        padding-top: 14px;
        font-size: 14px;
    }

    .modal-localizacao__mapa {
        min-height: 50px;
        margin-top: 18px;
        padding-inline: 12px;
        font-size: 16px;
    }

    /* ==========================================================
       MODAL NOSSOS ENDEREÇOS — MOBILE
       Cartão com margens laterais (não tela cheia), altura pelo
       conteúdo e rolagem interna; unidades empilhadas.
       ========================================================== */

    .site-modal--enderecos {
        padding: 16px;
    }

    .site-modal--enderecos .site-modal__dialog {
        width: 100%;
        max-width: 440px;
        height: auto;
        max-height: 100%;
        border: 1px solid var(--dourado-borda);
        border-radius: 16px;
    }

    .modal-enderecos__header {
        gap: 12px;
        padding: 18px 14px 12px 16px;
    }

    .modal-enderecos__icone {
        width: 38px;
        height: 38px;
    }

    .site-modal--enderecos .site-modal__titulo {
        font-size: 27px;
    }

    .modal-enderecos__descricao {
        margin-top: 4px;
        font-size: 15px;
    }

    .site-modal--enderecos .site-modal__fechar {
        width: 40px;
        height: 40px;
        margin: -8px -6px 0 auto;
    }

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

    .modal-enderecos__lista {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .modal-enderecos__unidade {
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 14px;
        padding: 16px 14px;
    }

    .modal-enderecos__pin {
        width: 24px;
        height: 24px;
    }

    .modal-enderecos__cidade {
        font-size: 22px;
    }

    .modal-enderecos__endereco {
        margin-top: 6px;
        font-size: 15px;
    }

    .modal-enderecos__mapa {
        grid-template-columns: 18px minmax(0, 1fr) 12px;
        gap: 10px;
        min-height: 46px;
        padding: 6px 12px;
        font-size: 15px;
        letter-spacing: 0.02em;
    }

    .modal-enderecos__mapa-icone {
        width: 18px;
        height: 18px;
    }

    .modal-enderecos__mapa-seta {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 400px) {
    .home-topo__acoes {
        gap: 6px;
    }

    .home-topo__acao {
        padding-inline: 7px;
        gap: 5px;
        font-size: 15px;
    }
}

/* ==========================================================
   CONSENTIMENTO DE COOKIES — MOBILE
   Aviso com margens de 12px, texto menor e ações em duas linhas:
   [Rejeitar opcionais] [Aceitar todos] · [Personalizar].
   Modal de preferências como cartão (não tela cheia).
   ========================================================== */

@media (max-width: 600px) {
    .cookie-aviso {
        bottom: 12px;
        width: calc(100% - 24px);
        max-height: calc(100% - 24px);
        overflow-y: auto;
        padding: 16px;
        border-radius: 12px;
    }

    .cookie-aviso__titulo {
        font-size: 20px;
    }

    .cookie-aviso__texto {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.45;
    }

    .cookie-aviso__acoes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

    .cookie-aviso__acoes .cookie-botao--secundario {
        grid-column: 1 / -1;
        order: 3;
    }

    .cookie-aviso__acoes .cookie-botao {
        min-height: 44px;
        padding-inline: 8px;
        font-size: 16px;
    }

    .site-modal--cookies {
        padding: 16px;
    }

    .site-modal--cookies .site-modal__dialog {
        width: 100%;
        max-width: 440px;
        height: auto;
        max-height: 100%;
        border: 1px solid rgba(229, 227, 212, 0.22);
        border-radius: 16px;
    }

    .modal-cookies__descricao {
        font-size: 15px;
    }

    .modal-cookies__categoria {
        gap: 12px;
        padding: 12px 14px;
    }

    .modal-cookies__nome {
        font-size: 19px;
    }

    .modal-cookies__texto {
        font-size: 14px;
    }

    .modal-cookies__acoes {
        display: grid;
        gap: 8px;
        margin-top: 16px;
    }

    .modal-cookies__acoes .cookie-botao {
        padding-inline: 8px;
        font-size: 16px;
    }
}