/* ============================================================
   COMPONENTS — botões, cards, formulários, badges, padrões
   ============================================================ */

/* --- Botões --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 52px; padding-inline: var(--space-8);
  font-weight: 600; font-size: var(--fs-base); line-height: 1;
  border-radius: var(--radius-sm); white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }

.btn--primary { background: var(--color-brand); color: #fff; }
.btn--primary:hover { background: var(--color-brand-dark); box-shadow: 0 10px 24px rgba(27, 64, 91, 0.28); }

.btn--white { background: #fff; color: var(--color-brand); }
.btn--white:hover { box-shadow: 0 10px 24px rgba(10, 27, 40, 0.35); }

.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.8); }

.btn--outline { background: transparent; color: var(--color-brand); box-shadow: inset 0 0 0 1.5px var(--color-border); }
.btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--color-brand); }

.btn--sm { height: 44px; padding-inline: var(--space-6); font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* --- Link de texto com seta --- */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; color: var(--color-brand);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { color: var(--color-brand-dark); }

/* --- Badge / pill --- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600;
  background: var(--color-brand-soft); color: var(--color-brand);
}
.badge--accent { background: var(--color-accent-soft); color: var(--color-accent); }
.badge--on-dark { background: rgba(255,255,255,0.10); color: var(--color-accent-light); }
.badge svg { width: 16px; height: 16px; }

/* Chip discreto "em preparação" */
.chip-soon {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--color-accent-soft); color: var(--color-accent);
}
.chip-soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

/* --- Card genérico --- */
.card {
  background: var(--color-white); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: var(--space-8);
  transition: transform var(--t-base), box-shadow var(--t-base);
  border: 1px solid var(--color-border);
}

/* --- Icon tile --- */
.icon-tile {
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  display: grid; place-items: center; margin-bottom: var(--space-5);
  background: var(--color-brand-soft); color: var(--color-brand);
}
.icon-tile svg { width: 26px; height: 26px; }
.icon-tile--dark { background: rgba(255,255,255,0.08); color: var(--color-accent-light); }

/* --- Card de serviço --- */
.service-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-8);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  height: 100%;
}
.service-card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
  border-radius: var(--radius) var(--radius) 0 0;
  transition: width var(--t-base);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::after { width: 100%; }
.service-card__title { margin-bottom: var(--space-2); }
.service-card__text { font-size: var(--fs-sm); margin-bottom: var(--space-6); flex: 1; }
.service-card .link-arrow { margin-top: auto; }

/* --- Card de parceiro (seguradoras) --- */
.partner-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-8);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.partner-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.partner-card__name { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.partner-card__tag { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: var(--space-4); }
.partner-card__text { font-size: var(--fs-sm); margin-bottom: var(--space-6); flex: 1; }

/* --- Item de benefício --- */
.benefit { display: flex; gap: var(--space-4); }
.benefit__icon {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--color-brand-soft); color: var(--color-brand);
  display: grid; place-items: center;
}
.benefit__icon svg { width: 22px; height: 22px; }
.benefit__title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-1); }
.benefit__text { font-size: var(--fs-sm); }

/* --- Lista de verificação (vantagens, requisitos…) --- */
.check-list { display: grid; gap: var(--space-4); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-secondary); }
.check-list li svg { width: 20px; height: 20px; color: var(--color-brand); flex: none; margin-top: 3px; }
.check-list--on-dark li { color: var(--color-text-on-dark); }
.check-list--on-dark li svg { color: var(--color-accent-light); }

/* --- Passos do processo --- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); counter-reset: step; }
.step { position: relative; padding: var(--space-8); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); }
.step__num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 2.6rem; line-height: 1; color: var(--color-accent);
  display: block; margin-bottom: var(--space-4);
}
.step__title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--space-2); }
.step p { font-size: var(--fs-sm); }
.steps--on-dark .step { background: rgba(255,255,255,0.04); border-color: var(--color-border-dark); }
.steps--on-dark .step__title { color: #fff; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* --- Formulários --- */
.field { margin-bottom: var(--space-5); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-2); }
.field label .req { color: var(--color-accent); }
.input, .textarea, .select {
  width: 100%; height: 52px; padding: 0 var(--space-4);
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { height: auto; min-height: 140px; padding: var(--space-4); resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234C5F6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-soft); }
.field--error .input, .field--error .textarea { border-color: var(--color-error); }
.field__error { display: none; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--color-error); }
.field--error .field__error { display: block; }
.field--check { display: flex; gap: var(--space-3); align-items: flex-start; }
.field--check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--color-brand); flex: none; }
.field--check label { font-weight: 400; font-size: var(--fs-sm); color: var(--color-text-secondary); margin: 0; }
.form-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.form-status { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500; display: none; }
.form-status--ok { display: block; background: var(--color-brand-soft); color: var(--color-brand); }
.form-status--err { display: block; background: #FAEAE8; color: var(--color-error); }

/* honeypot — campo anti-spam visualmente escondido */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- FAQ --- */
.faq { max-width: var(--container-narrow); margin-inline: auto; display: grid; gap: var(--space-3); }
.faq__item { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); overflow: hidden; transition: box-shadow var(--t-base); }
.faq__item:has(.faq__q[aria-expanded="true"]) { box-shadow: var(--shadow-sm); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); text-align: left;
  font-weight: 600; font-size: var(--fs-base); color: var(--color-text-primary);
}
.faq__q svg { width: 18px; height: 18px; color: var(--color-brand); transition: transform var(--t-base); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--t-base); }
.faq__a-inner { padding: 0 var(--space-6) var(--space-6); color: var(--color-text-secondary); font-size: var(--fs-sm); line-height: 1.7; }

/* --- Localização / mapa --- */
.location { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .location { grid-template-columns: 1fr; } }

/* Placeholder preparado para o embed do Google Maps: quando existir o link,
   substituir o conteúdo de .map-panel pelo <iframe> (ver TODO no HTML). */
.map-panel {
  position: relative; aspect-ratio: 16 / 11; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  background: var(--color-brand-tint); box-shadow: var(--shadow-sm);
}
.map-panel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-panel__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: var(--space-8);
}
.map-panel__placeholder svg { width: 44px; height: 44px; color: var(--color-brand); margin-inline: auto; margin-bottom: var(--space-4); }
.map-panel__placeholder strong { display: block; color: var(--color-text-primary); margin-bottom: var(--space-2); }
.map-panel__placeholder p { font-size: var(--fs-sm); color: var(--color-text-secondary); max-width: 36ch; margin-inline: auto; }

/* Faixa compacta de localização (homepage) */
.location-band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); flex-wrap: wrap;
  margin-top: var(--space-10); padding: var(--space-6) var(--space-8);
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.location-band__text { display: flex; align-items: center; gap: var(--space-4); }
.location-band__icon {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--color-brand-soft); color: var(--color-brand);
  display: grid; place-items: center;
}
.location-band__icon svg { width: 22px; height: 22px; }
.location-band strong { display: block; font-size: var(--fs-base); }
.location-band span { font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* --- Nota informativa / legal --- */
.notice {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5) var(--space-6);
  background: var(--color-brand-tint); border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: 1.7;
}
.notice svg { width: 20px; height: 20px; color: var(--color-brand); flex: none; margin-top: 3px; }
.notice strong { color: var(--color-brand); }

/* --- Animação de revelação (JS alterna .is-visible) --- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Skeleton (placeholders da área imobiliária) --- */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--color-surface-light); border-radius: var(--radius-sm);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: shimmer 1.8s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* --- Barra fixa de contacto (apenas telemóvel) --- */
.mobile-cta { display: none; }
@media (max-width: 560px) {
  /* espaço para a barra não tapar o fim do conteúdo */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .mobile-cta {
    display: flex; gap: var(--space-3);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 24px rgba(15, 38, 56, 0.10);
    transform: translateY(110%);
    transition: transform var(--t-base);
  }
  .mobile-cta.is-visible { transform: none; }
  .mobile-cta__btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2); height: 48px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: var(--fs-base);
  }
  .mobile-cta__btn svg { width: 20px; height: 20px; }
  .mobile-cta__btn--call { background: var(--color-brand); color: #fff; }
  .mobile-cta__btn--book { background: var(--color-brand-deep); color: #fff; }
}