/* ARQUIVO: brasil-latente-styles.css */
/* FUNÇÃO: estilos globais compartilhados por todos os atos */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;1,9..144,200;1,9..144,300;1,9..144,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=IBM+Plex+Mono:wght@300;400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #1c160c;
  --paper:   #f4ead4;
  --sepia:   #e3cfa8;
  --gold:    rgba(226,190,111,0.95);
  --red:     #b63a32;
  --border:  rgba(218,174,86,0.36);
  --prata:   #dfd5c0;
}

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--paper);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: 'EB Garamond', serif;
}

/* Tira de filme — esquerda */
.tira-filme {
  position: fixed; top: 0; left: 2rem;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--prata) 10%, var(--prata) 90%, transparent);
  opacity: .28; z-index: 10; pointer-events: none;
}
.tira-filme::before, .tira-filme::after {
  content: ""; position: absolute; left: -3px;
  width: 7px; height: 7px;
  border: 1px solid var(--prata); border-radius: 50%; background: var(--bg);
}
.tira-filme::before { top: 10%; }
.tira-filme::after  { bottom: 10%; }

/* Grão de filme */
.grao { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.026; }

/* Medidor */
.medidor {
  position: fixed; top: 20px; right: 28px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  color: rgba(226,190,111,0.82); letter-spacing: 0.2em; z-index: 200; text-transform: uppercase;
}

/* Progress bar */
.progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 1px; background: rgba(218,174,86,0.24); z-index: 200; }
.progress-bar-fill { height: 100%; background: rgba(226,190,111,0.78); transition: width 0.6s ease; }

/* Botão nav — inferior direito */
.nav-btn {
  position: fixed; bottom: 32px; right: 32px;
  background: transparent;
  border: 1px solid rgba(226,190,111,0.62);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 300;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 13px 26px; cursor: pointer; z-index: 100;
  transition: background 0.28s, color 0.28s, border-color 0.28s, letter-spacing 0.32s;
}
.nav-btn:hover {
  background: var(--paper); border-color: var(--paper);
  color: var(--bg); letter-spacing: 0.38em;
}
.nav-btn:disabled { opacity: 0.2; cursor: default; pointer-events: none; }

/* Botão voltar — inferior esquerdo */
.back-btn {
  position: fixed; bottom: 30px; left: 30px;
  background: transparent; border: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(226,190,111,0.76); cursor: pointer; z-index: 100;
  transition: color 0.25s; text-decoration: none;
}
.back-btn:hover { color: rgba(210,178,106,1); }

/* Tipografia */
.display {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: var(--paper); letter-spacing: -0.02em; line-height: 1.05;
}
.body-text {
  font-family: 'EB Garamond', serif;
  font-size: clamp(15px, 1.75vw, 18px);
  color: var(--sepia); line-height: 1.85;
}
.body-italic {
  font-family: 'EB Garamond', serif; font-style: italic;
  font-size: clamp(15px, 1.75vw, 18px); color: #e8cd99; line-height: 1.8;
}
.mono-sm {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 300;
  color: rgba(226,190,111,0.86); letter-spacing: 0.18em; text-transform: uppercase;
}

/* Citação borda vermelha */
.citacao {
  border-left: 2px solid var(--red);
  padding: 1rem 0 1rem 1.5rem; margin: 1.5rem 0;
  font-family: 'EB Garamond', serif; font-style: italic;
  font-size: clamp(17px, 1.95vw, 21px); color: var(--sepia); line-height: 1.82;
}
.citacao cite {
  display: block; margin-top: 0.6rem; font-style: normal;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--prata); opacity: 0.9;
}

/* Badges */
.badge {
  display: inline-block; font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid; margin-bottom: 16px;
}
.badge-real        { border-color: rgba(190,165,110,0.6); color: rgba(215,188,130,1); }
.badge-alternativo { border-color: rgba(122,184,168,0.55); color: rgba(150,210,195,1); }

/* Cards de escolha */
.choice-card {
  border: 1px solid var(--border); padding: 28px 24px;
  text-align: left; cursor: pointer; background: transparent;
  color: var(--paper); width: 100%;
  position: relative; overflow: hidden;
  transition: filter 0.22s ease, border-color 0.22s, opacity 0.35s;
}
.choice-card:hover {
  filter: invert(1);
  border-color: rgba(237,227,202,0.65);
}
.card-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(226,190,111,0.9); display: block; margin-bottom: 12px;
  position: relative; z-index: 1;
}
.card-text {
  font-family: 'EB Garamond', serif; font-size: clamp(14px,1.7vw,17px);
  color: var(--sepia); line-height: 1.7; margin: 0;
  position: relative; z-index: 1;
}

/* Linha separadora */
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.rule-text {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(226,190,111,0.88); white-space: nowrap;
}
.rule-line { flex: 1; height: 1px; background: rgba(218,174,86,0.3); }

/* Barra de progresso da mecânica */
.mec-bar-wrap { height: 1px; background: rgba(218,174,86,0.24); position: relative; overflow: hidden; margin-top: 14px; }
.mec-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(226,190,111,0.82); transition: width 0.12s; }
.mec-caption {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  color: rgba(226,190,111,0.92); letter-spacing: 0.14em;
  margin-top: 10px; text-align: center; transition: color 0.4s;
}

/* Alerta de movimento */
.movimento-alerta {
  position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--red);
  background: rgba(14,11,6,0.94); padding: 8px 18px;
  border: 1px solid rgba(155,32,32,0.7);
  opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap; z-index: 20;
}
.movimento-alerta.vis { opacity: 1; }

/* Vintage frame */
.vintage-frame {
  position: relative; width: 100%; aspect-ratio: 4/3;
  overflow: hidden; background: #171107;
  border: 1px solid rgba(218,174,86,0.28); cursor: crosshair; user-select: none;
}
.vintage-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 42% 36%, hsl(38deg 24% 24%) 0%, hsl(38deg 20% 12%) 70%); }
.vintage-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vintage-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.45; pointer-events: none; mix-blend-mode: overlay; }
.vintage-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 22%, rgba(0,0,0,0.52) 100%); pointer-events: none; }
.vintage-dark { position: absolute; inset: 0; pointer-events: none; transition: background 0.12s ease-out; }
.vintage-label {
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  color: rgba(226,190,111,0.78); letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.5; pointer-events: none; transition: opacity 0.4s;
}

/* Dossiê header */
.dossie-header { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; opacity: 0.9; }
.dossie-stamp {
  display: inline-block; border: 1px solid rgba(155,32,32,0.45); padding: 3px 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 0.22em;
  color: rgba(155,32,32,0.8); text-transform: uppercase; transform: rotate(-1.5deg); margin-bottom: 24px;
}

/* Before/after slider */
.ba-container {
  position: relative; width: 100%; aspect-ratio: 16/9;
  overflow: hidden; cursor: ew-resize; user-select: none;
  border: 1px solid rgba(190,150,70,0.18);
}
.ba-before, .ba-after {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ba-before { clip-path: inset(0 50% 0 0); }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--paper); z-index: 10;
  transform: translateX(-50%);
}
.ba-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(14,11,6,0.92); border: 1px solid var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.ba-label-before, .ba-label-after {
  position: absolute; bottom: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237,227,202,0.8); background: rgba(14,11,6,0.75); padding: 3px 8px;
}
.ba-label-before { left: 12px; }
.ba-label-after  { right: 12px; }

/* Controls abstratos (ato 07) */
.controls-wrap { display: flex; gap: 40px; align-items: center; }
.control-group { display: flex; flex-direction: column; gap: 8px; }
.control-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(210,178,106,0.8); }

/* Stare timer (ato 08) */
.stare-frame {
  position: relative; width: 100%; aspect-ratio: 4/3;
  overflow: hidden; border: 1px solid rgba(190,150,70,0.18);
  cursor: none;
}
.stare-ring {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.stare-circle {
  width: 80px; height: 80px; border-radius: 50%;
  border: 1px solid rgba(210,178,106,0.4); position: relative;
  display: flex; align-items: center; justify-content: center;
}
.stare-fill {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(155,32,32,0.6) var(--pct, 0%), transparent var(--pct, 0%));
}
.stare-num {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 200;
  font-size: 28px; color: var(--paper); z-index: 1; line-height: 1;
}

/* Range inputs */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1px; background: rgba(190,150,70,0.28); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(210,178,106,0.9); cursor: pointer; transition: background 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover { background: var(--paper); }

/* Grids */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.conseq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: center; }

/* Animações */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; animation: fadeUp 0.65s ease forwards; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tela.ativa > * { animation: slideUp 0.55s ease forwards; }

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--paper);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: 'EB Garamond', serif;
}

/* Tira de filme — esquerda */
.tira-filme {
  position: fixed; top: 0; left: 2rem;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--prata) 10%, var(--prata) 90%, transparent);
  opacity: .22; z-index: 10; pointer-events: none;
}
.tira-filme::before, .tira-filme::after {
  content: ""; position: absolute; left: -3px;
  width: 7px; height: 7px;
  border: 1px solid var(--prata); border-radius: 50%; background: var(--bg);
}
.tira-filme::before { top: 10%; }
.tira-filme::after  { bottom: 10%; }

/* Grão de filme */
.grao { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.026; }

/* Medidor */
.medidor {
  position: fixed; top: 20px; right: 28px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  color: rgba(226,190,111,0.82); letter-spacing: 0.2em; z-index: 200; text-transform: uppercase;
}

/* Progress bar */
.progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 1px; background: rgba(218,174,86,0.24); z-index: 200; }
.progress-bar-fill { height: 100%; background: rgba(226,190,111,0.78); transition: width 0.6s ease; }

/* Botão nav — inferior direito */
.nav-btn {
  position: fixed; bottom: 32px; right: 32px;
  background: transparent;
  border: 1px solid rgba(226,190,111,0.62);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 300;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 13px 26px; cursor: pointer; z-index: 100;
  transition: background 0.28s, color 0.28s, border-color 0.28s, letter-spacing 0.32s;
}
.nav-btn:hover {
  background: var(--paper); border-color: var(--paper);
  color: var(--bg); letter-spacing: 0.38em;
}
.nav-btn:disabled { opacity: 0.2; cursor: default; pointer-events: none; }

/* Botão voltar — inferior esquerdo */
.back-btn {
  position: fixed; bottom: 30px; left: 30px;
  background: transparent; border: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(226,190,111,0.76); cursor: pointer; z-index: 100;
  transition: color 0.25s; text-decoration: none;
}
.back-btn:hover { color: rgba(200,168,96,0.9); }

/* Tipografia */
.display {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: var(--paper); letter-spacing: -0.02em; line-height: 1.05;
}
.body-text {
  font-family: 'EB Garamond', serif;
  font-size: clamp(15px, 1.75vw, 18px);
  color: var(--sepia); line-height: 1.85;
}
.body-italic {
  font-family: 'EB Garamond', serif; font-style: italic;
  font-size: clamp(15px, 1.75vw, 18px); color: #e8cd99; line-height: 1.8;
}
.mono-sm {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 300;
  color: rgba(226,190,111,0.86); letter-spacing: 0.18em; text-transform: uppercase;
}

/* Citação borda vermelha */
.citacao {
  border-left: 2px solid var(--red);
  padding: 1rem 0 1rem 1.5rem; margin: 1.5rem 0;
  font-family: 'EB Garamond', serif; font-style: italic;
  font-size: clamp(17px, 1.95vw, 21px); color: var(--sepia); line-height: 1.82;
}
.citacao cite {
  display: block; margin-top: 0.6rem; font-style: normal;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--prata); opacity: 0.95;
}

/* Badges */
.badge {
  display: inline-block; font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid; margin-bottom: 16px;
}
.badge-real   { border-color: rgba(218,174,86,0.64); color: rgba(230,200,142,1); }
.badge-alternativo { border-color: rgba(122,184,168,0.58); color: rgba(154,218,202,1); }

/* Cards de escolha */
.choice-card {
  border: 1px solid var(--border); padding: 28px 24px;
  text-align: left; cursor: pointer; background: transparent;
  color: var(--paper); width: 100%;
  position: relative; overflow: hidden;
  transition: filter 0.22s ease, border-color 0.22s, opacity 0.35s;
}
.choice-card:hover {
  filter: invert(1);
  border-color: rgba(244,234,212,0.68);
}
.card-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(226,190,111,0.88); display: block; margin-bottom: 12px;
  position: relative; z-index: 1;
}
.card-text {
  font-family: 'EB Garamond', serif; font-size: clamp(14px,1.7vw,17px);
  color: var(--sepia); line-height: 1.7; margin: 0;
  position: relative; z-index: 1;
}

/* Linha separadora */
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.rule-text {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(226,190,111,0.88); white-space: nowrap;
}
.rule-line { flex: 1; height: 1px; background: rgba(218,174,86,0.3); }

/* Barra de progresso da mecânica */
.mec-bar-wrap { height: 1px; background: rgba(218,174,86,0.24); position: relative; overflow: hidden; margin-top: 14px; }
.mec-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(226,190,111,0.82); transition: width 0.12s; }
.mec-caption {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  color: rgba(226,190,111,0.92); letter-spacing: 0.14em;
  margin-top: 10px; text-align: center; transition: color 0.4s;
}

/* Alerta de movimento */
.movimento-alerta {
  position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--red);
  background: rgba(22,16,8,0.92); padding: 8px 18px;
  border: 1px solid rgba(139,26,26,0.6);
  opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap; z-index: 20;
}
.movimento-alerta.vis { opacity: 1; }

/* Vintage frame */
.vintage-frame {
  position: relative; width: 100%; aspect-ratio: 4/3;
  overflow: hidden; background: #171107;
  border: 1px solid rgba(218,174,86,0.28); cursor: crosshair; user-select: none;
}
.vintage-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 42% 36%, hsl(38deg 24% 24%) 0%, hsl(38deg 20% 12%) 70%); }
.vintage-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vintage-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.45; pointer-events: none; mix-blend-mode: overlay; }
.vintage-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 22%, rgba(0,0,0,0.52) 100%); pointer-events: none; }
.vintage-dark { position: absolute; inset: 0; pointer-events: none; transition: background 0.12s ease-out; }
.vintage-label {
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  color: rgba(226,190,111,0.78); letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.5; pointer-events: none; transition: opacity 0.4s;
}

/* Dossiê header */
.dossie-header { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; opacity: 0.9; }
.dossie-stamp {
  display: inline-block; border: 1px solid rgba(139,26,26,0.35); padding: 3px 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 0.22em;
  color: rgba(139,26,26,0.65); text-transform: uppercase; transform: rotate(-1.5deg); margin-bottom: 24px;
}

/* Before/after slider */
.ba-container {
  position: relative; width: 100%; aspect-ratio: 16/9;
  overflow: hidden; cursor: ew-resize; user-select: none;
  border: 1px solid rgba(180,140,60,0.12);
}
.ba-before, .ba-after {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ba-before { clip-path: inset(0 50% 0 0); }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--paper); z-index: 10;
  transform: translateX(-50%);
}
.ba-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(22,16,8,0.9); border: 1px solid var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.ba-label-before, .ba-label-after {
  position: absolute; bottom: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244,234,212,0.84); background: rgba(22,16,8,0.72); padding: 3px 8px;
}
.ba-label-before { left: 12px; }
.ba-label-after  { right: 12px; }

/* Controls abstratos (ato 07) */
.controls-wrap { display: flex; gap: 40px; align-items: center; }
.control-group { display: flex; flex-direction: column; gap: 8px; }
.control-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(226,190,111,0.78); }

/* Stare timer (ato 08) */
.stare-frame {
  position: relative; width: 100%; aspect-ratio: 4/3;
  overflow: hidden; border: 1px solid rgba(180,140,60,0.12);
  cursor: none;
}
.stare-ring {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.stare-circle {
  width: 80px; height: 80px; border-radius: 50%;
  border: 1px solid rgba(200,168,96,0.3); position: relative;
  display: flex; align-items: center; justify-content: center;
}
.stare-fill {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(139,26,26,0.5) var(--pct, 0%), transparent var(--pct, 0%));
}
.stare-num {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 200;
  font-size: 28px; color: var(--paper); z-index: 1; line-height: 1;
}

/* Range inputs */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1px; background: rgba(180,140,60,0.22); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(200,168,96,0.85); cursor: pointer; transition: background 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover { background: var(--paper); }

/* Grids */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.conseq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: center; }

/* Animações */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; animation: fadeUp 0.65s ease forwards; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tela.ativa > * { animation: slideUp 0.55s ease forwards; }

/* Clareza global para elementos com estilos inline herdados dos atos */
p.body-italic[style*="color:#c8ae82"] {
  color: #e8cd99 !important;
}

p.mono-sm[style*="rgba(200,168,96,0.75)"] {
  color: rgba(226,190,111,0.86) !important;
}

.vintage-frame > div[style*="radial-gradient(ellipse at 42% 36%"] {
  filter: brightness(1.28) saturate(1.08);
}

.vintage-frame > div[style*="radial-gradient(ellipse at 50% 42%"] {
  background: radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(0,0,0,0.52) 100%) !important;
}

.vintage-frame > div[style*="font-family:'IBM Plex Mono'"] {
  color: rgba(226,190,111,0.82) !important;
}

.vintage-frame svg {
  filter: brightness(1.14) contrast(1.04);
}

.ba-container,
.stare-frame {
  border-color: rgba(218,174,86,0.28);
  background: #171107;
}

.ba-layer,
.stare-visual svg {
  filter: brightness(1.15) contrast(1.04);
}

/* Leitura: mantém a voz em itálico, mas aumenta o corpo do texto */
.body-text,
.tela p.body-text {
  font-size: clamp(17px, 1.95vw, 20px) !important;
  line-height: 1.9 !important;
}

.body-italic,
.tela p.body-italic {
  font-size: clamp(18px, 2vw, 23px) !important;
  line-height: 1.85 !important;
}

.tela p.body-italic[style*="2.2vw"] {
  font-size: clamp(20px, 2.45vw, 27px) !important;
  line-height: 1.65 !important;
}

.tela p.body-italic[style*="2.4vw"] {
  font-size: clamp(21px, 2.7vw, 30px) !important;
  line-height: 1.58 !important;
}

.citacao,
.tela .citacao {
  font-size: clamp(17px, 1.95vw, 21px) !important;
  line-height: 1.82 !important;
}