/* ==================================================================
   INBOX — tema claro, no estilo Material Design 3 (prova, 29/09/2026)

   Tudo aqui vale so dentro de <body class="tema-claro">. A classe a mais
   da especificidade suficiente para vencer as regras do tema escuro sem
   !important (exceto onde o original usa estilo inline ou !important).

   Cores: tokens do Material 3 na variante que o Google usa no Workspace
   (Gmail, Drive) — primario #0B57D0, superficies tonais levemente
   azuladas. As variaveis antigas do site (--primary, --bg-2, --text-dim...)
   sao remapeadas aqui, entao boa parte das secoes muda sem seletor novo.

   Principios aplicados: superficie tonal em vez de borda e sombra pesada;
   botoes em pilula de 40px; titulos mais leves (500), sem caixa alta no
   menu; abas com indicador sublinhado; elevacao suave.
   ================================================================== */
.tema-claro{
  --m-primary:#0B57D0; --m-on-primary:#FFFFFF;
  --m-primary-container:#D3E3FD; --m-on-primary-container:#041E49;
  --m-surface:#FFFFFF; --m-surface-low:#F8FAFD; --m-surface-c:#F0F4F9; --m-surface-high:#E9EEF6;
  --m-on-surface:#1F1F1F; --m-on-surface-var:#444746;
  --m-outline:#747775; --m-outline-var:#C4C7C5;
  --m-elev1:0 1px 2px rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.15);
  --m-elev2:0 1px 2px rgba(60,64,67,.30),0 2px 6px 2px rgba(60,64,67,.15);
  /* variaveis do tema escuro, remapeadas */
  --primary:#0B57D0; --primary-2:#0B57D0; --primary-soft:#D3E3FD; --accent:#0B57D0;
  --bg:#FFFFFF; --bg-2:#F8FAFD; --surface:#FFFFFF; --surface-2:#F0F4F9;
  --text:#1F1F1F; --text-dim:#444746; --text-mute:#5E5E5E;
  --border:#DDE3EA; --border-strong:#C4C7C5;
  background:var(--m-surface); color:var(--m-on-surface);
  font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
:root:has(body.tema-claro){background:#FFFFFF}
.tema-claro button,.tema-claro input,.tema-claro select{font-family:inherit}
.tema-claro h1,.tema-claro h2,.tema-claro h3{font-weight:500;letter-spacing:-.01em;color:var(--m-on-surface)}

/* ---- Barra superior ---- */
.tema-claro .hdr{background:rgba(248,250,253,.94);-webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--m-outline-var);box-shadow:none}
.tema-claro .hdr-nav{background:transparent;border:0;padding:0;gap:2px;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.tema-claro .hdr-nav a{color:var(--m-on-surface-var);text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:500;padding:10px 16px;border-radius:20px}
.tema-claro .hdr-nav a:hover{background:rgba(31,31,31,.06);color:var(--m-on-surface)}
.tema-claro .hdr-nav a.active{background:var(--m-primary-container);color:var(--m-on-primary-container)}
.tema-claro .hdr-cta{background:var(--m-primary);color:var(--m-on-primary);border-radius:20px;
  padding:9px 20px;font-size:14px;font-weight:500;line-height:20px;text-transform:none;letter-spacing:.01em}
.tema-claro .hdr-cta:hover{background:#1A63D6;box-shadow:var(--m-elev1)}
.tema-claro .idioma > summary{color:var(--m-on-surface-var);border:1px solid var(--m-outline);
  background:transparent;height:36px;border-radius:8px;font-weight:500;letter-spacing:.02em}
.tema-claro .idioma > summary:hover,.tema-claro .idioma[open] > summary{background:rgba(31,31,31,.06)}
.tema-claro .idioma > summary:focus-visible{outline:2px solid var(--m-primary)}
.tema-claro .hdr-menu > summary{color:var(--m-on-surface)}
.tema-claro .hdr-menu > summary:hover,.tema-claro .hdr-menu[open] > summary{background:rgba(31,31,31,.06)}
.tema-claro .hdr-menu-painel{background:var(--m-surface);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid var(--m-outline-var);box-shadow:var(--m-elev2)}
.tema-claro .hdr-menu-painel a{background:transparent;color:var(--m-on-surface);text-transform:none;
  letter-spacing:0;font-size:15px;font-weight:500;border-radius:28px}
.tema-claro .hdr-menu-painel a:hover,.tema-claro .hdr-menu-painel a.active{background:var(--m-primary-container);
  color:var(--m-on-primary-container)}
.tema-claro .hdr-menu-painel a.hdr-menu-webmail{background:var(--m-primary)!important;color:var(--m-on-primary)!important;text-align:center}

/* ---- Hero ---- */
.tema-claro .hero{background:linear-gradient(180deg,var(--m-surface-low) 0%,var(--m-surface) 100%);
  color:var(--m-on-surface)}
.tema-claro .hero h1{color:var(--m-on-surface);font-weight:500;letter-spacing:-.02em}
.tema-claro .hero h1 .accent{color:var(--m-primary)}
.tema-claro .kicker{background:transparent;border:1px solid var(--m-outline-var);color:var(--m-on-surface-var);
  border-radius:8px;text-transform:none;letter-spacing:.02em;font-weight:500;font-size:13px}
.tema-claro .hero p.lead{color:var(--m-on-surface-var)}
.tema-claro .hero p.lead strong{color:var(--m-on-surface)}
.tema-claro .hero-selo{color:var(--m-on-surface);font-weight:500}
.tema-claro .hero-selo-cont{color:var(--m-primary);font-weight:500}
.tema-claro .hero-meta{color:var(--m-on-surface-var)}
.tema-claro .hero-meta strong{color:var(--m-on-surface)}
.tema-claro .hero-visual::before{display:none}
/* a imagem do hero traz sombra e borda em estilo inline, pensadas para o fundo escuro */
.tema-claro .hero-visual img{box-shadow:var(--m-elev2)!important;border:1px solid var(--m-outline-var)!important;
  border-radius:12px!important}

/* ---- Botoes: preenchido, contornado e tonal ---- */
.tema-claro .btn{border-radius:20px;min-height:40px;padding:10px 24px;font-size:14px;font-weight:500;
  letter-spacing:.01em;box-shadow:none;transition:background .2s,box-shadow .2s}
.tema-claro .btn:hover{transform:none}
.tema-claro .btn-primary{background:var(--m-primary);color:var(--m-on-primary)}
.tema-claro .btn-primary:hover{background:#1A63D6;box-shadow:var(--m-elev1)}
.tema-claro .btn-ghost{background:transparent;color:var(--m-primary);border:1px solid var(--m-outline)}
.tema-claro .btn-ghost:hover{background:rgba(11,87,208,.08);border-color:var(--m-outline)}
.tema-claro .btn-linha{background:var(--m-primary-container);color:var(--m-on-primary-container);border:0}
.tema-claro .btn-linha:hover,.tema-claro .btn-linha:focus-visible{background:#C2D7FA;box-shadow:var(--m-elev1)}

/* ---- Rotulos de secao: chip tonal ---- */
.tema-claro .section-eyebrow{background:var(--m-primary-container);border:0;color:var(--m-on-primary-container);
  border-radius:8px;letter-spacing:.06em}
.tema-claro .section-head h2{font-weight:500}
.tema-claro .section-head p{color:var(--m-on-surface-var)}

/* ---- Abas: menu em pilula ----
   Mesmo desenho do menu do cabecalho do tema escuro e da sub-navegacao do
   Google Workspace: um conteiner arredondado com as opcoes dentro, a ativa
   destacada em azul-claro. (A 1a versao usava sublinhado; o dono preferiu
   a pilula.) */
.tema-claro .tab-buttons{background:var(--m-surface);border:1px solid var(--m-outline-var);
  border-radius:999px;padding:4px;gap:2px;width:fit-content;max-width:100%;
  box-shadow:0 1px 2px rgba(60,64,67,.12);justify-content:flex-start}
.tema-claro .tab-buttons button{border-radius:999px;padding:10px 20px;background:transparent;
  color:var(--m-on-surface-var);font-weight:500;font-size:14px;letter-spacing:0;transition:background .2s,color .2s}
.tema-claro .tab-buttons button:hover{background:rgba(31,31,31,.06);color:var(--m-on-surface)}
.tema-claro .tab-buttons button[aria-selected="true"]{background:var(--m-primary-container);
  color:var(--m-on-primary-container)}
.tema-claro .tab-buttons button:focus-visible{outline:2px solid var(--m-primary);outline-offset:1px}

/* ---- Moldura de navegador das capturas ---- */
.tema-claro .cu-inbox-shot{border:1px solid var(--m-outline-var);border-radius:12px;box-shadow:var(--m-elev2);
  background:var(--m-surface)}
.tema-claro .cu-inbox-shot:hover{transform:none;box-shadow:0 2px 3px rgba(60,64,67,.3),0 6px 10px 4px rgba(60,64,67,.15)}
.tema-claro .cu-inbox-bar{background:var(--m-surface-c);border-bottom:1px solid var(--m-outline-var)}
.tema-claro .cu-inbox-bar .u{background:var(--m-surface);border-color:var(--m-outline-var);border-radius:16px;
  color:var(--m-on-surface-var)}

/* ---- Cartoes: preenchidos, sem borda, elevacao tonal no hover ---- */
.tema-claro .step,.tema-claro .why-card,.tema-claro .mapa-card{background:var(--m-surface-c);border:0;
  border-radius:16px;box-shadow:none;transition:background .2s}
.tema-claro section[style*="bg-2"] .step,.tema-claro section[style*="bg-2"] .why-card{background:var(--m-surface)}
.tema-claro .step:hover,.tema-claro .why-card:hover,.tema-claro .mapa-card:hover,
.tema-claro .mapa-card:focus-visible{transform:none;background:var(--m-surface-high);box-shadow:none}
.tema-claro section[style*="bg-2"] .step:hover,.tema-claro section[style*="bg-2"] .why-card:hover{
  background:var(--m-surface);box-shadow:var(--m-elev1)}
.tema-claro .step-num{border-radius:12px;background:var(--m-primary);color:var(--m-on-primary)}
.tema-claro .why-icon,.tema-claro .mapa-ico{background:var(--m-primary-container);border:0;border-radius:12px;
  color:var(--m-on-primary-container)}
.tema-claro .why-icon svg{color:var(--m-on-primary-container)}
.tema-claro .mapa-seta{color:var(--m-primary);font-weight:500}

/* ---- Fechamento: faixa tonal azul em vez de preta ---- */
.tema-claro section.fechamento{background:var(--m-primary-container);color:var(--m-on-primary-container)}
.tema-claro .fechamento h2{color:var(--m-on-primary-container);font-weight:500}
.tema-claro .fechamento-fatos{color:var(--m-on-primary-container);font-weight:500}
.tema-claro .fechamento-fatos li::before{background:var(--m-primary)}
.tema-claro .fechamento p{color:var(--m-on-primary-container)}

/* ---- Rodape ---- */
.tema-claro footer{background:var(--m-surface-c);border-top:0}
.tema-claro .rodape-tit{color:var(--m-on-surface-var)}
.tema-claro .rodape-col a{color:var(--m-on-surface-var)}
.tema-claro .rodape-col a:hover,.tema-claro .rodape-col a:focus-visible{color:var(--m-primary)}
.tema-claro .rodape-marca p{color:var(--m-on-surface-var)}
.tema-claro footer .container.rodape-base{border-top-color:var(--m-outline-var);color:var(--m-on-surface-var)}
.tema-claro .ao-topo{border:0;background:var(--m-primary-container);color:var(--m-on-primary-container);
  box-shadow:var(--m-elev2);border-radius:16px}

/* ==================================================================
   Refinamento (29/09/2026)
   ================================================================== */

/* Barra superior: sem linha de contorno. A separacao vem de uma sombra
   projetada sobre a pagina (elevacao 1), que sobe para elevacao 2 quando
   a pagina rola — a classe .rolado e posta pelo inbox.js. */
.tema-claro .hdr{border-bottom:0;background:rgba(255,255,255,.96);
  box-shadow:0 1px 2px rgba(60,64,67,.18),0 2px 6px 1px rgba(60,64,67,.10);transition:box-shadow .25s}
.tema-claro .hdr.rolado{box-shadow:0 1px 3px rgba(60,64,67,.25),0 4px 12px 3px rgba(60,64,67,.14)}
.tema-claro .idioma > summary{border-color:var(--m-outline-var)}

/* ---- Formas geometricas, no estilo das paginas do Google ----
   Decoracao pura: <div class="formas" aria-hidden="true"> com cinco
   pecas, desenhadas so com CSS (nenhuma imagem, nenhum pedido a mais).
   Cores da propria marca: azuis do Material e o ciano da logo. */
.formas{display:none}
.tema-claro .formas{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
.tema-claro .hero-visual{position:relative;isolation:isolate}
.tema-claro .hero-visual > img{position:relative;z-index:1}
.tema-claro .formas .f{position:absolute;display:block}
/* Composicao: quatro formas espiando por tras da tela, nenhuma passando
   de ~10% abaixo dela (mais que isso encosta no bloco do botao e sai
   cortada em linha reta). */
/* circulo grande, atras do canto superior direito */
.tema-claro .formas .f1{width:54%;aspect-ratio:1;border-radius:50%;background:#D3E3FD;top:-20%;right:-11%}
/* quadrado arredondado e inclinado, embaixo a esquerda */
.tema-claro .formas .f2{width:28%;aspect-ratio:1;border-radius:28%;background:#C9F0FF;bottom:-9%;left:-7%;
  transform:rotate(14deg)}
/* pilula azul cheia, acima da tela, a esquerda — inteira a vista */
.tema-claro .formas .f3{width:24%;aspect-ratio:3/1;border-radius:999px;background:#0B57D0;top:-11%;left:8%}
/* circulo pequeno ciano, embaixo a direita */
.tema-claro .formas .f4{width:8%;aspect-ratio:1;border-radius:50%;background:#00A3E0;bottom:-7%;right:18%}
.tema-claro .formas .f5{display:none}
/* o hero ja corta o que passa da borda (overflow:hidden), entao no celular
   as formas nao criam rolagem lateral */

/* ---- Numeros dos tres passos: circulo, quadrado, pilula ---- */
.tema-claro .step-num{box-shadow:none;font-weight:500}
.tema-claro .step:nth-child(1) .step-num{border-radius:50%}
.tema-claro .step:nth-child(2) .step-num{border-radius:14px;background:#00639B}
.tema-claro .step:nth-child(3) .step-num{border-radius:999px;width:72px;background:#041E49}

/* ---- Icones dos cartoes: uma forma diferente por cartao ---- */
.tema-claro .mapa-card:nth-child(4n+1) .mapa-ico,
.tema-claro .why-card:nth-child(3n+1) .why-icon{border-radius:50%}
.tema-claro .mapa-card:nth-child(4n+2) .mapa-ico,
.tema-claro .why-card:nth-child(3n+2) .why-icon{border-radius:12px;background:#C9F0FF;color:#00465C}
.tema-claro .why-card:nth-child(3n+2) .why-icon svg{color:#00465C}
.tema-claro .mapa-card:nth-child(4n+3) .mapa-ico,
.tema-claro .why-card:nth-child(3n) .why-icon{border-radius:50% 50% 12px 12px}
.tema-claro .mapa-card:nth-child(4n) .mapa-ico{border-radius:50% 0 50% 50%;background:#E9EEF6;color:#041E49}

/* ---- Faixa final: formas nas bordas ---- */
.tema-claro section.fechamento{position:relative;overflow:hidden;isolation:isolate}
.tema-claro section.fechamento::before{content:"";position:absolute;z-index:-1;width:clamp(180px,26vw,360px);
  aspect-ratio:1;border-radius:50%;background:#A8C7FA;left:clamp(-150px,-8vw,-60px);top:-40%}
.tema-claro section.fechamento::after{content:"";position:absolute;z-index:-1;width:clamp(120px,15vw,220px);
  aspect-ratio:1;border-radius:28%;background:#0B57D0;opacity:.14;right:clamp(-70px,-3vw,-20px);bottom:-30%;
  transform:rotate(-16deg)}
@media (max-width:640px){
  .tema-claro section.fechamento::before{top:-18%}
  .tema-claro section.fechamento::after{bottom:-12%}
}
@media (prefers-reduced-motion:reduce){.tema-claro .hdr{transition:none}}

/* ---- Carrossel e busca no tema claro ---- */
.tema-claro .cr-cartao{background:var(--m-surface-low);border:0;border-radius:24px}
.tema-claro .cr-cartao:hover,.tema-claro .cr-cartao:focus-visible{background:var(--m-surface-c);box-shadow:none}
.tema-claro .cr-arte{background:#EEF3FB;margin:12px 12px 0;border-radius:16px}
.tema-claro .cr-arte-icone{color:var(--m-primary)}
.tema-claro .cr-chip{border-color:var(--m-outline-var);color:var(--m-on-surface-var);background:var(--m-surface);font-weight:500}
.tema-claro .cr-texto h3{font-weight:500}
.tema-claro .cr-seta{border-color:var(--m-outline-var);background:var(--m-surface);color:var(--m-on-surface)}
.tema-claro .cr-seta:hover:not(:disabled){background:var(--m-primary-container);border-color:transparent}
.tema-claro .bs-perguntas li{background:var(--m-surface);border-color:var(--m-outline-var);color:var(--m-on-surface)}
.tema-claro .bs-ico{background:var(--m-primary-container);color:var(--m-on-primary-container);border-radius:50%}
.tema-claro .bs-ponto:nth-child(2) .bs-ico{border-radius:12px;background:#C9F0FF;color:#00465C}
.tema-claro .bs-ponto:nth-child(3) .bs-ico{border-radius:50% 50% 12px 12px}
.tema-claro section.busca{background:var(--m-surface-low)}
.tema-claro .bs-ponto h3{font-weight:500}

/* ---- Dominio proprio no tema claro ---- */
.tema-claro .dm-ico{background:var(--m-primary-container);color:var(--m-on-primary-container);border-radius:50%}
.tema-claro .dm-ponto:nth-child(2) .dm-ico{border-radius:12px;background:#C9F0FF;color:#00465C}
.tema-claro .dm-ponto:nth-child(3) .dm-ico{border-radius:50% 50% 12px 12px}
.tema-claro .dm-ponto:nth-child(4) .dm-ico{border-radius:50% 0 50% 50%;background:var(--m-surface-high);color:var(--m-on-primary-container)}
.tema-claro .dm-ponto h3{font-weight:500}

/* ---- Drive e INBOX Office no tema claro ---- */
.tema-claro section.drive-office{background:var(--m-surface-low)}
.tema-claro .dof-quadro{border-color:var(--m-outline-var);border-radius:16px;box-shadow:var(--m-elev1)}
.tema-claro .dof-ico{background:var(--m-primary-container);color:var(--m-on-primary-container);border-radius:50%}
.tema-claro .dof-ponto:nth-child(2) .dof-ico{border-radius:12px;background:#C9F0FF;color:#00465C}
.tema-claro .dof-ponto:nth-child(3) .dof-ico{border-radius:50% 50% 12px 12px}
.tema-claro .dof-ponto:nth-child(4) .dof-ico{border-radius:50% 0 50% 50%;background:var(--m-surface-high);color:var(--m-on-primary-container)}
.tema-claro .dof-ponto h3{font-weight:500}
.tema-claro .dof-formatos{color:var(--m-on-surface-var)}

/* ==================================================================
   Cor por secao (29/09/2026): o mesmo sistema de formas do hero levado
   ao resto da home. Duas regras: (1) fundos alternados — cinza-azulado,
   branco, cinza-azulado — para as secoes nao se fundirem; (2) formas
   atras das imagens, espiando pelas bordas, e formas discretas nas
   secoes de texto. Cada secao corta o que passa da borda (sem rolagem
   lateral) e isola as camadas, entao as formas ficam atras do conteudo.
   ================================================================== */
.tema-claro #caixa-entrada,.tema-claro section.busca,.tema-claro #drive-office,.tema-claro #dominio,
.tema-claro #comecar,.tema-claro section:has(.why-grid),.tema-claro #o-servico{
  position:relative}

/* cartoes: brancos no fundo cinza, cinza no fundo branco */
.tema-claro #comecar .step,.tema-claro #o-servico .mapa-card{background:var(--m-surface)}
.tema-claro #comecar .step:hover,.tema-claro #o-servico .mapa-card:hover{background:var(--m-surface);box-shadow:var(--m-elev1)}
.tema-claro section[style*="bg-2"]:has(.why-grid) .why-card{background:var(--m-surface-c)}
.tema-claro section[style*="bg-2"]:has(.why-grid) .why-card:hover{background:var(--m-surface-high);box-shadow:none}

/* ---- Palco: formas atras da tela ---- */
.tema-claro .palco{position:relative;isolation:isolate}
.tema-claro .palco::before{content:"";position:absolute;z-index:-1;width:30%;aspect-ratio:1;border-radius:50%;
  background:#D3E3FD;right:-6%;bottom:-7%}
.tema-claro .palco::after{content:"";position:absolute;z-index:-1;width:13%;aspect-ratio:1;border-radius:28%;
  background:#C9F0FF;left:-4%;bottom:30%;transform:rotate(12deg)}

/* ---- Busca: quadrado inclinado atras da foto, ponto ciano ao lado ---- */
.tema-claro .bs-topo{position:relative;isolation:isolate}
.tema-claro .bs-topo::before{content:"";position:absolute;z-index:-1;width:28%;aspect-ratio:1;border-radius:28%;
  background:#D3E3FD;right:-4%;top:-7%;transform:rotate(-9deg)}
.tema-claro .bs-topo::after{content:"";position:absolute;z-index:-1;width:8%;aspect-ratio:1;border-radius:50%;
  background:#00A3E0;left:44%;bottom:-3%}
.tema-claro .bs-tela{position:relative}

/* ---- Drive: quarto de circulo e pilula nas pontas do mosaico ---- */
.tema-claro .dof-palco{position:relative;isolation:isolate}
.tema-claro .dof-palco::before{content:"";position:absolute;z-index:-1;width:15%;aspect-ratio:1;
  border-radius:100% 0 0 0;background:#A8C7FA;left:-4%;top:-7%}
.tema-claro .dof-palco::after{content:"";position:absolute;z-index:-1;width:19%;aspect-ratio:3/1;border-radius:999px;
  background:#0B57D0;right:-3%;bottom:-5%}

/* ---- Dominio: circulo e pilula espiando atras da ilustracao ---- */
.tema-claro .dm-grade{position:relative;isolation:isolate}
.tema-claro .dm-grade::before{content:"";position:absolute;z-index:-1;width:13%;aspect-ratio:1;border-radius:50%;
  background:#C9F0FF;left:-4%;top:6%}
.tema-claro .dm-grade::after{content:"";position:absolute;z-index:-1;width:12%;aspect-ratio:3/1;border-radius:999px;
  background:#0B57D0;left:36%;bottom:10%}


/* telas estreitas: sai o que disputaria espaco com o conteudo empilhado */
@media (max-width:900px){
  .tema-claro .bs-topo::after,.tema-claro .dm-grade::before,.tema-claro .dm-grade::after,
  .tema-claro .palco::after{display:none}
  .tema-claro .bs-topo::before{width:40%;top:auto;bottom:18%;right:-10%}
}

/* Ajustes apos revisao visual (29/09/2026) */
/* Drive com 2 telas: a planilha fica centrada na altura; a pilula passa a
   espiar por tras do canto dela, em vez de flutuar no vazio abaixo. */
.tema-claro .dof-palco:has(.dof-n2)::after{bottom:9%;right:-3%;width:13%}
/* Dominio: a pilula sobe para tras do canto inferior direito da ilustracao */
.tema-claro .dm-grade::after{left:39%;bottom:21%}

/* ==================================================================
   Fumaca e gelo (29/09/2026)
   Tres camadas: (1) FUMACA — manchas grandes de cor, desfocadas, no fundo
   das secoes; (2) GELO — placas translucidas com desfoque na frente delas,
   em volta das telas e nos cartoes: a cor aparece "atras do gelo";
   (3) ACENTOS — as formas pequenas, nitidas e multicoloridas.
   Cores do Material do Google, em tons claros (80-90) para o texto sobre
   o gelo manter contraste. Sem suporte a desfoque ou com "reduzir
   transparencia" ligado no sistema, o gelo vira placa solida.
   ================================================================== */
.tema-claro{
  --g-azul:#A8C7FA; --g-verde:#6DD58C; --g-amarelo:#FDD663; --g-rosa:#F2B8B5; --g-lilas:#D0BCFF; --g-ciano:#7CD5F5;
  --gelo:rgba(255,255,255,.42); --gelo-texto:rgba(255,255,255,.72); --gelo-borda:rgba(255,255,255,.75);
  --gelo-blur:blur(22px) saturate(1.5);
}

/* ---- acentos nitidos, agora multicoloridos ---- */
.tema-claro .formas .f1{background:#D3E3FD}
.tema-claro .formas .f2{background:#C4EED0}
.tema-claro .formas .f3{background:#FBBC04}
.tema-claro .formas .f4{background:#EA4335}
.tema-claro .palco::before{background:var(--g-azul)}
.tema-claro .palco::after{background:var(--g-verde)}
.tema-claro .bs-topo::before{background:var(--g-lilas)}
.tema-claro .bs-topo::after{background:#0B57D0}
.tema-claro .dof-palco::before{background:var(--g-verde)}
.tema-claro .dof-palco::after{background:#FBBC04}
.tema-claro .dm-grade::before{background:var(--g-amarelo)}
.tema-claro .dm-grade::after{background:#1E8E3E}

/* ---- gelo em volta das telas, da foto e da ilustracao ---- */
.tema-claro .formas .gelo{position:absolute;display:block;inset:-7% -5%;border-radius:30px;
  background:var(--gelo);-webkit-backdrop-filter:var(--gelo-blur);backdrop-filter:var(--gelo-blur);
  border:1px solid var(--gelo-borda)}
.tema-claro .moldura-gelo{position:relative;padding:18px;border-radius:32px;background:var(--gelo);
  -webkit-backdrop-filter:var(--gelo-blur);backdrop-filter:var(--gelo-blur);border:1px solid var(--gelo-borda);
  box-shadow:0 10px 40px rgba(60,64,67,.10)}
.tema-claro .bs-foto{padding:14px;border-radius:32px;background:var(--gelo);
  -webkit-backdrop-filter:var(--gelo-blur);backdrop-filter:var(--gelo-blur);border:1px solid var(--gelo-borda)}
.tema-claro .bs-foto img{border-radius:20px}
.tema-claro .dof-mosaico{padding:16px;border-radius:32px;background:var(--gelo);
  -webkit-backdrop-filter:var(--gelo-blur);backdrop-filter:var(--gelo-blur);border:1px solid var(--gelo-borda)}
.tema-claro .dm-ilustra{background:var(--gelo);-webkit-backdrop-filter:var(--gelo-blur);backdrop-filter:var(--gelo-blur);
  border:1px solid var(--gelo-borda)}

/* ---- cartoes e barra de abas: gelo mais opaco, porque levam texto ---- */
.tema-claro .tab-buttons,
.tema-claro #comecar .step,.tema-claro section:has(.why-grid) .why-card,.tema-claro #o-servico .mapa-card,
.tema-claro section[style*="bg-2"]:has(.why-grid) .why-card{
  background:var(--gelo-texto);-webkit-backdrop-filter:var(--gelo-blur);backdrop-filter:var(--gelo-blur);
  border:1px solid var(--gelo-borda)}
.tema-claro #comecar .step:hover,.tema-claro section:has(.why-grid) .why-card:hover,.tema-claro #o-servico .mapa-card:hover,
.tema-claro section[style*="bg-2"]:has(.why-grid) .why-card:hover{background:rgba(255,255,255,.86);box-shadow:var(--m-elev1)}

@media (max-width:900px){
  .tema-claro .moldura-gelo{padding:10px;border-radius:24px}
  .tema-claro .dof-mosaico{padding:10px;border-radius:24px}
}

/* ---- sem desfoque disponivel, ou "reduzir transparencia": placa solida ---- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tema-claro{--gelo:rgba(255,255,255,.9);--gelo-texto:rgba(255,255,255,.96)}
}
@media (prefers-reduced-transparency:reduce){
  .tema-claro{--gelo:rgba(255,255,255,.94);--gelo-texto:#fff}
}


/* destaque "Organizar com IA" em gelo */
.tema-claro .dof-destaque{background:var(--gelo-texto);-webkit-backdrop-filter:var(--gelo-blur);
  backdrop-filter:var(--gelo-blur);border:1px solid var(--gelo-borda);border-radius:28px}
.tema-claro .dof-destaque h3{font-weight:500}
.tema-claro .dof-destaque-ico{background:linear-gradient(135deg,#0B57D0,#7CD5F5)}
/* pilula do Drive menor: com 3 telas ela ficava pesada no canto */
.tema-claro .dof-palco::after{width:12%;right:-2%;bottom:-4%}

/* ==================================================================
   Paginas internas (29/09/2026)
   O mesmo sistema da home levado as outras oito paginas: topo claro com
   formas e placa de gelo, fumaca nas divisas das secoes, cartoes em gelo
   e as tres secoes que eram pretas (IA, controle de acesso e
   videoconferencia) passadas para superficie clara.
   ================================================================== */

/* ---- Topo ---- */
.pg-topo-arte{display:none}
.tema-claro .pg-topo{color:var(--m-on-surface);position:relative;padding:clamp(28px,4vw,52px) 0 clamp(40px,5.5vw,72px)}
.tema-claro .pg-topo-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.tema-claro .pg-topo h1{color:var(--m-on-surface);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.9rem,3.7vw,3rem);line-height:1.12;margin:18px 0 16px;max-width:18em}
.tema-claro .pg-topo .lead{color:var(--m-on-surface-var);font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.6;max-width:40em}
.tema-claro .migalhas{color:var(--m-on-surface-var);font-size:.875rem}
.tema-claro .migalhas a{color:var(--m-primary);font-weight:500}
.tema-claro .migalhas a:hover,.tema-claro .migalhas a:focus-visible{color:var(--m-primary)}
.tema-claro .migalhas [aria-current]{color:var(--m-on-surface);font-weight:500}
.tema-claro .pg-404-logo{display:block;width:fit-content;margin-bottom:22px}
.tema-claro .pg-404-logo img{display:block;height:24px;width:auto}
@media (min-width:900px){
  .tema-claro .pg-topo-grade{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  /* composicao: circulo grande, quadrado inclinado, pilula e ponto em
     volta de uma placa de gelo com o icone da pagina */
  .tema-claro .pg-topo-arte{display:block;position:relative;width:100%;max-width:340px;aspect-ratio:1;
    justify-self:center;isolation:isolate}
  .tema-claro .pg-topo-arte .f{position:absolute;display:block}
  .tema-claro .pg-topo-arte .f1{width:62%;aspect-ratio:1;border-radius:50%;background:#D3E3FD;top:0;right:0}
  .tema-claro .pg-topo-arte .f2{width:36%;aspect-ratio:1;border-radius:28%;background:#C4EED0;left:2%;bottom:6%;transform:rotate(14deg)}
  .tema-claro .pg-topo-arte .f3{width:34%;aspect-ratio:3/1;border-radius:999px;background:#FBBC04;left:4%;top:14%}
  .tema-claro .pg-topo-arte .f4{width:11%;aspect-ratio:1;border-radius:50%;background:#EA4335;right:8%;bottom:10%}
  .tema-claro .pg-topo-placa{position:absolute;inset:22% 20% 20% 22%;display:flex;align-items:center;justify-content:center;
    border-radius:32px;background:var(--gelo);-webkit-backdrop-filter:var(--gelo-blur);backdrop-filter:var(--gelo-blur);
    border:1px solid var(--gelo-borda);box-shadow:0 10px 40px rgba(60,64,67,.12);color:var(--m-primary)}
  .tema-claro .pg-topo-placa svg{width:42%;height:42%}
}
/* cada pagina com uma combinacao de cores (a ordem e a do menu) */
.tema-claro .pg-topo[data-cor="2"] .f1{background:#C4EED0}
.tema-claro .pg-topo[data-cor="2"] .f2{background:#D3E3FD}
.tema-claro .pg-topo[data-cor="2"] .f3{background:#0B57D0}
.tema-claro .pg-topo[data-cor="2"] .f4{background:#FBBC04}
.tema-claro .pg-topo[data-cor="3"] .f1{background:#FFDF99}
.tema-claro .pg-topo[data-cor="3"] .f2{background:#C2E7FF}
.tema-claro .pg-topo[data-cor="3"] .f3{background:#1E8E3E}
.tema-claro .pg-topo[data-cor="3"] .f4{background:#0B57D0}
.tema-claro .pg-topo[data-cor="4"] .f1{background:#E8DEF8}
.tema-claro .pg-topo[data-cor="4"] .f2{background:#FFDAD6}
.tema-claro .pg-topo[data-cor="4"] .f3{background:#0B57D0}
.tema-claro .pg-topo[data-cor="4"] .f4{background:#1E8E3E}


/* ---- As tres secoes que eram pretas ---- */
.tema-claro .ia-sec,.tema-claro .sec-sec{background:var(--m-surface-low);color:var(--m-on-surface)}
.tema-claro .vc-sec{background:var(--m-surface-low);color:var(--m-on-surface)}
.tema-claro .ia-sec .section-head h2,.tema-claro .sec-sec .section-head h2,.tema-claro .vc-sec .section-head h2{color:var(--m-on-surface)}
.tema-claro .ia-sec .section-head p,.tema-claro .sec-sec .section-head p,.tema-claro .vc-sec .section-head p{color:var(--m-on-surface-var)}
.tema-claro .ia-sec .section-eyebrow,.tema-claro .sec-sec .section-eyebrow,.tema-claro .vc-sec .section-eyebrow{
  background:var(--m-primary-container);border:0;color:var(--m-on-primary-container)}
.tema-claro .ia-badge{background:var(--m-surface);border:1px solid var(--m-outline-var);color:var(--m-on-surface);font-weight:500}
.tema-claro .ia-badge .dot{background:#1E8E3E;box-shadow:0 0 0 4px rgba(30,142,62,.16)}
.tema-claro .ia-card h3,.tema-claro .sec-card h3,.tema-claro .vc-card h3,
.tema-claro .ia-card .cartao-tit,.tema-claro .sec-card .cartao-tit{color:var(--m-on-surface);font-weight:500}
.tema-claro .ia-card p,.tema-claro .sec-card p,.tema-claro .vc-card p{color:var(--m-on-surface-var)}
.tema-claro .sec-card > summary::after,.tema-claro .ia-card > summary::after{border-color:var(--m-outline)}
.tema-claro .ia-note,.tema-claro .vc-note{color:var(--m-on-surface-var)}
.tema-claro .ia-note strong,.tema-claro .vc-note strong{color:var(--m-on-surface)}
.tema-claro .sec-destaque{background:rgba(196,238,208,.72);border:1px solid #A8DAB5;color:#0D3B1E}
.tema-claro .sec-destaque strong{color:#072711}
/* prevencao de vazamento: a placa escura vira gelo */
.tema-claro .dlp h3{color:var(--m-on-surface);font-weight:500}
.tema-claro .dlp-topo p{color:var(--m-on-surface-var)}
.tema-claro .dlp-tag{background:var(--m-primary-container);border:0;color:var(--m-on-primary-container)}
.tema-claro .dlp-ponto h4{color:var(--m-on-surface);font-weight:500}
.tema-claro .dlp-ponto p{color:var(--m-on-surface-var)}
.tema-claro .dlp-tela{border-color:var(--m-outline-var);box-shadow:var(--m-elev1)}
.tema-claro .dlp-leg{color:var(--m-on-surface-var)}
.tema-claro .dlp-nota{border-top-color:var(--m-outline-var);color:var(--m-on-surface-var)}

/* ---- Cartoes das paginas internas em gelo ----
   So as caixas de texto. As telas desenhadas (fila de revisao, lixeira,
   rastreio) continuam brancas e solidas: representam o produto. */
.tema-claro .gallery-card,.tema-claro .dv-card,.tema-claro .of-colab,.tema-claro .feat2-col,
.tema-claro .cal-card,.tema-claro .vc-card,.tema-claro .vc-note,.tema-claro .ia-card,.tema-claro .ia-note,
.tema-claro .as-camada,.tema-claro .as-extra,.tema-claro .sec-card,.tema-claro .dlp,.tema-claro .dlp-ponto,
.tema-claro .lix-box,.tema-claro .admin-card,.tema-claro .plan,.tema-claro .plan-comum,.tema-claro .gov-card,
.tema-claro .support-grid > div,.tema-claro .pg-topo ~ section .faq details,.tema-claro .mrc-url,.tema-claro .migration,.tema-claro .lxd{
  background:var(--gelo-texto);-webkit-backdrop-filter:var(--gelo-blur);backdrop-filter:var(--gelo-blur);
  border:1px solid var(--gelo-borda);box-shadow:0 1px 3px rgba(60,64,67,.08)}
.tema-claro .gallery-card:hover,.tema-claro .dv-card:hover,.tema-claro .cal-card:hover,.tema-claro .vc-card:hover,
.tema-claro .ia-card:hover,.tema-claro .sec-card:hover,.tema-claro .gov-card:hover,.tema-claro .as-camada:hover,
.tema-claro .plan:hover,.tema-claro .support-grid > div:hover{transform:none;background:rgba(255,255,255,.86);
  border-color:var(--gelo-borda);box-shadow:var(--m-elev1)}
.tema-claro .gallery-card.active{background:rgba(211,227,253,.78);border-color:#A8C7FA}
.tema-claro .plan.featured{border:2px solid var(--m-primary)}
.tema-claro .dlp{border-radius:28px}

/* ---- Icones: tonais, uma forma por posicao (como na home) ---- */
.tema-claro .dv-ico,.tema-claro .cal-ico,.tema-claro .gov-ico,.tema-claro .sec-ico,.tema-claro .ia-ico,.tema-claro .vc-ico{
  background:var(--m-primary-container);color:var(--m-on-primary-container);border-radius:50%}
.tema-claro .dv-ico svg,.tema-claro .cal-ico svg,.tema-claro .gov-ico svg,.tema-claro .sec-ico svg,
.tema-claro .ia-ico svg,.tema-claro .vc-ico svg{color:var(--m-on-primary-container)}
.tema-claro :is(.dv-card,.cal-card,.gov-card,.sec-card,.ia-card,.vc-card):nth-child(3n+2) :is(.dv-ico,.cal-ico,.gov-ico,.sec-ico,.ia-ico,.vc-ico){
  border-radius:12px;background:#C9F0FF;color:#00465C}
.tema-claro :is(.dv-card,.cal-card,.gov-card,.sec-card,.ia-card,.vc-card):nth-child(3n+2) :is(.dv-ico,.cal-ico,.gov-ico,.sec-ico,.ia-ico,.vc-ico) svg{color:#00465C}
.tema-claro :is(.dv-card,.cal-card,.gov-card,.sec-card,.ia-card,.vc-card):nth-child(3n) :is(.dv-ico,.cal-ico,.gov-ico,.sec-ico,.ia-ico,.vc-ico){
  border-radius:50% 50% 12px 12px;background:#C4EED0;color:#0D3B1E}
.tema-claro :is(.dv-card,.cal-card,.gov-card,.sec-card,.ia-card,.vc-card):nth-child(3n) :is(.dv-ico,.cal-ico,.gov-ico,.sec-ico,.ia-ico,.vc-ico) svg{color:#0D3B1E}

/* ---- Pequenos acertos ---- */
.tema-claro .of-formatos-linha{font-family:inherit;font-size:.95rem;color:var(--m-on-surface-var)}
.tema-claro .billing-toggle .save{background:#146C2E;color:#fff}
.tema-claro .phone{box-shadow:0 12px 40px rgba(60,64,67,.18)}

/* ==================================================================
   Fundo branco em todas as secoes (30/09/2026, pedido do dono)
   A alternancia branco / cinza-azulado (#F8FAFD) saiu: todas as secoes,
   o hero e o topo das paginas internas ficam brancos. A cor passa a vir
   so da fumaca e das formas. Ficam de fora a faixa final (.fechamento),
   que e azul de proposito, e o rodape.
   Sem o cinza por tras, a borda branca do gelo sumia; ela vira um cinza
   bem claro para os cartoes continuarem com contorno.
   ================================================================== */
.tema-claro{--gelo-borda:rgba(211,218,227,.85)}

/* ==================================================================
   Fumaca continua (30/09/2026, pedido do dono)
   Antes cada secao tinha fundo proprio e cortava as suas manchas na
   borda, em linha reta. Agora a pagina e que e branca (no <html>), as
   secoes sao transparentes e nao recortam nada; cada mancha fica
   CENTRADA NA DIVISA entre uma secao e a seguinte (metade em cada),
   alternando esquerda e direita. Uma mancha por divisa, no lugar de duas
   por secao.
   Camadas: a mancha tem z-index -1 e as secoes nao criam contexto de
   empilhamento (sem isolation), entao ela vai para o contexto da raiz e
   fica atras de todo o conteudo — e atras do gelo, que a desfoca. O
   <body> precisa ser transparente: fundo de bloco e pintado DEPOIS dos
   filhos com z-index negativo e cobriria as manchas.
   Excecoes: a secao que antecede a faixa final nao tem mancha (a faixa e
   opaca e cortaria a mancha ao meio), e a rolagem lateral fica contida
   por overflow-x:clip em cada secao.
   ================================================================== */
html:has(body.tema-claro){background:#FFFFFF}
body.tema-claro{background:transparent}
/* so o eixo horizontal e cortado (clip aceita o outro eixo visivel, ao
   contrario de hidden): nada passa da largura da tela, e a mancha segue
   livre para cima e para baixo, entrando na secao vizinha. O corte no
   <html> nao servia: no celular a pagina continuava rolando de lado. */
body.tema-claro > section:not(.fechamento){background:transparent!important;overflow-x:clip;overflow-y:visible;
  isolation:auto;position:relative}
body.tema-claro > section:not(.fechamento)::before{content:none}
/* Posicao, tamanho e cor vem sorteados do construtor, em variaveis no
   style de cada secao (--fx, --fy, --fw, --fc; --fxm e --fwm no celular).
   Sem as variaveis (a pagina 404), a mancha cai na divisa de baixo. */
body.tema-claro > section:not(.fechamento)::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:var(--fy,100%);left:var(--fx,-13vw);right:auto;bottom:auto;width:var(--fw,34vw);aspect-ratio:1;
  border-radius:50%;background:var(--fc,var(--g-azul));transform:translateY(-50%);filter:blur(80px);opacity:.55}
@media (max-width:900px){
  body.tema-claro > section:not(.fechamento)::after{left:var(--fxm,-38vw);width:var(--fwm,78vw);filter:blur(56px)}
}

/* ==================================================================
   Rolagem mais leve (30/09/2026)
   O dono sentiu a rolagem pesada num monitor 4K. Dois custos saem sem
   mudar o que se ve (o vidro dos cartoes fica, por decisao dele):
   1. Barra do topo sem backdrop-filter. Ela e fixa, entao o desfoque era
      refeito a cada quadro da rolagem, na largura inteira da tela — e o
      fundo ja era 96% branco, o desfoque quase nao aparecia.
   2. Manchas sem filter:blur. O mesmo degrade suave vem de um gradiente
      radial, que o navegador pinta uma vez, em vez de desfocar um circulo
      de ate 640px com raio de 80px. O miolo cheio ate 30% e a queda ate a
      borda imitam o circulo desfocado; a escala de 1,4 repoe a
      area que o desfoque espalhava para fora do circulo.
   ================================================================== */
.tema-claro .hdr,.tema-claro .hdr.rolado{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none}
body.tema-claro > section:not(.fechamento)::after{filter:none;transform:translateY(-50%) scale(1.4);
  background:radial-gradient(closest-side,var(--fc,var(--g-azul)) 0%,var(--fc,var(--g-azul)) 18%,
    color-mix(in srgb,var(--fc,var(--g-azul)) 55%,transparent) 48%,
    color-mix(in srgb,var(--fc,var(--g-azul)) 18%,transparent) 75%,transparent 100%)}
@media (max-width:900px){
  body.tema-claro > section:not(.fechamento)::after{filter:none}
}

/* Hero mais perto das abas do palco (30/09/2026, pedido do dono): o vao era
   de ~200px (100px no fim do hero + 90px no topo da secao seguinte). */
body.tema-claro > section.hero{padding-bottom:40px}
body.tema-claro > section.hero + section#caixa-entrada{padding-top:48px}
@media (max-width:640px){
  body.tema-claro > section.hero{padding-bottom:28px}
  body.tema-claro > section.hero + section#caixa-entrada{padding-top:28px}
}

/* Selo do plano em destaque: o texto vem do CSS herdado ("MAIS POPULAR"). */
html[lang="en"] .plan.featured::before{content:"MOST POPULAR"}
html[lang="es"] .plan.featured::before{content:"MÁS POPULAR"}