/* ==========================================================================
   HOME institucional — constrói POR CIMA de css/style.css.
   Eixo: EMPRESA -> CAPACIDADE -> ESCOLHA DA FRENTE -> CONFIANÇA -> CONTATO.
   Linguagem própria, diferente de /cacambas/: aqui manda a GRADE de frentes,
   não a ficha de produto. Mobile-first; media queries sempre no fim.
   ========================================================================== */

/* Ritmo mais curto que a landing: a home tem que andar. */
.page-home .section { padding-block: clamp(40px, 5vw, 72px); }
.page-home .section-head { margin-bottom: clamp(24px, 3.2vw, 36px); }

/* ---------- 1. Hero — uma dobra útil ----------
   O header é fixo e flutua por cima do hero. Então o hero ocupa 100svh e o
   conteúdo é empurrado pela altura real do header. `svh` (não `vh`) porque no
   celular a barra do navegador some e volta.
   O H1 é limitado por largura E por altura: em tela baixa (720px) um clamp só
   de vw estoura e empurra o CTA para fora da dobra. */
.hero--home { min-height: 100svh; min-height: 100vh; align-items: center; }
.hero--home .hero-bg img { object-position: 50% 46%; }
.hero--home .hero-inner {
  padding-top: calc(var(--header-h) + clamp(16px, 2.4vh, 32px));
  padding-bottom: clamp(20px, 3.4vh, 44px);
}
.hero--home .eyebrow { margin-bottom: clamp(10px, 1.6vh, 18px); }
.hero--home h1 {
  max-width: 15ch;
  font-size: clamp(2rem, min(5.6vw, 7vh), 3.9rem);
  line-height: 1.04;
}
.hero--home .hero-lede {
  margin-top: clamp(12px, 1.8vh, 20px);
  font-size: clamp(0.98rem, min(1.5vw, 2.1vh), 1.14rem);
  max-width: 50ch;
}
.hero--home .hero-actions { margin-top: clamp(18px, 2.8vh, 32px); }

/* ---------- 2. Faixa de credibilidade ---------- */
.cred { position: relative; z-index: 3; background: var(--ink-950); border-block: 1px solid var(--line); }
.cred-list { display: grid; grid-template-columns: 1fr 1fr; }
.cred-list li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cred-list li:nth-child(2n) { border-right: 0; }
.cred-list li:nth-last-child(-n+2) { border-bottom: 0; }
.cred-list strong {
  font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-hi);
}
.cred-list span { font-size: 0.84rem; color: var(--text-muted); line-height: 1.4; }

/* ---------- 3. As cinco frentes ---------- */
.frentes-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.frente { position: relative; }
.frente-link {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.frente-link:hover { transform: translateY(-3px); border-color: rgba(46,49,146,0.5); box-shadow: var(--shadow-md); }
.frente-media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-900); }
.frente-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-soft); }
.frente-link:hover .frente-media img { transform: scale(1.05); }
.frente-corpo { display: block; padding: 20px 20px 22px; }
.frente-tag {
  display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: var(--radius-full);
  background: rgba(228,31,37,0.18); border: 1px solid rgba(228,31,37,0.36); color: var(--jc-red-400);
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.frente-corpo h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--text-hi); }
.frente-corpo p { margin-top: 7px; color: var(--text-body); font-size: 0.94rem; }
.frente-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--font-display); font-size: 0.84rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--jc-blue-300);
}
.frente-cta svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.frente-link:hover .frente-cta svg { transform: translateX(3px); }
.frente-cta--wa { color: #4fd483; }
.frente-link:hover .frente-cta--wa svg { transform: none; }

/* Caçambas: segunda prioridade — filete vermelho no topo.
   Presença forte sem ocupar o dobro do espaço. */
.frente--secundaria .frente-link { border-color: rgba(228,31,37,0.3); }
.frente--secundaria .frente-link::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--jc-red), var(--jc-red-600));
}
.frente--secundaria .frente-link:hover { border-color: rgba(228,31,37,0.55); }

/* Card do plasma: sem foto — o acervo não sustenta. A espessura vira a imagem. */
.frente--num .frente-link {
  background:
    radial-gradient(420px 220px at 88% -10%, rgba(46,49,146,0.36), transparent 62%),
    linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border-color: rgba(46,49,146,0.36);
}
.frente--num .frente-corpo { padding-top: 26px; }
.num-espessura {
  display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-weight: 700; line-height: 0.9;
  font-size: clamp(3.4rem, 9vw, 5rem); letter-spacing: -0.02em;
  background: linear-gradient(150deg, var(--white), var(--jc-blue-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.num-espessura i { font-style: normal; font-size: 0.3em; letter-spacing: 0.06em; margin-left: 4px; color: var(--jc-blue-300); -webkit-text-fill-color: var(--jc-blue-300); }

/* ---------- 4. A fábrica ---------- */
.fabrica-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.fab { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--ink-900); }
.fab img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fab figcaption { padding: 12px 16px; font-size: 0.86rem; color: var(--text-muted); border-top: 1px solid var(--line); }
.fab--grande img { aspect-ratio: 16 / 10; }

/* ---------- 5. Quem faz ---------- */
.quem-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
.quem-media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.quem-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.quem-copy h2 { margin-top: 12px; font-size: clamp(1.7rem, 3.6vw, 2.4rem); max-width: 17ch; }
.quem-copy p { margin-top: 14px; color: var(--text-body); font-size: 1.02rem; max-width: 48ch; }
.quem-copy .btn-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 6. Onde estamos ---------- */
.onde-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.onde-card {
  padding: 26px 24px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
}
.onde-card h3 { color: var(--text-hi); font-size: 1.1rem; }
.onde-card address { font-style: normal; margin-top: 14px; color: var(--text-body); line-height: 1.6; }
.onde-card address small { color: var(--text-muted); }
.onde-contatos { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.onde-contatos a { color: var(--jc-blue-300); font-size: 0.95rem; }
.onde-contatos a:hover { color: var(--white); }
.onde-card .btn-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.onde-mapa {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-md); background: rgba(255,255,255,0.03); min-height: 300px;
}
.onde-mapa iframe {
  display: block; width: 100%; height: 100%; min-height: 300px; border: 0;
  filter: invert(0.92) contrast(0.88) brightness(0.9) hue-rotate(180deg) saturate(0.85);
}

/* ---------- 7. CTA final ---------- */
.page-home .cta-final { padding-block: clamp(58px, 8vw, 96px); }
.cta-final-sub { margin-top: 14px; color: rgba(255,255,255,0.78); max-width: 46ch; margin-inline: auto; }
.page-home .cta-final-inner .btn { margin-top: 26px; }

/* Barra mobile: mesma lição de /cacambas/ — sem botão flutuante sobrepondo. */
.page-home .wa-float { display: none; }

/* ==========================================================================
   Breakpoints — sempre depois das regras base
   ========================================================================== */
@media (min-width: 620px) {
  .frentes-grid { grid-template-columns: 1fr 1fr; }
  .fabrica-grid { grid-template-columns: 1fr 1fr; }
  .fab--grande { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .cred-list { grid-template-columns: repeat(4, 1fr); }
  .cred-list li { border-bottom: 0; }
  .cred-list li:nth-child(2n) { border-right: 1px solid var(--line); }
  .cred-list li:last-child { border-right: 0; }

  /* Bento em 3 colunas: linha 1 = Caçambas (2 col) + Plataformas; linha 2 = as
     outras três. As cinco frentes leem numa dobra só, e Caçambas continua em
     destaque sem virar torre 2x2 que empurra as demais para fora da tela. */
  .frentes-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .frente--destaque { grid-column: span 2; }
  .frente--destaque .frente-link { flex-direction: row; align-items: stretch; }
  .frente--destaque .frente-media { flex: 0 0 46%; aspect-ratio: 4 / 3; }
  .frente--destaque .frente-media img { object-position: 50% 38%; }
  .frente--destaque .frente-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 26px; }
  .frente--destaque .frente-corpo h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
  .frente--destaque .frente-corpo p { font-size: 1rem; }
  .frente-media { aspect-ratio: 16 / 11; }
  .frente-corpo { padding: 16px 18px 18px; }
  .frente-corpo h3 { font-size: 1.08rem; }
  .frente-corpo p { font-size: 0.88rem; margin-top: 5px; }
  .frente-cta { margin-top: 12px; font-size: 0.78rem; }
  .frente--num .frente-corpo { padding-top: 20px; }
  .num-espessura { font-size: clamp(2.6rem, 4.4vw, 3.4rem); }

  .fabrica-grid { grid-template-columns: repeat(3, 1fr); }
  .fab--grande { grid-column: span 3; }
  .fab--grande img { aspect-ratio: 21 / 9; }

  .quem-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .onde-grid { grid-template-columns: 1fr 1fr; }
  .onde-mapa { min-height: 380px; }
  .onde-mapa iframe { min-height: 380px; }
}
@media (min-width: 1100px) {
  .fabrica-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .fab--grande { grid-column: span 1; }
  .fab--grande img { aspect-ratio: 3 / 4; }
  .fab:not(.fab--grande) img { aspect-ratio: 3 / 4; }
}

/* --------------------------------------------------------------------------
   Header fixo: âncora não pode parar atrás dele. Vale para #frentes, #fabrica,
   #quem-faz e #onde, e para os links do menu mobile.
   -------------------------------------------------------------------------- */
.page-home [id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* --------------------------------------------------------------------------
   Ritmo por dobra (só desktop): título e começo do conteúdo na mesma tela.
   No mobile o fluxo é natural — nada preso a altura de tela.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .page-home .section { padding-block: clamp(36px, 4.4vh, 60px); }
  .page-home .section-head { margin-bottom: clamp(18px, 2.4vh, 28px); }
  .page-home .section-head h2 { font-size: clamp(1.7rem, min(3.2vw, 4.4vh), 2.5rem); }
  .cred-list li { padding-block: clamp(12px, 1.8vh, 18px); }
  .fab img { aspect-ratio: 4 / 3; }
  .quem-media img { aspect-ratio: 16 / 11; }
  .page-home .cta-final { padding-block: clamp(48px, 6.4vh, 84px); }
}

/* Telas baixas (ex.: 1536x720 do PC do Willian): aperta mais o vertical. */
@media (min-width: 900px) and (max-height: 780px) {
  .page-home .section { padding-block: clamp(26px, 3.4vh, 38px); }
  .frente-media { aspect-ratio: 16 / 9; }
  .frente--destaque .frente-media { aspect-ratio: 3 / 2; }
  .frente-corpo { padding: 13px 16px 15px; }
  .onde-mapa, .onde-mapa iframe { min-height: 320px; }

  /* A seção das frentes é a que mais precisa de dobra: cabeçalho enxuto
     para a 2ª linha de cards aparecer com presença, e não como sobra. */
  #frentes .section-head { margin-bottom: 16px; max-width: none; display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: baseline; }
  #frentes .section-head .eyebrow { grid-column: 1 / -1; }
  #frentes .section-head h2 { margin-top: 10px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
  #frentes .section-head p { margin-top: 10px; font-size: 0.95rem; max-width: 52ch; }
}