/* ==========================================================================
   Sistema de design — Led Mídia
   Camada de correção carregada DEPOIS de main.css.

   Por que uma camada separada: main.css tem 58 KB escritos ao longo de meses,
   sem tokens de escala. Reescrever tudo de uma vez num site com tráfego pago
   rodando é risco sem necessidade. Esta camada instala o sistema por cima e
   pode ser removida em um comando se algo sair errado — basta tirar o enqueue.

   Direção: minimalista premium. A regra que governa tudo aqui é subtração.
   O que faz uma página parecer cara não é adicionar efeito, é remover ruído
   e deixar espaço. Peso de fonte, brilho e cor de destaque são orçamento
   limitado: gastar em tudo é não gastar em nada.
   ========================================================================== */

:root {
    /* --- Escala de espaçamento, base 8 -------------------------------- */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;
    --space-8: 128px;

    /* --- Ritmo vertical ------------------------------------------------ */
    --secao-y: 128px;          /* respiro entre seções no desktop */
    --secao-y-mobile: 88px;

    /* --- Tipografia ----------------------------------------------------
       Uma família só. Montserrat era declarada mas nunca carregada, então o
       título caía para a fonte de sistema; Poppins era carregada e nunca
       usada. Inter resolve as duas pontas e já está no ar. */
    --myl-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --texto-xs: 0.8125rem;     /* 13px */
    --texto-sm: 0.9375rem;     /* 15px */
    --texto-md: 1.0625rem;     /* 17px — corpo */
    --texto-lg: 1.25rem;       /* 20px — apoio do hero */
    --texto-xl: 1.75rem;       /* 28px */
    --texto-2xl: 2.5rem;       /* 40px */
    --texto-3xl: 4rem;         /* 64px — display */

    /* --- Peso máximo 600 ------------------------------------------------
       900 grita. Autoridade vem do tamanho e do espaço, não da gordura. */
    --peso-normal: 400;
    --peso-medio: 500;
    --peso-forte: 600;
}

/* ==========================================================================
   1. Tipografia
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--myl-font-display);
    font-weight: var(--peso-forte);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

h1 {
    font-size: clamp(2.5rem, 5vw, var(--texto-3xl));
    font-weight: var(--peso-forte);
    letter-spacing: -0.03em;
}

h2 { font-size: clamp(1.875rem, 3.4vw, var(--texto-2xl)); }
h3 { font-size: var(--texto-xl); }

body {
    font-size: var(--texto-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* O H1 do hero carregava fonte monoespaçada (herança do efeito de máquina de
   escrever), brilho vermelho e duas animações simultâneas. Tudo isso some:
   é o elemento mais importante da página e precisa estar legível no primeiro
   frame, sem espetáculo. */
.myl-typewriter__text {
    font-family: var(--myl-font-display);
    letter-spacing: -0.03em;
}

/* Especificidade: main.css define `.myl-hero__content h1` (0,1,1) e ainda
   reduz o tamanho dentro de media query. Um seletor `h1` solto (0,0,1) perde
   dessas duas, então a correção de tamanho precisa casar a especificidade. */
.myl-hero__content h1,
.myl-page-hero h1 {
    text-shadow: none;
    animation: none;
    display: block;
    font-size: clamp(2.5rem, 5vw, var(--texto-3xl));
    font-weight: var(--peso-forte);
    letter-spacing: -0.03em;
    line-height: 1.05;
    max-width: 18ch;
}

.myl-typewriter__cursor { display: none; }

.myl-hero__lead {
    font-size: var(--texto-lg);
    line-height: 1.55;
    max-width: 34ch;          /* linha curta lê mais rápido */
    color: var(--myl-gray-200);
}

/* ==========================================================================
   2. Cor: vermelho é reservado para ação
   --------------------------------------------------------------------------
   O destaque estava em sobretítulo, número, seta, check, losango, "+" do FAQ
   e botão ao mesmo tempo. Quando tudo é destaque, nada é. A partir daqui o
   vermelho aparece em botão primário e em foco de teclado — e nada mais.
   ========================================================================== */

.myl-kicker {
    color: var(--myl-gray-400);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--space-3);
}

/* Caixa alta só funciona em rótulo curto. O sobretítulo do hero tem 11
   palavras e ocupava duas linhas gritando — vira frase normal. */
.myl-hero__content .myl-kicker {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: var(--texto-sm);
    max-width: 46ch;
}

.myl-steps__num,
.myl-num,
.myl-step__num {
    color: var(--myl-gray-400);
}

/* ==========================================================================
   3. Ritmo vertical
   ========================================================================== */

.myl-section { padding: var(--secao-y) 0; }

.myl-section__lead {
    font-size: var(--texto-lg);
    line-height: 1.6;
    max-width: 58ch;
    margin-top: var(--space-2);
}

.myl-cards-grid { gap: var(--space-3); margin-top: var(--space-6); }

/* ==========================================================================
   4. Menos portas para a mesma ação
   --------------------------------------------------------------------------
   "Solicitar orçamento" aparecia 3x e "WhatsApp" 2x numa tela de celular.
   Um header tem no máximo uma ação; o resto é navegação.
   ========================================================================== */

.myl-header__actions .myl-btn--ghost { display: none; }

/* A tarja rolante de segmentos repete, pior, o que a seção "Cada evento
   merece um painel à altura" já diz. Ninguém lê lista que anda. */
.myl-services-ticker { display: none; }

/* ==========================================================================
   4b. Hero
   --------------------------------------------------------------------------
   O grid do hero tem duas colunas e a da direita está vazia — metade da
   primeira dobra é espaço morto enquanto o título se espreme em 6 linhas.
   Até existir imagem ali, uma coluna só é melhor uso do espaço.
   ========================================================================== */

.myl-hero__grid { grid-template-columns: 1fr; }

.myl-hero__content { max-width: 940px; }

.myl-hero__content h1 { max-width: 820px; }   /* ~3 linhas em 64px */

.myl-hero__content .myl-hero__lead { max-width: 52ch; }

.myl-hero__proof {
    font-size: var(--texto-sm);
    color: var(--myl-gray-400);
    max-width: 62ch;
    margin-top: var(--space-4);
}

/* O slot do mapa na ficha do local usa `:empty::after` para mostrar "Cole aqui
   o código de incorporação do Google Maps". É uma instrução de editor — e ela
   aparece para qualquer visitante, porque nenhuma das 20 páginas de local tem
   mapa preenchido. Some para o público; segue visível para quem está logado,
   que é justamente quem pode resolver. */
.myl-loc-map-slot:empty { display: none; }

body.logged-in .myl-loc-map-slot:empty { display: block; }

/* ==========================================================================
   4c. Links internos
   --------------------------------------------------------------------------
   A grade "Outros locais atendidos" e a faixa de cidades no rodapé agora são
   preenchidas no servidor. Discretas de propósito: servem para o visitante
   que quer navegar e para distribuir autoridade entre as 29 páginas que
   estavam órfãs — não para competir com o conteúdo.
   ========================================================================== */

.myl-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.myl-related-card {
    display: block;
    padding: 14px 18px;
    border: 1px solid var(--myl-gray-200);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    font-size: var(--texto-sm);
    transition: border-color 0.18s ease;
}

.myl-related-card:hover { border-color: var(--myl-gray-400); }

.myl-cidades-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-4) 0;
    background: var(--myl-navy-900);
}

.myl-cidades-footer__rotulo {
    display: block;
    font-size: var(--texto-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--myl-gray-400);
    margin-bottom: var(--space-2);
}

.myl-cidades-footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.myl-cidades-footer a {
    color: var(--myl-gray-200);
    font-size: var(--texto-sm);
    text-decoration: none;
}

.myl-cidades-footer a:hover { color: var(--myl-white); }

@media (max-width: 640px) {
    .myl-related-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   5. Botões
   ========================================================================== */

.myl-btn {
    font-weight: var(--peso-medio);
    letter-spacing: 0;
    border-radius: 999px;
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.myl-btn:active { transform: scale(0.985); }

.myl-btn--lg {
    padding: 16px 32px;
    font-size: var(--texto-md);
}

/* Foco visível: acessibilidade não é opcional e o vermelho serve aqui. */
a:focus-visible,
button:focus-visible,
.myl-btn:focus-visible {
    outline: 2px solid var(--myl-red-500);
    outline-offset: 3px;
}

/* ==========================================================================
   6. Mobile
   ========================================================================== */

@media (max-width: 1024px) {
    .myl-section { padding: var(--secao-y-mobile) 0; }
    .myl-hero__lead { max-width: none; }
}

@media (max-width: 640px) {
    h1 { font-size: clamp(2rem, 8vw, 2.75rem); }

    /* main.css trava `h1 { font-size: 1.2rem !important }` dentro deste mesmo
       breakpoint — 19,2px, quase o tamanho do texto corrido. O título principal
       no celular ficava menor que um subtítulo. Só !important vence !important;
       daí a repetição aqui, que some quando a regra original for removida. */
    h1 {
        font-size: clamp(2rem, 8vw, 2.5rem) !important;
        line-height: 1.1 !important;
    }

    .myl-hero__content h1,
    .myl-page-hero h1 {
        font-size: clamp(2rem, 8vw, 2.5rem) !important;
        line-height: 1.08 !important;
        max-width: none;
    }

    /* A barra inferior tinha 4 itens: dois de navegação (Home, Serviços) que
       já existem no menu, e dois de conversão. Os de navegação saem — ficam
       as duas ações, com menos peso visual. */
    .myl-mobile-tabbar__item:nth-child(1),
    .myl-mobile-tabbar__item:nth-child(3) { display: none; }

    /* Com dois itens no lugar de quatro, o flex precisa recentralizar —
       senão sobra um buraco onde estavam Home e Serviços. */
    .myl-mobile-tabbar {
        justify-content: center;
        gap: var(--space-7);
    }

    /* Bolha flutuante e barra fixa competiam pelo mesmo polegar. */
    .myl-whatsapp-float { display: none; }
}

/* ==========================================================================
   7. Movimento
   --------------------------------------------------------------------------
   Animação de entrada enriquece; nunca esconde. O estado inicial invisível
   só existe quando há JavaScript para revelar (.js no <html>), e desaparece
   por completo para quem pediu menos movimento.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .js .myl-card,
    .js .myl-typewriter__char,
    .myl-hero__content .myl-kicker,
    .myl-hero__content .myl-hero__lead,
    .myl-hero__content .myl-hero__actions,
    .myl-hero__content .myl-hero__proof {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Bloco de dados da empresa e credito de desenvolvimento no rodape. */
.myl-footer__empresa {
    padding: var(--space-3) 0 0;
    font-size: var(--texto-xs);
    line-height: 1.7;
    color: var(--myl-gray-400);
}

.myl-footer__empresa a { color: var(--myl-gray-200); text-decoration: none; }

.myl-footer__empresa a:hover { color: var(--myl-white); }

.myl-footer__dev { font-size: var(--texto-xs); color: var(--myl-gray-400); }

.myl-footer__dev a { color: var(--myl-gray-200); text-decoration: none; }

.myl-footer__dev a:hover { color: var(--myl-white); }