/* ============================================================
   Escola Santa Mônica — site institucional (v2: linguagem visual mais
   séria/oficial — tipografia editorial, ícones em traço em vez de
   emoji, cabeçalho com os brasões como um portal de governo, cantos
   mais retos em vez de pílulas arredondadas).
   ============================================================ */

:root {
  --cor-principal: #e8384f;
  --cor-principal-escura: #c1121f;
  --cor-principal-clara: #fdecec;
  --cor-amarelo: #ffc42e;
  --cor-amarelo-escuro: #ff8a00;
  --cor-teal: #1fb572;
  --cor-teal-escuro: #0f9c5e;
  --cor-roxo: #ff4d8d;
  --cor-roxo-escuro: #e63578;
  --cor-laranja: #ff8a00;
  --tinta: #1c2434;
  --tinta-suave: #4b5567;
  --fundo: #fefbf6;
  --fundo-alt: #fdf3e7;
  --borda: #ecdfc9;
  --sombra: 0 14px 34px -12px rgba(28, 36, 52, 0.18);
  --sombra-sutil: 0 2px 10px rgba(28, 36, 52, 0.06);
  --raio: 999px;
  --raio-cartao: 20px;
  --raio-grande: 20px;
  --largura-max: 1160px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--fundo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }

img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Ícones em traço (substituem emoji em todo o site) ──────── */
.icone-svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }

/* ── Cabeçalho oficial (brasão + texto + brasão), como um portal
       de governo — mesma ideia usada nos documentos oficiais do
       sistema interno (Diário de Classe / AEE) ───────────────── */
.cabecalho-oficial {
  background: var(--tinta);
  color: #cbd3e1;
}
.cabecalho-oficial-conteudo {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
}
.cabecalho-oficial-conteudo span { opacity: 0.92; }

/* ── Cabeçalho / navegação ─────────────────────────────────── */
header.topo {
  background: #fff;
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topo-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--largura-max);
  margin: 0 auto;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tinta);
}

.marca img { height: 46px; width: auto; }

.marca-texto { display: flex; flex-direction: column; line-height: 1.3; }
.marca-texto strong { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--tinta); }
.marca-texto span { font-size: 12px; color: var(--tinta-suave); letter-spacing: 0.02em; }

nav.menu-principal ul {
  list-style: none;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
}

nav.menu-principal a {
  display: inline-block;
  padding: 8px 4px;
  margin: 0 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--tinta-suave);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

nav.menu-principal a:hover,
nav.menu-principal a[aria-current="page"] {
  color: var(--cor-principal);
  border-color: var(--cor-principal);
}

.botao-menu-mobile {
  display: none;
  background: none;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  padding: 8px;
  cursor: pointer;
  color: var(--tinta);
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
}
.botao-menu-mobile .icone-svg { width: 20px; height: 20px; }

/* ── Botões genéricos ──────────────────────────────────────── */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--raio);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.botao:hover { transform: translateY(-1px); }

.botao-primario {
  background: var(--cor-principal);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(185, 28, 28, 0.45);
}
.botao-primario:hover { background: var(--cor-principal-escura); }

.botao-secundario {
  background: #fff;
  color: var(--tinta);
  border: 1.5px solid var(--borda);
}
.botao-secundario:hover { border-color: var(--tinta); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  background: var(--fundo-alt);
  padding: 76px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-grade {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  position: relative;
}

.hero h1 {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.12;
  margin: 0 0 18px;
  color: var(--tinta);
}

.hero p.subtitulo {
  font-size: 17.5px;
  color: var(--tinta-suave);
  margin: 0 0 30px;
  max-width: 50ch;
}

.hero-acoes { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-imagem {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
}
.hero-imagem img { max-height: 210px; }

/* ── Faixa de indicadores ─────────────────────────────────── */
.faixa-indicadores {
  background: #fff;
  border-bottom: 1px solid var(--borda);
}
.grade-indicadores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 30px 0;
}
.indicador { text-align: center; padding: 0 12px; border-left: 1px solid var(--borda); }
.indicador:first-child { border-left: none; }
.indicador strong { display: block; font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); color: var(--cor-principal); line-height: 1; margin-bottom: 6px; }
.indicador span { font-size: 12.5px; color: var(--tinta-suave); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Seções gerais ─────────────────────────────────────────── */
section { padding: 72px 0; }
section.alt { background: var(--fundo-alt); }

.cabecalho-secao { max-width: 680px; margin: 0 0 40px; }
.cabecalho-secao.centro { text-align: center; margin-left: auto; margin-right: auto; }
.tarja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cor-principal);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.tarja::before { content: ""; width: 22px; height: 2px; background: var(--cor-principal); display: inline-block; }
.cabecalho-secao h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 12px; color: var(--tinta); }
.cabecalho-secao p { color: var(--tinta-suave); margin: 0; font-size: 16px; }

/* ── Cartões (grade de 3/4 colunas) ───────────────────────── */
.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}

.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  padding: 28px;
  box-shadow: var(--sombra-sutil);
  transition: box-shadow 0.15s, transform 0.15s;
}
.cartao:hover { box-shadow: var(--sombra); transform: translateY(-2px); }

.cartao .icone {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: var(--cor-principal-clara);
  color: var(--cor-principal);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.cartao h3 { margin: 0 0 8px; font-size: 17px; font-family: var(--sans); font-weight: 700; }
.cartao p { margin: 0; color: var(--tinta-suave); font-size: 14.5px; }

/* ── Notícias / eventos ───────────────────────────────────── */
.cartao-noticia {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  overflow: hidden;
  box-shadow: var(--sombra-sutil);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
}
.cartao-noticia:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.cartao-noticia .capa {
  height: 140px;
  background: var(--cor-principal);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.cartao-noticia .capa .icone-svg { width: 34px; height: 34px; stroke-width: 1.4; }
.cartao-noticia:nth-of-type(4n+2) .capa { background: var(--cor-amarelo-escuro); }
.cartao-noticia:nth-of-type(4n+3) .capa { background: var(--cor-teal); }
.cartao-noticia:nth-of-type(4n+4) .capa { background: var(--cor-roxo); }
.cartao-noticia .corpo { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.cartao-noticia .data { font-size: 12px; font-weight: 700; color: var(--cor-principal); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.cartao-noticia h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.cartao-noticia p { color: var(--tinta-suave); font-size: 14.5px; margin: 0 0 16px; flex: 1; }
.cartao-noticia .ler-mais { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: var(--tinta); text-decoration: none; }
.cartao-noticia .ler-mais .icone-svg { transition: transform 0.15s; }
.cartao-noticia .ler-mais:hover .icone-svg { transform: translateX(3px); }

/* ── Faixa CTA ─────────────────────────────────────────────── */
.faixa-cta {
  background: var(--tinta);
  color: #fff;
  border-radius: var(--raio-grande);
  padding: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.faixa-cta h2 { margin: 0 0 8px; font-size: 24px; color: #fff; }
.faixa-cta p { margin: 0; color: #cbd3e1; }

/* ── Contato ───────────────────────────────────────────────── */
.grade-contato {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.lista-contato { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.lista-contato li { display: flex; gap: 14px; align-items: flex-start; }
.lista-contato .icone {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--cor-principal-clara);
  color: var(--cor-principal);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.lista-contato strong { display: block; font-size: 15px; }
.lista-contato span { color: var(--tinta-suave); font-size: 14.5px; }

.mapa-wrap {
  border-radius: var(--raio-grande);
  overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-sutil);
  min-height: 320px;
}
.mapa-wrap iframe { width: 100%; height: 100%; min-height: 320px; border: 0; filter: grayscale(0.25) contrast(1.02); }

/* ── Formulário de contato ─────────────────────────────────── */
.painel-form {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  padding: 28px;
  box-shadow: var(--sombra-sutil);
}
form.form-contato { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 700; font-size: 13px; color: var(--tinta); }
.campo input, .campo textarea {
  border: 1.5px solid var(--borda);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  background: var(--fundo);
  color: var(--tinta);
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--cor-principal); background: #fff; }
.campo textarea { resize: vertical; min-height: 110px; }

/* ── Rodapé ────────────────────────────────────────────────── */
footer.rodape {
  background: var(--tinta);
  color: #aab2c2;
  padding: 52px 0 0;
  margin-top: 0;
}
.rodape-grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
.rodape h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 16px; font-weight: 700; }
.rodape-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rodape-marca img { height: 38px; filter: brightness(0) invert(1); opacity: 0.95; }
.rodape-marca strong { color: #fff; font-family: var(--serif); font-size: 17px; }
.rodape p, .rodape li { font-size: 13.5px; color: #9aa3b5; line-height: 1.75; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.rodape ul a { text-decoration: none; color: #9aa3b5; display: inline-flex; align-items: center; gap: 8px; }
.rodape ul a:hover { color: #fff; }
.rodape-baixo {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 0;
  margin-top: 8px;
  font-size: 12.5px;
  color: #7a8296;
  text-align: center;
}

/* ── Blob decorativo (forma orgânica de fundo) ───────────────── */
.blob {
  position: absolute;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

/* ── Faixa de avisos (ticker) no rodapé do hero ──────────────── */
.faixa-ticker {
  position: relative;
  z-index: 1;
  margin-top: 48px;
  background: var(--tinta);
  border-radius: var(--raio);
  padding: 10px 10px 10px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.faixa-ticker .rotulo {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-amarelo);
  flex-shrink: 0;
}
.faixa-ticker .msg { flex: 1; font-size: 14px; color: #fff; font-weight: 500; }
.faixa-ticker .msg strong { font-weight: 700; }
.faixa-ticker .setas { display: flex; gap: 6px; flex-shrink: 0; }
.faixa-ticker .setas button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25); background: transparent; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.faixa-ticker .setas .icone-svg { width: 15px; height: 15px; }

/* ── Cartões coloridos sólidos (destaques da home) ───────────── */
.grade-cores { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.cartao-cor {
  border-radius: var(--raio-cartao);
  padding: 28px;
  color: #fff;
  box-shadow: var(--sombra-sutil);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cartao-cor:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.cartao-cor .icone { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.cartao-cor h3 { margin: 0 0 8px; font-size: 17px; font-family: var(--sans); font-weight: 700; color: #fff; }
.cartao-cor p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,0.9); }
.cartao-cor.c1 { background: var(--cor-principal); }
.cartao-cor.c2 { background: var(--cor-amarelo-escuro); }
.cartao-cor.c3 { background: var(--cor-teal); }
.cartao-cor.c4 { background: var(--cor-roxo); }

/* ── Passos numerados (ex.: "Como matricular") ───────────────── */
.grade-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.cartao-passo {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  padding: 26px;
  box-shadow: var(--sombra-sutil);
}
.tag-passo {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  padding: 4px 14px;
  border-radius: var(--raio);
  margin-bottom: 14px;
}
.cartao-passo:nth-child(1) .tag-passo { background: var(--cor-teal); }
.cartao-passo:nth-child(2) .tag-passo { background: var(--cor-amarelo-escuro); }
.cartao-passo:nth-child(3) .tag-passo { background: var(--cor-roxo); }
.cartao-passo h3 { margin: 0 0 8px; font-size: 16.5px; }
.cartao-passo p { margin: 0; color: var(--tinta-suave); font-size: 14.5px; }

/* ── Equipe — foto circular ───────────────────────────────────── */
.cartao-pessoa { text-align: center; }
.cartao-pessoa .avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--cor-principal-clara); color: var(--cor-principal);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; margin: 0 auto 16px;
  border: 3px solid #fff; box-shadow: var(--sombra-sutil);
}
.cartao-pessoa h3 { margin: 0 0 4px; font-size: 16px; }
.cartao-pessoa p { margin: 0; color: var(--tinta-suave); font-size: 13.5px; }

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero-grade { grid-template-columns: 1fr; }
  .hero-imagem { order: -1; padding: 24px; max-width: 320px; margin: 0 auto; }
  .hero-imagem img { max-height: 140px; }
  .grade-contato { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .grade-indicadores { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .indicador:nth-child(3) { border-left: none; }
}

@media (max-width: 700px) {
  .cabecalho-oficial-conteudo { font-size: 10.5px; gap: 8px; }
  .botao-menu-mobile { display: flex; }
  nav.menu-principal {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--borda);
    box-shadow: var(--sombra);
  }
  nav.menu-principal.aberto { display: block; }
  nav.menu-principal ul { flex-direction: column; padding: 10px 24px 18px; gap: 2px; }
  nav.menu-principal a { display: block; padding: 12px 4px; margin: 0; border-bottom: 1px solid var(--fundo-alt); }
  .faixa-cta { flex-direction: column; text-align: center; padding: 34px 26px; }
  .rodape-grade { grid-template-columns: 1fr; }
  .faixa-ticker { flex-wrap: wrap; padding: 14px; }
  .faixa-ticker .msg { order: 3; width: 100%; }
  .blob { display: none; }
}