/* ==========================================================================
   Site da Professora Sâmela Polloni
   Paleta e formas inspiradas no banner de divulgação.
   Organização: 1) tokens  2) base  3) layout  4) componentes  5) seções
                6) responsivo  7) acessibilidade e impressão
   ========================================================================== */

/* 1) TOKENS ============================================================== */
:root {
  /* Cores da marca */
  --creme: #fdf1e7;
  --creme-claro: #fff9f4;
  --creme-escuro: #f7e5d7;
  --pessego: #f2a78e;
  --pessego-claro: #f9d3c2;
  --pessego-suave: #fbe4d9;
  --coral: #d8583f;
  --coral-vivo: #e2664c;
  --coral-escuro: #b0402c;
  --verde: #2e7d77;
  --verde-claro: #4fa39a;
  --verde-suave: #dcece9;
  --dourado: #f0b429;
  --carvao: #2b2724;
  --carvao-medio: #5c534d;
  --carvao-suave: #857a72;
  --branco: #ffffff;

  /* Tipografia */
  --fonte-display: "Archivo Black", "Poppins", system-ui, sans-serif;
  --fonte-script: "Dancing Script", cursive;
  --fonte-texto: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala fluida: cresce junto com a largura da tela */
  --t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --t-sm: clamp(0.85rem, 0.82rem + 0.18vw, 0.94rem);
  --t-base: clamp(0.98rem, 0.94rem + 0.22vw, 1.09rem);
  --t-md: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
  --t-lg: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --t-xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --t-2xl: clamp(2.1rem, 1.5rem + 2.8vw, 4rem);
  --t-3xl: clamp(2.6rem, 1.4rem + 5.4vw, 6rem);

  /* Espaçamento */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-secao: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* Formas */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pilula: 999px;

  /* Sombras quentes, nunca cinza-azuladas */
  --sombra-1: 0 2px 8px rgba(176, 64, 44, 0.06);
  --sombra-2: 0 8px 24px rgba(176, 64, 44, 0.09);
  --sombra-3: 0 18px 48px rgba(176, 64, 44, 0.14);
  --sombra-foco: 0 0 0 4px rgba(216, 88, 63, 0.28);

  --largura-conteudo: 1180px;
  --transicao: 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2) BASE ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background-color: var(--creme);
  background-image:
    linear-gradient(rgba(216, 88, 63, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 88, 63, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--carvao);
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--e-3);
  line-height: 1.15;
  text-wrap: balance;
}

p {
  margin: 0 0 var(--e-4);
  text-wrap: pretty;
}

a {
  color: var(--coral-escuro);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transicao);
}

a:hover {
  color: var(--coral);
}

img,
svg,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  padding-left: 1.15rem;
}

hr {
  border: 0;
  border-top: 2px dashed var(--pessego-claro);
  margin: var(--e-6) 0;
}

::selection {
  background: var(--pessego-claro);
  color: var(--coral-escuro);
}

/* 3) LAYOUT ============================================================== */
.conteudo {
  width: min(100% - 2.5rem, var(--largura-conteudo));
  margin-inline: auto;
}

.conteudo--estreito {
  width: min(100% - 2.5rem, 760px);
}

.secao {
  position: relative;
  padding-block: var(--e-secao);
}

.secao--creme {
  background: linear-gradient(180deg, var(--creme-claro), var(--creme));
}

.secao--branca {
  background: var(--branco);
}

.secao--pessego {
  background: linear-gradient(150deg, var(--pessego-suave), var(--creme));
}

.grade {
  display: grid;
  gap: var(--e-5);
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--coral);
  color: var(--branco);
  padding: var(--e-3) var(--e-5);
  border-radius: 0 0 var(--r-md) 0;
  font-weight: 600;
}

.pular-para-conteudo:focus {
  left: 0;
  color: var(--branco);
}

/* 4) COMPONENTES ========================================================= */

/* --- Rótulo de seção (pílula coral do banner) --- */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  background: var(--coral);
  color: var(--branco);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.42rem 1.1rem;
  border-radius: var(--r-pilula);
  margin-bottom: var(--e-4);
  box-shadow: var(--sombra-1);
}

.rotulo--verde { background: var(--verde); }
.rotulo--claro { background: var(--pessego-suave); color: var(--coral-escuro); }

/* --- Títulos --- */
.titulo-secao {
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  color: var(--coral);
  letter-spacing: -0.015em;
}

.titulo-secao--escuro { color: var(--carvao); }

.subtitulo-secao {
  color: var(--carvao-medio);
  font-size: var(--t-md);
  max-width: 62ch;
  margin-bottom: var(--e-6);
}

.assinatura {
  font-family: var(--fonte-script);
  font-weight: 700;
  color: var(--coral);
  line-height: 1;
}

/*
  Maiúscula apenas na primeira letra. Em português não se escreve
  "Sexta-Feira, 7 De Agosto" — por isso não usamos text-transform: capitalize.
*/
.inicial-maiuscula {
  display: block;
  text-transform: none;
}

.inicial-maiuscula::first-letter {
  text-transform: uppercase;
}

/* --- Botões --- */
.botao {
  --cor-fundo: var(--coral);
  --cor-texto: var(--branco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  padding: 0.95rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--r-pilula);
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao),
    background-color var(--transicao), color var(--transicao);
  box-shadow: var(--sombra-2);
}

.botao:hover {
  color: var(--cor-texto);
  transform: translateY(-3px);
  box-shadow: var(--sombra-3);
}

.botao:active { transform: translateY(-1px); }

.botao--grande {
  font-size: var(--t-md);
  padding: 1.1rem 2.25rem;
}

.botao--pequeno {
  font-size: var(--t-xs);
  padding: 0.6rem 1.1rem;
}

.botao--verde { --cor-fundo: var(--verde); }
.botao--zap { --cor-fundo: #1faa54; }

.botao--vazado {
  --cor-fundo: transparent;
  --cor-texto: var(--coral-escuro);
  border-color: var(--coral);
  box-shadow: none;
}

.botao--vazado:hover {
  background: var(--coral);
  --cor-texto: var(--branco);
}

.botao--fantasma {
  --cor-fundo: var(--branco);
  --cor-texto: var(--carvao);
  box-shadow: var(--sombra-1);
}

.botao--bloco { width: 100%; }

.botao[disabled],
.botao--inativo {
  opacity: 0.5;
  pointer-events: none;
}

.botao svg { flex-shrink: 0; }

/* --- Cards --- */
.cartao {
  background: var(--branco);
  border: 2px solid var(--pessego-suave);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--sombra-1);
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

.cartao--elevado:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-3);
  border-color: var(--pessego);
}

.cartao--creme {
  background: var(--creme-claro);
  border-color: var(--creme-escuro);
}

/* --- Ícone circular coral (como no banner) --- */
.icone-bolha {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  background: var(--coral);
  color: var(--branco);
  border-radius: var(--r-pilula);
  box-shadow: 0 4px 12px rgba(216, 88, 63, 0.3);
}

.icone-bolha svg {
  width: 1.5rem;
  height: 1.5rem;
}

.icone-bolha--verde { background: var(--verde); box-shadow: 0 4px 12px rgba(46, 125, 119, 0.3); }
.icone-bolha--clara { background: var(--pessego-suave); color: var(--coral); box-shadow: none; }
.icone-bolha--pequena { width: 2.25rem; height: 2.25rem; }
.icone-bolha--pequena svg { width: 1.1rem; height: 1.1rem; }

/* --- Selo / etiqueta --- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 0.28rem 0.8rem;
  border-radius: var(--r-pilula);
  background: var(--verde-suave);
  color: var(--verde);
}

.selo--coral { background: var(--pessego-suave); color: var(--coral-escuro); }
.selo--dourado { background: #fdf0d0; color: #a1750f; }
.selo--cinza { background: #eee9e5; color: var(--carvao-medio); }

/* --- Formulários --- */
.campo,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="url"],
select,
textarea {
  width: 100%;
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  color: var(--carvao);
  background: var(--branco);
  border: 2px solid var(--creme-escuro);
  border-radius: var(--r-md);
  padding: 0.8rem 1rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.6;
}

.campo:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: var(--sombra-foco);
}

.campo::placeholder { color: #b7aca4; }

.grupo-campo {
  margin-bottom: var(--e-4);
}

.grupo-campo > label,
.rotulo-campo {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--carvao);
  margin-bottom: 0.4rem;
}

.ajuda-campo {
  display: block;
  font-size: var(--t-xs);
  color: var(--carvao-suave);
  margin-top: 0.35rem;
  line-height: 1.5;
}

.erro-campo {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--coral-escuro);
  margin-top: 0.35rem;
}

.grupo-campo--erro .campo,
.grupo-campo--erro input,
.grupo-campo--erro textarea,
.grupo-campo--erro select {
  border-color: var(--coral);
  background: #fdf3f1;
}

.caixa-marcacao {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  background: var(--creme-claro);
  border: 2px solid var(--creme-escuro);
  border-radius: var(--r-md);
  padding: var(--e-4);
  cursor: pointer;
}

.caixa-marcacao input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--coral);
  cursor: pointer;
}

.caixa-marcacao span {
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* --- Avisos --- */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-md);
  border-left: 5px solid var(--coral);
  background: var(--pessego-suave);
  color: var(--coral-escuro);
  font-size: var(--t-sm);
  font-weight: 500;
  margin-bottom: var(--e-4);
}

.aviso--sucesso { background: var(--verde-suave); border-color: var(--verde); color: #1f5b56; }
.aviso--info { background: #e6f0f7; border-color: #3b7ea1; color: #1f4c63; }
.aviso--atencao { background: #fdf0d0; border-color: var(--dourado); color: #8a6410; }

.aviso svg { flex-shrink: 0; margin-top: 0.15rem; }

/* --- Doodles decorativos --- */
.enfeite {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.75;
}

/* 5) SEÇÕES ============================================================== */

/* --- Cabeçalho fixo --- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 241, 231, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transicao), border-color var(--transicao),
    background-color var(--transicao);
}

.cabecalho--rolado {
  box-shadow: var(--sombra-2);
  border-bottom-color: var(--creme-escuro);
  background: rgba(253, 241, 231, 0.96);
}

.cabecalho__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 4.5rem;
  padding-block: 0.6rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.marca__monograma {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: var(--coral);
  color: var(--creme);
  font-family: var(--fonte-script);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(216, 88, 63, 0.3);
}

.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }

.marca__nome {
  font-family: var(--fonte-script);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--coral);
}

.marca__papel {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--carvao-suave);
}

.navegacao {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.navegacao a {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--carvao-medio);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pilula);
  transition: color var(--transicao), background-color var(--transicao);
  white-space: nowrap;
}

.navegacao a::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}

.navegacao a:hover { color: var(--coral-escuro); }
.navegacao a:hover::after { transform: scaleX(1); }

.cabecalho__acoes { display: flex; align-items: center; gap: var(--e-3); }

/* O botão dentro do menu existe só para a versão em celular. */
.navegacao > .botao { display: none; }

.botao-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  background: var(--branco);
  border: 2px solid var(--creme-escuro);
  border-radius: 12px;
  cursor: pointer;
  color: var(--coral);
  transition: background-color var(--transicao), border-color var(--transicao);
}

.botao-menu:hover { border-color: var(--pessego); }

.botao-menu__linhas,
.botao-menu__linhas::before,
.botao-menu__linhas::after {
  display: block;
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transicao), opacity var(--transicao);
}

.botao-menu__linhas { position: relative; }
.botao-menu__linhas::before,
.botao-menu__linhas::after { content: ""; position: absolute; left: 0; }
.botao-menu__linhas::before { top: -6px; }
.botao-menu__linhas::after { top: 6px; }

.botao-menu[aria-expanded="true"] .botao-menu__linhas { background: transparent; }
.botao-menu[aria-expanded="true"] .botao-menu__linhas::before { transform: translateY(6px) rotate(45deg); }
.botao-menu[aria-expanded="true"] .botao-menu__linhas::after { transform: translateY(-6px) rotate(-45deg); }

/* --- Destaque (hero) --- */
.destaque {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) var(--e-secao);
}

.destaque__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.destaque__bolha {
  position: absolute;
  top: -18%;
  right: -14%;
  width: min(62vw, 780px);
  aspect-ratio: 1;
  background: linear-gradient(155deg, var(--pessego), #f5b9a3);
  border-radius: 47% 53% 41% 59% / 55% 44% 56% 45%;
  animation: flutuar-bolha 18s ease-in-out infinite;
}

.destaque__bolha::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 2px dashed rgba(255, 255, 255, 0.65);
  border-radius: inherit;
}

@keyframes flutuar-bolha {
  0%, 100% { border-radius: 47% 53% 41% 59% / 55% 44% 56% 45%; transform: translate(0, 0) rotate(0deg); }
  50% { border-radius: 55% 45% 58% 42% / 44% 57% 43% 56%; transform: translate(-2%, 2%) rotate(-3deg); }
}

.destaque__interior {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.destaque__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-3xl);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--coral);
  text-transform: uppercase;
  margin-bottom: var(--e-4);
}

.destaque__titulo small {
  display: block;
  font-family: var(--fonte-texto);
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--carvao);
  margin-bottom: 0.4em;
}

.destaque__nome {
  font-family: var(--fonte-script);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  color: var(--coral);
  line-height: 1;
  display: inline-block;
  position: relative;
  margin-bottom: var(--e-3);
}

.destaque__nome::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -0.12em;
  height: 3px;
  border-radius: 3px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  animation: risco 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

@keyframes risco { to { transform: scaleX(1); } }

.destaque__texto {
  font-size: var(--t-md);
  color: var(--carvao-medio);
  max-width: 54ch;
  margin-bottom: var(--e-5);
}

.destaque__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

.destaque__provas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5) var(--e-6);
  padding-top: var(--e-4);
  border-top: 2px dashed var(--pessego-claro);
}

.prova { display: flex; flex-direction: column; }
.prova__numero {
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  color: var(--coral);
  line-height: 1;
}
.prova__texto {
  font-size: var(--t-xs);
  color: var(--carvao-suave);
  font-weight: 500;
  max-width: 18ch;
}

/* Foto do destaque */
.destaque__foto {
  position: relative;
  justify-self: center;
  width: min(100%, 460px);
}

.destaque__moldura {
  position: relative;
  border-radius: 46% 46% 32% 32% / 34% 34% 12% 12%;
  overflow: hidden;
  background: linear-gradient(170deg, var(--pessego-claro), var(--creme));
  box-shadow: var(--sombra-3);
  aspect-ratio: 3 / 4;
}

.destaque__moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.destaque__cartao-flutuante {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  background: var(--branco);
  border-radius: var(--r-lg);
  padding: 0.8rem 1.1rem;
  box-shadow: var(--sombra-3);
  animation: flutuar 5.5s ease-in-out infinite;
  z-index: 2;
}

.destaque__cartao-flutuante strong {
  display: block;
  font-size: var(--t-sm);
  line-height: 1.25;
}

.destaque__cartao-flutuante span {
  font-size: var(--t-xs);
  color: var(--carvao-suave);
}

/* Os dois cartões ficam na metade de baixo da moldura: o rosto da professora
   ocupa o terço superior da foto (ver o object-position acima) e não pode ser
   coberto. Um de cada lado, formando uma diagonal. */
.destaque__cartao-flutuante--pedagoga { left: -6%; top: 50%; }
.destaque__cartao-flutuante--experiencia { right: -6%; bottom: 12%; animation-delay: 1.6s; }

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

/* --- Faixa de destaques (marquee suave) --- */
.faixa {
  background: var(--coral);
  color: var(--branco);
  padding-block: 0.9rem;
  overflow: hidden;
}

.faixa__trilha {
  display: flex;
  gap: var(--e-6);
  width: max-content;
  animation: correr 34s linear infinite;
}

.faixa__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

@keyframes correr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.faixa:hover .faixa__trilha { animation-play-state: paused; }

/* --- Serviços --- */
.grade-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--e-4);
}

.servico {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  background: var(--branco);
  border: 2px solid var(--pessego-suave);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  position: relative;
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

.servico::before {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: var(--pessego-suave);
  opacity: 0;
  transition: opacity var(--transicao);
}

.servico:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-3);
  border-color: var(--pessego);
}

.servico:hover::before { opacity: 0.45; }

.servico > * { position: relative; z-index: 1; }

.servico__titulo {
  font-size: var(--t-md);
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--carvao);
}

.servico__texto {
  font-size: var(--t-sm);
  color: var(--carvao-medio);
  margin: 0;
}

/* --- Sobre --- */
.sobre {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.sobre__foto {
  position: relative;
}

.sobre__foto img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-3);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}

.sobre__foto::before {
  content: "";
  position: absolute;
  inset: -14px -14px 30px 22px;
  border: 2px dashed var(--pessego);
  border-radius: var(--r-xl);
  z-index: -1;
}

.sobre__texto p { color: var(--carvao-medio); }

.linha-do-tempo {
  list-style: none;
  padding: 0;
  margin: var(--e-5) 0 0;
  position: relative;
}

.linha-do-tempo::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom, var(--pessego) 0 6px, transparent 6px 12px
  );
}

.linha-do-tempo li {
  position: relative;
  padding-left: 2.2rem;
  padding-bottom: var(--e-5);
}

.linha-do-tempo li:last-child { padding-bottom: 0; }

.linha-do-tempo li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px var(--creme-claro);
}

.linha-do-tempo__titulo {
  font-weight: 700;
  font-size: var(--t-base);
  display: block;
}

.linha-do-tempo__meta {
  font-size: var(--t-sm);
  color: var(--carvao-suave);
}

.linha-do-tempo__descricao {
  font-size: var(--t-sm);
  color: var(--carvao-medio);
  margin: 0.35rem 0 0;
}

/* --- Missão (causa social) --- */
.missao {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--coral), var(--coral-escuro) 70%);
  color: var(--branco);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1rem + 4vw, 4rem);
}

.missao::before,
.missao::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.28);
}

.missao::before { width: 22rem; height: 22rem; top: -9rem; right: -7rem; }
.missao::after { width: 14rem; height: 14rem; bottom: -6rem; left: -4rem; }

.missao__interior {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-6);
  align-items: center;
}

.missao h2 {
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  color: var(--branco);
}

.missao p { color: rgba(255, 255, 255, 0.92); }

.missao .rotulo { background: rgba(255, 255, 255, 0.2); color: var(--branco); }

.missao__dados {
  list-style: none;
  padding: 0;
  margin: var(--e-5) 0;
  display: grid;
  gap: var(--e-3);
}

.missao__dados li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.45;
}

.missao__dados strong { color: var(--branco); font-weight: 600; }

.missao__dados svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.75);
}

.missao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.missao__botao-vazado {
  --cor-fundo: transparent;
  --cor-texto: var(--branco);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.missao__botao-vazado:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--branco);
}

.missao__cartaz {
  margin: 0;
  width: min(100%, 340px);
  justify-self: center;
  animation: flutuar 7s ease-in-out infinite;
}

/* A arte da missão é um selo redondo desenhado sobre fundo branco. Recortar em
   círculo elimina os cantos brancos, que sobre o coral pareceriam um adesivo
   mal colado. */
.missao__cartaz img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.38);
  border: 3px solid rgba(255, 255, 255, 0.85);
}

.missao__cartaz figcaption {
  margin-top: 0.7rem;
  text-align: center;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.65);
}

/* --- Planos --- */
.grade-planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--e-5);
  align-items: stretch;
}

.plano {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--branco);
  border: 2px solid var(--pessego-suave);
  border-radius: var(--r-xl);
  padding: var(--e-6) var(--e-5) var(--e-5);
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

.plano:hover {
  transform: translateY(-8px);
  box-shadow: var(--sombra-3);
  border-color: var(--pessego);
}

.plano--destaque {
  border-color: var(--coral);
  box-shadow: var(--sombra-2);
}

.plano__faixa {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--coral);
  color: var(--branco);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: var(--r-pilula);
  white-space: nowrap;
  box-shadow: var(--sombra-2);
}

.plano__nome {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--carvao);
  margin-bottom: 0.15rem;
}

.plano__resumo {
  font-size: var(--t-sm);
  color: var(--carvao-suave);
  margin-bottom: var(--e-4);
}

.plano__preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.plano__valor {
  font-family: var(--fonte-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
  color: var(--coral);
  line-height: 1;
}

.plano__moeda {
  font-family: var(--fonte-texto);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--coral);
}

.plano__riscado {
  font-size: var(--t-sm);
  color: var(--carvao-suave);
  text-decoration: line-through;
}

.plano__unidade {
  font-size: var(--t-sm);
  color: var(--carvao-suave);
  margin-bottom: var(--e-4);
}

.plano__itens {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-5);
  flex-grow: 1;
}

.plano__itens li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--t-sm);
  color: var(--carvao-medio);
  padding-block: 0.5rem;
  border-bottom: 1px dashed var(--creme-escuro);
}

.plano__itens li:last-child { border-bottom: 0; }

.plano__itens svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--verde);
  flex-shrink: 0;
  margin-top: 0.22rem;
}

/* --- Depoimentos --- */
.grade-depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--e-5);
}

.depoimento {
  position: relative;
  background: var(--branco);
  border: 2px solid var(--pessego-suave);
  border-radius: var(--r-lg);
  padding: var(--e-6) var(--e-5) var(--e-5);
}

.depoimento::before {
  content: "\201C";
  position: absolute;
  top: -0.35rem;
  left: 1.2rem;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--pessego-claro);
}

.depoimento__texto {
  position: relative;
  font-size: var(--t-sm);
  color: var(--carvao-medio);
  font-style: italic;
}

.depoimento__estrelas { display: flex; gap: 0.15rem; color: var(--dourado); margin-bottom: var(--e-3); }
.depoimento__estrelas svg { width: 1.05rem; height: 1.05rem; }

.depoimento__autor { font-weight: 700; font-size: var(--t-sm); }
.depoimento__relacao { font-size: var(--t-xs); color: var(--carvao-suave); }

/* --- Perguntas frequentes --- */
.lista-perguntas { display: grid; gap: var(--e-3); }

.pergunta {
  background: var(--branco);
  border: 2px solid var(--pessego-suave);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.pergunta[open] { border-color: var(--pessego); box-shadow: var(--sombra-2); }

.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  font-weight: 600;
  font-size: var(--t-base);
  padding: var(--e-4) var(--e-5);
  cursor: pointer;
  list-style: none;
  transition: color var(--transicao);
}

.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:hover { color: var(--coral-escuro); }

.pergunta__sinal {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pessego-suave);
  color: var(--coral);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--transicao), background-color var(--transicao);
}

.pergunta[open] .pergunta__sinal {
  transform: rotate(45deg);
  background: var(--coral);
  color: var(--branco);
}

.pergunta__resposta {
  padding: 0 var(--e-5) var(--e-5);
  font-size: var(--t-sm);
  color: var(--carvao-medio);
  animation: abrir 300ms ease;
}

@keyframes abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- Local e mapa --- */
.local {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--e-6);
  align-items: start;
}

.mapa {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  border: 2px solid var(--pessego-suave);
  aspect-ratio: 16 / 10;
  background: var(--creme-escuro);
}

.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.lista-contato { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-4); }

.lista-contato li { display: flex; align-items: flex-start; gap: var(--e-3); }

.lista-contato strong { display: block; font-size: var(--t-sm); }
.lista-contato span { font-size: var(--t-sm); color: var(--carvao-medio); }
.lista-contato a { font-size: var(--t-sm); }

/* --- Chamada final --- */
.chamada-final {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(160deg, var(--pessego-suave), var(--creme-escuro));
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--e-5);
  border: 2px dashed var(--pessego);
}

.chamada-final h2 {
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  color: var(--coral);
}

.chamada-final p { max-width: 55ch; margin-inline: auto; color: var(--carvao-medio); }

.chamada-final__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: center;
  margin-top: var(--e-5);
}

/* --- Rodapé --- */
.rodape {
  background: var(--carvao);
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--e-7) var(--e-5);
  font-size: var(--t-sm);
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--e-6);
  padding-bottom: var(--e-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.rodape h3 {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: var(--e-4);
}

.rodape a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.rodape a:hover { color: var(--pessego); }

.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.rodape__assinatura {
  font-family: var(--fonte-script);
  font-size: 1.7rem;
  color: var(--pessego);
  line-height: 1.1;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--e-4);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* --- Botão flutuante do WhatsApp --- */
.zap-flutuante {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #1faa54;
  color: var(--branco);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  padding: 0.85rem 1.25rem;
  border-radius: var(--r-pilula);
  box-shadow: 0 10px 30px rgba(31, 170, 84, 0.4);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.zap-flutuante:hover {
  color: var(--branco);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 40px rgba(31, 170, 84, 0.5);
}

.zap-flutuante svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

/* 6) AGENDAMENTO ========================================================= */
.passos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
  margin-bottom: var(--e-6);
}

.passo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--carvao-suave);
}

.passo__numero {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--creme-escuro);
  color: var(--carvao-suave);
  font-size: var(--t-xs);
  flex-shrink: 0;
}

.passo--ativo { color: var(--coral-escuro); }
.passo--ativo .passo__numero { background: var(--coral); color: var(--branco); }
.passo--feito .passo__numero { background: var(--verde); color: var(--branco); }
.passo--feito { color: var(--verde); }

.passo__seta { color: var(--pessego); flex-shrink: 0; }

.agendamento {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
}

.seletor-planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--e-3);
  margin-bottom: var(--e-6);
}

.opcao-plano {
  display: block;
  background: var(--branco);
  border: 2px solid var(--creme-escuro);
  border-radius: var(--r-md);
  padding: var(--e-4);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicao), transform var(--transicao),
    box-shadow var(--transicao);
}

.opcao-plano:hover { border-color: var(--pessego); transform: translateY(-3px); color: inherit; }

.opcao-plano--ativa {
  border-color: var(--coral);
  background: var(--pessego-suave);
  box-shadow: var(--sombra-2);
}

.opcao-plano__nome { font-weight: 700; font-size: var(--t-sm); display: block; }
.opcao-plano__meta { font-size: var(--t-xs); color: var(--carvao-suave); }

/* Calendário */
.calendario {
  background: var(--branco);
  border: 2px solid var(--pessego-suave);
  border-radius: var(--r-lg);
  padding: var(--e-4);
  box-shadow: var(--sombra-1);
}

.calendario__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.calendario__mes {
  font-weight: 700;
  font-size: var(--t-md);
  text-align: center;
}

.calendario__navegacao { display: flex; gap: 0.4rem; }

.calendario__seta {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 2px solid var(--creme-escuro);
  background: var(--branco);
  color: var(--coral);
  text-decoration: none;
  transition: border-color var(--transicao), background-color var(--transicao);
}

.calendario__seta:hover { border-color: var(--coral); background: var(--pessego-suave); color: var(--coral-escuro); }

.calendario__seta--inativa { opacity: 0.35; pointer-events: none; }

.calendario__grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}

.calendario__cabecalho {
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--carvao-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-block: 0.4rem;
}

.calendario__dia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  aspect-ratio: 1;
  min-height: 2.6rem;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: var(--creme-claro);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--carvao-suave);
  text-decoration: none;
  transition: background-color var(--transicao), color var(--transicao),
    border-color var(--transicao), transform var(--transicao);
}

.calendario__dia--vazio { background: transparent; }

.calendario__dia--livre {
  background: var(--verde-suave);
  color: var(--verde);
  cursor: pointer;
}

.calendario__dia--livre:hover {
  background: var(--verde);
  color: var(--branco);
  transform: scale(1.06);
}

.calendario__dia--livre::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.calendario__dia--ocupado { color: #c3b8b0; }

.calendario__dia--hoje { border-color: var(--pessego); }

.calendario__dia--escolhido {
  background: var(--coral) !important;
  color: var(--branco) !important;
  border-color: var(--coral-escuro);
  transform: scale(1.04);
}

.calendario__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px dashed var(--creme-escuro);
  font-size: var(--t-xs);
  color: var(--carvao-suave);
}

.calendario__legenda span { display: inline-flex; align-items: center; gap: 0.4rem; }

.calendario__ponto {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 4px;
  display: inline-block;
}

/* Horários */
.horarios { position: sticky; top: 6rem; }

.grade-horarios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr));
  gap: var(--e-2);
}

.horario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.7rem 0.4rem;
  background: var(--branco);
  border: 2px solid var(--creme-escuro);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--carvao);
  text-decoration: none;
  transition: all var(--transicao);
}

.horario small { font-size: 0.68rem; font-weight: 500; color: var(--carvao-suave); }

.horario:hover {
  border-color: var(--coral);
  background: var(--coral);
  color: var(--branco);
  transform: translateY(-3px);
  box-shadow: var(--sombra-2);
}

.horario:hover small { color: rgba(255, 255, 255, 0.85); }

.vazio {
  text-align: center;
  padding: var(--e-6) var(--e-4);
  color: var(--carvao-suave);
  font-size: var(--t-sm);
  background: var(--creme-claro);
  border: 2px dashed var(--creme-escuro);
  border-radius: var(--r-md);
}

/* Resumo do agendamento */
.resumo {
  background: var(--creme-claro);
  border: 2px solid var(--pessego-suave);
  border-radius: var(--r-lg);
  padding: var(--e-5);
}

.resumo__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: 0.65rem;
  border-bottom: 1px dashed var(--creme-escuro);
  font-size: var(--t-sm);
}

.resumo__linha:last-child { border-bottom: 0; }
.resumo__linha dt { color: var(--carvao-suave); margin: 0; }
.resumo__linha dd { margin: 0; font-weight: 600; text-align: right; }

.resumo__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-4);
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 2px solid var(--pessego-claro);
}

.resumo__total strong {
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  color: var(--coral);
}

/* Comprovante */
.comprovante {
  text-align: center;
  background: var(--branco);
  border: 2px solid var(--pessego-suave);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1rem + 3vw, 3.5rem);
  box-shadow: var(--sombra-2);
}

.comprovante__visto {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--e-4);
  border-radius: 50%;
  background: var(--verde-suave);
  color: var(--verde);
  animation: aparecer-visto 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.comprovante__visto svg { width: 2.5rem; height: 2.5rem; }

@keyframes aparecer-visto {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Na última etapa o site não confirma nada — quem confirma é o WhatsApp.
   Por isso o círculo usa o verde do WhatsApp, e não o visto de "pronto". */
.comprovante__visto--zap {
  background: #e3f5e9;
  color: #1faa54;
}

/* Prévia da mensagem: mostra à família exatamente o que vai ser enviado. */
.previa-mensagem {
  text-align: left;
  max-width: 30rem;
  margin: 0 auto var(--e-5);
}

.previa-mensagem__rotulo {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--carvao-suave);
  margin-bottom: var(--e-2);
}

.previa-mensagem__balao {
  position: relative;
  background: #e7ffdb;           /* verde do balão enviado no WhatsApp */
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
  padding: var(--e-4);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--carvao);
  /* A mensagem tem quebras de linha próprias; preserva o que o Django montou. */
  overflow-wrap: break-word;
}

/* 7) ANIMAÇÕES DE ENTRADA ================================================ */
.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.revelar--visivel { opacity: 1; transform: none; }

.revelar[data-atraso="1"] { transition-delay: 90ms; }
.revelar[data-atraso="2"] { transition-delay: 180ms; }
.revelar[data-atraso="3"] { transition-delay: 270ms; }
.revelar[data-atraso="4"] { transition-delay: 360ms; }
.revelar[data-atraso="5"] { transition-delay: 450ms; }
.revelar[data-atraso="6"] { transition-delay: 540ms; }

/* 8) RESPONSIVO ========================================================== */
@media (max-width: 1080px) {
  .destaque__interior { grid-template-columns: 1fr; text-align: center; }
  .destaque__texto { margin-inline: auto; }
  .destaque__acoes,
  .destaque__provas { justify-content: center; }
  .destaque__foto { order: -1; width: min(100%, 380px); }
  /* A moldura encolhe, mas os cartões não: aqui eles quase preenchem a largura
     da foto, então precisam de mais respiro vertical entre um e outro. */
  .destaque__cartao-flutuante--pedagoga { left: -2%; top: 48%; }
  .destaque__cartao-flutuante--experiencia { right: -2%; bottom: 3%; }
  .sobre { grid-template-columns: 1fr; }
  .sobre__foto { max-width: 420px; margin-inline: auto; }
  .local { grid-template-columns: 1fr; }
  .agendamento { grid-template-columns: 1fr; }
  .horarios { position: static; }
}

@media (max-width: 900px) {
  .navegacao {
    position: fixed;
    inset: 4.5rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme-claro);
    border-bottom: 2px solid var(--creme-escuro);
    box-shadow: var(--sombra-3);
    padding: var(--e-3) 1.25rem var(--e-5);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transicao), opacity var(--transicao),
      visibility var(--transicao);
  }

  .navegacao--aberta { transform: none; opacity: 1; visibility: visible; }

  .navegacao a {
    padding: 0.9rem 0.5rem;
    font-size: var(--t-md);
    border-bottom: 1px dashed var(--creme-escuro);
    border-radius: 0;
  }

  .navegacao a::after { display: none; }

  .navegacao > .botao {
    display: inline-flex;
    margin-top: var(--e-4);
    border-bottom: 0;
    color: var(--branco);
  }

  .botao-menu { display: inline-flex; }
  .cabecalho__acoes .botao--vazado { display: none; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__grade > :first-child { grid-column: 1 / -1; }

  .missao__interior { grid-template-columns: 1fr; justify-items: stretch; }
  .missao__cartaz { order: -1; width: min(100%, 300px); animation: none; }
}

@media (max-width: 640px) {
  :root { --e-secao: 3.25rem; }

  .conteudo,
  .conteudo--estreito { width: min(100% - 1.75rem, var(--largura-conteudo)); }

  /* No celular a mensagem vem antes da foto: quem chega precisa ler primeiro. */
  .destaque__foto {
    order: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 340px);
    margin-top: var(--e-5);
  }

  .destaque__moldura { width: 100%; aspect-ratio: 4 / 5; }

  .destaque__cartao-flutuante {
    position: static;
    margin-top: var(--e-3);
    animation: none;
    text-align: left;
  }

  .destaque__provas { gap: var(--e-4) var(--e-5); }
  .prova__texto { max-width: 14ch; }

  .grade-servicos,
  .grade-planos,
  .grade-depoimentos { grid-template-columns: 1fr; }

  .rodape__grade { grid-template-columns: 1fr; gap: var(--e-5); }

  .zap-flutuante span { display: none; }
  .zap-flutuante { padding: 0.95rem; }

  .calendario__dia { min-height: 2.3rem; font-size: var(--t-xs); }
  .grade-horarios { grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); }

  .missao { border-radius: var(--r-lg); }
  .botao { width: 100%; }
  .botao--auto { width: auto; }
  .destaque__acoes .botao { width: 100%; }
}

@media (max-width: 380px) {
  .marca__papel { display: none; }
  .calendario { padding: var(--e-3); }
  .calendario__grade { gap: 0.18rem; }
}

/* 9) ACESSIBILIDADE E IMPRESSÃO ========================================== */
:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

@media print {
  .cabecalho,
  .rodape,
  .zap-flutuante,
  .faixa,
  .botao { display: none !important; }

  body { background: #fff; color: #000; }
  .comprovante { border: 1px solid #999; box-shadow: none; }
}