/* ==========================================================================
   Home, catálogo e o campo de captura

   Prioridade da composição, nesta ordem: dizer o que a empresa é, mostrar os
   produtos, deixar pedir orçamento sem esforço. O estilo serve a isso.

   O chão da página é cimento (ver tokens.css). O branco é a superfície
   elevada: cartão, campo, bloco de orçamento.
   ========================================================================== */

/* -- Abertura -------------------------------------------------------------
   Bloco branco no topo, com a identificação da empresa e o orçamento lado a
   lado. Quem cai de um anúncio precisa saber em três segundos o que é isto e
   onde fica.
   ------------------------------------------------------------------------ */

.ipe-abertura {
  background: var(--cor-superficie);
  border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}

.ipe-hero {
  padding-block: var(--e-16) var(--e-12);
}

.ipe-hero__grade {
  display: grid;
  gap: var(--e-12);
}

/* O h1 diz o negócio e a praça. Não é slogan, é identificação. */
.ipe-hero__quem {
  font-size: var(--step-3);
  max-width: 18ch;
  line-height: 1.04;
}

.ipe-hero__onde {
  margin-block-start: var(--e-4);
  font-size: var(--step-1);
  color: var(--cor-texto-2);
  max-width: 40ch;
}

.ipe-selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-block-start: var(--e-6);
  padding: 0;
  list-style: none;
}

.ipe-selo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  background: var(--cor-chao);
  border-radius: var(--raio-chip);
  font-size: 0.875rem;
  font-weight: var(--peso-forte);
}

.ipe-selo__num {
  font-variant-numeric: tabular-nums;
}

.ipe-hero__midia img {
  width: 100%;
  height: auto;
  border-radius: var(--raio-card);
  object-fit: cover;
}

@media (min-width: 1024px) {
  .ipe-hero__grade {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-24);
    align-items: start;
  }
}

/* -- Bloco de orçamento ---------------------------------------------------
   A coisa mais visível da tela, e sem precisar de cor forte para isso: é a
   superfície mais clara e a única com borda marcada.
   ------------------------------------------------------------------------ */

.ipe-captura {
  background: var(--cor-superficie);
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: var(--raio-card);
  overflow: hidden;
}

.ipe-captura__rampa {
  display: flex;
  height: var(--e-2);
}

.ipe-captura__rampa span { flex: 1; }
.ipe-captura__rampa span:nth-child(1) { background: var(--ipe-vermelho); }
.ipe-captura__rampa span:nth-child(2) { background: var(--ipe-laranja); }
.ipe-captura__rampa span:nth-child(3) { background: var(--ipe-amarelo); }

.ipe-captura__corpo { padding: var(--e-6); }

.ipe-captura__titulo {
  font-family: var(--fonte-corpo);
  font-stretch: var(--largura-corpo);
  letter-spacing: 0;
  font-size: var(--step-1);
  font-weight: var(--peso-forte);
  line-height: 1.3;
}

.ipe-captura__apoio {
  margin-block-start: var(--e-2);
  font-size: 0.875rem;
  color: var(--cor-texto-2);
}

.ipe-captura__campo {
  margin-block-start: var(--e-4);
  min-height: calc(var(--altura-input) * 1.8);
  line-height: var(--lh-corpo);
  resize: vertical;
}

.ipe-captura__chips { margin-block-start: var(--e-3); }

.ipe-captura__acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-6);
  margin-block-start: var(--e-4);
}

.ipe-captura__nota {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--cor-texto-2);
}

@media (max-width: 479px) {
  .ipe-captura__acao .ipe-botao { width: 100%; }
}

/* -- Produtos -------------------------------------------------------------
   "Saber os produtos" não é ler oito nomes de categoria. Ninguém procura
   "hidráulica": procura cano, registro, caixa d'água. Por isso cada cartão
   lista itens de verdade, e a marca fica no rodapé.
   ------------------------------------------------------------------------ */

.ipe-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--gutter);
  margin-block-start: var(--e-8);
}

.ipe-produto {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--e-6);
  background: var(--cor-superficie);
  border-radius: var(--raio-card);
  transition: box-shadow var(--dur-rapida) var(--easing);
}

.ipe-produto:hover,
.ipe-produto:focus-within {
  box-shadow: 0 0 0 1.5px var(--cor-borda-forte);
}

.ipe-produto__nome {
  font-family: var(--fonte-corpo);
  font-stretch: var(--largura-corpo);
  letter-spacing: 0;
  font-size: var(--step-1);
  font-weight: var(--peso-forte);
  line-height: 1.25;
  hyphens: manual;
  overflow-wrap: normal;
}

.ipe-produto__midia {
  margin-block-end: var(--e-4);
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-input);
  overflow: hidden;
}

.ipe-produto__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ipe-produto__itens {
  display: grid;
  gap: var(--e-2);
  margin-block-start: var(--e-4);
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--cor-texto-2);
}

.ipe-produto__itens li {
  display: flex;
  gap: var(--e-2);
}

.ipe-produto__itens li::before {
  content: "·";
  color: var(--ipe-laranja);
  font-weight: 700;
}

.ipe-produto__marcas {
  margin-block-start: auto;
  padding-block-start: var(--e-4);
  font-size: 0.8125rem;
  color: var(--cor-texto-2);
}

.ipe-produto__itens + .ipe-produto__marcas {
  margin-block-start: var(--e-4);
  border-block-start: 1px solid var(--cor-borda);
}

/* Área clicável é o cartão inteiro, sem aninhar link. */
.ipe-produto__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ipe-produto__link { text-decoration: none; }

.ipe-produto__link:hover {
  text-decoration: underline;
  text-decoration-color: var(--cor-acao);
}

/* -- Como funciona --------------------------------------------------------
   Numeração legítima: é sequência real.
   ------------------------------------------------------------------------ */

.ipe-passos {
  display: grid;
  gap: var(--e-6);
  margin-block-start: var(--e-8);
  padding: 0;
  list-style: none;
}

.ipe-passo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: start;
}

.ipe-passo__numero {
  display: grid;
  place-items: center;
  width: var(--e-8);
  height: var(--e-8);
  background: var(--cor-texto);
  color: var(--cor-superficie);
  border-radius: var(--raio-chip);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: var(--peso-forte);
  line-height: 1;
}

.ipe-passo__titulo {
  font-family: var(--fonte-corpo);
  font-stretch: var(--largura-corpo);
  letter-spacing: 0;
  font-size: var(--step-0);
  font-weight: var(--peso-forte);
  line-height: 1.3;
}

.ipe-passo__texto {
  margin-block-start: var(--e-2);
  font-size: 0.9375rem;
  color: var(--cor-texto-2);
}

@media (min-width: 768px) {
  .ipe-passos { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
}

/* -- IPE Tintas -----------------------------------------------------------
   Cartão branco, não faixa preta. O diferencial se sustenta pelo número, não
   pelo volume.
   ------------------------------------------------------------------------ */

.ipe-tintas {
  background: var(--cor-superficie);
  border-radius: var(--raio-card);
  overflow: hidden;
}

.ipe-tintas__grade {
  display: grid;
  gap: var(--e-8);
  padding: var(--e-12) var(--e-6);
}

.ipe-tintas__rotulo {
  font-size: 0.875rem;
  font-weight: var(--peso-forte);
  color: var(--cor-texto-2);
}

.ipe-tintas__numero {
  margin-block-start: var(--e-3);
  font-family: var(--fonte-display);
  font-stretch: var(--largura-display);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  font-size: var(--step-4);
}

.ipe-tintas__apoio {
  margin-block-start: var(--e-4);
  max-width: 44ch;
}

.ipe-tintas__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-6);
  margin-block-start: var(--e-6);
}

.ipe-tintas__midia img {
  width: 100%;
  height: auto;
  border-radius: var(--raio-input);
}

@media (min-width: 1024px) {
  .ipe-tintas__grade {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: var(--e-16) var(--e-12);
  }
}

/* -- Marcas ---------------------------------------------------------------- */

.ipe-marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-6);
  margin-block-start: var(--e-6);
  padding: 0;
  list-style: none;
}

.ipe-marcas__item {
  font-family: var(--fonte-display);
  font-stretch: var(--largura-display);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-display);
  font-size: var(--step-1);
  color: var(--cor-texto-2);
}

/* -- Lojas ----------------------------------------------------------------- */

.ipe-lojas {
  display: grid;
  gap: var(--gutter);
  margin-block-start: var(--e-8);
}

.ipe-loja {
  background: var(--cor-superficie);
  border-radius: var(--raio-card);
  padding: var(--e-6);
}

.ipe-loja__nome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
  font-family: var(--fonte-corpo);
  font-stretch: var(--largura-corpo);
  letter-spacing: 0;
  font-size: var(--step-1);
  font-weight: var(--peso-forte);
}

.ipe-loja__papel {
  font-size: 0.875rem;
  font-weight: var(--peso-normal);
  color: var(--cor-texto-2);
}

.ipe-loja__dados {
  display: grid;
  gap: var(--e-3);
  margin-block-start: var(--e-4);
}

.ipe-loja__dados dt {
  font-size: 0.8125rem;
  color: var(--cor-texto-2);
}

.ipe-loja__dados dd {
  margin: 0;
  font-weight: var(--peso-forte);
}

.ipe-loja__acao { margin-block-start: var(--e-4); }

@media (min-width: 768px) {
  .ipe-lojas { grid-template-columns: 1fr 1fr; }
}