/* LATAM Studio 33: source palette, one reading column and a continuous blue etched background. */
:root {
  color-scheme: light;
  --background: #F2F2F2;
  --surface: #D3DADA;
  --divider: #A9A8A7;
  --text-muted: #4D4E49;
  --ink: #080808;
  --link: #006DCC;
  --focus: #006DCC;
  --section-gap: 72px;
  --project-action-gap: 24px;
  --body-measure: 62ch;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #101416;
  --surface: #252D30;
  --divider: #A9A8A7;
  --text-muted: #B8C2C2;
  --ink: #E4E9E7;
  --link: #78B9ED;
  --focus: #78B9ED;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --background: #101416;
    --surface: #252D30;
    --divider: #A9A8A7;
    --text-muted: #B8C2C2;
    --ink: #E4E9E7;
    --link: #78B9ED;
    --focus: #78B9ED;
  }
}
body { background: var(--background); color: var(--ink); }
::selection { background: var(--divider); color: #080808; }

@font-face { font-family:Plex; src:url('./fonts/IBMPlexSans-Regular.woff2') format('woff2'); font-display:swap}
@font-face { font-family:Plex; src:url('./fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap}
@font-face { font-family:PlexMono; src:url('./fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-display:swap}
@font-face { font-family:Oswald; src:url('./fonts/Oswald-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap}

* { box-sizing:border-box}
html { scrollbar-gutter:stable}
body { margin:0; font:1rem/1.5rem Plex,sans-serif}
[hidden] { display:none!important}
a { color:var(--link); text-underline-offset:.25em}
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--link); outline-offset:6px}
h1,h2,h3,p { margin:0}
button,a,summary { touch-action:manipulation}
button { font:inherit}
strong { font-weight:600; color:var(--ink)}
[id] { scroll-margin-top:96px}
.wordmark { font-family:Plex,sans-serif; font-weight:600; font-size:1.5rem; line-height:1.875rem; letter-spacing:-.04em; color:var(--ink); text-decoration:none}
.footer-bottom { font:.75rem/1.125rem PlexMono,monospace; letter-spacing:.025em}
.hero h1, .services h2, .approach h2, .error-page h1 { font-family:Oswald,sans-serif; font-weight:600; letter-spacing:-.025em}
.page { min-height:100vh; padding-bottom:24px; display:flex; flex-direction:column}
.container { width:100%; max-width:99rem; margin-inline:auto; padding-inline:24px}
.page main { padding-bottom:var(--section-gap)}
.site-header { position:sticky; top:0; z-index:10; isolation:isolate; background:var(--background); border-bottom:1px solid var(--divider)}
.hero-header-ready .site-header { --header-fill:0; background:transparent; border-bottom:0}
.hero-header-ready .site-header::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--background); border-bottom:1px solid var(--divider); opacity:var(--header-fill); pointer-events:none}
.header-inner { min-height:72px; display:flex; align-items:center; gap:24px}
.header-brand { display:flex; align-items:center; min-height:48px; min-width:48px; color:var(--focus)}
.primary-nav { display:flex; gap:24px; margin-left:auto}
.primary-nav a { display:flex; align-items:center; min-height:48px; color:var(--ink); font-size:.875rem; line-height:1.125rem; text-decoration:none}
.primary-nav a:hover { text-decoration:underline}
.header-controls { position:relative; display:flex; gap:12px; align-items:center; margin-left:auto}
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:48px; height:48px; padding:0; border:0; color:var(--ink); background:transparent; cursor:pointer}
.theme-toggle:hover { background:var(--surface)}
.theme-icon { width:24px; height:24px}
.theme-icon-sun,:root[data-theme="dark"] .theme-icon-moon { display:none}
:root[data-theme="dark"] .theme-icon-sun { display:block}
.primary-nav+.header-controls { margin-left:0}
.language-switcher { position:relative; font-size:.875rem; line-height:1.125rem}
.language-switcher summary { display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; min-width:84px; list-style:none; cursor:pointer}
.language-switcher summary::-webkit-details-marker { display:none}
.language-icon { width:24px; height:24px}
.language-chevron { width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); margin-left:6px}
.language-switcher[open] .language-chevron { transform:translateY(2px) rotate(225deg)}
.language-options { position:absolute; z-index:20; top:calc(100% + 6px); right:0; min-width:192px; padding:6px; background:var(--background); border:1px solid var(--ink)}
.language-options a { display:flex; align-items:center; justify-content:flex-end; min-height:48px; padding:12px; color:var(--ink); text-decoration:none}
.language-options a:hover { background:var(--surface)}
.language-options a[aria-current] { font-weight:600; text-decoration:underline}
.menu-toggle { display:none; align-items:center; justify-content:center; flex-shrink:0; width:48px; height:48px; padding:0; border:0; color:var(--ink); background:transparent; cursor:pointer}
.menu-icon { position:relative; width:24px; height:18px; border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor}
.menu-icon::before { content:""; position:absolute; top:50%; left:0; width:24px; border-top:1.5px solid currentColor; transform:translateY(-50%)}
.menu-open { overflow:hidden}
.menu-panel { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; color:var(--ink); background:var(--background); overflow-y:auto; overscroll-behavior:contain}
.menu-panel::backdrop { background:transparent}
.menu-panel .container { padding-inline:24px}
.menu-panel .header-inner { position:sticky; top:0; z-index:10; background:var(--background); border-bottom:1px solid var(--divider); justify-content:space-between}
.menu-panel .header-controls { margin-left:auto}
.menu-close { display:inline-flex}
.menu-close .menu-icon { height:24px; border:0}
.menu-close .menu-icon::before,.menu-close .menu-icon::after { content:""; position:absolute; top:50%; left:0; width:24px; border-top:1.5px solid currentColor; transform:rotate(45deg)}
.menu-close .menu-icon::after { transform:rotate(-45deg)}
.menu-content { padding-top:24px; padding-bottom:72px}
.expanded-nav { display:flex; flex-direction:column; align-items:flex-end}
.expanded-nav a { display:block; width:min(100%,576px); min-height:96px; padding-block:24px; border-bottom:1px solid var(--divider); font:600 3rem/3.375rem Oswald,sans-serif; text-align:right; text-decoration:none; color:var(--ink); overflow-wrap:anywhere}
.expanded-nav a:hover { color:var(--link)}
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:12px 24px; background:var(--ink); color:var(--background); transform:translateY(-200%)}
.skip-link:focus { transform:none}

.hero-grid, .approach-grid { display:flex; flex-direction:column; gap:24px; align-items:flex-start}
.hero { position:relative; min-height:calc(100svh - 73px); padding-block:48px 96px; display:flex; flex-direction:column; justify-content:center; overflow:clip}
.hero-header-ready .hero { margin-top:-72px; min-height:100svh; padding-top:120px}
.has-page-shader { isolation:isolate }
.has-page-shader::before { content:""; position:fixed; inset:0; z-index:-2; background:radial-gradient(ellipse at 85% 70%, color-mix(in srgb, var(--link) 9%, var(--background)), transparent 70%),var(--background); pointer-events:none }
.page-shader { position:fixed; inset:0; bottom:auto; z-index:-1; display:block; width:100%; height:100vh; height:100lvh; opacity:0; pointer-events:none }
.page-shader[data-state="ready"] { opacity:1 }
.page-shader[data-state="fallback"] { visibility:hidden }
.hero-grid { max-width:var(--body-measure)}
.hero h1 { font-size:5.25rem; line-height:5.625rem; max-width:12ch}
.hero-copy { display:flex; flex-direction:column; gap:18px; color:var(--ink)}
.hero-copy p { max-width:var(--body-measure)}
.hero-actions { margin-top:calc(var(--project-action-gap) - 18px)}
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:space-between; gap:24px; max-width:100%; padding:12px 24px; background:var(--focus); color:var(--background); font-size:.875rem; line-height:1.125rem; font-weight:600; text-decoration:none}
.button span { flex-shrink:0}
.services { margin-top:var(--section-gap); align-items:start}
.services h2 { font-size:2.25rem; line-height:2.625rem; margin-bottom:36px}
.service-list { display:flex; flex-direction:column; gap:24px}
.service-card { position:relative; display:flex; flex-direction:column; justify-content:flex-start; gap:18px; min-height:420px; padding:48px; overflow:clip}
.service-card h3 { font-size:3rem; line-height:3.375rem; font-weight:600; overflow-wrap:anywhere}
.service-card p { max-width:var(--body-measure); font-size:1.5rem; line-height:2.25rem; color:var(--ink)}
.approach { margin-top:var(--section-gap); align-items:start}
.approach h2 { font-size:2.25rem; line-height:2.625rem; max-width:24ch}
.approach-copy { color:var(--text-muted); max-width:var(--body-measure)}
.contact-actions { margin-top:24px; display:flex; flex-direction:column; align-items:flex-start; gap:var(--project-action-gap)}
.site-footer { margin-top:auto; padding-top:12px; border-top:1px solid var(--ink)}
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:24px}
.footer-brand .wordmark { font-size:1.125rem; line-height:1.5rem}
.footer-brand > p + p { color:var(--text-muted); font-size:.875rem; line-height:1.125rem}
.email-link { display:inline-flex; align-items:center; min-height:48px; color:var(--ink); overflow-wrap:anywhere; font-size:.875rem}
.footer-bottom { display:flex; justify-content:space-between; gap:24px; margin-top:12px; color:var(--text-muted)}

@media(min-width:99rem) { .container { padding-inline:36px}
}

@media(max-width:82rem) { .hero h1 { font-size:4.5rem; line-height:4.875rem}
}

@media(max-width:65.999rem) {
.hero h1 { font-size:3rem; line-height:3.375rem; max-width:18ch}
.footer-top { flex-wrap:wrap}
}

@media(max-width:900px) { .header-inner { flex-wrap:wrap; gap:0 24px}
.language-switcher { position:static}
.primary-nav { order:3; flex-basis:100%; justify-content:flex-end; padding-bottom:12px}
.primary-nav+.header-controls { margin-left:auto}
.navigation-ready .site-header .header-inner { flex-wrap:nowrap}
.navigation-ready .primary-nav { display:none}
.navigation-ready .menu-toggle { display:inline-flex}
}

@media(max-width:41.999rem) { .container { padding-inline:12px}
.hero { padding-top:36px; justify-content:flex-start}
.hero-header-ready .hero { padding-top:120px}
.hero h1 { font-size:2.25rem; line-height:2.625rem; max-width:14ch}
.services h2,.approach h2 { font-size:1.5rem; line-height:1.875rem}
.service-card { min-height:360px; padding:24px}
.service-card h3 { font-size:2.25rem; line-height:2.625rem}
.service-card p { font-size:1.125rem; line-height:1.875rem}
.button { width:100%}
.menu-panel .container { padding-inline:12px}
.expanded-nav a { font-size:2.25rem; line-height:2.625rem; min-height:90px}
.footer-top { align-items:flex-start; flex-direction:column; gap:12px}
.footer-bottom { font-size:.625rem; line-height:.875rem}
.primary-nav { gap:18px}
.primary-nav a { font-size:.8125rem}
.header-controls { gap:6px}
}


/* Error routes share the site identity and navigation, including localization. */
.hero-grid, .services > .container, .approach-grid { align-items: start; }
.button:hover { background: var(--ink); color: var(--background); }
.error-page { flex: 1; display: flex; align-items: center; padding-block: 72px; }
.error-page .eyebrow { font: 0.875rem/1.125rem PlexMono, monospace; margin-bottom: 24px; color: var(--text-muted); }
.error-page h1 { max-width: 14ch; font-size: clamp(2.25rem, 6vw, 5.25rem); line-height: 1.125; }
.error-copy { margin-top: 24px; color: var(--text-muted); }
.error-translation { margin-top: 18px; color: var(--text-muted); }
.error-actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }
@media (max-width: 900px) {
  html:not(.navigation-ready) [id] { scroll-margin-top: 156px; }
}

/* Text remains ordinary HTML; the decorative canvas never affects layout. */
@media print {
  .page-shader,.has-page-shader::before { display:none!important }
  .hero,.hero-header-ready .hero { min-height:0; margin-top:0; padding-block:36px }
  .service-card { min-height:0; padding-block:24px; break-inside:avoid }
  .site-header { position:static }
}