/* ==========================================================================
   SERVIÇOS — específico das páginas de plano (landing-page/,
   site-institucional/, projeto-personalizado/). Reutiliza .steps__list,
   .pricing-card, .faq-list e .cta-final já existentes em home.css/components.css.
   Índice:
   01. Preço e condição dentro do page-hero
   02. Estrutura sugerida (numeração de seções)
   03. Adicionais (cards de upsell)
   04. Possibilidades (Projeto Personalizado)
   05. Condições (Projeto Personalizado)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Preço e condição dentro do page-hero
   -------------------------------------------------------------------------- */
.page-hero__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background-color: rgba(217, 169, 78, 0.12);
  border: 1px solid rgba(217, 169, 78, 0.35);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-3);
}

.page-hero__price strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--color-gold);
}

.page-hero__condition {
  color: var(--color-text-on-navy-muted);
  font-size: 0.88rem;
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   01b. Composições de mockup específicas por serviço (hero de cada página)
   Reutiliza .mockup/.mockup__nav/.mockup__hero/.mockup__line/.mockup__cta/
   .mockup__services/.mockup__service-card/.mockup__contact/.mockup--card
   já definidos em home.css — aqui só o que é exclusivo de cada composição.
   -------------------------------------------------------------------------- */

/* Landing Page Express: benefícios + selo de confiança + formulário */
.mockup__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-3);
}

.mockup__benefit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mockup__check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgba(217, 169, 78, 0.16);
  position: relative;
}

.mockup__check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--color-gold-dark);
  border-bottom: 1.5px solid var(--color-gold-dark);
  transform: translate(-60%, -65%) rotate(-45deg);
}

.mockup__benefit-line {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--color-offwhite-2);
}

.mockup__benefit-line--short {
  flex: 0 0 60%;
}

.mockup__trust-badge .mockup__line {
  flex: 1;
}

.mockup__trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-5) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--color-offwhite);
  border: 1px solid var(--color-border);
}

.mockup__trust-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

.mockup__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 var(--space-5) var(--space-5);
}

.mockup__form-field {
  height: 16px;
  border-radius: var(--radius-sm);
  background-color: var(--color-offwhite-2);
}

.mockup__form-button {
  height: 24px;
  margin-top: var(--space-1);
  border-radius: var(--radius-pill);
  background: linear-gradient(120deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
}

/* Site Essencial: depoimento em destaque */
.mockup__testimonial {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-5) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-offwhite);
  border-left: 2px solid var(--color-gold);
}

.mockup__quote-mark {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-gold-dark);
  line-height: 1;
}

/* Projeto Personalizado: módulos + painel técnico */
.mockup__modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.mockup__module {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: var(--radius-sm);
  background-color: var(--color-offwhite);
  border: 1px solid var(--color-border);
  color: var(--color-gold-dark);
}

.mockup__module svg {
  width: 20px;
  height: 20px;
}

.mockup__panel {
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-600) 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mockup__panel-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mockup__panel-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

.mockup__panel .mockup__line {
  background-color: rgba(247, 245, 241, 0.16);
}

.mockup__panel-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
  margin-top: var(--space-1);
}

.mockup__panel-bars span {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background-color: var(--color-gold);
  opacity: 0.85;
}

.mockup__panel-bars span:nth-child(1) { height: 55%; }
.mockup__panel-bars span:nth-child(2) { height: 85%; }
.mockup__panel-bars span:nth-child(3) { height: 65%; }
.mockup__panel-bars span:nth-child(4) { height: 100%; }

/* --------------------------------------------------------------------------
   01c. "Como funciona" — linha de conexão decorativa entre as etapas
   (somente nas páginas de serviço, apenas no desktop; classe adicionada
   apenas onde pedido — não afeta a Home, que reutiliza .steps__list sem
   este modificador).
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* .steps__list usa 4 colunas — com 6 etapas, a lista quebra em duas
     linhas visuais (4 + 2). Por isso a conexão é feita item a item (ligando
     cada etapa à seguinte dentro da mesma linha), em vez de uma única barra
     horizontal que não acompanharia a quebra. */
  .steps__list--connected .steps__item {
    position: relative;
    z-index: 1;
  }

  .steps__list--connected .steps__item:not(:nth-child(4n)):not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--space-6) + 21px);
    left: 100%;
    width: var(--space-6);
    height: 0;
    border-top: 2px dashed var(--color-border);
    z-index: 0;
  }
}

/* --------------------------------------------------------------------------
   02. Estrutura sugerida (numeração de seções)
   -------------------------------------------------------------------------- */
.structure-list {
  display: grid;
  gap: var(--space-3);
  counter-reset: structure;
  max-width: 640px;
}

.structure-list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  counter-increment: structure;
  font-weight: 600;
  color: var(--color-text);
}

.structure-list li::before {
  content: counter(structure);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-gold);
  font-size: 0.85rem;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   03. Adicionais (cards de upsell)
   -------------------------------------------------------------------------- */
.addon-grid {
  display: grid;
  gap: var(--space-5);
}

.addon-card {
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.addon-card__tag {
  align-self: flex-start;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.addon-card__tag--upgrade {
  background-color: rgba(217, 169, 78, 0.12);
  color: var(--color-gold-dark);
}

.addon-card__tag--recurring {
  background-color: rgba(18, 48, 99, 0.08);
  color: var(--color-navy-600);
}

.addon-card__tag--technical {
  background-color: var(--color-offwhite);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.addon-card__name {
  font-size: 1rem;
}

.addon-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--color-navy);
}

.addon-card__price span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.addon-card p {
  font-size: 0.9rem;
}

.addon-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.addon-card__list li {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  padding-left: var(--space-4);
  position: relative;
}

.addon-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

@media (min-width: 640px) {
  .addon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .addon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   04. Possibilidades (Projeto Personalizado)
   -------------------------------------------------------------------------- */
.possibilities-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}

.possibilities-grid li {
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
}

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

@media (max-width: 639px) {
  .possibilities-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   05. Condições (Projeto Personalizado)
   -------------------------------------------------------------------------- */
.conditions-list {
  display: grid;
  gap: var(--space-3);
  max-width: 640px;
  margin-inline: auto;
}

.conditions-list li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-size: 0.94rem;
  color: var(--color-text);
}

.conditions-list svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-gold-dark);
}