/* ==========================================================================
   Início V3 · arrumação da tela Início (a porta do site)
   Os blocos são do design system: Menu tile, Hero card, List, Rail, Article card, Card, Stat, Button.
   Aqui só a grade da página. Só variáveis do tokens.css. O app mede a largura da moldura (@container stage); 960 = --bp-desktop.
   ========================================================================== */
.iv3{display:flex;flex-direction:column;gap:var(--space-9)}
.iv3 h1,.iv3 h2,.iv3 p{margin:0}
.iv3-quebra{display:none}
.iv3-h1{font-size:var(--font-size-32);line-height:var(--line-height-tight);font-weight:var(--font-weight-medium);letter-spacing:-.03em}
.iv3-h2{font-size:var(--font-size-24);line-height:var(--line-height-snug);font-weight:var(--font-weight-medium);letter-spacing:-.01em}

/* título */
.iv3-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5)}
.iv3-top__txt{display:flex;flex-direction:column;gap:var(--space-3)}
.iv3-sub{display:block;width:fit-content;color:var(--text-primary);text-decoration:none}
.iv3-dest{color:var(--bs-nav)}
.iv3-sub:hover{text-decoration:underline;text-underline-offset:var(--space-2)}

/* menus: carrossel (Rail) no celular, quatro colunas no desktop */
.iv3-tiles{--size-menu-tile-icon:var(--space-11);display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--space-6) var(--space-8);overflow-x:auto}   /* celular (09/nov/2026): cada coluna tem a largura do maior título dela e 32px (--space-8) separam as colunas, contados a partir do fim do texto */
.iv3-tiles>.bs-menu-tile{scroll-snap-align:start}

/* card de avaliação do site: título, estrelas (espaçadas), comentário e Enviar à direita; depois do envio, o agradecimento.
   Celular: uma coluna, campo na largura toda e o botão embaixo, à direita. Desktop: texto à esquerda e o formulário à direita (campo e botão lado a lado). */
.iv3-aval__body{display:flex;flex-direction:column;gap:var(--space-5)}
.iv3-aval__form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);width:100%}
.iv3-aval__form .bs-rating{display:flex;justify-content:space-between;width:100%;max-width:calc(var(--size-control-lg) * 5 + var(--space-5) * 4)}
.iv3-aval__acoes{display:flex;justify-content:flex-end}
.iv3-aval__t{font-size:var(--font-size-24);line-height:var(--line-height-snug);font-weight:var(--font-weight-regular);letter-spacing:-.01em}
.iv3-aval p{margin:var(--space-2) 0 0;color:var(--text-secondary);font-size:var(--font-size-16)}

/* duas colunas: perfis + blog à esquerda, começar + números + criador à direita */
.iv3-cols{display:flex;flex-direction:column;gap:var(--space-9)}
.iv3-main{display:flex;flex-direction:column;gap:var(--space-9);min-width:0}
.iv3-rail{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.iv3-sec{display:flex;flex-direction:column;gap:var(--space-5)}
.iv3-sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.iv3-sec__head .bs-link{font-size:var(--font-size-14);white-space:nowrap}

/* lista do blog (Article card compacto, um embaixo do outro): miniatura e título um pouco maiores que o padrão */
.iv3-lista{display:flex;flex-direction:column;gap:var(--space-5)}
.iv3-lista--md{--size-article-thumb:var(--space-13);gap:var(--space-6)}
.iv3-lista--md .bs-article-card__title{font-size:var(--font-size-20)}
/* Como começar: a List e, embaixo, o Link "Ver todos" */
.iv3-comecar{display:flex;flex-direction:column;gap:var(--space-5)}
.iv3-comecar>.bs-link{font-size:var(--font-size-14);width:fit-content}

/* números da comunidade: quatro Stats em 2 colunas, sem card em volta */
.iv3-nums{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Sobre mim */
.iv3-sobre{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.iv3-sobre__av,.iv3-sobre__nome{color:inherit;text-decoration:none}
.iv3-sobre__nome:hover b{text-decoration:underline}
.iv3-sobre__acoes{display:flex;flex-direction:column;align-self:stretch;gap:var(--space-3)}
.iv3-sobre__quem{display:flex;flex-direction:column}
.iv3-sobre__quem b{font-size:var(--font-size-20);font-weight:var(--font-weight-medium);line-height:var(--line-height-snug)}
.iv3-sobre__quem span{font-size:var(--font-size-14);color:var(--text-secondary)}
.iv3-sobre p{font-size:var(--font-size-14);line-height:var(--line-height-normal);color:var(--text-secondary)}

@container stage (min-width:960px){
  .iv3-aval__body{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-9)}
  .iv3-aval__txt{flex:1;min-width:0}
  .iv3-aval__form{flex:0 0 50%;width:auto;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .iv3-aval__form .bs-rating{grid-column:1 / -1}
  .iv3-aval__acoes{display:block}
  .iv3{gap:var(--space-10)}
  .iv3-h1{font-size:var(--font-size-40)}
  .iv3-quebra{display:inline}
  .iv3-tiles{grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6) var(--space-5);overflow:visible;margin-inline:0;padding:0}
}
/* Uma coluna só (celular e tela estreita): "Como começar" sobe para antes de "Em destaque no blog" */
@container stage (max-width:1099px){
  .iv3-main,.iv3-rail{display:contents}
  .iv3-sec--comecar{order:1}
  .iv3-sec--blog{order:2}
  .iv3-rail > :not(.iv3-sec--comecar){order:3}
}
@container stage (min-width:1100px){
  .iv3-cols{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--space-13) * 3 + var(--space-9));gap:var(--space-8);align-items:start}
}