:root { color-scheme: light; --marinho: #1e3a5f; --texto: #0f172a; --fundo: #f8fafc; --borda: #cbd5e1; --dourado: #a16207; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--texto); background: var(--fundo); font: 1rem/1.6 system-ui, sans-serif; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--dourado); outline-offset: 4px; }
.container { width: min(1100px, calc(100% - 40px)); margin-inline: auto; }
.topo { background: white; border-bottom: 1px solid var(--borda); }
.topo-conteudo { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { color: var(--marinho); font: 700 1.15rem Georgia, serif; text-decoration: none; }
.selo, .sobretitulo { color: var(--dourado); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero { min-height: 540px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 48px; padding-block: 72px; }
h1, h2 { color: var(--marinho); font-family: Georgia, serif; font-weight: 600; line-height: 1.12; }
h1 { margin: 12px 0 24px; font-size: clamp(2.8rem, 6vw, 5rem); }
h2 { margin: 10px 0 20px; font-size: clamp(2rem, 4vw, 3.2rem); }
.resumo { max-width: 590px; color: #42536a; font-size: 1.15rem; }
.botao { display: inline-flex; min-height: 48px; align-items: center; margin-top: 12px; padding: 10px 22px; color: white; background: var(--marinho); border-radius: 4px; font-weight: 700; text-decoration: none; }
.botao:hover { background: #31577e; }
.imagem { display: grid; place-items: center; min-height: 400px; padding: 24px; background: #e9eef5; border-radius: 14px; }
.imagem img { display: block; width: min(100%, 360px); height: auto; }
.faixa { padding-block: 80px; background: white; border-block: 1px solid var(--borda); }
.video-conteudo { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 56px; }
.video-conteudo p:not(.sobretitulo) { color: #42536a; }
.quadro-video { overflow: hidden; border-radius: 10px; background: var(--marinho); }
.quadro-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.nota { color: #42536a; font-size: .88rem; }
footer { padding-block: 24px; color: #42536a; font-size: .88rem; }
@media (max-width: 760px) { .hero, .video-conteudo { grid-template-columns: 1fr; gap: 24px; } .hero { padding-block: 52px; } .imagem { min-height: 320px; } .faixa { padding-block: 58px; } .selo { text-align: right; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }