/* DMC MEDIA — core components: base, frame, grid, cell, labels, links, CTA, header, footer. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
em { font-style: italic; }
::selection { background: var(--cell-cyan); color: #08090b; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: .75rem 1rem; background: var(--ink); color: var(--paper); font-weight: 600; }
.skip-link:focus { top: 1rem; }

/* Light surface: same tokens, inverted values */
.theme-light { --paper: var(--light); --ink: var(--light-ink); --muted: var(--light-muted); --rule: var(--light-rule); --grid-line: var(--light-grid-line); --focus: #1f5fd6; background: var(--paper); color: var(--ink); }

/* Frame: the 4 / 8 / 12 column space every scene is composed on */
.frame { position: relative; width: min(100% - 2 * var(--gutter), var(--frame-max)); margin-inline: auto; container-type: inline-size; }
@supports (width: 1cqi) { .frame { --m: calc(100cqi / var(--cols)); } }

/* Decorative grid of cells (never read by assistive technology) */
.grid-bg { position: absolute; inset: 0; pointer-events: none; border-right: 1px solid var(--grid-line);
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--m) var(--m); background-position: 0 0; }
.grid-bg--cols { background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px); background-size: var(--m) 100%; }

/* The cell */
.cell { display: inline-block; flex: none; width: var(--cell-size, 1rem); aspect-ratio: 1; border: 1px solid var(--rule); vertical-align: middle; }
.cell--lit { border-color: transparent; background: var(--cell-lit); box-shadow: var(--cell-glow); }
@supports not (aspect-ratio: 1) { .cell { height: var(--cell-size, 1rem); } }

/* Section label: "03 / SERVICIOS" */
.label { display: flex; justify-content: space-between; gap: 1.5rem; padding-top: .9rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--t-label); font-weight: 600; letter-spacing: .11em; line-height: 1.4; text-transform: uppercase; }
.label > span:last-child { text-align: right; }

/* Headings */
.h2 { font-size: var(--t-h2); font-weight: 600; line-height: .92; letter-spacing: -.062em; }
.h2 em, .h3 em, .display em { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
.h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.lead { font-size: var(--t-lead); font-weight: 500; line-height: 1.18; letter-spacing: -.035em; }
.muted { color: var(--muted); }

/* Text link with arrow */
.link-arrow { position: relative; display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font-weight: 600; white-space: nowrap; }
.link-arrow::after { content: ''; position: absolute; left: 0; right: 1.6em; bottom: .55rem; height: 1px; background: currentColor; transform: scaleX(.999); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
.link-arrow > span[aria-hidden] { display: inline-block; font-size: 1.35em; line-height: 1; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover > span[aria-hidden], .link-arrow:focus-visible > span[aria-hidden] { transform: translate(3px, -3px); }

/* CTA: the lit cell */
.cta-cell { display: inline-flex; justify-content: space-between; align-items: flex-end; gap: 2rem; min-width: min(100%, 18rem); min-height: 44px; padding: 1.1rem 1.2rem; background: var(--cell-lit); color: #08090b; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; box-shadow: var(--cell-glow); }
.cta-cell > span[aria-hidden] { font-size: 1.9em; font-weight: 400; line-height: .8; transition: transform var(--t-fast) var(--ease); }
.cta-cell:hover > span[aria-hidden], .cta-cell:focus-visible > span[aria-hidden] { transform: translate(4px, -4px); }
.cta-cell:focus-visible { outline-color: var(--ink); outline-offset: 5px; }

/* Header */
.site-header { position: sticky; z-index: 50; top: 0; height: var(--header-h); background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; }
.brand__icon { width: 30px; height: 32px; object-fit: contain; mix-blend-mode: screen; }
.brand__name { display: flex; flex-direction: column; font-family: var(--brand); font-size: 1rem; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.brand__name span { color: var(--muted); font-family: var(--sans); font-size: .6rem; font-weight: 400; letter-spacing: .09em; line-height: 1.35; }
.desktop-nav { display: none; align-items: center; gap: clamp(1.25rem, 2.4vw, 3rem); font-size: .85rem; font-weight: 500; }
.desktop-nav > a { display: inline-flex; align-items: center; min-height: 44px; }
.desktop-nav > a:not(.nav-contact) { position: relative; }
.desktop-nav > a:not(.nav-contact)::after { content: ''; position: absolute; left: 0; bottom: .6rem; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
.desktop-nav > a:not(.nav-contact):hover::after, .desktop-nav > a:not(.nav-contact):focus-visible::after { transform: scaleX(1); }
.nav-contact { gap: 1rem; padding: 0 .95rem; border: 1px solid var(--rule); transition: border-color var(--t-fast); }
.nav-contact:hover, .nav-contact:focus-visible { border-color: var(--ink); }
.nav-contact .cell { --cell-size: .55rem; }
.menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; margin-right: -10px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 100%; height: 1.5px; background: var(--ink); transition: transform var(--t-fast); }
.menu-open .menu-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-nav { display: none; }
.mobile-nav:not([hidden]) { position: fixed; z-index: 45; inset: var(--header-h) 0 auto; display: flex; flex-direction: column; padding: 1rem var(--gutter) 2rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
.mobile-nav a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid var(--rule); font-size: 1.6rem; font-weight: 500; letter-spacing: -.045em; }
.mobile-nav a span { color: var(--cell-cyan); }
@media (min-width: 700px) {
  .desktop-nav { display: flex; }
  .menu-toggle, .mobile-nav:not([hidden]) { display: none; }
}

/* Footer */
.site-footer { padding: clamp(3.5rem, 8vw, 6rem) 0 1.5rem; border-top: 1px solid var(--rule); font-size: var(--t-small); }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem; padding-bottom: 3rem; }
.site-footer__claim { font-size: var(--t-h3); font-weight: 600; line-height: 1; letter-spacing: -.05em; text-align: right; }
.site-footer__middle { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.site-footer__middle nav { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--cell-cyan); }
.site-footer__contact { display: flex; flex-direction: column; }
.site-footer__contact span, .site-footer__bottom { color: var(--muted); font-size: .75rem; letter-spacing: .06em; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.site-footer__bottom div { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
@media (max-width: 699px) { .site-footer__claim { text-align: left; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}