/* ============================================================================ secoes.css — Layout das seções da página Referência: DES.md §3.3 (mapa de seções). Aqui fica o que é layout de seção (aviso ao pé da grade, subtítulo, ação, faixa do mapa) e a seção de campanha. Os componentes internos — cards, chips, telefones, FAQ — moram em componentes.css. Carrega assíncrono na home. A moldura comum (.secao, .secao__titulo) e o hero (§5.3) moram em critico.css, embutido no . ========================================================================= */ /* --- Moldura comum de seção ------------------------------------------------ */ /* .secao, .secao--alternada e .secao__titulo ficam em critico.css: a primeira seção entra na área visível e não pode esperar o carregamento assíncrono. */ .secao__aviso { margin-top: var(--esp-5); font-size: var(--txt-micro); color: var(--cor-texto-suave); text-align: center; } .secao__aviso:empty { display: none; } .secao__subtitulo { margin-bottom: var(--esp-4); font-size: var(--txt-card-g); font-weight: var(--peso-titulo); } /* Link de ação ao pé da seção — "Ver todas as notícias". */ .secao__acao { margin-top: var(--esp-6); text-align: center; } .secao__acao:empty { display: none; } /* --- #sobre: mapa em faixa abaixo das duas colunas (DES §3.3) --------------- */ .sobre__mapa { margin-top: var(--esp-6); } .sobre__mapa:empty { display: none; } /* --- Grade de serviços (DES §4.6) ------------------------------------------- As colunas por linha (2 / 3 / 4 / 5 / 6) vêm das classes row-cols-* da grade própria de base.css, aplicadas no HTML. Aqui só o que ela não cobre. A grade define display nos filhos de .row, o que vence o [hidden] padrão do navegador. Sem este !important o filtro não esconde nada. */ .grade-servicos > [hidden] { display: none !important; } .grade__vazio { padding: var(--esp-8) 0; color: var(--cor-texto-suave); text-align: center; } .grade__vazio[hidden] { display: none; } /* --- #regulariza: seção de campanha ---------------------------------------- Programa com prazo. Fundo azul-100 para destacar da alternância normal das seções; o painel de etapas fica em cartão branco sobre ele. */ .secao--campanha { background: var(--sn-azul-100); } .secao--campanha[hidden] { display: none; } .campanha__chamada { max-width: 70ch; margin: calc(-1 * var(--esp-3)) auto var(--esp-6); font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: 1.125rem; color: var(--cor-primaria); text-align: center; } .campanha__texto p + p { margin-top: var(--esp-4); } .campanha__citacao { margin: var(--esp-5) 0 0; padding: var(--esp-4) var(--esp-5); background: var(--cor-superficie); border-left: 4px solid var(--sn-verde-claro); border-radius: var(--raio-card); } .campanha__citacao blockquote { margin: 0; font-size: 1.0625rem; font-style: italic; } .campanha__citacao figcaption { margin-top: var(--esp-2); font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: var(--txt-micro); color: var(--cor-texto-suave); } .campanha__fonte { margin-top: var(--esp-4); } .campanha__painel { padding: var(--esp-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda-sutil); border-radius: var(--raio-card); box-shadow: var(--sombra-1); } .campanha__subtitulo { margin-bottom: var(--esp-4); font-size: var(--txt-card-g); font-weight: var(--peso-titulo); } .campanha__nota, .campanha__alerta { margin-top: var(--esp-4); font-size: var(--txt-micro); color: var(--cor-texto-suave); } .campanha__nota .icone { color: var(--cor-primaria); } .campanha__alerta { padding: var(--esp-3); color: var(--cor-texto); background: var(--sn-amarelo-100); border-radius: var(--raio-card); } .campanha__alerta .icone { color: var(--sn-vermelho-texto); } .campanha__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-5); } /* --- Etapas de desconto ---------------------------------------------------- */ .etapas { display: grid; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; } .etapa { display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-3); border: 1px solid var(--cor-borda-sutil); border-radius: var(--raio-card); } /* A etapa vigente é a primeira da lista — maior desconto, maior peso visual. */ .etapa:first-child { border-color: var(--sn-verde-claro); background: var(--sn-verde-100); } .etapa__desconto { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 4rem; height: 4rem; font-family: var(--fonte-display); font-weight: var(--peso-display); font-size: 1.125rem; color: var(--sn-branco); /* 18 px em peso 800 ainda conta como texto normal (o corte da WCAG é 18,66 px em negrito), então precisa de 4,5:1 — daí o verde-800. */ background: var(--sn-verde-800); border-radius: var(--raio-marca); } .etapa:first-child .etapa__desconto { background: var(--cor-primaria); } .etapa__dados { display: grid; } .etapa__rotulo { font-family: var(--fonte-display); font-weight: var(--peso-titulo); color: var(--cor-primaria); } .etapa__periodo { font-size: var(--txt-card-p); } .etapa__detalhe { font-size: var(--txt-micro); color: var(--cor-texto-suave); } /* --- §5.3 Hero -------------------------------------------------------------- O hero mora em critico.css: é o topo da página e não pode esperar o carregamento assíncrono. */