/* ===== ArqBase — Curso Render com IA (tema escuro) =====
   Carregado depois de curso.css. Aqui ficam só a paleta (sobrescrevendo os
   tokens de curso.css) e as seções que não existem na página irmã. */

body.render-ia {
  --idioma-texto: #07222B; --idioma-cor: #C6CAD6; --idioma-borda: rgba(255,255,255,0.25);
  --creme: #0C0D12;
  --creme-escuro: #10131C;
  --branco: #14161E;
  --texto: #EDEDF2;
  --texto-2: #E4E6EE;
  --texto-suave: #C6CAD6;
  --texto-apagado: #A9AEBC;
  --areia: #565A66;
  --areia-2: #565A66;
  --borda: rgba(255,255,255,0.12);
  --borda-2: rgba(255,255,255,0.18);
  --borda-3: rgba(255,255,255,0.28);
  --azul: #22D3EE;
  --azul-claro: rgba(34,211,238,0.14);
  --moldura: #262A36;
  --serif: 'Space Grotesk', system-ui, sans-serif;
  --ciano-texto: #07222B;
  --cartao: #14161E;
  --borda-cartao: rgba(255,255,255,0.10);
  --sombra: rgba(0,0,0,0.45);
}

/* ---- Ajustes sobre componentes de curso.css ---- */
body.render-ia .btn--azul { color: var(--ciano-texto); font-weight: 700; }
body.render-ia .video { box-shadow: 0 40px 90px rgba(0,0,0,0.55); }
body.render-ia .selos li { display: flex; align-items: center; gap: 7px; }
body.render-ia .selos li img { width: 15px; height: 15px; flex-shrink: 0; }
body.render-ia .frase { padding: 56px var(--recuo); }
body.render-ia .frase h2 { font-style: normal; font-size: clamp(20px, 2.8vw, 32px); line-height: 1.35; max-width: 820px; }
body.render-ia .frase h2 > span { color: inherit; }           /* os invólucros .so-desk/.so-mob */
body.render-ia .frase h2 span span { color: var(--azul); }   /* o trecho em destaque */
body.render-ia .oferta h2 { margin-bottom: 32px; }
body.render-ia .oferta__card { box-shadow: 0 24px 60px rgba(0,0,0,0.4); border-color: var(--borda-cartao); }
body.render-ia .oferta__de { font-size: 15px; color: var(--texto-apagado); text-decoration: line-through; }
body.render-ia .garantia h3 { font-size: 22px; margin-top: 14px; }
body.render-ia .garantia--selo h3 { margin-top: 18px; }
body.render-ia .garantia p { font-family: var(--sans); font-style: normal; font-size: 15px; line-height: 1.65; color: var(--texto-suave); max-width: 520px; margin: 8px auto 0; }
body.render-ia .professor img { border-radius: 16px; }

/* Textos que a prancheta mobile encurta */
.so-mob { display: none; }

/* ---- Cabeçalhos de seção ---- */
.secao__cabecalho { text-align: center; margin-bottom: 36px; }
.secao__cabecalho h2 { font-size: clamp(24px, 3vw, 36px); margin-top: 14px; }
.encaixe > h2, .animacoes > h2, .ferramentas > h2, .arquivos > h2, .alunos > h2 { font-size: clamp(22px, 2.8vw, 32px); text-align: center; margin: 0 0 32px; }
.secao__sub { text-align: center; color: var(--texto-suave); font-size: 15px; margin: -24px 0 28px; }

/* Cartão base */
.par, .luz, .ferramenta, .compat__card, .arquivo, .bonus-ia__card { background: var(--cartao); border: 1px solid var(--borda-cartao); }

/* Etiquetas sobre imagens (ANTES / DEPOIS) */
.etiqueta { position: absolute; top: 10px; left: 10px; background: rgba(8,9,12,0.85); color: #FFFFFF; font-size: 10.5px; letter-spacing: 1.5px; font-weight: 700; padding: 5px 10px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.etiqueta--ia { background: var(--azul); color: var(--ciano-texto); }
.etiqueta--dir { left: auto; right: 10px; }

/* ---- Resultados (antes/depois) ---- */
.resultados { padding: 24px var(--recuo) 72px; }
.resultados__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.resultados__grid + .resultados__grid { margin-top: 18px; }
.par { border-radius: 16px; padding: 18px; }
.par__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.par__imgs--coluna { grid-template-columns: 1fr; }
.par__img { position: relative; }
/* height:auto e obrigatorio: em <video> os atributos width/height viram largura
   e altura de verdade e ganham do aspect-ratio (em <img> nao). */
.par__img img, .par__video { width: 100%; height: auto; aspect-ratio: 334 / 560; object-fit: cover; border-radius: 10px; background: var(--creme-escuro); display: block; }
.par__imgs--coluna .par__img img, .par__imgs--coluna .par__video { aspect-ratio: 4 / 3; }
.par h3 { font-size: 19px; margin-top: 14px; text-align: center; }
.luz { border-radius: 16px; padding: 24px; margin-top: 18px; }
.luz h3 { font-size: 20px; text-align: center; margin-bottom: 16px; }
.luz__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.luz__grid figure { margin: 0; }
.luz__grid img { width: 100%; aspect-ratio: 354 / 560; object-fit: cover; border-radius: 10px; background: var(--creme-escuro); }
.luz__grid figcaption { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; color: var(--texto-suave); text-align: center; margin-top: 8px; text-transform: uppercase; }

/* ---- Encaixe no entorno real (comparador) ---- */
.encaixe { padding: 0 var(--recuo) 72px; }
.encaixe__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 980px; margin: 0 auto; }
.encaixe figure { margin: 0; }
.comparar { --pos: 50%; position: relative; aspect-ratio: 438 / 312; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 36px var(--sombra); background: var(--creme-escuro); }
.comparar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparar__depois { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparar__linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: var(--cartao); transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 8px rgba(0,0,0,0.4); }
.comparar__linha::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%; background: var(--azul); transform: translate(-50%, -50%); box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.comparar .etiqueta { top: 12px; left: 12px; font-size: 10px; padding: 4px 9px; }
.comparar .etiqueta--dir { left: auto; right: 12px; }
.comparar input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.encaixe figcaption { text-align: center; font-family: var(--serif); font-size: 17px; font-weight: 600; margin-top: 12px; }

/* ---- CTA do meio ---- */
.cta-meio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px var(--recuo) 72px; text-align: center; }
.cta-meio .btn { padding: 18px 40px; font-size: 16px; }
.cta-meio small { font-size: 12.5px; color: var(--texto-suave); }

/* ---- Animações ---- */
.animacoes { padding: 0 var(--recuo) 72px; }
.animacoes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 760px; margin: 0 auto; }
.animacoes video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; display: block; background: #000; }
.animacoes h2 span { color: var(--azul); }

/* ---- Galeria de renders ---- */
.galeria { padding: 56px 0 0; text-align: center; }
.galeria .rotulo, .galeria h2 { padding: 0 var(--recuo); }
.galeria h2 { margin: 14px 0 28px; }
.galeria__faixa { overflow: hidden; }
.galeria__tira { display: flex; width: max-content; animation: galeria-anda 70s linear infinite; }
.galeria__tira img { height: 460px; width: 345px; flex: 0 0 auto; display: block; border-radius: 12px; margin-right: 18px; object-fit: cover; }
@keyframes galeria-anda { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Depoimentos de alunos ---- */
.alunos { padding: 64px var(--recuo) 0; text-align: center; }
.alunos h2 { margin: 14px 0 8px; }
.alunos__texto { font-size: 15px; color: var(--texto-suave); margin: 0 0 32px; }
.alunos__grade { columns: 3; column-gap: 16px; max-width: 1000px; margin: 0 auto; }
.alunos__grade img {
  width: 100%; object-fit: cover; border-radius: 12px; margin-bottom: 16px;
  display: block; break-inside: avoid; box-shadow: 0 10px 26px var(--sombra);
}

/* ---- Qual IA utilizamos ---- */
.ferramentas { padding: 24px var(--recuo) 72px; }
.ferramentas__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; max-width: 980px; margin: 0 auto; }
.ferramenta { border-radius: 16px; padding: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ferramenta h3 { font-size: 24px; }
.ferramenta h3 small { font-family: var(--sans); font-size: 14px; color: var(--azul); font-weight: 700; }
.ferramenta__tipo { font-size: 11px; letter-spacing: 2px; font-weight: 700; color: var(--azul); margin-top: 20px; text-transform: uppercase; }
.ferramenta__modelo { font-size: 19px; font-weight: 700; margin-top: 8px; }
.ferramenta__obs { font-size: 12.5px; color: var(--texto-suave); margin-top: 6px; }
.ferramenta__duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; margin-top: 20px; }
.ferramenta__duplo > div:first-child { border-right: 1px solid var(--borda); padding-right: 24px; }
.ferramenta__duplo .ferramenta__tipo { margin-top: 0; }
.ferramenta__selo { margin-top: auto; padding-top: 22px; }
.ferramenta__selo span { display: inline-block; background: var(--azul); color: var(--ciano-texto); font-size: 13px; font-weight: 600; padding: 9px 20px; border-radius: 99px; }
.ferramentas__nota { text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--texto-apagado); margin-top: 14px; }

/* ---- Compatibilidade ---- */
.compat { padding: 0 var(--recuo) 72px; }
.compat__card { border-radius: 20px; padding: 44px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.compat h2 { font-size: clamp(22px, 2.5vw, 28px); margin: 12px 0; }
.compat p { font-size: 15px; line-height: 1.65; color: var(--texto-suave); margin-bottom: 18px; }
.lista-check li { font-size: 14px; color: var(--texto-2); padding: 4px 0; }
.lista-check li::before, .mod__aulas li::before, .publico li::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; vertical-align: -0.08em; background-color: currentColor; -webkit-mask: var(--check) no-repeat center / contain; mask: var(--check) no-repeat center / contain; color: var(--azul); font-weight: 700; margin-right: 8px; }
.compat__imgs { display: grid; gap: 14px; }
.compat__imgs img { width: 100%; border-radius: 12px; background: var(--creme-escuro); }

/* ---- Cronograma (módulos) ---- */
.cronograma { padding: 0 var(--recuo) 72px; }
.mod { display: grid; grid-template-columns: 90px 1fr 380px; gap: 36px; align-items: center; border-top: 1px solid var(--borda); padding: 32px 0; }
.mod__num { font-family: var(--serif); font-size: 44px; color: var(--areia); line-height: 1; }
.mod__tag { font-size: 12px; letter-spacing: 2px; color: var(--azul); font-weight: 600; }
.mod h3 { font-size: 23px; margin: 8px 0 10px; }
.mod__aulas { columns: 2; column-gap: 24px; }
.mod__aulas li { font-size: 12.5px; line-height: 1.5; color: var(--texto-2); padding: 2.5px 0; break-inside: avoid; }
.mod__aulas li::before { margin-right: 6px; }
.mod img { width: 100%; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.4); background: var(--creme-escuro); }

/* ---- Arquivos ---- */
.arquivos { padding: 0 var(--recuo) 72px; }
.arquivos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.arquivo { border-radius: 14px; overflow: hidden; }
.arquivo__capa { position: relative; height: 190px; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(180deg, #FFFFFF, #E9EDF4); }
.arquivo__capa img { max-height: 170px; max-width: 94%; width: auto; height: auto; object-fit: contain; }
.arquivo__tipo { position: absolute; top: 12px; left: 12px; font-size: 10px; letter-spacing: 1px; font-weight: 700; color: var(--ciano-texto); background: var(--azul); padding: 4px 10px; border-radius: 6px; }
.arquivo h3 { font-family: var(--sans); font-size: 14.5px; font-weight: 600; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; }

/* ---- Bônus ---- */
.bonus-ia { padding: 0 var(--recuo) 72px; }
.bonus-ia__card { border-radius: 16px; padding: 28px 32px; display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: center; max-width: 964px; margin: 0 auto; }
.bonus-ia__card img { width: 100%; border-radius: 10px; }
.bonus-ia__tag { font-size: 11px; letter-spacing: 2px; color: var(--azul); font-weight: 700; }
.bonus-ia h3 { font-size: 24px; margin: 8px 0 6px; }
.bonus-ia p { font-size: 14px; line-height: 1.6; color: var(--texto-suave); }

/* ---- Para quem é ---- */
.publico { padding: 0 72px 72px; max-width: 1004px; margin: 0 auto; }
.publico h2 { font-size: clamp(22px, 2.5vw, 28px); text-align: center; margin-bottom: 20px; }
.publico li { font-size: 15px; line-height: 1.6; color: var(--texto-2); padding: 12px 4px; border-top: 1px solid var(--borda); }

/* ===== Responsivo ===== */
@media (max-width: 1024px) {
  .resultados, .encaixe, .cta-meio, .animacoes, .ferramentas, .compat, .cronograma, .arquivos, .bonus-ia, .alunos, .publico { padding-left: 40px; padding-right: 40px; }
  body.render-ia .frase { padding-left: 40px; padding-right: 40px; }
  .mod { grid-template-columns: 70px 1fr 300px; gap: 24px; }
  .compat__card { padding: 32px; gap: 28px; }
  .bonus-ia__card { grid-template-columns: 280px 1fr; }
}

@media (max-width: 900px) {
  .resultados__grid, .encaixe__grid, .ferramentas__grid, .compat__card { grid-template-columns: 1fr; }
  .mod { grid-template-columns: 1fr; grid-template-areas: "cab" "img" "aulas"; gap: 0; }
  .mod__num { display: none; }
  .mod__texto { display: contents; }
  .mod__cab { grid-area: cab; }
  .mod img { grid-area: img; margin-bottom: 12px; }
  .mod__aulas { grid-area: aulas; }
  .arquivos__grid { grid-template-columns: repeat(2, 1fr); }
  .galeria__tira img { height: 380px; width: 285px; }
  .bonus-ia__card { grid-template-columns: 1fr; padding: 0; gap: 0; overflow: hidden; }
  .bonus-ia__card img { border-radius: 0; }
  .bonus-ia__texto { padding: 16px 18px; }
}

@media (max-width: 640px) {
  .so-desk { display: none; }
  .so-mob { display: inline; }
  .resultados { padding: 40px 24px 0; }
  .secao__cabecalho { margin-bottom: 18px; }
  .resultados__grid { gap: 14px; }
  .resultados__grid + .resultados__grid { margin-top: 14px; }
  .par { border-radius: 14px; padding: 12px; }
  .par__imgs { gap: 10px; }
  .par__img img { border-radius: 8px; }
  .par h3 { font-size: 16px; margin-top: 10px; }
  .etiqueta, .comparar .etiqueta { top: 8px; left: 8px; font-size: 9px; letter-spacing: 1px; padding: 4px 8px; border-radius: 5px; }
  .etiqueta--dir, .comparar .etiqueta--dir { left: auto; right: 8px; }
  .luz { padding: 14px; margin-top: 14px; }
  .luz h3 { font-size: 16px; margin-bottom: 12px; }
  .luz__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .encaixe { padding: 40px 24px 40px; }
  .encaixe > h2, .animacoes > h2, .ferramentas > h2, .arquivos > h2, .alunos > h2 { font-size: 22px; margin-bottom: 16px; }
  .secao__sub { font-size: 13px; margin: -10px 0 16px; }
  .encaixe__grid { gap: 14px; }
  .comparar { border-radius: 12px; }
  .encaixe figcaption { font-size: 15px; margin-top: 8px; }
  .cta-meio { padding: 32px 24px 40px; }
  .cta-meio .btn { padding: 15px 26px; font-size: 14.5px; }
  .cta-meio small { font-size: 11.5px; }
  .animacoes { padding: 0 24px 40px; }
  .animacoes__grid { grid-template-columns: 1fr; gap: 14px; }
  body.render-ia .frase { padding: 40px 24px; }
  body.render-ia .frase h2 { font-size: 20px; line-height: 1.4; }
  .ferramentas { padding: 0 24px 40px; }
  .ferramentas__grid { gap: 12px; }
  .ferramenta { padding: 22px; border-radius: 14px; }
  .ferramenta h3 { font-size: 20px; }
  .ferramenta h3 small { font-size: 12.5px; }
  .ferramenta__tipo { font-size: 10px; letter-spacing: 1.5px; margin-top: 14px; }
  .ferramenta__modelo { font-size: 16px; margin-top: 6px; }
  .ferramenta__obs { font-size: 11.5px; }
  .ferramenta__duplo { gap: 16px; margin-top: 14px; }
  .ferramenta__duplo > div:first-child { padding-right: 16px; }
  .ferramenta__duplo .ferramenta__modelo { font-size: 15px; }
  .ferramenta__selo { padding-top: 16px; }
  .ferramenta__selo span { font-size: 12px; padding: 8px 16px; }
  .ferramentas__nota { font-size: 11.5px; margin-top: 12px; }
  .compat { padding: 0 24px 40px; }
  .compat__card { padding: 22px; border-radius: 14px; }
  .cronograma { padding: 0 24px 40px; }
  .mod { padding: 20px 0; }
  .mod__tag { font-size: 10.5px; letter-spacing: 1.5px; }
  .mod h3 { font-size: 18px; margin: 6px 0 10px; }
  .mod img { border-radius: 8px; }
  .mod__aulas { columns: 1; }
  .mod__aulas li { color: var(--texto-suave); line-height: 1.55; padding: 3px 0; }
  .arquivos { padding: 0 24px 40px; }
  .arquivos__grid { gap: 10px; }
  .arquivo { border-radius: 12px; }
  .arquivo__capa { height: 124px; padding: 10px; }
  .arquivo__capa img { max-height: 108px; }
  .arquivo__tipo { top: 8px; left: 8px; font-size: 9px; padding: 3px 7px; }
  .arquivo h3 { font-size: 11.5px; padding: 10px 12px; line-height: 1.35; }
  .bonus-ia { padding: 0 24px 40px; }
  .bonus-ia h3 { font-size: 17px; }
  .bonus-ia p { font-size: 12.5px; }
  .alunos { padding: 40px 24px 0; }
  .alunos__grade { columns: 2; column-gap: 12px; }
  .alunos__grade img { margin-bottom: 12px; }
  .alunos__texto { font-size: 13.5px; margin-bottom: 18px; }
  .galeria { padding-top: 40px; }
  .galeria__tira img { height: 300px; width: 225px; margin-right: 12px; }
  body.render-ia .oferta h2 { margin-bottom: 16px; }
  body.render-ia .oferta__de { font-size: 13px; }
  body.render-ia .garantia--selo h3 { font-size: 17px; margin: 14px 0 6px; }
  body.render-ia .garantia--selo p { font-size: 12.5px; line-height: 1.6; max-width: none; margin: 0; }
  .publico { padding: 0 24px 40px; }
  .publico h2 { font-size: 22px; margin-bottom: 12px; }
  .publico li { font-size: 13.5px; padding: 10px 2px; }
  body.render-ia .professor img { width: 150px; }
}

/* o design deixa o selo de idioma um tom acima dos outros selos do hero */
body.render-ia .selos li.selo--idioma { color: #D6D8E0; border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }

/* h1 do herói — valores do design (desktop 48px / mobile 31px) */
body.render-ia .hero h1 { font-size: clamp(31px, calc(31px + 17 * (100vw - 375px) / 865), 48px); line-height: 1.15; letter-spacing: -0.5px; margin-top: 22px; }
@media (max-width: 640px) {
  body.render-ia .hero h1 { line-height: 1.2; letter-spacing: normal; margin-top: 16px; }
}