/* ON TIME G3.2 — ajuste dimensional da composição aprovada na G3.1. */
:root {
  --g32-content-inset: clamp(2rem, 6.25vw, 7.5rem);
  --g32-content-width: 34rem;
  --g32-logo-width: clamp(17rem, 30vw, 31rem);
  --g32-copy-block-padding: clamp(3rem, 6vh, 4.75rem);
  --g32-hero-height: clamp(29rem, 48svh, 34rem);
  --g32-photo-position: 48% 45%;
  --g32-fade-width: 44%;
  --g32-rule-width: 2.5rem;
  --g32-label-size: .71rem;
  --g32-cta-height: 3rem;
}

.hero { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); }
.hero-grid { position: relative; isolation: isolate; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: var(--g32-content-width); padding: var(--g32-copy-block-padding) 0; }
.hero-logo { display: block; width: min(100%, var(--g32-logo-width)); height: auto; margin: 0; mix-blend-mode: normal; }
.hero-rule { display: block; width: var(--g32-rule-width); height: 1px; margin: clamp(1.35rem, 2.5vw, 2rem) 0; background: var(--gold); }
.hero .eyebrow { display: none; }
.hero h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: normal; overflow-wrap: anywhere; font-size: 1px; line-height: 1; border: 0; }
.hero .lead { max-width: 42ch; margin: 0; color: var(--ink); font-size: clamp(.9rem, 1.1vw, 1.08rem); line-height: 1.55; }
.hero-specialties { gap: .6rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.hero-specialties li { padding: .44rem .75rem; border: 1px solid #cfc9bd; color: var(--ink); font-size: var(--g32-label-size); font-weight: 700; letter-spacing: .055em; }
.hero .actions { gap: .7rem; margin-top: 1.35rem; }
.hero .actions .button { min-height: var(--g32-cta-height); padding: .65rem .9rem; font-size: .69rem; letter-spacing: .055em; }
.hero-image { position: relative; min-height: 15rem; margin: 0; overflow: hidden; background: #ddd7cb; }
.hero-image img { object-position: var(--g32-photo-position); }
.hero-image > span { display: none; }
.hero-image::before { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, var(--paper) 0%, rgb(247 247 245 / .94) 10%, rgb(247 247 245 / .54) 27%, transparent var(--g32-fade-width)); }
.hero-image::after { display: none; }

/* Mobile preserves the compact G3.1 hierarchy rather than inheriting the desktop enlargement. */
@media (max-width: 720px) {
  .hero-grid { display: grid; width: min(calc(100% - 2 * var(--space)), var(--max)); margin-inline: auto; }
  .hero-copy { max-width: none; padding: 2.1rem 0 1.9rem; }
  .hero-logo { width: min(100%, 17.5rem); }
  .hero-rule { width: 1.8rem; margin: 1rem 0; }
  .hero .lead { max-width: 34ch; font-size: .86rem; line-height: 1.55; }
  .hero-specialties { gap: .38rem; margin-top: 1rem; }
  .hero-specialties li { padding: .36rem .48rem; font-size: .59rem; }
  .hero .actions { width: 100%; margin-top: 1.15rem; }
  .hero .actions .button { flex: 1; min-width: 0; justify-content: center; gap: .5rem; min-height: 2.8rem; padding: .55rem .45rem; font-size: .58rem; }
  .hero-image { min-height: clamp(14rem, 58vw, 18rem); }
  .hero-image::before { background: linear-gradient(180deg, var(--paper) 0%, rgb(247 247 245 / .22) 23%, transparent 47%); }
}

/* Desktop keeps the approved horizontal composition while centering the enlarged left set vertically. */
@media (min-width: 721px) {
  .hero-grid { display: grid; width: 100%; max-width: none; min-height: var(--g32-hero-height); grid-template-columns: 1fr 1fr; margin: 0; }
  .hero-copy { align-self: stretch; justify-content: center; max-width: calc(var(--g32-content-width) + var(--g32-content-inset)); padding: var(--g32-copy-block-padding) 2rem var(--g32-copy-block-padding) var(--g32-content-inset); }
  .hero-image { grid-column: 2; grid-row: 1; min-height: 100%; margin: 0; }
}

@media (min-width: 1280px) { .hero .lead { max-width: 40ch; } }
@media (prefers-reduced-motion: reduce) { .hero .button { transition: none; } }