/* ===== devCognitio, Redesign Prototype ===== */

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ubuntu-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ubuntu-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibmplexsans-400-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibmplexsans-400-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibmplexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibmplexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibmplexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibmplexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --red: #AA3032;
  --wine: #8D4265;
  --indigo: #5460A9;
  --blue: #1875B2;
  --brand-gradient: linear-gradient(90deg, var(--red), var(--wine) 34%, var(--indigo) 68%, var(--blue));

  /* "Problemas" accents: brightened for near-black in dark (default here);
     re-saturated for paper in the light blocks below. */
  --pain-1: #E0555A;
  --pain-2: #B27BD6;
  --pain-3: #3E9BD8;
  --pain-4: #7C86D6;

  --bg: #07080c;
  --bg-alt: #0b0d13;
  /* surfaces lifted a step so cards read off the near-black bg instead of
     blending into it (dark was reading too dark on card-heavy sections) */
  --card: #14161f;
  --card-hi: #1a1d29;
  --line: rgba(255,255,255,.10);
  --line-hi: rgba(255,255,255,.18);
  --text: #f3f2ee;
  --muted: #9aa0b4;
  /* quietest tier: clears WCAG AA (>=4.5) for small tags/meta even on the
     elevated/accent card surface, while staying a step below --muted */
  --muted-dim: #868ca6;

  /* theme-aware surface tints: dark defaults; overridden per theme below */
  --surface-wash: rgba(255,255,255,.06);
  --surface-wash-soft: rgba(255,255,255,.04);
  --surface-wash-faint: rgba(255,255,255,.025);
  --inset-hi: rgba(255,255,255,.07);
  --nav-glass: rgba(10,11,16,.55);
  --nav-glass-scrolled: rgba(10,11,16,.75);
  --overlay-glass: rgba(6,7,10,.86);
  --modal-glass: rgba(7,8,12,.72);
  --orb-opacity-base: .35;
  --orb-opacity-3: .22;
  --orb-opacity-hero: .45;

  --radius-lg: 2rem;
  --radius-md: 1.25rem;
  --radius-sm: .75rem;

  /* three-tier type system: Ubuntu Bold (H1/H2 identity only), IBM Plex Sans (everything else), IBM Plex Mono (technical contexts only) */
  --font-display: "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-tech: "IBM Plex Mono", "SF Mono", Consolas, monospace;

  --ease: cubic-bezier(.32,.72,0,1);       /* iOS-like drawer curve: nav, overlays */
  --ease-out: cubic-bezier(.23,1,.32,1);   /* strong ease-out: entrances */
  --ease-soft: cubic-bezier(.23,1,.32,1);

  --mark-shadow: 0 30px 60px rgba(0,0,0,.55);
}

/* ===== light theme, same brand gradient/type system, paper surfaces instead of near-black =====
   Dark is the default (bare :root above). Light applies when the OS prefers it (and the visitor
   hasn't explicitly forced dark), or whenever the toggle sets data-theme="light" explicitly. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* Light Background, Light Panel, Light Surface, Light Surface Elevated:
       a real luminance+tint ladder, not an inverted dark palette. Panel sits
       BELOW background (it's the recessed ambient layer); surfaces sit above it. */
    --bg: #f4f3f9;
    --bg-alt: #e9e7f2;
    --card: #f9f8fd;
    --card-hi: #ffffff;
    --line: rgba(41,35,74,.13);
    --line-hi: rgba(41,35,74,.3);
    --text: #15141f;
    --muted: #4c4e68;
    --muted-dim: #62657e;

    --pain-1: #AA3032;
    --pain-2: #8D4265;
    --pain-3: #1875B2;
    --pain-4: #5460A9;

    --surface-wash: linear-gradient(135deg, rgba(170,48,50,.08), rgba(141,66,101,.06) 35%, rgba(84,96,169,.06) 68%, rgba(24,117,178,.08));
    --surface-wash-soft: linear-gradient(135deg, rgba(170,48,50,.05), rgba(84,96,169,.04) 60%, rgba(24,117,178,.05));
    --surface-wash-faint: linear-gradient(135deg, rgba(170,48,50,.035), rgba(24,117,178,.035));
    --border-gradient: linear-gradient(140deg, rgba(170,48,50,.4), rgba(141,66,101,.28) 38%, rgba(84,96,169,.26) 68%, rgba(24,117,178,.4));
    --nav-glass: rgba(244,243,249,.72);
    --nav-glass-scrolled: rgba(244,243,249,.92);
    --overlay-glass: rgba(244,243,249,.95);
    --modal-glass: rgba(244,243,249,.86);
    --orb-opacity-base: .13;
    --orb-opacity-3: .09;
    --orb-opacity-hero: .34;
    --modal-shadow: 0 24px 64px -20px rgba(21,17,45,.28);
    --mark-shadow: none;
  }
}

:root[data-theme="light"] {
  --bg: #f4f3f9;
  --bg-alt: #e9e7f2;
  --card: #f9f8fd;
  --card-hi: #ffffff;
  --line: rgba(41,35,74,.13);
  --line-hi: rgba(41,35,74,.3);
  --text: #15141f;
  --muted: #4c4e68;
  --muted-dim: #62657e;

  --pain-1: #AA3032;
  --pain-2: #8D4265;
  --pain-3: #1875B2;
  --pain-4: #5460A9;

  --surface-wash: linear-gradient(135deg, rgba(170,48,50,.08), rgba(141,66,101,.06) 35%, rgba(84,96,169,.06) 68%, rgba(24,117,178,.08));
  --surface-wash-soft: linear-gradient(135deg, rgba(170,48,50,.05), rgba(84,96,169,.04) 60%, rgba(24,117,178,.05));
  --surface-wash-faint: linear-gradient(135deg, rgba(170,48,50,.035), rgba(24,117,178,.035));
  --border-gradient: linear-gradient(140deg, rgba(170,48,50,.4), rgba(141,66,101,.28) 38%, rgba(84,96,169,.26) 68%, rgba(24,117,178,.4));
  --nav-glass: rgba(244,243,249,.72);
  --nav-glass-scrolled: rgba(244,243,249,.92);
  --overlay-glass: rgba(244,243,249,.95);
  --modal-glass: rgba(244,243,249,.86);
  --orb-opacity-base: .22;
  --orb-opacity-3: .16;
  --orb-opacity-hero: .34;
  --modal-shadow: 0 24px 64px -20px rgba(21,17,45,.28);
  --mark-shadow: none;
}

/* light-only: ambient chromatic atmosphere behind content, and a curated
   (not blanket) set of accent-bordered bezels: depth here comes from the
   surface ladder + hairlines + selective color, never from resting shadows.
   dark theme gets its depth from near-black bg + orb glow; these rules are
   additive to light, not shared with dark. */
@media (prefers-color-scheme: light) {
  /* editorial light mode: paper, not blank. The brand spectrum is painted
     once down the whole page as a set of soft, non-fixed radial washes —
     `background-attachment: scroll` means these are pinned to spots on the
     document, not the viewport, so as you scroll each one drifts into view
     near its own section and back out, instead of sitting fixed over
     everything at once. Cards/icons/orbs are the restrained part now; the
     backdrop is allowed to feel alive. */
  :root:not([data-theme="dark"]) body {
    background-image:
      radial-gradient(60% 46vh at 12% 0%, rgba(170,48,50,.09), transparent 72%),
      radial-gradient(54% 40vh at 92% 6%, rgba(24,117,178,.07), transparent 70%);
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  /* the one resting-shadow exception: an opened modal overlay, not a page
     element at rest (see DESIGN.md 2.1, Shadow Vocabulary, modal-lift) */
  :root:not([data-theme="dark"]) .modal-dialog {
    box-shadow: var(--modal-shadow);
  }

  /* default bezel: hairline border + a whisper of chromatic wash, no
     resting shadow, no full-perimeter gradient ring. Depth is the outer
     shell/inner core tonal step, not colored decoration. */
  :root:not([data-theme="dark"]) .bezel {
    border: 1px solid var(--line);
    background: var(--surface-wash-faint);
  }

  /* curated accent: the brand spectrum as a border, reserved for the small
     set of anchor moments (hero-adjacent featured card, the person behind
     the practice, the CTA, the modal), never blanket across every card */
  :root:not([data-theme="dark"]) .bezel--accent {
    border: 1px solid transparent;
    background-image: var(--surface-wash), var(--border-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  :root:not([data-theme="dark"]) .contact h2::before {
    content: "";
    display: block;
    width: 2.6rem;
    height: 3px;
    margin: 0 auto 1.2rem;
    border-radius: 2px;
    background: var(--brand-gradient);
  }

  :root:not([data-theme="dark"]) .positioning {
    position: relative;
    overflow: hidden;
  }
  :root:not([data-theme="dark"]) .positioning::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--brand-gradient);
  }
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(60% 46vh at 12% 0%, rgba(170,48,50,.09), transparent 72%),
    radial-gradient(54% 40vh at 92% 6%, rgba(24,117,178,.07), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

:root[data-theme="light"] .modal-dialog {
  box-shadow: var(--modal-shadow);
}

:root[data-theme="light"] .bezel {
  border: 1px solid var(--line);
  background: var(--surface-wash-faint);
}

:root[data-theme="light"] .bezel--accent {
  border: 1px solid transparent;
  background-image: var(--surface-wash), var(--border-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

:root[data-theme="light"] .contact h2::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: 3px;
  margin: 0 auto 1.2rem;
  border-radius: 2px;
  background: var(--brand-gradient);
}

:root[data-theme="light"] .positioning {
  position: relative;
  overflow: hidden;
}
:root[data-theme="light"] .positioning::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-gradient);
}

/* ===== light-only: per-section glow. Each major section gets its own soft
   radial, sized in vh/vw (not % of the document), so it reads consistently
   whether the page is tall and narrow (mobile) or short and wide (desktop) —
   the earlier body-level approach sized against total scroll height and
   simply vanished under wide desktop bento grids. Colors step through the
   brand spectrum top-to-bottom (red → wine → indigo → blue), so scrolling
   the page traces the same gradient the logo/hero already establish, one
   section-sized dose at a time instead of one wash for the whole page.
   isolation:isolate + z-index:-1 keeps each glow strictly behind that
   section's own content, never on top of text or cards. ===== */
/* the drifting orb field stays in light too (dark and light both get some
   ambient life), just much fainter than dark — --orb-opacity-base/-3 above
   already turn it down to a whisper. What's scoped light-only here is
   thinning out the RANGE it drifts across, so it reads as a soft presence
   near the top of the page rather than three big blobs roaming the full
   viewport height forever. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .orb--3 { display: none; }
  :root:not([data-theme="dark"]) .hero__visual .orb { display: none; }
}
:root[data-theme="light"] .orb--3 { display: none; }
:root[data-theme="light"] .hero__visual .orb { display: none; }

/* ===== light-only: servicios bento — one featured card keeps the brand
   gradient (icon + bezel--accent border, already curated), the other five
   go neutral/mono so the spectrum reads as a single accent, not wallpaper
   repeated six times. Each card then earns a thin brand hairline the moment
   it enters the viewport, via data-accent-inview + .in-view. ===== */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .bento__item:not(.bento__item--lg) .service-card__icon {
    background: var(--card-hi);
  }
}
:root[data-theme="light"] .bento__item:not(.bento__item--lg) .service-card__icon {
  background: var(--card-hi);
}

/* light-only: project thumbnail placeholder goes neutral paper instead of
   the same red→blue wash under all three cards — the hairline above (on
   card entry) is the color moment here, not the thumbnail backdrop. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .browser-frame__stage { background: var(--bg-alt); }
}
:root[data-theme="light"] .browser-frame__stage { background: var(--bg-alt); }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== keyboard focus ===== */
a, button, input, textarea, [tabindex] { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: .3rem;
}
.btn:focus-visible, .nav__cta:focus-visible { outline-offset: 4px; }
.project-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 999;
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-weight: 600;
  padding: .8rem 1.4rem;
  border-radius: var(--radius-sm);
  transition: top .25s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

html { scroll-behavior: smooth; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 480px) { html { font-size: 16.5px; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap {
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Large desktop / 2K / ultrawide: the visual layer (background, orbs) stays
   full-bleed; only the content container widens, and deliberately short of
   the viewport so real air remains on both sides even at 2560px+. */
@media (min-width: 1440px) { .wrap { max-width: 1320px; } }
@media (min-width: 1920px) { .wrap { max-width: 1400px; padding-inline: clamp(2.5rem, 3vw, 4rem); } }
@media (min-width: 2400px) { .wrap { max-width: 1520px; } }

/* ===== background texture ===== */

.noise {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.orb-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--orb-opacity-base);
  will-change: transform;
  transition: opacity .4s var(--ease);
}

.orb--1 { width: 46vw; height: 46vw; background: var(--red); top: -12vw; left: -10vw; animation: drift1 26s ease-in-out infinite; }
.orb--2 { width: 38vw; height: 38vw; background: var(--blue); bottom: -14vw; right: -8vw; animation: drift2 32s ease-in-out infinite; }
.orb--3 { width: 26vw; height: 26vw; background: var(--indigo); top: 40%; left: 60%; animation: drift3 22s ease-in-out infinite; opacity: var(--orb-opacity-3); }

@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(4vw, 6vw); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-5vw, -4vw); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-3vw, 4vw) scale(1.15); } }

main, header, footer { position: relative; z-index: 1; }

.particle-field {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.particle-field canvas { display: block; width: 100%; height: 100%; }
.orb-field.has-particles .particle-field { opacity: 1; }

/* ===== eyebrow / labels ===== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--surface-wash-soft);
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--blue));
  flex: none;
}

/* ===== nav ===== */

.nav {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: min(94vw, 900px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .55rem .6rem .55rem 1.2rem;
  border-radius: 999px;
  background: var(--nav-glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: border-color .5s var(--ease), background .5s var(--ease);
}

.nav.is-scrolled { border-color: var(--line-hi); background: var(--nav-glass-scrolled); }

body.admin-bar .nav { top: calc(32px + 1.25rem); }
@media (max-width: 782px) { body.admin-bar .nav { top: calc(46px + 1.25rem); } }

.nav__brand { display: flex; align-items: center; gap: .6rem; font-weight: 500; letter-spacing: .01em; font-size: .95rem; }
.nav__actions { display: flex; align-items: center; gap: .5rem; }

.nav__mark { width: 26px; height: 26px; flex: none; object-fit: contain; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  font-size: .82rem;
  color: var(--muted);
}

.nav__links a { position: relative; padding: .2rem 0; transition: color .4s var(--ease); }
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: linear-gradient(90deg, var(--red), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--text); }
  .nav__links a:hover::after { transform: scaleX(1); }
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .55rem .55rem 1.1rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: .8rem;
  font-weight: 500;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.nav__cta i {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--blue));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-style: normal; font-size: .8rem;
  transition: transform .45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
  .nav__cta:hover i { transform: translate(2px,-1px) scale(1.06); }
}

.theme-toggle {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-hi);
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: border-color .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { border-color: var(--blue); } }
.theme-toggle__icon {
  position: absolute; top: 50%; left: 50%;
  width: 17px; height: 17px;
  margin: -8.5px 0 0 -8.5px;
  color: var(--muted);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.theme-toggle__icon--sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
.theme-toggle__icon--moon { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle__icon--sun { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(.5); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle__icon--sun { opacity: 1; transform: rotate(0) scale(1); }
  :root:not([data-theme="dark"]) .theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(.5); }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle__icon { transition: opacity .2s ease; } }

.nav__burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-hi);
  position: relative;
  flex: none;
  background: transparent;
}
.nav__burger span {
  position: absolute; left: 11px; right: 11px; height: 1px; background: var(--text);
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 22px; }
.nav__burger span:nth-child(3) { top: 28px; }

.nav__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__overlay {
  position: fixed; inset: 0; z-index: 35;
  background: var(--overlay-glass);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  /* visibility:hidden also removes the links from tab order + a11y tree while
     the menu is closed; kept transitionable so the fade still plays */
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.nav__overlay.is-open { opacity: 1; pointer-events: auto; visibility: visible; }

.nav__overlay ul { display: flex; flex-direction: column; gap: 1.1rem; text-align: center; }
.nav__overlay a {
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-weight: 500;
  opacity: 0;
  transform: translateY(3rem);
  transition: transform .7s var(--ease-soft), opacity .7s var(--ease-soft);
}
.nav__overlay.is-open a { opacity: 1; transform: translateY(0); }
.nav__overlay.is-open a:nth-child(1) { transition-delay: .08s; }
.nav__overlay.is-open li:nth-child(2) a { transition-delay: .14s; }
.nav__overlay.is-open li:nth-child(3) a { transition-delay: .2s; }
.nav__overlay.is-open li:nth-child(4) a { transition-delay: .26s; }
.nav__overlay.is-open li:nth-child(5) a { transition-delay: .32s; }
.nav__overlay.is-open li:nth-child(6) a { transition-delay: .38s; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }
}

/* ===== buttons ===== */

.btn {
  --btn-fg: var(--bg);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .3rem .3rem 1.4rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--btn-fg);
  font-size: .88rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: box-shadow .4s var(--ease), transform 140ms var(--ease-out);
}
.btn:active { transform: scale(.98); transition: transform 140ms var(--ease-out); }
.btn i {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--blue));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-style: normal;
  transition: transform .45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: 0 16px 34px -14px rgba(24,117,178,.55); }
  .btn:hover i { transform: translate(3px,-2px) scale(1.05); }
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-hi);
  padding: .78rem 1.4rem;
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { border-color: var(--blue); }
}

/* glass pill: translucent surface + hairline, neutral (reads gray on dark,
   frosted white on light). Replaces bare text "teaser" links. */
.btn--glass {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  background: var(--surface-wash-soft);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform 140ms var(--ease-out);
}
.btn--glass span { display: inline-block; transition: transform .35s var(--ease-out); }
.btn--glass:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .btn--glass:hover { border-color: var(--line-hi); background: var(--surface-wash); }
  .btn--glass:hover span { transform: translateX(4px); }
}
.btn--glass:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ===== reveal ===== */

.reveal {
  opacity: 1;
  transform: none;
  filter: none;
}
.js .reveal {
  opacity: 0;
  transform: translateY(3rem);
  filter: blur(6px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft), filter .9s var(--ease-soft);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal--d1 { transition-delay: .08s; }
.reveal--d2 { transition-delay: .16s; }
.reveal--d3 { transition-delay: .24s; }
.reveal--d4 { transition-delay: .32s; }
.reveal--d5 { transition-delay: .4s; }
.reveal--d6 { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; filter: none; transition: opacity .4s ease; }
  .orb { animation: none; }
  .nav__overlay a { transform: none; transition: opacity .3s ease; }
}

/* ===== section basics ===== */

section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }
section[id] { scroll-margin-top: 6rem; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  max-width: 20ch;
}

.section-head p {
  max-width: 34ch;
  color: var(--muted);
  font-size: .98rem;
}

/* ===== hero ===== */

.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: 7rem;
}

.hero__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3rem;
  align-items: center;
}

.hero__eyebrow { margin-bottom: 1.6rem; }

/* Single dynamic H1: variants stack absolutely at the same position; the
   wrap takes a real block width from its column (no shrink-to-fit needed,
   since every variant is position:absolute and can't contribute one). JS
   still measures the incoming variant's own height and animates the
   container to match, so short variants don't leave a reserved gap for
   the longest one, but the resize is still a smooth transition, not a jump. */
.hero__rotator-wrap { position: relative; max-width: 100%; }

.hero__rotator {
  position: relative;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 3.4vw + .6rem, 3.6rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.18;
  max-width: 30ch;
  transition: height .6s var(--ease-out);
}

.hero__variant {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out);
}
/* no-JS / JS-failure fallback: only variant in the DOM keeps normal flow,
   so the H1 has real height instead of collapsing under position:absolute */
.hero__variant:only-child {
  position: static;
  opacity: 1;
  filter: none;
  transform: none;
}

.hero__variant.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.hero__variant.is-leaving {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-18px);
}

.hero__accent {
  font-style: normal;
  background-image: var(--brand-gradient);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .hero__variant { transition: opacity .3s ease; transform: none; filter: none; }
  .hero__variant.is-leaving { transform: none; filter: none; }
}

.hero p.lead {
  margin-top: 1.6rem;
  max-width: 44ch;
  font-size: 1.05rem;
  color: var(--muted);
}

.hero__actions { margin-top: 2.6rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }

.hero__note {
  margin-top: 2.8rem;
  font-family: var(--font-tech);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.hero__note strong { color: var(--muted); font-weight: 500; }

.hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__visual .orb {
  position: absolute;
  width: 70%; height: 70%;
  filter: blur(70px);
  opacity: var(--orb-opacity-hero);
  background: conic-gradient(from 180deg, var(--red), var(--wine), var(--indigo), var(--blue), var(--red));
  animation: spin 18s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.hero__visual img {
  position: relative;
  width: 62%;
  filter: drop-shadow(var(--mark-shadow));
  opacity: 0;
  transform: translateY(24px) scale(.94);
  animation: mark-in 1.1s var(--ease-out) .3s forwards, float 7s ease-in-out 1.4s infinite;
}

@keyframes mark-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@media (prefers-reduced-motion: reduce) {
  .hero__visual img { animation: mark-in .6s ease forwards; }
  .hero__visual .orb { animation: none; }
}

.hero__logo3d {
  display: none;
  position: relative;
  width: 92%;
  aspect-ratio: 1/1;
}
.hero__logo3d canvas { display: block; width: 100%; height: 100%; }

/* progressive enhancement: JS adds .has-3d once WebGL + motion are OK */
.hero__visual.has-3d img { display: none; }
.hero__visual.has-3d .hero__logo3d { display: block; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  /* H1 + lead + WhatsApp CTA stay first in source order so they land above
     the fold; the 3D mark comes after and shrinks, it's decoration, not the point. */
  .hero__visual { max-width: 220px; margin: 1.6rem auto 0; aspect-ratio: 1/1; }
}

/* mobile: shorter hero. After trimming the lead, a full 100dvh flex-centered
   hero left a large dead gap under the nav — anchor content near the top and
   let the section size to its content instead. */
@media (max-width: 640px) {
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-top: 6.5rem;
    padding-bottom: 2.5rem;
  }
}

/* ===== double bezel card ===== */

.bezel {
  padding: .45rem;
  border-radius: var(--radius-lg);
  background: var(--surface-wash);
  border: 1px solid var(--line);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}

.bezel__core {
  border-radius: calc(var(--radius-lg) - .45rem);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 1px var(--inset-hi);
  /* height: 100%; */
  position: relative;
  overflow: hidden;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}

/* ===== services bento ===== */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
}

.bento__item { grid-column: span 6; min-height: 240px; }
.bento__item--lg { grid-column: span 8; grid-row: span 2; min-height: 380px; }
.bento__item--sm { grid-column: span 4; min-height: 178px; }
.bento__item--eq3 { grid-column: span 4; min-height: 220px; }

@media (max-width: 900px) {
  .bento__item, .bento__item--lg, .bento__item--sm, .bento__item--eq3 { grid-column: span 12; grid-row: auto; min-height: unset; }
}

.service-card {
  padding: 1.9rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%;
  position: relative; overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle 220px at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,.14), transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.service-card.is-glaring::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .service-card::before { display: none; }
}

.service-card__icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(170,48,50,.25), rgba(24,117,178,.25));
  border: 1px solid var(--line-hi);
  font-size: 1.2rem;
  transform-style: preserve-3d;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card__icon svg { width: 23px; height: 23px; color: var(--text); }
.service-card:hover .service-card__icon {
  transform: perspective(300px) rotateY(18deg) rotateX(-10deg) translateZ(4px);
  box-shadow: -8px 8px 16px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.35);
}

@media (prefers-reduced-motion: reduce) {
  .service-card__icon { transition: none; }
  .service-card:hover .service-card__icon { transform: none; }
}

.service-card h3 { margin-top: 1.4rem; font-size: 1.28rem; font-weight: 600; letter-spacing: -.01em; }
.service-card p { margin-top: .6rem; color: var(--muted); font-size: .92rem; max-width: 40ch; }
.service-card__meta { display: block; margin-top: .55rem; font-size: .72rem; letter-spacing: .02em; color: var(--muted-dim); max-width: 40ch; }

.bento__item--lg .service-card h3 { font-size: 1.7rem; }
.bento__item--lg .service-card p { font-size: 1rem; max-width: 34ch; }

.service-card__tag {
  margin-top: 1.4rem;
  align-self: flex-start;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

/* ===== nosotros ===== */

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

.pillar { padding: 2rem; }
.pillar__num {
  font-size: .8rem; color: var(--muted-dim); letter-spacing: .1em;
  display: flex; align-items: center; gap: .7rem;
}
.pillar__num::after { content: ""; height: 1px; flex: 1; background: var(--line-hi); }
.pillar h3 { margin-top: 1.1rem; font-size: 1.3rem; font-weight: 600; }
.pillar p { margin-top: .8rem; color: var(--muted); font-size: .92rem; }

.about-copy { max-width: 62ch; color: var(--muted); font-size: 1.02rem; margin-bottom: 3rem; }
.about-copy strong { color: var(--text); font-weight: 500; }

.stack-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 3rem; }
.stack-pill {
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-wash-soft);
  font-size: .78rem; color: var(--muted);
}

/* ===== experiencia / timeline ===== */

.positioning {
  padding: 2.2rem clamp(1.6rem, 4vw, 3rem);
  margin-bottom: 3.5rem;
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, rgba(170,48,50,.14), rgba(24,117,178,.14));
  border: 1px solid var(--line-hi);
}
.positioning p {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
  max-width: 56ch;
}
.positioning p strong { font-weight: 600; color: var(--blue); }

.timeline { position: relative; padding-left: clamp(1.5rem, 4vw, 3rem); }
.timeline::before {
  content: "";
  position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 1px;
  background: linear-gradient(180deg, var(--red), var(--wine), var(--indigo), var(--blue));
  opacity: .55;
}

.tl-item {
  position: relative;
  padding: 0 0 3rem 2.2rem;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute; left: -6px; top: .4rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--blue);
}

.tl-item__card {
  padding: 1.6rem clamp(1.4rem, 3vw, 2rem);
  transform: rotate(var(--tilt, 0deg));
}
.tl-item:nth-child(odd) .tl-item__card { --tilt: -.4deg; }
.tl-item:nth-child(even) .tl-item__card { --tilt: .35deg; }

.tl-item__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem; margin-bottom: .6rem; }
.tl-item__period { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dim); font-weight: 500; }
.tl-item__role { font-size: 1.25rem; font-weight: 500; }
.tl-item__org { color: var(--muted); font-size: .95rem; }
.tl-item__desc { margin-top: .7rem; color: var(--muted); font-size: .92rem; max-width: 60ch; }
.tl-item__desc strong { color: var(--text); font-weight: 600; }

.tl-item__tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.tl-item__tags span {
  font-size: .78rem; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface-wash-faint);
}

.tl-item--devcog::before { border-color: var(--red); }
.tl-item--devcog .tl-item__period { color: var(--red); }
/* explicit label separating the own-brand track from salaried corporate roles */
.tl-item__track {
  font-family: var(--font-tech);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: .12rem .5rem;
  opacity: .9;
}
.tl-item--devcog .tl-item__role { font-size: 1.45rem; }

.tl-item__also { margin-top: .9rem; font-size: .82rem; color: var(--muted-dim); }
.tl-item__also strong { color: var(--muted); font-weight: 500; }

.timeline-divider {
  position: relative;
  padding: 0 0 1.4rem 2.2rem;
  margin-top: -.4rem;
}
.timeline-divider span {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dim);
}

.founder-card { margin-top: 4rem; }
@media (max-width: 720px) { .founder-card { text-align: center; } }

.founder-card h3 { font-size: 1.4rem; font-weight: 600; }
.founder-card__role { color: var(--muted); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-top: .3rem; }
.founder-card__links { margin-top: 1rem; display: flex; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 720px) { .founder-card__links { justify-content: center; } }
.founder-card__links a {
  font-size: .82rem; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-hi); transition: border-color .4s var(--ease), transform .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .founder-card__links a:hover { border-color: var(--blue); transform: translateY(-2px); }
}

/* ===== trabajos, project cards (case-study portfolio) ===== */

.projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
@media (max-width: 1000px) { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .projects { grid-template-columns: 1fr; } }

.project-card {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .5s var(--ease);
}
.project-card .bezel__core { padding: .7rem .7rem 1.5rem; display: flex; flex-direction: column; }
@media (hover: hover) and (pointer: fine) {
  .project-card:hover { transform: translateY(-5px); }
  .project-card:hover .browser-frame { border-color: var(--line-hi); }
  .project-card:hover .project-card__cta span { transform: translateX(4px); }
}

/* browser-chrome frame wrapping a live, real preview of the project */
.browser-frame {
  border-radius: calc(var(--radius-md) - .3rem);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-hi);
  transition: border-color .5s var(--ease);
}
.browser-frame__bar {
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--line);
}
.browser-frame__bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-hi); }
.browser-frame__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(170,48,50,.14), rgba(24,117,178,.14));
}
.browser-frame__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  clip-path: inset(0 0 0 100%);
  transform: scale(1.06);
  transition: clip-path 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.is-visible .browser-frame__stage img { clip-path: inset(0 0 0 0); }
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .browser-frame__stage img { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .browser-frame__stage img { transition: opacity .3s ease; clip-path: none; transform: none; opacity: 0; }
  .reveal.is-visible .browser-frame__stage img { opacity: 1; }
}
.browser-frame__fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700; color: var(--muted-dim);
  opacity: .5;
}

.project-card__body { padding: 1.4rem 1rem .2rem; }
.project-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.project-card__top h3 { font-size: 1.15rem; font-weight: 600; }
.project-card__type { display: block; margin-top: .3rem; font-size: .82rem; color: var(--muted); }

.project-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.project-card__tags span {
  font-size: .72rem; padding: .32rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted-dim); background: var(--surface-wash-faint);
}

.project-card__result {
  margin-top: .9rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--muted);
}

.project-card__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.2rem;
  font-size: .85rem; color: var(--muted);
}
.project-card__cta span { display: inline-block; transition: transform .35s var(--ease-out); }

/* ===== case study modal ===== */

.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: var(--modal-glass);
  backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }

.modal-dialog {
  width: min(100%, 940px);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  transform: translateY(24px) scale(.97);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
.modal-overlay.is-open .modal-dialog { transform: translateY(0) scale(1); opacity: 1; }
.modal-dialog .bezel__core { padding: clamp(1.4rem, 4vw, 2.4rem); overflow: visible; }

.modal__close {
  position: sticky; top: 0; float: right; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-hi); background: var(--card);
  font: inherit; font-size: 1.1rem; color: var(--muted); cursor: pointer;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .modal__close:hover { border-color: var(--blue); color: var(--text); } }

.modal__eyebrow { display: block; }
.modal__head h3 { margin-top: .6rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.01em; }
.modal__type { margin-top: .3rem; color: var(--muted); font-size: .95rem; }

.modal__tabs { display: flex; gap: .5rem; margin-top: 1.6rem; }
.modal__tabs button {
  font: inherit; font-size: .78rem; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-hi); background: none; color: var(--muted); cursor: pointer;
  transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.modal__tabs button.is-active { color: var(--text); border-color: var(--blue); background: rgba(24,117,178,.12); }

.modal__gallery { margin-top: 1rem; }
.modal__frame { display: none; }
.modal__frame.is-active { display: block; }
.modal__frame .browser-frame__stage { aspect-ratio: 16 / 10; }
.modal__frame--mobile { max-width: 340px; margin-inline: auto; }
.modal__frame--mobile .browser-frame__stage { aspect-ratio: 9 / 18; }
.modal__frame .browser-frame__stage img { clip-path: none; transform: none; transition: opacity .35s ease; opacity: 0; }
.modal__frame .browser-frame__stage img.is-loaded { opacity: 1; }

.modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.6rem;
  margin-top: 2.2rem;
}
@media (max-width: 900px) { .modal__grid { grid-template-columns: 1fr; gap: 1.2rem; } }

.modal-dialog span.label {
  display: block; font-weight: 500; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .5rem;
}
.modal__col p { font-size: .96rem; color: var(--muted); }

.modal__aporte { margin-top: 1.8rem; }
.modal__aporte .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.modal__aporte .chips span {
  font-size: .8rem; padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--line-hi); color: var(--text); background: var(--surface-wash-soft);
}

.modal__caps { margin-top: 1.8rem; }
.modal__caps .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.modal__caps .chips span {
  font-size: .78rem; padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface-wash-faint);
}

.modal__tech {
  margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-family: var(--font-tech); font-size: .78rem; color: var(--muted-dim);
}

.modal__foot {
  margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.modal__foot .url { font-family: var(--font-tech); font-size: .8rem; color: var(--muted-dim); }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-dialog, .project-card { transition: none; }
}

/* ===== contacto ===== */

.contact {
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.contact h2 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -.01em; max-width: 22ch; margin: 0 auto; }
.contact p.lead { margin: 1.2rem auto 2.4rem; max-width: 48ch; color: var(--muted); }

.contact__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  text-align: left;
  margin-top: 2.5rem;
}
@media (max-width: 800px) { .contact__grid { grid-template-columns: 1fr; } }
.contact__grid > * { min-width: 0; }

/* mobile: outer bezel + inner core both padded ~2.5rem left ~165px of content
   on a 375px screen (CTA wrapped, contact cells overflowed). Keep the accent
   frame thin and give the core a mobile-sized padding (overrides inline style). */
@media (max-width: 640px) {
  .contact { padding: .45rem; }
  .contact > .bezel__core { padding: 2.2rem 1.1rem !important; }
}

.contact__cell .bezel__core {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem;
}
.contact__cell-icon {
  flex: none;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--red), var(--blue));
  color: #fff;
}
.contact__cell-icon svg { width: .85rem; height: .85rem; }
.contact__cell a {
  min-width: 0;
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact__cell a:hover { color: var(--blue); }

/* ===== contact form (mail fallback next to the WhatsApp CTA) ===== */
.contact-form-wrap { text-align: left; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.contact-form-wrap > .label { display: block; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form__field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.contact-form__field label { font-size: .82rem; color: var(--muted); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  font: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  transition: border-color .3s var(--ease);
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus { border-color: var(--blue); }
.contact-form textarea { resize: vertical; min-height: 6rem; }
.contact-form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form .hidden-fields-container { display: none !important; }
.wpcf7 .screen-reader-response {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.contact-form__submit { margin-top: .3rem; }
.contact-form__note { margin-top: .8rem; font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.contact-form__note.is-error { color: var(--red); }
.contact-form__note.is-ok { color: var(--blue); }

/* ===== Contact Form 7 ===== */
.contact-form > label {
  display: block;
  margin-bottom: 1.1rem;
  font-size: .82rem;
  color: var(--muted);
}
.contact-form .wpcf7-form-control-wrap { display: block; margin-top: .5rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea { width: 100%; }
.contact-form .wpcf7-not-valid-tip { display: block; margin-top: .3rem; font-size: .78rem; color: var(--red); }
.contact-form .wpcf7-response-output { margin: .8rem 0 0; padding: 0; border: 0; font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.contact-form.invalid .wpcf7-response-output,
.contact-form.failed .wpcf7-response-output,
.contact-form.spam .wpcf7-response-output,
.contact-form.aborted .wpcf7-response-output { color: var(--red); }
.contact-form.sent .wpcf7-response-output { color: var(--blue); }
.contact-form .wpcf7-spinner { margin: 0 0 0 .6rem; vertical-align: middle; }
.contact-form .cf-turnstile { margin-top: 1.1rem; }
.contact-form input.wpcf7-submit {
  font: inherit;
  font-weight: 500;
  font-size: .88rem;
  color: var(--bg);
  background: var(--text);
  border: none;
  border-radius: 999px;
  padding: .78rem 1.6rem;
  margin-top: 1.1rem;
  cursor: pointer;
  transition: box-shadow .4s var(--ease), transform 140ms var(--ease-out);
}
.contact-form input.wpcf7-submit:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .contact-form input.wpcf7-submit:hover { box-shadow: 0 16px 34px -14px rgba(24,117,178,.55); }
}

/* ===== teasers (home) ===== */

.teaser-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-color: rgba(24,117,178,.35);
  transition: color .35s var(--ease), text-decoration-color .35s var(--ease);
}
.teaser-link span { display: inline-block; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .teaser-link:hover { color: var(--text); text-decoration-color: currentColor; }
  .teaser-link:hover span { transform: translateX(4px); }
}

.exp-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  align-items: stretch;
}
@media (max-width: 800px) { .exp-teaser { grid-template-columns: 1fr; } }

.exp-teaser__copy { padding: clamp(1.8rem, 4vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; }
.exp-teaser__copy h3 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
.exp-teaser__copy p { margin-top: 1rem; color: var(--muted); font-size: .95rem; max-width: 46ch; }
.exp-teaser__copy .teaser-link { margin-top: 1.4rem; }

.exp-teaser__timeline { padding: clamp(1.8rem, 4vw, 2.6rem); display: flex; flex-direction: column; gap: 1.1rem; justify-content: center; }
.exp-teaser__row { display: flex; align-items: baseline; gap: 1rem; }
.exp-teaser__row .period { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dim); flex: none; width: 6.5rem; }
.exp-teaser__row .role { font-size: .92rem; color: var(--muted); }
.exp-teaser__row .role strong { color: var(--text); font-weight: 500; }

/* ===== pain points, user-controlled problem navigator, deliberately clean,
   no glass, contrast to bento sections =====
   Base rules (below) are the accessible fallback: a normal static flow, no
   absolute stacking, no controls. JS adds `.is-enhanced` on the section only
   on desktop, only when `prefers-reduced-motion` allows it, and only then
   does the min-width:901px block below turn the stage into a one-at-a-time,
   arrow-navigated sequence. Progression is 100% user-driven: no scroll
   listener, no timer, no autoplay. Fallback and enhanced share
   `.pain-scroll__item.is-active` for the tint accent. */

.pain-scroll__panel.bezel { max-width: 62rem; transition: max-width .4s var(--ease); }

.pain-scroll__core {
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.6rem, 4vw, 2.6rem);
  /* lift the panel off the near-black bg (dark) / paper (light) for clearer
     figure-ground separation, per contrast pass */
  background: var(--card-hi);
  border-color: var(--line-hi);
}

.pain-scroll__stage { position: relative; }

.pain-scroll__item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line);
}
.pain-scroll__item:first-child { padding-top: 0; }
.pain-scroll__item:last-child { border-bottom: none; }

.pain-scroll__num {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: .15rem;
  border-radius: 50%;
  border: 1px solid var(--line-hi);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-tech);
  font-size: .74rem;
  color: var(--muted-dim);
  transition: border-color .5s var(--ease), color .5s var(--ease), width .5s var(--ease-out), height .5s var(--ease-out), font-size .5s var(--ease-out);
}

.pain-scroll__item.is-active .pain-scroll__num {
  border-color: var(--pain-tint, var(--blue));
  color: var(--pain-tint, var(--blue));
}

.pain-scroll__item p {
  font-size: 1.12rem;
  color: var(--text);
  font-weight: 400;
  max-width: 46ch;
  transition: font-size .5s var(--ease-out), max-width .5s var(--ease-out);
}

.pain-note {
  margin-top: 2.4rem;
  font-family: var(--font-tech);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ===== controls: hidden by default (mobile/fallback shows the full static
   list, no navigator needed); revealed only in enhanced desktop mode. ===== */
.pain-scroll__controls { display: none; }

.pain-scroll__arrow {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: transparent;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease), transform .2s var(--ease-out);
}
.pain-scroll__arrow svg { width: 1.05rem; height: 1.05rem; }

@media (hover: hover) and (pointer: fine) {
  .pain-scroll__arrow:not(:disabled):hover {
    border-color: var(--pain-active-tint, var(--blue));
    color: var(--pain-active-tint, var(--blue));
    background: rgba(24, 117, 178, .08);
  }
  .pain-scroll__arrow:not(:disabled):hover[data-dir="prev"] { transform: translateX(-2px); }
  .pain-scroll__arrow:not(:disabled):hover[data-dir="next"] { transform: translateX(2px); }
}

.pain-scroll__arrow:disabled { opacity: .28; cursor: default; }

.pain-scroll__count {
  font-family: var(--font-tech);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--muted-dim);
  min-width: 4.5rem;
  text-align: center;
}

/* ===== enhanced mode: desktop, motion allowed. JS-gated via .is-enhanced.
   No sticky, no scroll listener: the active item only ever changes from a
   button click or an arrow key, never from scroll position. ===== */
@media (min-width: 901px) {
  .pain-scroll.is-enhanced .pain-scroll__panel.bezel {
    max-width: 44rem;
    margin: 0 auto;
    width: 100%;
  }

  .pain-scroll.is-enhanced .pain-scroll__core::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--pain-active-tint, var(--blue));
    transition: background-color .5s var(--ease);
  }

  .pain-scroll.is-enhanced .pain-scroll__stage {
    overflow: hidden;
    min-height: clamp(9.5rem, 17vw, 12.5rem);
    transition: height .4s var(--ease-out);
  }

  .pain-scroll.is-enhanced .pain-scroll__item {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: .4rem 0 1.2rem;
    border-bottom: none;
    opacity: 0;
    transform: translateX(0);
    pointer-events: none;
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  }

  .pain-scroll.is-enhanced .pain-scroll__item.is-active {
    position: relative;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  /* pre-positioned instantly (no transition) just before entering, so the
     following frame can animate it in from that side */
  .pain-scroll.is-enhanced .pain-scroll__item.is-enter-left,
  .pain-scroll.is-enhanced .pain-scroll__item.is-enter-right {
    transition: none;
  }
  .pain-scroll.is-enhanced .pain-scroll__item.is-enter-left,
  .pain-scroll.is-enhanced .pain-scroll__item.is-exit-left {
    transform: translateX(-22px);
  }
  .pain-scroll.is-enhanced .pain-scroll__item.is-enter-right,
  .pain-scroll.is-enhanced .pain-scroll__item.is-exit-right {
    transform: translateX(22px);
  }

  .pain-scroll.is-enhanced .pain-scroll__item .pain-scroll__num {
    width: 2.6rem;
    height: 2.6rem;
    font-size: .92rem;
  }

  .pain-scroll.is-enhanced .pain-scroll__item p {
    font-size: 1.4rem;
    line-height: 1.4;
    max-width: 34ch;
  }

  .pain-scroll.is-enhanced .pain-scroll__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pain-scroll.is-enhanced .pain-scroll__item {
    transition: opacity .2s ease;
  }
  .pain-scroll.is-enhanced .pain-scroll__item.is-enter-left,
  .pain-scroll.is-enhanced .pain-scroll__item.is-enter-right,
  .pain-scroll.is-enhanced .pain-scroll__item.is-exit-left,
  .pain-scroll.is-enhanced .pain-scroll__item.is-exit-right {
    transform: none;
  }
  .pain-scroll.is-enhanced .pain-scroll__stage { transition: none; }
}

/* ===== cómo trabajamos, 3 steps ===== */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding: 2.2rem 1.8rem; }
.step__line {
  position: absolute; top: 2.2rem; left: 0; right: 0; height: 1px;
  background: var(--line-hi);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .9s var(--ease-out);
}
.step.is-visible .step__line { transform: scaleX(1); }
@media (max-width: 800px) { .step__line { display: none; } }

.step__num {
  font-family: var(--font-tech);
  font-weight: 500;
  font-size: 2rem;
  background: var(--brand-gradient);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step:nth-child(1) .step__num { background-position: 100% 0%; }
.step:nth-child(2) .step__num { background-position: 50% 0%; }
.step:nth-child(3) .step__num { background-position: 0% 0%; }
.step h3 { margin-top: 1rem; font-size: 1.2rem; font-weight: 600; }
.step p { margin-top: .6rem; color: var(--muted); font-size: .92rem; }

/* ===== sobre Nicolás ===== */

.about-nico {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3rem);
}
@media (max-width: 720px) { .about-nico { grid-template-columns: 1fr; text-align: center; } }

.about-nico__avatar {
  width: 148px; height: 148px; border-radius: 50%; flex: none;
  align-self: start;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 2rem; color: #fff;
  background: var(--pain-3);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    inset 0 -10px 16px rgba(0,0,0,.3),
    0 10px 24px rgba(0,0,0,.3);
  backdrop-filter: blur(6px);
}
.about-nico__avatar span { position: relative; z-index: 1; }
.about-nico__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: relative; z-index: 1; }
.about-nico__avatar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 35%, transparent 55%);
}
.about-nico__avatar::after {
  content: '';
  position: absolute; width: 46%; height: 22%; top: 12%; left: 16%;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  filter: blur(6px);
  transform: rotate(-18deg);
}
@media (max-width: 720px) { .about-nico__avatar { margin: 0 auto; } }

.about-nico h3 { font-size: 1.5rem; font-weight: 600; }
.about-nico__role { font-family: var(--font-tech); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.about-nico p.copy { margin-top: 1.1rem; color: var(--muted); font-size: 1.02rem; max-width: 72ch; }
.about-nico .philosophy { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.about-nico .philosophy span { font-size: .95rem; color: var(--text); }
.about-nico .philosophy span strong { font-weight: 600; }
@media (max-width: 720px) { .about-nico .philosophy { align-items: center; } }

.about-nico__criteria {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 2rem;
  list-style: none;
  padding: 0;
}
@media (max-width: 720px) { .about-nico__criteria { grid-template-columns: 1fr; } }
.about-nico__criteria li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.5;
}
.about-nico__criteria li::before {
  content: "•";
  position: absolute;
  left: .1rem;
  top: -.05rem;
  color: var(--blue);
  font-size: 1.2rem;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .about-nico__criteria { text-align: left; margin-left: auto; margin-right: auto; }
}

.about-nico__exp {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.about-nico__exp p { color: var(--muted); font-size: .95rem; max-width: 78ch; line-height: 1.55; }
.about-nico__exp p strong { color: var(--text); font-weight: 600; }
.about-nico__exp .btn--glass { margin-top: 1.1rem; }

/* continuity / acompañamiento: continuity of a project, presented lighter than
   the service cards so it never reads as a main offer. */
.continuity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.8rem, 4vw, 2.8rem);
}
@media (max-width: 820px) { .continuity { grid-template-columns: 1fr; } }
.continuity__icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(170,48,50,.25), rgba(24,117,178,.25));
  border: 1px solid var(--line-hi);
  margin-bottom: 1rem;
}
.continuity__icon svg { width: 23px; height: 23px; color: var(--text); }
.continuity__intro h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin-top: .6rem;
}
.continuity__intro p { margin-top: .8rem; color: var(--muted); font-size: .98rem; max-width: 46ch; }
.continuity__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.continuity__list li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
}
.continuity__list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--blue);
  font-weight: 700;
}

/* ===== sub-page header ===== */

.page-header { padding-top: 9rem; padding-bottom: 2rem; }
.page-header .eyebrow { margin-bottom: 1.4rem; }
.page-header h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.01em; max-width: 22ch; }
.page-header p.lead { margin-top: 1.2rem; max-width: 52ch; color: var(--muted); font-size: 1.02rem; }

/* fast-read summary: what the experience means for a client, above the deep
   chronological timeline (which stays the second read). */
.exp-tldr {
  margin-top: 1.6rem;
  max-width: 60ch;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.exp-tldr li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
}
.exp-tldr li::before {
  content: "→";
  position: absolute;
  left: 0; top: 0;
  color: var(--blue);
  font-weight: 600;
}
.exp-tldr li strong { color: var(--text); font-weight: 600; }

/* ===== footer ===== */

footer { padding: 3rem 0 2.4rem; border-top: 1px solid var(--line); }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.footer__nav { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.footer__nav a:hover { color: var(--text); }
.footer__meta { font-size: .78rem; color: var(--muted-dim); margin-top: 1.6rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }

/* ===== misc ===== */

/* ===== technical tier, IBM Plex Mono, reserved for literal tech-stack names/metrics ===== */
.tl-item__tags span,
.stack-pill {
  font-family: var(--font-tech);
}

/* labels/nav/metadata below are UI text, not technical content: they stay on
   IBM Plex Sans (the default body font) at label weight, per the definitive
   typography system: Ubuntu is H1/H2 only, Plex Mono is tech-stack-name only. */
.footer__brand,
.exp-teaser__row .period,
.footer__meta,
.pillar__num {
  font-weight: 500;
}

::selection { background: var(--blue); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== page transition (particle veil) ===== */
#pageTransition {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: var(--bg);
}
#pageTransition canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* set synchronously by the theme-guard inline script, before first paint,
   so a page reached via internal nav starts fully covered instead of
   flashing the browser's default background while it loads. */
html[data-pt="enter"] #pageTransition { opacity: 1; }