/*
 * Página `index` (etapa G12) -- a home, e a moldura só dela.
 *
 * Transcreve as regras `.home__*` do `main.css` que está no ar, conferido byte a byte contra
 * `https://www.sebeducation.com/index.html` antes de escrever -- a lição da G2. O escopo é
 * `.pagina--index`, que o `base.html` põe no `<main>` a partir do registro de
 * `backend/montagem`; sem ele estas regras não teriam onde se pendurar, porque as classes que
 * os plugins emitem são as mesmas em toda página.
 *
 * **Esta folha é pequena de propósito, e vai crescer faixa por faixa.** A home é a página que
 * mais reusa componente do site -- oito das treze etapas de plugin novo --, e cada um deles já
 * trouxe a caixa dele. O que sobra para cá é o que no original é da *página*: a largura dos
 * contêineres, o respiro entre as faixas e o desenho que o componente deixou para quem o usa.
 *
 * ### As faixas, e como cada uma é alcançada
 *
 * | faixa do original | seletor |
 * |---|---|
 * | `main.home__hero` | `> .hero` -- e **nada aqui**: ver abaixo |
 * | `section.home__numbers` | `> .secao:has(.numeros)` |
 * | `section.home__map` | `> .secao:has(.mapa)` |
 * | `section.home__vision` | `> .secao:has(.carrossel)` |
 * | `section.home__partners` | `> .banner` e `> .coluna:has(.grade-logos)` -- ver abaixo |
 * | `section.home__learning` | `> .secao:has(> .banner)` |
 *
 * **Cada faixa se diz pelo componente que ela carrega**, e não por `nth-of-type`: são seis
 * irmãs no mesmo placeholder, várias delas `.secao`, e uma ordem que mude não pode trocar o
 * desenho de duas faixas de lugar. É a construção que a G8 usou no learning, com `:has()`.
 *
 * **A dos parceiros é a exceção, e é o original que a faz assim**: aquela faixa não tem
 * envelope nenhum -- o `main.css` não declara nada para `.home__partners` --, então as duas
 * peças dela são filhas diretas do `<main>`. O banner é alcançável por `> .banner` porque é o
 * único banner de primeiro nível: os da visão e do Learning moram dentro das faixas deles.
 *
 * ### O hero não tem nenhuma regra nesta folha, e isso é a resposta certa
 *
 * A F1 registrou que ali "a caixa **é** o componente": a altura de 702px, o vídeo absoluto, o
 * gradiente e o recuo de 364px que põe o texto na parte escura dele não são moldura de página
 * -- sem eles não há hero, há um vídeo solto com texto em cima. Um uso só não muda isso, pela
 * distinção que a E4 fixou: o que sai do componente é a moldura de *página*, e não a caixa.
 */

/* ------------------------------------------------------------------ a faixa de números
 *
 * `.wrapper__numbers` no original: 1200px centrados, com 16px de respiro nas bordas. O fundo
 * azul e os 42/43px de recuo **não estão aqui** -- eles são campos do `SectionPlugin` que a
 * montagem preenche, e é o que a F2 disse ao deixar de fora o fundo e o respiro da faixa.
 *
 * O `display: flex`, o `gap: 82px` e o empilhamento do celular são do componente
 * (`componentes/numeros.css`). Aqui vai só a medida, que é o que o original tem de *página*.
 *
 * **Sem `box-sizing`, como o original**: o site não declara `border-box` em lugar nenhum (ver
 * `base.css`), então os 16px somam aos 1200 e a faixa mede 1232px de fora a fora -- que é o
 * que o `main.css` produz. Um `border-box` aqui apertaria a faixa em 32px contra o original.
 */
.pagina--index .numeros {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ------------------------------------------------------------------ a faixa do mapa
 *
 * `section.home__map`, alcançada por `:has(.mapa)` -- é a construção que a G8 usou no
 * learning, onde quatro envelopes do mesmo tipo precisavam ser distinguidos. Aqui são **seis
 * faixas irmãs** no mesmo placeholder, várias delas `.secao`, e cada uma se diz pelo
 * componente que carrega: nenhuma depende de `nth-of-type`, que é o que quebra quando uma
 * faixa muda de lugar.
 *
 * O respiro é `margin`, e não `padding`, porque no original é margin -- e aqui isso importa:
 * a faixa não tem fundo, então os campos de `padding` do `SectionPlugin` ficam em zero e a
 * folha alcança a margem livremente. Ver o comentário do recuo da coluna, abaixo.
 */
.pagina--index > .secao:has(.mapa) {
  margin-top: 63px;
  margin-bottom: 60px;
}

/*
 * A `.wrapper__map`: 1200px centrados, com o recuo do original.
 *
 * **O recuo está aqui e não nos campos do plugin**, e a razão é a que a G7 e a G9
 * registraram: aqueles campos saem num `style` inline, que media query nenhuma desfaz -- e
 * no celular este recuo é `0`.
 */
.pagina--index > .secao:has(.mapa) > .coluna {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px 42px;
}

/* O `map__title`: 30px contra os 28 do degrau `seb-subtitulo`. O peso 700 e o centramento são
 * campos do plugin, não daqui -- é o único título de faixa do site em negrito. */
.pagina--index > .secao:has(.mapa) .texto--seb-subtitulo {
  font-size: 30px;
  line-height: 32px;
  margin-bottom: 12px;
}

/*
 * A `instruction`: o ícone de cursor e a frase, centrados.
 *
 * **O ícone é `::before`, e no original é um `<img class="icon">`.** É a decisão da E2 sobre
 * as linhas decorativas, e a mesma que a G2, a G7 e a G9 tomaram com os SVG de enfeite:
 * decoração pura não é caixa de editor. Aqui ela tem uma razão a mais -- o `alt` daquela
 * `<img>` é "Ícone de Cursor", que é anunciar o desenho em vez do sentido.
 *
 * `inline-block` para ele fluir com o texto centrado, em vez do `flex` + `gap` do original: com
 * o `<p>` já centrado pelo campo `text_align`, uma caixa flex aqui daria o mesmo resultado com
 * uma regra a mais. Os 10px do `gap` viram `margin-right`.
 */
.pagina--index > .secao:has(.mapa) .texto--seb-texto-pequeno {
  margin-bottom: 42px;
}

.pagina--index > .secao:has(.mapa) .texto--seb-texto-pequeno::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
  background-image: url('../../icones/icon-cursor.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ------------------------------------------------------------------ a faixa da visão
 *
 * `section.home__vision`, alcançada pelo carrossel que ela carrega. O recuo de 62px é da
 * coluna de dentro pela razão de sempre: no celular ele cai para 32.
 */
.pagina--index > .secao:has(.carrossel) > .coluna {
  padding: 62px 0;
}

/* O banner: `gap: 68px` é o default do componente, então só a margem entra. */
.pagina--index > .secao:has(.carrossel) > .coluna > .banner {
  margin-bottom: 72px;
}

.pagina--index > .secao:has(.carrossel) .banner__imagem {
  max-width: 525px;
  width: 100%;
}

.pagina--index > .secao:has(.carrossel) .banner__conteudo {
  max-width: 475px;
  width: 100%;
  padding-right: 16px;
}

/*
 * **O título de duas linhas dentro de uma `<h2>` só, e é o primeiro do site assim.**
 *
 * Na G4, na G5 e na G6 a segunda linha é o destaque em Brownhill branco, e é assim que o
 * componente da E1 a desenha -- `banner__titulo--segunda` é script de 122px com
 * `margin-top: -48px`, que é o par que aquelas três páginas têm. Aqui a segunda linha é
 * "de educação": Manrope azul do mesmo tamanho da primeira, e quem desfaz o default é a regra
 * logo abaixo. A pergunta de se o default do componente é o certo fica para a G13.
 *
 * A entrelinha é a do original (48px nas duas linhas), e a margem de 32px é a que lá fica
 * embaixo do `<h2>` inteiro -- aqui, embaixo da segunda linha.
 */
.pagina--index > .secao:has(.carrossel) .banner__titulo {
  line-height: 48px;
}

.pagina--index > .secao:has(.carrossel) .banner__titulo--segunda {
  font-family: var(--seb-fonte-titulo);
  font-size: 52px;
  color: var(--seb-azul);
  margin-top: 0;
  margin-left: 0;
  line-height: 48px;
  margin-bottom: 32px;
}

/* O destaque: 122px, contra os 92 do componente -- o mesmo caso do global e do parcerias. */
.pagina--index > .secao:has(.carrossel) .banner__destaque {
  font-size: 122px;
}

/* A `description-1`: 28/30px contra os 18/26 do componente. */
.pagina--index > .secao:has(.carrossel) .banner__descricao {
  font-size: 28px;
  line-height: 30px;
  margin-bottom: 32px;
}

/* A `description-2`, que é o bloco de texto filho do banner: 20px é o degrau, e só a
 * entrelinha entra. */
.pagina--index > .secao:has(.carrossel) .banner__conteudo > .texto--seb-texto {
  line-height: 28px;
}

/*
 * O `carousel__title`: 22/26px, 870px centrados.
 *
 * **O caminho direto (`> .coluna >`) não é decoração de especificidade:** a `description-2` do
 * banner e os textos dos quatro cartões usam o mesmo degrau, e sem ele esta regra os
 * alcançaria também. É o mesmo cuidado que a G9 registrou.
 */
.pagina--index > .secao:has(.carrossel) > .coluna > .texto--seb-texto {
  font-size: 22px;
  line-height: 26px;
  max-width: 870px;
  margin: 0 auto 54px;
}

/*
 * O cartão. **O slide já é flex pelo componente** -- a regra nasceu na folha do global e subiu
 * para `componentes/carrossel.css` nesta parte, quando o segundo carrossel do site pediu a
 * mesma coisa. Ver o comentário de lá.
 */

/*
 * O `.card__vision`: 931px centrados, a capa de um lado e a prosa do outro.
 *
 * `flex-wrap: nowrap` porque a `.linha` da D2 é `wrap`, para o empilhamento móvel funcionar:
 * com ele, a capa e o texto quebrariam de linha em telas médias -- o mesmo ajuste que a G8 fez
 * nas faixas do learning e a G9 no cartão do global.
 */
.pagina--index > .secao:has(.carrossel) .carrossel__slide > .linha {
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 931px;
  margin: 0 auto;
}

/*
 * A `.cover`: 548px, e é ela que ancora o título por cima da foto -- daí o `position:
 * relative`. A divisão 548 + 24 de `gap` + 360 é a do original, e fecha os 931 do cartão.
 *
 * `flex: 0 1 <largura>` nas duas: a `.coluna` da D2 é `flex: 1`, que reparte a largura em partes
 * iguais e ignoraria o `max-width` de cada uma.
 *
 * **As duas se dizem pelo que carregam, e não por `:first-child`/`:last-child`** -- é o padrão
 * declarado no topo desta folha. A capa é a coluna que tem a foto; a prosa é a que vem depois
 * dela. Um terceiro filho no cartão não trocaria o desenho das duas em silêncio, que é o que a
 * posição permitiria. A `.coluna` não tem campo de classe para nomeá-las (a D2 a deixou sem
 * campo nenhum de propósito), então o seletor é a única forma de dizer qual é qual.
 */
.pagina--index > .secao:has(.carrossel) .carrossel__slide .linha > .coluna:has(> .imagem) {
  position: relative;
  flex: 0 1 548px;
  max-width: 548px;
}

.pagina--index > .secao:has(.carrossel) .carrossel__slide .linha > .coluna:has(> .imagem) + .coluna {
  flex: 0 1 360px;
  max-width: 360px;
}

/*
 * O `vision__title`, que no original é um `<h4>` sobre a foto -- aqui um `<h3>`, porque a
 * escala da D3 não tem o degrau de `<h4>` e porque, com o título da faixa virando `<p>`, os
 * quatro cartões são os cabeçalhos deste bloco (ver `backend/montagem/index.py`).
 *
 * A fonte, o peso, a cor e o centramento são campos do plugin; daqui vão o tamanho, a
 * entrelinha e o posicionamento.
 */
.pagina--index > .secao:has(.carrossel) .carrossel__slide .texto--seb-subtitulo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-size: 60px;
  line-height: 44px;
}

/*
 * A segunda linha do título do cartão: **44px e peso 300**, contra os 60/700 da primeira.
 *
 * `display: block` é o que quebra a linha, e é por isso que o `<br>` do original não vem --
 * a mesma decisão que o bloco G aplica a todo título (ver `estatico.html_sem_quebra`). O
 * `<span>` fica `<span>`, e não vira `<strong>`: aqui ele é **mais leve** que o texto em
 * volta, não mais forte.
 *
 * **A `line-height: 28px` que o original declara neste `<span>` não vem, e é medição.** Lá ele
 * é inline, e num `<span>` inline a altura da linha não encolhe abaixo do "strut" do pai: a
 * segunda linha mede os 44px do `<h4>`, não os 28 declarados. Transcrita para um bloco, a
 * declaração passaria a valer -- o título inteiro cairia de 88px para 72 e as duas linhas
 * ficariam 16px mais perto (medido nos dois lados, a 1440px). Herdando os 44, a tinta fica
 * onde está no original.
 */
.pagina--index > .secao:has(.carrossel) .carrossel__slide .texto--seb-subtitulo span {
  display: block;
  font-size: 44px;
  font-weight: 300;
}

/* Os `vision__text`: 20px é o degrau, e daqui vão a entrelinha e o espaço entre eles. */
.pagina--index > .secao:has(.carrossel) .carrossel__slide .texto--seb-texto {
  line-height: 28px;
  margin-bottom: 16px;
}

.pagina--index > .secao:has(.carrossel) .carrossel__slide .texto--seb-texto:last-child {
  margin-bottom: 0;
}

/*
 * **A colapsagem de margem que o original ganha de graça, escrita à mão.**
 *
 * Nos dois cartões que têm botão, o parágrafo antes dele tem `margin-bottom: 16px` e o botão
 * tem `margin-top: 24px`. No original a `.vision__content` é um bloco, então as duas margens
 * se **colapsam** e o espaço é 24 -- aqui ela é a `.coluna` da D2, que é `display: flex`, e em
 * contêiner flex margem não colapsa: o espaço viraria 40 e o cartão sairia 16px mais alto
 * (medido: 432 contra os 416 do original).
 *
 * Anular a de baixo é o que reproduz o resultado, em vez de transcrever um 8px que não existe
 * em lugar nenhum do original. É o mesmo caso que a G8 registrou com o `margin-top` que o
 * navegador dá ao `<ul>` -- num pai flex ele não colapsa, e a folha o anula.
 */
.pagina--index > .secao:has(.carrossel) .carrossel__slide .texto--seb-texto:has(+ .botao) {
  margin-bottom: 0;
}

/*
 * O `btn-global`: 18px e o recuo do original, contra os 22px e os 68px de altura mínima do
 * componente.
 *
 * A medida do `.botao` da D5 saiu dos 8 botões de escola e de canal, que são de outro tamanho;
 * este é o nono, e o único desta faixa.
 *
 * **Ele ocupa a largura da coluna, e é o original.** Lá o `.btn-global` é `display: flex` num
 * contêiner de bloco, o que o faz medir os 360px do `.vision__content` (medido); aqui ele é
 * item de uma `.coluna`, que é `align-items: stretch`, e o resultado é o mesmo sem regra
 * nenhuma. Um `align-self: flex-start` aqui foi a primeira versão, e ela o encolhia para os
 * 241px do conteúdo -- diferença de desenho, não de transcrição.
 */
.pagina--index > .secao:has(.carrossel) .carrossel__slide .botao {
  min-height: 0;
  padding: 14px 36px 15px;
  font-size: 18px;
  margin-top: 24px;
}

/* ------------------------------------------------------------------ a faixa de parceiros
 *
 * `section.home__partners`, e ela é a **única faixa da página sem envelope**: o `main.css` não
 * declara nada para aquela classe. Os dois respiros são da `.partners__banner` (42px em cima) e
 * da `.partners__list` (100px de `padding` embaixo), que aqui são o próprio banner e a coluna
 * da grade -- um `SectionPlugin` a mais seria elemento sem regra, que é o que a D2 recusou.
 *
 * O banner é alcançado por `> .banner` porque ele é o único filho direto do `<main>` com essa
 * classe: os outros dois moram dentro das faixas da visão e do Learning.
 *
 * **É o único seletor de faixa desta folha que não se diz pelo componente que carrega**, e não
 * por descuido: um banner não carrega nada que o distinga de outro banner. A alternativa medida
 * era ancorá-lo no vizinho (`> .banner:has(+ .coluna:has(.grade-logos))`), e ela troca uma
 * fragilidade por outra pior -- passa a depender da **ordem** das duas peças, que é exatamente
 * o que o resto desta folha evita. Se um dia a home ganhar um segundo banner de primeiro nível,
 * é a montagem que precisa dar um gancho a ele, e não este seletor que precisa adivinhar.
 */
.pagina--index > .banner {
  gap: 64px;
  margin-top: 42px;
  margin-bottom: 62px;
}

.pagina--index > .banner .banner__imagem {
  max-width: 660px;
  width: 100%;
}

.pagina--index > .banner .banner__conteudo {
  max-width: 423px;
  width: 100%;
}

/*
 * O trio de `flex` é o mesmo que o conduta tem, e pela mesma razão: é o que impede a margem
 * negativa do destaque de colapsar com a do `<h2>`.
 */
.pagina--index > .banner .banner__titulo {
  line-height: 44px;
  margin-bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pagina--index > .banner .banner__destaque {
  display: block;
  font-size: 122px;
  margin-left: -6px;
  padding: 0;
  line-height: 127px;
  margin-top: -42px;
  margin-bottom: -22px;
}

.pagina--index > .banner .banner__descricao {
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 24px;
  max-width: 354px;
  width: 100%;
}

/*
 * A `.wrapper__list`: a coluna centrada de 1016px, com a grade dentro do envelope de animação.
 *
 * **Aqui a grade não precisa do `width: 100%` que o parcerias precisou**, e a diferença é o
 * envelope: lá ela é filha direta da `.coluna`, que é `flex-direction: column`, e a margem
 * automática desliga o `stretch`; aqui entre as duas há o `<div>` da animação, que é bloco -- e
 * num bloco `margin: 0 auto` com `max-width` é o caso normal.
 */
.pagina--index > .coluna:has(.grade-logos) {
  max-width: 1016px;
  padding: 0 16px 100px;
  margin: 0 auto;
}

.pagina--index .grade-logos {
  max-width: 1000px;
  margin: 0 auto;
}

/* A altura da célula, que a E5 registrou como sendo de página: é ela que mantém as fileiras
 * regulares quando os 24 arquivos têm proporções diferentes entre si. */
.pagina--index .grade-logos__celula {
  height: 90px;
}

.pagina--index > .secao:has(> .banner) {
  margin-top: 62px;
}

.pagina--index > .secao:has(> .banner) > .banner {
  margin-bottom: 82px;
}

.pagina--index > .secao:has(> .banner) .banner__imagem {
  max-width: 525px;
  width: 100%;
}

.pagina--index > .secao:has(> .banner) .banner__conteudo {
  max-width: 475px;
  width: 100%;
  padding-right: 16px;
}

.pagina--index > .secao:has(> .banner) .banner__titulo {
  line-height: 42px;
  margin-bottom: 72px;
}

.pagina--index > .secao:has(> .banner) .banner__destaque {
  display: block;
  font-size: 122px;
  line-height: 42px;
  margin-left: 68px;
  padding: 0 0 19px;
}

.pagina--index > .secao:has(> .banner) .banner__descricao {
  font-size: 28px;
  line-height: 30px;
  margin-bottom: 32px;
}

.pagina--index > .secao:has(> .banner) .texto--seb-texto {
  line-height: 28px;
}

.pagina--index > .secao:has(> .banner) .botao {
  display: flex;
  width: fit-content;
  min-height: 0;
  margin-top: 32px;
  padding: 12px 52px 13px;
  font-size: 18px;
}

@media (max-width: 768px) {
  .pagina--index > .secao:has(.mapa) {
    margin-top: 42px;
    margin-bottom: 32px;
  }

  /* Sem recuo nenhum no celular, como no original (`padding: 0`). */
  .pagina--index > .secao:has(.mapa) > .coluna {
    padding: 0;
  }

  .pagina--index > .secao:has(.mapa) .texto--seb-subtitulo {
    font-size: 24px;
    max-width: 320px;
    margin: 0 auto 32px;
  }

  /*
   * **A instrução sai da tela, e é o original.** Em tela de toque não há hover para explorar,
   * então a frase "Explore nossa presença global" não descreve nada que se possa fazer -- é a
   * única coisa que o `main.css` esconde nesta faixa no celular.
   *
   * `display: none` esconde de todos, inclusive do leitor de tela, e aqui isso é o certo: a
   * informação da faixa está na lista de países, que o componente da F7 mantém em toda largura.
   */
  .pagina--index > .secao:has(.mapa) .texto--seb-texto-pequeno {
    display: none;
  }

  .pagina--index > .secao:has(.carrossel) > .coluna {
    padding: 32px 0;
  }

  /*
   * O banner empilha com a foto **em cima**, que é a ordem do documento -- aqui não há o
   * `column-reverse` que a G6 precisou, porque lá a foto vinha depois do texto no original.
   */
  .pagina--index > .secao:has(.carrossel) > .coluna > .banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 42px;
  }

  .pagina--index > .secao:has(.carrossel) .banner__imagem {
    width: 76%;
  }

  .pagina--index > .secao:has(.carrossel) .banner__conteudo {
    padding-left: 16px;
    width: calc(100% - 32px);
  }

  .pagina--index > .secao:has(.carrossel) .banner__titulo {
    font-size: 32px;
    line-height: 34px;
  }

  .pagina--index > .secao:has(.carrossel) .banner__titulo--segunda {
    font-size: 32px;
    line-height: 34px;
    margin-bottom: 24px;
  }

  /*
   * **O destaque volta a ser inline, e é o original.**
   *
   * O componente da E1 põe `display: block` no destaque no celular, e com razão: é assim que
   * ele reproduz, com um texto só, os dois banners do estático que **duplicam** o título num
   * bloco `.title--is-mobile` para empilhá-lo -- e um deles é o da faixa do mapa desta mesma
   * página (ver `main.css:772-793`).
   *
   * O banner da visão não é um desses: lá o título é uma `<h2>` só, com "Nossa <span>visão
   * </span>" fluindo na mesma linha e "de educação" depois do `<br>`. Em bloco, o destaque
   * ganha uma linha própria e a coluna do banner sai 17px mais alta (medido: 334 contra 317).
   *
   * Os 10px de recuo são os do original (`padding-left`), que num destaque inline valem.
   */
  .pagina--index > .secao:has(.carrossel) .banner__destaque {
    display: inline;
    font-size: 92px;
    padding: 0 0 0 10px;
  }

  .pagina--index > .secao:has(.carrossel) .banner__descricao {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 24px;
  }

  .pagina--index > .secao:has(.carrossel) .banner__conteudo > .texto--seb-texto {
    line-height: 22px;
  }

  /* 18px, e o `margin-bottom` de 72px é o que abre espaço para as setas, que no celular sobem
   * para cima do carrossel (regra do componente). */
  .pagina--index > .secao:has(.carrossel) > .coluna > .texto--seb-texto {
    font-size: 18px;
    padding: 0 16px;
    margin-bottom: 72px;
  }

  /*
   * O cartão empilha, ganha fundo e sombra -- e é **só no celular** que ele os tem. Era esta a
   * medição que fez a F3 mandar a caixa do cartão para as páginas em vez de pô-la no slide: a
   * do global tem fundo sempre e altura fechada, esta não.
   *
   * **`min-height`, e o original é `height: 650px`.** É a mesma escolha da G9 e da G8: como
   * piso, a altura fechada continua valendo para os cartões que cabem, e o que não couber
   * cresce em vez de vazar por cima da sombra.
   */
  .pagina--index > .secao:has(.carrossel) .carrossel__slide > .linha {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0;
    width: calc(100% - 32px);
    max-width: 332px;
    min-height: 650px;
    margin: 0 auto 30px;
    background-color: var(--seb-branco);
    box-shadow: 0 4px 25px 0 rgb(0 0 0 / 0.25);
  }

  .pagina--index > .secao:has(.carrossel) .carrossel__slide .linha > .coluna {
    flex: 0 1 auto;
    max-width: none;
    width: 100%;
  }

  .pagina--index > .secao:has(.carrossel) .carrossel__slide .linha > .coluna:has(> .imagem) + .coluna {
    padding: 0 24px 24px;
    box-sizing: border-box;
  }

  .pagina--index > .secao:has(.carrossel) .carrossel__slide .texto--seb-subtitulo {
    font-size: 42px;
    line-height: 32px;
  }

  .pagina--index > .secao:has(.carrossel) .carrossel__slide .texto--seb-subtitulo span {
    font-size: 28px;
  }

  /* 16px é o degrau `seb-texto` no celular, que é o do original. Só a entrelinha entra. */
  .pagina--index > .secao:has(.carrossel) .carrossel__slide .texto--seb-texto {
    line-height: 22px;
  }

  /* ---------------------------------------------------------------- os parceiros
   *
   * As mesmas medidas que o `parcerias` tem no celular. Aqui o destaque **continua em bloco**,
   * ao contrário do banner da visão: no original ele é uma palavra sozinha na
   * primeira linha ("Parcerias"), com "estratégicas" embaixo.
   */
  .pagina--index > .banner {
    gap: 56px;
    margin-top: 24px;
    margin-bottom: 42px;
  }

  .pagina--index > .banner .banner__imagem {
    width: 92%;
    margin-left: 0;
    margin-right: auto;
  }

  .pagina--index > .banner .banner__conteudo {
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }

  .pagina--index > .banner .banner__titulo {
    font-size: 42px;
    line-height: 32px;
    margin-left: 12px;
    margin-bottom: 30px;
  }

  .pagina--index > .banner .banner__destaque {
    font-size: 102px;
    line-height: 106px;
    margin-top: -36px;
    margin-bottom: -22px;
  }

  /* No celular o original zera a margem da descrição -- ela só existe no desktop. */
  .pagina--index > .banner .banner__descricao {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 0;
  }

  .pagina--index > .coluna:has(.grade-logos) {
    padding-bottom: 62px;
  }

  .pagina--index > .secao:has(> .banner) {
    margin-top: 10px;
  }

  .pagina--index > .secao:has(> .banner) > .banner {
    gap: 32px;
    margin-bottom: 62px;
  }

  .pagina--index > .secao:has(> .banner) .banner__imagem {
    width: 82%;
    margin-left: auto;
    margin-right: 0;
  }

  .pagina--index > .secao:has(> .banner) .banner__conteudo {
    padding-right: 0;
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }

  .pagina--index > .secao:has(> .banner) .banner__titulo {
    font-size: 42px;
    line-height: 24px;
    margin-left: 12px;
  }

  .pagina--index > .secao:has(> .banner) .banner__destaque {
    font-size: min(102px, 30vw);
    line-height: 24px;
    padding-bottom: 16px;
  }

  .pagina--index > .secao:has(> .banner) .banner__descricao {
    font-size: 20px;
    line-height: 23px;
    margin-bottom: 20px;
  }

  .pagina--index > .secao:has(> .banner) .texto--seb-texto {
    line-height: 22px;
  }

  .pagina--index > .secao:has(> .banner) .botao {
    margin-left: auto;
    margin-right: auto;
  }
}