/*
  SDD-davinci-e-linguagem-de-temas F-DV4 (ADR-11) — a ESTRUTURA da celula
  Base 2 (familia Base, hierarquia Composta).

  MESMA FAMILIA, MESMA HISTORIA. A Base 2 tem os mesmos oito blocos da Base 1,
  na mesma ordem, com o mesmo texto — a §3.2 e explicita: hierarquia acrescenta
  APRESENTACAO, nunca informacao. Se algo aqui exigisse um paragrafo que a Base
  1 nao tem, seria estrutura vazando e a celula estaria errada.

  O QUE MUDA, e sao as tres linhas da tabela do §3.4:

    ritmo          a pagina alterna superficies e ganha UMA faixa que corta a
                   rolagem. Nao ha bloco novo para isso — a faixa e o bloco de
                   numeros desenhado de outro jeito. Hierarquia que precisasse
                   de um bloco proprio estaria contrabandeando familia.
    secao          o cabecalho ganha hierarquia interna e os itens ganham peso
                   diferente entre titulo, apoio e descricao.
    primeira dobra deixa de so dizer e passa a MOSTRAR: o hero abre em duas
                   colunas, com imagem de apoio.

  DEGRADACAO (ADR-6): sem imagem, o hero volta a uma coluna sozinho. A classe
  `hero--com-imagem` so e emitida quando ha imagem, e e por isso que a regra de
  duas colunas depende dela em vez de valer sempre — um tema sem foto nao pode
  abrir com uma coluna vazia do lado.
*/

/* SDD-builder-refino-15 F-15-4 — a FAIXA em variaveis com o valor desta celula:
   a cena de tela cheia (secao em carrossel) le `--largura-max` e `--ritmo` para
   centrar e respirar como a faixa. Sao os mesmos numeros das reservas abaixo. */
:root { --largura-max: 1180px; --ritmo: clamp(64px, 9vw, 128px); }

.wrap {
  width: 100%;
  max-width: var(--largura-max, 1180px);
  margin-inline: auto;
  padding-inline: var(--pad, clamp(20px, 4.5vw, 56px));
}

.seccao { padding-block: var(--ritmo, clamp(64px, 9vw, 128px)); }
.seccao--curta { padding-block: var(--ritmo-curto, clamp(40px, 6vw, 72px)); }

/* A FAIXA. Sangra de borda a borda, e e o unico corte da rolagem que a
   hierarquia 2 admite — mais de um viraria ritmo, que e da 3. */
.faixa { padding-block: var(--ritmo-faixa, clamp(44px, 6vw, 84px)); }

.topo { position: sticky; top: 0; z-index: 10; }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--altura-topo, 76px); }
.menu { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); }

/* Hero em duas colunas quando ha imagem; uma coluna quando nao ha. */
.hero .wrap { display: grid; gap: clamp(24px, 4vw, 52px); align-items: center; }
.hero--com-imagem .wrap { grid-template-columns: 1.05fr .95fr; }
.hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero h1 { max-width: 16ch; text-wrap: balance; }
.hero .conduz { max-width: 48ch; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__figura { margin: 0; }
.hero__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Cabecalho de secao com hierarquia interna: apoio, titulo e conducao em tres
   pesos, e nao tres linhas iguais. */
.cabeca { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(28px, 4.5vw, 56px); max-width: 62ch; }
.cabeca h2 { max-width: 20ch; text-wrap: balance; }

.grade { display: grid; gap: var(--vao, clamp(18px, 2.8vw, 32px)); list-style: none; margin: 0; padding: 0; }
/* A grade NAO SUPOE QUANTIDADE.
   Estrutura e por bloco; hierarquia e so design. Um `repeat(3, 1fr)` embutiria
   "sao tres servicos" na celula — e o cliente com quatro ganharia um orfao na
   segunda linha, e o com dois, um buraco. `auto-fit` deixa a contagem onde ela
   nasce: no conteudo. */
.grade--cartoes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.item { display: flex; flex-direction: column; gap: 10px; }
.item__icone { width: var(--tamanho-icone, 26px); height: var(--tamanho-icone, 26px); }

.passo { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline; }
.passo .marcador { grid-row: span 2; }

.numero { display: flex; flex-direction: column; gap: 4px; }

.formulario { display: flex; flex-direction: column; gap: 18px; max-width: 44rem; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo input, .campo textarea { width: 100%; }
.campo textarea { min-height: 8rem; resize: vertical; }

.rodape .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px; }
.rodape .elos { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 900px) {
  .hero--com-imagem .wrap { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .menu { display: none; }
  .topo .wrap { justify-content: flex-start; }
}

/*
  SDD-builder-interativos F-INT-2 (ADR-5) — o ACABAMENTO do acordeao e das abas.

  Ele mora na CELULA, e nao no tema: a decisao de 13/09 e' que "os itens entram
  na familia que aquele tema pertence". Seis copias do mesmo desenho divergiriam
  no primeiro ajuste — e a divergencia apareceria como "o acordeao do Bussola e'
  diferente do acordeao do Serra", sem que ninguem tenha escolhido isso.

  O que entra: ritmo, grade, tamanho e raio — o vocabulario desta folha desde a
  emenda do ADR-6 da administracao da loja. A COR nao entra: as linhas usam
  `currentColor` diluido, que herda a tinta do tema sem nomea-la.

  A linha tem DUAS declaracoes de proposito: a primeira e' a reserva para quem
  nao entende `color-mix`, e a segunda e' a boa. Sem a primeira, um navegador
  antigo ficaria sem separador nenhum.
*/
/*
  Base 2 respira mais que a Base 1, e e' so' isso que muda aqui: o degrau de
  acabamento desta celula e' de ESPACO, nao de forma.
*/

/* ── Acordeao ─────────────────────────────────────────────────────────── */

.mmc-acordeao > details { padding: 16px 4px; }
.mmc-acordeao > details + details { margin-top: 16px; }

.mmc-acordeao > details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 1.05rem;
  border-bottom: 1px solid;
  padding-bottom: 10px;
}

/*
  A seta e' desenhada aqui, e nao herdada do navegador: o marcador padrao muda
  de forma em cada um, e uma seta que gira diz "isto abre" antes de a pessoa
  clicar. `transition` so' na transformacao — o bloco de movimento reduzido do
  `base.css` ja' a neutraliza para quem pediu menos movimento.
*/
.mmc-acordeao > details > summary::after {
  content: ""; flex: none; width: .5em; height: .5em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-.1em, -.1em); transition: transform .18s ease;
}
.mmc-acordeao > details[open] > summary::after { transform: rotate(-135deg) translate(-.15em, -.15em); }

.mmc-acordeao > details > summary + * { margin-top: 16px; }

/* ── Abas ─────────────────────────────────────────────────────────────── */

.mmc-abas > .mmc-abas-fitas {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid;
  margin-bottom: 22px;
}

.mmc-abas > .mmc-abas-fitas > [role="tab"] {
  padding: 12px 4px;
  
  border-bottom: 0 solid; margin-bottom: -1px;
  opacity: .55; transition: opacity .15s ease;
}

.mmc-abas > .mmc-abas-fitas > [role="tab"]:hover { opacity: .85; }

/*
  A aba aberta se marca por `aria-selected`, que e' o MESMO atributo que o
  leitor de tela anuncia. Uma classe a mais aqui seria uma segunda verdade sobre
  qual aba esta' aberta — e as duas divergiriam no primeiro ajuste do runtime.
*/
.mmc-abas > .mmc-abas-fitas > [role="tab"][aria-selected="true"] { opacity: 1; border-bottom-width: 2px; }

/* ── Divisor ──────────────────────────────────────────────────────────── */

/*
  O `<hr>` do divisor. Sem esta regra ele fica com a borda `inset` do navegador
  — cinza fixo, grossa e diferente em cada um —, que e' o mais perto de "sem
  desenho" que um elemento pode ficar.

  A linha nao declara COR: `border-top: 1px solid` sem cor usa `currentColor`, e
  a opacidade faz o resto. Cor e' do tema, nao da celula.
*/
hr {
  border: 0;
  border-top: 1px solid;
  opacity: .25;
  margin: 0;
}