/* ============================================================
   ALMOBI DESIGN — classes do site, construídas sobre os tokens
   do tema Nectar "almobi" (Honey & Slate).
   Complementa: reset, classless, elements, components, layout,
   utilities.
   ============================================================ */

/* ---------- Página / container ---------- */
.almobi-page { background: var(--bg-surface); color: var(--text-main); min-height: 100vh; display: flex; flex-direction: column; }
.almobi-page > footer.almobi-footer { margin-top: auto; }
.almobi-container { max-width: 1440px; width: 100%; margin-inline: auto; padding-inline: 48px; box-sizing: border-box; }

/* ---------- Faixa de topo ---------- */
.almobi-topbar { background: var(--slate-900); color: var(--text-inverted); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 48px; font-size: var(--text-sm); font-weight: var(--font-weight-bold); }
.almobi-topbar svg { flex: none; }
.almobi-highlight { color: var(--honey-400); }

/* ---------- Cabeçalho / navegação ---------- */
header.almobi-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 48px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.almobi-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 32px; }
.almobi-nav-link { text-decoration: none; color: var(--text-muted); font-weight: var(--font-weight-semibold); font-size: 15px; }
.almobi-nav-link:hover { color: var(--text-main); text-decoration: none; }
.almobi-nav-link.is-active { color: var(--slate-900); font-weight: var(--font-weight-heavy); border-bottom: 2px solid var(--color-primary); padding-bottom: 2px; }

/* ---------- Logo (lockup em CSS) ---------- */
.almobi-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.almobi-logo:hover { text-decoration: none; }
.almobi-logo-mark { width: 42px; height: 42px; border: 3px solid var(--slate-900); display: flex; align-items: flex-end; justify-content: center; box-sizing: border-box; }
.almobi-logo-mark span { font-weight: var(--font-weight-heavy); font-size: 28px; line-height: 0.92; color: #dd8420; }
.almobi-logo-img { height: 42px; width: auto; max-width: 200px; display: block; }
.almobi-logo-name { display: flex; flex-direction: column; gap: 1px; }
.almobi-logo-name b { font-weight: var(--font-weight-heavy); letter-spacing: 0.14em; font-size: 17px; color: var(--slate-900); line-height: 1; }
.almobi-logo-name small { font-weight: var(--font-weight-semibold); letter-spacing: 0.44em; font-size: 10px; color: var(--slate-700); line-height: 1; }
.almobi-logo--light .almobi-logo-mark { border-color: var(--text-inverted); }
.almobi-logo--light .almobi-logo-name b { color: var(--text-inverted); }
.almobi-logo--light .almobi-logo-name small { color: var(--slate-400); }

/* ---------- Tipografia de marketing ---------- */
.almobi-eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: var(--font-weight-heavy); color: var(--color-primary-text); }
.almobi-display { margin: 0; font-size: 50px; line-height: 1.12; letter-spacing: -0.018em; font-weight: var(--font-weight-heavy); color: var(--slate-900); text-wrap: pretty; }
.almobi-display--md { font-size: 44px; }
.almobi-lead { margin: 0; font-size: 18px; line-height: var(--leading-base); color: var(--text-muted); }
.almobi-section-title { margin: 0; font-size: var(--text-2xl); font-weight: var(--font-weight-heavy); letter-spacing: -0.018em; color: var(--slate-900); }
.almobi-link-underline { text-decoration: none; color: var(--slate-900); font-weight: var(--font-weight-bold); font-size: 15px; border-bottom: 2px solid var(--color-primary); width: fit-content; padding-bottom: 2px; }
.almobi-link-underline:hover { text-decoration: none; color: var(--honey-700); }
.almobi-note { margin: 14px 0 0; font-size: 13px; color: var(--slate-400); }

/* ---------- Hero ---------- */
.almobi-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-block: 60px 64px; }
.almobi-check { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--slate-600); }
.almobi-check svg { flex: none; }

/* ---------- Imagens / espaços de foto ---------- */
.almobi-img { display: block; width: 100%; object-fit: cover; border-radius: var(--radius-lg); background: var(--slate-100); }
.almobi-img--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--slate-400); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); border: 1px dashed var(--slate-300); box-sizing: border-box; }
.almobi-slot-hero { height: 470px; border-radius: var(--radius-xl); }
.almobi-slot-card { height: 240px; }
.almobi-slot-photo { height: 300px; border-radius: var(--radius-xl); }
.almobi-slot-tall { height: 420px; border-radius: var(--radius-xl); }
.almobi-slot-project { height: 340px; }
.almobi-slot-mid { height: 260px; }

/* ---------- Seções ---------- */
.almobi-section { padding-block: 56px; }
.almobi-section--lg { padding-block: 64px; }
.almobi-band { background: var(--slate-50); border-top: 1px solid var(--border-subtle); }
.almobi-band--bottom { border-bottom: 1px solid var(--border-subtle); }

/* ---------- Botões (complementos ao .btn do framework) ---------- */
.btn-hero { padding: 15px 28px; font-size: 17px; font-weight: var(--font-weight-heavy); box-shadow: var(--shadow-md); white-space: nowrap; gap: 10px; }
.btn-honey { background-color: var(--color-primary); color: var(--color-primary-fg); border-color: transparent; }
.btn-honey:hover:not(:disabled) { background-color: var(--color-primary-hover); color: var(--color-primary-fg); }

/* ---------- Passos ("Como funciona") ---------- */
.almobi-step { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); }
.almobi-step--highlight { background: var(--honey-50); }
.almobi-step-num { font-weight: var(--font-weight-heavy); font-size: var(--text-xl); color: var(--color-primary-text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.almobi-step-title { font-weight: var(--font-weight-heavy); font-size: 17px; color: var(--slate-900); }
.almobi-step-text { font-size: 15px; line-height: 1.5; color: var(--text-muted); }

/* ---------- Cartão de projeto ---------- */
.almobi-project { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.almobi-project:hover { text-decoration: none; }
.almobi-project-title { font-weight: var(--font-weight-bold); font-size: 15px; color: var(--text-main); }
.almobi-project-title--lg { font-size: 19px; font-weight: var(--font-weight-heavy); color: var(--slate-900); }
.almobi-project-city { font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--slate-400); }
.almobi-project-desc { font-size: 15px; line-height: 1.5; color: var(--text-muted); }

/* ---------- Banda de CTA escura ---------- */
.almobi-cta { padding: 52px 56px; background: var(--slate-900); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.almobi-cta h2 { margin: 0; font-size: 32px; font-weight: var(--font-weight-heavy); letter-spacing: -0.018em; color: var(--text-inverted); text-wrap: pretty; }
.almobi-cta p { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); color: var(--slate-400); max-width: 52ch; }
.almobi-cta-ghost { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--text-inverted); font-weight: var(--font-weight-bold); font-size: 15px; white-space: nowrap; }
.almobi-cta-ghost:hover { text-decoration: none; color: var(--honey-300); }

/* ---------- Instagram ---------- */
.almobi-insta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.almobi-insta-tile { aspect-ratio: 1; background: var(--slate-100); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.almobi-insta-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
a.almobi-insta-tile:hover img { transform: scale(1.04); }
.almobi-follow-pill { white-space: nowrap; text-decoration: none; border: 1.5px solid var(--border-base); color: var(--text-main); font-weight: var(--font-weight-bold); font-size: var(--text-sm); padding: 9px 18px; border-radius: var(--radius-pill); }
.almobi-follow-pill:hover { border-color: var(--color-primary); text-decoration: none; }

/* ---------- Cartões de contato ---------- */
.almobi-contact-card { display: flex; align-items: center; gap: 16px; padding: 24px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); text-decoration: none; box-shadow: var(--shadow-xs); background: var(--bg-surface); }
a.almobi-contact-card:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.almobi-contact-card--muted { background: var(--slate-50); box-shadow: none; }
.almobi-contact-icon { flex: none; width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.almobi-contact-title { font-weight: var(--font-weight-heavy); font-size: var(--text-base); color: var(--slate-900); }
.almobi-contact-sub { font-size: 15px; color: var(--text-muted); }

/* ---------- Rodapé ---------- */
.almobi-footer { background: var(--slate-900); color: var(--text-inverted); position: relative; overflow: hidden; }
.almobi-footer-watermark { position: absolute; right: -30px; bottom: -150px; font-size: 440px; font-weight: var(--font-weight-heavy); line-height: 1; color: var(--slate-800); user-select: none; pointer-events: none; }
.almobi-footer-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px 56px; padding-block: 64px 40px; align-items: start; }
.almobi-footer-col { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.almobi-footer-col--brand { gap: 18px; grid-column: span 2; }
.almobi-footer-heading { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: var(--font-weight-heavy); color: var(--honey-400); }
.almobi-footer-link { display: flex; align-items: center; gap: 10px; color: var(--slate-300); text-decoration: none; width: fit-content; }
.almobi-footer-link:hover { color: var(--text-inverted); text-decoration: none; }
.almobi-footer-link--cta { color: var(--honey-400); font-weight: var(--font-weight-heavy); }
.almobi-footer-link--cta:hover { color: var(--honey-300); }
.almobi-footer-desc { margin: 0; font-size: 15px; line-height: 1.6; color: var(--slate-400); max-width: 34ch; }
.almobi-footer-note { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--slate-500); }
.almobi-footer-place { display: flex; align-items: center; gap: 10px; color: var(--slate-300); }
.almobi-social-btn { width: 42px; height: 42px; border: 1.5px solid var(--slate-600); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.almobi-social-btn:hover { border-color: var(--color-primary); }
.almobi-footer-bottom { grid-column: 1 / -1; position: relative; border-top: 1px solid var(--slate-700); margin-top: 8px; }
.almobi-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; font-size: 13.5px; color: var(--slate-500); }

/* ---------- Grids: deixa itens encolherem ---------- */
.quartet > *, .split > *, .trio > * { min-width: 0; }

/* .split/.trio do framework têm max-width centralizado — dentro do
   container do site isso desalinha a grade do texto. Alinha à esquerda. */
.almobi-container .split, .almobi-container .trio {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- Grade da página de contato ---------- */
.almobi-contact-grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: 56px; align-items: start; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .almobi-container, header.almobi-header, .almobi-topbar { padding-inline: 24px; }
  .almobi-topbar { text-align: center; }
  .almobi-hero { grid-template-columns: 1fr; gap: 32px; }
  .almobi-display { font-size: 38px; }
  .almobi-display--md { font-size: 34px; }
  .almobi-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .almobi-insta-grid { grid-template-columns: repeat(2, 1fr); }
  .almobi-cta { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
  .almobi-nav { gap: 18px; }
  .almobi-contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .almobi-slot-hero { height: 320px; }
  .almobi-footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 560px) {
  .almobi-footer-grid { grid-template-columns: 1fr; }
  .almobi-hero { padding-block: 36px 44px; }
  .almobi-section, .almobi-section--lg { padding-block: 40px; }
}

/* ============================================================
   Generic page-builder blocks (section/columns/card/row + leaves)
   ============================================================ */
.blk-section { padding-block: 48px; }
.blk-section.pad-sm { padding-block: 24px; }
.blk-section.pad-lg { padding-block: 76px; }
.blk-section.bg-soft { background: var(--honey-50); }
.blk-section.bg-honey { background: var(--honey-500); color: var(--honey-ink); }
.blk-section.bg-dark { background: var(--slate-900); color: #fff; }
.blk-section.bg-dark :is(h1, h2, h3, h4, p, .almobi-lead, figcaption) { color: inherit; }
.blk-section.bg-dark .almobi-eyebrow { color: var(--honey-300); }
.blk-section.align-center { text-align: center; }
.blk-inner--wide { max-width: 1180px; }
.blk-inner--full { max-width: none; }

.blk-columns { display: grid; gap: 28px; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); align-items: stretch; }
.blk-columns.gap-sm { gap: 16px; }
.blk-columns.gap-lg { gap: 44px; }

.blk-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.blk-row.gap-sm { gap: 8px; }
.blk-row.gap-lg { gap: 28px; }
.blk-row.j-center { justify-content: center; }
.blk-row.j-between { justify-content: space-between; }

.blk-card { border-radius: 16px; padding: 28px; height: 100%; }
.blk-card.pad-sm { padding: 18px; }
.blk-card.pad-lg { padding: 40px; }
.blk-card.bordered { border: 1px solid var(--slate-200); background: #fff; }
.blk-card.elevated { border: 1px solid var(--slate-100); background: #fff; box-shadow: var(--shadow-md, 0 6px 20px -6px rgba(29,35,44,.12)); }
.blk-card.soft { background: var(--honey-50); }

.blk-heading .almobi-lead { max-width: 60ch; }
.blk-text { line-height: 1.7; }
.blk-text .ed-rich { line-height: 1.7; }
.rich-content a { color: var(--honey-700); text-decoration: underline; }
.rich-content strong, .rich-content b { font-weight: 700; }
.rich-content em, .rich-content i { font-style: italic; }
.rich-content ul, .rich-content ol { padding-left: 1.4em; }
.blk-image img { width: 100%; border-radius: 14px; display: block; }
.blk-table table { width: 100%; border-collapse: collapse; }
.blk-table th, .blk-table td { border: 1px solid var(--slate-200); padding: 10px 14px; text-align: left; vertical-align: top; }
.blk-table th { background: var(--slate-50); font-weight: 700; }
.blk-table figcaption { text-align: center; }

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