/* ============================================================ elaabiens.com.mx — component layer site.css · v01 · 2026-07-24 Consumes ONLY the semantic roles declared in tokens.css (--bg, --surface, --band, --ink, --soft, --muted, --brand, --accent, --accent-deep, --line, type + space scale). No raw hex values live in this file — by design. Ground rhythm (matches the design-system showcase, §06): header · hero midnight [data-theme="dark"] quiénes somos paper --bg historia bone --band proyecto paper --bg (white card) especialidades bone --band (white cards) el estándar navy --brand-deep respaldo paper --bg contacto bone --band footer midnight [data-theme="dark"] Both themes are first-class: setting [data-theme="dark"] or .dark on re-keys every light band to the midnight pair. The four blocks above that carry their own [data-theme="dark"] stay dark in either mode — they are the page's dark bands. ============================================================ */ /* ---- 1 · BASE ------------------------------------------- */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } ::selection { background: var(--accent-wash); color: var(--ink); } /* Focus is always visible, on every ground. */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: var(--radius); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { position: fixed; left: var(--space-3); top: var(--space-3); z-index: 99; padding: var(--space-2) var(--space-3); background: var(--surface); color: var(--ink); border: var(--hair-w) solid var(--accent); border-radius: var(--radius); font-family: var(--font-brand); font-size: var(--fs-caption); letter-spacing: var(--track-label); text-transform: uppercase; } /* ---- 2 · LAYOUT ----------------------------------------- */ .wrap { width: min(var(--maxw-page), calc(100% - 2 * var(--pad-page))); margin-inline: auto; } main > section { padding-block: clamp(3.5rem, 9vw, 6.5rem); background: var(--bg); border-top: var(--hair-w) solid var(--line); } main > section:first-child { border-top: 0; } /* Bone bands */ .history, .firms-section, .contact { background: var(--band); } /* Dark bands — these keep their midnight ground in both themes. */ .site-header, .hero, .site-footer { background: var(--bg); } /* ---- 3 · TYPE ROLES ------------------------------------- */ .eyebrow { font-family: var(--font-brand); font-size: var(--fs-eyebrow); letter-spacing: var(--track-brand); text-transform: uppercase; color: var(--accent-deep); /* gold text on light is ALWAYS accent-deep */ margin: 0 0 var(--space-3); max-width: none; } /* Four sections carry an eyebrow whose words are identical to their own

(historia · especialidades · respaldo · contacto). The copy is approved and stays in the document untouched; showing it twice is a typographic defect, so the duplicate label is not painted. Those sections get the gold filet above the headline instead, so the section-marker rhythm is unbroken. */ .history > .wrap > .eyebrow, .firms-section .eyebrow, .backing > .wrap > .eyebrow, .contact > .wrap > .eyebrow { display: none; } /* The gold filet — the system's section marker. */ .about-title::after { content: ""; display: block; width: 48px; border-top: 2px solid var(--accent); margin-top: var(--space-4); } .history-title::before, .firms-title::before, .backing-title::before, .contact-title::before { content: ""; display: block; width: 48px; border-top: 2px solid var(--accent); margin-bottom: var(--space-4); } main h2 { font-size: var(--fs-h2); color: var(--ink); margin: 0 0 var(--space-4); text-wrap: balance; max-width: 22ch; } main h3 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: 0; margin: 0; } main p { color: var(--soft); } .lede, .about-lede, .hero-lede, .firms-lede, .backing-body { font-size: var(--fs-lead); line-height: var(--lh-snug); } /* ---- 4 · COMPONENTS ------------------------------------- */ /* Button — gold fill, navy label. Hover empties the fill. */ .btn { display: inline-block; font-family: var(--font-brand); font-size: var(--fs-caption); letter-spacing: var(--track-label); text-transform: uppercase; padding: 1.05em 2.4em; border: var(--hair-w) solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover, .btn:focus-visible { background: transparent; color: var(--accent-deep); border-color: var(--accent); } .btn--ghost { background: transparent; color: var(--accent); border-color: var(--line); } .btn--ghost:hover, .btn--ghost:focus-visible { background: transparent; color: var(--accent); border-color: var(--accent); } /* Named-responsibility block — the gold left filet. */ .leader, .pullquote { border-left: 2px solid var(--accent); padding-left: var(--space-4); } .rule { border: 0; border-top: var(--hair-w) solid var(--line); margin: 0 0 var(--space-5); } /* ---- 5 · HEADER (dark) ---------------------------------- */ .site-header { padding-block: var(--space-4); border-bottom: var(--hair-w) solid var(--line); } .site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); } /* Clear space around the mark is set generously — well beyond the cap-height of the ELAA wordmark required by BRAND.md §4. */ .site-logo { display: block; padding: var(--space-2); margin: calc(var(--space-2) * -1); } .site-logo img { width: 96px; /* minimum permitted on screen */ height: auto; } .site-nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); font-family: var(--font-brand); font-size: var(--fs-caption); letter-spacing: var(--track-label); text-transform: uppercase; } .site-nav a { color: var(--soft); } .site-nav a:hover { color: var(--accent); } /* ---- 6 · HERO (dark) ------------------------------------ */ .hero { padding-block: clamp(4.5rem, 13vw, 8.5rem); } .hero-eyebrow { color: var(--accent); /* on the midnight ground the champagne reads */ margin-bottom: var(--space-4); } .hero-title { font-size: var(--fs-display); letter-spacing: var(--track-tight); color: var(--ink); margin: 0 0 var(--space-4); max-width: 16ch; } .hero-title::after { content: ""; display: block; width: 48px; border-top: 2px solid var(--accent); margin-top: var(--space-5); } .hero-lede { color: var(--soft); max-width: 46ch; margin: var(--space-5) 0 0; } /* ---- 7 · QUIÉNES SOMOS ---------------------------------- */ .about-lede { color: var(--ink); max-width: 58ch; margin-bottom: var(--space-6); } .leaders { display: grid; gap: var(--space-6); } .leader-name { color: var(--ink); } .leader-role { font-family: var(--font-brand); font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin: var(--space-1) 0 var(--space-3); } .leader-bio { color: var(--soft); margin: 0; max-width: var(--maxw-text); } /* ---- 8 · HISTORIA (bone band) --------------------------- */ .history-body { max-width: var(--maxw-text); margin-bottom: var(--space-5); } .pullquote { margin: 0; max-width: 54ch; } .pullquote p { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); margin: 0; max-width: none; } /* ---- 9 · PROYECTO --------------------------------------- */ .project-card { background: var(--surface); border: var(--hair-w) solid var(--line); border-radius: var(--radius); padding: clamp(1.75rem, 5vw, var(--space-7)); box-shadow: var(--shadow-soft); max-width: 46rem; } .project-body { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--ink); margin: 0 0 var(--space-5); max-width: 44ch; } .project-cta, .standard-cta { margin: 0; max-width: none; } /* ---- 10 · ESPECIALIDADES (bone band) -------------------- */ .firms-lede { color: var(--soft); max-width: 52ch; margin-bottom: var(--space-6); } .firms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-2); } .firm { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: var(--hair-w) solid var(--line); border-radius: var(--radius); padding: var(--space-5) var(--space-4); } /* Logo slot. The eight firm PNGs do not exist yet; the wall is a typographic name grid until they do. When the files land, restore the tags already written in index.html — they drop straight into this slot with no layout change. */ .firm img { order: 0; height: 56px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: var(--space-3); } .firm-role { order: 1; font-family: var(--font-brand); font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--space-2); } .firm-name { order: 2; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--ink); overflow-wrap: break-word; } /* ---- 11 · EL ESTÁNDAR (navy band) ----------------------- */ .standard { background: var(--brand-deep); border-top: 0; } .standard .eyebrow { color: var(--accent-deep); } .standard-title { color: var(--ink); max-width: 24ch; } .standard-body { color: var(--soft); max-width: 56ch; margin-bottom: var(--space-5); } .standard .btn { background: transparent; color: var(--accent); border-color: var(--line); } .standard .btn:hover, .standard .btn:focus-visible { border-color: var(--accent); color: var(--accent-deep); } /* ---- 12 · RESPALDO -------------------------------------- */ .backing-body { color: var(--soft); max-width: 52ch; margin: 0; } /* ---- 13 · CONTACTO (bone band) -------------------------- */ .contact-body { max-width: 46ch; margin-bottom: var(--space-4); } .contact-email { margin: 0 0 var(--space-4); max-width: none; } .contact-email a { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--accent-deep); border-bottom: var(--hair-w) solid var(--line); padding-bottom: var(--space-1); overflow-wrap: break-word; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .contact-email a:hover { color: var(--ink); border-color: var(--accent); } .contact-note { font-size: var(--fs-small); color: var(--muted); max-width: 52ch; margin: 0; } /* ---- 14 · FOOTER (dark) --------------------------------- */ .site-footer { padding-block: clamp(3rem, 8vw, var(--space-7)); border-top: var(--hair-w) solid var(--line); } .footer-mark { width: 120px; height: auto; margin-bottom: var(--space-4); } .site-footer .legal { font-size: var(--fs-small); color: var(--muted); max-width: none; margin: 0 0 var(--space-2); } .site-footer .footer-links { margin: 0; } .site-footer a { color: var(--soft); } .site-footer a:hover { color: var(--accent); } /* ---- 15 · RESPONSIVE ------------------------------------ */ @media (min-width: 48rem) { /* 768px */ .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .firms { gap: var(--space-3); } } @media (min-width: 62rem) { /* ~992px */ /* Quiénes somos — label + headline left, the prose and the named leadership right. Mirrors §06 of the showcase. */ .about .wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: var(--space-7); align-items: start; } .about > .wrap > .eyebrow { grid-column: 1; grid-row: 1; } .about-title { grid-column: 1; grid-row: 2; margin-bottom: 0; } .about-lede { grid-column: 2; grid-row: 1 / span 2; margin: 0; } .leaders { grid-column: 2; grid-row: 3; margin-top: var(--space-6); } /* Respaldo — headline left, the verifiable statement right. */ .backing .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--space-7); align-items: start; } .backing-title { grid-column: 1; grid-row: 1; margin-bottom: 0; } .backing-body { grid-column: 2; grid-row: 1; } /* El estándar — statement left, the outbound link held right. */ .standard .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-7); align-items: center; } .standard > .wrap > .eyebrow { grid-column: 1; grid-row: 1; } .standard-title { grid-column: 1; grid-row: 2; margin-bottom: var(--space-3); } .standard-body { grid-column: 1; grid-row: 3; margin-bottom: 0; } .standard-cta { grid-column: 2; grid-row: 1 / span 3; align-self: center; } .standard .btn { white-space: nowrap; } /* Especialidades — headline left, the framing line right, wall below. */ .firms-section .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: var(--space-7); align-items: end; } .firms-title { grid-column: 1; grid-row: 1; margin-bottom: 0; } .firms-lede { grid-column: 2; grid-row: 1; margin-bottom: 0; } .firms { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-6); } .site-footer .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-6); align-items: end; } .site-footer .rule { grid-column: 1 / -1; } .footer-mark { grid-column: 1; grid-row: 2 / span 2; align-self: center; margin-bottom: 0; } .site-footer .legal { grid-column: 2; } } /* ---- 16 · MOTION ---------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }