/* ==========================================================================
   Sobre / Contato — only enqueued on those two pages (see inc/enqueue.php).
   ========================================================================== */

/* ---------- hero band (shorter than the Home hero) ---------- */
.inst-hero{ position:relative; height: clamp(320px, 46vw, 480px); text-align:center; overflow:hidden; }
.inst-hero .scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(15,13,10,0.35) 0%, rgba(15,13,10,0.55) 100%); }
.inst-hero-inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#F3EBDF; padding: 1.5rem; }
.inst-hero-inner .eyebrow{ color: rgba(243,235,223,0.75); }
.inst-hero-inner h1{ font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight:600; font-variation-settings:'wght' 600; letter-spacing:-0.01em; margin-top:0.6rem; max-width:16ch; }

/* ---------- split section (image + text, reused twice with .reverse) ----------
   Photos were 4/5 (tall) inside a full-width 1fr column of an up-to-1440px
   section — on any reasonably wide screen that's a genuinely huge photo,
   and every section on this page still carries the sitewide generic
   `section{ padding: clamp(2.4rem,6vw,4rem) }` on top of each other with no
   margin-collapse between them, so the gaps between blocks stack up too.
   Capping this section's own width and using a shorter ratio addresses the
   "fotos grandes" half; .inst-section below tightens the padding stacking
   for the "muito espaço" half. */
.inst-section{ padding-top: clamp(1.6rem, 3vw, 2.4rem) !important; padding-bottom: clamp(1.6rem, 3vw, 2.4rem) !important; }
.inst-split{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items:center;
  max-width: 980px; margin: 0 auto;
}
.inst-split .art{ aspect-ratio: 4/3; }
.inst-split.reverse .art{ order:2; }
/* Sitewide h1/h2 get the display (title) font automatically — blockquote
   and h3 don't, so these two were quietly falling back to the body sans
   font despite reading as titles (big, bold, sitting where a heading
   would), while the hero h1 right above them used the title font. */
.inst-split blockquote{ margin:0; font-family: var(--font-display); text-transform:uppercase; font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight:400; line-height:1.3; letter-spacing:0.02em; }
.inst-split p{ margin-top:1rem; max-width:42ch; color:var(--ink-soft); font-size:0.9rem; font-weight:400; font-variation-settings:'wght' 400; }
@media (max-width:780px){ .inst-split{ grid-template-columns:1fr; } .inst-split.reverse .art{ order:0; } }

/* ---------- values strip ---------- */
.inst-values{ display:flex; gap: clamp(1.5rem, 4vw, 3rem); justify-content:center; flex-wrap:wrap; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.inst-value{ padding: clamp(1.4rem, 2.5vw, 2rem) 1rem; }
.inst-value h3{ font-family: var(--font-display); font-size:1.05rem; font-weight:400; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:0.4rem; }
.inst-value p{ font-size:0.82rem; color:var(--ink-mute); max-width:22ch; }

.inst-cta{ text-align:center; padding-top: clamp(1.6rem, 3vw, 2.4rem) !important; padding-bottom: clamp(2.4rem, 5vw, 3.6rem) !important; }
.inst-cta p{ color:var(--ink-soft); max-width:44ch; margin:0 auto 1.6rem; }

/* ---------- Contato: form + photo/info side by side as one unit ----------
   Both tracks capped to real content widths and the pair centered
   (justify-content, not a flexible 1fr track eating leftover width) — same
   fix as the PDP's gallery+info layout: a flexible track here would stretch
   the form (or the photo) way past what either needs, and this section
   only has ONE row, so there'd be nothing to visually balance that empty
   space against. */
.contact-grid{
  display:grid; grid-template-columns: minmax(0,440px) minmax(0,380px); justify-content:center;
  gap: clamp(2rem, 5vw, 4rem); align-items:start;
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }

.contact-form-card{
  background: var(--surface); border-radius:20px; padding: clamp(1.8rem,3vw,2.4rem);
}
.contact-form-wrap, .contact-form-card{ max-width:480px; }

.contact-side{ display:flex; flex-direction:column; gap:1.8rem; }
.contact-art{ aspect-ratio: 16/11; border-radius:16px; }
.contact-info{
  display:flex; flex-direction:column; gap:1.1rem;
  background: var(--surface); border-radius:16px; padding: clamp(1.5rem,2.5vw,2rem);
}
.contact-info-item{ display:flex; align-items:flex-start; gap:0.8rem; font-size:0.9rem; color:var(--ink-soft); }
.contact-info-item:not(:last-child){ padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.contact-info-item svg{ flex-shrink:0; margin-top:0.15rem; color:var(--ink-mute); transition: color .15s ease; }
.contact-info-item strong{ display:block; color:var(--ink); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.25rem; }
/* Whole row is the click target now (mailto:/wa.me/tel:), not just a nested
   word inside it — text-decoration:none so it doesn't read as a plain
   inline text link, colour-shift on hover is the only affordance needed. */
.contact-info-item--link{ text-decoration:none; cursor:pointer; transition: color .15s ease; }
.contact-info-item--link:hover{ color:var(--ink); }
.contact-info-item--link:hover svg{ color:var(--ink); }