/* home.css · portada de smartrealting.com. Solo tokens --on-* (capa 2 sobre la capa 1 de ON). */
:where(.sr-home) *, :where(.sr-home) *::before, :where(.sr-home) *::after { box-sizing: border-box; }
.sr-home { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: #fff; color: var(--on-ink); font-family: var(--on-font-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; border-top: 10px solid var(--on-cta); }
:where(.sr-home) a { color: inherit; text-decoration: none; }
.sr-home__main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) 24px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.sr-home__mark { margin: 0; font: 600 22px/1 var(--on-font-display); letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; }
.sr-home__mark-box { background: var(--on-cta); color: var(--on-bg-dark); padding: 6px 8px 5px; border-radius: 4px; }
.sr-home__kicker { margin: 0 0 18px; color: var(--on-ink-60); font: 500 13px/1 var(--on-font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.sr-home__h1 { margin: 0; max-width: 17em; font-family: var(--on-font-display); font-weight: var(--on-w-semi, 600); font-size: clamp(34px, 5.6vw, 64px); line-height: 1.06; letter-spacing: var(--on-ls-h1, -0.02em); text-wrap: balance; color: var(--on-bg-dark); }
.sr-home__h1 em { font-family: var(--on-font-accent); font-style: italic; font-weight: 400; color: var(--on-ink-60); }
.sr-home__contact { font-style: normal; display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 6px 32px; padding-top: 24px; border-top: 1px solid var(--on-line); }
.sr-home__label { grid-column: 1 / -1; color: var(--on-ink-40); font: 500 12px/1 var(--on-font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.sr-home__phone, .sr-home__mail { font: 600 clamp(20px, 2.4vw, 26px)/1.2 var(--on-font-display); color: var(--on-bg-dark); }
.sr-home__phone:hover, .sr-home__mail:hover { box-shadow: inset 0 -3px 0 var(--on-cta); }
.sr-home__addr { color: var(--on-ink-60); justify-self: end; }
.sr-home__foot { width: 100%; max-width: 1080px; margin: 0 auto; padding: 18px 24px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--on-ink-40); font-size: 13px; }
.sr-home__foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.sr-home__foot a:hover { color: var(--on-ink); }
@media (max-width: 720px) {
  .sr-home__contact { grid-template-columns: 1fr; }
  .sr-home__addr { justify-self: start; margin-top: 6px; }
}