/* Reset explícito que sustituye Tailwind Preflight; no se carga ninguna librería. */
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; }
body, h1, h2, h3, h4, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
img, svg { display: block; max-width: 100%; vertical-align: middle; }
summary { display: list-item; }

/* MileLab · base de marca v1.
 * Valores recuperados de Signature el 16/09/2026. Sin fuentes externas.
 * Reutilizable: importar antes del tema de cada aplicación.
 * Procedencia, muestras y reglas: docs/MARCA.md.
 */
:root {
  --brand-ink: #211537;
  --brand-night: #20152d;
  --brand-muted: #625970;
  --brand-paper: #fbf8f3;
  --brand-ivory: #fffaf6;
  --brand-lilac: #d8c6ea;
  --brand-soft: #f2edfa;
  --brand-line: #d6d0e7;
  --brand-on-dark: #ded6e5;
  --brand-violet: #6b4eff;
  --brand-white: #ffffff;

  /* Extensión ya usada en la web clara, inspirada en el vídeo; no procede del CSS de Signature. */
  --brand-amethyst: #89769d;
  --brand-gold: #bf9660;

  --brand-font-display: Georgia, 'Times New Roman', serif;
  --brand-font-body: Arial, 'Segoe UI', sans-serif;
  --brand-display-weight: 400;
  --brand-display-tracking: -.045em;

  /* Matices derivados: se ajustan con la base, sin elegir nuevos hexadecimales. */
  --brand-lilac-soft: color-mix(in srgb, var(--brand-lilac) 45%, var(--brand-ivory));
  --brand-lilac-mid: color-mix(in srgb, var(--brand-lilac) 65%, var(--brand-amethyst));
  --brand-gold-soft: color-mix(in srgb, var(--brand-gold) 22%, var(--brand-ivory));
  --brand-focus: color-mix(in srgb, var(--brand-ink) 70%, var(--brand-amethyst));
}

/* Tema claro: decisiones de uso sobre la base compartida de brand.css. */
:root {
  color-scheme: light;
  font-synthesis: none;
  --ink: var(--brand-ink);
  --ink-soft: var(--brand-muted);
  --page-background: var(--brand-paper);
  --surface: var(--brand-ivory);
  --surface-soft: var(--brand-soft);
  --accent: var(--brand-amethyst);
  --accent-strong: var(--brand-focus);
  --on-accent: var(--brand-white);
  --border: color-mix(in srgb, var(--brand-muted) 18%, transparent);
  --shadow: 0 24px 70px color-mix(in srgb, var(--brand-ink) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 82%, transparent);
  --shadow-soft: 0 10px 34px color-mix(in srgb, var(--brand-ink) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 78%, transparent);
  --font-display: var(--brand-font-display);
  --font-body: var(--brand-font-body);

  --action-start: var(--brand-ivory);
  --action-middle: var(--brand-lilac);
  --action-end: var(--brand-lilac-mid);
  --action-hover-start: var(--brand-paper);
  --action-hover-middle: var(--brand-lilac-soft);
  --action-hover-end: color-mix(in srgb, var(--brand-lilac-mid) 75%, var(--brand-ivory));
  --wash-warm: var(--brand-gold-soft);
  --wash-cool: var(--brand-soft);
  --wash-lilac: var(--brand-lilac-soft);
  --wash-rose: color-mix(in srgb, var(--brand-lilac) 15%, var(--brand-ivory));
  --status-product: var(--brand-gold-soft);
  --status-development: var(--brand-lilac-soft);
  --status-experimental: var(--brand-soft);

  /* Compatibilidad con los componentes recuperados y sus ilustraciones. */
  --violet: var(--accent);
  --violet-dark: var(--accent-strong);
  --lavender: var(--brand-soft);
  --cream: var(--brand-paper);
  --paper: var(--brand-ivory);
  --blush: var(--wash-rose);
  --ice: var(--wash-cool);
  --mint: var(--brand-lilac);
  --peach: var(--brand-gold);
  --signature-ivory: var(--brand-ivory);
  --signature-lilac: var(--brand-lilac);
  --signature-amethyst: var(--brand-amethyst);
  --signature-plum: var(--brand-ink);
  --signature-gold: var(--brand-gold);
}



*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink);
  background:
    radial-gradient(circle at 3% 2%, color-mix(in srgb, var(--brand-gold-soft) 72%, transparent), transparent 25rem),
    radial-gradient(circle at 91% 9%, color-mix(in srgb, var(--brand-lilac) 72%, transparent), transparent 28rem),
    radial-gradient(circle at 75% 52%, color-mix(in srgb, var(--wash-cool) 42%, transparent), transparent 32rem),
    linear-gradient(150deg, var(--brand-ivory) 0%, var(--wash-rose) 34%, var(--wash-lilac) 69%, var(--wash-cool) 100%);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
main, .site-footer { position: relative; z-index: 1; }
.site-backdrop {
  position: fixed; z-index: 0; inset: 72px 0 0; overflow: hidden;
  pointer-events: none; contain: paint; transform: translateZ(0);
}
.site-backdrop::before, .site-backdrop::after { position: absolute; z-index: 1; inset: 0; content: ""; }
.site-backdrop::before {
  background: none;
}
.site-backdrop::after {
  background: none;
}
.site-backdrop img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  object-position: right center; opacity: 1; filter: saturate(1.12) contrast(1.1) drop-shadow(0 28px 32px color-mix(in srgb, var(--brand-ink) 14%, transparent));
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.02; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--violet-dark); outline-offset: 4px; border-radius: 4px; }
::selection { color: var(--brand-white); background: var(--violet); }

.shell { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.skip-link {
  position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 14px;
  color: var(--brand-white); background: var(--ink); border-radius: 12px; transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.eyebrow {
  margin-bottom: 1rem; color: var(--violet-dark); font-size: .7rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase;
}

.site-header {
  position: sticky; z-index: 100; top: 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-white) 60%, transparent);
  background: color-mix(in srgb, var(--brand-paper) 72%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.header-inner { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 780; letter-spacing: -.03em; }
.brand-mark {
  display: grid; width: 38px; height: 38px; place-items: center; overflow: visible;
  border: 1px solid color-mix(in srgb, var(--brand-white) 76%, transparent); border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 58%, transparent), color-mix(in srgb, var(--brand-lilac) 22%, transparent));
  box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.brand-mark img { width: 48px; height: 48px; max-width: none; object-fit: contain; filter: drop-shadow(0 5px 8px color-mix(in srgb, var(--brand-ink) 20%, transparent)); }
.desktop-nav { display: none; align-items: center; gap: clamp(1.2rem, 2vw, 1.75rem); }
.desktop-nav a { position: relative; color: var(--ink-soft); font-size: .84rem; font-weight: 650; white-space: nowrap; }
.desktop-nav a::after { position: absolute; right: 0; bottom: -.45rem; left: 0; height: 1px; background: var(--violet); content: ""; transform: scaleX(0); transition: transform 180ms ease; }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.desktop-nav a[aria-current="page"] { color: var(--ink); }
.header-cta.button { display: none; min-height: 42px; padding: .55rem .85rem; align-items: center; gap: .7rem; border-radius: 13px; font-size: .8rem; font-weight: 780; }
.mobile-nav { position: relative; }
.mobile-nav summary { display: grid; width: 44px; height: 44px; cursor: pointer; list-style: none; place-content: center; gap: 6px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--brand-white) 62%, transparent); }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary .site-icon { width:22px; height:22px; }
.mobile-nav .menu-close-icon,.mobile-nav[open] .menu-open-icon { display:none; }
.mobile-nav[open] .menu-close-icon { display:block; }
.mobile-nav nav {
  position: absolute; top: 50px; right: 0; display: grid; width: min(310px, calc(100vw - 36px)); padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-white) 88%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--brand-ivory) 96%, transparent);
  box-shadow: var(--shadow); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.mobile-nav nav a { padding: 13px 12px; border-bottom: 1px solid var(--border); font-weight: 700; }
.mobile-nav nav a[aria-current="page"] { color: var(--violet-dark); }
.mobile-nav nav a:last-child {
  margin-top: 8px; border: 1px solid color-mix(in srgb, var(--brand-white) 82%, transparent); border-radius: 12px;
}

.hero { position: relative; display: grid; min-height: calc(100svh - 72px); padding-block: 3.5rem 2.5rem; align-items: center; gap: 3.5rem; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 15ch; margin-bottom: 1.5rem; font-size: clamp(3.2rem, 13.5vw, 7.1rem); font-weight: var(--brand-display-weight); letter-spacing: -.065em; }
.hero-lead { max-width: 57ch; margin-bottom: 1.75rem; color: var(--ink-soft); font-size: clamp(1rem, 2.6vw, 1.24rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.button {
  display: inline-flex; min-height: 52px; padding: .85rem 1.15rem; align-items: center; justify-content: space-between;
  gap: 1.25rem; border: 1px solid transparent; border-radius: 16px; font-size: .88rem; font-weight: 800;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary,
.mobile-primary-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--brand-white) 82%, transparent);
  color: var(--ink);
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--brand-white) 20%, transparent), color-mix(in srgb, var(--wash-rose) 5%, transparent) 48%, color-mix(in srgb, var(--brand-white) 14%, transparent)),
    radial-gradient(ellipse at 82% 18%, color-mix(in srgb, var(--brand-gold-soft) 82%, transparent) 0 13%, transparent 44%),
    radial-gradient(ellipse at 65% 92%, color-mix(in srgb, var(--brand-gold) 68%, transparent) 0 18%, transparent 52%),
    radial-gradient(ellipse at 28% 14%, color-mix(in srgb, var(--brand-amethyst) 70%, transparent) 0 17%, transparent 52%),
    radial-gradient(ellipse at 8% 78%, color-mix(in srgb, var(--brand-gold) 61%, transparent) 0 15%, transparent 49%),
    linear-gradient(126deg, color-mix(in srgb, var(--brand-lilac) 82%, transparent), color-mix(in srgb, var(--wash-rose) 76%, transparent) 52%, color-mix(in srgb, var(--brand-gold-soft) 82%, transparent));
  background-size: auto, 150% 190%, 145% 175%, 150% 180%, 135% 165%, auto;
  box-shadow:
    0 13px 30px color-mix(in srgb, var(--brand-ink) 16%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-white) 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--brand-white) 92%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--brand-amethyst) 14%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(126%);
  backdrop-filter: blur(16px) saturate(126%);
}
.button-primary::before,
.mobile-primary-cta::before {
  position: absolute;
  z-index: -1;
  inset: -24%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 72% 38%, color-mix(in srgb, var(--brand-white) 34%, transparent) 0 10%, transparent 34%),
    radial-gradient(ellipse at 32% 62%, color-mix(in srgb, var(--brand-amethyst) 18%, transparent) 0 13%, transparent 38%);
  filter: blur(8px);
  opacity: .78;
  content: "";
}
.button-primary:hover,
.mobile-primary-cta:hover {
  border-color: color-mix(in srgb, var(--brand-white) 96%, transparent);
  color: var(--ink);
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--brand-white) 25%, transparent), color-mix(in srgb, var(--wash-rose) 7%, transparent) 48%, color-mix(in srgb, var(--brand-white) 18%, transparent)),
    radial-gradient(ellipse at 82% 18%, color-mix(in srgb, var(--brand-gold-soft) 86%, transparent) 0 13%, transparent 44%),
    radial-gradient(ellipse at 65% 92%, color-mix(in srgb, var(--brand-gold) 72%, transparent) 0 18%, transparent 52%),
    radial-gradient(ellipse at 28% 14%, color-mix(in srgb, var(--brand-amethyst) 74%, transparent) 0 17%, transparent 52%),
    radial-gradient(ellipse at 8% 78%, color-mix(in srgb, var(--brand-gold) 65%, transparent) 0 15%, transparent 49%),
    linear-gradient(126deg, color-mix(in srgb, var(--brand-lilac) 86%, transparent), color-mix(in srgb, var(--wash-rose) 80%, transparent) 52%, color-mix(in srgb, var(--brand-gold-soft) 86%, transparent));
  background-size: auto, 150% 190%, 145% 175%, 150% 180%, 135% 165%, auto;
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--brand-ink) 19%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-white) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--brand-white) 98%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--brand-amethyst) 12%, transparent);
}
.button-primary:active,
.mobile-primary-cta:active {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--brand-ink) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 90%, transparent);
}
.button-primary:focus-visible,
.mobile-primary-cta:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 4px;
}
.button-primary[aria-disabled="true"],
.mobile-primary-cta[aria-disabled="true"] {
  pointer-events: none;
  opacity: .55;
}
.button-secondary {
  border-color: color-mix(in srgb, var(--brand-white) 72%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 48%, transparent), color-mix(in srgb, var(--brand-white) 16%, transparent));
  box-shadow: 0 12px 34px color-mix(in srgb, var(--brand-ink) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%);
}
.hero-scroll { position: absolute; right: 0; bottom: 1.5rem; display: none; align-items: center; gap: .75rem; color: var(--ink-soft); font-size: .72rem; font-weight: 700; }

.intro-section { display: grid; padding-block: 6.5rem; border-top: 1px solid var(--border); gap: 2rem; }
.section-index { color: var(--violet); font-family: var(--font-display); font-size: 1.15rem; }
.intro-heading h2, .section-heading h2, .projects-heading h1, .process-intro h2, .client-note h2, .social-section h2, .final-cta h2 { margin-bottom: 0; font-size: clamp(2.45rem, 8vw, 5rem); font-weight: var(--brand-display-weight); letter-spacing: -.05em; }
.intro-copy { max-width: 48ch; margin: 0; align-self: end; color: var(--ink-soft); font-size: 1.03rem; line-height: 1.75; }

.families-section { padding-block: 4rem 7rem; }
.section-heading { display: grid; margin-bottom: 3rem; gap: 1.5rem; }
.section-heading > p { max-width: 48ch; margin: 0; color: var(--ink-soft); line-height: 1.75; }
.family-map { display: grid; gap: .75rem; }
.family-row {
  position: relative; display: grid; padding: 1rem; align-items: start;
  grid-template-columns: 34px minmax(0,1fr) 12px; gap: .5rem .8rem;
  border: 1px solid color-mix(in srgb, var(--brand-white) 58%, transparent); border-radius: 20px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 47%, transparent), color-mix(in srgb, var(--brand-white) 12%, transparent));
  box-shadow: 0 14px 38px color-mix(in srgb, var(--brand-ink) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 84%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-white) 16%, transparent);
  -webkit-backdrop-filter: blur(21px) saturate(142%); backdrop-filter: blur(21px) saturate(142%);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.family-row:hover { border-color: color-mix(in srgb, var(--brand-white) 80%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 56%, transparent), color-mix(in srgb, var(--brand-white) 17%, transparent)); transform: translateX(-4px); }
.family-number { color: var(--ink-soft); font-size: .68rem; font-weight: 750; letter-spacing: .1em; }
.family-row h3 { margin: 0; font-family: var(--font-body); font-size: 1.05rem; font-weight: 750; letter-spacing: -.025em; }
.family-row p { grid-column: 2 / -1; max-width: 52ch; margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.55; }
.family-dot { width: 8px; height: 8px; margin-top: .35rem; justify-self: end; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent); }
.accent-mint .family-dot { background: var(--brand-lilac); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-lilac) 10%, transparent); }
.accent-blue .family-dot { background: var(--brand-amethyst); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-amethyst) 10%, transparent); }
.accent-peach .family-dot { background: var(--peach); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-gold) 10%, transparent); }
.accent-rose .family-dot { background: var(--brand-gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-gold) 10%, transparent); }

.projects-section {
  position: relative; z-index: 1; overflow: hidden; padding-block: 6rem; color: var(--page-background);
  background: var(--brand-lilac);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-white) 22%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-white) 16%, transparent);
  isolation: isolate;
}
.projects-section::before, .projects-section::after {
  position: absolute; inset: 0; pointer-events: none; content: "";
}
.projects-section::before {
  z-index: -2;
  background-image: url("/assets/portfolio-petals-iridescent.png");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y;
}
.projects-section::after {
  z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-white) 10%, transparent) 0%, color-mix(in srgb, var(--wash-rose) 2.5%, transparent) 44%, color-mix(in srgb, var(--brand-lilac-soft) 8%, transparent) 100%);
}
.projects-section .eyebrow { color: color-mix(in srgb, var(--brand-ink) 76%, transparent); text-shadow: 0 1px 12px color-mix(in srgb, var(--brand-white) 48%, transparent); }
.projects-heading h1 { color: var(--ink); text-shadow: 0 2px 20px color-mix(in srgb, var(--brand-white) 38%, transparent); }
.projects-heading > p { color: color-mix(in srgb, var(--brand-ink) 72%, transparent); text-shadow: 0 1px 14px color-mix(in srgb, var(--brand-white) 45%, transparent); }
.projects-grid { display: grid; gap: 1rem; }
.project-card {
  position: relative; overflow: hidden; padding: .7rem; border: 1px solid color-mix(in srgb, var(--brand-white) 82%, transparent); border-radius: 30px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-white) 28%, transparent), color-mix(in srgb, var(--brand-white) 12%, transparent) 38%, color-mix(in srgb, var(--brand-lilac-soft) 8%, transparent) 68%, color-mix(in srgb, var(--brand-white) 18%, transparent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand-white) 30%, transparent),
    0 28px 78px color-mix(in srgb, var(--brand-ink) 18%, transparent),
    inset 0 2px 0 color-mix(in srgb, var(--brand-white) 94%, transparent),
    inset 2px 0 0 color-mix(in srgb, var(--brand-white) 42%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--brand-white) 22%, transparent),
    inset -2px 0 0 color-mix(in srgb, var(--brand-white) 18%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(112%); backdrop-filter: blur(16px) saturate(112%);
  isolation: isolate;
}
.project-card::before {
  position: absolute; z-index: 4; inset: 2px; border: 1px solid color-mix(in srgb, var(--brand-white) 30%, transparent); border-radius: 27px; pointer-events: none;
  box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--brand-white) 66%, transparent), inset -1px -1px 0 color-mix(in srgb, var(--brand-white) 16%, transparent);
  content: "";
}
.project-card::after {
  position: absolute; z-index: 0; top: -28%; left: -16%; width: 72%; aspect-ratio: 1.8; pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand-white) 28%, transparent), color-mix(in srgb, var(--brand-white) 6%, transparent) 46%, transparent 72%);
  filter: blur(16px); content: "";
}
.project-card > * { position: relative; z-index: 1; }
.project-visual {
  min-height: 280px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand-white) 62%, transparent); border-radius: 22px;
  background: color-mix(in srgb, var(--brand-lilac-soft) 66%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-white) 82%, transparent), 0 16px 34px color-mix(in srgb, var(--brand-ink) 15%, transparent);
}
.project-copy {
  margin-top: .65rem; padding: 1.35rem; border: 1px solid color-mix(in srgb, var(--brand-white) 58%, transparent); border-radius: 22px; color: var(--ink);
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 38%, transparent), color-mix(in srgb, var(--brand-lilac-soft) 20%, transparent) 58%, color-mix(in srgb, var(--brand-white) 14%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-white) 72%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-white) 20%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(105%); backdrop-filter: blur(24px) saturate(105%);
}
.project-meta { display: flex; margin-bottom: 1.15rem; align-items: center; justify-content: space-between; gap: .75rem; color: color-mix(in srgb, var(--brand-ink) 62%, transparent); font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.status {
  padding: .35rem .55rem; border: 1px solid color-mix(in srgb, var(--brand-white) 84%, transparent); border-radius: 999px; color: var(--ink);
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 48%, transparent), color-mix(in srgb, var(--brand-white) 20%, transparent));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand-ink) 9%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 92%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-white) 28%, transparent), 0 0 0 1px color-mix(in srgb, var(--brand-white) 20%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%);
}
.status-in-development { color: var(--ink); background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 40%, transparent), color-mix(in srgb, var(--brand-lilac) 56%, transparent) 32%, color-mix(in srgb, var(--brand-lilac) 34%, transparent)); }
.status-experimental { color: var(--ink); background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 44%, transparent), color-mix(in srgb, var(--brand-lilac-soft) 50%, transparent) 34%, color-mix(in srgb, var(--brand-lilac-soft) 30%, transparent)); }
.status-product { color: var(--ink); background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 44%, transparent), color-mix(in srgb, var(--brand-gold-soft) 54%, transparent) 34%, color-mix(in srgb, var(--brand-gold-soft) 32%, transparent)); }
.project-copy h3 { margin-bottom: .7rem; font-size: clamp(2rem, 7vw, 3rem); font-weight: var(--brand-display-weight); letter-spacing: -.04em; }
.project-copy > p { margin-bottom: 1.45rem; color: color-mix(in srgb, var(--brand-ink) 72%, transparent); font-size: .9rem; line-height: 1.7; }
.project-link, .project-pending { display: flex; min-height: 44px; align-items: center; justify-content: space-between; border-top: 1px solid color-mix(in srgb, var(--brand-ink) 12%, transparent); font-size: .78rem; font-weight: 750; }
.project-link { transition: color 160ms ease; }
.project-link:hover { color: var(--violet-dark); }
.project-pending { color: color-mix(in srgb, var(--brand-ink) 48%, transparent); }

.process-section { display: grid; padding-block: 4rem; gap: 2rem; }
.process-intro > p:last-child { max-width: 48ch; margin-top: 1.5rem; color: var(--ink-soft); line-height: 1.75; }
.process-list { display: grid; margin: 0; padding: 0; list-style: none; gap: .75rem; }
.process-list li { display: grid; min-height: 132px; padding: 1.15rem; grid-template-columns: 30px 1fr; border: 1px solid color-mix(in srgb, var(--brand-white) 72%, transparent); border-radius: 20px; gap: .75rem; background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 40%, transparent), color-mix(in srgb, var(--brand-white) 12%, transparent)); box-shadow: var(--shadow-soft); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%); }
.process-list li > span { color: var(--violet-dark); font-size: .65rem; font-weight: 800; }
.process-list h3 { margin-bottom: .4rem; font-size: 1.45rem; font-weight: var(--brand-display-weight); }
.process-list p { margin: 0; color: var(--ink-soft); font-size: .85rem; }

.client-note { display: grid; margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem); gap: 1.5rem; }
.client-note h2 { font-size: clamp(2rem, 7vw, 3.6rem); }
.client-note > p { max-width: 50ch; margin: 0; align-self: end; color: var(--ink-soft); line-height: 1.75; }

/*
 * Velo nacarado MileLab
 * Material atmosférico secundario y reutilizable. Se aplica de forma explícita
 * para no sustituir las escenas icónicas ni los fondos macro de pétalo.
 */
.milelab-pearl-veil {
  --pearl-glass: color-mix(in srgb, var(--brand-white) 28%, transparent);
  position: relative;
  isolation: isolate;
  background-color: var(--page-background);
  background-image:
    radial-gradient(ellipse 78% 115% at -7% 12%, color-mix(in srgb, var(--wash-warm) 68%, transparent) 0%, transparent 57%),
    radial-gradient(ellipse 68% 92% at 102% 7%, color-mix(in srgb, var(--wash-lilac) 74%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 54% 94% at 76% 112%, color-mix(in srgb, var(--wash-cool) 58%, transparent) 0%, transparent 61%),
    radial-gradient(ellipse 88% 72% at 24% 108%, color-mix(in srgb, var(--wash-rose) 72%, transparent) 0%, transparent 62%),
    conic-gradient(from 214deg at 54% 48%,
      color-mix(in srgb, var(--brand-white) 36%, transparent),
      color-mix(in srgb, var(--wash-lilac) 28%, transparent) 17%,
      color-mix(in srgb, var(--wash-warm) 23%, transparent) 34%,
      color-mix(in srgb, var(--brand-white) 46%, transparent) 53%,
      color-mix(in srgb, var(--wash-cool) 24%, transparent) 72%,
      color-mix(in srgb, var(--wash-rose) 25%, transparent) 87%,
      color-mix(in srgb, var(--brand-white) 36%, transparent));
  background-repeat: no-repeat;
  background-size: cover;
}
.milelab-pearl-veil::before,
.milelab-pearl-veil::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
}
.milelab-pearl-veil::before {
  inset: -24% -14%;
  border-radius: 46% 54% 58% 42% / 55% 43% 57% 45%;
  background:
    radial-gradient(ellipse at 34% 36%, color-mix(in srgb, var(--brand-white) 76%, transparent) 0 8%, transparent 36%),
    radial-gradient(ellipse at 68% 58%, color-mix(in srgb, var(--wash-lilac) 34%, transparent), transparent 56%),
    radial-gradient(ellipse at 45% 104%, color-mix(in srgb, var(--wash-warm) 28%, transparent), transparent 52%);
  filter: blur(28px);
  opacity: .9;
  transform: rotate(-5deg) scale(1.06);
}
.milelab-pearl-veil::after {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--brand-white) 34%, transparent), transparent 28% 67%, color-mix(in srgb, var(--brand-white) 20%, transparent)),
    radial-gradient(ellipse 22% 75% at 53% -12%, color-mix(in srgb, var(--brand-white) 44%, transparent), transparent 74%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-white) 76%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-white) 20%, transparent);
  opacity: .78;
}
.final-cta {
  position: relative; overflow: hidden; margin-bottom: 6rem; padding: clamp(2rem, 7vw, 5.5rem);
  border: 1px solid color-mix(in srgb, var(--brand-white) 84%, transparent); border-radius: 34px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 46%, transparent), color-mix(in srgb, var(--brand-white) 14%, transparent));
  box-shadow: 0 22px 64px color-mix(in srgb, var(--brand-ink) 11%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 94%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-white) 18%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(138%); backdrop-filter: blur(24px) saturate(138%);
  isolation: isolate;
}
.final-cta::before {
  position: absolute; z-index: 0; inset: 5px; pointer-events: none; content: "";
  border: 1px solid color-mix(in srgb, var(--brand-white) 34%, transparent); border-radius: 29px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-white) 42%, transparent);
}
.final-cta > * { position: relative; z-index: 1; }
.final-cta .cta-glow { display: none; }
.final-cta h2 { max-width: 16ch; }
.final-cta > p:not(.eyebrow) { max-width: 54ch; margin: 1.5rem 0 2rem; color: var(--ink-soft); line-height: 1.75; }
.site-footer { display: grid; padding-block: 2.5rem; align-items: center; border-top: 1px solid var(--border); gap: 1rem; color: var(--ink-soft); font-size: .72rem; }
.site-footer p { margin: 0; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes marine-bloom {
  0% { filter: hue-rotate(-3deg) brightness(.96); transform: rotate(var(--bloom-angle)) scale(.96, 1); }
  55% { filter: hue-rotate(4deg) brightness(1.06); transform: rotate(calc(var(--bloom-angle) + 4deg)) scale(1.035, .985); }
  100% { filter: hue-rotate(-1deg) brightness(1); transform: rotate(calc(var(--bloom-angle) - 2deg)) scale(.98, 1.03); }
}
@keyframes organic-drift {
  0% { opacity: .48; transform: translateX(-50%) rotate(var(--rotation)) scaleY(.9); }
  48% { opacity: .88; }
  100% { opacity: .68; transform: translateX(-50%) rotate(var(--rotation-end)) scaleY(1.05); }
}
@media (min-width: 680px) {
  .shell { width: min(1180px, calc(100% - 72px)); }
  .hero { grid-template-columns: .92fr 1.08fr; padding-block: 3.75rem; gap: 1.5rem; }
  .hero-actions .button { min-width: 210px; }
  .intro-section { grid-template-columns: 60px minmax(0, 1.15fr) minmax(280px, .85fr); gap: 2rem; }
  .section-heading { grid-template-columns: 1.35fr .65fr; align-items: end; gap: 3rem; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .project-featured:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr .75fr; }
  .project-featured:first-child .project-visual { min-height: 430px; }
  .project-featured:first-child .project-copy { display: flex; margin: 0 0 0 .7rem; padding: 2rem; flex-direction: column; justify-content: flex-end; }
  .process-intro { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 2rem; }
  .process-intro > p:last-child { margin: 0; }
  .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-list li:last-child { grid-column: 1 / -1; }
  .site-footer { grid-template-columns: 1fr auto auto; }
}

@media (min-width: 920px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .desktop-nav, .header-cta.button { display: flex; }
  .header-cta.button { justify-self: end; }
  .mobile-nav { display: none; }
  .hero-scroll { display: flex; }
  .families-section { display: grid; grid-template-columns: minmax(250px,.72fr) minmax(0,1.28fr); align-items: start; gap: clamp(2.5rem,6vw,6rem); }
  .families-section .section-heading { display: block; margin: 0; }
  .families-section .section-heading > p { margin-top: 1.5rem; }
  .families-section .section-heading { position: sticky; top: 7rem; }
  .family-row { grid-template-columns: 38px minmax(150px,.72fr) minmax(150px,1fr) 12px; align-items: center; gap: 1rem; }
  .family-row p { grid-column: auto; }
  .project-card { transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
  .project-card:hover {
    border-color: color-mix(in srgb, var(--brand-white) 96%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-white) 42%, transparent), 0 34px 92px color-mix(in srgb, var(--brand-ink) 22%, transparent), inset 0 2px 0 color-mix(in srgb, var(--brand-white) 96%, transparent), inset 2px 0 0 color-mix(in srgb, var(--brand-white) 50%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--brand-white) 24%, transparent);
    transform: translateY(-4px);
  }
  .project-card:last-child:nth-child(even) { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; }
  .project-card:last-child:nth-child(even) .project-visual { min-height: 360px; }
  .project-card:last-child:nth-child(even) .project-copy { display: flex; margin: 0 0 0 .7rem; padding: 2rem; flex-direction: column; justify-content: flex-end; }
  .discover-outro { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

@media (max-width: 679px) {
  .hero {
    display: block; min-height: auto; padding-block: 2.75rem 3.25rem;
    isolation: isolate;
  }
  .hero-copy { position: relative; z-index: 2; padding-top: 1rem; }
  .hero h1 { position: relative; max-width: 8.5ch; text-shadow: 0 1px 0 color-mix(in srgb, var(--brand-white) 45%, transparent); }
  .hero-lead { max-width: 34ch; }
  .hero-actions { position: relative; z-index: 3; }
  .site-backdrop img {
    width: 100%; height: 100%; object-fit: cover; object-position: 30% top; opacity: 1;
    filter: saturate(1.14) contrast(1.12) drop-shadow(0 24px 30px color-mix(in srgb, var(--brand-ink) 12%, transparent));
  }
  .site-backdrop::after { background: none; }
  .button { width: 100%; }
  .projects-section { padding-block: 4.5rem; }
  .projects-section::before { background-position: center top; background-size: 100% auto; }
  .project-visual { min-height: 250px; }
}

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

/* Arquitectura multipágina: una escena fija independiente por ruta. */
.route-page { position: relative; min-height: 100svh; isolation: isolate; }
.route-page main, .route-page .site-footer { position: relative; z-index: 2; }
.route-backdrop { position: fixed; z-index: 0; inset: 72px 0 0; overflow: hidden; pointer-events: none; transform: translateZ(0); }
.route-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.route-backdrop-camellia img { object-fit: contain; object-position: right center; filter: saturate(1.12) contrast(1.1) drop-shadow(0 28px 32px color-mix(in srgb, var(--brand-ink) 14%, transparent)); }
.route-backdrop-petals { background: var(--brand-lilac); }
.route-backdrop-petals img { object-position: center top; }
.route-backdrop-petals::after { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-white) 8%, transparent), color-mix(in srgb, var(--brand-lilac-soft) 2.5%, transparent) 55%, color-mix(in srgb, var(--brand-lilac-soft) 8%, transparent)); content: ""; }
.route-backdrop-pearl {
  background-color: var(--page-background);
  background-image: radial-gradient(ellipse 78% 115% at -7% 12%, color-mix(in srgb, var(--wash-warm) 68%, transparent), transparent 57%), radial-gradient(ellipse 68% 92% at 102% 7%, color-mix(in srgb, var(--wash-lilac) 74%, transparent), transparent 62%), radial-gradient(ellipse 54% 94% at 76% 112%, color-mix(in srgb, var(--wash-cool) 58%, transparent), transparent 61%), radial-gradient(ellipse 88% 72% at 24% 108%, color-mix(in srgb, var(--wash-rose) 72%, transparent), transparent 62%);
}
.glass-reading { padding: clamp(1.4rem, 4vw, 2.5rem); border: 1px solid color-mix(in srgb, var(--brand-white) 74%, transparent); border-radius: 30px; background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 48%, transparent), color-mix(in srgb, var(--brand-white) 12%, transparent)); box-shadow: var(--shadow-soft); -webkit-backdrop-filter: blur(20px) saturate(130%); backdrop-filter: blur(20px) saturate(130%); }
.glass-panel { border: 1px solid color-mix(in srgb, var(--brand-white) 82%, transparent); border-radius: 28px; background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 44%, transparent), color-mix(in srgb, var(--brand-white) 13%, transparent)); box-shadow: 0 20px 56px color-mix(in srgb, var(--brand-ink) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 90%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-white) 17%, transparent); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); }
.home-hero { min-height: calc(100svh - 72px); }
.home-hero .hero-copy { max-width: 720px; }
.route-actions { display: grid; gap: .75rem; }
.route-actions .button { width: 100%; }
.page-intro { margin-top: clamp(3rem, 7vw, 6rem); margin-bottom: clamp(3rem, 7vw, 6rem); }
.page-intro h1, .project-start h1 { max-width: 16ch; margin-bottom: 1.5rem; font-size: clamp(3rem, 8vw, 6rem); font-weight: var(--brand-display-weight); letter-spacing: -.055em; }
.page-intro > p:last-child { max-width: 58ch; margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; }
.route-page .families-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.route-page .process-section { padding-block: clamp(3rem, 5vw, 4.5rem); }
.discover-outro { display: grid; margin-block: 1rem 3rem; gap: 1rem; }
.social-section { display: grid; padding: clamp(1.5rem, 4vw, 2.5rem); gap: 1.5rem; }
.social-section > div:first-child > p:last-child { margin: 1rem 0 0; color: var(--ink-soft); line-height: 1.65; }
.social-grid { display: grid; gap: 1rem; }
.social-card { padding-top: 1rem; border-top: 1px solid var(--border); }
.social-card h3 { margin-bottom: .35rem; font-size: 1.65rem; font-weight: var(--brand-display-weight); }
.social-card p { color: var(--ink-soft); }
.social-card > span, .social-card > a { color: var(--ink-soft); font-size: .75rem; font-weight: 750; }
.social-featured { grid-column: span 1; }
.projects-page-section { min-height: calc(100svh - 72px); padding-top: clamp(4rem, 8vw, 7rem); background: transparent; box-shadow: none; }
.projects-page-section::before, .projects-page-section::after { display: none; }
.cross-nav { margin-top: 2rem; margin-bottom: 5rem; padding: clamp(1.4rem, 4vw, 2.2rem); }
.cross-nav > div { display: grid; gap: .75rem; }
.route-tone-petals .site-footer { color: color-mix(in srgb, var(--brand-ink) 72%, transparent); border-color: color-mix(in srgb, var(--brand-white) 42%, transparent); }
.project-start { display: grid; min-height: calc(100svh - 72px); padding-block: clamp(3rem, 8vw, 7rem); align-items: center; }
.project-start .final-cta { width: 100%; margin: 0; }
.project-start .final-cta h1 { max-width: 16ch; }
.project-start ul { display: flex; margin: 0 0 2rem; padding: 0; flex-wrap: wrap; gap: .55rem; list-style: none; }
.project-start li { padding: .48rem .72rem; border: 1px solid color-mix(in srgb, var(--brand-white) 76%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--brand-white) 22%, transparent); color: var(--ink-soft); font-size: .76rem; }

@media (min-width: 680px) {
  .route-actions { grid-template-columns: 1.15fr 1fr 1fr; }
  .cross-nav > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 679px) {
  .route-backdrop-camellia img { object-fit: cover; object-position: 30% top; }
  .home-hero { padding-block: 2rem; }
  .home-hero .glass-reading { padding: 1.25rem; }
  .home-hero h1 { font-size: clamp(2.7rem, 13vw, 4.2rem); }
  .page-intro h1, .project-start h1 { font-size: clamp(2.7rem, 13vw, 4.2rem); }
  .projects-page-section { padding-top: 3.5rem; }
  .page-intro { margin-block: 2rem 3rem; }
  .route-page .families-section, .route-page .process-section { padding-block: 3rem; }
  .family-row { min-height: 76px; }
  .process-list li { min-height: 0; }
  .cross-nav { margin-bottom: 3rem; }
}


/* Ajustes locales de accesibilidad; identidad y composición heredadas de Sites. */
body { min-width: 0; }
.project-copy h2 { margin: 0 0 .7rem; font-size: clamp(2rem, 7vw, 3rem); font-weight: var(--brand-display-weight); letter-spacing: var(--brand-display-tracking); }
.hero-copy, .project-copy, .family-row > *, .section-heading > * { min-width: 0; }
.button { overflow-wrap: anywhere; }
.page-intro h1, .project-start h1 { overflow-wrap: anywhere; }
.eyebrow, .site-footer { font-size: .75rem; }
.project-meta, .project-pending, .project-start li, .social-card > span, .social-card > a { font-size: .875rem; }
.project-meta { flex-wrap: wrap; gap: .55rem; }
.process-list p { font-size: 1rem; }
@media (max-width: 360px) {
  .page-intro h1, .project-start h1 { font-size: 2.25rem; }
}
@media (min-width: 680px) and (max-width: 1100px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); }
  .home-hero .hero-copy { max-width: 620px; }
  .home-hero h1 { font-size: clamp(3.2rem, 9vw, 6rem); }
  .home-hero .route-actions { grid-template-columns: 1fr; }
}

/* Signature original: escena vertical a escala natural, fundida con la web clara. */
.route-backdrop-signature {
  background: linear-gradient(90deg, var(--page-background) 0%, var(--wash-rose) 47%, var(--brand-lilac-soft) 68%, var(--brand-night) 100%);
}
.signature-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(0px, calc((100vw - 1600px) / 2));
  aspect-ratio: 9 / 16;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 96%, transparent);
}
.signature-stage .signature-poster, .signature-stage .signature-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.signature-video { opacity: 0; }
.signature-video.is-ready { opacity: 1; }
.route-backdrop-signature::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-paper) 88%, transparent), color-mix(in srgb, var(--brand-paper) 43%, transparent) 38%, transparent 58%);
}
.motion-control {
  display:inline-flex; align-items:center; gap:8px;
  position: fixed;
  z-index: 50;
  top: 88px;
  right: max(18px, calc((100vw - 1180px) / 2));
  min-height: 44px;
  padding: .6rem .25rem;
  border: 0;
  border-radius: 0;
  color: var(--ink-soft);
  background: transparent;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 400;
  text-underline-offset: .25em;
  cursor: pointer;
}
.motion-control:hover, .motion-control:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}
.motion-control[hidden] { display: none; }
.route-page:has(.route-backdrop-signature) .hero-lead { color: var(--signature-plum); }
@media (max-width: 1100px) {
  .route-backdrop-signature::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-paper) 82%, transparent), color-mix(in srgb, var(--brand-paper) 54%, transparent) 42%, color-mix(in srgb, var(--brand-paper) 6%, transparent));
  }
}
@media (max-width: 679px) {
  .signature-stage { left: 0; right: 0; aspect-ratio: auto; mask-image: none; -webkit-mask-image: none; }
  .signature-stage .signature-poster, .signature-stage .signature-video { object-fit: cover; object-position: 60% center; }
  .route-backdrop-signature::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-paper) 80%, transparent), color-mix(in srgb, var(--brand-paper) 59%, transparent) 50%, color-mix(in srgb, var(--brand-paper) 27%, transparent));
  }
  .route-page:has(.route-backdrop-signature) .home-hero { padding-top: 5rem; }
  .route-page:has(.route-backdrop-signature) .hero-lead { max-width: 28ch; }
}

/* Evolución de los controles hacia el marfil, amatista y ciruela de Signature. */
.button-primary, .mobile-primary-cta {
  color: var(--signature-plum);
  border-color: color-mix(in srgb, var(--brand-ivory) 90%, transparent);
  background:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--brand-ivory) 75%, transparent), transparent 56%),
    linear-gradient(120deg, var(--action-start), var(--action-middle) 56%, var(--action-end));
  background-size: auto;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-ink) 17%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 94%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--brand-amethyst) 18%, transparent);
}
.button-primary::before, .mobile-primary-cta::before {
  background: radial-gradient(ellipse at 24% 40%, color-mix(in srgb, var(--brand-gold) 22%, transparent), transparent 44%), radial-gradient(ellipse at 78% 64%, color-mix(in srgb, var(--brand-amethyst) 15%, transparent), transparent 46%);
}
.button-primary:hover, .mobile-primary-cta:hover {
  color: var(--signature-plum);
  border-color: var(--brand-ivory);
  background: radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--brand-ivory) 80%, transparent), transparent 56%), linear-gradient(120deg, var(--action-hover-start), var(--action-hover-middle) 56%, var(--action-hover-end));
  background-size: auto;
  box-shadow: 0 16px 32px color-mix(in srgb, var(--brand-ink) 20%, transparent), inset 0 1px 0 var(--brand-white);
}
.button-primary:active, .mobile-primary-cta:active { box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-ink) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 80%, transparent); }
.button-primary:focus-visible, .mobile-primary-cta:focus-visible { outline-color: var(--accent-strong); }
.button-secondary {
  color: var(--signature-plum);
  border-color: color-mix(in srgb, var(--brand-ivory) 88%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-ivory) 78%, transparent), color-mix(in srgb, var(--brand-lilac-soft) 62%, transparent));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-ink) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 87%, transparent);
}
.button-secondary:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-ivory) 94%, transparent), color-mix(in srgb, var(--brand-lilac-soft) 85%, transparent)); }

/* Roles consistentes para títulos, estados y texto secundario. */
:is(.hero h1, .page-intro h1, .project-start h1, .section-heading h2, .projects-heading h1, .process-intro h2, .area-card h3, .social-intro h2) { letter-spacing: var(--brand-display-tracking); }
.project-meta, .project-pending, .project-copy > p, .projects-heading > p, .route-tone-petals .site-footer { color: var(--ink-soft); }
.status { color: var(--ink); }
.status-product { background: var(--status-product); }
.status-in-development { background: var(--status-development); }
.status-experimental { background: var(--status-experimental); }

/* Una sola sección abierta para las redes, sin la antigua columna de Client Work. */
.discover-outro { grid-template-columns: minmax(0, 1fr); }
.social-section { padding: clamp(1.4rem, 4vw, 3rem); gap: 2rem; }
.social-intro h2 { max-width: 13ch; }
.social-intro > p:last-child { max-width: 38ch; }
.social-grid { align-content: center; gap: .75rem; }
.social-link {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
  min-height: 104px;
  color: var(--signature-plum);
  border: 1px solid color-mix(in srgb, var(--brand-white) 88%, transparent);
  border-radius: 20px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand-ivory) 75%, transparent), color-mix(in srgb, var(--brand-lilac-soft) 40%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-white) 92%, transparent), 0 7px 24px color-mix(in srgb, var(--brand-ink) 4%, transparent);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.social-link:hover { transform: translateY(-2px); border-color: var(--brand-amethyst); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-ink) 10%, transparent); }
.social-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--brand-white) 90%, transparent); border-radius: 15px; background: linear-gradient(140deg, var(--signature-ivory), var(--signature-lilac)); }
.social-icon svg { width: 26px; height: 26px; }
.social-link-copy { min-width: 0; }
.social-link-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .65rem; }
.social-link-heading strong { font-size: 1.05rem; font-weight: 750; }
.social-link-heading > span { color: var(--ink-soft); font-size: .875rem; overflow-wrap: anywhere; }
.social-link-description { display: block; margin-top: .25rem; color: var(--ink-soft); font-size: .9375rem; line-height: 1.45; }
.social-link > span:last-child { align-self: start; font-size: 1.1rem; }
@media (min-width: 920px) {
  .social-section { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
  .social-intro h2 { font-size: clamp(2.7rem, 5.5vw, 4.5rem); }
}
@media (max-width: 420px) {
  .social-link { grid-template-columns: 40px minmax(0, 1fr) auto; gap: .65rem; padding: .9rem .75rem; }
  .social-icon { width: 40px; height: 40px; border-radius: 12px; }
  .social-icon svg { width: 23px; height: 23px; }
}

/* Tres áreas estables, con el material y la paleta actuales de MileLab. */
.areas-section { padding-block: clamp(3rem, 7vw, 6rem); }
.areas-heading { gap: 2rem; }
.areas-heading h2 span { display: block; }
.areas-heading > p { max-width: 44ch; }
.areas-grid { display: grid; gap: 1rem; }
.area-card {
  position: relative;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--brand-white) 80%, transparent);
  border-radius: 26px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand-white) 50%, transparent), color-mix(in srgb, var(--brand-ivory) 20%, transparent));
  box-shadow: var(--shadow-soft), inset 0 1px 0 color-mix(in srgb, var(--brand-white) 70%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.area-card::after {
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signature-amethyst);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-lilac) 25%, transparent);
  content: '';
}
.area-productos::after { background: var(--signature-gold); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-gold) 12%, transparent); }
.area-sistemas::after { background: var(--signature-plum); }
.area-number { display: block; margin-bottom: 1.75rem; color: var(--ink-soft); font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
.area-card h3 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: var(--brand-display-weight); letter-spacing: -.04em; }
.area-card p { max-width: 35ch; margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.areas-note { display: grid; gap: .9rem; padding-top: 1.75rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.75; }
.areas-note p { margin: 0; max-width: 88ch; }
.areas-note strong { color: var(--signature-plum); font-weight: 600; }
.process-list h3 { font-size: 1.7rem; }
@media (min-width: 920px) {
  .areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-list li:last-child { grid-column: auto; }
  .process-list li { padding: 1.5rem; grid-template-columns: 1fr; gap: 1rem; }
}

/* Catálogo: una ficha por producto, con presentación y demo independientes. */
.catalog-grid { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
.catalog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-white) 80%, transparent);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: var(--shadow-soft);
}
.catalog-preview {
  --catalog-inset: clamp(.75rem, 2vw, 1.4rem);
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: var(--catalog-inset);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(145deg, var(--surface-soft), var(--surface));
}
.catalog-preview img { position: absolute; inset: var(--catalog-inset); display: block; width: calc(100% - 2 * var(--catalog-inset)); height: calc(100% - 2 * var(--catalog-inset)); object-fit: contain; border-radius: 10px; }
.catalog-copy { display: flex; flex: 1; flex-direction: column; align-items: stretch; padding: clamp(1.25rem, 3vw, 2rem); color: var(--ink); }
.catalog-area { margin: 0 0 1rem; color: var(--ink-soft); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.catalog-title { display: flex; align-items: center; gap: .75rem; min-height: 3rem; }
.catalog-title h2 { margin: 0; font-size: clamp(1.85rem, 3vw, 2.7rem); font-weight: var(--brand-display-weight); line-height: 1.08; letter-spacing: -.04em; overflow-wrap: normal; }
.catalog-mark { flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; border-radius: 10px; }
.catalog-summary { margin: 1.2rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.catalog-features { display: grid; gap: .8rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; color: var(--ink); font-size: .87rem; line-height: 1.6; }
.catalog-features li { position: relative; padding-left: 1.2rem; }
.catalog-features li::before { position: absolute; top: .6em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); content: ''; }
.catalog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.25rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.catalog-actions .button { min-height: 48px; font-size: .85rem; }
.catalog-demo { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 48px; font-size: .85rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 5px; }
.catalog-demo:hover { text-decoration-color: currentColor; }
.project-visual:has(> img) { padding: 1rem; }
.project-visual > img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
@media (min-width: 768px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .catalog-demo { width: 100%; } }

/* Productos y servicios: lectura editorial con las áreas compartidas de MileLab. */
.services-intro { display: grid; gap: 2rem; padding-block: clamp(3rem, 7vw, 6rem) 3rem; }
.services-intro h1 { max-width: 13ch; margin: 0; font-size: clamp(3.25rem, 7.5vw, 6rem); font-weight: var(--brand-display-weight); letter-spacing: var(--brand-display-tracking); line-height: .98; }
.services-intro-copy { align-self: end; }
.services-intro-copy > p { max-width: 48ch; margin: 0 0 1.75rem; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.75; }
.services-index { display: grid; border-block: 1px solid var(--border); }
.services-index a { display: flex; align-items: center; gap: .85rem; min-height: 64px; padding: .8rem .2rem; font-size: 1rem; font-weight: 600; }
.services-index a + a { border-top: 1px solid var(--border); }
.services-index a > span:first-child { color: var(--ink-soft); font-size: .75rem; font-weight: 400; }
.services-index a > span:last-child { margin-left: auto; color: var(--ink-soft); }
.services-index a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: .25em; }
.services-opening { max-width: 68ch; margin: 1.75rem 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.75; }
.service-area { display: grid; gap: 1.75rem; padding-block: clamp(3.5rem, 7vw, 6rem); }
.service-area + .service-area { border-top: 1px solid var(--border); }
.service-area-heading, .service-area-copy { min-width: 0; }
.service-area-heading .eyebrow { display: flex; align-items: baseline; gap: .85rem; font-size: .7rem; letter-spacing: .1em; }
.service-number { color: var(--ink-soft); font-weight: 400; letter-spacing: 0; }
.service-area h2 { margin: 0; font-size: clamp(3rem, 6vw, 5rem); font-weight: var(--brand-display-weight); letter-spacing: var(--brand-display-tracking); }
.service-outcome { max-width: 19ch; margin: 1.25rem 0 0; color: var(--ink-soft); font-family: var(--font-display); font-size: clamp(1.65rem, 2.5vw, 2rem); line-height: 1.2; }
.service-introduction { max-width: 56ch; margin: 0 0 1.75rem; font-size: 1.08rem; line-height: 1.75; }
.service-possibilities { display: grid; gap: 0; margin: 0; }
.service-possibilities > div { display: grid; gap: .5rem; padding-block: 1.2rem; border-top: 1px solid var(--border); }
.service-possibilities dt { font-size: .95rem; font-weight: 600; line-height: 1.5; }
.service-possibilities dd { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
.service-example { margin-top: 1.2rem; padding: 1.15rem 1.35rem; border-left: 2px solid var(--brand-amethyst); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.service-area-productos .service-example { border-color: var(--brand-gold); }
.service-example .eyebrow { margin: 0 0 .4rem; color: var(--ink-soft); font-size: .65rem; letter-spacing: .1em; }
.service-example > a { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; font-size: 1rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: .25em; }
.service-example > a:hover { text-decoration-color: currentColor; }
.service-example > p:last-child { margin: .3rem 0 0; color: var(--ink-soft); font-size: .875rem; line-height: 1.65; }
.service-connection { margin: 1.25rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--brand-amethyst); color: var(--ink-soft); font-size: .9rem; line-height: 1.75; }
.services-approach { display: grid; gap: 1.5rem; margin-block: .5rem 2rem; }
.services-approach h2 { max-width: 19ch; margin: 0; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: var(--brand-display-weight); letter-spacing: var(--brand-display-tracking); }
.services-approach-copy > p { margin: 0 0 1.25rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.75; }
.services-approach-copy strong { color: var(--ink); font-weight: 600; }
.services-text-link { display: inline-flex; gap: 1rem; min-height: 44px; align-items: center; font-size: .9rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: .3em; }
.services-text-link:hover { text-decoration-color: currentColor; }
.services-portfolio { display: grid; gap: .5rem; padding-block: 1rem 3rem; }
.services-portfolio p { max-width: 58ch; margin: 0; color: var(--ink-soft); line-height: 1.75; }
.services-close.final-cta { margin-bottom: 3rem; }
.services-close h2 { max-width: 19ch; }
@media (min-width: 680px) {
  .services-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services-index a { padding: 1.15rem 1.4rem; }
  .services-index a:first-child { padding-left: 0; }
  .services-index a:last-child { padding-right: 0; }
  .services-index a + a { border-top: 0; border-left: 1px solid var(--border); }
  .service-possibilities > div { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: 1.75rem; }
  .services-portfolio { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
}
@media (min-width: 920px) {
  .services-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; }
  .service-area { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(3rem, 6vw, 6rem); }
  .service-area-heading { position: sticky; top: 7rem; align-self: start; }
  .service-area-productos .service-area-heading { padding-left: clamp(0rem, 2vw, 2rem); }
  .services-approach { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 3rem; }
}

/* MileLab · experiencia orgánica. Usa únicamente los tokens de marca existentes. */
:root { --ease-organic: cubic-bezier(.22,.68,0,1.02); --space-editorial: clamp(4rem,8vw,7.5rem); }
body { background: var(--brand-paper); }
.shell { width: min(1240px, calc(100% - 40px)); }
.route-backdrop-pearl { background: radial-gradient(ellipse at 100% 0%,var(--brand-lilac-soft),transparent 55%),var(--brand-paper); }
.site-header { background: color-mix(in srgb,var(--brand-paper) 90%,transparent); border-bottom-color: var(--border); }
.brand-mark { background: none; box-shadow: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .16em; }
.button { border-radius: 999px; font-weight: 600; min-height: 52px; padding-inline: 1.4rem; }
.button-secondary { box-shadow: none; background: transparent; border-color: var(--border); }
.button-primary { box-shadow: 0 8px 24px color-mix(in srgb,var(--brand-ink) 12%,transparent), inset 0 1px 0 var(--brand-white); }
.button > .site-icon, .text-link > .site-icon { transition: transform .25s var(--ease-organic); }
.button:hover > .site-icon, .text-link:hover > .site-icon { transform: translate(2px,-2px); }
.text-link { display: inline-flex; align-items: center; gap: 1.2rem; min-height: 44px; width: fit-content; padding-block: .5rem; color: inherit; background: none; font-size: .9rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: .4em; cursor: pointer; }
.text-link:hover { text-decoration-color: currentColor; }
.editorial-space { padding-block: var(--space-editorial); }
.editorial-space h2, .invitation h2, .lab-invitation h2, .contact-faq h2 { font-size: clamp(2.5rem,5.2vw,4.7rem); font-weight: 400; line-height: 1.06; letter-spacing: var(--brand-display-tracking); }
em { font-weight: 400; color: var(--brand-amethyst); }
.chapter-number { font-size: .7rem; color: var(--ink-soft); letter-spacing: .08em; }
.botanical-image { position: relative; width: 100%; min-width: 0; max-width: 100%; margin: 0; overflow: hidden; border-radius: 20px; isolation: isolate; background: var(--brand-lilac-soft); }
.botanical-image img { width: 100%; height: 100%; object-fit: cover; }
.botanical-image figcaption { position: absolute; z-index: 1; bottom: 0; inset-inline: 0; padding: 3rem 1.5rem 1.5rem; background: linear-gradient(transparent,color-mix(in srgb,var(--brand-night) 70%,transparent)); color: var(--brand-ivory); font-size: .78rem; line-height: 1.6; }
.editorial-heading { max-width: 960px; margin: 0 auto 4rem; text-align: center; }
.editorial-heading > p:last-child { max-width: 65ch; margin: 1.75rem auto 0; color: var(--ink-soft); line-height: 1.8; }
.section-heading > div:last-child > p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.1rem; }

/* La camelia conserva la escena original; la portada ahora abre un recorrido. */
.bloom-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--brand-paper); }
.bloom-hero .route-backdrop-signature { position: absolute; inset: 0; transform: none; }
.bloom-hero .signature-stage { right: 0; top: 0; bottom: 0; left: auto; width: auto; aspect-ratio: 9 / 16; mask-image: linear-gradient(90deg,transparent,#000 18%); -webkit-mask-image: linear-gradient(90deg,transparent,#000 18%); }
.bloom-hero .signature-stage img, .bloom-hero .signature-stage video { object-fit: contain; object-position: right center; }
.bloom-hero .route-backdrop-signature::after { background: linear-gradient(90deg,var(--brand-paper),color-mix(in srgb,var(--brand-paper) 80%,transparent) 30%,transparent 62%); }
.bloom-hero-inner { position: relative; min-height: min(850px,calc(100svh - 73px)); padding-block: 5rem 7rem; display: flex; align-items: center; }
.bloom-copy { position: relative; z-index: 2; width: 53%; max-width: 640px; }
.bloom-copy h1 { max-width: 10ch; margin: 0 0 1.5rem; font-size: clamp(4.5rem,8.8vw,8rem); font-weight: 400; letter-spacing: -.06em; line-height: .95; text-wrap: initial; }
.bloom-copy .eyebrow { margin-bottom: 2rem; }
.bloom-lead { margin: 0 0 .7rem; max-width: 30ch; font-size: clamp(1.05rem,1.6vw,1.3rem); }
.bloom-description { max-width: 42ch; margin-bottom: 1.8rem; color: var(--ink-soft); line-height: 1.75; font-size: .95rem; }
.bloom-actions { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; }
.bloom-actions .text-link { font-size: .8rem; }
.bloom-caption { position: absolute; right: 2%; bottom: 6.5rem; display: grid; color: var(--brand-ivory); font-family: var(--font-display); font-size: 1.3rem; font-style: italic; text-shadow: 0 1px 10px var(--brand-night); }
.bloom-foot { position: absolute; bottom: 2rem; inset-inline: 0; display: flex; justify-content: space-between; align-items: center; font-size: .7rem; }
.bloom-foot > span { color: var(--brand-ivory); text-shadow: 0 1px 6px var(--brand-night); }
.scroll-cue { display: inline-flex; align-items: center; min-height: 44px; gap: 1.5rem; color: var(--ink-soft); }
.scroll-cue > span { font-size: 1.25rem; }
.bloom-hero .motion-control { position: absolute; top: 1rem; right: max(20px,calc((100vw - 1240px)/2)); z-index: 3; }
.home-purpose { position: relative; }
.possibilities-layout { display: grid; gap: 3rem; align-items: stretch; }
.possibilities-image { min-height: 300px; aspect-ratio: 1.25; align-self: stretch; border-radius: 160px 160px 20px 20px; }
.possibilities-image img { object-position: 38% center; }
.possibility-links { display: flex; flex-direction: column; justify-content: center; }
.possibility-link, .discover-area-list > a { display: grid; grid-template-columns: 24px minmax(0,1fr) 20px; gap: 1.25rem; padding: 1.8rem 0; border-top: 1px solid var(--border); align-items: start; transition: padding .3s var(--ease-organic),color .3s; }
.possibility-link h3, .discover-area-list h3 { font-size: clamp(2rem,3vw,2.7rem); letter-spacing: -.035em; font-weight: 400; margin-bottom: .55rem; }
.possibility-link p, .discover-area-list p { max-width: 42ch; margin: 0; font-size: .9rem; line-height: 1.65; color: var(--ink-soft); }
.possibility-link > span:last-child, .discover-area-list > a > span:last-child { font-size: 1.25rem; }
.possibility-link:hover, .discover-area-list > a:hover { padding-inline: .6rem; color: var(--accent-strong); }
.possibility-links > .text-link { margin-top: 1rem; }
.featured-work { border-top: 1px solid var(--border); }
.lab-invitation { padding-block: var(--space-editorial); background: var(--brand-night); color: var(--brand-ivory); overflow: hidden; }
.lab-invitation-inner { display: grid; align-items: center; gap: 3rem; }
.lab-invitation .eyebrow { color: var(--brand-lilac); }
.lab-invitation em { color: var(--brand-lilac); }
.lab-invitation p:not(.eyebrow) { max-width: 45ch; margin: 1.5rem 0; color: var(--brand-on-dark); line-height: 1.8; }
.lab-invitation .botanical-image { min-height: 340px; aspect-ratio: 1.1; border-radius: 50% 50% 16px 16px; }
.invitation { display: grid; grid-template-columns: minmax(0,1fr); margin-block: var(--space-editorial); overflow: hidden; background: var(--brand-lilac-soft); border: 1px solid color-mix(in srgb,var(--brand-amethyst) 20%,transparent); border-radius: 24px; }
.invitation-copy { padding: clamp(2rem,5vw,4.5rem); align-self: center; }
.invitation h2 { max-width: 17ch; }
.invitation-copy > p:not(.eyebrow) { max-width: 48ch; margin: 1.5rem 0 2rem; color: var(--ink-soft); line-height: 1.75; }
.invitation-flower { border-radius: 0; max-height: 280px; }
.invitation-flower img { position: absolute; inset: 0; object-position: center 52%; }
.cross-nav.glass-panel { padding: 2rem 0; border-radius: 0; border: 0; border-top: 1px solid var(--border); box-shadow: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; margin-bottom: 3rem; }
.cross-nav > div { gap: .5rem 2rem; }
.cross-nav .button { padding-inline: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; font-weight: 500; background: none; box-shadow: none; }
.site-footer { grid-template-columns: 1fr; gap: 1rem; padding-block: 2.25rem; font-size: .75rem; }
.footer-top { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; text-decoration: underline; text-underline-offset: .3em; }

/* Descubrir: intención, capacidades, proceso y vida del laboratorio. */
.discover-intro { display: grid; gap: 3rem; padding-block: clamp(3rem,6vw,6rem); align-items: center; }
.discover-intro h1, .contact-copy h1 { font-weight: 400; letter-spacing: -.055em; font-size: clamp(3rem,5.7vw,5.6rem); max-width: 14ch; line-height: 1.02; margin-bottom: 1.75rem; }
.discover-intro-copy > p:not(.eyebrow):not(.serif-note) { color: var(--ink-soft); max-width: 48ch; line-height: 1.8; }
.discover-intro .serif-note { max-width: 28ch; margin: 1.6rem 0 1rem; font-family: var(--font-display); color: var(--brand-amethyst); font-size: 1.6rem; font-style: italic; line-height: 1.25; }
.discover-flower { border-radius: 240px 240px 20px 20px; max-height: 640px; aspect-ratio: .78; }
.discover-flower img { object-position: 50% 52%; }
.discover-belief { border-top: 1px solid var(--border); }
.belief-copy { display: grid; gap: 1.5rem; max-width: 780px; margin: 2rem 0 0 auto; }
.belief-copy p { color: var(--ink-soft); line-height: 1.8; }
.discover-areas { display: grid; gap: 3rem; border-top: 1px solid var(--border); }
.discover-areas > div:first-child > p:last-child { max-width: 37ch; color: var(--ink-soft); margin-top: 1.5rem; line-height: 1.8; }
.journey-steps { display: grid; gap: 2rem; counter-reset: step; }
.journey-steps li { position: relative; padding: 1.5rem 0 0; border-top: 1px solid var(--border); }
.step-number { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--brand-line); border-radius: 50%; background: var(--brand-lilac-soft); margin-bottom: 1.7rem; font-size: .8rem; }
.journey-steps h3 { font-size: 2rem; font-weight: 400; letter-spacing: -.04em; margin-bottom: 1rem; }
.journey-steps p { color: var(--ink-soft); max-width: 36ch; line-height: 1.75; font-size: .95rem; }
.social-section { box-shadow: none; border-color: var(--border); background: color-mix(in srgb,var(--brand-lilac-soft) 50%,transparent); }
.social-link { box-shadow: none; border-color: var(--border); background: var(--brand-ivory); border-radius: 14px; }
.social-icon { background: var(--brand-lilac-soft); }

/* Capacidades: navegación de áreas persistente y ejemplos en un plano secundario. */
.services-intro { gap: 2rem 4rem; }
.services-intro h1 { font-size: clamp(3.5rem,7.5vw,7rem); }
.services-intro-copy { align-self: start; }
.services-hero-image { aspect-ratio: 1.55; max-height: 500px; border-radius: 160px 20px 20px 20px; }
.services-hero-image img { object-position: 30% center; }
.services-index { position: sticky; z-index: 30; top: 72px; grid-template-columns: repeat(3,minmax(0,1fr)); background: color-mix(in srgb,var(--brand-paper) 96%,transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.services-index a { position: relative; gap: .55rem; padding: 1rem; min-height: 60px; font-size: .9rem; transition: background .25s; }
.services-index a:first-child { padding-left: .5rem; }
.services-index a:last-child { padding-right: .5rem; }
.services-index a + a { border-top: 0; border-left: 1px solid var(--border); }
.services-index a::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--brand-amethyst); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.services-index a[aria-current="location"]::after, .services-index a:hover::after { transform: scaleX(1); }
.service-area { padding-block: clamp(4rem,8vw,7rem); }
.service-area h2 { font-size: clamp(3.3rem,6.2vw,5.6rem); }
.service-outcome { color: var(--brand-amethyst); font-style: italic; }
.service-area-heading { top: 10rem; }
.service-possibilities > div { transition: background .3s; }
.service-possibilities > div:hover { background: color-mix(in srgb,var(--brand-lilac) 12%,transparent); }
.service-example { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 1.25rem; align-items: center; padding: 1.1rem; margin-top: 1.5rem; border: 1px solid var(--border); border-left: 2px solid var(--brand-amethyst); border-radius: 0 12px 12px 0; background: var(--brand-ivory); }
.service-example > img { aspect-ratio: 1.25; height: auto; object-fit: contain; border-radius: 6px; }
.service-example a { display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; font-size: .98rem; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--brand-line); }
.service-example div > p:last-child { margin: .3rem 0 0; font-size: .82rem; line-height: 1.65; color: var(--ink-soft); }
.services-approach { color: var(--brand-ivory); background: var(--brand-night); box-shadow: none; border: 0; padding: clamp(1.5rem,4vw,3rem); border-radius: 20px; }
.services-approach .eyebrow, .services-approach-copy strong { color: var(--brand-lilac); }
.services-approach-copy > p { color: var(--brand-on-dark); }
.services-close.final-cta { background: var(--brand-lilac-soft); box-shadow: none; border: 1px solid var(--border); }
.services-close::before { display: none; }

/* Portafolio: casos y material real, con aire para ver lo construido. */
.projects-page-section { color: var(--ink); padding-block: var(--space-editorial); }
.projects-heading h1 { font-size: clamp(3rem,6.5vw,6rem); text-shadow: none; }
.projects-heading > p, .projects-section .eyebrow { text-shadow: none; color: var(--ink-soft); }
.projects-grid { gap: 3rem; }
.case-card { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
.case-card::before, .case-card::after { display: none; }
.case-card:hover { box-shadow: none; transform: none; }
.case-card .project-visual { display: block; position: relative; width: 100%; padding: 1.4rem; aspect-ratio: 1.4; min-height: 0; border-radius: 20px; border: 1px solid var(--border); box-shadow: none; overflow: hidden; background: var(--brand-lilac-soft); }
.case-card .project-visual img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--ease-organic); border-radius: 8px; }
.case-card a.project-visual:hover img { transform: scale(1.025); }
.case-card .visual-menu { background: var(--brand-gold-soft); }
.case-card .project-copy { padding: 1.8rem 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.case-card .project-copy h2 { font-size: clamp(2.25rem,3.6vw,3.5rem); max-width: 15ch; }
.case-card .project-copy > p { max-width: 50ch; margin-block: 1rem 1.6rem; font-size: .95rem; line-height: 1.8; }
.case-card .project-meta { justify-content: flex-start; gap: .65rem 1.25rem; font-size: .65rem; letter-spacing: .08em; }
.case-card .status { border: 1px solid var(--border); background: transparent; border-radius: 999px; font-size: .62rem; font-weight: 500; }
.case-card .project-link { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding-block: .75rem; margin-top: auto; border-top: 1px solid var(--border); font-size: .88rem; }
.case-card .project-pending { display: block; font-size: .8rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.portfolio-page .projects-grid { grid-template-columns: minmax(0,1fr); gap: 5rem; }
.project-capabilities { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; color: var(--ink-soft); font-size: .7rem; }
.project-capabilities span { border-bottom: 1px solid var(--brand-line); padding-bottom: .3rem; }

/* Laboratorio: la interacción forma parte del contenido. */
.lab-intro { padding-block: var(--space-editorial) 3rem; }
.lab-intro h1 { font-size: clamp(3.5rem,7.8vw,7rem); font-weight: 400; line-height: 1; letter-spacing: -.055em; margin-bottom: 2rem; }
.lab-intro-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; }
.lab-intro-bottom > p { max-width: 58ch; color: var(--ink-soft); line-height: 1.75; }
.lab-marker { display: inline-flex; padding: .6rem 1rem; border: 1px solid var(--brand-line); border-radius: 999px; font-size: .75rem; }
.light-study { display: grid; overflow: hidden; border-radius: 24px; background: var(--brand-night); color: var(--brand-ivory); }
.light-study-image { position: relative; min-height: 300px; overflow: hidden; }
.light-study-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.study-image-caption { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; padding: 3rem 1.5rem 1.5rem; background: linear-gradient(transparent,color-mix(in srgb,var(--brand-night) 80%,transparent)); font-size: .65rem; }
.light-study-copy { padding: clamp(1.5rem,4vw,3.2rem); }
.light-study .eyebrow { color: var(--brand-lilac); }
.light-study h2 { font-size: clamp(2rem,3.2vw,3.2rem); font-weight: 400; letter-spacing: -.04em; }
.light-study em { color: var(--brand-lilac); }
.light-study-copy > p:not(.eyebrow) { font-size: .9rem; line-height: 1.8; color: var(--brand-on-dark); margin: 1.5rem 0; }
.light-controls { margin-top: 2rem; }
.light-controls[hidden] { display: none; }
.light-controls > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; }
.light-controls output { font-variant-numeric: tabular-nums; }
.light-controls input { width: 100%; height: 44px; margin: .5rem 0 0; accent-color: var(--brand-lilac); cursor: pointer; }
.light-controls .light-scale { font-size: .65rem; color: var(--brand-on-dark); }
.light-controls .text-link { margin-top: 1rem; font-size: .75rem; }
.light-study-copy .study-note { margin-bottom: 0; font-size: .7rem; opacity: .8; }
.lab-projects .project-visual img { object-fit: cover; }
.lab-bridge { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-block: 2rem 4rem; border-bottom: 1px solid var(--border); }
.lab-bridge p { max-width: 40ch; font-family: var(--font-display); font-size: clamp(1.65rem,3vw,2.5rem); line-height: 1.2; }

/* Contacto: una conversación clara y un siguiente paso reconocible. */
.contact-intro { display: grid; gap: 3rem; padding-block: var(--space-editorial); align-items: center; }
.contact-copy > p:not(.eyebrow) { color: var(--ink-soft); max-width: 44ch; line-height: 1.8; margin-bottom: 2rem; }
.contact-copy .contact-destination { font-size: .75rem; margin-top: 1rem; max-width: 40ch; }
.contact-companion { position: relative; }
.contact-companion .botanical-image { height: 390px; border-radius: 180px 180px 16px 16px; }
.contact-companion img { object-position: 50% 40%; }
.conversation-prompts { position: relative; margin: -3rem 1.3rem 0; padding: 1.8rem; border: 1px solid var(--brand-line); border-radius: 16px; background: var(--brand-ivory); }
.conversation-prompts ol { display: grid; gap: 1rem; }
.conversation-prompts li { display: flex; gap: 1rem; align-items: baseline; font-size: .88rem; }
.conversation-prompts li > span { font-size: .65rem; color: var(--ink-soft); }
.contact-faq { display: grid; gap: 2rem; border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { display: flex; gap: 1rem; align-items: center; justify-content: space-between; min-height: 76px; padding-block: 1.2rem; font-size: 1rem; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > .site-icon { transition: transform .25s; }
.faq-list details[open] summary > .site-icon { transform: rotate(180deg); }
.faq-list details p { padding: 0 2rem 1.5rem 0; color: var(--ink-soft); line-height: 1.8; font-size: .95rem; }

/* Mejoras progresivas: todo permanece legible sin JavaScript. */
[data-reveal] { transition: opacity .7s ease, transform .85s var(--ease-organic); }
.reveal-pending { opacity: 0; transform: translateY(24px); }
.reveal-pending.is-in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .bloom-copy { animation: bloom-enter .9s var(--ease-organic) both; }
  @keyframes bloom-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 680px) {
  .shell { width: min(1240px,calc(100% - 80px)); }
  .belief-copy, .journey-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .belief-copy { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .featured-work .projects-grid, .lab-projects .projects-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem; }
  .featured-work .projects-grid > .case-card, .lab-projects .projects-grid > .case-card { display: flex; grid-column: auto; flex-direction: column; }
  .featured-work .projects-grid > .case-card .project-visual, .lab-projects .projects-grid > .case-card .project-visual { min-height: 0; aspect-ratio: 1.3; flex: none; }
  .featured-work .projects-grid > .case-card .project-copy, .lab-projects .projects-grid > .case-card .project-copy { display: flex; flex: 1; margin: 0; padding: 1.8rem 0 0; flex-direction: column; justify-content: flex-start; }
  .featured-work .case-card:nth-child(2) { margin-top: 5rem; }
  .invitation { grid-template-columns: 1.5fr 1fr; }
  .invitation-flower { max-height: none; height: 100%; }
  .site-footer { grid-template-columns: 1fr auto; }
  .footer-top { justify-self: end; }
}
@media (min-width: 920px) {
  .possibilities-layout { grid-template-columns: .8fr 1.2fr; gap: 6rem; }
  .lab-invitation-inner { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .discover-intro { grid-template-columns: 1.25fr .8fr; gap: 6rem; }
  .discover-areas, .contact-faq { grid-template-columns: .9fr 1.1fr; gap: 5rem; }
  .services-intro { grid-template-columns: 1.15fr .85fr; align-items: start; padding-bottom: 3rem; }
  .services-intro > div:first-child { grid-column: 1; grid-row: 1; align-self: end; }
  .services-intro-copy { grid-column: 1; grid-row: 2; }
  .services-hero-image { grid-column: 2; grid-row: 1 / 3; height: 100%; min-height: 440px; aspect-ratio: .9; }
  .portfolio-page .case-card { display: grid; grid-template-columns: 1.25fr .85fr; gap: 4rem; align-items: center; padding-bottom: 4rem; border-bottom: 1px solid var(--border); }
  .portfolio-page .case-card:nth-child(even) { grid-template-columns: .85fr 1.25fr; }
  .portfolio-page .case-card:nth-child(even) .project-visual { order: 2; }
  .portfolio-page .case-card .project-visual { min-height: 0; aspect-ratio: 1.25; }
  .portfolio-page .case-card .project-copy { margin: 0; padding: 0; justify-content: center; }
  .light-study { grid-template-columns: 1.2fr 1fr; }
  .light-study-image { min-height: 560px; }
  .contact-intro { grid-template-columns: 1.2fr .8fr; gap: 6rem; }
  .site-footer { grid-template-columns: 1fr 1.4fr auto auto; }
}
@media (max-width: 919px) {
  .bloom-copy { width: 64%; }
  .bloom-copy h1 { font-size: clamp(4rem,10vw,6rem); }
  .bloom-caption { display: none; }
  .bloom-foot > span { display: none; }
  .discover-flower { max-height: 480px; aspect-ratio: 1.25; }
}
@media (max-width: 679px) {
  .eyebrow { font-size: .63rem; }
  /* Una sola escena: el contenido crece si hace falta, sin una segunda pantalla de vídeo. */
  .bloom-hero-inner { min-height: min(780px,calc(100svh - 73px)); padding-block: 4rem 1.5rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.5rem; }
  .bloom-copy { width: 100%; max-width: 30rem; }
  .bloom-copy h1 { font-size: clamp(3.15rem,14vw,4.75rem); max-width: 8.7ch; margin-bottom: 1.25rem; line-height: .98; }
  .bloom-copy .eyebrow { margin-bottom: 1.25rem; }
  .bloom-lead { font-size: 1.05rem; max-width: 26ch; }
  .bloom-description { font-size: .9rem; max-width: 32ch; margin-bottom: 1.25rem; line-height: 1.65; }
  .bloom-hero .route-backdrop-signature { background: var(--brand-paper); }
  .bloom-hero .signature-stage { inset: 0; width: 100%; aspect-ratio: auto; mask-image: none; -webkit-mask-image: none; }
  .bloom-hero .signature-stage img, .bloom-hero .signature-stage video { object-fit: cover; object-position: center; }
  .bloom-hero .route-backdrop-signature::after { background: linear-gradient(0deg,var(--brand-paper),transparent 24%),linear-gradient(90deg,color-mix(in srgb,var(--brand-paper) 92%,transparent),color-mix(in srgb,var(--brand-paper) 78%,transparent) 46%,color-mix(in srgb,var(--brand-paper) 28%,transparent)); }
  .bloom-actions { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .bloom-actions .button { width: auto; min-width: min(245px,100%); }
  .bloom-actions .text-link { font-size: .8rem; }
  .bloom-foot { position: relative; bottom: auto; font-size: .68rem; }
  .bloom-hero .motion-control { top: .5rem; right: 20px; padding: .6rem .9rem; border-radius: 999px; color: var(--ink); background: color-mix(in srgb,var(--brand-paper) 82%,transparent); font-size: .68rem; }
  .editorial-heading { text-align: left; margin-bottom: 2.5rem; }
  .editorial-heading > p:last-child { margin-top: 1.5rem; }
  .possibilities-image { min-height: 0; aspect-ratio: 1.6; border-radius: 100px 16px 16px 16px; }
  .possibilities-layout { gap: 2rem; }
  .lab-invitation .botanical-image { min-height: 0; aspect-ratio: 1.3; }
  .invitation-flower { height: 240px; }
  .discover-intro h1, .contact-copy h1 { font-size: clamp(2.8rem,12vw,4.3rem); max-width: 14ch; }
  .discover-flower { aspect-ratio: 1.1; max-height: 380px; }
  .services-intro { padding-top: 3rem; gap: 1.8rem; }
  .services-hero-image { aspect-ratio: 1.6; border-radius: 100px 16px 16px 16px; }
  .services-index a { padding-inline: .6rem; font-size: .8rem; gap: .35rem; }
  .services-index a > span:last-child { display: none; }
  .service-example { grid-template-columns: minmax(0,1fr); gap: .8rem; }
  .service-example > img { max-width: 150px; max-height: 90px; }
  .service-area-heading { position: static; }
  .light-study-image { min-height: 320px; }
  .conversation-prompts { margin-inline: .8rem; padding: 1.4rem; }
  .site-footer .brand { margin-bottom: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; transform: none; }
  .case-card .project-visual img { transition: none; }
  .case-card a.project-visual:hover img { transform: none; }
  .bloom-copy { animation: none; }
}

/* Compact project index; generated device photography with unaltered app captures. */
[data-page="portfolio"] { background:var(--brand-paper); }
[data-page="portfolio"] .route-backdrop { display:none; }
.portfolio-index { max-width:1220px; }
.portfolio-intro { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:24px; padding:24px 0 28px; border-bottom:1px solid var(--brand-line); }
.portfolio-intro h1 { margin:18px 0 22px; font:400 clamp(2.8rem,5.1vw,4.65rem)/1.04 var(--brand-font-display); letter-spacing:-.055em; }
.portfolio-intro-copy > p:not(.eyebrow) { color:var(--brand-muted); font-size:1.08rem; line-height:1.65; }
.portfolio-intro-copy > a { margin-top:24px; }
.portfolio-hero-visual { position:relative; width:100%; min-width:0; min-height:285px; aspect-ratio:1.7; overflow:hidden; background:var(--brand-paper); border-radius:14px; isolation:isolate; }
.portfolio-hero-visual .hero-laptop { position:absolute; width:95%; left:-9%; top:3%; }
.portfolio-hero-visual .hero-phone { position:absolute; width:75%; right:-20%; top:3%; mix-blend-mode:multiply; }
.portfolio-hero-visual .hero-laptop { mix-blend-mode:multiply; }
.portfolio-hero-visual .hero-phone .device-mockup { clip-path:inset(0 28% 0 31%); }
.portfolio-hero-visual > p { display:none; }
.device-mockup { position:relative; aspect-ratio:3/2; width:100%; overflow:hidden; }
.device-frame { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.device-screen { position:absolute; display:block; object-fit:cover; object-position:top center; }
.device-laptop .device-screen { left:18.359375%; top:13.183594%; width:63.28125%; height:56.347656%; border-radius:1px; }
.device-phone .device-screen { left:36.197917%; top:5.371094%; width:27.604167%; height:86.328125%; border-radius:11.08% / 5.32%; }
.portfolio-section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; padding:30px 0 22px; }
.portfolio-section-heading h2 { margin:10px 0 0; font:400 clamp(2rem,3.8vw,3rem)/1.12 var(--brand-font-display); letter-spacing:-.045em; }
.portfolio-section-heading > p { color:var(--brand-muted); max-width:48ch; font-size:.87rem; line-height:1.6; }
.portfolio-case { border-top:1px solid var(--brand-line); scroll-margin-top:100px; }
.case-disclosure > summary { display:grid; grid-template-columns:29% 1fr 162px; gap:28px; align-items:center; list-style:none; cursor:pointer; padding:8px 0; }
.case-disclosure > summary::-webkit-details-marker { display:none; }
.case-disclosure > summary > .device-mockup { max-width:205px; margin:auto; border-radius:10px; }
.case-category { font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-muted); display:flex; gap:16px; }
.case-category > span { color:var(--brand-amethyst); }
.case-row-copy h2 { margin:9px 0 10px; font:400 clamp(1.5rem,2.7vw,2.2rem)/1.1 var(--brand-font-display); letter-spacing:-.04em; }
.case-summary { color:var(--brand-muted); font-size:.85rem; line-height:1.6; max-width:50ch; }
.case-row-action { align-self:stretch; display:flex; align-items:flex-end; flex-direction:column; justify-content:space-between; padding:22px 0; gap:18px; }
.case-status { padding:6px 9px; border-radius:30px; background:var(--brand-soft); color:var(--brand-ink); font-size:.65rem; line-height:1.3; text-align:center; }
.case-open,.case-close { display:flex; align-items:center; gap:12px; font-size:.84rem; text-decoration:underline; text-underline-offset:5px; }
.case-close { display:none; }
.case-disclosure[open] .case-open { display:none; }
.case-disclosure[open] .case-close { display:flex; }
.case-disclosure > summary:hover h2 { color:var(--brand-violet); }
.case-disclosure > summary:focus-visible { outline:2px solid var(--brand-focus); outline-offset:5px; border-radius:6px; }
.case-body { padding:26px 32px 32px; margin-bottom:26px; border-radius:12px; background:var(--brand-ivory); border:1px solid var(--brand-line); }
.case-story,.case-functions { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.case-story { margin-bottom:30px; }
.case-body h3 { margin:10px 0; font:400 1.65rem/1.2 var(--brand-font-display); letter-spacing:-.025em; }
.case-body p,.case-features { font-size:.9rem; line-height:1.7; color:var(--brand-muted); }
.case-features { list-style:disc; padding-left:19px; margin:15px 0; }
.case-features li { padding:3px 0 3px 4px; }
.case-tags { display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:17px 0; list-style:none; }
.case-tags li { border:1px solid var(--brand-line); padding:5px 9px; border-radius:6px; color:var(--brand-ink); font-size:.76rem; }
.case-body .case-note,.case-note { font-size:.79rem; line-height:1.65; }
.case-links { display:flex; gap:12px 24px; flex-wrap:wrap; margin-top:24px; }
.case-access { margin-top:24px; font-style:italic; }
.case-capture { margin:30px 0 0; }
.case-capture img { width:100%; max-height:600px; object-fit:contain; background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:6px; }
.case-capture figcaption { color:var(--brand-muted); font-size:.75rem; line-height:1.6; margin-top:10px; }
.portfolio-lab { border-top:1px solid var(--brand-line); padding-bottom:36px; }
.portfolio-lab-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.lab-case { border:1px solid var(--brand-line); border-radius:12px; padding:14px; display:grid; grid-template-columns:32% 1fr; align-content:start; gap:20px; }
.lab-case-image { width:100%; height:125px; object-fit:cover; object-position:left top; border-radius:8px; }
.lab-case h3 { font:400 1.25rem/1.15 var(--brand-font-display); letter-spacing:-.035em; margin:7px 0 10px; }
.lab-case p { color:var(--brand-muted); font-size:.83rem; line-height:1.6; }
.lab-case .eyebrow { font-size:.6rem; }
.lab-case summary { cursor:pointer; display:flex; align-items:center; gap:12px; margin-top:13px; font-size:.8rem; min-height:32px; text-decoration:underline; text-underline-offset:4px; }
.lab-case-details { margin-top:18px; }
.lab-case-copy { min-width:0; }
.lab-image-contain { object-fit:contain; object-position:center; background:var(--brand-lilac-soft); }
.lab-image-cutout { background:transparent; }
.lab-process { margin:0; padding:12px 8px 12px 25px; align-self:start; display:grid; gap:10px; border-radius:8px; background:var(--brand-lilac-soft); color:var(--brand-ink); font-size:.68rem; line-height:1.45; overflow-wrap:anywhere; }
.lab-process li::marker { color:var(--brand-violet); font-weight:700; }
.lab-sample { margin:22px 0 0; min-width:0; }
.lab-sample img,.lab-sample video { display:block; width:100%; max-height:420px; object-fit:contain; border:1px solid var(--brand-line); border-radius:8px; background:var(--brand-lilac-soft); }
.lab-sample h4 { margin:0 0 10px; font-size:.92rem; line-height:1.4; }
.lab-sample figcaption { margin:10px 0 0; color:var(--brand-muted); font-size:.75rem; line-height:1.6; }
.lab-sample figcaption a { color:var(--brand-violet); text-decoration:underline; text-underline-offset:3px; }
.lab-avatar-samples { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:18px; }
.lab-avatar-samples video { aspect-ratio:1; }
.lab-avatar-samples + .case-note { margin-top:14px; }
.lab-case:has(details[open]) { grid-template-columns:1fr; }
.lab-case:has(details[open]) > img { aspect-ratio:2.5/1; object-fit:contain; background:var(--brand-soft); }
.lab-case:has(details[open]) > .lab-process { grid-template-columns:1fr 1fr; column-gap:24px; }
.lab-continue { margin-top:22px; }
.portfolio-invitation { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:34px; background:var(--brand-soft); border-radius:14px; margin:0 0 35px; }
.portfolio-invitation h2 { font:400 clamp(1.8rem,3vw,2.5rem)/1.14 var(--brand-font-display); letter-spacing:-.045em; margin:10px 0 0; }
[data-page="portfolio"] .site-footer { margin-top:0; }
@media(min-width:1400px) { .portfolio-intro { padding-top:30px; padding-bottom:30px; } .portfolio-hero-visual { min-height:330px; } }
@media(max-width:950px) { .case-disclosure > summary { grid-template-columns:30% 1fr; gap:12px 18px; padding:16px 0; } .case-row-action { grid-column:2; flex-direction:row; align-items:center; padding:0; } .case-disclosure > summary > .device-mockup { grid-row:1/3; } .portfolio-lab-grid { grid-template-columns:1fr; } .lab-case { grid-template-columns:22% 1fr; } }
@media(max-width:680px) { .portfolio-intro { grid-template-columns:1fr; gap:20px; padding:28px 0; } .portfolio-intro h1 { font-size:clamp(2.6rem,11vw,3.7rem); } .portfolio-intro-copy > p:not(.eyebrow) { font-size:.95rem; } .portfolio-hero-visual { min-height:230px; } .portfolio-hero-visual .hero-laptop { top:0; } .portfolio-hero-visual .hero-phone { top:5%; } .portfolio-hero-visual > p { bottom:12px; font-size:.67rem; } .portfolio-section-heading { align-items:start; flex-direction:column; gap:12px; padding:26px 0 18px; } .portfolio-section-heading > p { font-size:.82rem; } .case-disclosure > summary { grid-template-columns:27% 1fr; gap:9px 13px; padding:18px 0; } .case-category { font-size:.55rem; gap:6px; flex-wrap:wrap; letter-spacing:.05em; } .case-row-copy h2 { font-size:1.5rem; margin:7px 0; } .case-summary { font-size:.77rem; line-height:1.5; } .case-row-action { gap:8px; flex-wrap:wrap; } .case-status { font-size:.58rem; } .case-open,.case-close { font-size:.75rem; min-height:32px; } .case-body { padding:20px; } .case-story,.case-functions { grid-template-columns:1fr; gap:22px; } .case-story { margin-bottom:24px; } .lab-case { grid-template-columns:27% 1fr; gap:14px; } .lab-case h3 { font-size:1.3rem; } .portfolio-invitation { flex-direction:column; align-items:start; padding:24px; } }
@media(prefers-reduced-motion:reduce) { .portfolio-index * { scroll-behavior:auto; transition:none; } }
@media(max-width:680px) {
  .case-disclosure > summary > .device-phone { aspect-ratio:.75; }
  .case-disclosure > summary > .device-phone .device-frame { position:absolute; width:200%; max-width:none; height:auto; left:-50%; }
  .case-disclosure > summary > .device-phone .device-screen { left:22.395834%; width:55.208334%; }
}

/* Violet from the CV email (#655080), with light and dark companion tones.
   These website overrides leave the reusable Signature palette unchanged. */
@font-face { font-family:'MileLab Sans'; src:url('/assets/fonts/dm-sans-variable.ttf') format('truetype'); font-weight:100 1000; font-style:normal; font-display:swap; }
@font-face { font-family:'MileLab Display'; src:url('/assets/fonts/anton-regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
:root {
  --brand-paper: #f8f7fc;
  --brand-ivory: #fff;
  --brand-ink: #24172f;
  --brand-muted: #554b63;
  --brand-line: #d9cee4;
  --brand-font-display: 'MileLab Sans', Arial, sans-serif;
  --brand-font-body: 'MileLab Sans', Arial, sans-serif;
  --font-poster: 'MileLab Display', 'Arial Narrow', sans-serif;
  --brand-display-weight: 600;
  --brand-violet: #655080;
  --brand-amethyst: #75639b;
  --brand-focus: #655080;
  --brand-soft: #ede6f4;
  --brand-lilac-soft: #ede6f4;
  --theme-action: #655080;
  --theme-action-hover: #55416f;
  --theme-link: #655080;
  --theme-link-hover: #49365f;
  --theme-header: var(--brand-paper);
  --theme-intro: #ede6f4;
}

/* Optional black theme. Light remains the default; photographs keep their colors. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-paper: #101012;
  --brand-ivory: #19191d;
  --brand-soft: #26222c;
  --brand-night: #211b28;
  --brand-ink: #f1ece8;
  --brand-muted: #bcb5c2;
  --brand-line: #44394e;
  --brand-amethyst: #bfaad8;
  --brand-violet: #c9b4de;
  --brand-lilac-soft: #302735;
  --brand-lilac-mid: #51425d;
  --brand-gold-soft: #2d2620;
  --brand-focus: #c9b4de;
  --border: #44394e;
  --theme-link: #c9b4de;
  --theme-link-hover: #e1cfee;
  --theme-header: #29232f;
  --theme-intro: #302735;
  --shadow: 0 24px 70px #0006;
  --shadow-soft: 0 10px 34px #0004;
}

.site-header { background: color-mix(in srgb,var(--theme-header) 94%,transparent); }
/* The portfolio is the shared frame for the site; keep its paper and proportions. */
.shell { width:min(1320px,calc(100% - 76px)); }
.header-inner { min-height:82px; }
.brand { font-size:1.3rem; }
.desktop-nav a { font-size:.78rem; font-weight:500; }
.header-cta { border-radius:9px; }
/* One official icon family across navigation and controls. */
.site-icon { display:inline-block; flex-shrink:0; width:1.25rem; height:1.25rem; vertical-align:middle; }
.site-arrow { width:1.375rem; height:1.375rem; }
.social-icon .site-icon { width:28px; height:28px; }
/* Shared footer content and layout, including the portfolio. */
.site-footer { grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:'brand tagline location top'; gap:24px; margin-top:0; padding:30px 0 38px; border-color:var(--brand-line); color:var(--ink-soft); font-size:.75rem; }
.site-footer > .brand { grid-area:brand; }
.footer-tagline { grid-area:tagline; }
.footer-location { grid-area:location; }
.footer-top { grid-area:top; gap:.5rem; justify-self:end; }
.contact-copy h1,.contact-faq h2 { font-weight:600; }
.contact-faq h2 { font-size:clamp(2rem,3.5vw,3rem); }
:root:not([data-theme="dark"]) .route-backdrop-pearl { background:var(--brand-paper); }
:root:not([data-theme="dark"]) .site-header { background:var(--brand-paper); border-bottom:0; }
:root:not([data-theme="dark"]) .brand-mark img { filter:none; }
:root:not([data-theme="dark"]) .theme-toggle { color:var(--theme-link); border-color:var(--brand-line); }
:root:not([data-theme="dark"]) .mobile-nav summary { background:var(--brand-soft); }
:root:not([data-theme="dark"]) .mobile-nav nav { background:var(--brand-paper); }
[data-page="portfolio"] { background: linear-gradient(180deg,var(--theme-intro),var(--brand-paper) 620px); }
:root :is(.button-primary, .mobile-primary-cta) {
  color: #fff; border-color: transparent;
  background: var(--theme-action);
  box-shadow: 0 6px 20px color-mix(in srgb,var(--theme-action) 18%,transparent);
}
:root :is(.button-primary, .mobile-primary-cta):hover { color: #fff; background: var(--theme-action-hover); }
:root :is(.button-primary, .mobile-primary-cta)::before { background: none; }
.desktop-nav a[aria-current="page"],
.portfolio-index :is(.text-link, .project-link, .case-open, .case-close, .lab-case summary, .case-status) { color: var(--theme-link); }
.portfolio-index :is(.text-link, .project-link, .lab-case summary):hover { color: var(--theme-link-hover); }
.portfolio-index :is(.case-body, .lab-case) { background: var(--brand-soft); }

.header-actions { display: flex; justify-self: end; align-items: center; gap: .65rem; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex-shrink: 0; min-height: 44px; min-width: 44px; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); background: transparent; cursor: pointer; font-size: .75rem; line-height: 1; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--brand-soft); }
.theme-toggle svg { flex-shrink: 0; }
.theme-icon-sun, [data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }

[data-theme="dark"] ::selection { background: var(--brand-lilac); color: #211537; }
[data-theme="dark"] .skip-link { background: var(--brand-lilac); color: #211537; }
[data-theme="dark"] .brand-mark img { filter: drop-shadow(0 2px 8px #0006); }
[data-theme="dark"] .mobile-nav summary { background: var(--surface); }
[data-theme="dark"] .mobile-nav nav { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .button-secondary { border-color: var(--border); }
[data-theme="dark"] :is(.lab-invitation, .services-approach, .light-study, .botanical-image figcaption, .bloom-caption, .bloom-foot > span) { color: #f1ece8; }
[data-theme="dark"] .social-icon { border-color: var(--border); }
[data-theme="dark"] .motion-control { padding: .6rem .9rem; border-radius: 999px; color: #f1ece8; background: #101012cc; }

/* El fondo claro de la película se funde gradualmente con la portada oscura. */
[data-theme="dark"] .bloom-hero .route-backdrop-signature { background: var(--brand-paper); }
[data-theme="dark"] .bloom-hero .signature-stage { mask-image: linear-gradient(90deg,transparent,#0002 15%,#0008 38%,#000 75%); -webkit-mask-image: linear-gradient(90deg,transparent,#0002 15%,#0008 38%,#000 75%); }
[data-theme="dark"] .bloom-hero .route-backdrop-signature::after { background: linear-gradient(0deg,var(--brand-paper),transparent 24%); }
@media (max-width: 679px) {
  [data-theme="dark"] .bloom-hero .signature-stage { mask-image: none; -webkit-mask-image: none; }
  [data-theme="dark"] .bloom-hero .route-backdrop-signature::after { background: linear-gradient(0deg,var(--brand-paper),transparent 28%),linear-gradient(90deg,#101012eb,#101012c9 48%,#10101280); }
  [data-theme="dark"] .bloom-description { color: #e2dbe8; }
}

/* The device photographs have an ivory backdrop. Keep a shared photo stage
   so their multiply blend never hides a screen against the black surface. */
[data-theme="dark"] .portfolio-hero-visual,
[data-theme="dark"] .case-disclosure > summary > .device-mockup { background: #e9e2dd; }

@media (min-width: 920px) and (max-width: 1099px) {
  .header-inner { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .desktop-nav { justify-content: center; gap: 1rem; }
}
@media (max-width: 359px) {
  .theme-toggle { padding-inline: .65rem; }
  .header-actions { gap: .4rem; }
}
@media (max-width:920px) { .shell { width:calc(100% - 44px); } }
@media (max-width:920px) {
  .site-footer { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'brand top' 'tagline tagline' 'location location'; gap:10px 18px; padding-block:24px; }
}
@media (max-width:620px) {
  .shell { width:calc(100% - 32px); }
  .header-inner { min-height:64px; gap:12px; }
  .brand { font-size:1.16rem; }
  .brand-mark { width:34px; height:34px; }
  .brand-mark img { width:42px; height:42px; }
}

/* Archivo MileLab. Real raster paper/collage, live accessible content. */
[data-page="portfolio"] {
  --archive-bg:var(--brand-paper); --archive-heading:var(--theme-link); --archive-copy:var(--brand-muted);
  --archive-line:var(--brand-line); --archive-ink:var(--brand-ink); --archive-surface:var(--brand-soft);
  font-family:var(--font-body); background:var(--archive-bg); color:var(--archive-ink);
}
[data-theme="dark"] [data-page="portfolio"] {
  --brand-paper:#151219; --brand-ivory:#201b25; --brand-soft:#28212e;
  --archive-bg:#151219; --archive-heading:#d8c6ea; --archive-copy:#c5b8d0;
  --archive-line:#4d405b; --archive-ink:#f7f2fb; --archive-surface:#241e2b;
}
[data-page="portfolio"] .site-header { background:var(--archive-bg); border-bottom:0; }
[data-page="portfolio"] .brand { color:var(--archive-ink); }
[data-page="portfolio"] .brand-mark { background:none; border:0; box-shadow:none; backdrop-filter:none; }
[data-page="portfolio"] .brand-mark img { filter:none; }
[data-page="portfolio"] .desktop-nav a { color:var(--archive-copy); font-weight:500; font-size:.78rem; }
[data-page="portfolio"] .desktop-nav a[aria-current] { color:var(--archive-heading); }
[data-theme="dark"] [data-page="portfolio"] .header-cta { background:#d8c6ea; color:#24172f; }
[data-page="portfolio"] .theme-toggle { color:var(--archive-heading); border-color:var(--archive-line); }
[data-page="portfolio"] .mobile-nav summary { background:var(--archive-surface); }
[data-page="portfolio"] .mobile-nav nav { background:var(--archive-bg); }
.archive-index { max-width:none; }
.archive-index .eyebrow { color:var(--archive-heading); font-size:.63rem; letter-spacing:.22em; font-weight:600; margin:0; }
.archive-icon { display:inline-block; flex-shrink:0; width:20px; height:20px; object-fit:contain; }
.archive-hero { position:relative; display:grid; grid-template-columns:42% 58%; align-items:center; min-height:520px; padding:8px 0 30px; }
.archive-hero-copy { position:relative; z-index:2; padding:0 0 0 10px; }
.archive-author { margin-bottom:20px !important; }
.archive-hero h1 { margin:0 0 22px; color:var(--archive-heading); text-wrap:initial; }
.archive-hero h1 > span { display:block; font:500 clamp(2.8rem,6.2vw,5rem)/1.1 var(--font-body); letter-spacing:-.065em; }
.archive-hero h1 > strong { display:block; font:400 clamp(6rem,12.4vw,10.8rem)/1.06 'MileLab Display','Arial Narrow',sans-serif; letter-spacing:-.025em; margin:3px 0 0 -3px; }
.archive-lead { max-width:33ch; color:var(--archive-copy); font-size:clamp(1rem,1.7vw,1.24rem); line-height:1.5; }
.archive-explore.button { margin-top:26px; border-radius:99px; min-height:50px; padding:13px 26px; width:auto; gap:24px; font-weight:600; }
.archive-disciplines { display:flex; gap:14px; align-items:center; margin-top:32px; padding-top:17px; max-width:410px; border-top:1px solid var(--archive-line); color:var(--archive-heading); font-size:.56rem; letter-spacing:.17em; text-transform:uppercase; }
.archive-collage { position:relative; display:grid; width:100%; margin-left:0; padding-bottom:28px; }
.archive-collage-image { display:block; width:100%; height:100%; object-fit:contain; }
.archive-collage-art { position:relative; width:100%; aspect-ratio:1280/853; }
.archive-assistant { position:absolute; z-index:2; right:15.5%; top:60%; transform:translateY(-60%) rotate(-3deg); display:flex; align-items:center; gap:7px; width:max-content; max-width:calc(100% - 12px); min-height:44px; padding:5px 10px 5px 6px; border:1px solid #bda6d0; border-radius:5px; background:#d8c6ea; color:#30213d; box-shadow:0 3px 7px #24172f18; font-size:.7rem; line-height:1.3; text-decoration:none; }
.archive-assistant::before { content:""; position:absolute; top:-5px; left:42%; width:28px; height:9px; background:#bfa7d8b3; border:1px solid #e9def080; transform:rotate(7deg); pointer-events:none; }
.archive-assistant > img { flex-shrink:0; width:28px; height:28px; border-radius:50%; object-fit:cover; }
.archive-assistant > span { min-width:0; }
.archive-assistant strong,.archive-assistant small { display:block; }
.archive-assistant strong { font-weight:700; }
.archive-assistant small { font-size:.9em; }
.archive-assistant small .site-arrow { width:1em; height:1em; vertical-align:-.1em; }
.archive-assistant:focus-visible { outline:2px solid var(--archive-heading); outline-offset:4px; }
.archive-projects { border-top:1px solid var(--archive-line); padding-top:34px; scroll-margin-top:12px; }
.archive-section-heading { display:grid; grid-template-columns:1.15fr 1fr; align-items:end; gap:28px; margin:0 10px 24px; }
.archive-section-heading h2 { margin-top:12px; font:700 clamp(2.1rem,4.7vw,3.9rem)/1.05 var(--font-body); letter-spacing:-.055em; text-wrap:initial; }
.archive-section-heading > p { max-width:43ch; border-left:1px solid var(--archive-line); padding-left:20px; color:var(--archive-copy); font-size:.86rem; line-height:1.5; }
.archive-shelf { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:0 -14px; }
.archive-shelf-hint { display:none; }
.archive-folder { position:relative; min-width:0; margin-right:-7px; }
.archive-folder:last-child { margin-right:-7px; }
.folder-link { display:grid; grid-template-rows:auto minmax(174px,1fr); gap:20px; position:relative; isolation:isolate; height:100%; padding:60px 8% 30px 17%; color:#291d37; transition:transform 220ms ease; }
.folder-link:focus-visible { outline:3px solid var(--archive-heading); outline-offset:-5px; border-radius:16px; }
.folder-paper { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.folder-number { position:absolute; z-index:1; top:4.4%; left:13.5%; font:400 clamp(1.5rem,2.4vw,2.25rem)/1 'MileLab Display',sans-serif; }
.folder-label { position:absolute; z-index:1; left:5.8%; top:17.3%; width:9.3%; height:23.2%; writing-mode:vertical-rl; transform:rotate(180deg); text-align:center; display:flex; justify-content:center; align-items:center; font-size:clamp(.62rem,1.1vw,.87rem); white-space:nowrap; color:#33213e; }
/* Every cover occupies the same 4:5 mount; each product keeps its own composition. */
.folder-cover { position:relative; z-index:1; isolation:isolate; container-type:inline-size; width:100%; aspect-ratio:4/5; min-width:0; overflow:hidden; border:1px solid #ffffffb3; border-radius:4px 15px 4px 4px; color:#3d2d4c; background:radial-gradient(ellipse at 75% 15%,#fcfaff 0,transparent 58%),linear-gradient(145deg,#e5dbee,#cdb8df); box-shadow:0 7px 14px #40255120; }
.folder-cover::before { content:""; position:absolute; z-index:-1; inset:12% -40% 20% -20%; border:1px solid #fff8; border-radius:50%; transform:rotate(-28deg); }
.cover-kicker { position:absolute; z-index:4; top:4%; left:8%; right:6%; font-size:clamp(.54rem,3.65cqw,.7rem); font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.cover-footnote { position:absolute; z-index:4; left:8%; right:6%; bottom:3.5%; font-size:clamp(.55rem,3.8cqw,.74rem); line-height:1.2; font-style:italic; }
.cover-phone { display:block; position:absolute; width:auto; height:76%; aspect-ratio:390/844; overflow:hidden; border:4px solid #2c2532; border-radius:16px; background:#eeeaf3; box-shadow:5px 10px 13px #392a4a30; }
.cover-phone > img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.cover-assistant-note { position:absolute; top:20%; right:8%; width:43%; padding:9% 5% 12%; background:repeating-linear-gradient(transparent 0 19px,#e9dfef 19px 20px),#fcfaff; border:1px solid #ded1e8; box-shadow:3px 5px 9px #392a4a16; transform:rotate(6deg); }
.cover-assistant-note > span { display:block; font-size:clamp(.55rem,4.2cqw,.8rem); line-height:1.9; font-style:italic; }
.cover-assistant-phone { z-index:2; top:13%; left:8%; height:73%; aspect-ratio:575/1280; transform:rotate(-6deg); }
.cover-assistant-phone > img { object-fit:contain; }
.cover-assistant-name { position:absolute; z-index:3; bottom:13%; right:6%; width:62%; padding:7% 6%; background:#f6f0fb; border:1px solid #c7b0d9; box-shadow:2px 5px 9px #392a4a20; transform:rotate(5deg); }
.cover-assistant-name > small,.cover-assistant-name > strong,.cover-assistant-name > span { display:block; }
.cover-assistant-name > small { font-size:clamp(.45rem,3cqw,.62rem); }
.cover-assistant-name > strong { margin:5% 0; font-size:clamp(.8rem,7cqw,1.3rem); letter-spacing:-.04em; line-height:1.1; }
.cover-assistant-name > span { font-size:clamp(.45rem,3cqw,.65rem); }
.cover-menu-phone { z-index:1; left:7%; top:13%; transform:rotate(-7deg); }
.cover-marco-card { position:absolute; z-index:2; top:30%; right:5%; width:48%; padding:5% 4% 6%; background:#fcfaff; border:1px solid #fff; box-shadow:2px 7px 12px #392a4a30; transform:rotate(7deg); }
.cover-marco-card::before { content:""; position:absolute; width:48%; height:7%; left:28%; top:-3%; background:#bfa7d8b3; transform:rotate(-5deg); }
.cover-marco-card > img { aspect-ratio:1; width:100%; height:auto; object-fit:cover; }
.cover-marco-card > strong { display:block; margin-top:8%; font-size:clamp(.8rem,7cqw,1.35rem); line-height:1; letter-spacing:-.04em; }
.cover-marco-card > span { display:block; margin-top:5%; font-size:clamp(.45rem,3.2cqw,.62rem); line-height:1.25; }
.cover-identity-back { z-index:1; height:65%; right:8%; top:22%; transform:rotate(9deg); }
.cover-identity-front { z-index:2; height:80%; left:8%; top:11%; transform:rotate(-7deg); }
.cover-study-paper { position:absolute; z-index:1; top:14%; left:12%; width:70%; padding:6%; border:1px solid #dfd5e8; background:repeating-linear-gradient(transparent 0 19px,#e9dfef 19px 20px),#fcfaff; box-shadow:3px 5px 9px #392a4a16; transform:rotate(-7deg); }
.cover-study-paper > span { display:block; font-size:clamp(.6rem,4.5cqw,.85rem); font-style:italic; line-height:1.7; }
.cover-browser { position:absolute; z-index:2; top:34%; left:5%; width:90%; aspect-ratio:1.5; padding-top:7%; border:3px solid #42374c; border-radius:8px; overflow:hidden; background:#42374c; box-shadow:3px 8px 12px #392a4a30; transform:rotate(-3deg); }
.cover-browser-bar { position:absolute; top:4%; left:5%; display:flex; gap:4px; }
.cover-browser-bar i { width:4px; height:4px; border-radius:50%; background:#d8c6ea; }
.cover-browser > img { width:100%; height:100%; object-fit:contain; background:#fff; }
.cover-study-tutor { position:absolute; z-index:3; top:49%; right:5%; width:37%; height:38%; padding:3%; border:1px solid #dcd2e4; border-radius:3px; background:#fff; box-shadow:3px 6px 10px #392a4a30; transform:rotate(7deg); }
.cover-study-tutor > img { width:100%; height:100%; object-fit:cover; object-position:right top; }
.cover-exposure-sheet { position:absolute; top:19%; left:12%; width:60%; height:60%; border:1px solid #f8f3ff; background:#b7a1c9; transform:rotate(-12deg); box-shadow:2px 5px 8px #392a4a20; }
.cover-exposure-print { position:absolute; z-index:1; top:20%; left:7%; width:64%; height:62%; padding:4% 4% 13%; background:#fcfaff; box-shadow:3px 7px 10px #392a4a26; transform:rotate(-6deg); }
.cover-exposure-print > img { width:100%; height:100%; object-fit:cover; object-position:center 49%; }
.cover-exposure-print > span { position:absolute; bottom:5%; left:6%; right:4%; font-size:clamp(.45rem,3cqw,.65rem); font-style:italic; }
.cover-exposure-phone { z-index:2; top:16%; right:7%; height:73%; aspect-ratio:575/1280; transform:rotate(8deg); }
.cover-exposure-phone > img { object-fit:contain; }
/* Positioned content stays above the decorative paper, including on mobile. */
.folder-caption { position:relative; z-index:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.folder-caption h3 { font:700 clamp(1.22rem,2.2vw,1.88rem)/1.08 var(--font-body); letter-spacing:-.045em; text-wrap:initial; margin:0 0 9px; }
.folder-caption > p { font-size:clamp(.68rem,1.17vw,.96rem); line-height:1.4; }
.folder-status { font-size:clamp(.59rem,.96vw,.78rem); padding:5px 10px; border:1px solid #8f76a4; border-radius:99px; margin-top:13px; line-height:1.3; }
.folder-open { display:flex; gap:12px; align-items:center; margin-top:auto; padding-top:10px; font-size:clamp(.75rem,1.25vw,1rem); text-decoration:underline; text-underline-offset:6px; }
.folder-open .archive-icon { width:19px; height:19px; }
.archive-dossiers { margin-top:40px; }
.archive-dossier { margin-bottom:32px; scroll-margin-top:20px; }
[data-archive-ready="true"] .archive-dossier:not([open]) { display:none; }
.archive-dossier > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:32px; list-style:none; cursor:pointer; padding:0; }
.archive-dossier > summary::-webkit-details-marker,.archive-lab > summary::-webkit-details-marker { display:none; }
.archive-dossier > summary h2 { font:650 clamp(1.3rem,3vw,2rem)/1.2 var(--font-body); letter-spacing:-.04em; }
.dossier-tab { position:relative; isolation:isolate; z-index:2; display:flex; align-items:baseline; gap:14px; width:fit-content; max-width:100%; min-width:0; margin:0 0 -1px; padding:21px 28px 18px; color:var(--archive-ink); overflow-wrap:anywhere; }
/* Two background layers draw the folder edge without clipping the live title. */
.dossier-tab::before,.dossier-tab::after { content:""; position:absolute; border-radius:16px 14px 0 0; clip-path:polygon(0 0,calc(100% - 26px) 0,100% 100%,0 100%); pointer-events:none; }
.dossier-tab::before { z-index:-2; inset:0 -22px -1px 0; background:var(--archive-line); }
.dossier-tab::after { z-index:-1; inset:1px -21px -1px 1px; background:var(--archive-surface); }
.dossier-number { order:-1; flex-shrink:0; color:var(--archive-heading); font:500 1rem/1.2 var(--font-body); letter-spacing:.06em; }
.dossier-action { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-height:44px; margin:0 4px 7px 0; color:var(--archive-heading); font-size:.8rem; white-space:nowrap; }
.dossier-close-label { display:none; }
.archive-dossier[open] .dossier-open-label { display:none; }
.archive-dossier[open] .dossier-close-label { display:inline; }
.archive-dossier[open] .dossier-action .archive-icon { transform:rotate(180deg); }
.archive-dossier .case-body { background:var(--archive-surface); margin:0; padding:32px; border-color:var(--archive-line); border-radius:0 16px 16px 16px; }
.archive-dossier .case-body h3 { font:650 1.5rem/1.25 var(--font-body); letter-spacing:-.03em; }
.archive-dossier .case-body p,.archive-dossier .case-features { color:var(--archive-copy); }
.archive-dossier .case-body .dossier-intro { max-width:66ch; font-size:1.25rem; color:var(--archive-ink); margin-bottom:32px; }
.case-name-story { margin:0 0 30px; padding:4px 0 4px 18px; border-left:3px solid var(--archive-heading); }
.case-name-story > p:last-child { max-width:65ch; margin-top:10px; line-height:1.65; }
.archive-index .project-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--archive-heading); }
.dossier-return { margin-top:24px; }
.case-cover-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:32px; }
.case-cover-gallery figure { min-width:0; margin:0; }
.case-cover-gallery a { display:block; padding:18px; border:1px solid var(--archive-line); border-radius:10px; background:var(--archive-bg); }
.case-cover-gallery img { width:100%; height:480px; object-fit:contain; }
.case-cover-gallery figcaption { margin-top:12px; font-size:.8rem; line-height:1.6; color:var(--archive-copy); }
.case-cover-gallery figcaption strong { display:block; margin-bottom:4px; color:var(--archive-ink); font-size:1rem; }
.archive-lab-section { padding:32px 0; }
.archive-lab { border-top:1px solid var(--archive-line); scroll-margin-top:12px; }
.archive-lab > summary { display:flex; align-items:center; gap:22px; list-style:none; cursor:pointer; min-height:140px; }
.archive-tavi { width:76px; height:85px; object-fit:contain; flex-shrink:0; }
.archive-lab h2 { margin:8px 0; font:650 clamp(1.3rem,2.6vw,2.05rem)/1.15 var(--font-body); letter-spacing:-.04em; }
.archive-lab > summary p:not(.eyebrow) { font-size:.85rem; color:var(--archive-copy); }
.archive-lab-action { display:flex; gap:12px; align-items:center; margin-left:auto; font-size:.85rem; color:var(--archive-heading); }
.archive-lab[open] .archive-lab-action .archive-icon { transform:rotate(180deg); }
.archive-lab-content { padding:8px 0 25px; }
.archive-lab .lab-case { background:var(--archive-surface); }
.archive-lab .lab-case h3 { font-family:var(--font-body); font-weight:650; }
@media (min-width:1400px) { .archive-hero { min-height:730px; } }
@media (max-width:1199px) and (min-width:921px) { .archive-shelf { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 8px; } }
@media (max-width:1100px) and (min-width:921px) {
  [data-page="portfolio"] .header-inner { grid-template-columns:auto 1fr auto; gap:18px; }
  [data-page="portfolio"] .desktop-nav { gap:20px; }
  [data-page="portfolio"] .header-actions .header-cta { display:flex; padding-inline:13px; }
  .archive-hero { min-height:480px; }
  .archive-disciplines { gap:9px; font-size:.48rem; }
  .archive-section-heading { grid-template-columns:1.2fr 1fr; }
}
@media (max-width:920px) {
  .archive-hero { min-height:480px; padding-top:30px; }
  .archive-hero-copy { padding-left:0; }
  .archive-hero h1 > span { font-size:6.4vw; }
  .archive-hero h1 > strong { font-size:13.4vw; }
  .archive-author { font-size:.55rem !important; max-width:30ch; }
  .archive-disciplines { flex-wrap:wrap; gap:7px; font-size:.5rem; }
  .archive-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 8px; margin:0 -6px; }
  .folder-link { padding-top:60px; }
  .folder-caption h3 { font-size:clamp(1.35rem,3.4vw,2.1rem); }
  .folder-label { font-size:.9rem; }
  .folder-caption > p { font-size:.9rem; }
  .folder-status { font-size:.75rem; }
  .folder-open { font-size:1rem; }
  .folder-number { font-size:2rem; }
}
@media (max-width:620px) {
  .archive-hero { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"author" "title" "collage" "lead" "action" "disciplines"; align-items:start; gap:12px; padding:14px 0 16px; min-height:0; }
  .archive-hero-copy { display:contents; }
  .archive-author { grid-area:author; max-width:none; font-size:.56rem !important; letter-spacing:.17em !important; margin:0 !important; }
  .archive-hero h1 { grid-area:title; display:grid; justify-items:start; gap:4px; margin:0; padding-bottom:34px; }
  .archive-hero h1 > span { font-size:clamp(1.18rem,5.6vw,1.8rem); }
  .archive-hero h1 > strong { font-size:clamp(3rem,14.7vw,5.2rem); line-height:1.05; margin:0; }
  .archive-lead { grid-area:lead; min-width:0; max-width:42ch; margin:0; font-size:clamp(.9rem,3.8vw,.98rem); line-height:1.5; }
  .archive-explore.button { grid-area:action; justify-self:start; width:auto; max-width:100%; margin:0; min-height:46px; padding:11px 20px; gap:22px; font-size:.88rem; text-align:left; }
  .archive-explore .archive-icon { width:16px; height:16px; }
  .archive-disciplines { grid-area:disciplines; max-width:none; font-size:.48rem; margin:4px 0 0; padding-top:10px; gap:8px; }
  /* Share the hero grid on mobile so the same live label can attach to the title. */
  .archive-collage,.archive-collage-art { display:contents; }
  .archive-collage-image { grid-area:collage; height:auto; margin-bottom:28px; }
  .archive-assistant { grid-area:title; position:relative; align-self:end; justify-self:start; top:auto; right:auto; margin-left:clamp(7rem,34vw,12rem); transform:translateY(14px) rotate(-7deg); gap:6px; padding:5px 8px; min-height:44px; font-size:.65rem; }
  .archive-assistant > img { flex-shrink:0; width:26px; height:26px; }
  .archive-assistant::before { top:-6px; width:34px; height:11px; }
  .archive-projects { padding-top:18px; }
  .archive-section-heading { grid-template-columns:1fr; gap:10px; margin:0 0 16px; }
  .archive-section-heading h2 { font-size:clamp(1.75rem,7vw,2.2rem); margin-top:8px; }
  .archive-section-heading > p { border:0; padding:0; font-size:.8rem; max-width:46ch; }
  .archive-shelf-hint { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0; color:var(--archive-heading); font-size:.73rem; }
  .archive-shelf-hint > [aria-hidden] { font-size:1.25rem; }
  /* Native swipe: one roomy folder and a glimpse of the next, without moving the page sideways. */
  .archive-shelf { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(84%,22rem); gap:12px; margin:0 -16px; padding:18px 16px 20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:16px; scrollbar-width:thin; scrollbar-color:var(--archive-heading) var(--archive-surface); }
  .archive-shelf .archive-folder { margin:0; scroll-snap-align:start; }
  .folder-link { grid-template-rows:auto minmax(156px,1fr); gap:18px; padding:58px 8% 26px 17%; }
  .folder-number { font-size:1.8rem; }
  .folder-label { font-size:.62rem; }
  .folder-caption h3 { font-size:clamp(1.35rem,5.6vw,1.6rem); margin-bottom:7px; }
  .folder-caption > p { font-size:.8rem; line-height:1.35; }
  .folder-status { font-size:.68rem; padding:5px 8px; margin-top:8px; }
  .folder-open { font-size:.88rem; gap:9px; padding-top:12px; }
  .folder-open .archive-icon { width:18px; }
  .archive-dossiers { margin-top:24px; }
  .archive-dossier > summary { column-gap:25px; }
  .archive-dossier > summary h2 { font-size:clamp(1.02rem,4.4vw,1.3rem); }
  .dossier-tab { gap:8px; padding:17px 16px 15px; }
  .dossier-tab::before { right:-18px; }
  .dossier-tab::after { right:-17px; }
  .dossier-tab::before,.dossier-tab::after { clip-path:polygon(0 0,calc(100% - 22px) 0,100% 100%,0 100%); }
  .dossier-number { font-size:.72rem; }
  .dossier-action { gap:6px; margin-right:0; font-size:.68rem; }
  .dossier-action .archive-icon { width:16px; height:16px; }
  .archive-dossier .case-body { padding:22px 18px; }
  .archive-dossier .case-body .dossier-intro { font-size:1.1rem; }
  .case-cover-gallery { grid-template-columns:1fr; gap:24px; }
  .case-cover-gallery img { height:auto; max-height:520px; }
  .archive-lab-section { padding:24px 0; }
  .archive-lab > summary { gap:12px; min-height:130px; flex-wrap:wrap; padding:20px 0; }
  .archive-tavi { width:55px; height:65px; }
  .archive-lab > summary > div { flex:1; }
  .archive-lab .eyebrow { font-size:.5rem; }
  .archive-lab h2 { font-size:1.3rem; }
  .archive-lab > summary p:not(.eyebrow) { font-size:.75rem; }
  .archive-lab-action { margin-left:67px; flex-basis:calc(100% - 67px); font-size:.8rem; }
}
@media (prefers-reduced-motion:reduce) { .archive-index *, .archive-index *::before, .archive-index *::after { animation:none !important; transition:none !important; scroll-behavior:auto; } }
.case-video { margin:2rem 0 2.5rem; padding-bottom:2rem; border-bottom:1px solid currentColor; }
.case-video h3 { margin:.5rem 0 1rem; }
.case-video>p:not(.eyebrow) { max-width:65ch; line-height:1.7; }
.case-video figure { margin:1.5rem 0 0; }
.case-video video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#071f2f; border-radius:12px; }
.case-video figcaption { margin-top:.85rem; font-size:.85rem; line-height:1.6; }
.case-video-transcript a { color:inherit; text-underline-offset:.25em; }
.case-video-vertical { margin-top:1rem; }
.case-video-vertical summary { width:fit-content; cursor:pointer; text-decoration:underline; text-underline-offset:.25em; }
.case-video-vertical video { max-width:360px; margin:1rem auto 0; aspect-ratio:9/16; }

/* Movimiento del archivo: capas pequeñas, entradas breves y controles nativos. */
.archive-folder:nth-child(even) { --folder-lean:.6deg; }
.archive-folder:nth-child(odd) { --folder-lean:-.6deg; }
.folder-link[aria-expanded="true"] .folder-status { background:#ddd0eb; border-color:#655080; }
.archive-folder:focus-within { position:relative; z-index:3; }
.archive-dossier > summary:focus-visible,.archive-lab > summary:focus-visible { outline:2px solid var(--archive-heading); outline-offset:4px; border-radius:8px; }

@media (prefers-reduced-motion:no-preference) {
  [data-page="portfolio"] { --archive-ease:cubic-bezier(.22,.7,.25,1); }
  [data-motion="playing"] .archive-folder.reveal-pending { transform:translateY(22px); }
  [data-motion="playing"] .archive-folder.is-in-view { transform:none; }
  .archive-folder:nth-child(2) { transition-delay:70ms; }
  .archive-folder:nth-child(3) { transition-delay:140ms; }
  .archive-folder:nth-child(4) { transition-delay:210ms; }
  .archive-folder:nth-child(5) { transition-delay:280ms; }
  [data-motion="playing"] .archive-folder:focus-within { opacity:1; transform:none; transition-delay:0ms; }

  .folder-link { transform-origin:50% 88%; transition:transform 380ms var(--archive-ease); }
  .folder-paper { transition:filter 380ms var(--archive-ease); }
  .folder-cover { transform-origin:50% 85%; transition:transform 480ms var(--archive-ease); }
  .folder-label { transition:translate 380ms var(--archive-ease); }
  .folder-open .archive-icon,.archive-index .project-link .archive-icon,.archive-explore .archive-icon { transition:transform 260ms var(--archive-ease); }
  .dossier-action .archive-icon,.archive-lab-action .archive-icon { transition:transform 300ms var(--archive-ease); }
  .archive-tavi { transition:transform 400ms var(--archive-ease); transform-origin:50% 90%; }
  [data-motion="playing"] .folder-link:is(:focus-visible,[aria-expanded="true"]) { transform:translateY(-10px) rotate(var(--folder-lean)); z-index:2; }
  [data-motion="playing"] .folder-link:is(:focus-visible,[aria-expanded="true"]) .folder-cover { transform:translateY(-5px) rotate(calc(var(--folder-lean) * -1)); }
  [data-motion="playing"] .folder-link:focus-visible .folder-open .archive-icon { transform:translateX(5px); }
  [data-motion="playing"] .archive-dossier[open],
  [data-motion="playing"] .archive-lab[open] > .archive-lab-content,
  [data-motion="playing"] .lab-case details[open] > .lab-case-details { animation:archive-unfold 360ms var(--archive-ease); }
  [data-page="portfolio"][data-motion="playing"] :is(.button,.theme-toggle) { transition:transform 240ms var(--archive-ease),box-shadow 240ms ease,background-color 240ms ease; }
  [data-page="portfolio"][data-motion="playing"] :is(.button,.theme-toggle):active { transform:translateY(1px) scale(.98); }
  [data-motion="playing"] .folder-link:active { transform:translateY(-4px) scale(.99); transition-duration:120ms; }

  @media (hover:hover) and (pointer:fine) {
    .archive-folder:hover { z-index:2; }
    [data-motion="playing"] .folder-link:hover { transform:translateY(-12px) rotate(var(--folder-lean)); }
    [data-motion="playing"] .folder-link:hover .folder-paper { filter:drop-shadow(0 13px 9px #33213e24); }
    [data-motion="playing"] .folder-link:hover .folder-cover { transform:translateY(-6px) rotate(calc(var(--folder-lean) * -1)) scale(1.015); }
    [data-motion="playing"] .folder-link:hover .folder-label { translate:2px 0; }
    [data-motion="playing"] :is(.folder-link,.project-link,.archive-explore):hover .archive-icon { transform:translateX(5px); }
    [data-motion="playing"] .dossier-return:hover .archive-icon { transform:translateX(-4px); }
    [data-motion="playing"] .archive-lab > summary:hover .archive-tavi { transform:translateY(-3px) rotate(-3deg); }
    [data-page="portfolio"][data-motion="playing"] :is(.button,.theme-toggle):hover { transform:translateY(-3px); }
    [data-page="portfolio"][data-motion="playing"] :is(.button,.theme-toggle):active { transform:translateY(1px) scale(.98); }
  }
}

@keyframes archive-unfold { from { opacity:.4; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }

/* The next folder must remain visible while swiping, including before its reveal observer fires. */
@media (max-width:620px) {
  .archive-index .archive-shelf .archive-folder[data-reveal] { opacity:1; transform:none; transition:none; }
}

/* La preferencia del sistema deja todo el contenido accesible. */
[data-page="portfolio"][data-motion="paused"] *,
[data-page="portfolio"][data-motion="paused"] *::before,
[data-page="portfolio"][data-motion="paused"] *::after { transition:none !important; animation-play-state:paused !important; }
[data-motion="paused"] [data-reveal] { opacity:1; transform:none; animation:none; }
[data-page="portfolio"][data-motion="paused"] .button:hover { transform:none; }
@media (prefers-reduced-motion:reduce) {
  [data-page="portfolio"] *,[data-page="portfolio"] *::before,[data-page="portfolio"] *::after { animation:none !important; transition:none !important; scroll-behavior:auto; }
  .archive-index [data-reveal] { opacity:1; transform:none; }
  [data-page="portfolio"] .button:hover { transform:none; }
}

/* A live notebook: paper, binding and tape are decorative; all content stays selectable. */
.archive-lab-invitation { display:table; margin:4px 0 30px 10px; padding:5px 10px; border-left:2px solid var(--archive-heading); color:var(--archive-heading); font-size:.65rem; letter-spacing:.06em; }
.lab-notebook { --journal-paper:#fcfaff; --journal-note:#f1eaf8; --journal-rule:#e1d5ec; --journal-cover:#ab92c4; position:relative; margin:0 10px 20px 0; border:1px solid var(--journal-rule); border-radius:12px 18px 18px 12px; background:radial-gradient(#8062910b .7px,transparent 1px) 0 0 / 6px 6px,var(--journal-paper); box-shadow:3px 4px 0 var(--journal-paper),5px 6px 0 var(--journal-rule),10px 11px 0 var(--journal-cover),12px 18px 30px #35244318; }
[data-theme="dark"] .lab-notebook { --journal-paper:#211b29; --journal-note:#2c2334; --journal-rule:#4d3e5c; --journal-cover:#665079; box-shadow:3px 4px 0 var(--journal-paper),5px 6px 0 var(--journal-rule),10px 11px 0 var(--journal-cover),12px 18px 30px #0004; }
.lab-notebook > summary { position:relative; padding:44px 34px 28px; min-height:190px; gap:24px; }
.journal-binding { position:absolute; z-index:2; top:-19px; left:7%; right:7%; height:42px; display:flex; justify-content:space-between; pointer-events:none; }
.journal-binding i { position:relative; width:13px; height:40px; border:3px solid; border-color:#d6c9e3 #756681 #8d7d99 #f5effb; border-radius:50%; box-shadow:2px 2px 2px #30213c40,inset 1px 0 1px #35244366; }
.journal-binding i::after { content:""; position:absolute; z-index:-1; left:-2px; right:-2px; bottom:-3px; height:8px; background:#493b56; border-radius:50%; box-shadow:0 0 0 2px var(--journal-rule); }
.lab-notebook > summary > div { min-width:0; }
.lab-notebook > summary .archive-tavi { transform:rotate(-5deg); filter:drop-shadow(0 4px 2px #35244320); }
.lab-notebook h2 { font-weight:700; }
.lab-notebook .archive-lab-action { font-size:.78rem; white-space:nowrap; }
.journal-close-label { display:none; }
.lab-notebook[open] .journal-open-label { display:none; }
.lab-notebook[open] .journal-close-label { display:inline; }
.lab-notebook .archive-lab-content { padding:0 34px 28px; }
.journal-index { padding:4px 0 24px; scroll-margin-top:20px; }
.journal-index ol { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.journal-index a { display:flex; justify-content:center; align-items:center; gap:8px; min-height:44px; padding:9px 8px; border:1px solid var(--journal-rule); border-radius:8px 8px 3px 3px; color:var(--archive-heading); background:var(--journal-note); font-size:.8rem; }
.journal-index a > span { font-size:.62rem; }
.journal-index a[aria-current="page"] { background:var(--archive-heading); border-color:var(--archive-heading); color:var(--archive-bg); box-shadow:0 3px 0 var(--journal-rule); }
.journal-index a:hover { text-decoration:underline; text-underline-offset:4px; }
.journal-page { min-width:0; padding:22px 0 12px; border-top:1px solid var(--journal-rule); scroll-margin-top:20px; }
.journal-page[hidden],.journal-controls[hidden] { display:none; }
.journal-entry-heading { max-width:830px; margin:0 0 28px; }
.journal-entry-heading .eyebrow { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 16px; font-size:.62rem; letter-spacing:.12em; }
.journal-entry-heading .eyebrow > span { padding:4px 7px; border:1px solid var(--journal-rule); border-radius:3px; letter-spacing:.03em; }
.journal-entry-heading h3 { margin:14px 0 12px; font:700 clamp(1.6rem,3.5vw,2.7rem)/1.12 var(--font-body); letter-spacing:-.045em; color:var(--archive-ink); }
.journal-entry-heading > p:not(.eyebrow) { max-width:72ch; color:var(--archive-copy); font-size:.95rem; line-height:1.65; }
.journal-spread { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:38px; padding:6px 9px 24px; }
.journal-visual { position:relative; min-width:0; margin:4px 0 10px; padding:10px 10px 24px; border:1px solid var(--journal-rule); border-radius:3px; background:var(--journal-paper); box-shadow:0 7px 12px #30213d14; transform:rotate(-1.3deg); }
.journal-visual::before { content:""; position:absolute; z-index:1; width:78px; height:22px; top:-11px; left:calc(50% - 39px); transform:rotate(3deg); background:repeating-linear-gradient(90deg,#aa8fc355 0 2px,#cdb9df99 2px 5px); border-inline:1px dashed #aa8fc366; }
.journal-page:nth-child(even) .journal-visual { transform:rotate(1.1deg); }
.journal-visual .lab-case-image { height:clamp(200px,24vw,310px); width:100%; border-radius:1px; object-position:center; background:var(--journal-note); }
.journal-visual .lab-image-contain { object-fit:contain; }
.journal-visual-cutout { padding:0; border:0; background:transparent; box-shadow:none; }
.journal-visual-cutout::before { display:none; }
.journal-visual-cutout .lab-case-image { height:auto; max-height:410px; aspect-ratio:1; object-fit:contain; background:transparent; }
.journal-image-caption { margin:10px 8px 0; font-size:.68rem; line-height:1.5; color:var(--archive-copy); }
.journal-visual .lab-process { min-height:240px; align-content:center; gap:20px; padding:26px 26px 26px 45px; border-radius:1px; background:var(--journal-note); color:var(--archive-ink); font-size:.94rem; list-style:decimal; }
.journal-visual .lab-process li::marker { color:var(--archive-heading); }
.journal-note { min-width:0; padding:22px 24px; background:repeating-linear-gradient(transparent 0 27px,var(--journal-rule) 27px 28px) 0 22px / 100% 28px,var(--journal-note); border-radius:2px 4px 16px 3px; border-left:2px solid var(--journal-cover); box-shadow:3px 4px 0 color-mix(in srgb,var(--journal-cover) 14%,transparent); }
.journal-note .journal-note-label { margin:0 0 14px; color:var(--archive-heading); font-size:.66rem; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; }
.journal-note > p:last-child { color:var(--archive-copy); font-size:.9rem; line-height:28px; }
.journal-entry-details { border-top:1px dashed var(--journal-rule); }
.journal-entry-details > summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; min-height:48px; list-style:none; cursor:pointer; color:var(--archive-heading); font-size:.87rem; font-weight:600; }
.journal-entry-details > summary::-webkit-details-marker { display:none; }
.journal-entry-arrow { flex-shrink:0; font-size:1.1rem; }
.journal-entry-details[open] .journal-entry-arrow { transform:rotate(180deg); }
.journal-entry-details .lab-case-details { margin:6px 0 22px; }
.journal-facts { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; }
.journal-facts h4 { color:var(--archive-ink); font-size:1rem; }
.journal-page :is(.case-features,.case-note,.lab-sample figcaption) { color:var(--archive-copy); }
.journal-page .case-tags li { border-color:var(--journal-rule); color:var(--archive-ink); background:var(--journal-note); }
.journal-page .lab-sample :is(img,video) { background:var(--journal-note); border-color:var(--journal-rule); }
.journal-page .lab-sample figcaption a { color:var(--archive-heading); }
.journal-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--journal-rule); }
.journal-controls > p { color:var(--archive-copy); font-size:.73rem; }
.journal-controls > div { display:flex; gap:10px; }
.journal-controls button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 14px; border:1px solid var(--journal-rule); border-radius:6px; background:var(--journal-note); color:var(--archive-heading); font:500 .8rem var(--font-body); cursor:pointer; }
.journal-controls button:disabled { opacity:.45; cursor:default; }
.journal-controls button:not(:disabled):hover { border-color:var(--archive-heading); }
.lab-notebook :is(.journal-index a,.journal-controls button,.journal-entry-details > summary):focus-visible { outline:2px solid var(--archive-heading); outline-offset:4px; }
.journal-entry-heading h3:focus { outline:none; }
.lab-notebook .lab-continue { margin-top:12px; font-size:.78rem; }
@media (max-width:920px) {
  .lab-notebook > summary { gap:18px; flex-wrap:wrap; }
  .lab-notebook .archive-lab-action { margin-left:94px; flex-basis:calc(100% - 94px); }
  .journal-spread { gap:24px; }
  .journal-note { padding:18px; }
}
@media (max-width:620px) {
  .archive-lab-invitation { font-size:.61rem; margin-left:4px; margin-bottom:28px; }
  .lab-notebook { margin-right:8px; box-shadow:2px 3px 0 var(--journal-paper),4px 5px 0 var(--journal-rule),8px 9px 0 var(--journal-cover),8px 14px 22px #35244314; }
  .lab-notebook > summary { padding:34px 18px 20px; gap:12px; }
  .journal-binding { left:9%; right:9%; top:-16px; height:35px; }
  .journal-binding i { height:33px; width:11px; border-width:2px; }
  .journal-binding i:nth-last-child(-n+2) { display:none; }
  .lab-notebook > summary .archive-tavi { width:45px; height:54px; }
  .lab-notebook > summary h2 { font-size:1.25rem; }
  .lab-notebook > summary .eyebrow { font-size:.5rem; letter-spacing:.13em; }
  .lab-notebook > summary p:not(.eyebrow) { font-size:.74rem; }
  .lab-notebook .archive-lab-action { margin-left:57px; flex-basis:calc(100% - 57px); font-size:.75rem; }
  .lab-notebook .archive-lab-content { padding:0 18px 20px; }
  .journal-index { padding:2px 0 18px; }
  .journal-index ol { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .journal-index a { padding:7px 4px; gap:5px; font-size:.72rem; }
  .journal-index a > span { font-size:.55rem; }
  .journal-page { padding-top:20px; }
  .journal-entry-heading { margin-bottom:22px; }
  .journal-entry-heading .eyebrow { font-size:.56rem; letter-spacing:.08em; }
  .journal-entry-heading h3 { font-size:clamp(1.5rem,6vw,1.9rem); }
  .journal-entry-heading > p:not(.eyebrow) { font-size:.85rem; }
  .journal-spread { grid-template-columns:minmax(0,1fr); gap:14px; padding:0 3px 22px; }
  .journal-visual { padding:8px 8px 20px; }
  .journal-visual .lab-case-image { height:auto; aspect-ratio:1.3; }
  .journal-visual-cutout { padding:0; }
  .journal-visual-cutout .lab-case-image { aspect-ratio:1; }
  .journal-visual .lab-process { min-height:220px; padding:22px 18px 22px 36px; font-size:.83rem; }
  .journal-note > p:last-child { font-size:.82rem; }
  .journal-entry-details > summary { font-size:.79rem; }
  .journal-facts { grid-template-columns:minmax(0,1fr); gap:20px; }
  .journal-facts :is(.case-features,.case-note) { font-size:.8rem; }
  .journal-controls { flex-wrap:wrap; }
  .journal-controls > div { width:100%; justify-content:space-between; gap:8px; }
  .journal-controls button { padding:10px 12px; font-size:.75rem; }
  .journal-controls .archive-icon { width:16px; height:16px; }
}
@media (prefers-reduced-motion:no-preference) {
  [data-motion="playing"] [data-journal-ready] .journal-page:not([hidden]) { animation:archive-unfold 300ms ease-out; }
}

/* Discovery uses the archive's existing type, paper and violet tokens. */
.archive-index [hidden] { display:none !important; }
.archive-search { padding:24px; margin:10px 0 20px; border:1px solid var(--archive-line); border-radius:12px; background:var(--archive-surface); scroll-margin-top:105px; }
.archive-search-label { display:block; margin-bottom:12px; font-size:1.05rem; font-weight:650; color:var(--archive-ink); }
.archive-search-row { display:flex; align-items:center; gap:12px; }
.archive-search input[type="search"] { min-width:0; flex:1; min-height:48px; padding:12px 15px; border:1px solid var(--archive-line); border-radius:7px; background:var(--archive-bg); color:var(--archive-ink); font:inherit; font-size:1rem; }
.archive-search input::placeholder { color:var(--archive-copy); opacity:1; }
.search-clear { min-height:44px; padding:10px 13px; border:1px solid var(--archive-line); border-radius:6px; color:var(--archive-heading); background:var(--archive-bg); font:500 .85rem var(--font-body); cursor:pointer; }
.search-clear:disabled { opacity:.5; cursor:default; }
.search-help { margin:10px 0 20px; color:var(--archive-copy); font-size:.8rem; line-height:1.5; }
.archive-topic-filters { margin:0; padding:0; border:0; }
.archive-topic-filters legend { margin-bottom:9px; font-size:.8rem; color:var(--archive-copy); }
.archive-topic-filters > div { display:flex; flex-wrap:wrap; gap:8px; }
.archive-topic-filters button,.case-topics a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 14px; border:1px solid var(--archive-line); border-radius:24px; background:var(--archive-bg); color:var(--archive-heading); font:500 .83rem var(--font-body); cursor:pointer; }
.archive-topic-filters button[aria-pressed="true"] { background:var(--archive-heading); color:var(--archive-bg); border-color:var(--archive-heading); }
.archive-filter-options { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:18px; color:var(--archive-copy); font-size:.83rem; }
.archive-filter-options label { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.archive-filter-options select { min-height:44px; max-width:100%; padding:8px 30px 8px 12px; border:1px solid var(--archive-line); border-radius:5px; background:var(--archive-bg); color:var(--archive-ink); font:inherit; }
.archive-demo-filter input { width:19px; height:19px; accent-color:var(--archive-heading); }
.search-count { margin-top:16px; padding-top:14px; border-top:1px solid var(--archive-line); color:var(--archive-heading); font-size:.84rem; }
.archive-quick-index { margin:0 0 24px; color:var(--archive-heading); }
.archive-quick-index > summary { min-height:44px; padding:12px 0; cursor:pointer; font-size:.9rem; }
.archive-quick-index ul { display:flex; flex-wrap:wrap; gap:8px 22px; padding:8px 0; list-style:none; }
.archive-quick-index a { display:inline-flex; align-items:center; min-height:44px; font-size:.85rem; text-decoration:underline; text-underline-offset:4px; }
.archive-empty { padding:30px 24px; border:1px dashed var(--archive-line); border-radius:12px; color:var(--archive-copy); }
.archive-empty h3 { color:var(--archive-ink); font-size:1.25rem; }
.archive-empty p { margin:10px 0 18px; }
.archive-empty a { display:inline-flex; align-items:center; min-height:44px; margin-left:16px; color:var(--archive-heading); text-decoration:underline; }
.archive-lab-results { padding:26px 0 6px; }
.archive-lab-results h3 { color:var(--archive-heading); font-size:1.25rem; margin-bottom:15px; }
.archive-lab-results > ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; list-style:none; }
.archive-lab-results a { display:flex; height:100%; flex-direction:column; gap:10px; padding:20px; border:1px solid var(--archive-line); border-radius:9px; background:var(--archive-surface); color:var(--archive-copy); font-size:.87rem; line-height:1.55; }
.archive-lab-results strong { color:var(--archive-ink); font-size:1.2rem; line-height:1.3; }
.result-kind { font-size:.75rem; color:var(--archive-heading); }
.result-action { margin-top:auto; padding-top:4px; color:var(--archive-heading); text-decoration:underline; text-underline-offset:4px; }
.archive-shelf { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:24px; }
.folder-link { grid-template-rows:auto minmax(185px,1fr); }
.cover-project-image { position:absolute; top:15%; left:7%; width:86%; height:70%; object-fit:contain; object-position:center; }
.cover-capture .cover-project-image { object-fit:contain; object-position:center; border:3px solid #fff; border-radius:4px; background:#f4f0e8; }
.cover-editorial .cover-project-image { height:76%; top:11%; }
.case-topics { display:flex; flex-wrap:wrap; gap:8px; margin:-10px 0 26px; }
.case-topics a { font-size:.8rem; }
.case-decision { padding:18px 22px; margin:0 0 28px; border-left:3px solid var(--archive-heading); background:var(--archive-bg); }
.case-decision h3 { margin-top:0; font-size:1.12rem !important; }
.case-use { margin-bottom:28px; padding:24px; border:1px solid var(--archive-line); border-radius:10px; background:var(--archive-bg); }
.case-use > h3 { max-width:34ch; margin-bottom:20px; }
.case-use-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr); gap:28px; align-items:start; }
.case-use h4 { margin:20px 0 10px; color:var(--archive-ink); font-size:1rem; }
.case-use ol { padding-left:20px; list-style:decimal; color:var(--archive-copy); font-size:.9rem; line-height:1.65; }
.case-use li + li { margin-top:10px; }
.case-use .case-note { margin-top:18px; }
.case-use-example { margin:0; }
.document-example-sheet { max-width:280px; padding:22px; margin:0 auto; background:#fff; color:#392d48; border:1px solid #d7cddd; box-shadow:0 5px 16px #24172f0a; }
.document-example-label { margin:0 0 22px; font-size:.7rem !important; text-align:center; text-transform:uppercase; letter-spacing:.05em; color:#655080 !important; }
.document-example-side { padding:14px; margin-bottom:20px; border:1px solid #cabbd7; border-radius:8px; background:#f7f4fa; }
.document-example-side strong { display:block; font-size:1rem; }
.document-example-side span { display:block; margin:5px 0 14px; font-size:.7rem; }
.document-example-side i { display:block; width:90%; height:5px; margin-top:7px; background:#dbd1e4; }
.document-example-side i:last-child { width:65%; }
.case-use-example figcaption { margin-top:12px; color:var(--archive-copy); font-size:.75rem; line-height:1.5; }
@media(max-width:760px) { .case-use { padding:18px; } .case-use-layout { grid-template-columns:1fr; gap:24px; } }
.case-process { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; padding:0 0 24px 20px; margin-bottom:16px; list-style:decimal; color:var(--archive-copy); font-size:.88rem; }
.case-contact { margin-top:30px; padding:16px 0; border-top:1px solid var(--archive-line); border-bottom:1px solid var(--archive-line); }
.case-contact > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:10px 0; list-style:none; cursor:pointer; color:var(--archive-heading); font-weight:650; font-size:1.05rem; }
.case-contact > summary::-webkit-details-marker { display:none; }
.case-contact[open] > summary .archive-icon { rotate:180deg; }
.case-contact > div { padding:10px 0; }
.case-contact-links { display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; margin-top:18px; }
.archive-index .contact-hint { margin-top:14px; font-size:.8rem; color:var(--archive-copy); }
.portfolio-contact { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; margin-top:24px; padding-block:36px; border-top:1px solid var(--archive-line); }
.portfolio-contact h2 { margin:12px 0; font:700 clamp(1.6rem,3vw,2.3rem)/1.15 var(--font-body); color:var(--archive-heading); letter-spacing:-.035em; }
.portfolio-contact p:not(.eyebrow) { color:var(--archive-copy); font-size:.9rem; line-height:1.6; }
.archive-index :is(.archive-search input,.archive-search button,.archive-search select,.archive-quick-index summary,.archive-quick-index a,.archive-empty button,.archive-empty a,.archive-lab-results a,.case-topics a,.case-contact summary):focus-visible { outline:3px solid var(--archive-heading); outline-offset:3px; }
.journal-index ol { grid-template-columns:repeat(7,minmax(0,1fr)); }
.archive-lab-section,.archive-dossier { scroll-margin-top:105px; }
@media (max-width:1199px) and (min-width:921px) { .archive-shelf { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:920px) { .archive-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); } .portfolio-contact { grid-template-columns:1fr; gap:10px; } .journal-index ol { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:620px) {
  .archive-search { padding:18px 14px; margin-top:20px; scroll-margin-top:78px; }
  .archive-search-label { font-size:.95rem; line-height:1.4; }
  .archive-search-row { flex-wrap:wrap; gap:8px; }
  .archive-search input[type="search"] { width:100%; flex-basis:100%; font-size:16px; }
  .archive-search-row .search-clear { margin-left:auto; }
  .archive-topic-filters > div { gap:7px; }
  .archive-topic-filters button { padding:9px 11px; font-size:.78rem; }
  .archive-filter-options { gap:2px; flex-direction:column; align-items:flex-start; }
  .search-help { font-size:.78rem; }
  .archive-shelf { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(84%,22rem); row-gap:0; }
  .archive-lab-results > ul { grid-template-columns:1fr; }
  .case-process { grid-template-columns:1fr 1fr; gap:16px 28px; }
  .case-contact-links { align-items:stretch; flex-direction:column; gap:8px; }
  .case-contact-links .button { min-width:0; width:100%; justify-content:center; padding-inline:15px; font-size:.85rem; }
  .case-contact-links .project-link { justify-content:center; }
  .archive-empty a { display:flex; margin:10px 0 0; }
  .portfolio-contact { padding-block:28px; }
  .journal-index ol { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .archive-lab-section,.archive-dossier { scroll-margin-top:78px; }
}

/* Compact discovery: optional controls stay out of the mobile reading flow. */
.search-controls { position:relative; margin-top:10px; }
.search-controls > .search-clear { position:absolute; top:0; right:0; }
.archive-filter-panel > summary { min-height:44px; width:fit-content; display:none; align-items:center; gap:8px; cursor:pointer; color:var(--archive-heading); font-size:.85rem; font-weight:600; }
.archive-search-row { position:relative; }
.archive-search-row > .site-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--archive-heading); }
.archive-search input[type="search"] { padding-left:44px; }
.archive-quick-index > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; }
.archive-quick-index > summary::-webkit-details-marker { display:none; }
details[open] > summary > .disclosure-icon { transform:rotate(180deg); }
.archive-filter-panel > summary::-webkit-details-marker { display:none; }
.archive-filter-panel [data-filter-count] { font-size:.74rem; font-weight:400; }
.archive-filter-body .search-help { padding-right:95px; }
.archive-filter-panel > summary:focus-visible { outline:3px solid var(--archive-heading); outline-offset:3px; }
.mobile-nav nav { max-height:calc(100dvh - 110px); overflow-y:auto; }
.mobile-nav nav a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
@media(max-width:620px) {
  .archive-search { padding:14px; }
  .archive-search-label { margin-bottom:10px; font-size:.9rem; }
  .archive-search-row { display:block; }
  .archive-search input[type="search"] { display:block; width:100%; }
  .search-controls { margin-top:4px; }
  .search-controls > .search-clear { border:0; background:transparent; padding-inline:8px; }
  .search-controls > .search-clear:disabled { display:none; }
  .archive-filter-panel > summary { display:flex; list-style:none; }
  .archive-filter-body { padding:8px 0 12px; }
  .archive-filter-body .search-help { display:none; }
  .search-count { margin-top:4px; padding-top:10px; font-size:.76rem; }
}

/* Services and contact retain the site's typography and show concrete work first. */
.services-clear .services-intro { padding-block:2.5rem 2rem; gap:1.25rem 3rem; }
.services-clear .services-intro h1 { font-size:clamp(2.5rem,5.5vw,4.5rem); max-width:18ch; }
.services-clear .services-intro-copy > p { margin-bottom:.8rem; }
.service-products > h2,.services-list-heading h2,.services-working h2 { font-size:clamp(1.7rem,3.5vw,2.6rem); font-weight:600; letter-spacing:-.04em; line-height:1.15; margin-bottom:1.3rem; }
.service-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.service-product { border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface); }
.service-product > img { width:100%; height:auto; aspect-ratio:3 / 2; object-fit:contain; background:var(--surface); }
.service-product > div { padding:22px; }
.service-product .eyebrow { font-size:.65rem; margin-bottom:10px; }
.service-product h3 { font:650 1.4rem/1.2 var(--font-body); margin-bottom:12px; }
.service-product p:not(.eyebrow) { color:var(--ink-soft); font-size:.9rem; line-height:1.6; }
.service-product-links { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:14px; }
.service-product-links a,.service-evidence a { display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:underline; text-underline-offset:4px; font-size:.88rem; }
.services-list-heading { margin-top:3.5rem; }
.services-list-heading p:last-child { color:var(--ink-soft); line-height:1.6; }
.service-offer { padding-block:2rem; gap:1rem 3rem; scroll-margin-top:100px; }
.service-offer h3 { font:650 clamp(1.4rem,2.5vw,2rem)/1.2 var(--font-body); margin-bottom:14px; }
.service-offer .service-area-heading { padding-left:0; }
.service-offer .service-area-heading > p:last-child { font-size:.95rem; line-height:1.65; color:var(--ink-soft); }
.service-evidence { margin-top:16px; padding-left:18px; border-left:2px solid var(--brand-amethyst); }
.service-evidence h4 { font-size:.8rem; font-weight:600; }
.service-evidence ul { list-style:none; margin:8px 0; padding:0; }
.service-evidence li { margin-bottom:8px; }
.service-evidence li > span { display:block; color:var(--ink-soft); font-size:.75rem; }
.service-evidence > p { color:var(--ink-soft); font-size:.8rem; line-height:1.6; margin-top:12px; }
.services-working { border-block:1px solid var(--border); padding-block:2rem; margin-bottom:3rem; scroll-margin-top:100px; }
.services-working ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; padding-left:1.2rem; color:var(--ink-soft); font-size:.9rem; line-height:1.65; }
.services-working strong { color:var(--ink); }
#servicios { scroll-margin-top:100px; }
.contact-direct { align-items:start; padding-block:3rem 2rem; }
.contact-direct .conversation-prompts { margin-top:0; }
.contact-direct .conversation-prompts > p:last-child { margin-top:20px; color:var(--ink-soft); font-size:.9rem; }
.contact-direct .case-contact-links { margin-top:24px; }
.contact-direct .contact-destination a { text-decoration:underline; text-underline-offset:4px; display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.case-contact-links .project-link { gap:10px; }
.contact-socials { margin-bottom:3rem; }
@media(max-width:620px) {
  .service-product-grid,.services-working ol { grid-template-columns:1fr; }
  .services-clear .services-intro h1 { font-size:clamp(2.25rem,10vw,2.5rem); }
  .services-clear .services-intro { padding-top:2rem; }
  .service-product > div { padding:18px; }
  .services-working ol { gap:16px; }
  .service-offer { padding-block:1.5rem; }
  .contact-direct { padding-top:2rem; }
  .contact-direct .contact-copy h1 { font-size:2.6rem; line-height:1.05; }
  .contact-direct .case-contact-links { margin-top:20px; }
}

/* Anton for the opening statement, DM Sans for reading: the portfolio's type pair. */
.bloom-copy h1 { max-width:12ch; font-family:var(--font-poster); font-size:clamp(4.5rem,8vw,7.5rem); font-weight:400; letter-spacing:-.025em; line-height:1.05; text-transform:uppercase; text-wrap:balance; color:var(--theme-link); }
.bloom-caption { font-style:normal; font-weight:500; }
:root:not([data-theme="dark"]) :is(.bloom-caption,.bloom-foot > span) { color:var(--ink-soft); text-shadow:none; }
:root:not([data-theme="dark"]) .bloom-hero .route-backdrop-signature { background:var(--brand-paper); }
:root:not([data-theme="dark"]) .bloom-hero .route-backdrop-signature::after { background:linear-gradient(0deg,var(--brand-paper),transparent 28%),linear-gradient(90deg,var(--brand-paper),color-mix(in srgb,var(--brand-paper) 80%,transparent) 30%,transparent 72%); }
.home-section { font-family:var(--font-body); padding-block:clamp(3rem,5vw,5rem); }
.home-section h2 { max-width:25ch; font:600 clamp(1.9rem,3.5vw,3rem)/1.13 var(--font-display); letter-spacing:-.045em; text-wrap:balance; }
.home-section h2 em { color:var(--brand-amethyst); font-style:normal; font-weight:inherit; }
.home-section .eyebrow { margin-bottom:1rem; }
.home-section-heading { max-width:850px; }
.home-section-heading > p:last-child { max-width:61ch; margin-top:1.35rem; color:var(--ink-soft); font-size:1rem; line-height:1.7; }
.home-services { display:grid; gap:1.5rem; margin-top:2.25rem; }
.home-service { display:grid; grid-template-columns:24px minmax(0,1fr); gap:.65rem 1rem; min-width:0; padding-top:1.3rem; border-top:1px solid var(--border); }
.home-service .chapter-number { padding-top:.3rem; grid-row:1/4; }
.home-service h3 { font:600 1.2rem/1.25 var(--font-display); letter-spacing:-.025em; text-wrap:initial; }
.home-service p { max-width:42ch; color:var(--ink-soft); font-size:.9rem; line-height:1.65; }
.home-service-action { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:44px; color:var(--theme-link); font-size:.8rem; font-weight:600; }
.home-service:hover h3 { text-decoration:underline; text-underline-offset:.2em; }
.home-service:focus-visible { outline-offset:6px; border-radius:4px; }
.home-work { border-top:1px solid var(--border); }
.home-work-heading { display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:1rem 2rem; margin-bottom:2rem; }
.home-work-heading h2 { max-width:20ch; }
.home-work-heading > .text-link { flex-shrink:0; }
.home-projects { display:grid; gap:2.5rem; }
.home-project { min-width:0; display:flex; flex-direction:column; }
.home-project-image { display:grid; place-items:center; overflow:hidden; aspect-ratio:3/2; background:var(--brand-soft); border:1px solid var(--border); border-radius:16px; }
.home-project-image img { width:100%; height:100%; min-height:0; object-fit:contain; }
.home-project-copy { flex:1; display:flex; flex-direction:column; padding-top:1.25rem; }
.home-project h3 { font:600 clamp(1.45rem,2.3vw,1.8rem)/1.16 var(--font-display); letter-spacing:-.035em; text-wrap:initial; }
.home-project-copy > p { max-width:53ch; margin:1rem 0 1.25rem; color:var(--ink-soft); font-size:.94rem; line-height:1.7; }
.home-project-actions { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.3rem 1.2rem; margin-top:auto; padding-top:.5rem; border-top:1px solid var(--border); }
.home-project-actions .text-link { font-size:.82rem; gap:.8rem; }
.home-more-work { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.home-more-work > p { font-size:.74rem; color:var(--ink-soft); }
.home-more-work nav { display:flex; flex-wrap:wrap; gap:.2rem 2rem; margin-top:.25rem; }
.home-more-work .text-link { font-size:.85rem; }
.home-notebook { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.25rem 1.5rem; margin-top:1.5rem; padding:1rem 1.25rem; border-radius:12px; background:var(--brand-soft); }
.home-notebook p { color:var(--ink-soft); font-size:.85rem; }
.home-notebook .text-link { font-size:.85rem; }
.home-contact { display:grid; position:relative; isolation:isolate; overflow:hidden; margin-block:0 3rem; padding:0; border:1px solid var(--border); border-radius:18px; background:var(--brand-soft); }
.home-contact-copy { position:relative; z-index:1; padding:clamp(1.5rem,4vw,3rem); }
.home-contact h2 { max-width:19ch; }
.home-contact-copy > p:not(.eyebrow) { max-width:48ch; margin:1.25rem 0 1.5rem; color:var(--ink-soft); font-size:.95rem; line-height:1.7; }
.home-contact-flower { position:absolute; z-index:-1; inset:0; opacity:.1; }
.home-contact-flower img { width:100%; height:100%; object-fit:cover; object-position:center; }
@media(min-width:760px) {
  .home-services { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
  .home-service { display:flex; flex-direction:column; }
  .home-service h3 { min-height:3.75em; max-width:22ch; }
  .home-service-action { margin-top:auto; }
  .home-projects { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
  .home-contact { grid-template-columns:1.4fr 1fr; }
  .home-contact-flower { position:relative; z-index:auto; opacity:1; min-height:100%; }
  .home-contact-flower img { position:absolute; inset:0; }
}
@media(max-width:679px) {
  .bloom-copy h1 { font-size:clamp(3.4rem,15vw,4.75rem); }
  .bloom-hero-inner { min-height:min(780px,calc(100svh - 64px)); }
  :root:not([data-theme="dark"]) .bloom-hero .route-backdrop-signature::after { background:linear-gradient(0deg,var(--brand-paper),transparent 28%),linear-gradient(90deg,color-mix(in srgb,var(--brand-paper) 94%,transparent),color-mix(in srgb,var(--brand-paper) 80%,transparent) 46%,color-mix(in srgb,var(--brand-paper) 28%,transparent)); }
}
@media(max-width:359px) {
  .home-section h2 { font-size:1.8rem; }
  .home-project-actions { flex-direction:column; }
}
@media(min-width:1100px) { .home-service h3 { min-height:2.5em; } }
@media(forced-colors:active) { .home-contact-flower { display:none; } .home-service,.home-project-image,.home-contact,.home-notebook { border:1px solid CanvasText; } }