/* ==========================================================================
   pages/guia-google-meu-negocio.css — específico de guia-google-meu-negocio/index.html
   Usa também pages/criacao-de-sites.css (page-hero, process-steps, cta-final),
   igual ao guia do Search Console. Aqui ficam só as partes próprias deste guia.
   ========================================================================== */

.gmn-hero img,
.gmn-shot img,
.gmn-figure img {
  height: auto;
}

/* ---------- Topo: texto + print do celular ---------- */

.gmn-hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 861px) {
  .gmn-hero__grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.gmn-hero__text {
  min-width: 0;
}

.gmn-hero .page-hero__title {
  max-width: 22ch;
}

.gmn-hero__aka {
  max-width: 56ch;
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid #f4be3a;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.gmn-hero__small {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-sm);
}

.gmn-hero__small a {
  color: var(--color-white);
}

.gmn-hero__figure {
  margin: 0;
  max-width: 300px;
}

.gmn-hero__figure figcaption {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.gmn-phone {
  padding: 12px;
  background: #1a2433;
  border-radius: 34px;
  box-shadow: var(--shadow-lg);
}

.gmn-phone img {
  border-radius: 24px;
  background: var(--color-white);
}

/* ---------- Antes de começar: os dois cadastros ---------- */

.gmn-two {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 861px) {
  .gmn-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gmn-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.gmn-card--here {
  border-color: var(--color-blue-600);
  box-shadow: inset 0 0 0 1px var(--color-blue-600), var(--shadow-sm);
}

.gmn-card__what {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-700);
}

.gmn-list {
  list-style: disc;
  padding-left: 1.15em;
  display: grid;
  gap: var(--space-1);
  color: var(--color-gray-700);
}

.gmn-small {
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
}

/* ---------- O que o cliente vê ----------
   Print do quadro (menor) + lista numerada na mesma ordem do print;
   abaixo, os dois prints do app em cartões com título e texto. */

.gmn-anatomy {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 861px) {
  .gmn-anatomy {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-7);
  }
}

.gmn-anatomy__figure {
  max-width: 260px;
}

.gmn-anatomy__text {
  min-width: 0;
}

.gmn-anatomy__lead {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-blue-900);
}

.gmn-shot {
  margin: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}

/* Lista numerada: o número liga cada item à parte do print. */
.gmn-parts {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  counter-reset: gmn-parte;
}

.gmn-parts li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  counter-increment: gmn-parte;
}

.gmn-parts li::before {
  content: counter(gmn-parte);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

.gmn-parts strong {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-blue-900);
}

.gmn-parts span {
  color: var(--color-gray-700);
  line-height: var(--lh-relaxed);
}

.gmn-figure {
  margin: 0;
}

.gmn-figure figcaption {
  margin-top: var(--space-3);
  color: var(--color-gray-700);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ---------- E no app do Google Maps ---------- */

.gmn-app {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-gray-200);
}

.gmn-app__title {
  margin-bottom: var(--space-3);
}

.gmn-app__lead {
  margin-bottom: var(--space-6);
  color: var(--color-gray-700);
  line-height: var(--lh-relaxed);
}

.gmn-extras {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 861px) {
  .gmn-extras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gmn-extra {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

/* Print pequeno à esquerda, texto à direita (a partir de tablet). */
@media (min-width: 560px) {
  .gmn-extra {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

.gmn-extra__shot {
  max-width: 200px;
}

.gmn-extra__text {
  min-width: 0;
}

.gmn-extra__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-md);
}

.gmn-extra__text p {
  color: var(--color-gray-700);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ---------- Por que vale a pena ---------- */

.gmn-why {
  display: grid;
  gap: var(--space-6) var(--space-7);
  margin: 0;
}

@media (min-width: 861px) {
  .gmn-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gmn-why dt {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--color-blue-900);
  margin-bottom: var(--space-2);
}

.gmn-why dd {
  margin: 0;
  color: var(--color-gray-700);
  line-height: var(--lh-relaxed);
}

.gmn-quote {
  max-width: 40em;
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: var(--color-gray-100);
  border-left: 4px solid var(--color-blue-600);
  border-radius: var(--radius-md);
}

.gmn-quote p {
  font-style: italic;
}

.gmn-quote cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
}

/* ---------- Passo a passo (complementa .step / .process-steps) ---------- */

.gmn-step {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.gmn-step .step__title {
  margin-bottom: 0;
}

.gmn-tip {
  padding: var(--space-3) var(--space-4);
  background: var(--color-blue-100);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.gmn-step code,
.gmn-hero code {
  font-size: 0.92em;
  background: var(--color-blue-100);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* ---------- Avaliações ---------- */

.gmn-rules {
  list-style: disc;
  padding-left: 1.15em;
  display: grid;
  gap: var(--space-2);
  max-width: 40em;
  line-height: var(--lh-relaxed);
}

.gmn-rules li::marker {
  color: var(--color-blue-600);
}

.gmn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
}

@media (max-width: 479px) {
  .gmn-row .btn {
    width: 100%;
    justify-content: center;
  }
}