/* Home (catálogo da Studenta) — 27/10/2026. Módulo: site/catalog-page.mjs.
   As capas usam .content-card e .content-art.thumb de recursos/content-hub.css (mesma linguagem de /estudos).
   Aqui ficam só o topo com os dois perfis, as grades, o ícone grande da capa de produto e os três passos. */

/* Topo: headline, apoio e os dois atalhos por perfil à esquerda; os três cartões de produto à direita. */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; min-height: 0; padding-top: 56px; padding-bottom: 64px; }
.home-hero .hero-copy > p { max-width: 540px; }
/* Headline em duas linhas no desktop: a frase escura e, em linha própria, o trecho em laranja. */
.home-hero h1 { font-size: clamp(36px, 3.75vw, 54px); line-height: 1.12; }
@media (min-width: 1001px) { .home-hero h1 em { white-space: nowrap; } }
/* Cartões de produto à direita: mesmos estilos da home anterior (.catalog-art/.catalog-orbit em catalog.css). */
.home-hero:has(.home-hero__cards) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: 48px; }
/* Até 1000 px (tablet), uma coluna: a headline não cabe ao lado dos cartões e os atalhos espremem. */
@media (max-width: 1000px) { .home-hero:has(.home-hero__cards) { grid-template-columns: 1fr; gap: 32px; } .home-hero__cards { max-width: 560px; } }
.home-audiences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin-top: 32px; }
.home-audience { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: var(--target-min); padding: 14px 18px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out); }
.home-audience:hover { transform: translateY(calc(var(--lift-sm) * -1)); border-color: var(--accent); }
.home-audience__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-accent); color: var(--ink); }
.home-audience__text { display: flex; flex-direction: column; min-width: 0; }
.home-audience__text small { font-size: var(--text-xs); color: var(--muted); }
.home-audience__text b { font: 500 var(--text-lg)/1.25 var(--title); letter-spacing: -.02em; }
.home-audience > span:last-child { font-size: 20px; color: var(--accent-strong); transition: transform var(--duration) var(--ease-out); }
.home-audience:hover > span:last-child { transform: translateX(4px); }

/* Grades de capas. */
.home-products, .home-study-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-proof-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 20px; }
.home-product h3 { font-size: var(--text-2xl); }
.home-product .content-card-meta, .home-study .content-card-meta { margin-bottom: -6px; }
.home-study h3 { margin-bottom: 20px; }
/* Capa com lista (guia de piloto): os itens vão em linha embaixo do gancho, para caber na coluna mais estreita. */
.home-study .thumb-visual:has(.thumb-list, .thumb-levels) { position: static; margin-top: auto; z-index: 1; }
.home-study .thumb-list { display: flex; flex-wrap: wrap; gap: 6px; }
/* Marca do produto no topo da capa. */
.home-product__brand { display: flex; align-items: center; min-height: 30px; margin-bottom: 8px; }
.home-product__logo { display: block; width: auto; height: 26px; }
.home-product__logo--pd { height: 24px; }
.home-product__logo--pd .PDLogo_text__spqy3 path[fill="#fff"], .home-product__logo--pd path[fill="#fff"] { fill: var(--ink); }
.home-product__wordmark { display: inline-flex; align-items: center; gap: 8px; font: 600 20px/1 var(--title); letter-spacing: -.03em; }
.home-product__wordmark .s-icon { color: currentColor; }
.home-product__wordmark .s-icon .i-accent { color: #fff; }
/* Ilustração da capa de produto (assets/home/produto-*.svg, monocromática em currentColor). */
.home-product .thumb-visual { right: 14px; bottom: 10px; }
.home-product__art { display: block; width: 168px; height: auto; }
.home-product .thumb--ink .thumb-visual { color: var(--accent); }
.home-product .thumb--accent .thumb-visual { color: #1b120c; }
.home-product .thumb--sand .thumb-visual { color: var(--ink); }
.home-product .thumb-hook { max-width: 78%; }

/* Credencial UOL EdTech. */
.home-credential { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: -12px 0 28px; padding: 14px 20px; border: 1px solid var(--line); border-radius: var(--radius-pill); width: fit-content; max-width: 100%; font-size: var(--text-sm); color: var(--muted); background: var(--surface); }
.home-credential img { height: 24px; width: auto; }

/* Como contratar: três marcos de uma trilha (ícone, número, título e uma linha), ligados por linha tracejada. */
.home-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.home-flow li { position: relative; display: flex; flex-direction: column; gap: 4px; }
.home-flow li:not(:last-child)::after { content: ''; position: absolute; top: 32px; left: 80px; right: -24px; border-top: 2px dashed var(--line); }
.home-flow__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: 18px; background: var(--surface-accent); color: var(--ink); }
.home-flow li:last-child .home-flow__icon { background: var(--accent); color: #1b120c; }
.home-flow__n { font-size: var(--text-micro); font-weight: 700; letter-spacing: .12em; color: var(--accent-strong); }
.home-flow b { font: 500 var(--text-xl)/1.3 var(--title); letter-spacing: -.02em; }
.home-flow li > span:last-child { max-width: 300px; font-size: var(--text-md); line-height: 1.55; color: var(--muted); }
.home-hire__cta { margin-top: 36px; }
.home-studies .text-link { display: inline-flex; margin-top: 24px; }

@media (max-width: 1000px) {
  .home-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; padding-bottom: 48px; }
  .home-hero__svg { max-width: 480px; margin: 0 auto; }
  .home-products, .home-study-grid, .home-proof-grid { grid-template-columns: 1fr; }
  .home-flow { grid-template-columns: 1fr; gap: 28px; }
  .home-flow li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-content: start; }
  .home-flow__icon { grid-row: 1 / 4; margin-bottom: 0; }
  .home-flow li:not(:last-child)::after { top: 72px; bottom: -24px; left: 31px; right: auto; border-top: 0; border-left: 2px dashed var(--line); }
}
/* Tablet: uma capa por linha, com a capa à esquerda e o texto à direita (três colunas ficariam estreitas e duas deixariam uma sozinha). */
@media (min-width: 761px) and (max-width: 1000px) {
  :is(.home-product, .home-study) .content-card-link { flex-direction: row; }
  :is(.home-product, .home-study) .content-art.thumb { flex: 0 0 46%; height: auto; min-height: 240px; }
  :is(.home-product, .home-study) .content-card-copy { justify-content: center; }
  .home-product .thumb-visual { position: static; margin-top: auto; padding-top: 12px; }
  .home-product__art { width: 128px; }
  .home-product .thumb-hook { max-width: 100%; }
}
@media (max-width: 760px) {
  .home-hero:has(.home-hero__cards) { grid-template-columns: 1fr; gap: 24px; }
  .home-audiences { grid-template-columns: 1fr; margin-top: 24px; }
  .home-products, .home-study-grid, .home-proof-grid { grid-template-columns: 1fr; }
  .home-product__art { width: 132px; }
  .home-credential { margin-top: -4px; border-radius: var(--radius-lg); }
}