/* ==========================================================================
   claro.css — a camada clara e limpa, padrão do site, carregada DEPOIS de
   pagina.css. Mesma estrutura e mesmos movimentos; o que muda é a luz:
   papel quente, tinta quase preta, brasa só como acento. Sem fogo em WebGL,
   sem grão, sem visor e sem pré-carga (o template nem desenha essas camadas).
   ========================================================================== */

/* ------------------------------------------------------------- Tokens */

:root.claro {
  --noite: #f5f2eb;
  --noite-2: #ede9e0;
  --papel: #fbfaf6;
  --papel-2: #ffffff;
  --linha: rgba(22, 21, 15, .10);
  --linha-forte: rgba(22, 21, 15, .20);

  --tinta: #17160f;
  --tinta-2: #5d584d;
  --tinta-3: #8d8677;

  --brasa: #e2460f;
  --brasa-2: #c23a08;
  --brasa-fraca: rgba(226, 70, 15, .08);
  --brasa-fio: rgba(226, 70, 15, .32);

  --sombra-card: 0 1px 2px rgba(30, 26, 16, .04), 0 12px 32px -18px rgba(30, 26, 16, .18);

  color-scheme: light;
}

.claro ::selection { background: var(--brasa); color: #fff; }

/* ------------------------------------------------------------- Fundo */

/* No lugar da brasa: um brilho quente, quase imperceptível, atrás do hero. */
.claro .hero {
  background:
    radial-gradient(60% 70% at 78% 85%, rgba(226, 70, 15, .10), transparent 70%),
    radial-gradient(50% 60% at 10% 100%, rgba(226, 70, 15, .05), transparent 70%);
}

.claro .progresso i { box-shadow: none; }

/* ------------------------------------------------------------- Topo e menu */

.claro .topo::before { background: linear-gradient(to bottom, rgba(245, 242, 235, .94), rgba(245, 242, 235, 0)); }
.claro .menu-btn { background: rgba(255, 255, 255, .7); }
.claro .marca b,
.claro .carga__marca { color: #fff; }
.claro .menu {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(226, 70, 15, .08), transparent 60%),
    var(--noite-2);
}

/* ------------------------------------------------------------- Hero */

.claro .hero__retrato--recorte img,
.claro .hero__retrato img {
  filter: grayscale(.15) contrast(1.02) drop-shadow(0 30px 40px rgba(30, 26, 16, .16));
}
.claro .hero__linha em { text-shadow: none; }
.claro .hero__base { border-top-color: var(--linha-forte); }

/* ------------------------------------------------------------- Faixa */

.claro .faixa { background: var(--papel-2); }
.claro .faixa__linha--vazada .faixa__trilho b { -webkit-text-stroke-color: rgba(22, 21, 15, .28); }

/* ------------------------------------------------------------- Blocos */

.claro .creditos { background: none; }

.claro .parceria {
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(226, 70, 15, .06), transparent 60%),
    var(--papel-2);
  backdrop-filter: none;
  box-shadow: var(--sombra-card);
}
.claro .parceria__marca { background: var(--noite); border: 1px solid var(--linha); }

.claro .linha summary::before { background: linear-gradient(90deg, rgba(226, 70, 15, .07), rgba(226, 70, 15, 0)); }
.claro .linha__marca { background: var(--papel-2); }

.claro .lazer__foto {
  background:
    radial-gradient(320px circle at var(--mx) var(--my), rgba(226, 70, 15, .12), transparent 60%),
    var(--papel-2);
  box-shadow: var(--sombra-card);
}
.claro .lazer__foto .sigla { -webkit-text-stroke-color: rgba(22, 21, 15, .22); }

.claro .cartaz__foto { box-shadow: var(--sombra-card); background: var(--papel-2); }
.claro .cartaz__foto::after { display: none; }
.claro .cartaz__foto img { filter: none; }

.claro .previa { box-shadow: 0 30px 60px -25px rgba(30, 26, 16, .35), 0 0 0 1px var(--linha); }
.claro .proj__link::before { background: linear-gradient(90deg, rgba(226, 70, 15, .07), transparent 70%); }
.claro .pino { box-shadow: none; }
.claro .chip--forte::before { box-shadow: none; }

.claro .carta {
  background: var(--papel-2);
  box-shadow: var(--sombra-card);
}

/* ------------------------------------------------------------- Diagrama */

.claro .eco__quadro { background: var(--papel-2); backdrop-filter: none; box-shadow: var(--sombra-card); }
.claro .d-no rect { fill: var(--papel-2); }
.claro .d-no--chave rect { fill: rgba(226, 70, 15, .06); }
.claro .d-ext rect { fill: rgba(22, 21, 15, .04); }
.claro .d-liga { stroke: rgba(22, 21, 15, .38); }
.claro .d-seta { fill: rgba(22, 21, 15, .55); }

/* ------------------------------------------------------------- Contato */

.claro .contato__linha em { text-shadow: none; }
.claro .bolha { color: #fff; box-shadow: 0 20px 40px -18px rgba(226, 70, 15, .55); }
.claro .bolha::before { background: var(--tinta); }

/* ------------------------------------------------------------- Modal */

.claro .modal { background: var(--papel-2); box-shadow: 0 40px 100px -30px rgba(30, 26, 16, .4); }
.claro .modal::backdrop { background: rgba(40, 36, 26, .32); }
.claro .modal__x { background: rgba(255, 255, 255, .85); }
.claro .modal__foto { background: var(--noite-2); }
.claro .botao { color: #fff; }
.claro .botao:hover { color: var(--noite); }