/* Single shared entry point. Page-specific artwork loads after this file. */
@import './_tokens.css';
@import './spacing.css';
@import './components/contact-button.css';
@import './components/case.css?v=case-gap-2';
@import './components/work.css';
@import './components/footer.css';
@import './layout.css';

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-family-body); color: var(--system-text-black); background: var(--system-background-pure); line-height: normal; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--font-family-headings); overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.banner { background: var(--system-background-medium); }
.banner-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 424px); gap: var(--spacing-grid); align-items: end; }
.banner-left, .banner-right { min-width: 0; }
.banner-left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.label { background: var(--brand-blue); color: white; padding: var(--pill-padding-vertical) var(--pill-padding-horizontal); font: 32px/1.2 var(--font-family-headings); }
.hero-lines { display: flex; flex-direction: column; gap: var(--space-8); }
.hero-line { margin: 0; font: clamp(28px, 3.8vw, 56px)/1.18 var(--font-family-headings); letter-spacing: -.04em; }
.hero-image img { width: 100%; }
.banner-divider { height: var(--space-4); background: var(--system-componentes-blue); }
.banner-meta { display: flex; justify-content: flex-end; padding-top: var(--spacing-banner-divider-text); }
.meta-text { max-width: 540px; margin: 0; font-size: 20px; text-align: right; }
.contact-page { padding-block: var(--spacing-section); }
@media (max-width: 1000px) {
  .banner-inner { grid-template-columns: minmax(0, 1fr); }
  .banner-right { width: min(100%, 567px); }
  .meta-text { text-align: left; max-width: none; }
}