/* Tema claro/escuro da página de vendas — mesma paleta da plataforma Starth.
   O escuro continua sendo o padrão e não muda um pixel: tudo aqui só troca cor.
   Nenhuma regra mexe em posição, tamanho, fonte ou estrutura. */

/* ============================================================
   1. Botão de tema (igual ao da plataforma: sol no escuro, lua no claro)
   ============================================================ */
.edu-theme-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--edu-lime-line);
  background: var(--edu-surface);
  color: var(--edu-lime-ink);
  cursor: pointer;
  transition: background var(--edu-fast) var(--edu-ease),
              border-color var(--edu-fast) var(--edu-ease),
              color var(--edu-fast) var(--edu-ease);
}
.edu-theme-toggle:hover {
  background: var(--edu-card);
  border-color: var(--edu-lime);
}
/* O botão desenha 38px, mas o dedo acerta 44px: a área extra não ocupa espaço. */
.edu-theme-toggle {
  position: relative;
}
.edu-theme-toggle:after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: var(--edu-touch);
  height: var(--edu-touch);
}
.edu-theme-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}
/* Cada tema mostra o ícone do destino: no escuro o sol, no claro a lua. */
.edu-theme-toggle .edu-icon-lua { display: none; }
[data-tema="claro"] .edu-theme-toggle .edu-icon-sol { display: none; }
[data-tema="claro"] .edu-theme-toggle .edu-icon-lua { display: block; }

/* ============================================================
   2. Paleta clara — tons da plataforma (fundo #EEF0F2, superfície branca)
   ============================================================ */
[data-tema="claro"] .school-v7 {
  --edu-paper: #eef0f2;
  --edu-ink: #14171a;
  --edu-muted: #5f666c;
  --edu-line: #e1e4e8;
  --edu-night: #ffffff;
  --edu-surface: #f4f6f8;
  --edu-card: #ffffff;
  --edu-border: #d9dde2;

  /* O lime continua sendo o preenchimento; como texto ele vira azeitona legível. */
  --edu-lime: #D1FB00;
  --edu-lime-ink: #4f6d00;
  --edu-lime-edge: #a9c900;
  --edu-lime-soft: #D1FB0038;
  --edu-lime-glow: #c8ec0045;
  --edu-lime-line: #b9d94d;
  --edu-on-accent: #11130b;
  --edu-focus: #3f5700;
}

/* A barra do navegador acompanha o tema. */
[data-tema="claro"] .school-v7 .edu-theme-toggle {
  border-color: var(--edu-border);
  background: var(--edu-card);
  color: var(--edu-ink);
}
[data-tema="claro"] .school-v7 .edu-theme-toggle:hover {
  background: var(--edu-surface);
  border-color: var(--edu-lime-edge);
}

/* ============================================================
   3. Ajustes do claro — cores fixas que só faziam sentido no escuro
   ============================================================ */

/* --- topo, botões e links --- */
[data-tema="claro"] .school-v7 .edu-dot {
  box-shadow: 0 0 13px #a9c90066;
}
/* Só o botão cheio ganha o halo; o secundário continua sem sombra. */
[data-tema="claro"] .school-v7 .edu-button:not(.edu-button-secondary) {
  box-shadow: inset 0 1px 1px #ffffff99, 0 0 0 4px #D1FB0026;
}
[data-tema="claro"] .school-v7 .edu-button-secondary {
  background: #14171a06;
  border-color: #14171a24;
}
[data-tema="claro"] .school-v7 .edu-button-secondary > span {
  background: #14171a0a;
}
[data-tema="claro"] .school-v7 .edu-text-link {
  border-bottom-color: #14171a33;
}

/* --- hero --- */
[data-tema="claro"] .school-v7 .edu-hero {
  background: radial-gradient(ellipse at 50% 78%, #b9e02426, transparent 56%);
}
[data-tema="claro"] .school-v7 .edu-hero:before {
  background-image: radial-gradient(#14171a1f .7px, transparent .7px);
}
[data-tema="claro"] .school-v7 .edu-hero-badge {
  border-color: #14171a1a;
}
[data-tema="claro"] .school-v7 .edu-hero h1 {
  background: linear-gradient(176deg, #14171a 14%, #23282d 50%, #576069 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- controles da vitrine --- */
[data-tema="claro"] .school-v7 .edu-demo-tabs button[aria-selected="true"] {
  color: #f5f6f7;
  background: #14171a;
  border-color: #14171a;
}
[data-tema="claro"] .school-v7 .edu-round-control {
  border-color: #14171a1f;
}
[data-tema="claro"] .school-v7 .edu-demo-stage:before {
  border-color: #8199534d;
}
[data-tema="claro"] .school-v7 .edu-motion-pause:hover {
  background: #14171a0a;
}
[data-tema="claro"] .school-v7 .edu-demo-cursor {
  background: #14171a;
  filter: drop-shadow(0 3px 4px #14171a33);
}

/* --- jornada --- */
[data-tema="claro"] .school-v7 .edu-journey-demo {
  border-color: #14171a14;
  background: radial-gradient(ellipse at 50% 42%, #8fbf3324, transparent 65%), var(--edu-night);
}
[data-tema="claro"] .school-v7 .edu-journey-nodes {
  background-image: radial-gradient(#14171a1a .7px, transparent .7px);
}
[data-tema="claro"] .school-v7 .edu-journey-node {
  border-color: #8aa63a33;
}
[data-tema="claro"] .school-v7 .edu-journey-node:not(:last-child):after {
  background: linear-gradient(#7fa52b99, #55693a4d);
}
[data-tema="claro"] .school-v7 .edu-journey-node[aria-selected="true"] {
  color: var(--edu-ink);
}
[data-tema="claro"] .school-v7 .edu-node-mark {
  color: #5d7a33;
  border-color: #14171a1a;
  background: #14171a08;
}
[data-tema="claro"] .school-v7 .edu-node-check {
  color: #5a7a2e;
}
[data-tema="claro"] .school-v7 .edu-journey-detail,
[data-tema="claro"] .school-v7 .edu-journey-note {
  background: #14171a05;
}
[data-tema="claro"] .school-v7 .edu-journey-detail .edu-label {
  color: #5c7a30;
}

/* --- por dentro da escola --- */
[data-tema="claro"] .school-v7 .edu-inside-tab[aria-selected="true"] {
  color: var(--edu-ink);
}
[data-tema="claro"] .school-v7 .edu-inside-frame {
  background: radial-gradient(ellipse at 80% 90%, #98cd2233, transparent 60%), var(--edu-card);
  border-color: #14171a14;
  box-shadow: inset 0 1px #14171a0a;
}
[data-tema="claro"] .school-v7 .edu-inside-frame .edu-demo-panel {
  box-shadow: 0 20px 30px #14171a1f;
}

/* --- ferramentas, propósito e matrícula --- */
[data-tema="claro"] .school-v7 .edu-tool-list li {
  border-top-color: #14171a17;
}
[data-tema="claro"] .school-v7 .edu-secret-tools {
  border-block-color: #14171a1a;
}
[data-tema="claro"] .school-v7 .edu-purpose-close {
  border-left-color: #8bb549;
}
[data-tema="claro"] .school-v7 .edu-included li {
  border-bottom-color: #14171a14;
}
[data-tema="claro"] .school-v7 .enrollment-price {
  border-top-color: #14171a14;
}

/* --- fechamento e rodapé --- */
[data-tema="claro"] .school-v7 .edu-light-closing {
  border-block-color: #14171a12;
}
[data-tema="claro"] .school-v7 .edu-light-vignette {
  background: radial-gradient(ellipse at center, #ffffffb8 0%, #f6f7f880 30%, transparent 75%),
              linear-gradient(var(--edu-paper), transparent 20%, transparent 85%, var(--edu-paper));
}
[data-tema="claro"] .school-v7 .edu-faq summary > span {
  color: #4f6b2e;
}
[data-tema="claro"] .school-v7 .edu-footer-bottom {
  border-top-color: #14171a17;
}

/* ============================================================
   4. Demonstração da plataforma (.starth-film) no claro
   ============================================================ */

/* A tarja de leitura das capas passa a clarear, para o texto escuro aparecer. */
[data-tema="claro"] .school-v7 .film-reel:after {
  background: linear-gradient(transparent, #ffffffeb);
}
/* Etiquetas sobre a mídia viram fichas claras. */
[data-tema="claro"] .school-v7 .film-reel-tag,
[data-tema="claro"] .school-v7 .film-lesson-transport {
  background: #ffffffe8;
  border-color: #14171a1f;
}
[data-tema="claro"] .school-v7 .film-lesson-transport > div {
  background: #14171a2e;
}
[data-tema="claro"] .school-v7 .film-live {
  --live-overlay: #ffffffe6;
  --live-overlay-soft: #ffffff99;
}
[data-tema="claro"] .school-v7 .film-editor {
  box-shadow: 0 3cqw 5cqw #14171a1f;
}

/* ============================================================
   5. Jornada ilustrada e caixa de ferramentas no claro
   ============================================================ */
[data-tema="claro"] .school-v7 .sj-art {
  background: radial-gradient(ellipse at 50% 75%, #D1FB0040, transparent 65%);
}
[data-tema="claro"] .school-v7 .sj-art:before {
  background-image: radial-gradient(#14171a1f .6px, transparent .7px);
}
[data-tema="claro"] .school-v7 .sj-art-index {
  color: #14171a0d;
}
[data-tema="claro"] .school-v7 .sj-object {
  box-shadow: 0 12px 24px #14171a14;
}
[data-tema="claro"] .school-v7 .sj-detail,
[data-tema="claro"] .school-v7 .sj-note {
  background: #14171a05;
}
[data-tema="claro"] .school-v7 .sj-chip {
  box-shadow: 0 8px 30px #14171a1f;
}
[data-tema="claro"] .school-v7 .sj-copy-line {
  background: #14171a24;
}
[data-tema="claro"] .school-v7 .sj-chart-grid {
  stroke: #14171a1a;
}
[data-tema="claro"] .school-v7 .sj-chart-area {
  fill: #b9d94d3d;
}
[data-tema="claro"] .school-v7 .stb-cursor {
  filter: drop-shadow(0 2px 3px #14171a40);
}

/* ============================================================
   6. Calculadora no claro
   ============================================================ */
[data-tema="claro"] .school-v7 .starth-calculator input[aria-invalid="true"] {
  border-color: #c42b2b;
  outline-color: #c42b2b;
}
[data-tema="claro"] .school-v7 .starth-calculator input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--edu-paper), 0 2px 8px #14171a2e;
}
[data-tema="claro"] .school-v7 .starth-calculator input[type="range"]::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--edu-paper), 0 2px 8px #14171a2e;
}