/* ===========================================================
   PÁGINAS INSTITUCIONAIS (sobre nós, como cuidamos)
   Reaproveita os blocos de unidade.css no verde do grupo.
   =========================================================== */

/* ---------- as cinco villas em atalho ---------- */
.villas__grid {
  display: grid; gap: var(--sp-5); margin-block-start: var(--sp-12);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.villa-chip {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4);
  padding: var(--sp-6); border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--c-line);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease-out-soft), box-shadow 480ms var(--ease-out-soft),
              border-color var(--dur) var(--ease);
}
.villa-chip:hover, .villa-chip:focus-visible {
  transform: translateY(-4px);
  border-color: rgb(var(--u-rgb) / .5);
  box-shadow: 0 2px 4px rgb(20 24 21 / .04), 0 18px 44px rgb(var(--u-rgb) / .20);
}
.villa-chip img {
  /* altura fixa: as logos têm proporções diferentes e, com largura fixa,
     as de nome curto (Buriti, Solar) ficavam mais altas que as demais */
  height: 46px; width: auto; max-width: 100%; object-fit: contain;
}
.villa-chip__sub { font-size: .9375rem; color: var(--c-ink-500); line-height: 1.35; text-wrap: balance; }

/* ---------- nossa essência ---------- */
.essencia { background: var(--c-bg-deep); color: #fff; position: relative; overflow: hidden; }
.essencia::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-block-start: -20%; inset-inline-end: -8%;
  width: min(48%, 640px); aspect-ratio: 1287 / 1037;
  background: url("/assets/img/grafismos/rosa.webp") no-repeat center / contain;
  filter: brightness(0) invert(1); opacity: .14;
}
.essencia__conteudo {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-5);
  max-width: 60ch; margin-inline: auto; text-align: center; align-items: center;
}
.essencia .eyebrow { color: var(--c-lime-400); }
.essencia__frase {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); line-height: 1.2;
  letter-spacing: -.02em; color: #fff; text-wrap: balance;
}
.essencia .lead, .essencia p { color: rgb(255 255 255 / .82); }
.essencia__claim {
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400;
  line-height: 1.35; color: var(--c-lime-400) !important; text-wrap: balance;
}

/* ---------- princípios (cinco itens) ---------- */
.principios { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; margin-block-start: var(--sp-12); }
@media (min-width: 640px)  { .principios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .principios { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .principios { grid-template-columns: repeat(5, 1fr); } }

/* ---------- compromisso: três cards ---------- */
@media (min-width: 900px) {
  .u-perfil__cards--tres { grid-template-columns: repeat(3, 1fr); max-width: 72rem; }
}

.u-cta .fechamento__slogan { width: min(360px, 72vw); margin-inline: auto; }
.essencia .btn-row, .villas .btn-row { justify-content: center; width: 100%; }

/* ---------- variação: degradê na seção, card em vidro ---------- */
.u-perfil--degrade {
  background: linear-gradient(135deg, var(--brand-claro) 0%, var(--brand-escuro) 100%);
  color: #fff;
}
.u-perfil--degrade h2,
.u-perfil--degrade .lead,
.u-perfil--degrade p { color: #fff; }
.u-perfil--degrade .lead { color: rgb(255 255 255 / .88); }
.u-perfil--degrade .eyebrow { color: var(--c-lime-400); }

.u-perfil--degrade .u-perfil__card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-glass);
  color: var(--c-ink-900);
}
.u-perfil--degrade .u-perfil__card h3 { color: var(--c-ink-900); }
.u-perfil--degrade .u-perfil__card p  { color: var(--c-ink-700); }
.u-perfil--degrade .u-perfil__icone {
  background: var(--brand); color: #fff; border: 0;
  box-shadow: 0 6px 18px rgb(var(--brand-rgb) / .32);
}
.u-perfil--degrade .btn--primary { background: #fff; color: var(--c-grupo-700); box-shadow: var(--sh-md); }
.u-perfil--degrade .btn--primary:hover { background: var(--c-lime-400); color: var(--c-ink-900); }

@supports not (backdrop-filter: blur(2px)) {
  .u-perfil--degrade .u-perfil__card { background: rgb(255 255 255 / .94); }
}
@media (prefers-reduced-transparency: reduce) {
  .u-perfil--degrade .u-perfil__card { background: rgb(255 255 255 / .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- mapa das unidades ---------- */
.mapa__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; margin-block-start: var(--sp-12); }
@media (min-width: 900px) { .mapa__grid { grid-template-columns: 360px minmax(0, 1fr); align-items: stretch; } }
.mapa__abas { display: flex; flex-direction: column; gap: var(--sp-3); }
.mapa__aba {
  display: grid; grid-template-columns: 12px 1fr; column-gap: var(--sp-3); align-items: center;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink-900);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-out-soft);
}
.mapa__aba:hover { border-color: rgb(var(--u-rgb) / .6); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.mapa__aba.is-ativa { border-color: rgb(var(--u-rgb)); box-shadow: 0 0 0 3px rgb(var(--u-rgb) / .18), var(--sh-sm); }
.mapa__cor { width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--u-rgb)); grid-row: 1 / 3; }
.mapa__nome { font-family: var(--font-display); font-weight: 500; }
.mapa__endereco { grid-column: 2; font-size: .875rem; color: var(--c-ink-500); }
.mapa__quadro { position: relative; min-height: 380px; border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-grupo-100); }
.mapa__quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__rota { position: absolute; inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4); }
@media (max-width: 899px) { .mapa__abas { flex-direction: row; overflow-x: auto; padding-block-end: var(--sp-2); }
  .mapa__aba { flex: 0 0 240px; } .mapa__quadro { min-height: 320px; } }

/* página de uma unidade: só o mapa, mais baixo */
.mapa__grid--uma { grid-template-columns: 1fr; }
.mapa__grid--uma .mapa__quadro { min-height: 420px; }

/* ---------- perguntas frequentes ---------- */
.faq .container { max-width: 56rem; }
.faq__lista { display: flex; flex-direction: column; gap: var(--sp-3); margin-block-start: var(--sp-12); }
.faq__item {
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body:not(.js) .faq__item[open] { border-color: var(--c-grupo-300); box-shadow: var(--sh-sm); }
.faq__pergunta {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.4;
  color: var(--c-ink-900);
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:hover { color: var(--c-grupo-700); }
/* sinal de + que vira − ao abrir */
.faq__sinal { flex: none; margin-block-start: 2px; color: var(--c-grupo-700); }
.faq__sinal line { stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  transform-origin: 10px 10px; transition: transform 280ms var(--ease-out-soft), opacity 200ms var(--ease); }
body:not(.js) .faq__item[open] .faq__sinal-v,
body.js .faq__item.is-aberto .faq__sinal-v { transform: rotate(90deg); opacity: 0; }

body.js .faq__item.is-aberto { border-color: var(--c-grupo-300); box-shadow: var(--sh-sm); }
/* a resposta abre e fecha com altura animada: o <details> fica sempre "open"
   enquanto o JS controla a altura; sem JS, o comportamento nativo continua. */
.faq__resposta { color: var(--c-ink-700); }
.faq__resposta-interno {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: 0 var(--sp-6) var(--sp-6);
}
body.js .faq__resposta {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows 320ms var(--ease-out-soft), opacity 240ms var(--ease);
  opacity: 0;
}
/* a caixa intermediária existe para o padding não impedir o colapso da linha */
body.js .faq__resposta > .faq__resposta-caixa { min-height: 0; overflow: hidden; }
body.js .faq__item.is-aberto .faq__resposta { grid-template-rows: 1fr; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .faq__resposta { transition: none; }
}
.faq__resposta strong { color: var(--c-ink-900); font-weight: 600; }
.faq__resposta .btn { align-self: flex-start; margin-block-start: var(--sp-2); }