/*
 * Página `nossas-escolas` (etapa G10) -- a moldura, e só ela.
 *
 * Transcreve as regras `.page__schools` do `main.css` que está no ar (linhas 1862-2392),
 * conferido contra `https://www.sebeducation.com/nossas-escolas.html` antes de escrever -- a
 * lição da G2. O escopo é `.pagina--nossas-escolas`, que o `base.html` põe no `<main>` a
 * partir do registro de `backend/montagem`.
 *
 * ### O que a F4 já trouxe, e por isso não está aqui
 *
 * O seletor de aba inteiro -- fundo cinza, 64px, ativo em azul, hover, o foco no rótulo, as
 * três colunas de 116,5px do celular. A F4 mediu os três grupos do site e levou **este** para o
 * componente, por ser o dominante (6 das 12 abas). O que sobra do seletor para esta folha é
 * uma linha: a largura máxima de cada rótulo.
 *
 * ### As quatro faixas de um painel, e como cada uma é alcançada
 *
 * | faixa do original | seletor |
 * |---|---|
 * | `.wrapper__banner` | `.abas__painel > .banner` |
 * | `.wrapper__about` | `.abas__painel > .bloco-sobre` |
 * | `.wrapper__list` (só a 6ª) | `.abas__painel > [data-aos]:has(.topicos)` |
 * | `.cover__bottom` | `.abas__painel > .imagem` |
 *
 * ### O que é por aba, e por que é `:nth-of-type`
 *
 * O original identifica cada painel por uma classe (`.pane1`..`.pane6`) e usa isso em **30
 * regras**: as medidas do banner de cada escola. Aqui os painéis não têm classe própria --
 * eles são plugins iguais, e uma classe por aba viraria campo no editor para uma informação
 * que já existe na ordem.
 *
 * `:nth-of-type` sobre `.abas__item` diz a mesma coisa lendo a ordem, que é o que o editor
 * controla no admin. O preço é conhecido: trocar duas abas de lugar troca as medidas de
 * lugar junto. É aceitável porque o que varia por aba é **enquadramento de foto** -- quanto
 * respiro a imagem daquela escola pede acima e abaixo do texto --, e uma foto que muda de
 * aba leva o enquadramento dela consigo de qualquer forma.
 */

.pagina--nossas-escolas {
  margin-top: 62px;
}

/* --------------------------------------------------------------------- a faixa de abas
 *
 * A única medida do seletor que a F4 deixou para cá. No original a faixa tem
 * `max-width: 1152px` com `padding: 0 16px`, e o `content-box` do projeto (e do estático) faz
 * daquilo **1152px de conteúdo**, e não de caixa -- medido no site no ar, a faixa sai com
 * 1184px e cada rótulo com 189. Os seis repartem os 1152 com 4px entre eles:
 * (1152 - 20) / 6 = 188,67px cada.
 *
 * **A largura vai no rótulo, e não na faixa**, e a razão é a construção da F4: ali rótulos e
 * painéis são irmãos no mesmo contêiner, então uma `max-width` na faixa encolheria também os
 * painéis -- que no original são de largura cheia, com a foto encostando nas duas bordas. O
 * `justify-content: center` que centra a fila já é do componente.
 */
.pagina--nossas-escolas .abas__rotulo {
  max-width: 188.67px;
}

/* --------------------------------------------------------------------- o banner
 *
 * `.wrapper__banner`: a foto da unidade como fundo, e a logo, o título e a descrição
 * empilhados sobre ela. A variante `logo` da E1 já empilha; o que entra aqui é a moldura.
 *
 * **Os 28px de recuo do topo são os 32 do original menos 4, e a conta é obrigatória.** A
 * faixa de abas é um flex com `gap: 4px`, e o painel é um item dela numa linha própria --
 * então o intervalo entre a fila de rótulos e o painel já existe antes de esta regra ser
 * lida. Somar os 32 daria 36. É o mesmo defeito que a trilha do carrossel teve na G9, achado
 * lá no navegador e evitado aqui na conta.
 *
 * `box-sizing: border-box` porque os 665px do original são a altura **com** o recuo dentro:
 * lá o elemento é um `<div>` que já declara `border-box`, e aqui o projeto usa `content-box`
 * (ver `base.css`). Sem isto o banner cresceria o tanto do recuo de cada aba -- a mesma
 * armadilha que a G5 achou no rótulo da aba.
 *
 * `gap: 0` desfaz os 16px do `banner--logo`: aqui o respiro entre a logo e o texto é o
 * `margin-bottom` da logo, que muda em cada uma das seis.
 */
.pagina--nossas-escolas .abas__painel > .banner {
  box-sizing: border-box;
  height: 665px;
  margin-top: 28px;
  gap: 0;
  background-size: 100%;
  background-position: top right;
}

/*
 * Os 16% de recuo à esquerda valem para os três elementos do original (`.logo`, `.title` e
 * `.description`), e aqui eles são dois: a logo e a caixa de texto que leva os outros dois.
 */
.pagina--nossas-escolas .abas__painel > .banner > .banner__imagem,
.pagina--nossas-escolas .abas__painel > .banner > .banner__conteudo {
  margin-left: 16%;
}

/*
 * O título é 32/36px em Arial, e não os 52px em Manrope do componente: nas seis abas ele é o
 * nome de uma promessa, não o nome da página. É o mesmo tipo de desvio que o learning
 * registrou na prosa -- quem manda é o original.
 */
.pagina--nossas-escolas .abas__painel > .banner .banner__titulo {
  font-family: var(--seb-fonte-corpo);
  font-size: 32px;
  line-height: 36px;
}

/*
 * A `.description`, que é um bloco de texto filho do banner -- ela tem `<strong>` dentro em
 * três das seis, e o campo da E1 é texto escapado (ver `backend/montagem/nossas_escolas.py`).
 * 20px é o degrau `seb-texto` da D3, que é o mesmo do original; só a entrelinha entra.
 */
.pagina--nossas-escolas .abas__painel > .banner .texto--seb-texto {
  line-height: 28px;
}

/*
 * As 30 regras por aba do original, reduzidas ao que de fato varia: o recuo do banner, o
 * respiro abaixo da logo e do título, e a largura em que cada texto quebra. Ver a nota sobre
 * `:nth-of-type` no topo do arquivo.
 *
 * A largura da logo só aparece em duas das seis (a 3ª e a 4ª); nas outras quatro o original
 * não declara nada e o arquivo sai no tamanho natural, que é o que o `.banner__imagem` da E1
 * já faz.
 */
.pagina--nossas-escolas .abas__item:nth-of-type(1) .banner {
  padding: 32px 0 194px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(1) .banner__imagem {
  margin-bottom: 32px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(1) .banner__titulo {
  max-width: 481px;
  margin-bottom: 24px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(1) .banner .texto--seb-texto {
  max-width: 365px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(2) .banner {
  padding: 62px 0 267px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(2) .banner__imagem {
  margin-bottom: 38px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(2) .banner__titulo {
  max-width: 543px;
  margin-bottom: 38px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(2) .banner .texto--seb-texto {
  max-width: 448px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(3) .banner {
  padding: 82px 0 243px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(3) .banner__imagem {
  width: 352px;
  margin-bottom: 54px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(3) .banner__titulo {
  max-width: 475px;
  margin-bottom: 42px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(3) .banner .texto--seb-texto {
  max-width: 365px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(4) .banner {
  padding: 62px 0 214px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(4) .banner__imagem {
  width: 232px;
  margin-bottom: 42px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(4) .banner__titulo {
  max-width: 447px;
  margin-bottom: 42px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(4) .banner .texto--seb-texto {
  max-width: 426px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(5) .banner {
  padding: 62px 0 239px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(5) .banner__imagem {
  margin-bottom: 42px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(5) .banner__titulo {
  max-width: 409px;
  margin-bottom: 46px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(5) .banner .texto--seb-texto {
  max-width: 402px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(6) .banner {
  padding: 62px 0 239px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(6) .banner__imagem {
  margin-bottom: 42px;
}

/* A única aba cujo título não é 32px: ele é o mais longo dos seis. */
.pagina--nossas-escolas .abas__item:nth-of-type(6) .banner__titulo {
  max-width: 409px;
  margin-bottom: 32px;
  font-size: 28px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(6) .banner .texto--seb-texto {
  max-width: 402px;
}

/* --------------------------------------------------------------------- a prosa
 *
 * `.wrapper__about`, que aqui é o `.bloco-sobre` da E2 -- o quarto dos 11 usos em que o bloco
 * **não tem texto próprio**, pela razão de sempre: a prosa tem `<strong>` e quebras, e o
 * campo `texto` da E2 é texto escapado.
 *
 * No original a faixa é um flex de quatro filhos -- a linha, o par de `<div>` do celular, o
 * conteúdo e o grafismo. Aqui a linha é posicionada (E2) e o grafismo é fundo, então os dois
 * viram recuo: 257px à esquerda são os 236 da linha mais os 21 de respiro dela, e os 257 à
 * direita são os 210 do grafismo mais os 47 que o original põe entre ele e o texto.
 */
.pagina--nossas-escolas .abas__painel > .bloco-sobre {
  box-sizing: border-box;
  margin-top: 82px;
  padding-left: 257px;
  padding-right: 257px;
  /*
   * Os 62px de respiro que o original dá abaixo do conteúdo **são recuo da faixa, e não margem
   * do conteúdo**: como margem eles escapariam da caixa por colapso -- a faixa não tem recuo
   * nem borda embaixo --, e aí a conta do `min-height` abaixo passaria a contar uma altura que
   * o elemento não tem.
   */
  padding-bottom: 62px;
  /*
   * **Os 473px são o grafismo, e sem eles a 6ª aba encolhe 26px.** No original a faixa é um
   * flex e o grafismo é um dos filhos dela, então ele *empurra*: nas abas 1 a 5 a prosa é mais
   * alta e ninguém nota, mas na Harven -- que tem o texto mais curto -- quem define a altura
   * da faixa é o desenho, 8px de respiro mais 465 de arquivo. Aqui ele é um `::after`
   * posicionado, que não empurra nada, e a lista de cursos subiria por cima dele.
   *
   * Achado medindo a página aba por aba contra o site no ar, e não lendo o `main.css`: lá esta
   * altura não está escrita em lugar nenhum -- ela é o resultado de um flex.
   */
  min-height: 473px;
}

/*
 * A linha decorativa da E2, no lugar em que o original a põe: colada à esquerda, 8px abaixo
 * do topo da faixa.
 *
 * **A altura muda por aba, e é o único caso do site em que isso acontece.** O estático usa
 * dois arquivos aqui -- `line-school.svg` (236x72) nas abas 1, 2 e 5 e `line-school-2.svg`
 * (235x98) nas abas 3, 4 e 6 --, e abertos lado a lado eles são o mesmo "L" em duas alturas.
 * A B7 já havia unificado o primeiro em `line-decorativa.svg`; o segundo não vem como
 * arquivo, vem como estas duas regras. É a G6 que tornou isso possível, quando fez a linha
 * esticar sem engrossar o traço.
 */
.pagina--nossas-escolas .bloco-sobre__linha {
  top: 8px;
  right: auto;
  left: 0;
  width: 236px;
  height: 72px;
}

.pagina--nossas-escolas .abas__item:nth-of-type(3) .bloco-sobre__linha,
.pagina--nossas-escolas .abas__item:nth-of-type(4) .bloco-sobre__linha,
.pagina--nossas-escolas .abas__item:nth-of-type(6) .bloco-sobre__linha {
  height: 98px;
}

/* Os 842px do `.content` do original. */
.pagina--nossas-escolas .bloco-sobre__conteudo {
  max-width: 842px;
}

/*
 * **O grafismo, que no original são seis `<img>` do mesmo arquivo.** Lá cada aba traz um
 * `bg-school.svg` de 214 KB com `alt="Grafismo"` -- um dos quatro que a B7 achou byte a byte
 * idênticos e converteu para `icones/grafismo-arcos.webp`, de 31 KB. Decoração pura não é
 * caixa de editor (regra da G7), e seis caixas para o mesmo enfeite seriam seis chances de
 * divergirem.
 *
 * Ele é `::after` -- e não `::before`, como no global e no parcerias -- porque aqui ele fica
 * **na frente** do bloco no eixo horizontal e **atrás** dele na pintura. Entre elementos
 * posicionados sem `z-index` pinta por baixo quem vem antes na árvore, e o
 * `.bloco-sobre__conteudo` é `position: relative` justamente para isso (E2). No celular o
 * original inverte a intenção -- lá ele põe `z-index: 1` no conteúdo e `0` no grafismo, que é
 * a mesma ordem dita de outro jeito.
 *
 * As medidas são as do arquivo, que é o que o original mostra: `width: fit-content` sobre um
 * SVG de 210x465.
 */
.pagina--nossas-escolas .abas__painel > .bloco-sobre::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 0;
  width: 210px;
  height: 465px;
  background-image: url('../../icones/grafismo-arcos.webp');
  background-repeat: no-repeat;
  background-size: 210px 465px;
  pointer-events: none;
}

/*
 * A prosa: 20/28px, e o degrau `seb-texto` da D3 já dá os 20 -- entra a entrelinha e os 48px
 * que o original põe entre ela e os botões.
 *
 * **O `>` não é enfeite.** Sem ele esta regra alcançaria também a descrição do banner, que é
 * o mesmo degrau -- e foi exatamente esse descuido, na direção contrária, que fez a prosa
 * nascer com os 365px de largura da descrição na primeira medição desta folha.
 */
.pagina--nossas-escolas .bloco-sobre__conteudo > .texto {
  line-height: 28px;
  margin-bottom: 48px;
}

/* Os `.buttons`: os 72px de intervalo são do original. */
.pagina--nossas-escolas .bloco-sobre__conteudo > .linha {
  gap: 72px;
  align-items: center;
}

/*
 * **Os 361px do `.btn-school` voltam como teto, e não como largura** -- e é a diferença que
 * fazia a D5 recusá-los. Como `width`, eles estouram qualquer tela mais estreita que 361px, e
 * o original só conserta isso abaixo de 768; como `max-width` sobre um item que reparte a
 * linha, eles são o limite superior e cedem sozinhos onde não cabem.
 *
 * A conta bate com o original nos dois casos, medidos a 1440px: na aba 1 os dois botões
 * repartem os 842px da prosa menos os 72 de intervalo e saem com 385px cada (319 de conteúdo
 * mais os 66 de recuo e borda); nas outras cinco o botão único é limitado pelo teto e sai com
 * 427, centrado -- que é exatamente o que o site no ar mostra.
 *
 * **Sem isto os dois botões da aba 1 quebravam para duas linhas**, porque `.linha` é
 * `flex-wrap: wrap` e a largura natural dos dois soma mais do que a prosa tem. Achado na
 * medição, não na leitura.
 */
.pagina--nossas-escolas .bloco-sobre__conteudo > .linha > .botao {
  flex: 1 1 0;
  max-width: 361px;
}

/* --------------------------------------------------------------------- a lista da Harven
 *
 * `.wrapper__list`, e ela existe numa aba só. O envelope é o `AnimationWrapperPlugin` da D6,
 * porque no original quem anima é a faixa inteira e não um elemento com campo próprio.
 *
 * O recuo de 264px é o lugar que as marcas ocupavam: 248px de largura mais os 16 de `gap` da
 * faixa.
 */
.pagina--nossas-escolas .abas__painel > [data-aos]:has(.topicos) {
  position: relative;
  padding-left: 264px;
  margin-bottom: 62px;
}

/*
 * **As 7 marcas decorativas, como fundo** -- a mesma construção que a G8 usou no learning, e
 * pela mesma razão: 7 `<img>` de enfeite não cabem no campo da E2, que conta até 3 e desenha
 * outro desenho, e decoração pura não é caixa de editor.
 *
 * O ladrilho tem a altura do passo (11 da marca + 30 do respiro = 41px) e o desenho fica
 * **centrado** nele, porque este SVG não declara `preserveAspectRatio="none"`. Daí o
 * `background-position` de -15px, que é meia sobra. A altura de 257px são os 7 passos menos o
 * último respiro, e é ela que impede o `repeat-y` de desenhar a oitava.
 *
 * **E o preço é o mesmo que o learning pagou:** no original as 7 entram pela esquerda junto
 * com a lista, e fundo não anima.
 */
.pagina--nossas-escolas .abas__painel > [data-aos]:has(.topicos)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 248px;
  height: 257px;
  background-image: url('../../icones/line-harven.svg');
  background-repeat: repeat-y;
  background-position: 0 -15px;
  background-size: 248px 41px;
  pointer-events: none;
}

/*
 * Os tópicos da E6, nas três medidas em que esta lista difere das outras 26 -- e o
 * `margin-top: 0` não é enfeite: é o mesmo caso que a G8 achou no learning, o `margin-top:
 * 1em` que o reset deixa no `<ul>` e que aqui não colapsa com nada.
 */
.pagina--nossas-escolas .topicos {
  gap: 21px;
  margin-top: 0;
}

/*
 * A tipografia do original (16/20px) -- e o recuo zerado, que anda junto da bolinha logo
 * abaixo: sem marcador não há o que recuar, como o `topicos--nenhum` do componente já faz.
 */
.pagina--nossas-escolas .topicos__item {
  font-size: 16px;
  line-height: 20px;
  padding-left: 0;
}

/*
 * **A bolinha do componente sai no desktop, e aqui isso não é escolha de estilo.** A G8 a
 * manteve no learning, onde ela só duplica um marcador que o original não desenha; nesta
 * lista a marca ao lado **termina num círculo** -- é o desenho do `line-harven.svg` --, então
 * a bolinha do componente vira uma segunda bolinha ao lado da primeira. Conferido no
 * `main.css`: o `::before` daqui está dentro do `@media` do celular, e no desktop o `<li>` não
 * tem marcador nenhum.
 *
 * O recuo que existia para ela some junto, na regra acima.
 */
.pagina--nossas-escolas .topicos__item::before {
  content: none;
}

/* --------------------------------------------------------------------- a foto do rodapé */

.pagina--nossas-escolas .abas__painel > .imagem {
  width: 100%;
}

/* --------------------------------------------------------------------- o celular */

@media (max-width: 768px) {
  .pagina--nossas-escolas {
    margin-top: 32px;
  }

  /*
   * O teto do desktop sai: aqui quem dá a largura ao rótulo é a coluna da grade, e a regra de
   * cima -- que não está dentro de consulta de mídia, porque esta folha é escrita "celular por
   * último" -- venceria a do componente por especificidade, deixando o rótulo com 188px numa
   * tela de 600.
   */
  .pagina--nossas-escolas .abas__rotulo {
    max-width: none;
  }

  /*
   * Os 12px são os 16 do original menos os 4 de `gap` que a faixa põe entre a última fila de
   * rótulos e o painel. Mesma conta do desktop.
   *
   * `height: auto` porque aqui o banner tem a altura do conteúdo: os 665px do desktop são a
   * moldura da foto, que no celular é outra.
   */
  .pagina--nossas-escolas .abas__painel > .banner {
    height: auto;
    margin-top: 12px;
  }

  /*
   * A logo mantém o recuo por aba (abaixo); o texto passa a 16px dos dois lados, que é o
   * `margin-left`/`margin-right` que o original dá ao título e à descrição.
   */
  .pagina--nossas-escolas .abas__painel > .banner > .banner__conteudo {
    margin-left: 16px;
    margin-right: 16px;
  }

  .pagina--nossas-escolas .abas__painel > .banner .banner__titulo {
    font-size: 22px;
    line-height: 26px;
  }

  .pagina--nossas-escolas .abas__painel > .banner .texto--seb-texto {
    font-size: 16px;
    line-height: 22px;
  }

  /*
   * **A linha decorativa continua, e vira o "L" estreito do celular.** No original ela troca de
   * construção aqui -- o `<img>` some (`.line { display: none }`) e entra o par de `<div>`
   * vazios de `.line--is-mobile`, um braço horizontal de 16x1 e um vertical de 1xN. A E2
   * recusou a segunda construção porque as duas desenham o mesmo "L", e este é o ponto em que
   * essa recusa se paga: o mesmo arquivo, redimensionado, dá o mesmo desenho.
   *
   * É a G6 que tornou isto possível. Sem o `preserveAspectRatio="none"` e o
   * `vector-effect="non-scaling-stroke"` que ela pôs no arquivo, um "L" de 236x72 espremido
   * para 16 de largura sairia com o traço 15 vezes mais grosso.
   *
   * **E ela não é enfeite que se possa esconder aqui**: no original o braço horizontal é um
   * item do flex, então ele **empurra** a prosa 16px para dentro. Foi exatamente isso que a
   * primeira versão desta folha perdeu ao escondê-la -- a prosa nasceu 17px mais larga e as
   * abas 1, 2 e 3 ficaram duas linhas mais curtas do que o original.
   */
  .pagina--nossas-escolas .bloco-sobre__linha {
    top: 0;
    /*
     * 17, e não os 16 que o `main.css` escreve: lá o "L" são dois elementos lado a lado num
     * flex -- o braço horizontal de 16px e o vertical de 1 --, e a caixa deles mede os dois.
     * Medido no site no ar: a prosa começa em `x: 33`, que são estes 17 mais os 16 de respiro.
     * Um pixel, e ele decide uma linha de texto na primeira aba.
     */
    width: 17px;
  }

  .pagina--nossas-escolas .abas__painel > .bloco-sobre {
    margin-top: 32px;
    /* Os 17px do "L" mais os 16 de respiro que o original dá à prosa. */
    padding-left: 33px;
    padding-right: 32px;
    /* Aqui o grafismo tem 68px e fica ancorado no rodapé: ele não define altura nenhuma. */
    min-height: 0;
  }

  /*
   * A altura do braço vertical, aba por aba -- e ela é a única medida do celular que o
   * original **não** deriva de nada: é o tamanho que o desenho tem de ter para acompanhar a
   * prosa daquela escola.
   */
  .pagina--nossas-escolas .abas__item:nth-of-type(1) .bloco-sobre__linha,
  .pagina--nossas-escolas .abas__item:nth-of-type(2) .bloco-sobre__linha {
    height: 131px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(3) .bloco-sobre__linha {
    height: 196px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(4) .bloco-sobre__linha {
    height: 219px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(5) .bloco-sobre__linha {
    height: 108px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(6) .bloco-sobre__linha {
    height: 195px;
  }

  /*
   * **No celular o grafismo passa a ficar debaixo da prosa e dos botões, e a ordem na árvore
   * não basta.** No desktop os dois não se cruzam -- o recuo de 257px à direita reserva o
   * lugar do desenho --, mas aqui ele fica ancorado no rodapé da faixa, exatamente onde os
   * botões estão. Como `::after`, ele vem **depois** do conteúdo na árvore, e entre elementos
   * posicionados sem `z-index` pinta por cima quem vem depois: o desenho cobria o botão.
   *
   * **Uma declaração, e não as duas do original.** Ele põe `z-index: 1` no `.content` e `0` no
   * `.detail`; o `0` é o valor que o desenho já teria (`auto` pinta na mesma camada, e perde
   * para quem tem 1), então trazê-lo seria transcrever uma linha que não faz nada.
   *
   * É `1`, e não o `-1` que a G9 recusou: aquele sobe até a raiz e some em silêncio no dia em
   * que um ancestral virar contexto de empilhamento. Aqui os dois ficam no mesmo contexto.
   */
  .pagina--nossas-escolas .bloco-sobre__conteudo {
    z-index: 1;
  }

  .pagina--nossas-escolas .abas__painel > .bloco-sobre::after {
    top: auto;
    bottom: 0;
    width: 68px;
    /*
     * A altura acompanha a largura na proporção do arquivo (210x465): 68 x 465 / 210 = 150,6.
     * O original não a declara -- lá o elemento é uma `<img>`, que a deduz sozinha.
     */
    height: 150.57px;
    background-size: 68px 150.57px;
  }

  /* A prosa acompanha o degrau do componente (16px) com a entrelinha do original. */
  .pagina--nossas-escolas .bloco-sobre__conteudo > .texto {
    line-height: 22px;
  }

  /*
   * Os botões empilham, e a largura deles é **maior que a da prosa**, não menor -- que é o
   * contrário do que o `main.css` parece dizer.
   *
   * Lá a faixa dos botões é `width: calc(100% - 48px)` e o botão é `width: 100%`; só que
   * aquele `100%` é `content-box`, então os 64px de recuo lateral e os 2 de borda entram
   * **por fora**. O botão sai 66px mais largo que a faixa e transborda-a igualmente dos dois
   * lados (`.buttons` é `align-items: center`). Medido nos dois aparelhos: a 375px de
   * viewport o botão vai de `x: 24` a 352; a 412, de 24 a 389 -- ou seja, ele encosta a ~24px
   * de cada borda da tela, e não a 57 como a leitura ingênua do CSS sugeriria.
   *
   * Aqui o botão é `border-box` (ver a regra abaixo, e o porquê), então a conta tem de ser
   * feita **na faixa** -- e ela é a sangria de sempre: 9px para fora de cada lado. São os 24
   * do original menos os 33 de recuo esquerdo da prosa, e a faixa é um bloco de largura
   * automática, então não há `calc` a resolver. O resultado é o mesmo retângulo do original,
   * sem nenhum elemento transbordando o próprio pai.
   */
  .pagina--nossas-escolas .bloco-sobre__conteudo > .linha {
    flex-direction: column;
    gap: 24px;
    margin-left: -9px;
    margin-right: -9px;
  }

  /*
   * O teto sai: aqui o original leva o botão a `width: 100%`, e o componente já o faz. Mantê-lo
   * deixaria o botão parado nos 427px numa tela de 768.
   *
   * **E `box-sizing: border-box`, que é o que faz o botão ficar centrado.** O `width: 100%` do
   * componente é `content-box` -- o padrão do projeto --, então o botão sai 66px mais largo que
   * a coluna que o contém e transborda. O original tem o mesmo defeito (medido: botão de 328px
   * numa caixa de 262), e ele é justamente o tipo de coisa que a D5 já recusou quando tirou a
   * largura fixa de 361px: largura que não cabe não é desenho, é descuido.
   *
   * `flex` volta a `auto` porque numa coluna o eixo principal é o **vertical**: um
   * `flex-basis: 0` ali zeraria a altura do botão.
   */
  .pagina--nossas-escolas .bloco-sobre__conteudo > .linha > .botao {
    flex: 0 0 auto;
    box-sizing: border-box;
    max-width: none;
    /*
     * Os 63px que o botão mede no original -- os 46 de altura que o `.btn-school` declara mais
     * os 15 de recuo vertical e os 2 de borda, que ali ficam de fora da conta e aqui ficam
     * dentro. Sem eles o botão encolheria quando o rótulo coubesse numa linha só.
     */
    min-height: 63px;
  }

  /* As marcas somem, e com elas o lugar que elas ocupavam. */
  .pagina--nossas-escolas .abas__painel > [data-aos]:has(.topicos) {
    padding-left: 0;
  }

  .pagina--nossas-escolas .abas__painel > [data-aos]:has(.topicos)::before {
    content: none;
  }

  .pagina--nossas-escolas .topicos {
    margin-left: 16px;
    margin-right: 16px;
  }

  /*
   * E aqui ela volta: no celular as marcas somem e o original desenha um `•` azul-claro no
   * lugar delas. É a bolinha do componente, com a cor daquele marcador e o recuo que o
   * original declara (20px).
   */
  .pagina--nossas-escolas .topicos__item {
    padding-left: 20px;
  }

  .pagina--nossas-escolas .topicos__item::before {
    content: '';
    top: 7px;
    background-color: var(--seb-azul-claro);
  }

  /* A foto do rodapé é recortada no celular, e não reduzida. */
  .pagina--nossas-escolas .abas__painel > .imagem {
    height: 200px;
    object-fit: cover;
    object-position: center;
  }

  /*
   * O enquadramento da foto de fundo e o recuo da logo, aba por aba -- é o que o original
   * refaz nas seis, e as medidas não têm relação entre si: cada uma é o ajuste de uma foto.
   */
  .pagina--nossas-escolas .abas__item:nth-of-type(1) .banner {
    padding: 12px 0 42px;
    background-position: top 62px right;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(1) .banner__imagem {
    width: 90px;
    margin-left: 62px;
    margin-bottom: 30px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(1) .banner__titulo {
    max-width: 232px;
    margin-bottom: 86px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(2) .banner {
    padding: 24px 0 42px;
    background-position: top 42px right -40px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(2) .banner__imagem {
    width: 160px;
    margin-left: 10%;
    margin-bottom: 24px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(2) .banner__titulo {
    max-width: 260px;
    margin-bottom: 74px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(3) .banner {
    padding: 24px 0 42px;
    background-position: top 42px right -20px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(3) .banner__imagem {
    width: 190px;
    margin-left: 24px;
    margin-bottom: 24px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(3) .banner__titulo {
    max-width: 240px;
    margin-bottom: 122px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(4) .banner {
    padding: 24px 0 42px;
    background-position: top 52px right -30px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(4) .banner__imagem {
    width: 110px;
    margin-left: 16%;
    margin-bottom: 20px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(4) .banner__titulo {
    max-width: 240px;
    margin-bottom: 64px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(5) .banner {
    padding: 24px 0 42px;
    background-position: top 42px right -10px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(5) .banner__imagem {
    width: 140px;
    margin-left: 12%;
    margin-bottom: 30px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(5) .banner__titulo {
    max-width: 240px;
    margin-bottom: 72px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(6) .banner {
    padding: 24px 0 42px;
    background-position: top 42px right -10px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(6) .banner__imagem {
    width: 140px;
    margin-left: 12%;
    margin-bottom: 20px;
  }

  .pagina--nossas-escolas .abas__item:nth-of-type(6) .banner__titulo {
    max-width: 240px;
    margin-bottom: 82px;
    font-size: 22px;
  }
}