/* =====================================================================
   ETZ Soft — Refinamento visual MOBILE (Saber)
   Base responsiva + PWA: Fang. Esta camada e SO estetica/UX mobile.
   REGRA DE OURO: tudo aqui vive dentro de @media (max-width:760px).
   O desktop esta aprovado e NAO pode ser tocado.
   Identidade: dourado #D49E2C / #F0C766 · fundo #07090e ·
   Chakra Petch (titulos) + Manrope (texto).
   ===================================================================== */

/* Safe-area / edge-to-edge (PWA com notch) — neutro no desktop */
:root { --etz-safe-l: env(safe-area-inset-left, 0px); --etz-safe-r: env(safe-area-inset-right, 0px); }

/* O drawer off-canvas vive fora do wrapper (overflow-x:hidden so cobre o
   wrapper). Sem isto, a gaveta empurrada p/ fora gera scroll horizontal.
   Vale em qualquer largura — neutro no desktop, onde o drawer fica oculto. */
html, body { overflow-x: hidden; }

/* ---------------------------------------------------------------------
   1) MENU / NAV MOBILE — toggle + drawer (gerados via etz-mobile-pwa.js)
   Sempre presentes no DOM; so aparecem/estilizam no mobile.
   --------------------------------------------------------------------- */
.etz-mobile-toggle { display: none; }
.etz-mobile-backdrop,
.etz-mobile-drawer { display: none; }

@media (max-width: 760px) {

  /* ---- Botao hamburguer (flutuante, fixo no canto — imune a re-render) ---- */
  .etz-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    z-index: 1000;
    width: 44px; height: 44px;            /* alvo de toque >=44px */
    padding: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--accent, var(--gold, #F0C766));
    background: color-mix(in srgb, var(--card, #0b0e15) 82%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--accent, var(--gold, #D49E2C)) 42%, transparent);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, border-color .18s ease, transform .12s ease;
  }
  body:has(.ll-nav) .etz-mobile-toggle,
  body:has(.cl-nav) .etz-mobile-toggle,
  body:has(.jr-nav) .etz-mobile-toggle,
  body:has(.tk-nav) .etz-mobile-toggle,
  body:has(.sv-nav) .etz-mobile-toggle,
  body:has(.ag-nav) .etz-mobile-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 170px);
  }
  .etz-mobile-toggle:active { transform: scale(.94); background: color-mix(in srgb, var(--accent, var(--gold, #D49E2C)) 16%, transparent); }
  .etz-mobile-toggle[aria-expanded="true"] { background: color-mix(in srgb, var(--accent, var(--gold, #D49E2C)) 18%, transparent); border-color: color-mix(in srgb, var(--accent, var(--gold, #F0C766)) 60%, transparent); }

  /* ---- Backdrop ---- */
  .etz-mobile-backdrop {
    display: block;
    position: fixed; inset: 0;
    z-index: 998;
    background: rgba(4, 6, 10, .62);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }
  .etz-mobile-backdrop.is-open { opacity: 1; visibility: visible; }

  /* ---- Drawer (gaveta lateral) ---- */
  .etz-mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; right: 0;
    z-index: 999;
    width: min(82vw, 320px);
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px
             calc(env(safe-area-inset-bottom, 0px) + 22px);
    padding-right: calc(20px + var(--etz-safe-r));
    background: var(--card, #0b0e15);
    border-left: 1px solid color-mix(in srgb, var(--accent, var(--gold, #D49E2C)) 22%, transparent);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
    transform: translateX(104%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .etz-mobile-drawer.is-open { transform: translateX(0); }

  .etz-mobile-drawer h2 {
    margin: 4px 0 16px;
    padding-bottom: 14px;
    font: 700 12px var(--etz-menu-title-font, 'Chakra Petch', sans-serif);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent, var(--gold, #D49E2C));
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  .etz-mobile-drawer a {
    display: flex;
    align-items: center;
    min-height: 48px;                      /* alvo de toque confortavel */
    padding: 4px 6px;
    font: 600 16px var(--etz-menu-link-font, 'Manrope', sans-serif);
    color: var(--ink, var(--text, #e9e6dc));
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    transition: color .15s ease, padding-left .15s ease;
  }
  .etz-mobile-drawer a:active { color: var(--accent, var(--gold, #F0C766)); padding-left: 12px; }
  .etz-mobile-drawer a:last-of-type { border-bottom: 0; }

  .etz-mobile-drawer-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 14px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1;
    color: #9aa3b2;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
  }
  .etz-mobile-drawer-close:active { color: var(--accent, var(--gold, #F0C766)); background: rgba(255, 255, 255, .04); }

  /* trava o scroll do body com o menu aberto */
  body.etz-menu-open { overflow: hidden; }

  /* ---- Esconde a lista de links desktop dentro do <nav> ----
     O grupo de links inline e substituido pelo hamburguer flutuante.
     Cobrimos landing/planos/temas/roadmap mesmo quando o spacing varia. */
  nav > div > div[style*="gap:22px"],
  nav > div > div:has(> a[href*="diferenciais"]),
  nav > div > div:has(> a[href*="planos"]),
  nav > div > div:has(> a[href*="/temas"]),
  nav > div > div:has(> a[href*="/roadmap"]),
  nav div:has(> a[href="/temas"]):has(> a[href="/planos"]) { display: none !important; }

  /* Temas: cada modelo tem seu proprio <header><nav> com spans/classes
     especificas. No mobile esse nav horizontal some e o drawer copia os
     mesmos itens, preservando fontes/cores via variaveis do proprio tema. */
  header nav:has(.ll-nav),
  header nav:has(.cl-nav),
  header nav:has(.jr-nav),
  header nav:has(.tk-nav),
  header nav:has(.sv-nav),
  header nav:has(.ag-nav) { display: none !important; }

  body:has(.ll-nav) { --etz-menu-title-font: 'Bricolage Grotesque', sans-serif; --etz-menu-link-font: 'DM Sans', sans-serif; }
  body:has(.cl-nav) { --etz-menu-title-font: 'Cormorant Garamond', serif; --etz-menu-link-font: 'DM Sans', sans-serif; }
  body:has(.jr-nav) { --etz-menu-title-font: 'Cormorant Garamond', serif; --etz-menu-link-font: 'Jost', sans-serif; }
  body:has(.tk-nav) { --etz-menu-title-font: 'Orbitron', sans-serif; --etz-menu-link-font: 'Rajdhani', sans-serif; }
  body:has(.sv-nav) { --etz-menu-title-font: 'Sora', sans-serif; --etz-menu-link-font: 'DM Sans', sans-serif; }
  body:has(.ag-nav) { --etz-menu-title-font: 'Oswald', sans-serif; --etz-menu-link-font: 'Mulish', sans-serif; }

  /* a barra de acoes (idioma/tema/painel/CTA) cede espaco ao toggle fixo
     no canto superior direito (44px + folga). */
  nav > div { padding-left: 16px !important; padding-right: 64px !important; gap: 8px !important; }
  nav [style*="gap:10px"] { gap: 7px !important; }
  /* CTA do topo um pouco menor no mobile */
  nav [style*="navCta"], nav [onClick*="openModal"] { font-size: 12px !important; padding: 8px 12px !important; }

  /* =====================================================================
     2) GRIDS MULTI-COLUNA -> 1 COLUNA (empilhar, nao comprimir)
     Regra-chave do Alex. Vale para TODO grid inline de fr,
     menos: a tabela comparativa de planos (assinatura 1.7fr) e o
     "grip" 2px do chat. Inline style vence CSS externo -> !important.
     ===================================================================== */
  [style*="grid-template-columns"]:not([style*="1.7fr"]):not([style*="grid-template-columns:2px"]):not([style*="grid-template-columns: 2px"]) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Rodada 3 / BUG C: reforco para os seis templates de tema, inclusive
     grids com "display:grid" sem espaco e colunas fracionarias (.92fr 1.08fr).
     O JS tambem reaplica depois da hidratacao do Design Compiler. */
  body [style*="display:grid"][style*="grid-template-columns"]:not([style*="1.7fr"]):not([style*="grid-template-columns:2px"]):not([style*="grid-template-columns: 2px"]),
  body [style*="display: grid"][style*="grid-template-columns"]:not([style*="1.7fr"]):not([style*="grid-template-columns:2px"]):not([style*="grid-template-columns: 2px"]),
  body [style*="grid-template-columns:repeat("]:not([style*="1.7fr"]):not([style*="grid-template-columns:2px"]):not([style*="grid-template-columns: 2px"]),
  body [style*="grid-template-columns: repeat("]:not([style*="1.7fr"]):not([style*="grid-template-columns:2px"]):not([style*="grid-template-columns: 2px"]),
  body [style*="grid-template-columns:."]:not([style*="1.7fr"]):not([style*="grid-template-columns:2px"]):not([style*="grid-template-columns: 2px"]),
  body [style*="grid-template-columns: ."]:not([style*="1.7fr"]):not([style*="grid-template-columns:2px"]):not([style*="grid-template-columns: 2px"]),
  body [style*="grid-template-columns:1fr 1fr"]:not([style*="1.7fr"]):not([style*="grid-template-columns:2px"]):not([style*="grid-template-columns: 2px"]),
  body [style*="grid-template-columns: 1fr 1fr"]:not([style*="1.7fr"]):not([style*="grid-template-columns:2px"]):not([style*="grid-template-columns: 2px"]) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Galeria de temas (Temas): o container e re-hidratado pelo framework
     (sc-host) e mantem 2 colunas mesmo com inline 1fr. Forcamos via
     alta especificidade qualquer grid que segure cards .tcard/.spcard. */
  html body [style*="display:grid"]:has(> .tcard),
  html body [style*="display: grid"]:has(> .tcard),
  html body [style*="grid"]:has(> .tcard),
  html body .tcard { grid-template-columns: 1fr !important; }
  html body div:has(> .tcard) { display: block !important; }
  html body .tcard { width: 100% !important; display: block !important; margin-bottom: 16px; }

  /* faixas de "stat band" coladas (gap:1px) mantem visual de bloco unico */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="gap:1px"],
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:1px"] {
    gap: 1px !important;
  }

  /* ---- Tabela comparativa de planos: NAO empilhar; rolar na horizontal ----
     Cada linha e um grid 1.7fr repeat(4,1fr). Damos min-width e deixamos
     o cartao container rolar lateralmente, preservando a leitura tabular. */
  [style*="1.7fr"] { min-width: 560px; }
  /* o wrapper .var(--card) que segura a tabela ganha scroll horizontal */
  section [style*="border-radius:14px"][style*="overflow:hidden"]:has([style*="1.7fr"]),
  section [style*="border-radius:14px"]:has([style*="1.7fr"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* =====================================================================
     3) CONTAINERS / ESPACAMENTO — padding lateral consistente,
        sem overflow horizontal, respeitando safe-area.
     ===================================================================== */
  /* todo container max-width:1200px recebe respiro lateral mobile */
  [style*="max-width:1200px"] {
    padding-left: max(18px, var(--etz-safe-l)) !important;
    padding-right: max(18px, var(--etz-safe-r)) !important;
  }

  /* reduz o respiro vertical exagerado das secoes */
  [style*="padding:84px 24px 20px"] { padding-top: 40px !important; padding-bottom: 10px !important; }
  [style*="padding: 84px 24px 20px"] { padding-top: 40px !important; padding-bottom: 10px !important; }
  [style*="padding:80px 24px"]      { padding-top: 38px !important; padding-bottom: 38px !important; }
  [style*="padding: 80px 24px"]      { padding-top: 38px !important; padding-bottom: 38px !important; }
  [style*="padding:78px 24px"]      { padding-top: 36px !important; padding-bottom: 36px !important; }
  [style*="padding: 78px 24px"]      { padding-top: 36px !important; padding-bottom: 36px !important; }
  [style*="padding:64px 24px 60px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
  [style*="padding: 64px 24px 60px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
  [style*="padding:64px 24px 0"]    { padding-top: 34px !important; }
  [style*="padding: 64px 24px 0"]    { padding-top: 34px !important; }
  [style*="padding:56px 24px"]      { padding-top: 32px !important; }
  [style*="padding: 56px 24px"]      { padding-top: 32px !important; }
  section[style*="margin-top:64px"] { margin-top: 36px !important; }

  /* =====================================================================
     4) TIPOGRAFIA MOBILE — titulos gigantes do desktop encolhem para
        leitura vertical confortavel (sem tocar nas fontes/identidade).
     ===================================================================== */
  h1[style*="font-size:58px"] { font-size: 29px !important; min-height: 112px !important; line-height: 1.08 !important; }
  h1[style*="font-size: 58px"] { font-size: 29px !important; min-height: 112px !important; line-height: 1.08 !important; }
  h1[style*="font-size:58px"] [style*="height:46px"] { height: 26px !important; }   /* caret do hero */
  h1[style*="font-size: 58px"] [style*="height: 46px"] { height: 26px !important; }   /* caret do hero */
  [style*="font-size:40px"]   { font-size: 23px !important; }
  [style*="font-size: 40px"]   { font-size: 23px !important; }
  [style*="font-size:38px"]   { font-size: 24px !important; }   /* numeros das stats */
  [style*="font-size: 38px"]   { font-size: 24px !important; }   /* numeros das stats */
  [style*="font-size:34px"]   { font-size: 22px !important; }
  [style*="font-size: 34px"]   { font-size: 22px !important; }
  [style*="font:700 38px 'Chakra Petch'"] { font-size: 24px !important; }
  [style*="font: 700 38px"],
  [style*="font:700 38px"] { font-size: 24px !important; }
  [style*="font:700 30px 'Chakra Petch'"] { font-size: 22px !important; }
  [style*="font: 700 30px"],
  [style*="font:700 30px"] { font-size: 22px !important; }
  h2[style*="font-size:34px"],
  h2[style*="font-size:40px"] { line-height: 1.16 !important; }
  [style*="font-size:17px"]   { font-size: 14.5px !important; }   /* hero sub */
  [style*="font-size: 17px"]   { font-size: 14.5px !important; }   /* hero sub */

  /* hero: empilha texto + terminal e centraliza CTAs sem espremer */
  header [style*="grid-template-columns:1.05fr"] { gap: 28px !important; }
  header [style*="max-width:480px"] { max-width: 100% !important; }

  /* botoes/CTA com area de toque >=44px e largura cheia quando fizer sentido */
  a[style*="padding:14px 26px"],
  span[style*="padding:14px 26px"] {
    padding: 14px 22px !important;
    min-height: 44px;
    justify-content: center;
  }

  /* a barra de CTAs do hero ocupa a largura e cada botao estica */
  header [style*="margin-top:30px"][style*="flex-wrap:wrap"] > a,
  header [style*="margin-top:30px"][style*="flex-wrap:wrap"] > span { flex: 1 1 100%; }

  /* imagens e SVGs decorativos nao podem gerar scroll lateral */
  img, svg, video, canvas { max-width: 100%; }

  /* cartoes com padding desktop generoso ganham respiro proporcional */
  [style*="padding:26px 18px"] { padding: 16px 10px !important; }
  [style*="padding: 26px 18px"] { padding: 16px 10px !important; }
  [style*="padding:26px 22px"] { padding: 18px 16px !important; }
  [style*="padding: 26px 22px"] { padding: 18px 16px !important; }
  [style*="padding:28px 26px"] { padding: 18px 16px !important; }
  [style*="padding: 28px 26px"] { padding: 18px 16px !important; }
  [style*="padding:30px 32px"] { padding: 18px 16px !important; }
  [style*="padding: 30px 32px"] { padding: 18px 16px !important; }
  [style*="padding:18px 20px"] { padding: 16px 14px !important; }
  [style*="padding: 18px 20px"] { padding: 16px 14px !important; }
  [style*="min-width:260px"] { min-width: 0 !important; }
  [style*="white-space:nowrap"] { white-space: normal !important; }

  /* Rodada 3 / BUG D: seletor flutuante de paleta nao pode cobrir cards.
     No mobile a paleta da Clinica sai do meio da tela e vira uma tira compacta
     acima da base; o indicador PWR do tema Tecnologia tambem sai do miolo. */
  [style*="position:fixed"][style*="left:18px"][style*="top:50%"][style*="gap:13px"],
  [style*="position:fixed"][style*="left:16px"][style*="top:50%"][style*="pointer-events:none"] {
    top: auto !important;
    left: max(12px, var(--etz-safe-l)) !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
    transform: none !important;
    flex-direction: row !important;
    gap: 8px !important;
    max-width: calc(100vw - 96px) !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    z-index: 35 !important;
  }
  [style*="position:fixed"][style*="left:18px"][style*="top:50%"][style*="gap:13px"] svg { width: 15px !important; height: 15px !important; }
  [style*="position:fixed"][style*="left:18px"][style*="top:50%"][style*="gap:13px"] [style*="width:30px"] {
    width: 24px !important;
    height: 24px !important;
  }
  a[style*="position:fixed"][style*="left:22px"][style*="bottom:22px"] {
    left: max(12px, var(--etz-safe-l)) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    max-width: calc(100vw - 88px) !important;
    padding: 9px 11px !important;
    z-index: 34 !important;
  }

  /* Rodada 3 / BUG E: barras de preview quebram em linhas no mobile e nao
     brigam com o hamburguer fixo. O seletor de moeda fica visivel. */
  body > x-dc > div > div:first-child > div,
  body > x-dc > div > div:nth-child(2) > div,
  div[style*="linear-gradient(100deg"] > div[style*="display:flex"],
  div[style*="background:#0b0f17"] > div[style*="display:flex"],
  div[style*="background:#080a0e"] > div[style*="display:flex"] {
    padding-left: max(14px, var(--etz-safe-l)) !important;
    padding-right: max(14px, var(--etz-safe-r)) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  div[style*="linear-gradient(100deg"] > div > div[style*="display:flex"] {
    flex: 1 1 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    gap: 7px !important;
  }
  div[style*="linear-gradient(100deg"] select {
    position: relative !important;
    z-index: 2 !important;
    min-height: 34px !important;
    max-width: 116px !important;
  }
  div[style*="linear-gradient(100deg"] a,
  div[style*="background:#0b0f17"] a,
  div[style*="background:#080a0e"] a {
    white-space: normal !important;
    text-align: center !important;
  }

  /* Header dos temas: respiro real para o seletor idioma/moeda do header nao
     ficar atras do hamburguer. Esconde so CTAs redundantes do header mobile. */
  header > div[style*="display:flex"][style*="justify-content:space-between"] {
    padding-right: calc(72px + var(--etz-safe-r)) !important;
    gap: 10px !important;
  }
  header > div[style*="display:flex"][style*="justify-content:space-between"] > div:last-child {
    flex: 0 0 auto !important;
    gap: 7px !important;
  }
  header > div[style*="display:flex"][style*="justify-content:space-between"] > div:last-child a,
  header > div[style*="display:flex"][style*="justify-content:space-between"] > div:last-child button {
    display: none !important;
  }

  /* Landing: e-mail profissional. Os 2 cards precisam virar 1 coluna real
     no mobile; largura cheia evita o card "2 caixas" sair da viewport. */
  .etz-email-cards {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  .etz-email-cards > div {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .etz-email-cards > div > div {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  /* tabela de planos: dica visual de que rola lateralmente */
  section [style*="border-radius:14px"]:has([style*="1.7fr"])::-webkit-scrollbar { height: 6px; }
  section [style*="border-radius:14px"]:has([style*="1.7fr"])::-webkit-scrollbar-thumb {
    background: rgba(212, 158, 44, .4); border-radius: 6px;
  }
}

/* Telas muito estreitas (<=380px): aperta so o suficiente */
@media (max-width: 380px) {
  .etz-mobile-drawer { width: min(86vw, 300px); }
  h1[style*="font-size:58px"] { font-size: 27px !important; min-height: 118px !important; }
  h1[style*="font-size: 58px"] { font-size: 27px !important; min-height: 118px !important; }
  [style*="font-size:40px"]   { font-size: 22px !important; }
  [style*="font-size: 40px"]   { font-size: 22px !important; }
}