/*
 * implantacao-v2.css: só o que é da página Implantação e consultoria v2. O comum está em assets/css/v2.css.
 * Texto em _spec/04-COPY/implantacao-v2.md.
 */

/* ============================================================ */
/* 1. Herói: foto C4 (a parede livre fica à esquerda, o dono à direita) */
/* ============================================================ */
.pagina--implantacao-v2 .heroi h1{ font-size: clamp(2rem, 0.6rem + 2.8vw, 3.3rem); }
.pagina--implantacao-v2 .heroi__apoio{ max-inline-size: 40ch; }
.pagina--implantacao-v2 .heroi__foto img{ object-position: 78% 50%; }
@media (min-width: 701px){
  /* Véu claro no topo da foto: o menu do cabeçalho passa sobre as folhas da estante e perdia leitura. */
  .pagina--implantacao-v2 .heroi__foto::after{ content: ""; position: absolute; inset: 0 0 auto 0; block-size: 9rem; background: linear-gradient(to bottom, rgba(247,249,248,.82), rgba(247,249,248,0)); pointer-events: none; }
  .pagina--implantacao-v2 .heroi h1{ max-inline-size: 11em; }
  .pagina--implantacao-v2 .heroi h1 .nq{ white-space: normal; }
  .pagina--implantacao-v2 .heroi__acoes{ max-inline-size: 31rem; }
}
/* A foto C4 só existe na horizontal: no celular o recorte quadrado mantém o rosto, o notebook e a xícara. */
@media (max-width: 700px){
  .pagina--implantacao-v2 .heroi__foto{ aspect-ratio: 1 / 1; }
  .pagina--implantacao-v2 .heroi__foto img{ object-position: 84% 50%; }
}

/* ============================================================ */
/* 2. Passos: a jornada sem cartões, título à esquerda e texto à direita */
/* ============================================================ */
.pagina--implantacao-v2 .passos__cab{ display: grid; gap: 1.25rem; margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
/* título da seção */
.pagina--implantacao-v2 .passos h2{ font-size: clamp(2.125rem, 1.1rem + 3.2vw, 3.75rem); max-inline-size: 18ch; }
.pagina--implantacao-v2 .passos__apoio{ font-size: var(--t-lide); line-height: 1.5; max-inline-size: 50ch; }
@media (min-width: 860px){
  .pagina--implantacao-v2 .j-passo{ grid-template-columns: 2.25rem minmax(0, 1fr); align-items: start; padding-block: 1.6rem; }
  .pagina--implantacao-v2 .j-passo__n{ margin-block-start: .35rem; }
  .pagina--implantacao-v2 .j-passo__txt{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(1.25rem, 3vw, 3rem); align-items: baseline; }
  .pagina--implantacao-v2 .j-passo__txt h3{ margin: 0; }
}
.pagina--implantacao-v2 .j-passo__txt p{ font-size: var(--t-lide); }
.pagina--v2 .passos__prazo{
  margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
  padding: 1rem 1.25rem;
  max-inline-size: 62ch;
  background: #fff;
  border-inline-start: 2px solid var(--esm);
  border-radius: 0 6px 6px 0;
  font-size: var(--t-corpo);
  line-height: 1.55;
  color: #151A17;
}

/* ============================================================ */
/* 3. Consultoria comercial: foto C3 e o que inclui                 */
/* ============================================================ */
.consult__grade{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.consult__foto{ margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; background: #E9EEEB; }
.consult__foto img{ inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 46% 40%; }
.consult h2{ max-inline-size: 16ch; }
.pagina--v2 .consult__apoio{ margin-block-start: 1.25rem; font-size: var(--t-lide); line-height: 1.5; max-inline-size: 44ch; }
.pagina--implantacao-v2 .consult__lista{ list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; border-block-end: 1px solid var(--linha-v2); }
.consult__lista li{ padding-block: .85rem; border-block-start: 1px solid var(--linha-v2); font-size: var(--t-corpo); line-height: 1.5; color: #151A17; }
.pagina--v2 .consult__nota{ margin-block-start: 1.25rem; font-size: var(--t-pequeno); line-height: 1.5; color: var(--suave); max-inline-size: 46ch; }
@media (min-width: 861px){
  .consult__grade{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
}

/* ============================================================ */
/* 4. Lado a lado                                                  */
/* ============================================================ */
.lado h2{ max-inline-size: 18ch; }
.lado__colunas{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem); }
.lado__col{ display: grid; align-content: start; gap: .75rem; padding: 1.75rem 1.6rem 2rem; background: transparent; border: 1px solid var(--linha-v2); border-radius: 6px; }
.lado__col--junto{ background: #fff; border-color: var(--linha-v2); border-block-start: 2px solid var(--esm); }
.lado__col h3{ font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.125rem); line-height: 1.12; color: #151A17; }
.lado__col p{ font-size: var(--t-corpo); line-height: 1.6; max-inline-size: 40ch; }
@media (min-width: 760px){
  .lado__colunas{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
}

/* ============================================================ */
/* 5. Quem está por trás                                           */
/* ============================================================ */
.quem__grade{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.quem h2{ max-inline-size: 12ch; }
.pagina--v2 .quem__corpo > p{ font-size: var(--t-lide); line-height: 1.55; max-inline-size: 46ch; }
.quem .fundador{ margin-block-start: clamp(1.5rem, 3vw, 2rem); gap: 1.1rem; }
.quem .fundador__foto{ inline-size: 4.5rem; block-size: 4.5rem; }
.quem .fundador__txt{ font-size: var(--t-corpo); }
@media (min-width: 861px){
  .quem__grade{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
}

/* ============================================================ */
/* 6. Perguntas: título à esquerda, lista à direita                 */
/* ============================================================ */
.pagina--implantacao-v2 .faqs__grade{ grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.pagina--implantacao-v2 .faqs h2{ margin-block-end: 0; }
@media (min-width: 861px){
  .pagina--implantacao-v2 .faqs__grade{ grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
}