/* ============================================================
   Itapê Serviços — HERO DA PÁGINA INICIAL
   ------------------------------------------------------------
   Carregado apenas pelo index.html.

   Conceito: "a cidade conectada num mural vivo". À esquerda, a
   proposta e a busca; à direita, uma constelação de anúncios —
   cards flutuantes ligados por linhas pontilhadas a um pin
   pulsante sobre Itapetininga, dentro de ondas de proximidade.

   Animações: apenas transform/opacity (compositor), lentas e
   sutis. base.css desliga tudo com prefers-reduced-motion.
   ============================================================ */

.hero {
  padding-block: var(--esp-5) var(--esp-7);
}

/* No celular os 48px de baixo do hero somavam com os 48px de topo
   da primeira .secao: 96px de branco entre o painel verde e o
   conteúdo seguinte, que lia como buraco. O painel já se fecha
   sozinho visualmente, então aqui basta menos. */
@media (max-width: 639px) {
  .hero {
    padding-bottom: var(--esp-5);
  }
}

/* ---------- Painel ---------- */

.hero__painel {
  position: relative;
  overflow: hidden;
  background: var(--cor-verde-escuro);
  /* Camadas: brilho amarelo (sol), luz fria, e a malha de pontos
     que lembra um mapa da cidade */
  background-image: radial-gradient(
      circle at 82% 12%,
      rgba(242, 179, 61, 0.16),
      transparent 42%
    ),
    radial-gradient(circle at 8% 95%, rgba(255, 255, 255, 0.06), transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.5px);
  background-size: auto, auto, 26px 26px;
  border-radius: var(--raio-g);
  color: #fff;
  padding: clamp(var(--esp-5), 4.5vw, var(--esp-7));
}

.hero__grade {
  display: grid;
  gap: var(--esp-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grade {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

/* ---------- Entrada orquestrada (fade + slide, uma vez) ---------- */

@keyframes hero-surgir {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__conteudo > * {
  animation: hero-surgir 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero__conteudo > :nth-child(2) { animation-delay: 70ms; }
.hero__conteudo > :nth-child(3) { animation-delay: 140ms; }
.hero__conteudo > :nth-child(4) { animation-delay: 210ms; }
.hero__conteudo > :nth-child(5) { animation-delay: 280ms; }
.hero__conteudo > :nth-child(6) { animation-delay: 350ms; }

/* ---------- Selo ---------- */

.hero__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--raio-pilula);
  padding: 5px 14px;
  font-size: var(--texto-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #eaf3f0;
  margin-bottom: var(--esp-4);
}

.hero__selo-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-amarelo);
  animation: hero-ponto 2.4s ease-in-out infinite;
}

@keyframes hero-ponto {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.65);
    opacity: 0.55;
  }
}

/* ---------- Título e texto ---------- */

.hero__painel h1 {
  font-size: clamp(2.05rem, 1.3rem + 3.4vw, var(--texto-4xl));
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight-bold);
  max-width: 17ch;
}

/* "Itapetininga" com marca-texto amarelo (assinatura da marca).
   O marcador "risca" a palavra da esquerda para a direita ao
   carregar a página. */
.hero__marca {
  font-weight: var(--font-weight-extrabold);
  background-image: linear-gradient(
    transparent 58%,
    var(--cor-amarelo) 58%,
    var(--cor-amarelo) 94%,
    transparent 94%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding-inline: 0.1em;
  white-space: nowrap;
  animation: hero-marca 700ms ease-out 500ms both;
}

@keyframes hero-marca {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}

.hero__texto {
  margin-top: var(--esp-4);
  max-width: 50ch;
  color: #cfe0db;
  font-size: var(--texto-md);
  line-height: 1.7;
  font-weight: var(--font-weight-regular);
}

/* ---------- Busca ---------- */

.hero__busca {
  margin-top: var(--esp-5);
  background: var(--cor-branco);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-alta);
  padding: var(--esp-3);
  display: grid;
  gap: var(--esp-2);
}

/* Campo com ícone à esquerda */
.hero__campo {
  position: relative;
}

.hero__campo > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--cor-tinta-suave);
  pointer-events: none;
  transition: color var(--transicao);
}

.hero__campo:focus-within > svg {
  color: var(--cor-verde);
}

.hero__busca input,
.hero__busca select {
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-s);
  padding: var(--esp-3) var(--esp-4) var(--esp-3) 38px;
  min-height: 48px;
  width: 100%;
  font-weight: var(--font-weight-medium);
  /* select nativo: fundo/cor explícitos para não herdar o tema do SO */
  background-color: var(--cor-branco);
  color: var(--cor-tinta);
  transition: border-color var(--transicao);
}

.hero__busca input::placeholder {
  color: var(--cor-tinta-suave);
  font-weight: var(--font-weight-regular);
}

/* Rótulos de categoria/bairro são longos: corpo 14px evita corte
   no espaço do select nativo */
.hero__busca select {
  font-size: var(--texto-sm);
}

.hero__busca input:hover,
.hero__busca select:hover {
  border-color: var(--cor-verde);
}

.hero__busca input:focus,
.hero__busca select:focus {
  outline: 3px solid var(--cor-verde);
  outline-offset: 1px;
  border-color: var(--cor-verde);
}

.hero__buscar {
  min-height: 48px;
}

/* Mobile largo em diante: palavra-chave na 1ª linha inteira;
   categoria, bairro e botão dividem a 2ª linha */
@media (min-width: 640px) {
  .hero__busca {
    grid-template-columns: 1fr 1fr auto;
  }
  .hero__campo--busca {
    grid-column: 1 / -1;
  }
}

/* Desktop estreito (1024–1279): a busca vive numa coluna de
   ~440px — botão desce para a 3ª linha para os selects respirarem */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__busca {
    grid-template-columns: 1fr 1fr;
  }
  .hero__buscar {
    grid-column: 1 / -1;
  }
}

/* ---------- Buscas populares ---------- */

.hero__populares {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
  font-size: var(--texto-xs);
  color: #a9c6bf;
  font-weight: var(--font-weight-medium);
}

.hero__populares a {
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-pilula);
  padding: 4px 12px;
  font-weight: var(--font-weight-medium);
  transition: background var(--transicao), transform var(--transicao),
    border-color var(--transicao);
}

.hero__populares a:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  color: #fff;
}

/* ---------- Ações principais ---------- */

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

/* Botão secundário sobre o painel verde */
.hero__acoes .botao--fantasma {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.hero__acoes .botao--fantasma:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Mobile: ações em largura total */
@media (max-width: 479px) {
  .hero__acoes .botao {
    width: 100%;
  }
}

/* ============================================================
   COLUNA VISUAL — a constelação da cidade
   ============================================================ */

.hero__visual {
  display: none;
  position: relative;
}

/* Tablet (768–1023px): faixa de cards abaixo do conteúdo,
   sem o mapa (a cena completa só cabe com coluna própria) */
@media (min-width: 768px) {
  .hero__visual {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    align-items: center;
  }
  .hero__mapa,
  .hero__pin {
    display: none;
  }
}

/* Desktop: cena completa com pin, ondas e cards posicionados */
@media (min-width: 1024px) {
  .hero__visual {
    display: block;
    min-height: 460px;
  }
  .hero__mapa,
  .hero__pin {
    display: block;
  }
}

/* Mapa de fundo (ondas de proximidade + trilhas pontilhadas) */
.hero__mapa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Pin central pulsando sobre a cidade */
.hero__pin {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -100%);
  display: grid;
  justify-items: center;
  gap: var(--esp-1);
}

.hero__pin svg {
  width: 34px;
  height: 34px;
  color: var(--cor-amarelo);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
  position: relative;
  z-index: 1;
}

/* Onda que emana do pé do pin */
.hero__pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  border: 2px solid var(--cor-amarelo);
  animation: hero-pulso 2.8s ease-out infinite;
}

@keyframes hero-pulso {
  from {
    transform: scale(0.4);
    opacity: 0.85;
  }
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}

.hero__pin span {
  font-size: var(--texto-xs);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  background: rgba(8, 74, 64, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--raio-pilula);
  padding: 2px 10px;
  white-space: nowrap;
}

/* ---------- Cards flutuantes ---------- */

/* Cada card é um link para o anúncio exibido no momento (decorativo
   para leitores de tela: tabindex="-1" dentro do aria-hidden) */
.hero__card {
  display: block;
  background: var(--cor-branco);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-alta);
  padding: var(--esp-3);
  width: max-content;
  text-decoration: none;
  transition: box-shadow var(--transicao);
}

.hero__card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Miolo trocável: a vitrine (home.js) troca o conteúdo aqui dentro.
   A transição vive neste wrapper porque a animação de entrada do
   card (fill-mode: both) prende opacity/transform no card em si. */
.hero__card-miolo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  transition: opacity 300ms ease, transform 300ms ease;
}

.hero__card-miolo--saindo {
  opacity: 0;
  transform: translateY(6px);
}

.hero__card-icone {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--raio-s);
  display: grid;
  place-items: center;
  background: var(--cor-verde-claro);
  background: color-mix(in srgb, var(--cor-cat, var(--cor-verde)) 12%, white);
  color: var(--cor-cat, var(--cor-verde));
}

.hero__card-icone svg {
  width: 22px;
  height: 22px;
}

.hero__card-info {
  display: grid;
  line-height: 1.35;
}

.hero__card-info strong {
  font-size: var(--texto-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--cor-tinta);
  white-space: nowrap;
}

.hero__card-info small {
  font-size: var(--texto-xs);
  color: var(--cor-tinta-suave);
  white-space: nowrap;
}

/* Nota (estrela) e preço.
   O NÚMERO fica escuro (legível, ~14:1); a estrela é acento amarelo
   decorativo — a nota já é comunicada pelo número. */
.hero__card-nota {
  margin-left: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--font-weight-bold);
  color: var(--cor-tinta);
  white-space: nowrap;
}

.hero__card-estrela {
  color: var(--cor-amarelo-escuro);
}

.hero__card-preco {
  color: var(--cor-verde-escuro);
  font-weight: var(--font-weight-bold);
}

/* "✓ Verificado" na linha de apoio do card */
.hero__card-verificado {
  color: #1c4d8f;
  font-weight: var(--font-weight-semibold);
  font-style: normal;
}

/* Pílula compacta (4º anúncio) */
.hero__pilula {
  display: block;
  background: var(--cor-branco);
  border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-alta);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--texto-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--cor-tinta);
  white-space: nowrap;
  width: max-content;
  text-decoration: none;
  transition: box-shadow var(--transicao);
}

.hero__pilula:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  color: var(--cor-tinta); /* vence o a:hover global (verde) */
}

.hero__pilula .hero__card-miolo {
  gap: var(--esp-2);
}

.hero__pilula svg {
  width: 16px;
  height: 16px;
  color: var(--cor-cat, #7a4a21);
  flex: none;
}

/* Posições da cena (só no desktop, onde a coluna existe) */
@media (min-width: 1024px) {
  .hero__card,
  .hero__pilula {
    position: absolute;
  }

  .hero__card--aula {
    top: 2%;
    left: 2%;
  }

  .hero__card--chacara {
    top: 57%;
    right: 0;
  }

  .hero__card--eletricista {
    bottom: 4%;
    left: 0;
  }

  .hero__pilula {
    top: 26%;
    right: 2%;
  }
}

/* Desktop estreito (1024–1279): coluna visual com ~340px — a
   pílula sai de cena para não apertar o pin */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__pilula {
    display: none;
  }
}

/* Flutuação lenta e contínua (depois da entrada) */
@keyframes hero-flutua {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-9px);
  }
}

.hero__card,
.hero__pilula {
  animation: hero-surgir 620ms cubic-bezier(0.22, 1, 0.36, 1) both,
    hero-flutua 7.5s ease-in-out 1.2s infinite alternate;
}

.hero__card--chacara {
  animation-delay: 180ms, 1.9s;
  animation-duration: 620ms, 8.5s;
}

.hero__card--eletricista {
  animation-delay: 320ms, 2.6s;
  animation-duration: 620ms, 9.5s;
}

.hero__pilula {
  animation-delay: 460ms, 1.5s;
  animation-duration: 620ms, 8s;
}

/* ============================================================
   INDICADORES DA PLATAFORMA (dentro do painel)
   ============================================================ */

.indicadores {
  list-style: none;
  padding: var(--esp-5) 0 0;
  margin-top: var(--esp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-4) var(--esp-3);
}

@media (min-width: 768px) {
  .indicadores {
    grid-template-columns: repeat(4, 1fr);
  }
}

.indicadores strong {
  display: block;
  /* Fluido, e não fixo, porque o valor mais longo é um NOME DE
     CIDADE: "Itapetininga" pede 140px e a coluna tem 127px em 360px
     e 114px em 320px — o texto vazava e encostava no indicador ao
     lado ("ItapetiningaDireto"). Em 390px cabia por zero de folga.
     Com multiCity no plano, cidade de nome maior reabriria o furo,
     então o tamanho acompanha a largura da tela e só trava no
     máximo do token. */
  font-size: clamp(1.05rem, 5.5vw, var(--texto-lg));
  font-weight: var(--font-weight-bold);
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  /* Rede de segurança: nome ainda maior parte a palavra em vez de
     invadir a coluna vizinha. */
  overflow-wrap: break-word;
}

.indicadores span {
  font-size: var(--texto-xs);
  color: #a9c6bf;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Rótulos longos ("atendimento na cidade") quebram em duas linhas
     na coluna estreita do celular. Equilibrar reparte as palavras
     entre as linhas em vez de deixar uma órfã embaixo. */
  text-wrap: balance;
}

/* Em telas estreitas o espaçamento entre letras é o que empurra o
   rótulo para a segunda linha — apertá-lo devolve os curtos a uma
   linha só e deixa o bloco com ritmo parelho. */
@media (max-width: 639px) {
  .indicadores span {
    letter-spacing: 0.03em;
  }
}

/* ============================================================
   AJUSTES DE ALTURA E ORIENTAÇÃO
   ============================================================ */

/* Celular na horizontal (pouca altura): hero compacta, busca e
   ações sempre acessíveis; decoração sai de cena */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    padding-block: var(--esp-4) var(--esp-5);
  }
  .hero__painel {
    padding: var(--esp-4) var(--esp-5);
  }
  .hero__texto,
  .hero__populares,
  .hero__visual {
    display: none;
  }
  .hero__selo {
    margin-bottom: var(--esp-3);
  }
  .hero__busca,
  .hero__acoes {
    margin-top: var(--esp-4);
  }
  .indicadores {
    margin-top: var(--esp-5);
    padding-top: var(--esp-4);
    grid-template-columns: repeat(4, 1fr);
  }
}