@charset "UTF-8";

/* ===========================================================
   TecnoLar Soluções — CSS custom (fora do Tailwind)

   PALETA — organizada em três camadas, com o BRANCO como base:

     1. Branco   #ffffff · #f6f9fd · #f4f8fd   superfície (domina a página)
     2. Azul     #004ca5 royal · #0a63cb claro · #21303c navy   estrutura
     3. Dourado  #fdc217 (tagline do logotipo)                  destaque

   O amarelo do logotipo NUNCA vira texto sobre branco no tom puro: sobre
   branco ele dá 1,6:1 e reprovaria no critério 1.4.3 da WCAG 2.2. Ele entra
   de três formas seguras — como preenchimento (com tinta escura por cima),
   como filete/gradiente decorativo, ou no tom --gold-600/--gold-800, que são
   os pisos calculados para ícone (3:1) e para texto (4,5:1) sobre o branco.
   =========================================================== */

:root {
  --gold-50:  #fffaeb;
  --gold-100: #fff2c9;
  --gold-200: #ffe49a;
  --gold-300: #ffd45c;
  --gold-400: #fdc217; /* amarelo do logotipo — só preenchimento/filete */
  --gold-500: #e5a400;
  --gold-600: #b8860b; /* piso de ícone sobre branco — 3,25:1 (WCAG 1.4.11) */
  --gold-700: #96690a;
  --gold-800: #7a5200; /* piso de texto sobre branco — 6,92:1 (WCAG 1.4.3)  */
  --gold-900: #5a3c00;

  --brand-600: #004ca5;
  --brand-500: #0a63cb;
  --brand-300: #8ab8f5;
}

/* Filete azul → dourado. É a assinatura da mescla: aparece no topo do
   rodapé, do pop-up, do aviso de cookies, do cabeçalho e da barra de app. */
.tl-rule {
  background: linear-gradient(90deg,
    var(--brand-600) 0%,
    var(--brand-500) 32%,
    var(--brand-300) 56%,
    var(--gold-300)  82%,
    var(--gold-400)  100%);
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Tipografia fluida --- */
h1, h2, h3, h4 { text-wrap: balance; word-break: break-word; }
span, li, a, p { text-wrap: pretty; }

.fluid-h1 { font-size: clamp(1.5rem, 4.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; }
.fluid-h2 { font-size: clamp(1.35rem, 4vw, 2.5rem);   line-height: 1.1; letter-spacing: -0.015em; }
.fluid-p  { font-size: clamp(13px, 1.6vw, 15px);      line-height: 1.65; }

/* A partir de lg o hero vira duas colunas iguais e o H1 passa a morar dentro
   da metade da esquerda. Essa metade mede (min(vw,1280) - 112) / 2, ou seja
   456px a 1024px e 584px de 1280px em diante. A linha mais longa do título
   ("Ar-condicionado em Patos de Minas:") mede 17,4x o tamanho da fonte, então
   a fonte tem de ser <= largura/17,4: 26,2px a 1024px e 33,5px a 1280px.
   Os 2,5vw com teto de 32,8px ficam abaixo desse limite em toda a faixa — é o
   que segura o título em tres linhas sem estourar para a coluna da foto.
   Vale só no H1 do hero: os H1 de politicas e termos ocupam a largura inteira
   e continuam no tamanho cheio do clamp. */
@media (min-width: 1024px) {
  .hero-h1 { font-size: min(2.5vw, 2.05rem); }
}

/* --- SPA leve: troca de views --- */
[data-view] { display: none; opacity: 0; transition: opacity .35s ease-in-out; }
[data-view].active { display: block; opacity: 1; }

/* --- Header de vidro --- */
.glass-nav {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
/* Filete azul → dourado rente à base do cabeçalho. Fica fora do fluxo
   (absolute, left/right em 0), então não entra em nenhum cálculo de largura
   e o piso de 200px continua valendo. O <header> já é `fixed`, ou seja,
   posicionado — o ::after se ancora nele sem precisar de mais nada. */
.glass-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--brand-600) 0%,
    var(--brand-500) 32%,
    var(--brand-300) 56%,
    var(--gold-300)  82%,
    var(--gold-400)  100%);
}

/* ===========================================================
   SUPERFÍCIES CLARAS
   O site é branco por padrão. Estas camadas entram sempre como
   <div absolute inset-0 aria-hidden> DENTRO de uma seção que já
   tem bg-white — assim o cálculo de contraste do texto continua
   sendo feito contra o branco real, não contra o gradiente.
   =========================================================== */

/* Brilho suave azul sobre branco — usado no hero. O terceiro radial é o
   dourado: alfa baixíssimo (.10) e num canto oposto ao azul, só para o
   branco do hero não ler como "azul puro" depois da mescla. */
.light-glow {
  background:
    radial-gradient(68% 58% at 88% 4%,  rgba(0, 93, 195, .11) 0, transparent 64%),
    radial-gradient(52% 52% at 2% 96%,  rgba(0, 76, 165, .09) 0, transparent 62%),
    radial-gradient(44% 44% at 6% 8%,   rgba(253, 194, 23, .10) 0, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(240, 246, 253, .92) 100%);
}

/* Tinta discreta para separar seções sem sair do branco */
.light-tint {
  background:
    radial-gradient(60% 70% at 92% 0%,  rgba(0, 93, 195, .07) 0, transparent 62%),
    radial-gradient(46% 60% at 4% 100%, rgba(0, 76, 165, .05) 0, transparent 60%),
    radial-gradient(40% 50% at 4% 0%,   rgba(253, 194, 23, .07) 0, transparent 58%);
}

/* Malha técnica quase imperceptível — dá textura sem sujar o branco */
.grid-lines {
  background-image:
    linear-gradient(to right,  rgba(0, 76, 165, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 76, 165, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(78% 68% at 50% 26%, #000 0, transparent 84%);
          mask-image: radial-gradient(78% 68% at 50% 26%, #000 0, transparent 84%);
}

/* Cartão branco elevado (substitui os blocos translúcidos sobre fundo escuro) */
.card-lift {
  background: #fff;
  border: 1px solid rgba(203, 212, 220, .7);
  box-shadow: 0 1px 2px rgba(4, 26, 54, .04), 0 10px 28px -12px rgba(4, 26, 54, .16);
  transition: box-shadow .3s cubic-bezier(.16, 1, .3, 1),
              border-color .3s ease,
              transform .3s cubic-bezier(.16, 1, .3, 1);
}
.card-lift:hover {
  border-color: rgba(138, 184, 245, .95);
  box-shadow: 0 2px 4px rgba(4, 26, 54, .05), 0 22px 48px -18px rgba(0, 76, 165, .28);
  transform: translateY(-3px);
}

/* Filete de topo — assinatura visual do rodapé, do pop-up e do aviso de
   cookies. Sai do azul royal e termina no amarelo do logotipo: é aqui que a
   mescla das duas cores da marca fica explícita, sempre sobre o branco. */
.brand-rule {
  background: linear-gradient(90deg,
    var(--brand-600) 0%,
    var(--brand-500) 32%,
    var(--brand-300) 56%,
    var(--gold-300)  82%,
    var(--gold-400)  100%);
}

/* --- Carrossel sem barra de rolagem --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Botão flutuante do WhatsApp --- */
@keyframes pulse-whatsapp {
  0%   { box-shadow: 0 0 0 0    rgba(37, 211, 102, .6); }
  70%  { box-shadow: 0 0 0 22px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0    rgba(37, 211, 102, 0); }
}
.btn-whatsapp-float { animation: pulse-whatsapp 2.2s infinite; }

/* --- Animação de entrada no scroll --- */
/* Sem will-change: 39 elementos promovidos a camada própria já na
   primeira pintura custavam memória de GPU sem ganho perceptível. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.active { opacity: 1; transform: translateY(0); }

/* Sem JS: conteúdo sempre visível */
@media (scripting: none) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* --- Cards --- */
.glass-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(219, 234, 254, .9);
  box-shadow: 0 18px 40px rgba(4, 26, 54, .08), inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* --- Ícones dos serviços (uma cor por família de serviço) ---
   Depois da mescla o carrossel usa só as cores da marca: dois azuis, o navy
   e dois dourados. O ciano e o verde saíram — o ciano não existe na
   identidade e o verde é reservado ao WhatsApp (ver tailwind.config.js).
   Os ícones são `aria-hidden` e cada cartão traz o nome do serviço em texto
   ao lado, então estes ladrilhos são decoração, não informação. */
.service-icon-bg {
  background: linear-gradient(135deg, #005dc3 0%, #003f8a 100%);
  box-shadow: 0 10px 30px rgba(0, 76, 165, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}
/* azul claro */
.service-icon-bg.alt  { background: linear-gradient(135deg, #2f80ed 0%, #0a63cb 100%); box-shadow: 0 10px 30px rgba(10, 99, 203, .32); }
/* dourado do logotipo */
.service-icon-bg.warm { background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-700) 100%); box-shadow: 0 10px 30px rgba(184, 134, 11, .32); }
/* navy */
.service-icon-bg.deep { background: linear-gradient(135deg, #33475a 0%, #18242d 100%); box-shadow: 0 10px 30px rgba(24, 36, 45, .38); }
/* dourado profundo */
.service-icon-bg.lush { background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-900) 100%); box-shadow: 0 10px 30px rgba(122, 82, 0, .3); }

/* ===========================================================
   DESTAQUES EM DOURADO
   Classes próprias (e não utilitários novos do Tailwind) porque o
   tailwind.css deste repo é compilado e purgado offline: uma classe
   inédita no HTML sairia sem estilo nenhum.
   =========================================================== */

/* Estrelas da nota do Google. --gold-600 dá 3,25:1 sobre o branco e 3,08:1
   sobre o #f6f9fd das seções alternadas — passa no 1.4.11 nos dois fundos. */
.tl-star { color: var(--gold-600); }

/* Selo dourado cheio (fundo --gold-100 + tinta --gold-800 = 6,20:1) */
.tl-chip {
  background-color: var(--gold-100);
  color: var(--gold-800);
}

/* Selo dourado suave, para os rótulos pequenos dos cartões de serviço
   (fundo --gold-50 + tinta --gold-800 = 6,60:1) */
.tl-chip-soft {
  background-color: var(--gold-50);
  color: var(--gold-800);
}

/* Barra de progresso do carrossel: sai do azul e chega no amarelo */
.tl-progress {
  background: linear-gradient(90deg,
    var(--brand-600) 0%,
    var(--brand-500) 46%,
    var(--gold-400)  100%);
}

/* --- Barra de navegação inferior (mobile) --- */
.app-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(33, 48, 60, .1);
  z-index: 55;
  padding-bottom: env(safe-area-inset-bottom);
}
/* Mesmo filete azul → dourado do rodapé, agora no topo da barra de app.
   `position: absolute` tira o pseudo-elemento do fluxo flex — sem isso ele
   viraria um sexto item e roubaria largura dos cinco destinos. */
.app-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--brand-600) 0%,
    var(--brand-500) 32%,
    var(--brand-300) 56%,
    var(--gold-300)  82%,
    var(--gold-400)  100%);
}
.app-bar a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  color: #475569;
  font-weight: 700;
  font-size: 10px;
  transition: color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
/* O rótulo é uma palavra só ("WhatsApp", "Serviços"): não tem onde quebrar.
   Preso à largura do próprio item, ele nunca vaza para o item vizinho. */
.app-bar a span { max-width: 100%; overflow: hidden; white-space: nowrap; }
.app-bar a:hover, .app-bar a.active { color: #004ca5; }
.app-bar a .ab-icon { width: 22px; height: 22px; flex-shrink: 0; }
@media (min-width: 1024px) { .app-bar { display: none; } }

/* --- FAQ (details/summary) --- */
details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] summary .faq-chevron { transform: rotate(180deg); }
details.faq summary .faq-chevron { transition: transform .25s ease; }

/* --- Pop-up de oferta --- */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Véu mais leve: o cartão agora é claro e tem sombra própria, então
     não precisa de um fundo quase preto pra se destacar. */
  background: rgba(33, 48, 60, .58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  /* Ao fechar, `visibility` só cai depois do fade (delay .3s). Ao abrir, vira
     `visible` na hora — senão focar o diálogo no mesmo tick não funciona. */
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.popup-overlay.open {
  opacity: 1;
  visibility: visible;
  /* `visibility` fora da lista de transição: sem transição criada, o valor
     muda no mesmo tick e focar o diálogo funciona de imediato. */
  transition: opacity .3s ease;
}
.popup-card {
  transform: translateY(18px) scale(.97);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}
.popup-overlay.open .popup-card { transform: translateY(0) scale(1); }
body.popup-locked { overflow: hidden; }
/* O cartão recebe foco por script ao abrir. Um contorno em volta dele não
   informaria nada (o diálogo já domina a tela) e brigaria com o raio de 24px,
   então some — o anel de foco continua valendo pros controles de dentro. */
.popup-card:focus,
.popup-card:focus-visible { outline: none; }

/* Respiro do cartão. Todo o espaçamento interno mora aqui, e não em
   utilitários soltos no HTML, porque header e corpo precisam encolher juntos
   quando a janela é baixa — senão o cartão passaria a exigir rolagem interna,
   que é exatamente o que o respiro maior deveria evitar. */
.popup-head    { padding: 28px 26px 22px; }
.popup-body    { padding: 22px 26px; }
.popup-badge   { margin-bottom: 20px; }
.popup-title   { margin-bottom: 14px; }
.popup-list    { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.popup-dismiss { margin-top: 16px; padding: 9px 0; }

/* Celular em retrato: sobra altura (um aparelho de 390x844 tem ~800px de
   viewport) e falta largura. O respiro entre os elementos é o maior de todos
   os pontos de quebra — é onde o dono pediu folga — mas o lateral cai pra
   20px, senão, num cartão de 358px, as linhas ficariam curtas demais. */
@media (max-width: 420px) {
  .popup-overlay { padding: 16px; }
  .popup-card { max-height: calc(100dvh - 32px); }
  .popup-head { padding: 26px 20px 22px; }
  .popup-body { padding: 22px 20px; }
  .popup-badge { margin-bottom: 22px; }
  .popup-title { margin-bottom: 15px; }
  .popup-list { gap: 22px; margin-bottom: 30px; }
  .popup-dismiss { margin-top: 18px; padding: 10px 0; }
}

/* Só quando a altura é realmente insuficiente: celular deitado e aparelhos
   antigos de tela curta (um 375x667 dá ~553px de viewport). O corte fica em
   640px porque acima disso o cartão inteiro cabe com o respiro cheio, e não
   faz sentido comprimir celular em retrato — que é o caso mais comum. Só o
   eixo vertical encolhe; o lateral fica com quem a regra de largura definiu. */
@media (max-height: 640px) {
  .popup-head { padding-top: 24px; padding-bottom: 20px; }
  .popup-body { padding-top: 22px; padding-bottom: 22px; }
  .popup-badge { margin-bottom: 16px; }
  .popup-title { margin-bottom: 12px; }
  .popup-list { gap: 15px; margin-bottom: 22px; }
  .popup-dismiss { margin-top: 13px; padding: 8px 0; }
}

/* Celular deitado. Em 360px de altura nada empilhado cabe — em coluna única o
   cartão precisaria de 457px e o botão do WhatsApp ficaria abaixo da dobra,
   dependendo de rolagem dentro do próprio pop-up pra ser visto. Como aqui
   sobra largura, as duas metades ficam lado a lado: a apresentação à esquerda,
   as vantagens e o CTA à direita, tudo visível de uma vez. A divisória troca
   de lado junto (era a base do header, vira a lateral). */
@media (max-height: 460px) and (min-width: 560px) {
  .popup-card {
    max-width: 620px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .popup-head {
    border-bottom-width: 0;
    border-right-width: 1px;
    text-align: left;
    padding: 22px 24px;
  }
  .popup-body { padding: 22px 24px; }
  .popup-badge { margin-bottom: 14px; }
  .popup-title { margin-bottom: 10px; }
  .popup-list { gap: 13px; margin-bottom: 18px; }
  .popup-dismiss { margin-top: 10px; padding: 6px 0; }
}

/* --- Foco visível (WCAG 2.2) --- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #004ca5;
  outline-offset: 3px;
  border-radius: 8px;
}

/* --- Proteção de conteúdo --- */
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; max-width: 100%; height: auto; }

/* ===========================================================
   RESPONSIVIDADE EXTREMA — piso de 200px
   Cobre relógios, foldables fechados, split-screen, iframes
   pequenos e zoom de 400% (WCAG 2.2 — critério 1.4.10 Reflow).

   ORDEM IMPORTA: media queries de `max-width` têm todas a mesma
   especificidade, então a que aparece por último vence entre as que
   casam ao mesmo tempo. A 250px as quatro casam — por isso os blocos
   vão do maior para o menor (480 → 360 → 320 → 250). Invertendo a
   ordem, o bloco de 360px anularia os de 320px e 250px e o piso de
   200px viraria letra morta.
   =========================================================== */

/* No mobile o layout é de coluna única: cortar rótulo com reticências
   esconde palavra inteira ("Orçamento grátis no What…"). Abaixo de 480px
   o texto quebra em duas linhas em vez de truncar — continua dentro da
   caixa, mas legível por completo. Acima disso o truncate volta a valer
   como rede de segurança contra estouro. */
@media (max-width: 480px) {
  .truncate {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word;
  }
}

/* 360 px */
@media (max-width: 360px) {
  .fluid-h1 { font-size: 1.45rem !important; }
  .fluid-h2 { font-size: 1.25rem !important; }
  /* 5 destinos na barra: a partir daqui cada um fica com menos de 72px e
     "WhatsApp" a 10px já encostaria na borda. */
  .app-bar a { font-size: 9px; padding-left: 2px; padding-right: 2px; }
}

/* 320 px */
@media (max-width: 320px) {
  .fluid-h1 { font-size: 1.3rem !important; }
  .fluid-h2 { font-size: 1.15rem !important; }
  iframe { min-height: 250px !important; }
  .app-bar a { font-size: 8.5px; }
  .app-bar a .ab-icon { width: 20px; height: 20px; }
}

/* 250 px */
@media (max-width: 250px) {
  body { word-wrap: break-word; hyphens: auto; overflow-x: hidden; }

  .grid-200dp-col-1,
  [class*="grid-cols-2"],
  [class*="grid-cols-3"],
  [class*="grid-cols-4"],
  [class*="grid-cols-5"] { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

  .p-200dp-small   { padding: 8px !important; }
  .gap-200dp-small { gap: 6px !important; }
  [class*="px-"] { padding-left: 8px !important; padding-right: 8px !important; }
  [class*="py-"] { padding-top: 12px !important; padding-bottom: 12px !important; }

  .fluid-h1, .fluid-h2 { font-size: 1.1rem !important; line-height: 1.2 !important; }
  .fluid-p  { font-size: 11px !important; }
  h3 { font-size: 13px !important; }

  .flex-col-200dp { flex-direction: column !important; align-items: stretch !important; text-align: center; }
  .hidden-200dp   { display: none !important; }

  .service-card { width: 86vw !important; max-width: 86vw !important; }

  /* Abaixo de 250px sobram menos de 42px por destino e nenhum tamanho de
     fonte legível comporta "WhatsApp". A barra vira só de ícones, como a de
     um app compacto; cada link mantém seu `aria-label`, então o leitor de
     tela continua anunciando o destino por extenso. */
  .app-bar a { font-size: 8px !important; padding: 10px 2px !important; }
  .app-bar a span { display: none !important; }
  .app-bar a .ab-icon { width: 18px !important; height: 18px !important; }

  .btn-whatsapp-float { padding: 10px !important; }
  .btn-whatsapp-float svg { width: 22px !important; height: 22px !important; }

  header img  { width: 24px !important; }
  header span { font-size: 10px !important; }
  /* A logo (shrink-0) empurrava o botão do menu pra fora da tela a 200px.
     Esconde só a tagline larga; o nome "TecnoLar" continua visível. */
  header a[aria-label] span:last-child { display: none !important; }

  /* Botões CTA cabem na largura */
  a, button { min-width: 0 !important; }

  .rounded-2xl, .rounded-3xl,
  .rounded-\[2\.5rem\], .rounded-\[3rem\] { border-radius: 12px !important; }

  iframe { min-height: 200px !important; }

  #carousel-prev, #carousel-next { width: 26px !important; height: 26px !important; }
  #carousel-progress { max-width: 60px !important; }

  /* A 200px sobram 180px de cartão: qualquer respiro lateral maior que 12px
     estrangula o texto. O vertical segura o mínimo pra não virar uma parede. */
  .popup-overlay { padding: 10px !important; }
  .popup-card { max-height: calc(100dvh - 20px) !important; }
  .popup-head { padding: 20px 12px 16px !important; }
  .popup-body { padding: 16px 12px !important; }
  .popup-badge { margin-bottom: 12px !important; }
  .popup-title { margin-bottom: 9px !important; }
  .popup-list { gap: 10px !important; margin-bottom: 16px !important; }
  .popup-dismiss { margin-top: 10px !important; padding: 6px 0 !important; }

  * { min-width: 0 !important; max-width: 100vw; }
}

/* --- Nunca permitir scroll horizontal --- */
body, html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* --- Sprite SVG: nunca ocupa espaço no layout --- */
svg.svg-sprite,
svg[style*="display:none"],
svg[style*="display: none"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
svg use { pointer-events: none; }
.fill-current use, [class*="fill-"] use { fill: inherit; }

/* --- Respeito a prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}