/* ═══════════════════════════════════════════════════════════════════════════
   PREPROJETO — sistema de design no estilo Apple (19/10/2026)
   Base: Apple Design Resources / Human Interface Guidelines (Materials, Color,
   Buttons, Text fields, Pop-up buttons, Segmented controls, Toggles, Alerts,
   Sheets, Image wells). Carregado DEPOIS do style.css em todas as páginas.
   Regra de materiais (HIG › Materials): vidro (Liquid Glass) na camada de
   controles e navegação — barra do topo, botões, alertas, diálogos, menus,
   controles flutuantes; "materiais padrão" (fosco mais opaco) no conteúdo.
   O logotipo PREPROJETO é sempre a imagem original (não se reescreve).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* cores de sistema (claro) */
  --sys-blue: #0071e3;          /* botão principal (apple.com) */
  --sys-blue-hover: #0077ed;
  --sys-link: #0066cc;          /* link no texto */
  --sys-green: #34c759;
  --sys-orange: #ff9500;
  --sys-red: #ff3b30;
  --sys-yellow: #ffcc00;
  --sys-teal: #30b0c7;
  --sys-purple: #af52de;
  /* rótulos (label, secondary, tertiary) */
  --label: #1d1d1f;
  --label-2: #6e6e73;
  --label-3: #86868b;
  /* preenchimentos (fill, secondary, tertiary) */
  --fill: rgba(120,120,128,.20);
  --fill-2: rgba(120,120,128,.16);
  --fill-3: rgba(118,118,128,.12);
  /* fundos agrupados */
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --separator: rgba(60,60,67,.18);
  /* materiais */
  --glass: rgba(255,255,255,.62);
  --glass-clear: rgba(255,255,255,.28);
  --glass-dark: rgba(30,30,32,.55);
  --glass-blur: blur(24px) saturate(180%);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(0,0,0,.06);
  --glass-shadow: 0 8px 28px rgba(0,0,0,.10);
  --mat-thin: rgba(255,255,255,.72);
  --mat-regular: rgba(255,255,255,.82);
  --mat-thick: rgba(255,255,255,.92);
  /* raios */
  --r-ctl: 10px;   /* campos, pop-up */
  --r-card: 22px;  /* cartões grandes */
  --r-sheet: 26px; /* diálogos */
  /* tipografia (SF no Apple; Inter no Windows/Android) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", sans-serif;

  /* o style.css antigo lê estas — passam a apontar para o sistema novo */
  --paper: var(--bg);
  --ink: var(--label);
  --ink-2: #424245;
  --muted: var(--label-2);
  --line: var(--separator);
  --blue: var(--sys-blue);
  --display: var(--font-display);
  --body: var(--font);
  --serif: var(--font-display);
}

html, body { background: var(--bg); }
body { font-family: var(--font); color: var(--label); font-size: 17px; line-height: 1.47; letter-spacing: -0.022em; }
#confete { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; color: var(--label); }
h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.05; }
h2 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.08; }
h3 { line-height: 1.17; }
.muted { color: var(--label-2) !important; }
a:not(.btn):not(.vidro):not([class]) { color: var(--sys-link); }
::selection { background: rgba(0,113,227,.2); }
:focus-visible { outline: 4px solid rgba(0,113,227,.35); outline-offset: 2px; border-radius: 8px; }

/* ── Ícones (estilo SF Symbols) ─────────────────────────────────────────── */
.ic { width: 22px; height: 22px; display: inline-block; vertical-align: -0.2em; flex: none; }
.ic.g { width: 40px; height: 40px; }

/* ── Materiais ──────────────────────────────────────────────────────────── */
.mat-glass { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.mat-glass-clear { background: var(--glass-clear); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); box-shadow: var(--glass-edge); }
.mat-thin { background: var(--mat-thin); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.mat-regular { background: var(--mat-regular); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.mat-thick { background: var(--mat-thick); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
@media (prefers-reduced-transparency: reduce) {
  .mat-glass, .mat-glass-clear, .mat-thin, .mat-regular, .mat-thick, .vidro, .nav, .sub-nav, .alerta, dialog, .menu-vidro { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ── Barra de navegação (vidro, fixa no topo) ───────────────────────────── */
.nav { position: sticky !important; top: 0; background: rgba(251,251,253,.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.nav .wrap { height: 52px; }
.nav img { height: 16px; }
.nav nav { gap: 2px; }
.nav nav a.txt { font-size: 13px; color: var(--label); opacity: .82; padding: 7px 12px; border-radius: 980px; }
.nav nav a.txt:hover { opacity: 1; background: var(--fill-3); }
.nav .btn.sm { padding: 6px 14px; font-size: 13px; }

/* ── Botões ─────────────────────────────────────────────────────────────────
   .btn            = preenchido (azul) — ação principal
   .btn.cinza      = cinza (fill)       — ação secundária
   .btn.tingido    = azul claro          — secundária com cor
   .vidro / .btn.light / .btn.ghost = VIDRO (Liquid Glass)
   .btn.perigo     = destrutivo
   .btn.lg / .btn.sm  tamanhos;   .btn.block largura total                    */
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  background: var(--sys-blue); color: #fff; border-radius: 980px; padding: 11px 22px; font: inherit; font-size: 17px; font-weight: 400;
  line-height: 1.18; letter-spacing: -0.022em; box-shadow: none; transition: background .15s, transform .1s, box-shadow .15s; text-decoration: none; }
.btn:hover { background: var(--sys-blue-hover); transform: none; box-shadow: none; }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.off { opacity: .4; pointer-events: none; }
.btn.sm { padding: 7px 15px; font-size: 14px; }
.btn.lg { padding: 15px 30px; font-size: 19px; }
.btn.block { width: 100%; }
.btn.cinza { background: var(--fill-3); color: var(--label); }
.btn.cinza:hover { background: var(--fill-2); }
.btn.tingido { background: rgba(0,113,227,.12); color: var(--sys-blue); }
.btn.tingido:hover { background: rgba(0,113,227,.18); }
.btn.perigo { background: var(--sys-red); }
.btn.perigo.tingido { background: rgba(255,59,48,.12); color: var(--sys-red); }
.btn svg { width: 17px; height: 17px; }
.vidro, .btn.light, .btn.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  color: var(--label); border-radius: 980px; padding: 11px 21px; font: inherit; font-size: 17px; line-height: 1.18; text-decoration: none;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.vidro:hover, .btn.light:hover, .btn.ghost:hover { background: rgba(255,255,255,.82); box-shadow: var(--glass-edge), 0 10px 30px rgba(0,0,0,.12); }
.btn.ghost.sm, .btn.light.sm, .vidro.sm { padding: 7px 15px; font-size: 14px; }
.escuro .vidro, .preto .vidro, .vidro.escuro { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px rgba(0,0,0,.4); }
.escuro .vidro:hover, .preto .vidro:hover, .vidro.escuro:hover { background: rgba(255,255,255,.2); }
.mais { color: var(--sys-link); font-size: 17px; text-decoration: none; }
.mais:hover { text-decoration: underline; }
.mais::after { content: "\00a0›"; }
/* botão redondo só com ícone (ex.: fechar) */
.btn-ic { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; border: 0; cursor: pointer; color: var(--label);
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }

/* ── Campos de texto ────────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=url], input:not([type]), textarea, select {
  font: inherit; font-size: 17px; color: var(--label); background: var(--fill-3); border: 1px solid transparent !important; border-radius: var(--r-ctl) !important;
  padding: 11px 14px; width: 100%; box-shadow: none; transition: background .15s, box-shadow .15s; letter-spacing: -0.022em; }
input:hover, textarea:hover, select:hover { background: var(--fill-2); }
input:focus, textarea:focus, select:focus { outline: none !important; background: #fff; border-color: var(--sys-blue) !important; box-shadow: 0 0 0 4px rgba(0,113,227,.22) !important; }
input::placeholder, textarea::placeholder { color: var(--label-3); }
label { font-size: 14px; color: var(--label-2); font-weight: 500; }
input[aria-invalid=true], .campo-erro input { border-color: var(--sys-red) !important; box-shadow: 0 0 0 4px rgba(255,59,48,.18) !important; }
/* campo de busca (capsula com lupa) */
input[type=search], .cm-busca input { border-radius: 980px !important; padding-left: 38px; }
/* pop-up button / combo box */
select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 10 4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }

/* ── Caixa de seleção e rádio ───────────────────────────────────────────── */
input[type=checkbox]:not(.chave), input[type=radio] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; cursor: pointer;
  border: 1.5px solid rgba(60,60,67,.3); background: #fff; display: inline-grid; place-items: center; transition: background .15s, border-color .15s; vertical-align: middle; }
input[type=checkbox]:not(.chave) { border-radius: 6px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:not(.chave):checked, input[type=radio]:checked { background: var(--sys-blue); border-color: var(--sys-blue); }
input[type=checkbox]:not(.chave):checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: translateY(-1px) rotate(45deg); }
input[type=radio]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
/* chave liga/desliga (toggle iOS): <input type="checkbox" class="chave"> */
input.chave { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 980px; background: var(--fill); position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
input.chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform .2s; }
input.chave:checked { background: var(--sys-green); }
input.chave:checked::after { transform: translateX(20px); }

/* ── Controle segmentado ────────────────────────────────────────────────── */
.segmento { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill-3); gap: 0; }
.segmento > * { border: 0; background: transparent; border-radius: 7px; padding: 6px 16px; font: inherit; font-size: 13px; color: var(--label); cursor: pointer; text-decoration: none; }
.segmento > .on, .segmento > [aria-selected=true], .segmento input:checked + span { background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }

/* ── Avisos (alert / banner) ────────────────────────────────────────────── */
.alert { border-radius: 14px !important; border: 0 !important; padding: 14px 18px !important; font-size: 15px; background: var(--mat-regular) !important; backdrop-filter: blur(30px);
  box-shadow: var(--glass-edge), 0 4px 16px rgba(0,0,0,.06) !important; color: var(--label) !important; display: flex; gap: 10px; align-items: flex-start; }
.alert::before { content: ""; width: 20px; height: 20px; flex: none; margin-top: 1px; background: var(--sys-blue); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 6h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 6h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.alert.ok::before { background: var(--sys-green); }
.alert.err::before { background: var(--sys-red); }
/* alerta / diálogo (sheet) de vidro */
.alerta, dialog { border: 0; border-radius: var(--r-sheet); padding: 22px 20px 16px; max-width: 320px; text-align: center; color: var(--label);
  background: rgba(255,255,255,.78); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--glass-edge), 0 30px 80px rgba(0,0,0,.25); }
dialog::backdrop, .alerta-fundo { background: rgba(0,0,0,.25); backdrop-filter: blur(4px); }
.alerta h3, dialog h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.02em; }
.alerta p, dialog p { font-size: 13px; color: var(--label); margin: 0 0 18px; }
.alerta .acoes, dialog .acoes { display: grid; gap: 8px; }
/* o pop-up de agradecimento e a janela de foto da comunidade viram vidro */
.obg { background: rgba(255,255,255,.8) !important; backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: var(--glass-edge), 0 30px 80px rgba(0,0,0,.25) !important; border-radius: var(--r-sheet) !important; }
.obg-icone { background: var(--sys-blue) !important; border-radius: 14px !important; }

/* ── Image well (área de soltar arquivo / foto) ─────────────────────────── */
.image-well, .cm-midias-lista:empty { min-height: 0; }
.image-well { display: grid; place-items: center; gap: 6px; padding: 26px; border-radius: 14px; border: 2px dashed rgba(60,60,67,.22); background: var(--fill-3); color: var(--label-2); text-align: center; font-size: 14px; cursor: pointer; }
.image-well:hover, .image-well.arrastando { border-color: var(--sys-blue); background: rgba(0,113,227,.06); color: var(--sys-blue); }

/* ── Cartões e listas agrupadas (Settings) ──────────────────────────────── */
.panel-box:not(.cm-convite), .dl-card, .rec, .resumo-box, .cm-post, .cm-tut, .pc, .cm-esperando, .cm-vazio, .presente, .recusa, .promo {
  border: 0 !important; background: var(--bg-2) !important; border-radius: var(--r-card) !important; box-shadow: none !important; }
.panel-box.pad { padding: 28px !important; }
.kv dt { color: var(--label-2); }
.kv dd { color: var(--label); }
details { border-radius: 14px; }
details > summary { cursor: pointer; }
.tbl, table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
.tbl th, table th { text-align: left; font-weight: 600; color: var(--label-2); font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--separator); }
.tbl td, table td { padding: 11px 12px; border-bottom: 1px solid var(--separator); }
.tbl tr:last-child td { border-bottom: 0; }
.tag, .cm-selo { border-radius: 980px !important; }
.kpi { border-radius: var(--r-card) !important; background: var(--bg-2) !important; border: 0 !important; box-shadow: none !important; }

/* ── Seções da página inicial (estrutura apple.com) ─────────────────────── */
.tile { text-align: center; overflow: hidden; padding: 64px 22px 0; }
.tile h2 { font-size: clamp(40px, 5.2vw, 56px); margin: 0; line-height: 1.07; letter-spacing: -0.005em; }
.tile .tag-l { font-size: clamp(21px, 2.4vw, 28px); margin: 8px auto 0; max-width: 720px; line-height: 1.14; letter-spacing: .007em; font-weight: 400; }
.tile.preto { background: #000; color: #f5f5f7; } .tile.preto h2 { color: #f5f5f7; }
.tile.cinza { background: var(--bg-2); }
.tile .ctas { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 20px; }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
footer { background: var(--bg-2); font-size: 12px; color: var(--label-2); padding: 28px 0 40px; }
footer .wrap { border-top: 0 !important; }
footer a { color: var(--label); }

@media (prefers-reduced-motion: reduce) { .btn, .vidro, input.chave::after { transition: none; } }
.nav.oculto { transform: none !important; opacity: 1 !important; pointer-events: auto !important; } /* Apple: a barra fica sempre visível */

/* ── Página inicial ─────────────────────────────────────────────────────── */
.hero-a { text-align: center; padding: 64px 22px 0; overflow: hidden; }
.hero-a h1 { margin: 0 auto; max-width: none; line-height: 1; }
.logo-hero { display: block; height: clamp(48px, 7.4vw, 92px); width: auto; margin: 0 auto; }
.hero-tag { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; margin: 14px auto 0; max-width: 760px; }
.hero-preco { font-size: 17px; color: var(--label-2); margin: 12px auto 0; max-width: 640px; }
.hero-a .ctas { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.palco { position: relative; max-width: 980px; height: min(64vw, 640px); margin: 18px auto 0; border: 0; border-radius: 0; background: radial-gradient(60% 55% at 50% 58%, #e7effb 0%, #fff 72%) !important; aspect-ratio: auto !important; }
.palco canvas { width: 100%; height: 100%; display: block; cursor: grab; opacity: 1 !important; }
.palco canvas:active { cursor: grabbing; }
.controles { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 980px; white-space: nowrap;
  background: rgba(255,255,255,.55); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 10px 30px rgba(0,0,0,.12); }
.controles > * { display: inline-flex; align-items: center; gap: 6px; border-radius: 980px; padding: 8px 14px; font-size: 13px; color: var(--label); text-decoration: none; }
.controles a:hover { background: rgba(0,0,0,.06); }
.controles .ic { width: 16px; height: 16px; }
.palco.sem-3d { display: none; }

.progbar { background: #fff; padding: 22px 0 26px; }
.prog { border-radius: 980px !important; background: var(--bg-2) !important; border: 0 !important; box-shadow: none !important; }

.tile .pedido { max-width: 640px; margin: 30px auto 0; text-align: left; border-radius: 24px; padding: 20px 24px 24px; font-size: 19px; line-height: 1.42; }
.tile.preto .pedido { background: #1d1d1f; color: #f5f5f7; }
.tile.cinza .pedido { background: #fff; }
.pedido small { display: block; font-size: 12px; color: #86868b; margin-bottom: 8px; letter-spacing: 0; }
.tile-img { display: block; width: min(620px, 92%); margin: 40px auto 0; border-radius: 28px 28px 0 0; }
.painel-ia-a { max-width: 640px; margin: 36px auto 64px; text-align: left; border-radius: 26px; padding: 22px 24px 18px; color: #f5f5f7;
  background: rgba(255,255,255,.08); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.1); }
.painel-ia-a .pia-agora { display: flex; gap: 12px; align-items: flex-start; }
.painel-ia-a .pia-agora strong { display: block; font-size: 17px; }
.painel-ia-a .pia-agora small { color: #a1a1a6; font-size: 14px; }
.painel-ia-a .pulse { margin-top: 7px; background: #2997ff; box-shadow: 0 0 12px #2997ff; }
.painel-ia-a .pia-barra { height: 4px; margin: 14px 0 6px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.painel-ia-a .pia-barra i { display: block; height: 100%; background: #2997ff; border-radius: 4px; }
.painel-ia-a .pia-log { list-style: none; margin: 0; padding: 0; font-size: 15px; color: #a1a1a6; }
.painel-ia-a .pia-log li { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.1); }
.painel-ia-a .pia-log li:first-child { border-top: 0; }
.painel-ia-a time { width: 44px; color: #6e6e73; flex: none; }
.tile.preto .vidro { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px rgba(0,0,0,.4); }

.recursos { padding: 100px 22px 90px; background: var(--bg-2); text-align: center; }
.recursos h2 { margin: 0 0 56px; }
.grade { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 28px; text-align: left; }
.grade .ic.g { margin-bottom: 14px; color: var(--label); }
.grade .azul { color: var(--sys-blue) !important; } .grade .amarelo { color: #f5a623 !important; } .grade .ciano { color: #0a9ad6 !important; }
.grade .vermelho { color: #e5383b !important; } .grade .verde { color: #1a9c4a !important; } .grade .roxo { color: #8a4dd8 !important; }
.grade b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.grade span { font-size: 14px; color: var(--label-2); line-height: 1.43; display: block; }

/* loja: mesma função, visual de "compare os modelos" */
.loja { background: #fff; padding: 110px 0 90px; }
.loja h2 { font-weight: 600; letter-spacing: -0.02em; }
.loja .sub { color: var(--label-2); }
.plug-card { background: var(--bg-2) !important; border: 2px solid transparent !important; border-radius: var(--r-card) !important; box-shadow: none !important; transition: border-color .15s, background .15s; }
.plug-card:hover { background: #ededf0 !important; }
.plug input:checked + .plug-card, .plug.on .plug-card, .plug-card.on { border-color: var(--sys-blue) !important; background: #fff !important; }
.plug-ring { display: none !important; }
.plug-add { color: var(--sys-link) !important; }
.resumo-box { background: rgba(245,245,247,.72) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow) !important; }
.resumo-box h3 { text-transform: none !important; letter-spacing: -0.01em !important; font-size: 19px !important; color: var(--label) !important; font-weight: 600 !important; }
.opt { border-radius: 14px !important; border: 1px solid transparent !important; box-shadow: none !important; }
.opt.on, .opt:has(input:checked) { border-color: var(--sys-blue) !important; }
.opt-tag { background: var(--sys-orange) !important; color: #fff !important; border-radius: 980px !important; letter-spacing: 0 !important; text-transform: none !important; }
.cta-bar { background: rgba(251,251,253,.72) !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); color: var(--label) !important; box-shadow: 0 -1px 0 rgba(0,0,0,.06); }
.cta-bar b { color: var(--label) !important; }
.cta-bar .btn, .cta-bar a.btn { background: var(--sys-blue) !important; color: #fff !important; }

@media (max-width: 734px) {
  .grade { grid-template-columns: 1fr 1fr; gap: 32px 18px; }
  .palco { height: 92vw; }
  .tile .pedido { font-size: 17px; margin-left: 4px; margin-right: 4px; }
  .nav nav a.txt.hide-m { display: none; }
}
.opt:not(.melhor) { background: #fff !important; }
.opt.melhor { background: #1d1d1f !important; color: #f5f5f7 !important; border-color: transparent !important; }
.opt.melhor:has(input:checked) { box-shadow: 0 0 0 2px var(--sys-blue) !important; }
.painel-ia-a .pia-agora strong { color: #f5f5f7 !important; }
.hero-a h1 { display: flex; justify-content: center; }
.hero-a #hero-logo, .logo-hero { position: static !important; transform: none !important; opacity: 1 !important; margin: 0 auto !important; }

/* checkout da conta: planos e formas de pagamento como cartões brancos selecionáveis */
.ck-card { background: #fff !important; border: 2px solid transparent !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; transform: none !important; }
.ck-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08) !important; }
.ck-plan input:checked + .ck-card, .ck-method input:checked + .ck-card { border-color: var(--sys-blue) !important; }
.ck-badge { border-radius: 980px !important; background: var(--sys-orange) !important; color: #fff !important; }
.ck-badge.alt { background: rgba(0,113,227,.12) !important; color: var(--sys-blue) !important; }
.ck-step { text-transform: none !important; letter-spacing: -0.01em !important; font-size: 17px !important; color: var(--label) !important; font-weight: 600 !important; }
.ck-step span { background: var(--sys-blue) !important; color: #fff !important; }
.alert { flex-wrap: wrap; align-items: center !important; }
.alert > * { margin: 0; }
.cm-convite { align-self: start; }
/* Apple não usa rótulos em CAIXA ALTA com letras espaçadas */
body * { text-transform: none !important; }
.eyebrow, .tag, .presente-tag, .status, .cm-tut-tag, [class$="-tag"] { letter-spacing: -0.01em !important; }
.cm h1, .cm h2, .cm-topo h1, .cm-post h2 { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.025em !important; }
.cm-busca { background: var(--fill-3) !important; border: 0 !important; border-radius: 980px !important; box-shadow: none !important; }
.cm-busca input { background: transparent !important; box-shadow: none !important; border: 0 !important; padding-left: 4px !important; }
.cm-busca input:focus { box-shadow: none !important; }
.cm-busca:focus-within { box-shadow: 0 0 0 4px rgba(0,113,227,.22) !important; background: #fff !important; }
.cm-chips a { border-radius: 980px !important; }
.cm-chips a.on { background: var(--label) !important; color: #fff !important; }
.cm-novo, .cm-caixa, .cm-form { border-radius: var(--r-card) !important; }
/* anexar foto/vídeo/IFC: botão de vidro com o ícone (image well compacto) */
.cm-anexar { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 980px !important; padding: 7px 14px !important; font-size: 14px !important; cursor: pointer;
  background: var(--glass) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0,0,0,.06) !important; border: 0 !important; color: var(--label) !important; }
.cm-anexar:hover { background: rgba(255,255,255,.85) !important; }
.cm-midias-lista:not(:empty) { padding: 10px; border-radius: 14px; border: 2px dashed rgba(60,60,67,.22); background: var(--fill-3); }


/* ═══ iOS 27 (tokens do kit oficial, pacote @ios27_design_system/tokens, MIT) ════════════════════════════
   O site é claro: os valores claros são repetidos aqui para o modo escuro do computador não escurecer o vidro. */
:root, :root[data-theme] {
  color-scheme: light;
  --ios27-glass-transparency: 0.5;
  --ios27-glass-rim: rgba(219,219,219,1); --ios27-glass-rim-sm: rgba(235,235,235,1); --ios27-glass-rim-spread: .5px;
  --ios27-glass-inner: rgba(40,40,40,1);
  --ios27-glass-la-rgb: 255,255,255; --ios27-glass-la-alpha: .7; --ios27-glass-la-overlay: rgba(191,191,191,.1); --ios27-glass-la-shadow: 0 8px 48px rgba(0,0,0,.25);
  --ios27-glass-me-rgb: 255,255,255; --ios27-glass-me-alpha: .7; --ios27-glass-me-overlay: rgba(191,191,191,.1); --ios27-glass-me-shadow: 0 8px 48px rgba(0,0,0,.25);
  --ios27-glass-sm-rgb: 116,116,128; --ios27-glass-sm-alpha: .08; --ios27-glass-sm-overlay: transparent; --ios27-glass-sm-shadow: 0 8px 15px rgba(0,0,0,.02);
  --ios27-toolbar-rgb: 255,255,255; --ios27-toolbar-alpha: .85; --ios27-toolbar-edge: rgba(0,0,0,.05);
  --ios27-material-thick-rgb: 255,255,255; --ios27-material-thick-alpha: .84; --ios27-material-thick-overlay: rgba(255,255,255,.34);
  --ios27-material-regular-rgb: 255,255,255; --ios27-material-regular-alpha: .6; --ios27-material-regular-overlay: rgba(255,255,255,.25);
  /* cores do kit no nosso sistema (o azul de botão continua #0071e3: o #0088ff do iOS dá contraste 3,5:1 com texto branco, abaixo de 4,5:1) */
  --label: #1d1d1f; --label-2: rgba(60,60,67,.72); --label-3: rgba(60,60,67,.45);
  --fill: #78788033; --fill-2: #78788029; --fill-3: #7676801f;
  --bg-2: #f5f5f7; --separator: #0000001f;
  --sys-green: #34c759; --sys-red: #ff383c; --sys-orange: #ff8d28; --sys-yellow: #ffcc00; --sys-teal: #00c3d0; --sys-purple: #cb30e0;
}
/* vidro do kit nos controles (Liquid Glass "me": botões, barras flutuantes) */
.vidro, .btn.light, .btn.ghost, .controles, .cm-anexar, .btn-ic, .painel-ia-a-claro {
  backdrop-filter: blur(calc(6px * calc(.5 + .8 * var(--ios27-glass-transparency)))) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(calc(6px * calc(.5 + .8 * var(--ios27-glass-transparency)))) saturate(1.8) !important;
  background-color: rgba(var(--ios27-glass-me-rgb), calc(var(--ios27-glass-me-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency)))) !important;
  background-image: linear-gradient(var(--ios27-glass-me-overlay), var(--ios27-glass-me-overlay)) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 0 0 var(--ios27-glass-rim-spread) var(--ios27-glass-rim), inset 0 40px 10px -40px var(--ios27-glass-inner), inset 0 -40px 10px -40px var(--ios27-glass-inner) !important;
}
.vidro:hover, .btn.light:hover, .btn.ghost:hover, .cm-anexar:hover { box-shadow: 0 10px 34px rgba(0,0,0,.16), 0 0 0 var(--ios27-glass-rim-spread) var(--ios27-glass-rim), inset 0 40px 10px -40px var(--ios27-glass-inner), inset 0 -40px 10px -40px var(--ios27-glass-inner) !important; }
/* vidro escuro (sobre os blocos pretos) */
.tile.preto .vidro, .escuro .vidro, .vidro.escuro {
  background-color: rgba(26,26,26,.7) !important; background-image: none !important; color: #fff !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 0 .5px rgba(166,166,166,1), inset 0 40px 10px -40px rgba(26,26,26,1), inset 0 -40px 10px -40px rgba(26,26,26,1) !important; }
/* barra do topo: toolbar uniforme do kit */
.nav { background: rgba(var(--ios27-toolbar-rgb), calc(var(--ios27-toolbar-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency)))) !important;
  backdrop-filter: blur(calc(6px * calc(.5 + .8 * var(--ios27-glass-transparency)))) saturate(1.8); -webkit-backdrop-filter: blur(calc(6px * calc(.5 + .8 * var(--ios27-glass-transparency)))) saturate(1.8);
  box-shadow: none; border-bottom: 1px solid var(--ios27-toolbar-edge); }
.cta-bar { background: rgba(var(--ios27-toolbar-rgb), calc(var(--ios27-toolbar-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency)))) !important; border-top: 1px solid var(--ios27-toolbar-edge); }
/* alertas, diálogos e pop-ups: vidro grande "la" do kit, cantos 34 */
.alerta, dialog, .obg {
  backdrop-filter: blur(calc(6px * calc(.5 + .8 * var(--ios27-glass-transparency)))) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(calc(6px * calc(.5 + .8 * var(--ios27-glass-transparency)))) saturate(1.8) !important;
  background-color: rgba(var(--ios27-glass-la-rgb), calc(var(--ios27-glass-la-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency)))) !important;
  background-image: linear-gradient(var(--ios27-glass-la-overlay), var(--ios27-glass-la-overlay)) !important;
  border-radius: 34px !important;
  box-shadow: var(--ios27-glass-la-shadow), 0 0 0 var(--ios27-glass-rim-spread) var(--ios27-glass-rim), inset 0 40px 10px -40px var(--ios27-glass-inner), inset 0 -40px 10px -40px var(--ios27-glass-inner) !important; }
.obg-fundo, dialog::backdrop { background: #29293a3b !important; }
/* resumo do plano (cartão flutuante da loja): material grosso do kit */
.resumo-box {
  backdrop-filter: blur(calc(100px * calc(.5 + .8 * var(--ios27-glass-transparency)))) !important;
  -webkit-backdrop-filter: blur(calc(100px * calc(.5 + .8 * var(--ios27-glass-transparency)))) !important;
  background-color: rgba(var(--ios27-material-thick-rgb), calc(var(--ios27-material-thick-alpha) * calc(1.6 + -1.1 * var(--ios27-glass-transparency)))) !important;
  background-image: linear-gradient(var(--ios27-material-thick-overlay), var(--ios27-material-thick-overlay)) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,.12), 0 0 0 .5px var(--ios27-glass-rim) !important; border-radius: 34px !important; }
/* campos: medidas do kit (altura 44, cantos 10/12) */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], input:not([type]), select { min-height: 44px; }
.btn { min-height: 44px; } .btn.sm { min-height: 34px; } .btn.lg { min-height: 50px; }
@media (prefers-reduced-transparency: reduce) { :root { --ios27-glass-transparency: 0; } }

/* ═══ Revisão 19/10 (tarde): vidro claro de verdade, sem bordas escuras; loja que vende ═══════════════ */
/* vidro claro (botões e controles): translúcido + brilho na borda de cima + contorno finíssimo */
.vidro, .btn.light, .btn.ghost, .controles, .cm-anexar, .btn-ic {
  color: var(--label) !important;
  background-color: rgba(255,255,255,.58) !important; background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12)) !important;
  backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 .5px rgba(0,0,0,.12), 0 6px 20px rgba(0,0,0,.08) !important; }
.vidro:hover, .btn.light:hover, .btn.ghost:hover, .cm-anexar:hover {
  background-color: rgba(255,255,255,.78) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 .5px rgba(0,0,0,.14), 0 10px 28px rgba(0,0,0,.12) !important; }
/* vidro escuro (blocos pretos) */
.tile.preto .vidro, .escuro .vidro, .vidro.escuro {
  color: #fff !important; background-color: rgba(255,255,255,.1) !important; background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.5) !important; }
.tile.preto .vidro:hover { background-color: rgba(255,255,255,.18) !important; }
/* barra do topo: vidro claro do apple.com (o conteúdo aparece borrado por trás) */
.nav { background: rgba(255,255,255,.72) !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 0 !important; box-shadow: 0 .5px 0 rgba(0,0,0,.12) !important; }
.nav nav a.txt { color: var(--label) !important; opacity: .85; }
.cta-bar { background: rgba(255,255,255,.72) !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; box-shadow: 0 -.5px 0 rgba(0,0,0,.12) !important; border: 0 !important; }
/* alertas/diálogos: vidro claro grande, sem sombreado escuro interno */
.alerta, dialog, .obg { background-color: rgba(255,255,255,.82) !important; background-image: none !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.1), 0 24px 70px rgba(0,0,0,.22) !important; }

/* ── Loja ───────────────────────────────────────────────────────────────── */
.loja-prova { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 18px; padding: 7px 14px 7px 8px; border-radius: 980px; font-size: 14px; color: var(--label);
  background: rgba(52,199,89,.1); }
.loja-prova .pontos { display: inline-flex; }
.loja-prova .pontos i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; margin-left: -6px; background: linear-gradient(135deg, #8fd3a6, #34c759); }
.loja-prova .pontos i:first-child { margin-left: 0; background: linear-gradient(135deg, #9cc7ff, #0071e3); }
.loja-prova .pontos i:nth-child(2) { background: linear-gradient(135deg, #ffd59a, #ff8d28); }
/* resumo: cartão branco elevado (sem vidro cinza) */
.resumo-box { background: #fff !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-radius: 28px !important; padding: 22px !important; box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 20px 50px -20px rgba(0,0,0,.25) !important; }
.resumo-box h3 { font-size: 21px !important; margin: 0 0 14px 2px !important; }
.opt { background: var(--bg-2) !important; color: var(--label) !important; border: 2px solid transparent !important; border-radius: 18px !important; margin-top: 10px !important; }
.opt .opt-preco b, .opt .opt-txt b { color: var(--label) !important; }
.opt .opt-sub, .opt .opt-det, .opt .opt-preco small { color: var(--label-2) !important; }
.opt:has(input:checked) { background: #fff !important; border-color: var(--sys-blue) !important; box-shadow: 0 0 0 4px rgba(0,113,227,.12) !important; }
.opt-dot { border-color: rgba(60,60,67,.3) !important; }
.opt:has(input:checked) .opt-dot { border-color: var(--sys-blue) !important; background: var(--sys-blue) !important; box-shadow: inset 0 0 0 4px #fff !important; }
/* vitalício: a âncora — cartão escuro grande, selo laranja, economia em verde */
.opt.melhor { background: linear-gradient(160deg, #1d1d1f 0%, #2c2c2e 100%) !important; color: #f5f5f7 !important; padding-top: 26px !important; margin-top: 18px !important; }
.opt.melhor .opt-txt b, .opt.melhor .opt-preco b { color: #fff !important; }
.opt.melhor .opt-preco b { font-size: 26px !important; }
.opt.melhor .opt-sub, .opt.melhor .opt-det, .opt.melhor .opt-preco small { color: rgba(245,245,247,.72) !important; }
.opt.melhor:has(input:checked) { background: linear-gradient(160deg, #1d1d1f 0%, #2c2c2e 100%) !important; border-color: var(--sys-blue) !important; box-shadow: 0 0 0 4px rgba(0,113,227,.25), 0 16px 40px -16px rgba(0,0,0,.5) !important; }
.opt.melhor .opt-dot { border-color: rgba(255,255,255,.45) !important; }
.opt.melhor:has(input:checked) .opt-dot { box-shadow: inset 0 0 0 4px #1d1d1f !important; }
.opt-tag { position: absolute; top: -11px; left: 16px; right: auto !important; padding: 4px 10px !important; font-size: 12px !important; font-weight: 600 !important;
  background: linear-gradient(90deg, #ff8d28, #ff5e3a) !important; color: #fff !important; border-radius: 980px !important; box-shadow: 0 4px 12px rgba(255,94,58,.35); }
.opt-economia { grid-column: 1 / -1; display: block; margin-top: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.35; color: #30d158; background: rgba(48,209,88,.12); }
.resumo .btn#go { min-height: 52px; font-size: 18px; font-weight: 500; margin-top: 16px; }
.resumo-dica { color: var(--label-2) !important; font-size: 13px !important; }
.resumo-fine { color: var(--label-2) !important; text-align: center; }
.confianca { list-style: none; margin: 14px 0 0; padding: 14px 4px 0; border-top: .5px solid var(--separator); display: grid; gap: 9px; text-align: left; }
.confianca li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--label); line-height: 1.3; }
.confianca svg { width: 20px; height: 20px; flex: none; color: #f5a623; }
.confianca li:nth-child(2) svg { color: var(--sys-blue); }
.aviso { background: rgba(255,141,40,.1) !important; border: 0 !important; border-radius: 16px !important; color: var(--label) !important; }
.aviso-btn { background: var(--sys-blue) !important; color: #fff !important; border-radius: 980px !important; border: 0 !important; padding: 7px 14px !important; }
/* cartões dos programas: com "Incluído" quando o plano é anual/vitalício */
.loja.todos .plug-card, .loja-grid.todos .plug-card { border-color: rgba(52,199,89,.5) !important; background: #fff !important; }
.loja-grid.todos .plug-add { color: #1a9c4a !important; font-weight: 600; }
.plug-card { box-shadow: 0 0 0 .5px rgba(0,0,0,.06) !important; }
.plug-card b, .plug-nome b { color: var(--label) !important; }
.plug-desc { color: var(--label-2) !important; }
/* Polycam na lateral escura da comunidade: contraste */
.pc-lado { background: rgba(255,255,255,.08) !important; }
.pc-lado .pc-txt { color: rgba(255,255,255,.86) !important; }
/* resumo do plano: preço à direita na 1ª linha; descrição e detalhes ocupam a largura toda embaixo */
.loja-grid { grid-template-columns: minmax(0, 1fr) 380px !important; gap: 22px !important; }
.opt { grid-template-columns: 22px minmax(0, 1fr) auto !important; row-gap: 3px !important; padding: 14px 14px 14px 12px !important; }
.opt-txt { grid-column: 2; } .opt-preco { grid-column: 3; }
.opt-sub { grid-column: 2 / -1 !important; }
.opt-det { grid-column: 2 / -1 !important; text-align: left !important; white-space: normal !important; font-size: 12px !important; }
.opt-economia { grid-column: 2 / -1 !important; }
@media (max-width: 900px) { .loja-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) { .resumo { order: -1; } .loja-grid { display: flex !important; flex-direction: column; } .plug-dev { display: none; } }

/* ── Recuperar vendas (20/10/2026): oferta preta, WhatsApp, painel ── */
.oferta-preta { margin: 22px 0; padding: 30px 30px 26px; border-radius: 26px; color: #f5f5f7; background: radial-gradient(120% 90% at 85% -10%, #2b2d33 0%, #111214 55%, #000 100%); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 20px 50px rgba(0,0,0,.18); }
.oferta-preta .op-tag { display: inline-block; margin: 0 0 14px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #ffd60a; background: rgba(255,214,10,.12); border: 1px solid rgba(255,214,10,.28); }
.oferta-preta h3 { margin: 0 0 8px; font: 600 clamp(24px, 3vw, 32px)/1.12 var(--display); letter-spacing: -.03em; color: #fff; }
.oferta-preta .op-txt { margin: 0 0 18px; color: rgba(245,245,247,.72); font-size: 16px; max-width: 58ch; }
.op-plugins { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.op-plug { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); cursor: pointer; font-size: 15px; color: #fff; }
.op-plug small { color: rgba(245,245,247,.55); font-size: 13px; }
.op-plug:has(input:checked) { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.op-plug input { accent-color: #fff; margin: 0; }
.op-acoes { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.op-btn { font: inherit; font-size: 16px; padding: 14px 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,.9); background: #fff; color: #000; cursor: pointer; }
.op-btn:hover { background: #e8e8ed; }
.op-btn:disabled, .op-pix:disabled { opacity: .4; cursor: default; }
.op-pix { font: inherit; font-size: 15px; background: none; border: 0; color: #fff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.zap-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0; padding: 16px 18px; border-radius: 20px; background: var(--cinza); }
.zap-txt { flex: 1 1 260px; display: flex; flex-direction: column; }
.zap-txt span { color: var(--muted); font-size: 14px; }
.zap-card input[type=tel] { flex: 0 1 200px; margin: 0; }
.zap-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.promo-motivo { max-width: 260px; font-size: 14px !important; padding: 6px 10px !important; margin-right: 10px; }
.camp-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; }
.camp-img { width: 100%; border-radius: 16px; display: block; }
.camp-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.camp-acoes form { margin: 0; }
@media (max-width: 700px) { .camp-grid { grid-template-columns: 1fr; } .oferta-preta { padding: 24px 20px; } }

/* 01/11/2026: vídeo do post aparece e toca direto no feed */
.cm-feed-video { margin: 12px 0 4px; border-radius: 16px; overflow: hidden; background: #000; }
.cm-feed-video video { display: block; width: 100%; max-height: 70vh; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }

/* botão de cancelar fácil no topo da conta */
.cancelar-facil{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0 0;padding:12px 16px;border-radius:14px;background:#f5f5f7;font-size:14px;color:#1d1d1f}