/* ===== ArqBase Academy — AI Render (EN/ES) =====
   Carregado depois de curso.css e curso-render-ia.css. Só o que as páginas
   internacionais têm e a PT não: pill "NEW!" no hero, frase com destaque simples,
   depoimentos em formato paisagem, oferta com selo de desconto e garantia em cartão. */

/* Hero: pill "NEW!" / "¡NUEVO!" antes do rótulo */
body.render-ia .hero__tag { flex-wrap: wrap; }

/* Frase: trecho em destaque sem os invólucros .so-desk/.so-mob da PT */
body.render-ia .frase h2 > span.destaque { color: var(--azul); }

/* Depoimentos em paisagem (426×260), duas colunas */
.alunos__grid--largo { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.alunos__grid--largo img { aspect-ratio: 426 / 260; object-position: center; border-radius: 10px; }

/* Oferta: "From $79" riscado + selo "SAVE $30" ao lado */
body.render-ia .oferta__de { text-decoration: none; }
body.render-ia .oferta__de s { font-size: 15px; color: var(--texto-apagado); text-decoration: line-through; }
body.render-ia .oferta__off { border: 1px solid rgba(34,211,238,0.4); }

/* Garantia em cartão (selo à esquerda, texto à direita) */
.garantia--card { padding: 0 var(--recuo) 64px; }
.garantia--card .garantia__card { display: flex; align-items: center; gap: 24px; text-align: left; max-width: 926px; margin: 0 auto; background: var(--cartao); border: 1px solid var(--borda-cartao); border-radius: 16px; padding: 28px 32px; line-height: normal; }
.garantia--card img { width: 96px; margin: 0; flex-shrink: 0; }
body.render-ia .garantia--card h3 { font-size: 20px; margin: 0 0 6px; }
body.render-ia .garantia--card p { margin: 0; max-width: none; font-size: 14px; line-height: 1.6; }

@media (max-width: 1024px) {
  .garantia--card { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 640px) {
  .alunos__grid--largo { grid-template-columns: 1fr; gap: 12px; }
  .garantia--card { padding: 28px 24px 0; }
  .garantia--card .garantia__card { display: block; text-align: center; padding: 20px; border-radius: 14px; gap: 0; }
  .garantia--card img { width: 80px; margin: 0 auto; }
  body.render-ia .garantia--card h3 { font-size: 17px; margin: 14px 0 6px; }
  body.render-ia .garantia--card p { font-size: 12.5px; }
}

/* cinzas do design internacional (a versão PT usa tons um pouco mais claros) */
.oferta__lista li { color: #DEDFE0; border-bottom-color: rgba(255,255,255,0.08); }
.mod__num { color: #3A4150; }

/* O design usa o logo do rodape um pouco menor nestas paginas. */
.rodape img { height: 26px; }

/* ===== Onde o design internacional difere do PT ===== */
/* Botao do topo: ciano em vez do vermelho da versao PT. */
.topo__acoes .btn--rosa { background: #22D3EE; color: #07222B; }
.topo__acoes .btn--rosa:hover { background: #4EDCEF; }

/* Moldura do video e cinza do rodape sao um tom mais escuros aqui. */
body.render-ia { --moldura: #1C2027; }
body.render-ia .rodape { color: #8B93A3; }

/* O design internacional nao poe sombra nas imagens dos modulos nem nos
   comparadores antes/depois. */
body.render-ia .mod img { box-shadow: none; }
body.render-ia .comparar { box-shadow: none; }

/* "Files you will have access to": no design internacional os cartoes sao
   brancos, o selo fica abaixo da imagem e o titulo nao tem linha de topo. */
.arquivos__grid { max-width: 980px; margin: 0 auto; }
body.render-ia .arquivo { background: #FFFFFF; color: #0C0D12; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 20px; text-align: center; overflow: visible; }
body.render-ia .arquivo__capa { position: static; height: auto; padding: 0; background: none; display: flex; flex-direction: column; align-items: center; }
body.render-ia .arquivo__capa img { order: 1; height: 150px; max-height: 150px; max-width: 100%; width: auto; object-fit: contain; margin-bottom: 14px; }
body.render-ia .arquivo__tipo { order: 2; position: static; top: auto; left: auto; font-size: 10.5px; letter-spacing: 0; padding: 5px 10px; }
body.render-ia .arquivo h3 { font-size: 15px; padding: 0; margin-top: 8px; border-top: 0; }

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