/* =====================================================================
   Juan Montenegro — Portafolio
   Editorial cálido · Inter/Archivo · tarjetas glass-matte · esquinas suaves
   1 tokens · 2 reset · 3 utils · 4 type · 5 cards · 6 buttons
   7 cursor · 8 nav · 9 hero · 10 panel oscuro + métricas
   11 explorador de proyectos · 12 servicios · 13 recomendaciones
   14 contacto + formulario · 15 footer · 16 efectos · 17 responsive
   18 reduced-motion
   ===================================================================== */

/* ============ 1. TOKENS ============ */
:root {
  --paper:      #fafafb;
  --paper-2:    #f1f1f3;
  --paper-3:    #e6e6ea;
  --ink:        #14161a;
  --ink-2:      #3d4149;
  --ink-mute:   #7c828d;
  --slate:      #94a3b8;   /* labels / metadata */
  --dot:        #c6f24e;   /* verde-lima de las referencias */
  --rust:       #94a3b8;   /* (legado — neutralizado) */
  --rust-deep:  #7c828d;
  --line:       rgba(20, 22, 26, 0.12);
  --line-soft:  rgba(20, 22, 26, 0.06);

  --night:      #17130f;
  --night-2:    #201a14;
  --night-3:    #2a231b;
  --night-ink:  #f1e9da;
  --night-mute: #a99c85;
  --night-line: rgba(241, 233, 218, 0.16);
  --night-line-soft: rgba(241, 233, 218, 0.08);

  --glass:        rgba(255, 255, 255, 0.62);
  --glass-brd:    rgba(255, 255, 255, 0.9);
  --glass-dark:   rgba(42, 35, 27, 0.52);
  --glass-dark-brd: rgba(241, 233, 218, 0.14);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  --disp: "League Gothic", "Archivo", "Inter", var(--sans);
  --disp-ls: -0.04em;   /* interletrado apretado */
  --disp-hero: "Helvetica Now Display", "Helvetica Neue", Helvetica, var(--sans);

  --pad: clamp(1.1rem, 4.4vw, 3.6rem);
  --maxw: 1480px;
  --nav-h: 60px;

  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-1: 0 1px 2px rgba(27, 23, 18, 0.05), 0 14px 40px -18px rgba(27, 23, 18, 0.16);
  --shadow-dark: 0 1px 2px rgba(0, 0, 0, 0.28), 0 26px 60px -26px rgba(0, 0, 0, 0.55);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ 2. RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(0.96rem, 0.45vw + 0.88rem, 1.04rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
::selection { background: var(--rust); color: var(--paper); }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 3px; }

/* ============ 3. UTILITIES ============ */
.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(1.5rem, 3.2vw, 2.6rem); position: relative; }
/* Separación de secciones: línea y espacio propio sin alterar los bloques internos. */
.section--divided {
  margin-top: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(2.5rem, 5.5vw, 5rem);
}
.section--divided::before {
  content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad);
  height: 1px; background: var(--line);
}
.rule { height: 1px; background: var(--line); border: 0; }

.label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: var(--rust); }

.skip-link {
  position: fixed; top: -120px; left: 1rem; z-index: 999;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--paper);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--r-xs);
}
.skip-link:focus { top: 1rem; }
[hidden] { display: none !important; }

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

/* ============ 4. TYPOGRAPHY SCALE ============ */
.d-1 { font-family: var(--disp); font-weight: 800; font-size: clamp(2.6rem, 8.4vw, 6.6rem); letter-spacing: var(--disp-ls); line-height: 0.98; }
.d-2 { font-family: var(--disp); font-weight: 800; font-size: clamp(1.9rem, 5vw, 3.4rem); letter-spacing: var(--disp-ls); line-height: 1.02; }
.d-3 { font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.025em; }
.lead { font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.4rem); line-height: 1.44; font-weight: 400; color: var(--ink-2); }

/* ============ 5. CARDS (glass matte) ============ */
.card {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  .card { background: rgba(255, 255, 255, 0.44); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
}
.card--dark { background: rgba(42, 35, 27, 0.7); border-color: var(--glass-dark-brd); box-shadow: var(--shadow-dark); color: var(--night-ink); }
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  .card--dark { background: rgba(42, 35, 27, 0.5); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
}

/* dark inset panel — used where the background colour changes */
.panel {
  margin-inline: clamp(0.55rem, 1.8vw, 1.3rem);
  border-radius: var(--r-xl);
  overflow: clip;
}
.panel--dark { background: var(--night); color: var(--night-ink); box-shadow: var(--shadow-dark); }
.panel--dark .label, .panel--dark .eyebrow { color: var(--night-mute); }
.panel--dark .eyebrow::before { background: var(--rust); }

/* ============ 6. BUTTONS ============ */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.78rem 1.25rem;
  background: var(--bg); color: var(--fg);
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.btn:hover { background: #000; transform: translateY(-1px); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn__arrow { transition: transform 0.3s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* plain pill button (hero) */
.btn2 {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #0b1226; color: #fff;
  padding: 0.85rem 1.75rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap;
  box-shadow: 0 16px 32px -18px rgba(4, 8, 32, 0.55);
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.btn2:hover { transform: translateY(-1px); background: #000; }
.btn2--ghost {
  background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.4);
  box-shadow: none;
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .btn2--ghost { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
.btn2--ghost:hover { background: rgba(255,255,255,0.24); }

.linkline {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; font-weight: 600; position: relative; padding-bottom: 2px;
}
.linkline::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.linkline:hover::after { transform: scaleX(1); }

/* ============ 7. CURSOR — desactivado (puntero nativo normal) ============ */
.cursor { display: none !important; }

/* ============ 8. NAV ============ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; pointer-events: none;
}
.nav__inner {
  pointer-events: auto;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  transition: max-width 0.45s var(--ease-out), padding 0.45s var(--ease-out),
              background 0.4s var(--ease-out), border-color 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);
}
.nav.is-stuck .nav__inner {
  max-width: fit-content;
  padding: 0.5rem 0.6rem 0.5rem 1.05rem;
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 30px -16px rgba(20, 20, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .nav.is-stuck .nav__inner { backdrop-filter: blur(20px) saturate(1.7); -webkit-backdrop-filter: blur(20px) saturate(1.7); }
}
.nav__brand {
  font-family: var(--disp); font-weight: 800; font-size: 0.92rem; letter-spacing: var(--disp-ls); color: #fff;
  overflow: hidden; white-space: nowrap; max-width: 420px; opacity: 1;
  transition: max-width 0.4s var(--ease-out), opacity 0.25s ease, margin 0.4s var(--ease-out), color 0.3s var(--ease-out);
}
.nav.is-stuck .nav__brand { max-width: 0; opacity: 0; margin-right: -1.4rem; }
.nav__brand span { color: rgba(255,255,255,0.72); font-weight: 500; transition: color 0.3s var(--ease-out); }
.nav__links { display: flex; gap: 1.5rem; align-items: center; }
.nav__link { font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.82); transition: color 0.3s var(--ease-out); }
.nav__link:hover { color: #fff; }
.nav__cta { color: #ffdcb0; font-weight: 600; }
.nav.is-stuck .nav__brand { color: var(--ink); }
.nav.is-stuck .nav__brand span { color: var(--ink-mute); }
.nav.is-stuck .nav__link { color: var(--ink-mute); }
.nav.is-stuck .nav__link:hover { color: var(--ink); }
.nav.is-stuck .nav__cta { color: var(--rust); }

/* ============ 9. HERO ============ */
/* Sticky necesita espacio dentro del contenido del contenedor, no padding.
   La superficie siguiente compensa ese espacio y comienza justo en la cinta. */
.hero-pin { position: relative; z-index: 1; display: flow-root; }
.hero-pin::after { content: ""; display: block; height: var(--hero-runway, 0px); }
.page-content { position: relative; z-index: 2; background: var(--paper); display: flow-root; }
.hero {
  position: sticky; top: 0; z-index: 1; min-height: 92svh; overflow: clip;
  display: flex; flex-direction: column;
  padding-top: calc(var(--nav-h) + 2vw); padding-bottom: 0;
  background: radial-gradient(120% 95% at 50% -8%, #3a5bff 0%, #2340e0 38%, #13239e 68%, #0a1360 100%);
}
/* El paneo vivía antes en background-position del propio .hero: al ser un
   radial-gradient con un stop final oscuro (#0a1360) y background-size>100%,
   mover la posición terminaba exponiendo ese borde oscuro del gradiente — la
   "línea oscura" que se veía. Ahora el paneo vive en una capa aparte
   (.hero__wash), un glow radial que se desvanece a transparente DENTRO de sus
   propios límites (nunca hay un borde duro que exponer) y se anima con
   transform (compositor, fluido) en vez de background-position (pintura en
   cada frame — la causa real de que se viera "pausado"). */
.hero__wash {
  position: absolute; inset: -25%; z-index: 0;
  background: radial-gradient(closest-side, rgba(130,160,255,0.42), rgba(130,160,255,0) 70%);
  filter: blur(6px);
  animation: heroWashPan 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroWashPan {
  from { transform: translate(-7%, -4%) scale(1); }
  to   { transform: translate(7%, 5%) scale(1.06); }
}
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .hero-pin { --hero-runway: 92svh; }
  .page-content { margin-top: -92svh; box-shadow: 0 -24px 48px -30px rgba(4, 8, 40, 0.4); }
}

/* fondo: retícula + halos ambientales animados */
.hero__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__gridlines {
  position: absolute; inset: -56px;
  background-image:
    linear-gradient(rgba(255,255,255,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.11) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 18%, #000 35%, transparent 92%);
  mask-image: radial-gradient(120% 100% at 50% 18%, #000 35%, transparent 92%);
  animation: heroGridDrift 4.5s linear infinite;
  will-change: transform;
}
/* transform en vez de background-position: background-position se repinta en
   cada frame (ahí estaba la lentitud/no-fluidez); transform lo mueve el
   compositor, a 60fps reales. La celda mide 56px y el elemento se pasó 56px
   de cada borde (inset:-56px), así que recorrer exactamente eso es, otra vez,
   un loop perfecto sin salto ni borde expuesto. */
@keyframes heroGridDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(56px, 56px); }
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; will-change: transform, opacity; }
.hero__glow--a { width: 58vw; height: 58vw; left: -12vw; top: -22%; background: radial-gradient(circle, rgba(130,160,255,0.55), transparent 68%); animation: heroDrift1 30s var(--ease-soft) infinite; }
.hero__glow--b { width: 44vw; height: 44vw; right: -8vw; top: 4%; background: radial-gradient(circle, rgba(175,200,255,0.42), transparent 70%); animation: heroDrift2 36s var(--ease-soft) infinite; }
.hero__glow--c { width: 50vw; height: 50vw; left: 22%; bottom: -30%; background: radial-gradient(circle, rgba(100,130,255,0.4), transparent 70%); animation: heroDrift3 42s var(--ease-soft) infinite; }
@keyframes heroDrift1 { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.9; } 50% { transform: translate(4vw,3vh) scale(1.1); opacity: 1; } }
@keyframes heroDrift2 { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.8; } 50% { transform: translate(-3vw,4vh) scale(1.08); opacity: 1; } }
@keyframes heroDrift3 { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.75; } 50% { transform: translate(3vw,-3vh) scale(1.14); opacity: 0.95; } }

/* humo / niebla muy suave — capas difusas y alargadas, opacidad muy baja,
   deriva lenta lateral. Distinto de .hero__glow (halos de luz de color): esto
   es blanco/neutro y aporta atmósfera, no brillo. */
.hero__mist {
  position: absolute; border-radius: 50%; filter: blur(70px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  mix-blend-mode: overlay; pointer-events: none; will-change: transform;
}
.hero__mist--a { width: 85vw; height: 30vh; left: -20vw; top: 18%; opacity: 0.5; animation: mistDriftA 60s ease-in-out infinite; }
.hero__mist--b { width: 70vw; height: 26vh; right: -18vw; bottom: 6%; opacity: 0.4; animation: mistDriftB 74s ease-in-out infinite; }
@keyframes mistDriftA { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8vw); } }
@keyframes mistDriftB { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-7vw); } }

/* ruido animado muy sutil — mismo tipo de textura que .grain (SVG feTurbulence),
   pero local al Hero y con un movimiento mínimo en loop para que no se vea
   plano/digital. Independiente de .grain (global, estática): no la reemplaza. */
.hero__grain {
  position: absolute; inset: -45%; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 140px;
  animation: heroGrainShift 6s linear infinite;
  will-change: transform;
}
/* deriva continua y lineal (no a saltos): el tile mide 140px, así que
   trasladar exactamente eso es, otra vez, un loop perfecto sin reinicio. */
@keyframes heroGrainShift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-140px, -140px); }
}

/* velo inferior: blanco/azul muy claro que se desvanece hacia arriba, apenas
   visible cerca del borde inferior del Hero — por detrás de todo el contenido. */
.hero__bottom-glow {
  position: absolute; inset: auto 0 0 0; height: 34%; z-index: 0;
  background: linear-gradient(to bottom,
    rgba(235, 240, 255, 0) 0%,
    rgba(235, 240, 255, 0.10) 55%,
    rgba(245, 248, 255, 0.20) 100%);
}

.hero__inner {
  position: relative; z-index: 2; flex: 1; width: 100%;
  display: flex; align-items: center;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* tarjeta central — liquid glass.
   El panel se separa en dos capas para que el blur/tint (::before, que es lo
   que necesita backdrop-filter + su propio recorte redondeado) no compita con
   el borde y las sombras del elemento exterior — esa mezcla en un solo layer
   era la causa del defecto visual en el marco (seam/halo en las esquinas al
   componer backdrop-filter + border-radius + box-shadow juntos). */
.hero__glass {
  position: relative; isolation: isolate; margin-inline: auto; width: 100%; max-width: 1120px;
  padding: clamp(2.4rem, 5.5vw, 4.2rem) clamp(1.6rem, 6vw, 4rem);
  border-radius: clamp(28px, 4vw, 46px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.35rem;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    0 70px 130px -50px rgba(4, 8, 40, 0.65),
    0 24px 50px -30px rgba(4, 8, 40, 0.5),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(10,20,80,0.2);
}
.hero__glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; overflow: hidden;
  /* mucho menos tinte sólido — deja pasar bastante más del fondo/retícula */
  background:
    linear-gradient(155deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 34%, rgba(160,185,255,0.06) 68%, rgba(255,255,255,0.10) 100%),
    rgba(70, 105, 255, 0.08);
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  /* base: frost ligero + saturación — deja leer el grid detrás con claridad */
  .hero__glass::before { backdrop-filter: blur(9px) saturate(1.5) brightness(1.05); -webkit-backdrop-filter: blur(9px) saturate(1.5) brightness(1.05); }

}
/* La lente queda inmóvil; solo se desplaza la retícula que pasa detrás. */
.hero__refraction {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  overflow: hidden; pointer-events: none; opacity: 0;
  filter: url(#hero-glass-distort);
}
.hero__refraction.is-aligned { opacity: 0.95; }
.hero__refraction-grid {
  inset: auto; left: var(--grid-left); top: var(--grid-top);
  width: var(--grid-width); height: var(--grid-height);
  mask-image: none; -webkit-mask-image: none;
}
.hero__refraction::after {
  content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.45), inset 0 -2px 5px rgba(215,230,255,0.28);
}
.hero__glass-sheen {
  position: absolute; left: -10%; right: -10%; top: -22%; height: 62%; z-index: -1;
  background: linear-gradient(52deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 58%);
  filter: blur(34px); opacity: 0.8; pointer-events: none;
}

.hero__id {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content;
  background: rgba(255, 238, 219, 0.95); border-radius: 999px; padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  box-shadow: 0 14px 30px -18px rgba(6, 10, 40, 0.45);
}
.hero__id img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(20,20,20,0.08); }
.hero__id b { display: block; font-weight: 600; font-size: 0.8rem; line-height: 1.2; color: var(--ink); text-align: left; }
.hero__id span { display: block; font-size: 0.68rem; line-height: 1.2; color: var(--ink-mute); text-align: left; }
.hero__title {
  position: relative; z-index: 1; max-width: 100%;
  color: #fff; font-family: var(--disp-hero); font-weight: 700;
  font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 0.96; letter-spacing: -0.045em;
  text-wrap: wrap;
}
.hero__sub {
  position: relative; z-index: 1; max-width: 62ch; margin-inline: auto;
  color: rgba(255,255,255,0.78); font-size: clamp(0.9rem, 0.4vw + 0.82rem, 1rem);
  line-height: 1.5; letter-spacing: -0.005em;
}
.hero__actions { position: relative; z-index: 1; display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 0.3rem; }

/* entrada del texto del Hero al cargar — sin scroll de por medio (contenido
   above-the-fold), así que se dispara con CSS puro, en cascada. */
.hero__id, .hero__title, .hero__sub, .hero__actions {
  opacity: 1;
  animation: heroTextIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.hero__id { animation-delay: 0.05s; }
.hero__title { animation-delay: 0.16s; }
.hero__sub { animation-delay: 0.28s; }
.hero__actions { animation-delay: 0.4s; }
.hero.is-entered .hero__id, .hero.is-entered .hero__title, .hero.is-entered .hero__sub, .hero.is-entered .hero__actions { animation: none; opacity: 1; transform: none; }
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ 9b. TICKER: marcas (franja inferior del hero) ============ */
.ticker {
  position: relative; z-index: 2; overflow: hidden; padding-block: 0.85rem;
  /* franja base + un lavado radial muy sutil al centro (no es un spotlight:
     apenas ~6% de blanco, se pierde casi del todo hacia los bordes) */
  background:
    radial-gradient(58% 160% at 50% 50%, rgba(255,255,255,0.06), transparent 72%),
    var(--night);

}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--night), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--night), transparent); }
/* Importante: el espaciado va como margin-right en cada span (NO como `gap`
   del flex). Con `gap`, el separador entre mitades cuenta (n-1) veces y el
   translateX(-50%) queda medio-gap corto del punto de costura real — eso era
   el salto perceptible del loop. Con margin, cada mitad mide exactamente
   n*(ítem+separación) y -50% cae justo donde empieza la copia siguiente. */
.ticker__track { display: flex; align-items: center; width: max-content; will-change: transform; animation: tickerScroll 60s linear infinite; }
.ticker__half { display: flex; align-items: center; }
.ticker__track span {
  font-family: var(--disp); font-weight: 400; letter-spacing: -0.01em; text-transform: uppercase;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--night-mute); white-space: nowrap; opacity: 0.85;
  margin-right: clamp(2.4rem, 6vw, 5rem);
}
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ 10. DARK PANEL + METRICS (before projects) ============ */
.intro {
  position: relative; z-index: 2; color: var(--ink); background: var(--paper);
  border-radius: 0;
  padding-top: clamp(2rem, 5vw, 4rem);
}
.intro__block {
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.intro__top { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.intro__photo { aspect-ratio: 1 / 1; border-radius: var(--r); overflow: clip; background: var(--paper-3); }
.intro__photo img, .intro__photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro__lead {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1.14; letter-spacing: -0.015em;
}
.intro__lead .rust { color: #2b4ce0; font-weight: 600; }
/* reveal de palabras — el contenedor (.reveal[data-split]) siempre visible;
   cada palabra (.lw) es la que anima, en cascada, una sola vez. */
.intro__lead .lw {
  display: inline-block; opacity: 0; transform: translateY(0.4em);
  transition: opacity 0.5s var(--ease-reveal), transform 0.5s var(--ease-reveal);
  will-change: opacity, transform;
}
.intro__lead .lw.is-visible { opacity: 1; transform: none; }
.intro__body { margin-top: 1rem; max-width: 52ch; color: var(--ink-2); font-size: 0.92rem; }

.intro__cards {
  margin-top: clamp(1.8rem, 4vw, 2.8rem); padding-top: clamp(1.5rem, 3vw, 2.2rem); border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.7rem, 1.6vw, 1.1rem);
  perspective: 1200px;
}
/* liquid glass, versión clara — pensada para leerse sobre el fondo gris claro
   de .intro__block. La capa de blur/tinte va en ::before (aislada del borde y
   la sombra) para que el recorte redondeado no genere artefactos. */
.intro__card {
  position: relative; isolation: isolate; overflow: hidden;
  background: transparent; border: 1px solid rgba(130, 155, 255, 0.28); border-radius: var(--r);
  padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.2rem;
  box-shadow:
    0 20px 40px -26px rgba(20, 22, 26, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(20, 22, 26, 0.04);
}
.intro__card::before {
  /* El glow decorativo (antes en ::after) se sumó acá como una capa más: deja
     ::after libre para el spotlight de .motion-card que sigue el cursor. */
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background:
    radial-gradient(45% 55% at 15% -10%, rgba(255,255,255,0.65), transparent 72%),
    linear-gradient(155deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.28) 40%, rgba(140,165,255,0.16) 75%, rgba(255,255,255,0.4) 100%);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .intro__card::before { backdrop-filter: blur(7px) saturate(1.4) brightness(1.04); -webkit-backdrop-filter: blur(7px) saturate(1.4) brightness(1.04); }
}
.intro__card-val {
  font-family: var(--disp-hero); font-weight: 700; font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.intro__card-unit { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-mute); }
.intro__card p { margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.35; color: var(--ink-2); }

/* ============ 11. PROJECT EXPLORER (light) ============ */
/* ritmo vertical: un poco más cerca de "Cómo trabajo" arriba, un poco más
   separada del explorador de proyectos abajo — override puntual sobre el
   padding-block heredado de .section, sin tocar esa regla compartida. */
.explorer { position: relative; margin-top: clamp(0.75rem, 1.8vw, 1.5rem); padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.3rem, 4.6vw, 3.6rem); }
.explorer__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(2.2rem, 4.4vw, 3.4rem); }
.explorer__title { font-family: var(--disp); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.8rem); letter-spacing: var(--disp-ls); }

.explorer__head--work { display: grid; justify-items: center; justify-content: center; text-align: center; gap: 0.9rem; margin-bottom: clamp(1.8rem, 3.2vw, 2.4rem); }
.explorer__intro { max-width: 62ch; font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.6; color: var(--ink-2); }
.explorer__accent { color: #2b4ce0; }
.explorer__head--work .explorer__title {
  position: relative; width: fit-content; padding-bottom: 0.4rem; --rv-y: 18px; --rv-dur: 0.85s;
  text-transform: uppercase; font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  background-image: linear-gradient(100deg, var(--ink) 0%, var(--ink) 40%, #fff 50%, var(--ink) 60%, var(--ink) 100%);
  background-size: 220% 100%; background-position: 180% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.explorer__head--work .explorer__title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4.5rem; height: 3px; border-radius: 3px; background: #2b4ce0; transform-origin: center; transform: translateX(-50%) scaleX(0); transition: transform 0.8s var(--ease-out) 0.25s; }
.explorer__head--work .explorer__title.is-visible::after { transform: translateX(-50%) scaleX(1); }
.explorer__head--work .explorer__title.is-visible { animation: titleShine 1.7s ease-out .35s 1 both; }
@keyframes titleShine { from { background-position: 180% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) {
  .explorer__head--work .explorer__title { background-image: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink); animation: none; }
}
.rail-trigger { display: none; }
.sheet { display: none; }               /* solo visible en móvil (ver §17) */
.explorer__layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: start;
}
.rail { position: sticky; top: calc(var(--nav-h) + 1.4rem); }
.rail__group { margin-bottom: 1.5rem; }
.rail__glabel {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); margin-bottom: 0.35rem;
}
.rail__glabel b { color: var(--rust); }
.rail__item {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; align-items: baseline;
  width: 100%; text-align: left; padding: 0.55rem 0.65rem;
  color: var(--ink-mute); border-radius: var(--r-sm); border: 1px solid transparent;
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.rail__item:hover { color: var(--ink); }
.rail__num { font-size: 0.72rem; font-weight: 600; }
.rail__name { font-size: 0.9rem; line-height: 1.25; }
.rail__item.is-active { color: var(--ink); background: rgba(255, 255, 255, 0.6); border-color: var(--glass-brd); }
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .rail__item.is-active { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); }
}
.rail__item.is-active .rail__num { color: var(--ink); }

.stage { min-width: 0; overflow-x: clip; }
.case { animation: caseIn 0.5s var(--ease-out) both; overflow-x: clip; }
.case__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); column-gap: clamp(1.8rem, 4.5vw, 4.5rem); align-items: start; }
.case__headMain { min-width: 0; }
@keyframes caseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- case header (specs exactas) --- */
.case__kicker { display: flex; align-items: center; gap: 0.55rem; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.case__kicker b { color: var(--ink); font-weight: 600; }
.case__kicker .dash { width: 1.6rem; height: 1px; background: var(--slate); }
.case__title { font-family: var(--disp); font-weight: 400; font-size: clamp(58px, 11vw, 130px); line-height: 0.85; letter-spacing: var(--disp-ls); text-transform: uppercase; margin-top: 0.5rem; }
.case__hook { font-family: var(--sans); font-weight: 400; font-size: clamp(14px, 1.4vw, 17px); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-2); max-width: 52ch; margin-top: 1rem; }
.case__hook em { font-style: normal; font-weight: 600; color: var(--ink); }
.case__rule { height: 1px; background: var(--line); border: 0; margin: clamp(1.8rem, 4vw, 2.8rem) 0 clamp(1.4rem, 3vw, 2rem); }
.case__meta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 1.6rem) 1.4rem; margin-top: 0.5rem; }
.case__meta dt { font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 16.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.case__meta dd { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: -0.3px; text-transform: uppercase; margin-top: 0.35rem; }
.case__meta dd.long { font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.case__links { margin-top: 1.2rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* --- ordered blocks --- */
.case__blocks { display: grid; gap: clamp(2.6rem, 5.6vw, 5rem); margin-top: clamp(2.2rem, 5vw, 3.4rem); }

/* etiqueta de sección  ● 01. Contexto */
.blabel { display: flex; width: fit-content; align-items: center; gap: 0.55rem; margin-bottom: clamp(0.95rem, 2vw, 1.4rem); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.blabel::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); flex: none; }

/* ---- media block ---- */
.mblock { display: grid; gap: clamp(10px, 1.8vw, 20px); align-items: center; }
.mblock.n1 { grid-template-columns: 1fr; }
.mblock.n2 { grid-template-columns: 1fr 1fr; }
.mblock.n3 { grid-template-columns: 1fr 1fr 1fr; }
.mblock.n4 { grid-template-columns: repeat(4, 1fr); }
.mblock.posts { grid-template-columns: repeat(3, minmax(0, 262px)); justify-content: start; gap: clamp(14px, 1.8vw, 22px); }
.mblock.posts > .frame { padding: 0; background: none; border: 0;
  box-shadow: 0 10px 26px -18px rgba(20, 20, 20, 0.16); }
.mblock.strip { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }

/* mosaico irregular de stills — cada frame completo (16:9 / cine), sin recortar */
.mblock.mosaic { grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.4vw, 18px); align-items: start; }
.mblock.mosaic > .frame { aspect-ratio: 2 / 1; background: var(--paper-2); }
.mblock.mosaic > .frame > img { object-fit: contain; }
.mblock.mosaic > .frame:nth-child(6n+1) { grid-column: span 8; }
.mblock.mosaic > .frame:nth-child(6n+2) { grid-column: span 4; }
.mblock.mosaic > .frame:nth-child(6n+3) { grid-column: span 5; }
.mblock.mosaic > .frame:nth-child(6n+4) { grid-column: span 7; }
.mblock.mosaic > .frame:nth-child(6n+5) { grid-column: span 7; }
.mblock.mosaic > .frame:nth-child(6n+0) { grid-column: span 5; }
@media (max-width: 760px) {
  .mblock.mosaic { grid-template-columns: 1fr; }
  .mblock.mosaic > .frame { grid-column: 1 / -1; }
}

/* imagen SUELTA — sin marco */
.mfig { display: flex; justify-content: center; max-width: 100%; }
.mfig img { display: block; width: auto; max-width: 100%; height: auto; border-radius: var(--r-sm);
  filter: drop-shadow(0 22px 34px rgba(27, 23, 18, 0.13)); }
.mblock.n1 > .mfig img { max-height: clamp(300px, 46vh, 480px); }
.mblock.n2 > .mfig img { max-height: clamp(230px, 34vh, 360px); }
.mblock.n3 { gap: clamp(8px, 1.2vw, 14px); }
.mblock.n3 > .mfig { justify-self: center; }
.mblock.n3 > .mfig img { max-height: clamp(190px, 28vh, 320px); max-width: min(104%, 380px); }

/* imagen ENMARCADA — el marco define el espacio; la imagen lo cubre */
.frame { position: relative; border-radius: var(--r); overflow: clip;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 20px 44px -24px rgba(20, 20, 20, 0.13);
  display: grid; place-items: center; }
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.frame.fit > img { object-fit: contain; }
.frame.plain { background: none; border: 0; box-shadow: none; }
.mblock.is-pull { margin-top: clamp(-3.5rem, -4.5vw, -2rem); }
.frame.wide     { aspect-ratio: 16 / 8; }
.frame.band     { aspect-ratio: 5 / 2; display: block; }
.frame.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame.r32      { aspect-ratio: 3 / 2; }
.frame.photo    { aspect-ratio: 4 / 3; }
.frame.vertical { aspect-ratio: 3 / 4; }
.frame.square   { aspect-ratio: 1 / 1; }
.mcap { font-size: 0.68rem; color: var(--ink-mute); margin-top: 0.5rem; text-align: center; }

/* ---- split (texto + imagen) ---- */
.split { display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr); gap: clamp(1.5rem, 11vw, 9rem); align-items: start; }
.split.big { align-items: center; }
.split.side-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 5vw, 3.8rem); }
.split.side-left .split__media { order: -1; }
.split > div { min-width: 0; }
.split .blabel { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.split .tbody { max-width: 32ch; }
.split.side-left .tbody { max-width: none; }
.split .tbody-lead { max-width: none; font-family: var(--sans); font-weight: 500; font-size: 28px; line-height: 33px; letter-spacing: -0.9px; margin-bottom: 1.4rem; }
.split .tbody-lead em { font-weight: 500; font-style: normal; }
.split .tbody-lead ~ p { font-size: 16px; line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-mute); }
.split__media { display: grid; gap: 10px; justify-items: center; align-content: center; }
.split:not(.side-left) .split__media { justify-items: start; }
.split__media.two { grid-template-columns: 1fr 1fr; }
.split__media .mfig img { max-height: clamp(230px, 42vh, 440px); }
.split:not(.side-left) .split__media .mfig img { max-height: clamp(280px, 30vw, 400px); width: auto; }
.split__media .frame { width: 100%; }
/* toggles decorativos de la sección de dirección visual */
.split__tools { display: flex; gap: 0.65rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.split__tools span { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-mute); }
.split__tools svg { width: 15px; height: 15px; display: block; }

/* ---- statement entre secciones — Inter 38 / 45 / -1.5 ---- */
/* frases entre secciones — Inter 38 / 45 / -1.5, regular + palabras en semibold */
.statement, .tbody-lead, .split.big .tbody, .tblock.big .tbody {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(22px, 2.9vw, 38px); line-height: 1.18; letter-spacing: -0.032em; color: var(--ink);
}
.statement em, .tbody-lead em, .split.big em, .tblock.big em { font-style: normal; font-weight: 600; color: inherit; }
.statement { text-align: center; max-width: 32ch; margin-inline: auto; font-size: clamp(18px, 1.9vw, 25px); line-height: 1.32; letter-spacing: -0.02em; }
.tbody-lead { max-width: 30ch; margin-bottom: 0.9rem; }
.split.big .tbody, .tblock.big .tbody { max-width: 34ch; }

/* ---- carrusel de vídeos verticales (siempre 9:16, alto -> ancho) ---- */
.videos { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; padding: 4px 0 0.6rem; scrollbar-width: thin; }
.videos::-webkit-scrollbar { height: 6px; }
.videos::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.videos .vfig {
  flex: 0 0 auto; width: auto; height: clamp(240px, 40vh, 380px); aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(20,20,20,.04), 0 18px 40px -22px rgba(20,20,20,.12);
  transition: height 0.45s var(--ease-out), transform 0.28s var(--ease-out);
}
.videos .vfig:hover:not(.is-open) { transform: scale(1.05); z-index: 3; }
.videos .vfig.is-open { height: clamp(400px, 78vh, 640px); }
.videos .playbtn span { padding: 0.3rem 0.55rem; font-size: 0.6rem; }
/* fila de vídeos grande (plantillas pikkto / story) */
.videos.big .vfig { height: clamp(320px, 52vh, 500px); }
.videos.big .vfig.is-open { height: clamp(440px, 82vh, 680px); }

/* coverflow: 3 vídeos, el del medio activo, laterales por detrás (carrusel infinito) */
.videos.big.coverflow {
  display: block; position: relative; overflow: visible; scroll-snap-type: none;
  width: clamp(280px, 56vw, 700px); max-width: 100%; height: clamp(320px, 52vh, 500px);
  padding-top: 6px; perspective: 1600px;
}
.videos.big.coverflow .vfig {
  position: absolute; top: 6px; left: 50%; margin: 0;
  height: clamp(320px, 52vh, 500px);
  transform-origin: center center; will-change: transform, opacity;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.55s ease, filter 0.55s ease;
}
.videos.big.coverflow .vfig.cf-center {
  transform: translateX(-50%) rotateY(0deg) scale(1);
  opacity: 1; z-index: 5; filter: none; cursor: pointer;
}
.videos.big.coverflow .vfig.cf-center:hover { transform: translateX(-50%) scale(1.02); }
.videos.big.coverflow .vfig.cf-side { opacity: 0.64; z-index: 2; filter: brightness(0.95); cursor: pointer; }
.videos.big.coverflow .vfig.cf-left  { transform: translateX(-92%) rotateY(22deg) scale(0.86); }
.videos.big.coverflow .vfig.cf-right { transform: translateX(-8%) rotateY(-22deg) scale(0.86); }
.videos.big.coverflow .vfig.cf-side:hover { opacity: 0.85; }
.videos.big.coverflow .vfig.cf-left:hover  { transform: translateX(-94%) rotateY(19deg) scale(0.88); }
.videos.big.coverflow .vfig.cf-right:hover { transform: translateX(-6%) rotateY(-19deg) scale(0.88); }
/* variante de 2 vídeos: centro + uno asomando, el par centrado */
.videos.big.coverflow--pair .vfig.cf-center { transform: translateX(-74%) rotateY(0deg) scale(1); }
.videos.big.coverflow--pair .vfig.cf-center:hover { transform: translateX(-74%) scale(1.02); }
.videos.big.coverflow--pair .vfig.cf-right { transform: translateX(2%) rotateY(-24deg) scale(0.82); }
.videos.big.coverflow--pair .vfig.cf-right:hover { transform: translateX(4%) rotateY(-21deg) scale(0.84); }

.cf-nav { position: absolute; top: 50%; z-index: 7;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  display: grid; place-items: center; font-size: 1.15rem; line-height: 1; color: var(--ink);
  cursor: pointer; transform: translateY(-50%); transition: background 0.25s, color 0.25s, transform 0.25s; }
.cf-nav:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cf-nav.cf-prev { left: 2px; }
.cf-nav.cf-next { right: 2px; }
.cf-nav:hover { transform: translateY(-50%) scale(1.08); }
@media (max-width: 620px) { .cf-nav { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) {
  .videos.big.coverflow .vfig { transition: opacity 0.2s ease; }
}

/* ---- videos + texto lateral (marca + botón) ---- */
.vsplit { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 232px); gap: clamp(1.6rem, 2.6vw, 2.4rem); justify-content: start; align-items: start; }
.vsplit--wide { grid-template-columns: minmax(0, max-content) minmax(0, 250px); gap: clamp(1.6rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3.4rem); border-bottom: 1px solid var(--line); }
.vsplit .videos { min-width: 0; gap: 12px; }
.vsplit .videos .vfig { height: clamp(280px, 34vw, 445px); background: var(--paper-3); border: 0;
  box-shadow: 0 14px 34px -20px rgba(20,20,20,.16); }
.vaside { display: grid; gap: 1.15rem; align-content: start;
  transition: opacity 0.22s ease, transform 0.22s ease; }
.vaside.is-swap { opacity: 0; transform: translateY(8px); }
.mblock[data-sync-stills] { transition: opacity 0.22s ease, transform 0.22s ease; }
.mblock[data-sync-stills].is-swap { opacity: 0; transform: translateY(8px); }
.vaside .blabel { margin-bottom: 0.35rem; }
.vaside__brand { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: -0.3px; text-transform: uppercase; }
.vaside__text { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; letter-spacing: -0.008em; color: var(--ink-2); max-width: none; }
.vaside .btn { background: #fff; color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--shadow-1); justify-self: start; font-size: 13px; font-weight: 600;
  padding: 0.72rem 1.15rem; margin-top: 0.3rem; }
.vaside .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- video / embed facade (base) ---- */
.vfig { position: relative; border-radius: var(--r); overflow: clip; background: var(--paper-3); cursor: pointer; }
.vfig.embed { aspect-ratio: 16 / 9; }
.vfig.local { aspect-ratio: 9 / 16; max-width: 300px; }
.vfig.local.wide { aspect-ratio: 16 / 9; max-width: none; }
.vfig.local.band { aspect-ratio: 5 / 2; max-width: none; }
.vfig.framed { background: var(--paper-2); border: 1px solid var(--line-soft); box-shadow: 0 1px 2px rgba(20,20,20,.04), 0 20px 44px -24px rgba(20,20,20,.13); }
.vfig > img { width: 100%; height: 100%; object-fit: cover; }
.vfig iframe, .vfig video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vfig .playbtn { width: 100%; height: 100%; padding: 0; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 22, 26, 0.22); transition: background 0.3s; }
.vfig:hover .playbtn { background: rgba(20, 22, 26, 0.08); }
.playbtn span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border-radius: 999px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 0.72rem; font-weight: 600; }

/* text block — etiqueta a la izquierda, cuerpo desplazado */
.tblock { display: grid; grid-template-columns: minmax(0, 175px) minmax(0, 1fr); gap: clamp(2.5rem, 13.5vw, 11rem); align-items: start; }
.tblock .tbody { max-width: 66ch; font-size: 17.5px; line-height: 1.55; }
.rblock { display: block; }
.rblock .blabel { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.rblock .rmetrics { border-top: 1px solid var(--line); margin-top: clamp(1.8rem, 4vw, 2.8rem); padding-top: clamp(1.6rem, 3.5vw, 2.6rem); }
.tbody { max-width: 44ch; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-2); }
.tbody p + p { margin-top: 1.1rem; }
.tbody ul { display: grid; gap: 0.5rem; }
.tbody ul li { position: relative; padding-left: 1rem; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.tbody ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 4px; height: 4px; border-radius: 50%; background: var(--dot); }

/* concept — liquid glass claro (como en las referencias, SIN sombra paralela) */
.cband { position: relative; margin-block: clamp(1rem, 3.5vw, 2.4rem); margin-inline: auto; width: min(100%, 56rem); }
.cband__glow {
  position: absolute; inset: -20% -3%; z-index: 0; pointer-events: none; border-radius: 44px;
  background:
    radial-gradient(58% 70% at 20% 10%, rgba(160, 150, 226, 0.30), transparent 72%),
    radial-gradient(55% 65% at 88% 92%, rgba(122, 190, 236, 0.16), transparent 70%),
    radial-gradient(52% 60% at 66% 104%, rgba(244, 178, 190, 0.12), transparent 72%);
  filter: blur(52px);
}
.cband__frame {
  position: relative; z-index: 1; border-radius: 40px; text-align: center; overflow: hidden;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.8rem, 6vw, 4.5rem);
  color: var(--ink);
  background: linear-gradient(158deg, rgba(234, 230, 248, 0.62) 0%, rgba(250, 249, 255, 0.5) 52%, rgba(255, 255, 255, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -26px 60px rgba(180, 172, 222, 0.13),
    0 1px 3px rgba(70, 62, 110, 0.05),
    0 34px 80px -34px rgba(70, 62, 110, 0.30);
}
@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .cband__frame {
    background: linear-gradient(158deg, rgba(234, 230, 248, 0.5) 0%, rgba(250, 249, 255, 0.34) 52%, rgba(255, 255, 255, 0.34) 100%);
    backdrop-filter: blur(30px) saturate(1.5) brightness(1.03);
    -webkit-backdrop-filter: blur(30px) saturate(1.5) brightness(1.03);
  }
}
.cband__frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 24%);
  opacity: 0.75;
}
.cband__label { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); position: relative; z-index: 1; }
.cband__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.cband__h { position: relative; z-index: 1; font-family: var(--disp); font-weight: 400; font-size: clamp(40px, 7vw, 72px); letter-spacing: var(--disp-ls); text-transform: uppercase; line-height: 0.9; margin-top: 0.9rem; color: var(--ink); }
.cband__h em { font-style: normal; background: none; color: inherit; }
.cband__cap { position: relative; z-index: 1; max-width: 46ch; margin: 1.1rem auto 0; color: var(--ink-mute); font-family: var(--sans); font-weight: 500; font-size: clamp(15px, 1.6vw, 18px); line-height: 24px; }
.cband__frame.text-only .cband__text { font-family: var(--sans); font-weight: 500; font-size: clamp(18px, 2.6vw, 25px); line-height: 1.0; letter-spacing: 0; max-width: 40ch; margin-inline: auto; color: var(--ink); }
.cband__frame.has-logo .cband__logo { position: relative; z-index: 1; max-width: clamp(240px, 40vw, 420px); margin: 1rem auto 0; }
.cband__frame.has-logo .cband__logo img { width: 100%; height: auto; }
.cband__frame.has-logo .cband__cap { margin-top: 1.3rem; }

/* result — Inter 32 / 40 / -1.5, mezcla medium+bold */
.rstatement { font-family: var(--sans); font-weight: 400; font-size: clamp(21px, 2.5vw, 32px); line-height: 1.25; letter-spacing: -0.04em; color: var(--ink); max-width: 40ch; }
.rstatement em, .rstatement b { font-style: normal; font-weight: 600; color: inherit; }
.rmetrics { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 4vw, 3.2rem); margin-top: 1.6rem; }
.rmetric b { font-family: var(--disp); font-weight: 400; font-size: clamp(34px, 4.4vw, 50px); letter-spacing: -0.02em; color: var(--ink); display: block; line-height: 1; }
.rmetric span { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }

/* logofolio */
.logointro { max-width: 58ch; color: var(--ink-2); margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; }
.logogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: clip; margin-top: 1.4rem; }
.logocell { background: var(--paper); padding: clamp(1rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; gap: 0.85rem; min-height: 220px; }
.logocell__mark { height: 84px; display: flex; align-items: center; justify-content: flex-start; }
.logocell__mark img { max-height: 100%; max-width: 100%; width: auto; }
.logocell__name { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; }
.logocell__note { font-size: 0.78rem; color: var(--ink-mute); line-height: 1.4; }
.minicases { margin-top: 2.2rem; display: grid; gap: clamp(2.6rem, 5vw, 4.2rem); }
.minicase {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(12px, 1.6vw, 20px); row-gap: clamp(2.4rem, 4.5vw, 3.6rem); }
.minicase__head { grid-column: 1 / 3; grid-row: 1; align-self: start; }
.minicase__lead { grid-column: 3 / 4; grid-row: 1; align-self: end; }
.minicase__strip { grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.minicase__name { font-family: var(--sans); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.025em; }
.minicase__text { font-size: 0.9rem; color: var(--ink-2); max-width: 52ch; margin-top: 0.5rem; }
.minicase__strip .mfig, .minicase__lead .mfig { align-self: start; }
.minicase__lead .mfig { max-width: 270px; margin-left: auto; }
/* ajustes finos por logo */
.minicase.mc-es-molinot .minicase__lead .mfig { width: 128%; max-width: none; margin-left: -28%; }

/* ============ 12. SERVICIOS ============ */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.7rem, 1.8vw, 1.2rem); perspective: 1200px; }
.scard { padding: clamp(1.4rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: 0.9rem; }
.scard__num { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--rust); }
.scard__name { font-family: var(--disp); font-weight: 800; font-size: 1.25rem; letter-spacing: var(--disp-ls); }
.scard__line { font-size: 0.9rem; color: var(--ink-2); }
.scard__items { display: grid; gap: 0.42rem; margin-top: auto; padding-top: 0.6rem; }
.scard__items li { font-size: 0.82rem; color: var(--ink-mute); padding-left: 0.85rem; position: relative; }
.scard__items li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 3px; height: 3px; border-radius: 50%; background: var(--rust); }
.transv { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.transv .label { margin-right: 0.5rem; }
.chip { font-size: 0.72rem; font-weight: 500; padding: 0.34rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.tools { margin-top: 1rem; font-size: 0.76rem; color: var(--ink-mute); }
.tools span:not(:last-child)::after { content: " · "; color: var(--line); }

/* ============ 13. RECOMENDACIONES ============ */
.recs__head { max-width: 640px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.recs__head .label { justify-content: center; }
.recs__title { font-family: var(--sans); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.12; color: var(--ink); margin-top: 0.9rem; }
.recs__title em { font-style: normal; font-weight: 600; color: #2b4ce0; }
.recs__sub { margin-top: 0.9rem; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }

.recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.7rem, 1.8vw, 1.2rem); perspective: 1200px; }
.rec {
  position: relative; padding: clamp(1.4rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: 1.1rem;
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.rec__quotemark { position: absolute; top: 1rem; right: 1.2rem; font-family: var(--disp); font-size: 2.6rem; line-height: 1; color: var(--line); }
.rec__quote { font-size: 0.98rem; line-height: 1.44; padding-right: 1.4rem; }
.rec__by { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 0.7rem; }
.rec__avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--paper-3); color: var(--ink-mute);
  font-family: var(--sans); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.01em;
  display: grid; place-items: center;
}
.rec__name { font-weight: 600; font-size: 0.9rem; }
.rec__role { font-size: 0.74rem; color: var(--ink-mute); margin-top: 0.15rem; }

/* ============ 14. CONTACTO + FORM ============ */
.contact { color: var(--night-ink); margin-top: clamp(3rem, 6vw, 5rem); }
.contact__email-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem 0.9rem; margin-top: 1.5rem; }
.contact__email-row .contact__copy { flex: none; min-width: 5rem; line-height: 1.4; }
.contact__inner { padding: clamp(2.8rem, 7vw, 5.5rem) var(--pad) clamp(2rem, 4vw, 3rem); max-width: var(--maxw); margin-inline: auto; }
.contact__title { font-family: var(--disp); font-weight: 800; font-size: clamp(2.6rem, 10vw, 7rem); letter-spacing: var(--disp-ls); line-height: 0.95; margin-top: clamp(0.7rem, 1.8vw, 1.15rem); }
.contact__title .rust { color: var(--rust); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 4rem); align-items: start; }
.contact__email { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--disp); font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.9rem); letter-spacing: var(--disp-ls); }
.contact__copy { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; border: 1px solid var(--night-line); color: var(--night-mute); padding: 0.35rem 0.6rem; border-radius: 999px; transition: color 0.3s, border-color 0.3s; }
.contact__copy:hover { color: var(--night-ink); border-color: var(--night-mute); }
.contact__copy.is-done { color: var(--rust); border-color: var(--rust); }
.contact__meta { margin-top: 1rem; font-size: 0.8rem; color: var(--night-mute); }
.contact__social { margin-top: 1.4rem; display: flex; gap: 0.6rem; }
.contact__icon {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.06); color: var(--night-mute);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.contact__icon:hover { background: rgba(255,255,255,0.13); color: var(--night-ink); transform: translateY(-2px); }

.contact__form-wrap { border-radius: var(--r-lg); padding: clamp(1.3rem, 3vw, 2.1rem); background: rgba(255,255,255,0.055); }
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  .contact__form-wrap { background: rgba(255,255,255,0.045); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
}
.contact__whatsapp { width: 100%; justify-content: center; background: #c6f24e; color: #14161a; }
.contact__whatsapp:hover { background: #d8ff75; color: #14161a; }
.contact__form-divider { display: flex; align-items: center; gap: 0.8rem; margin-block: 1.5rem; font-size: 0.78rem; color: var(--night-mute); }
.contact__form-divider::before, .contact__form-divider::after { content: ""; flex: 1; height: 1px; background: var(--night-line); }
.cform { display: grid; gap: 0.7rem; }
.cform__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--night-mute); }
.cform input, .cform textarea {
  width: 100%; padding: 0.8rem 0.95rem; border-radius: var(--r-sm);
  border: 1px solid var(--night-line); background: rgba(241, 233, 218, 0.05); color: var(--night-ink);
}
.cform input::placeholder, .cform textarea::placeholder { color: var(--night-mute); }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--rust); }
.cform textarea { min-height: 92px; resize: vertical; }
.cform .btn { --bg: var(--paper); --fg: var(--ink); justify-self: start; margin-top: 0.2rem; }
.cform .btn:hover { --fg: var(--paper); }
.cform__note { font-size: 0.72rem; color: var(--night-mute); }
.cform__note.is-done { color: #c6f24e; }
.cform__note.is-error { color: #ffb9ab; }
.cform button:disabled { cursor: wait; }
.cform__submit { min-width: 190px; justify-content: center; transition: background 0.25s, color 0.25s, transform 0.25s; }
.cform__submit-icon { position: relative; width: 20px; height: 20px; display: grid; place-items: center; }
.cform__spinner { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.cform__check { display: none; width: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cform__check path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.cform.is-sending .btn__arrow, .cform.is-sent .btn__arrow { display: none; }
.cform.is-sending .cform__spinner { display: block; animation: formSpin 0.75s linear infinite; }
.cform.is-sent .cform__submit { background: #c6f24e; color: #14161a; }
.cform.is-sent .cform__check { display: block; }
.cform.is-sent .cform__check path { animation: formCheck 0.4s ease-out forwards; }
@keyframes formSpin { to { transform: rotate(360deg); } }
@keyframes formCheck { to { stroke-dashoffset: 0; } }
.form-toast { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 110; max-width: min(420px, calc(100vw - 2rem)); display: grid; grid-template-columns: 34px 1fr auto; gap: 0.8rem; align-items: start; padding: 1.15rem; border-radius: 18px; border: 1px solid var(--line); background: #fff; color: var(--ink); box-shadow: 0 18px 55px rgba(0,0,0,0.18); }
.form-toast.is-visible { animation: toastIn 0.45s var(--ease-out) both; }
.form-toast__icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #c6f24e; color: #14161a; font-weight: 700; }
.form-toast.is-error .form-toast__icon { background: #ffe3dc; }
.form-toast strong { font-size: 0.95rem; }
.form-toast p { font-size: 0.82rem; line-height: 1.5; color: var(--ink-2); margin-top: 0.2rem; }
.form-toast button { font-size: 1.3rem; line-height: 1; padding: 0.2rem; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ============ 15. FOOTER ============ */
.footer { border-top: 1px solid var(--night-line); padding: 1.8rem var(--pad) 2.4rem; }
.footer__inner {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 5vw, 4rem); align-items: baseline; color: var(--night-mute);
  line-height: 1.7;
}
.footer__left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; }
.footer__mark { font-family: var(--disp); font-weight: 800; color: var(--night-ink); font-size: 0.92rem; }
.footer__meta { font-size: 0.68rem; letter-spacing: 0.04em; }
.footer__top { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; justify-self: end; }
.footer__top:hover { color: var(--night-ink); }

/* ============ 15b. CONDENSED DISPLAY — solo titulares (los statements van en Inter) ============ */
.d-1, .d-2, .d-3, .explorer__title,
.contact__title, .contact__email, .scard__name,
.nav__brand, .footer__mark {
  font-family: var(--disp); font-weight: 400; letter-spacing: var(--disp-ls);
}
.hero__title    { font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 0.96; }
.contact__title { font-size: clamp(3rem, 11.4vw, 7.9rem); line-height: 0.8; }
.explorer__title, .d-3 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 0.84; }
.d-1 { font-size: clamp(3rem, 10vw, 8rem); line-height: 0.82; }
.d-2 { font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 0.84; }
.scard__name { font-size: 1.55rem; line-height: 1; }
.nav__brand, .footer__mark { font-size: 1.02rem; letter-spacing: 0.03em; }
.rust { color: inherit; font-weight: 600; }

/* ============ 16. EFFECTS ============ */
/* Reveal: sistema de entrada al scroll — delay/dirección/distancia/duración vía custom props */
.reveal {
  --rv-x: 0px; --rv-y: 28px; --rv-dur: 0.75s;
  opacity: 1; transform: none;
  transition: opacity var(--rv-dur) var(--ease-reveal), transform var(--rv-dur) var(--ease-reveal);
  will-change: opacity, transform;
}
.is-ready .reveal:not(.is-visible):not([data-split]) { opacity: 0; transform: translate(var(--rv-x), var(--rv-y)); }
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
.reveal[data-split] { opacity: 1; transform: none; }
.reveal[data-dir="left"] { --rv-x: -14px; }
.reveal[data-dir="right"] { --rv-x: 14px; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.4s; }

/* ============ 17. RESPONSIVE ============ */
@media (max-width: 1120px) {
  .explorer__layout { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  :root { --nav-h: 54px; }
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 1.6rem); }
  .hero__glass { padding: 2.2rem 1.3rem; border-radius: 28px; gap: 1.1rem; }
  .hero__id { padding: 0.3rem 0.9rem 0.3rem 0.3rem; }
  .hero__id img { width: 30px; height: 30px; }
  .hero__id b { font-size: 0.76rem; }
  .hero__id span { font-size: 0.64rem; }
  .hero__title { font-size: clamp(1.7rem, 7vw, 2.4rem); max-width: 15ch; }
  .hero__title br { display: none; }
  .ticker__track span { font-size: 1.2rem; }
  .intro__top { grid-template-columns: 1fr; }
  .intro__photo { max-width: 140px; }
  .intro__cards { grid-template-columns: 1fr 1fr; }
  .case__head { grid-template-columns: 1fr; }
  .case__cover { max-width: 220px; }
  .case__body { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
  .recs { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 0.6rem; }
  .footer__top { justify-self: start; }

  .explorer__layout { grid-template-columns: 1fr; }
  .rail { display: none; }
  .rail-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
    position: sticky; top: calc(var(--nav-h) + 0.5rem); z-index: 20;
    padding: 0.8rem 1rem; border-radius: var(--r-sm);
    background: rgba(255,255,255,0.6); border: 1px solid var(--glass-brd);
    font-size: 0.78rem; font-weight: 600;
  }
  @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) { .rail-trigger { backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); } }
  .rail-trigger b { color: var(--rust); }
  .sheet {
    display: block;
    position: fixed; inset: 0; z-index: 90; background: var(--paper);
    padding: calc(var(--nav-h) + 1rem) var(--pad) 2rem; overflow-y: auto;
    transform: translateY(100%); transition: transform 0.42s var(--ease-out);
  }
  .sheet.is-open { transform: translateY(0); }
  .sheet__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
  .sheet__close { font-size: 0.8rem; font-weight: 600; padding: 0.4rem; }
  .sheet .rail__group { margin-top: 1.3rem; }
  .sheet .rail__item { padding-block: 0.8rem; }

  .videos.big.coverflow { width: 100%; height: min(360px, 100vw); }
  .videos.big.coverflow .vfig { height: min(360px, 100vw); }
  .videos.big.coverflow .vfig.cf-left,
  .videos.big.coverflow .vfig.cf-left:hover { transform: translateX(-80%) rotateY(22deg) scale(0.8); }
  .videos.big.coverflow .vfig.cf-right,
  .videos.big.coverflow .vfig.cf-right:hover { transform: translateX(-20%) rotateY(-22deg) scale(0.8); }
  .videos.big.coverflow--pair .vfig.cf-center,
  .videos.big.coverflow--pair .vfig.cf-center:hover { transform: translateX(-65%); }
  .videos.big.coverflow--pair .vfig.cf-right,
  .videos.big.coverflow--pair .vfig.cf-right:hover { transform: translateX(-4%) rotateY(-22deg) scale(0.75); }
  .tblock { grid-template-columns: 1fr; gap: 0.6rem; }
  .case__head { grid-template-columns: 1fr; gap: 1.4rem; }
  .split, .split.side-left { grid-template-columns: 1fr; gap: 1.2rem; }
  .split.side-left .split__media { order: 0; }
  .mblock.n3, .mblock.n4 { grid-template-columns: 1fr 1fr; }
  .mblock.posts { grid-template-columns: repeat(3, minmax(0, 210px)); }
  .vsplit { grid-template-columns: 1fr; gap: 1.4rem; }
  .case__meta { grid-template-columns: 1fr 1fr; }
  .logogrid { grid-template-columns: 1fr 1fr; }
  .minicase { grid-template-columns: 1fr 1fr; row-gap: clamp(1.4rem, 4vw, 2.4rem); }
  .minicase__head { grid-column: 1 / -1; }
  .minicase__lead { grid-column: 1 / -1; grid-row: auto; align-self: start; max-width: 220px; }
  .minicase__strip { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nav__links .nav__link:not(.nav__cta) { display: none; }
  .intro__cards { grid-template-columns: 1fr; }
  .mblock.n2, .mblock.n3, .mblock.posts { grid-template-columns: 1fr; }
  .mblock.n4 { grid-template-columns: 1fr 1fr; }
  .split__media.two { grid-template-columns: 1fr 1fr; }
  .logogrid { grid-template-columns: 1fr; }
  .minicase__strip { grid-template-columns: repeat(2, 1fr); }
}

/* ============ 18. REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .case { animation: none; }
  .hero__glow { animation: none; }
  .hero__mist { animation: none; }
  .hero__wash { animation: none; }
  .hero__grain { animation: none; }
  .hero__gridlines { animation: none; }
  .hero { animation: none; }
  .ticker__track { animation: none; }
  .reveal, .reveal.is-visible {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .intro__lead .lw { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__id, .hero__title, .hero__sub, .hero__actions { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero { position: relative !important; }
  .hero-pin { height: auto !important; --hero-runway: 0px; }
  .page-content { margin-top: 0; }
  .explorer__head--work .explorer__title::after { transition: none; transform: translateX(-50%); }
  .cform.is-sending .cform__spinner, .form-toast.is-visible { animation: none; }
  .cform.is-sent .cform__check path { animation: none; stroke-dashoffset: 0; }
}

/* Single-word greeting; the page remains usable if scripting fails. */
.welcome { position: fixed; inset: 0; z-index: 1000; background: #000; color: #fff; place-items: center; cursor: default; }
.welcome-pending .welcome[hidden] { display: grid !important; }
.welcome span { font-family: "Helvetica Neue", Arial, sans-serif; font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 400; letter-spacing: -0.045em; }
html.welcome-pending { overflow: hidden; }
.welcome-pending .hero__glass > :not(.hero__refraction) { animation-play-state: paused; }
/* Wide falloff: subdued sides, a small bright focus in the middle. */
.ticker::before, .ticker::after { width: 42%; }
.ticker::before { background: linear-gradient(90deg, var(--night) 0%, var(--night) 14%, transparent 100%); }
.ticker::after { background: linear-gradient(-90deg, var(--night) 0%, var(--night) 14%, transparent 100%); }
.ticker__track span { --spot: 0; color: #fff; opacity: calc(0.3 + var(--spot) * 0.7); text-shadow: 0 0 16px rgb(255 255 255 / calc(var(--spot) * 0.65)); }
/* Specular highlights describe a rounded, polished glass perimeter. */
.hero__glass { border-color: rgba(255,255,255,.55); box-shadow: 0 40px 90px -35px rgba(4,8,40,.55), inset 0 2px 2px rgba(255,255,255,.7), inset 2px 0 3px rgba(255,255,255,.28), inset 0 -2px 3px rgba(180,205,255,.5); }

/* Optical refinement: existing hero geometry and background motion are preserved. */
.welcome span { font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: -0.025em; }
.hero__field::after { content: ""; position: absolute; inset: 0; pointer-events: none; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); mask-image: radial-gradient(ellipse 20% 28% at 0 0, #000, transparent), radial-gradient(ellipse 20% 28% at 100% 0, #000, transparent), radial-gradient(ellipse 20% 28% at 0 100%, #000, transparent), radial-gradient(ellipse 20% 28% at 100% 100%, #000, transparent); }
.hero__glass::before { background: linear-gradient(142deg, rgba(255,255,255,.1), rgba(120,150,255,.025) 45%, rgba(180,210,255,.06)); backdrop-filter: blur(2px) saturate(1.15); -webkit-backdrop-filter: blur(2px) saturate(1.15); }
.hero__glass { box-shadow: 0 40px 90px -35px rgba(4,8,40,.5), inset 0 1px 1px rgba(255,255,255,.8), inset 2px 2px 6px rgba(215,235,255,.22), inset -2px -3px 9px rgba(5,25,85,.24); animation: glassArrival .8s cubic-bezier(.16,1,.3,1) backwards; }
.hero__glass-sheen { opacity: .28; }
.hero__refraction::after { box-shadow: inset 1px 1px 1px rgba(180,240,255,.5), inset -1px -1px 1px rgba(255,190,215,.22), inset 0 0 14px rgba(10,35,100,.12); }
.hero__id { text-decoration: none; animation-delay: .18s; }

#sobre-mi { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.hero__title, .hero__actions { animation: none; }
/* Preserve the clipping entrance while allowing Manrope descenders below its compact line box. */
.hero__line { display: block; overflow: hidden; padding-block: .08em .24em; margin-block: -.08em -.24em; }
.hero__line > span { display: block; animation: heroLineIn .75s cubic-bezier(.16,1,.3,1) .28s backwards; }
.hero__line:nth-child(2) > span { animation-delay: .37s; }
.hero__sub { animation-delay: .46s; }
.hero__actions > a { animation: heroTextIn .7s cubic-bezier(.16,1,.3,1) .55s backwards; }
.hero__actions > a:nth-child(2) { animation-delay: .64s; }
.welcome-pending .hero__glass, .welcome-pending .hero__line > span, .welcome-pending .hero__actions > a { animation-play-state: paused; }
.hero.is-entered .hero__glass, .hero.is-entered .hero__line > span, .hero.is-entered .hero__actions > a { animation: none; }
@keyframes glassArrival { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@keyframes heroLineIn { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .hero__glass, .hero__line > span, .hero__actions > a { animation: none; } }
/* Keep specular edges outside the displacement filter to avoid a second frame. */
.hero__refraction::after { content: none; }
.hero__glass::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; box-shadow: inset 1px 1px 1px rgba(180,240,255,.5), inset -1px -1px 1px rgba(255,190,215,.22), inset 0 0 14px rgba(10,35,100,.12); }

/* Final optical pass: perimeter displacement only; no additional frost. */
.hero__inner::before {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  width: var(--aura-width, 62%); height: 220px; left: 50%; top: var(--glass-bottom, 70%);
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(225,235,255,.28), rgba(225,235,255,.11) 40%, transparent 72%);
  filter: blur(36px);
}
.welcome__progress { position: absolute; top: calc(50% + 44px); left: 50%; width: 64px; height: 2px; transform: translateX(-50%); background: rgba(255,255,255,.14); overflow: hidden; }
.welcome__progress::after { content: ""; display: block; height: 100%; background: rgba(255,255,255,.8); transform-origin: left; animation: welcomeProgress 1.3s linear both; }
@keyframes welcomeProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.welcome__wave { display: inline-block; opacity: 0; transform: scale(.3); }
.welcome__wave.is-in { opacity: 1; transform: scale(1); animation: welcomeWavePop .3s cubic-bezier(.34,1.56,.64,1); }
.welcome__wave-inner { display: inline-block; transform-origin: 70% 70%; }
.welcome__wave.is-in .welcome__wave-inner { animation: welcomeWave 1.3s ease-in-out .3s 2; }
@keyframes welcomeWavePop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes welcomeWave { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-8deg); } 45% { transform: rotate(14deg); } 60% { transform: rotate(-4deg); } 75% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .welcome__progress::after, .welcome__wave.is-in, .welcome__wave.is-in .welcome__wave-inner { animation: none; } }

/* Motion layer: the approved optics and hero scroll remain untouched. */
.hero__title { font-family: "Manrope", var(--disp-hero); font-weight: 800; letter-spacing: -.055em; line-height: .94; }
.hero__glass { animation: none; }
.hero__id { animation: badgeArrival .65s cubic-bezier(.16,1,.3,1) .08s backwards; }
.hero__line > span { animation: displayLineArrival .45s cubic-bezier(.16,1,.3,1) .12s backwards; }
.hero__line:nth-child(2) > span { animation-delay: .18s; }
.hero__sub { animation-delay: .44s; }
.hero__actions > a { animation-delay: .54s; }
.hero__actions > a:nth-child(2) { animation-delay: .62s; }
@keyframes badgeArrival { from { opacity: 0; transform: translateY(12px); filter: blur(5px); } 55% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes displayLineArrival { from { opacity: 0; transform: translateY(40px); filter: blur(9px); } 50% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
.motion-cta { position: relative; overflow: hidden; }
.cta-motion { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.cta-motion__primary { display: inline-flex; align-items: center; gap: .55rem; }
.cta-motion__hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; opacity: 0; transform: translateY(130%); letter-spacing: -.015em; }
.cta-motion__primary, .cta-motion__hover { transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.motion-cta:hover { transform: none; }
.btn.motion-cta:hover { background: var(--bg); color: var(--fg); }
.btn2.motion-cta:hover { background: #0b1226; }
.btn2--ghost.motion-cta:hover { background: rgba(255,255,255,.14); }
.cform .motion-cta:hover { --fg: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .motion-cta:not(:disabled):hover .cta-motion__primary { transform: translateY(-130%); opacity: 0; }
  .motion-cta:not(:disabled):hover .cta-motion__hover { transform: translateY(0); opacity: 1; }
}
.motion-cta:focus-visible .cta-motion__primary { transform: translateY(-130%); opacity: 0; }
.motion-cta:focus-visible .cta-motion__hover { transform: translateY(0); opacity: 1; }
.cform.is-sending .cta-motion__primary, .cform.is-sent .cta-motion__primary { transform: none !important; opacity: 1 !important; }
.cform.is-sending .cta-motion__hover, .cform.is-sent .cta-motion__hover { opacity: 0 !important; }
.motion-card { position: relative; isolation: isolate; --mouse-x: 50%; --mouse-y: 50%; --tilt-axis: 1 0 0; --tilt-angle: 0deg; rotate: var(--tilt-axis) var(--tilt-angle); transition: rotate .5s cubic-bezier(.16,1,.3,1), opacity var(--rv-dur, .6s) var(--ease-reveal), transform var(--rv-dur, .6s) var(--ease-reveal); }
.motion-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; background: radial-gradient(ellipse at var(--mouse-x) var(--mouse-y), rgba(255,255,255,.23), rgba(125,165,255,.10) 30%, transparent 65%); box-shadow: inset 0 0 0 1px rgba(150,185,255,.28); transition: opacity .45s ease; }
.motion-card.is-tracking { transition-duration: .12s; transition: rotate .05s linear, opacity .12s, transform .12s; }
.motion-card.is-tracking::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__id, .hero__line > span, .hero__sub, .hero__actions > a { animation: none !important; }
  .cta-motion__primary, .cta-motion__hover { transition: none; }
  .motion-cta .cta-motion__primary { transform: none !important; opacity: 1 !important; }
  .motion-cta .cta-motion__hover { display: none; }
  .motion-card { rotate: none; }
  .motion-card::after { display: none; }
}
@media (max-width: 960px), (hover: none), (pointer: coarse) { .motion-card { rotate: none; } .motion-card::after { display: none; } }

/* Icon-only CTA hover: geometry and accessible primary labels stay fixed. */
.motion-cta { transition: background-color .4s cubic-bezier(.16,1,.3,1), color .4s ease, box-shadow .4s ease; }
.cta-motion__hover svg { display: block; width: 23px; height: 23px; flex: none; }
.btn.contact__whatsapp.motion-cta { background: #c6f24e; color: #14161a; }
@media (hover: hover) and (pointer: fine) {
  .btn.motion-cta:not(:disabled):hover, .btn2.motion-cta:not(:disabled):hover { background: #3159ed; color: #fff; }
  .btn.motion-cta--whatsapp:not(:disabled):hover, .btn2.motion-cta--whatsapp:not(:disabled):hover { background: #25d366; color: #082b17; }
}
.btn.motion-cta:focus-visible, .btn2.motion-cta:focus-visible { background: #3159ed; color: #fff; }
.btn.motion-cta--whatsapp:focus-visible, .btn2.motion-cta--whatsapp:focus-visible { background: #25d366; color: #082b17; }
.cform.is-sending .motion-cta, .cform.is-sent .motion-cta { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .motion-cta { transition: none; } }

/* 22 September: native SVG optics + restrained physical surfaces. */
.hero__refraction.native-optics { filter: none; }
.native-optics > svg { width: 100%; height: 100%; display: block; }
.hero__gridlines { animation: none; }
.hero__wash { animation-duration: 28s; }
.hero__glow--a { animation-duration: 26s; }.hero__glow--b { animation-duration: 32s; }
.hero__grain { opacity: .02; animation: grainAlive 1.8s steps(6,end) infinite; background-size: 110px 110px; }
@keyframes grainAlive { 0%,100% { transform: translate3d(0,0,0); } 20% {transform:translate3d(-8px,4px,0)} 40% {transform:translate3d(3px,-6px,0)} 60% {transform:translate3d(-4px,-2px,0)} 80% {transform:translate3d(6px,5px,0)} }
.hero__prism { position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:2px;z-index:3;overflow:hidden;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude; }
.hero__prism::before {content:"";position:absolute;width:160%;height:320%;left:-30%;top:-110%;background:conic-gradient(from 20deg,transparent 0 77%,rgba(130,210,255,0) 79%,rgba(155,218,255,.8) 81%,rgba(245,211,255,.85) 83%,rgba(255,242,194,.85) 85%,rgba(255,255,255,.95) 86%,transparent 89%);animation:prismTurn 24s linear infinite;}
@keyframes prismTurn {to{transform:rotate(360deg)}}
.hero__actions .btn2 {border:1px solid rgba(220,230,255,.5);box-shadow:inset 0 2px 2px rgba(255,255,255,.42),inset 0 -3px 7px rgba(0,0,0,.35),0 9px 15px -8px rgba(0,5,40,.65);background-image:linear-gradient(155deg,rgba(255,255,255,.22),transparent 42%,rgba(140,165,220,.10));}
.hero__actions .btn2--ghost {box-shadow:inset 0 2px 2px rgba(255,255,255,.65),inset 0 -2px 4px rgba(140,175,235,.35),0 9px 15px -10px rgba(0,5,40,.4);}
.hero__actions .btn2.motion-cta:hover {background-image:linear-gradient(155deg,rgba(255,255,255,.35),transparent 55%);}
/* Single transparent lens. Its inner optical sample is inert and clipped. */
.cursor.optical-cursor {display:block !important;position:fixed;left:0;top:0;width:124px;height:124px;z-index:100;pointer-events:none;opacity:0;border-radius:50%;border:1px solid rgba(240,248,255,.55);background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.2),transparent 37%);box-shadow:inset 3px 4px 5px rgba(255,255,255,.5),inset -4px -5px 7px rgba(20,35,65,.25),0 8px 18px rgba(0,0,0,.12);transition:opacity .16s;contain:layout paint;}
.cursor.optical-cursor.is-ready{opacity:1;}
.cursor__lens {position:absolute;inset:0;border-radius:50%;overflow:hidden;mask-image:radial-gradient(circle,#000 45%,rgba(0,0,0,.9) 66%,transparent 72%);-webkit-mask-image:radial-gradient(circle,#000 45%,rgba(0,0,0,.9) 66%,transparent 72%);}
.cursor__copy,.cursor__copy * {animation:none !important;transition:none !important;pointer-events:none !important;}
.cursor__copy {rotate:none !important;opacity:1 !important;}
.sound-toggle {position:fixed;bottom:14px;left:14px;z-index:90;width:32px;height:32px;border-radius:50%;background:rgba(240,245,255,.8);color:#26375c;border:1px solid rgba(90,120,175,.25);font-size:16px;}
/* Category dock and project bubbles reuse the existing case articles. */
.explorer__layout.has-dock {display:block;}
.project-dock {--active-category:1;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:620px;margin:0 auto 28px;padding:8px;border-radius:26px;background:linear-gradient(135deg,#262b36,#111722);color:#fff;border:1px solid #4e5564;box-shadow:inset 0 1px 0 #ffffff30,0 16px 35px #0a183520;}
.project-dock__indicator {position:absolute;left:8px;top:8px;bottom:8px;width:calc((100% - 28px)/3);border-radius:19px;background:#ffffff12;transform:translateX(calc(var(--active-category) * (100% + 6px)));transition:transform .45s cubic-bezier(.16,1,.3,1);box-shadow:inset 0 1px 1px #ffffff25;}
.project-dock button {position:relative;display:flex;align-items:center;flex-direction:column;gap:8px;padding:12px 10px;color:#bfc9d9;font-size:.78rem;white-space:nowrap;border-radius:18px;}
.project-dock button[aria-pressed=true]{color:white;}
.project-dock button[aria-pressed=true]::after{content:"";position:absolute;width:5px;height:5px;bottom:2px;border-radius:50%;background:#b4deff;box-shadow:0 0 10px #78bcff;}
.dock-object {position:relative;display:block;width:44px;height:44px;transform:rotate(-8deg);transition:transform .35s;filter:drop-shadow(3px 5px 4px #0008);}
.project-dock button:hover .dock-object{transform:rotate(2deg) translateY(-3px);}
.dock-object i {position:absolute;inset:5px 7px;border-radius:8px;background:linear-gradient(130deg,#dae9ff,#587de4 42%,#253ba0);box-shadow:inset 2px 2px 2px #fff9,inset -3px -2px 3px #102876;}
.dock-object b {position:absolute;inset:12px 2px 0 17px;border-radius:5px;background:linear-gradient(140deg,#c0e6ff,#5e9dcc 60%,#1a385f);box-shadow:inset 1px 1px 1px #fffa;}
.dock-object--brand i {border-radius:50%;background:linear-gradient(135deg,#fff4cb,#f4b951 45%,#895017);}
.dock-object--brand b {border-radius:50%;inset:18px 3px 0 19px;background:linear-gradient(135deg,#fffbd6,#f0cd84,#8d5822);}
.dock-object--film i {border-radius:7px;background:linear-gradient(140deg,#e5dbff,#917adb 40%,#43316e);}
.dock-object--film b {inset:4px 4px 29px 6px;border-radius:3px;background:repeating-linear-gradient(120deg,#eee 0 5px,#3c3550 5px 10px);}
.project-cards {display:flex;gap:16px;align-items:stretch;margin-bottom:32px;}
.project-card {position:relative;flex:1;min-width:0;overflow:hidden;border-radius:24px;text-align:left;border:1px solid #fff;background:linear-gradient(135deg,#ffffffd9,#e4edfa99);box-shadow:inset 0 1px 2px #fff,0 14px 35px #1a355619;animation:bubbleIn .5s cubic-bezier(.16,1,.3,1) var(--card-delay) backwards;}
.project-card img {display:block;width:100%;height:200px;object-fit:cover;transition:filter .3s;}
.project-card__label {display:flex;align-items:center;gap:10px;padding:20px;color:var(--ink);}
.project-card__label small{color:var(--ink-mute);font-size:.7rem;}.project-card__label strong{font-size:.95rem;line-height:1.2;flex:1;}
.project-card:hover img{filter:brightness(1.08)}
.has-project .project-cards {position:sticky;top:calc(var(--nav-h) + 10px);z-index:15;padding:8px;background:#edf1f8e8;border:1px solid #ffffffc9;border-radius:25px;}
.has-project .project-card{flex:0 1 18%;animation:none;}.has-project .project-card.is-selected{flex:1;border-color:#6a8dee;box-shadow:inset 0 0 0 1px #8bacff;}
.has-project .project-card img{height:72px;}.has-project .project-card__label{padding:12px;}.has-project .project-card:not(.is-selected) .project-card__label small{display:none;}
@keyframes bubbleIn{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.project-card:focus-visible,.project-dock button:focus-visible{outline:3px solid #5c85ff;outline-offset:3px;}
@media(max-width:700px){.project-dock{overflow-x:auto;min-width:0;grid-template-columns:repeat(3,minmax(130px,1fr));}.project-dock__indicator{display:none}.project-dock button[aria-pressed=true]{background:#ffffff14}.project-cards{gap:10px;overflow-x:auto;padding:4px 3px 18px;scroll-snap-type:x proximity}.project-card{flex:0 0 78%;scroll-snap-align:start;}.project-card img{height:160px}.has-project .project-cards{position:relative;top:auto;}.has-project .project-card,.has-project .project-card.is-selected{flex:0 0 66%;}.has-project .project-card:not(.is-selected){flex-basis:40%;}.has-project .project-card__label strong{font-size:.75rem}}
@media(hover:none),(pointer:coarse){.cursor.optical-cursor{display:none !important;}}
@media(prefers-reduced-motion:reduce){.hero__prism::before,.hero__grain,.project-card{animation:none}.project-dock__indicator,.dock-object{transition:none}.cursor.optical-cursor{display:none !important;}}

/* An opened case shares its row with the two remaining project bubbles. */
@media(min-width:1000px){
  .explorer__layout.has-dock.has-project{display:grid;grid-template-columns:minmax(0,1fr) 128px 128px;gap:16px;align-items:start;}
  .has-project .project-cards{display:contents;}
  .has-project .project-card{grid-row:1 / span 2;position:sticky;top:calc(var(--nav-h) + 16px);width:100%;}
  .has-project .project-card.is-selected{grid-row:1;grid-column:1;position:relative;top:auto;}
  .has-project .project-card:not(.is-selected){grid-column:auto;}
  .has-project .project-card:not(.is-selected) .project-card__label{padding:12px 9px;}
  .has-project .project-card:not(.is-selected) strong{font-size:.76rem;overflow-wrap:anywhere;}
  .has-project .explorer__stage{grid-row:2;grid-column:1;min-width:0;}
}
.cursor.optical-cursor.is-pressed{box-shadow:inset 3px 4px 9px #ffffff99,inset -4px -5px 12px #14234155;}

@media(max-width:700px){.project-dock,.project-cards{scrollbar-width:none;}.project-dock::-webkit-scrollbar,.project-cards::-webkit-scrollbar{display:none;}}

/* Refinement: same project card expands around the original case article. */
.project-dock{max-width:540px;padding:6px;gap:6px;margin-bottom:clamp(2.4rem, 4vw, 3.2rem);border-radius:23px;background:linear-gradient(135deg,#ffffffc9,#eaf0f8b3);border:1px solid #fff;box-shadow:inset 0 1px 1px #fff,0 8px 22px #2334530d;color:#24344e;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.project-dock button{padding:9px 8px;gap:5px;color:#536077;font-size:.73rem;}
.project-dock button[aria-pressed=true]{color:#182d51;}
.project-dock__indicator{top:6px;bottom:6px;left:6px;width:calc((100% - 24px)/3);background:#fff9;box-shadow:inset 0 1px 1px #fff,0 3px 9px #28416b0c;}
.project-dock button[aria-pressed=true]::after{background:#5074dc;box-shadow:0 0 7px #648df34d;}
.dock-object{width:38px;height:38px;}
.nav__link{color:#fff;text-shadow:0 1px 3px #10266d66;}
.nav.is-stuck .nav__inner{background:rgba(248,251,255,.74);border-color:#ffffffb8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.nav.is-stuck .nav__link{color:#26344d;text-shadow:none;}
.explorer__layout.has-dock.has-project{display:block;}
.project-cards,.has-project .project-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative;top:auto;padding:0;background:none;border:0;align-items:start;perspective:1200px;}
.project-bubble{min-width:0;border-radius:24px;border:1px solid #fff;background:linear-gradient(135deg,#fffffff0,#edf2f8e8);box-shadow:inset 0 1px 2px #fff,0 12px 30px #22395812;overflow:clip;transform-origin:50% 20%;}
.project-bubble .project-card,.has-project .project-bubble .project-card{display:block;width:100%;position:relative;top:auto;border:0;border-radius:23px;background:transparent;box-shadow:none;}
.project-bubble.is-expanded{grid-column:1;grid-row:1 / span 2;}
.project-bubble.is-expanded > .case{padding:26px;animation:caseMorphIn .5s cubic-bezier(.16,1,.3,1);}
.project-bubble.is-expanded > .project-card{border-bottom:1px solid #dfe6f0;border-radius:23px 23px 0 0;}
.project-bubble.is-expanded > .project-card img{display:none;}
@keyframes caseMorphIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.project-bubble.is-expanded > .case{animation:none;}}
.has-project .project-cards{grid-template-columns:minmax(0,1fr) 180px;grid-template-rows:auto 1fr;}
.has-project .project-bubble:not(.is-expanded){grid-column:2;position:sticky;top:calc(var(--nav-h) + 14px);}
.has-project .project-bubble:not(.is-expanded) ~ .project-bubble:not(.is-expanded){top:calc(var(--nav-h) + 230px);}
.has-project .project-card img{height:120px;}
.has-project .is-expanded .project-card img{height:105px;}
.has-project .project-card__label strong{font-size:.83rem;}
.has-project .project-card__label{min-height:60px;}
.case__blocks{perspective:1200px;}
.hero__wash{animation:refinedAmbient 24s ease-in-out infinite;animation-delay:-8s;}
.hero__glow--a{animation:heroDrift1 22s ease-in-out infinite;animation-delay:-5s;}
.hero__glow--b{animation:heroDrift2 26s ease-in-out infinite;animation-delay:-12s;}
.hero__glow--c{animation:heroDrift3 28s ease-in-out infinite;animation-delay:-6s;}
@keyframes refinedAmbient{0%,100%{transform:translate3d(-9%,-4%,0) scale(1);opacity:.7}50%{transform:translate3d(9%,6%,0) scale(1.06);opacity:1}}
.hero__glass::after{box-shadow:inset 0 2px 2px #ffffff9c,inset 2px 0 3px #e3f1ff55,inset -1px -2px 3px #e2eaff60;}
.hero__prism{padding:3px;}
.hero__prism::before{animation-duration:22s;}
.hero__actions > a{animation-name:glassButtonPop;animation-duration:.65s;animation-timing-function:cubic-bezier(.16,1,.3,1);}
@keyframes glassButtonPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:999px){.has-project .project-cards{grid-template-columns:minmax(0,1fr) 150px;}.project-bubble.is-expanded > .case{padding:18px;}}
@media(max-width:700px){
.project-dock{grid-template-columns:repeat(3,minmax(112px,1fr));}.project-dock button[aria-pressed=true]{background:#fff9;}
.project-cards{display:flex;overflow-x:auto;align-items:stretch;padding-bottom:14px;}
.project-bubble{flex:0 0 84%;scroll-snap-align:start;}.project-bubble .project-card{height:100%;}
.has-project .project-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;}
.has-project .project-bubble.is-expanded{grid-column:1 / -1;grid-row:2;order:1 !important;}
.has-project .project-bubble:not(.is-expanded){grid-column:auto;grid-row:1;position:relative;top:auto;}
.has-project .project-bubble:not(.is-expanded) ~ .project-bubble:not(.is-expanded){top:auto;}
.has-project .project-card img{height:85px;}.has-project .is-expanded .project-card img{height:105px;}
.has-project .project-card__label{padding:10px;min-height:58px;}.project-bubble.is-expanded > .case{padding:16px;}
}
@media(prefers-reduced-motion:reduce){.hero__wash,.hero__glow{animation:none;}.hero__actions > a{animation:none;}}

/* Five targeted corrections: moving grid, fixed procedural grain and staged CTA. */
.hero__grain{inset:0;animation:none;transform:none;background:none;will-change:auto;opacity:.042;pointer-events:none;}
.hero__grain canvas{display:block;width:100%;height:100%;}
.hero__particles{position:absolute;inset:0;pointer-events:none;opacity:.5;}
.hero__particles canvas{display:block;width:100%;height:100%;}
@media (prefers-reduced-motion: reduce){.hero__particles{display:none;}}
.hero__glass::after{box-shadow:inset 0 3px 3px #ffffffc9,inset 3px 0 5px #ecf7ff8c,inset -1px -3px 4px #e4edff80;}
.hero__prism{padding:6px;}
.hero__prism::before{background:conic-gradient(from 20deg,transparent 0 73%,#9adaff00 75%,#a2eaff 78%,#edc6ff 81%,#fff0be 84%,#fff 86%,#fff 88%,transparent 92%);}
.hero__actions > a{animation:glassButtonPop .65s cubic-bezier(.16,1,.3,1) 1.3s backwards;}
.hero__actions > a:nth-child(2){animation-delay:1.4s;}
@keyframes glassButtonPop{0%{opacity:0;transform:translateY(18px) scale(.8)}55%{opacity:1;transform:translateY(-3px) scale(1.05)}80%{transform:translateY(1px) scale(.99)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.hero__actions > a{animation:none;}}

.hero__sub{animation-delay:.62s;animation-duration:.44s;}
.hero__actions > a{animation-delay:1.07s;animation-duration:.36s;}
.hero__actions > a:nth-child(2){animation-delay:1.12s;}

/* Satin/chrome surface inspired by the supplied moving material reference. */
.hero__surface{
  border-radius:clamp(32px,5vw,64px);
  border-color:rgba(240,249,255,.64);
  box-shadow:0 30px 70px -42px #040e4270,0 5px 16px -10px #07144966,inset 0 1px 1px #ffffffb3,inset 0 -1px 1px #e0ecff73;
}
.hero__surface::before{
  background:linear-gradient(145deg,#ffffff0a 0%,#ffffff00 28% 76%,#d3e1fb08 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.hero__surface::after{
  inset:3px;box-shadow:inset 0 2px 1px #ffffffbf,inset 2px 0 3px #e5f3ff66,inset 0 -3px 2px #effaffb3,0 1px 1px #10245399,0 -1px 1px #10245380;
}
.hero__surface .hero__glass-sheen{
  inset:0;width:auto;height:auto;border-radius:inherit;filter:none;opacity:.65;
  background:radial-gradient(ellipse 28% 5% at 15% 0%,#b9fff799,transparent 95%),radial-gradient(ellipse 24% 5% at 80% 100%,#e5b4ff80,transparent 95%),radial-gradient(ellipse 3% 30% at 100% 30%,#fff3c466,transparent 90%);
  animation:surfaceBreath 12s ease-in-out infinite alternate;
}
.hero__surface-rim{
  position:absolute;inset:-1px;border-radius:inherit;padding:3px;z-index:2;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
.hero__surface-rim::before{
  content:"";position:absolute;width:160%;height:320%;left:-30%;top:-110%;
  background:conic-gradient(from 20deg,transparent 0 19%,#a1ffe6 22%,#91dfff 24%,#dbb3ff 26%,transparent 30% 68%,#83efff00 70%,#83efff 73%,#aba1ff 76%,#ffa6dd 79%,#ffd99e 82%,#e7ffb2 84%,#fff 85%,transparent 89%);
  animation:prismTurn 12s linear infinite;
}
@keyframes surfaceBreath{from{opacity:.42}to{opacity:.82}}
.hero__actions .btn2{
  position:relative;isolation:isolate;border:1px solid #e8f2ffb3;
  background:linear-gradient(172deg,#a0aaba 0%,#4b586f 11%,#172133 35%,#0e1729 52%,#45536b 79%,#bcc7d9 100%);
  color:#fff;text-shadow:0 1px 2px #050b17a6;
  box-shadow:inset 0 2px 2px #ffffffb3,inset 1px 0 2px #f1f8ff80,inset 0 -2px 3px #eef5ff66,0 7px 12px -6px #030b26b3;
}
.hero__actions .btn2--ghost{
  background:linear-gradient(170deg,#fff 0%,#eaf1fb 13%,#a7b6cc 40%,#e1ebf8 65%,#f6faff 81%,#899ab4 100%);
  color:#233149;text-shadow:0 1px 0 #ffffffa6;
  box-shadow:inset 0 2px 2px #fff,inset 0 -2px 3px #62728f99,0 7px 12px -7px #0311398c;
}
.hero__actions .btn2::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 10%,#90f6ff00 30%,#92ffe766 39%,#8edfff80 44%,#d4a3ff80 49%,#ffb3d570 54%,#ffe9a65c 59%,transparent 68%);
  background-size:260% 100%;animation:chromeReflection 8s ease-in-out infinite;
}
.hero__actions .btn2:nth-child(2)::before{animation-delay:-3s;}
.hero__actions .cta-motion{z-index:1;}
@keyframes chromeReflection{0%,15%{background-position:100% 0;opacity:.2}50%{opacity:.55}85%,100%{background-position:0 0;opacity:.2}}
.hero__actions .btn2.motion-cta--whatsapp:not(:disabled):hover{background:linear-gradient(170deg,#c3f9da,#39d77a 28%,#14934f 58%,#6af2a8 87%,#b2ebd0);color:#062b18;text-shadow:none;}
.hero__actions .btn2--ghost.motion-cta:not(:disabled):hover{background:linear-gradient(170deg,#e8efff,#809eff 22%,#375dce 58%,#9fb8ff 87%,#e9f0ff);color:#fff;text-shadow:0 1px 2px #163378;}
@media(prefers-reduced-motion:reduce){.hero__surface-rim::before,.hero__surface .hero__glass-sheen,.hero__actions .btn2::before{animation:none;}}

/* A narrow optical band keeps the transparent center and the foreground untouched. */
.hero__edge-lens{position:absolute;inset:1px;border-radius:inherit;z-index:0;pointer-events:none;padding:28px;
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
@supports(backdrop-filter:url("#surface-bubble")){
  .hero__edge-lens{backdrop-filter:url("#surface-bubble") blur(.65px);}
}
.hero__surface-rim{padding:4px;}
.hero__surface-rim::after{content:"";position:absolute;inset:-110% -30%;pointer-events:none;
  background:conic-gradient(from 130deg,transparent 0 42%,#d7faff80 44%,#fff 46%,#fff 47%,#ffd9ef80 49%,transparent 52% 100%);
  animation:edgeSpecular 9s linear infinite;
}
@keyframes edgeSpecular{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero__surface .hero__glass-sheen{animation-duration:6s;}
@media(prefers-reduced-motion:reduce){.hero__surface-rim::after{animation:none;}}

/* Editorial uppercase headline with an independent vertical word carousel. */
.hero__title--cycling{font-family:"Inter",Arial,sans-serif;font-weight:500;text-transform:uppercase;font-size:clamp(2rem,5.2vw,4rem);letter-spacing:-.055em;line-height:1.02;max-width:100%;width:100%;}
.hero__title--cycling .hero__line{overflow:visible;padding:0;margin:0;}
.hero__title--cycling .hero__line:nth-child(3)>span{animation-delay:.24s;}
.hero__word-window{display:inline-block;vertical-align:top;position:relative;width:11.6ch;height:1.12em;overflow:hidden;}
.hero__word-window>span{position:absolute;inset:0;white-space:nowrap;}
.hero__design-symbol{display:inline-block;position:relative;vertical-align:-.04em;width:.78em;height:.78em;margin-inline:.06em;overflow:hidden;}
.hero__design-symbol svg{position:absolute;inset:0;width:100%;height:100%;}
@media(max-width:700px){.hero__title--cycling{font-size:clamp(1.45rem,7vw,2.4rem);letter-spacing:-.055em;}}

/* Two-line title where the fixed text and rotating phrase comfortably fit. */
@media(min-width:1000px){
  .hero__title--cycling{font-size:clamp(2.6rem,4.2vw,3.65rem);}
  .hero__title--cycling .hero__line:nth-child(2),
  .hero__title--cycling .hero__line:nth-child(3){display:inline-block;vertical-align:top;}
}
@media(min-width:1000px){.hero__title--cycling .hero__word-window{text-align:left;}}

/* Center each complete phrase, including the real width of its rotating ending. */
.hero__title--cycling .hero__line--result{display:block;}
.hero__title--cycling .hero__line--result>span{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;column-gap:.23em;}
.hero__result-prefix{white-space:nowrap;}
.hero__title--cycling .hero__word-window{text-align:left;transition:width .55s cubic-bezier(.22,1,.36,1);height:1.06em;}
.hero__title--cycling + .hero__sub{margin-top:-.55rem;}
@media(prefers-reduced-motion:reduce){.hero__title--cycling .hero__word-window{transition:none;}}
@media(min-width:1000px){.hero__title--cycling .hero__line.hero__line--result{display:block;}}
@media(max-width:700px){.hero__title--cycling{font-size:clamp(1.25rem,6.3vw,2.1rem);}}

/* Soft-color project covers; original case artwork remains inside the project. */
.project-preview{display:grid;place-items:center;height:200px;width:100%;overflow:hidden;color:var(--preview-ink);background:radial-gradient(ellipse at 24% 12%,#ffffff8c,transparent 68%),linear-gradient(145deg,var(--preview-a),var(--preview-b));transform-origin:center;}
.project-preview svg{width:60px;height:60px;filter:drop-shadow(0 2px 1px #ffffff45);}
.project-card:hover .project-preview svg{transform:translateY(-2px);}
.project-preview svg{transition:transform .4s cubic-bezier(.22,1,.36,1);}
.has-project .project-preview{height:120px;}
.has-project .is-expanded .project-preview{height:105px;}
.has-project .project-preview svg{width:44px;height:44px;}
@media(max-width:700px){.project-preview{height:160px;}.has-project .project-preview{height:85px;}.has-project .is-expanded .project-preview{height:105px;}}
@media(prefers-reduced-motion:reduce){.project-preview svg{transition:none;}}

/* Animate the full card silhouette, not only its contents. */
.project-card{animation:none;}
.project-bubble{animation:cardMaterialize .8s cubic-bezier(.22,1,.36,1) var(--card-delay,0ms) both;}
.has-project .project-bubble{animation:none;}
@keyframes cardMaterialize{0%{opacity:0;transform:translateY(32px) scale(.86,.72);border-radius:65px 90px 70px 95px;filter:blur(4px)}65%{opacity:1;transform:translateY(-3px) scale(1.02,.985);border-radius:38px 26px 42px 30px;filter:blur(0)}100%{opacity:1;transform:none;border-radius:24px;filter:blur(0)}}
.project-preview svg{width:64px;height:64px;}
.nav-projects{display:flex;gap:7px;align-items:center;padding:4px 8px;border-left:1px solid #c5cede;color:#25334b;font-size:.72rem;animation:navMaterialize .55s cubic-bezier(.22,1,.36,1);}
.nav-projects select{max-width:170px;min-width:0;border:0;border-radius:14px;background:#ffffff80;color:inherit;font:inherit;padding:7px;}
.nav-projects[hidden],.project-skip[hidden]{display:none;}
.project-skip{position:fixed;right:22px;bottom:22px;z-index:48;padding:12px 17px;border:1px solid #fff;border-radius:24px;background:#edf3fbe8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 22px #20365624;color:#243453;font-size:.8rem;animation:navMaterialize .55s cubic-bezier(.22,1,.36,1);}
.project-cards{scroll-margin-top:110px;}
@keyframes navMaterialize{from{opacity:0;transform:translateY(-8px) scale(.82,.6);border-radius:50%}to{opacity:1;transform:none;border-radius:16px}}
@media(max-width:700px){.nav-projects{padding:2px 5px;}.nav-projects>span{display:none;}.nav-projects select{max-width:155px;}.project-skip{bottom:14px;right:14px;padding:10px 14px;}}
@media(prefers-reduced-motion:reduce){.project-bubble,.nav-projects,.project-skip{animation:none;}}

/* A single temporary Liquid Glass bubble carries the whole open/switch transition; the
   real cards never deform. Removed completely as soon as the transition ends. */
.glass-bubble{
  position:fixed;left:0;top:0;z-index:60;pointer-events:none;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.16) 55%,rgba(220,232,255,.22));
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -1px 3px rgba(150,175,220,.3),0 24px 48px -22px rgba(20,30,60,.35);
}
.glass-bubble::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%);
}
.glass-bubble::after{
  content:"";position:absolute;left:-6%;top:-40%;width:46%;height:220%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5) 45%,transparent 70%);
  transform:rotate(8deg);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .glass-bubble{backdrop-filter:blur(11px) saturate(1.3);-webkit-backdrop-filter:blur(11px) saturate(1.3);}
}
.glass-bubble-bridge{
  position:fixed;left:0;top:0;opacity:0;pointer-events:none;z-index:59;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.18));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -1px 2px rgba(160,180,220,.25);
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .glass-bubble-bridge{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
}
.nav-projects{animation:none;border:0;padding:0;max-width:0;opacity:0;overflow:hidden;transform:translateY(-8px) scale(.92);transform-origin:right center;pointer-events:none;transition:max-width .45s cubic-bezier(.22,1,.36,1),opacity .3s,transform .45s cubic-bezier(.22,1,.36,1);}
.nav-projects.is-visible{max-width:370px;opacity:1;transform:none;pointer-events:auto;}
.nav-projects button{flex-shrink:0;border:0;padding:7px 9px;border-radius:14px;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:pointer;}
.nav-projects button[aria-pressed=true]{background:#dce7fa;color:#193b7c;}
.has-project .project-cards{grid-template-rows:auto auto 1fr;}
.has-project .project-bubble.is-expanded{grid-row:1 / span 3;}
.project-skip{position:sticky;grid-column:2;grid-row:3;top:calc(var(--nav-h) + 445px);right:auto;bottom:auto;align-self:start;text-align:center;z-index:2;padding:11px 8px;font-size:.75rem;animation:none;}
@media(max-width:700px){
  .nav-projects{gap:0;font-size:.6rem;}
  .nav-projects.is-visible{max-width:245px;}
  .nav-projects button{padding:7px 5px;}
  .has-project .project-bubble.is-expanded{grid-row:3;}
  .project-skip{position:relative;top:auto;grid-column:1/-1;grid-row:2;justify-self:center;}
}
@media(prefers-reduced-motion:reduce){.nav-projects{transition:none;}}
/* Optical accents are confined to the temporary transition surface. */
.glass-bubble{background:linear-gradient(135deg,#ffffff38,#ffffff0a 55%,#dce8ff24);}
.glass-bubble::before{background:radial-gradient(ellipse at 4% 3%,#ffffff9c,transparent 35%),radial-gradient(ellipse at 97% 98%,#c5c6ff40,transparent 25%);box-shadow:inset 1px 1px 1px #fff9,inset -1px -1px 2px #b9e8ff99;}
.glass-bubble-bridge{clip-path:polygon(0 0,25% 30%,50% 43%,75% 30%,100% 0,100% 100%,75% 70%,50% 57%,25% 70%,0 100%);}
.project-bubble.is-glass-transition{rotate:none!important;}
.project-bubble.is-glass-transition>.case{animation:none;}

/* Floating sculpted keycaps: dimensional CSS geometry, crisp project symbols. */
.project-preview{background:radial-gradient(ellipse at 24% 10%,#ffffff17,transparent 58%),radial-gradient(ellipse at 75% 90%,var(--preview-a),transparent 70%),linear-gradient(140deg,var(--preview-a),var(--preview-b));perspective:650px;}
.project-key{position:relative;display:grid;place-items:center;width:94px;height:94px;border-radius:25px;background:linear-gradient(135deg,#fcffff,#76879c 45%,#344357 72%,#c2cedc);box-shadow:inset 1px 2px 2px #fff, inset -2px -3px 4px #25374c,9px 20px 19px -9px #0009;transform:rotateX(17deg) rotateY(-18deg) rotateZ(-9deg);transform-style:preserve-3d;}
.project-key__face{position:absolute;inset:6px 9px 16px 6px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(145deg,#fff,#dfe6ed 35%,#a2b0c1);box-shadow:inset 1px 2px 3px #fff,inset -2px -3px 5px #61728666,2px 5px 5px #192e5b88;transform:translateZ(8px);color:#253247;}
.project-key__face svg,.has-project .project-key__face svg{width:37px;height:37px;filter:none;}
.project-card:hover .project-preview svg{transform:none;}
.project-cards:not(:has(.is-expanded)) .project-key{animation:projectKeyFloat 4.8s ease-in-out infinite;}
.project-bubble:nth-child(2) .project-key{animation-delay:-1.6s;}
.project-bubble:nth-child(3) .project-key{animation-delay:-3.2s;}
.project-card:hover .project-key__face{background:linear-gradient(145deg,#fff,#eaf0f8 40%,#c0ccdc);}
.has-project .project-key{width:64px;height:64px;border-radius:18px;animation:none;}
.has-project .project-key__face{inset:4px 6px 10px 4px;border-radius:14px;}
.has-project .project-key__face svg{width:28px;height:28px;}
.has-project .is-expanded>.project-card{display:none;}
.project-bubble.is-expanded>.case{animation:none;}
@keyframes projectKeyFloat{0%,100%{transform:translateY(3px) rotateX(17deg) rotateY(-18deg) rotateZ(-9deg)}50%{transform:translateY(-6px) rotateX(12deg) rotateY(-10deg) rotateZ(-5deg)}}
@media(prefers-reduced-motion:reduce){.project-cards .project-key{animation:none!important;}}

/* Stable card measurements before changing from the category grid to a case. */
.project-cards.is-measuring-project>.project-bubble{animation:none!important;transform:none;rotate:none!important;transition:none!important;}
.project-cards.is-measuring-project>.project-bubble:not(.is-expanded){--tilt-angle:0deg!important;}
.glass-bubble,.glass-bubble-bridge{box-sizing:border-box;}
.project-text-enter{animation:projectTextEnter 1.15s cubic-bezier(.25,.65,.3,1) var(--project-enter-delay,0ms) both!important;}
@keyframes projectTextEnter{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.project-text-enter{animation:none!important;}}

/* Lightweight flat scenes, with movement confined to the category thumbnails. */
.project-preview .project-flat{width:150px;height:125px;color:#edf3ff;filter:none;overflow:visible;}
.has-project .project-preview .project-flat{width:98px;height:82px;}
.project-flat__tiles,.project-flat__orbit,.project-flat__line{transform-box:fill-box;transform-origin:center;}
.project-flat__line{opacity:.4;}
.project-cards:not(:has(.is-expanded)) .project-flat__tiles{animation:flatTiles 5s ease-in-out infinite;}
.project-cards:not(:has(.is-expanded)) .project-flat__orbit{animation:flatOrbit 4s ease-in-out infinite;}
.project-cards:not(:has(.is-expanded)) .project-flat__line{animation:flatLine 3.6s ease-in-out infinite;}
.project-flat--1 .project-flat__tiles,.project-flat--4 .project-flat__tiles{animation-delay:-1.8s!important;}
.project-flat--3 .project-flat__orbit,.project-flat--7 .project-flat__orbit{animation-delay:-2s!important;}
@keyframes flatTiles{0%,100%{transform:translateY(3px) rotate(-6deg)}50%{transform:translateY(-4px) rotate(6deg)}}
@keyframes flatOrbit{0%,100%{transform:translate(0,0);opacity:.5}50%{transform:translate(-6px,8px);opacity:1}}
@keyframes flatLine{0%,100%{transform:scaleX(.55);opacity:.25}50%{transform:scaleX(1);opacity:.65}}
.project-cards.is-measuring-project{isolation:isolate;}
.project-cards.is-measuring-project>.project-bubble:not(.is-expanded){z-index:0;}
.project-cards.is-measuring-project>.project-bubble.is-expanded{position:relative;z-index:1;}
.nav-projects.is-visible{max-width:420px;}
@media(max-width:700px){.nav-projects.is-visible{max-width:270px;}.nav-projects button{white-space:normal;line-height:1.15;}}
@media(prefers-reduced-motion:reduce){.project-flat *{animation:none!important;}}

/* Luminous horizons with a fine pixel mesh; only the light field breathes. */
.project-preview--pixel{position:relative;isolation:isolate;background:#020308;overflow:hidden;perspective:none;}
.project-preview--pixel::before{content:"";position:absolute;inset:-35%;z-index:-2;background:linear-gradient(165deg,#000 23%,#020416 37%,var(--glow-a) 52%,var(--glow-b) 65%,#fff8ed 78%);filter:blur(10px);transform:translateY(4%) rotate(-4deg);animation:previewHorizon 12s ease-in-out var(--glow-delay,0s) infinite alternate;}
.project-preview--pixel::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,#ffffff0e 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#05091916 0 1px,transparent 1px 4px);pointer-events:none;}
.project-pixel{display:grid;place-items:center;width:64px;height:64px;border:1px solid #ffffff50;border-radius:15px;background:#050815a6;color:#fff;box-shadow:0 4px 20px #0003;}
.project-preview .project-pixel svg,.has-project .project-preview .project-pixel svg{width:46px;height:46px;filter:none;transform:none;}
.has-project .project-pixel{width:48px;height:48px;border-radius:12px;}
.has-project .project-preview .project-pixel svg{width:34px;height:34px;}
.has-project .project-preview--pixel::before{animation-play-state:paused;}
@keyframes previewHorizon{from{transform:translate(-2%,5%) rotate(-7deg) scale(1.02)}to{transform:translate(3%,-5%) rotate(8deg) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.project-preview--pixel::before{animation:none;}}

/* Category voxel marks share the palette of their project previews. */
.dock-object{width:38px;height:38px;transform:perspective(180px) rotateX(14deg) rotateY(-16deg) rotateZ(-5deg);filter:drop-shadow(2px 4px 3px #0004);--voxel-face:#76b8ff;--voxel-side:#2355ad;}
.dock-object--brand{--voxel-face:#ffd17c;--voxel-side:#a35b1f;}
.dock-object--film{--voxel-face:#c2a2ff;--voxel-side:#6842ab;}
.dock-voxel{position:absolute;left:calc(var(--vx)*5px);top:calc(var(--vy)*5px);width:4px;height:4px;background:var(--voxel-face);border-top:1px solid #ffffffb3;box-shadow:1px 1px 0 var(--voxel-side),2px 2px 0 var(--voxel-side),3px 3px 0 var(--voxel-side);}
.project-dock button:hover .dock-object{transform:perspective(180px) translateY(-2px) rotateX(8deg) rotateY(-8deg) rotateZ(0deg);}
.project-preview--pixel::before{animation-duration:9s;background:radial-gradient(ellipse at 70% 85%,var(--glow-b),transparent 45%),linear-gradient(165deg,#000 23%,#030408 37%,var(--glow-a) 52%,var(--glow-b) 65%,#fff8ed 78%);will-change:transform;}
@keyframes previewHorizon{0%{transform:translate(-3%,6%) rotate(-9deg) scale(1.04)}50%{transform:translate(1%,0) rotate(-1deg) scale(1.07)}100%{transform:translate(4%,-6%) rotate(9deg) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.project-preview--pixel::before{animation:none;will-change:auto;}.dock-object{transition:none;}}

/* Stronger prismatic edge, without whitening the glass interior. */
.hero__surface-rim::before{filter:saturate(1.55) brightness(1.3);}
.hero__surface-rim::after{filter:brightness(1.35);}
.hero__surface-rim{padding:5px;}
.project-preview--pixel{perspective:650px;}
.project-preview--pixel::before{animation-duration:7.5s;filter:blur(8px) saturate(1.18);}
@keyframes previewHorizon{0%{transform:translate(-5%,10%) rotate(-13deg) scale(1.06)}50%{transform:translate(2%,-1%) rotate(0deg) scale(1.12)}100%{transform:translate(6%,-11%) rotate(13deg) scale(1.15)}}
.project-pixel{position:relative;width:78px;height:78px;border-radius:18px;transform-style:preserve-3d;transform:rotateX(25deg) rotateY(-28deg) rotateZ(-9deg);background:linear-gradient(135deg,#fff,var(--glow-b) 40%,var(--glow-a));border:1px solid #ffffffc9;box-shadow:inset 2px 3px 2px #fff,inset -3px -4px 4px #0005,4px 7px 0 var(--glow-a),8px 15px 19px #0006,0 0 26px var(--glow-a);color:#142035;animation:previewKeyFloat 5s ease-in-out var(--glow-delay,0s) infinite;}
.project-pixel::before{content:"";position:absolute;inset:5px 7px 10px 5px;border-radius:13px;background:linear-gradient(145deg,#fff 2%,var(--glow-b) 70%,#ffffff70);box-shadow:inset 1px 2px 2px #fff,2px 3px 3px #0003;transform:translateZ(3px);}
.project-preview .project-pixel svg{position:relative;transform:translateZ(5px);z-index:1;}
.has-project .project-pixel{animation:none;box-shadow:inset 1px 2px 2px #fff,3px 5px 0 var(--glow-a),0 0 16px var(--glow-a);}
@keyframes previewKeyFloat{0%,100%{transform:translateY(3px) rotateX(25deg) rotateY(-28deg) rotateZ(-9deg)}50%{transform:translateY(-5px) rotateX(20deg) rotateY(-21deg) rotateZ(-6deg)}}
@media(prefers-reduced-motion:reduce){.project-pixel{animation:none;}.project-card__summary{transition:none;}}

/* A single bottom panel expands upward; title and description stay together. */
.project-bubble .project-card,.has-project .project-bubble .project-card{padding-bottom:76px;}
.project-card__footer{position:absolute;inset:auto 0 0;z-index:3;display:block;background:linear-gradient(135deg,#f9fbfff7,#e5edf9f7);border-top:1px solid #ffffffd9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.project-card__footer .project-card__label{min-height:76px;padding:16px;}
.project-card__details{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),opacity .35s ease;}
.project-card__summary{display:block;min-height:0;overflow:hidden;padding:0 16px;font-size:.78rem;line-height:1.5;color:#3c4c65;text-align:left;}
.project-card__summary::after{content:"";display:block;height:16px;}
.project-card:focus-visible .project-card__details{grid-template-rows:1fr;opacity:1;}
@media(hover:hover){.project-card:hover .project-card__details{grid-template-rows:1fr;opacity:1;}}
.project-card__chrome{position:relative;flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;overflow:hidden;border-radius:50%;border:1px solid #f9ffff;background:linear-gradient(145deg,#fff 0%,#8c9caf 21%,#e6f1ff 39%,#fff 47%,#667588 54%,#d7e2ee 75%,#fff 91%);box-shadow:inset 0 2px 2px #fff,inset 0 -2px 3px #42526b8c,0 3px 7px #15254140;color:#162138;}
.project-card__chrome svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1;}
.project-card__chrome::after{content:"";position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 30%,#fff 48%,transparent 62%);transform:translateX(-75%);transition:transform .8s cubic-bezier(.22,1,.36,1);}
.project-card:hover .project-card__chrome::after,.project-card:focus-visible .project-card__chrome::after{transform:translateX(75%);}
.has-project .project-bubble .project-card{padding-bottom:68px;}
.has-project .project-card__footer .project-card__label{min-height:68px;padding:10px;gap:6px;}
.has-project .project-card__chrome{flex-basis:27px;width:27px;height:27px;}
.has-project .project-card__summary{padding-inline:10px;font-size:.7rem;line-height:1.35;}
@media(prefers-reduced-motion:reduce){.project-card__details,.project-card__chrome::after{transition:none;}}

/* Paint the printed symbol in the same plane as the key face. This avoids
   hover/sidebar rules pushing it behind the raised face in Safari. */
.project-pixel{transform-style:flat;isolation:isolate;}
.project-pixel::before{transform:none;z-index:0;pointer-events:none;}
.project-preview .project-pixel svg,
.has-project .project-preview .project-pixel svg,
.project-card:hover .project-preview .project-pixel svg{position:relative;z-index:1;transform:none;opacity:1;visibility:visible;}

/* Dark polished lens with a bright metal rim and moving curved reflections. */
.project-card__label strong{min-width:0;overflow-wrap:anywhere;}
.project-card__chrome{isolation:isolate;flex-shrink:0;border:2px solid transparent;
 background:radial-gradient(ellipse at 65% 28%,#6b767d,#252c31 55%,#4d565b 85%) padding-box,conic-gradient(from 25deg,#fff,#818d96 18%,#fff 30%,#dee8ed 48%,#6b747a 64%,#fff 80%,#fff) border-box;
 box-shadow:0 0 0 1px #acb7c1,inset 0 0 0 1px #ffffffb3,inset 0 2px 4px #0007,0 3px 6px #192e4b38;}
.project-card__chrome::before{content:"";position:absolute;inset:2px;border-radius:50%;z-index:0;background:radial-gradient(ellipse at 25% 85%,#ffffff9c,transparent 45%),radial-gradient(ellipse at 75% 10%,#fff9,transparent 37%);}
.project-card__chrome::after{inset:-28%;z-index:0;opacity:.85;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 14%,#ffc77780 18%,#fff 21%,#84d9ff 24%,transparent 28% 64%,#fff8 70%,transparent 76%);transform:rotate(-35deg);transition:transform 1.2s cubic-bezier(.22,1,.36,1);pointer-events:none;}
.project-card:hover .project-card__chrome::after,.project-card:focus-visible .project-card__chrome::after{transform:rotate(150deg);}
.project-card__chrome svg{display:block;position:relative;z-index:2;stroke:#89d8ff;stroke-width:3;filter:drop-shadow(0 1px 1px #07122499);}
@media(prefers-reduced-motion:reduce){.project-card__chrome::after{transition:none;}}

/* Hidden project categories must not consume the header's right-hand space. */
.nav:not(.is-stuck) .nav__links{margin-left:auto;}
.nav:not(.is-stuck) .nav-projects:not(.is-visible){position:absolute;width:0;max-width:0;overflow:hidden;}

/* Thick glass lens: a translucent center and localized spectral edge glints. */
.project-card__chrome{flex-basis:38px;width:38px;height:38px;border:2px solid transparent;
 background:radial-gradient(ellipse at 48% 17%,#f3fcff40,transparent 54%),radial-gradient(ellipse at 50% 65%,#192c365e,#52616b87 70%) padding-box,conic-gradient(from 8deg,#fff 0 12%,#a5d8eb 16%,#657985 19%,#fff 24% 43%,#d8f4ff 47%,#405968 52%,#ffe2bf 57%,#fff 62% 79%,#7e969e 85%,#fff 94%) border-box;
 background-clip:padding-box,padding-box,border-box;
 backdrop-filter:blur(2px) saturate(1.35);-webkit-backdrop-filter:blur(2px) saturate(1.35);
 box-shadow:0 0 0 1px #fafefecc,0 3px 7px #192b3a26,inset 0 1px 2px #fff,inset 0 -2px 3px #17273140;
 transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .35s,backdrop-filter .35s;}
.project-card__chrome::before{inset:3px;background:radial-gradient(ellipse at 32% 12%,#fff9,transparent 42%),radial-gradient(ellipse at 70% 90%,#dcefff45,transparent 43%);box-shadow:inset 1px 0 1px #fff5;border-radius:50%;}
.project-card__chrome::after{inset:0;border-radius:50%;background:conic-gradient(from 8deg,transparent 0 12%,#7ddfff 15%,#fff 17%,#ffc484 19%,transparent 22% 63%,#ffb596 66%,#fff 68%,#8eceff 71%,transparent 75%);padding:2px;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;transform:rotate(-20deg);opacity:.9;}
.project-card__chrome svg{width:23px;height:23px;stroke:none;filter:drop-shadow(0 0 2px #e3f6ff66);transition:filter .35s;}
.project-card:hover .project-card__chrome,.project-card:focus-visible .project-card__chrome{transform:translateY(-1px) scale(1.02);backdrop-filter:blur(3px) saturate(1.5);-webkit-backdrop-filter:blur(3px) saturate(1.5);}
.project-card:hover .project-card__chrome::after,.project-card:focus-visible .project-card__chrome::after{transform:rotate(65deg);}
.project-card:hover .project-card__chrome svg{filter:drop-shadow(0 0 3px #e3f6ff8c);}
.project-card:active .project-card__chrome{transform:scale(.97);transition-duration:.1s;}
.has-project .project-card__chrome{flex-basis:30px;width:30px;height:30px;}
.has-project .project-card__chrome svg{width:19px;height:19px;}
@media(prefers-reduced-motion:reduce){.project-card__chrome,.project-card__chrome svg{transition:none;}}

/* Optical response: localized light drift rather than a rotating ring. */
.project-card__chrome{--lens-x:38%;--lens-y:22%;--lens-rx:0deg;--lens-ry:0deg;transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,backdrop-filter .32s;}
.project-card__chrome::before{background:radial-gradient(ellipse at var(--lens-x) var(--lens-y),#ffffffb3,transparent 42%),radial-gradient(ellipse at 75% 90%,#5ecbff55,transparent 35%);animation:lensLightBreathe 6s ease-in-out infinite alternate;}
.project-card__chrome::after,.project-card:hover .project-card__chrome::after,.project-card:focus-visible .project-card__chrome::after{transform:none;background:radial-gradient(ellipse at var(--lens-x) var(--lens-y),#fff 0%,#a3efff 18%,transparent 43%),radial-gradient(ellipse at 82% 86%,#ffbb8f 0%,#f4fbff 15%,transparent 34%);transition:filter .32s;}
.project-card:hover .project-card__chrome{transform:none;}
.project-card__chrome.is-lens-hover,.project-card:focus-visible .project-card__chrome{transform:translateY(-1.5px) perspective(200px) rotateX(var(--lens-rx)) rotateY(var(--lens-ry)) scale(1.02);box-shadow:0 0 0 1px #fff,0 5px 9px #192b3a30,inset 0 1px 3px #fff,inset 0 -2px 3px #17273140;}
.project-card__chrome svg{animation:lensIconBreathe 5s ease-in-out infinite alternate;filter:drop-shadow(0 1px 1px #15245588) drop-shadow(0 0 1px #8ecfff70);}
.project-card__chrome svg path{paint-order:stroke fill;}
.project-card__chrome.is-lens-hover svg{transform:scale(1.04);filter:saturate(1.2) drop-shadow(0 0 2px #88cfff99);}
.project-card .project-card__chrome.is-lens-pressed,.project-card:active .project-card__chrome{transform:translateY(1px) scale(.975);transition-duration:.1s;box-shadow:0 0 0 1px #fff9,inset 0 2px 5px #17273166;}
.project-card__chrome.is-lens-pressed::before{background:radial-gradient(ellipse at var(--lens-x) var(--lens-y),#fff,transparent 30%);}
@keyframes lensLightBreathe{from{opacity:.62;translate:-1px 0}to{opacity:.92;translate:1px 1px}}
@keyframes lensIconBreathe{from{opacity:.94}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.project-card__chrome,.project-card__chrome svg,.project-card__chrome::before{animation:none;transition:none;}}

/* Rounded bubble with the luminous cross visually embedded beneath its surface. */
.project-card__chrome{background:radial-gradient(ellipse at 33% 17%,#ffffffa6 0%,#ffffff12 32%,transparent 53%) padding-box,radial-gradient(circle at 52% 40%,#8198aa45 12%,#263d526b 56%,#e1f6ff9c 87%,#fff 100%) padding-box,conic-gradient(from 20deg,#fff,#badbe4 20%,#fff 37%,#90a8b6 53%,#efffff 70%,#fff 100%) border-box;box-shadow:0 0 0 1px #ffffffc9,0 4px 8px #213f5726,inset 0 2px 3px #fff9,inset 0 -3px 5px #d4f5ff99;}
.project-card__chrome::before{z-index:3;inset:3px;pointer-events:none;background:radial-gradient(ellipse 48% 22% at var(--lens-x) var(--lens-y),#ffffffb3,transparent 95%),radial-gradient(ellipse 50% 16% at 60% 92%,#ffffff8c,transparent);}
.project-card__chrome svg{width:22px;height:22px;filter:saturate(1.35) brightness(1.12) drop-shadow(0 1px 1px #23456c66) drop-shadow(0 0 2px #7ddfff80);}
.project-card__chrome.is-lens-hover svg{filter:saturate(1.45) brightness(1.18) drop-shadow(0 0 3px #8be4ff99);}
.has-project .project-card__chrome svg{width:18px;height:18px;}

/* Finer rim, clearer lens and a restrained travelling reflection. */
.project-card__chrome{border-width:1px;background:radial-gradient(ellipse at 33% 17%,#ffffffad 0%,#ffffff21 32%,transparent 53%) padding-box,radial-gradient(circle at 52% 40%,#c6e1ed66 12%,#88a6ba66 56%,#e1f6ffb3 87%,#fff 100%) padding-box,conic-gradient(from 20deg,#fff,#badbe4 20%,#fff 37%,#90a8b6 53%,#efffff 70%,#fff 100%) border-box;box-shadow:0 0 0 .5px #ffffffa6,0 4px 8px #213f5726,inset 0 1px 2px #fff8,inset 0 -2px 4px #d4f5ff80;}
.project-card__chrome::after{padding:1px;}
.project-card__chrome svg{filter:saturate(1.65) brightness(1.18) drop-shadow(0 1px 1px #23456c66) drop-shadow(0 0 2px #7ddfff80);}
.project-card__chrome.is-lens-hover svg{filter:saturate(1.75) brightness(1.23) drop-shadow(0 0 3px #8be4ff99);}
.project-card__chrome::before{background:linear-gradient(115deg,transparent 35%,#fff0 42%,#ffffffa6 49%,#fff0 56%,transparent 64%),radial-gradient(ellipse 48% 22% at var(--lens-x) var(--lens-y),#ffffff80,transparent 95%);background-size:300% 100%,100% 100%;background-repeat:no-repeat;animation:lensReflectionPass 5.5s cubic-bezier(.45,0,.55,1) infinite;}
@keyframes lensReflectionPass{0%,20%{background-position:110% 0,0 0;opacity:.65}60%,100%{background-position:-110% 0,0 0;opacity:.85}}
@media(prefers-reduced-motion:reduce){.project-card__chrome::before{animation:none;background-position:110% 0,0 0;}}

/* Clearer glass with localized spectral dispersion. */
.project-card__chrome{background:radial-gradient(ellipse at 33% 17%,#ffffff73 0%,#ffffff0d 32%,transparent 53%) padding-box,radial-gradient(circle at 52% 40%,#c6e1ed21 12%,#88a6ba2e 56%,#e1f6ff73 87%,#ffffffb3 100%) padding-box,conic-gradient(from 20deg,#ffffffcc 0 13%,#8feaff 16%,#b6a0ff 19%,#ffffffcc 23% 48%,#ffd19f 53%,#ffa5ca 56%,#ffffffb3 61% 79%,#a0f6dc 83%,#ffffffcc 89%) border-box;backdrop-filter:blur(1.2px) saturate(1.25);-webkit-backdrop-filter:blur(1.2px) saturate(1.25);}
.project-card__chrome::before{background-image:linear-gradient(115deg,transparent 35%,#a3edff00 40%,#a3edff66 45%,#ffffff99 49%,#d3b4ff66 52%,#ffc8ae4d 55%,transparent 61%),radial-gradient(ellipse 48% 22% at var(--lens-x) var(--lens-y),#ffffff66,transparent 95%);}


/* Editorial expertise, retaining the page atmosphere and card pointer interaction. */
.nav__brand,.footer__mark{font-family:"Bebas Neue","Inter",sans-serif;}
#servicios{overflow:clip;}
.expertise__heading{padding-block:clamp(2rem,6vw,6rem) clamp(3rem,9vw,8rem);}
.expertise__title{display:flex;justify-content:space-between;align-items:start;gap:3vw;font-family:var(--disp);font-weight:400;font-size:clamp(4.3rem,12.6vw,11.8rem);line-height:1;letter-spacing:var(--disp-ls);margin:0;}
.expertise__title span{display:block;white-space:nowrap;}
.expertise__intro{display:grid;grid-template-columns:1fr 2fr;gap:clamp(2rem,5vw,5rem);align-items:start;margin-bottom:clamp(4rem,9vw,8rem);}
.expertise__intro>.label{padding-top:.5rem;}
.expertise__intro>p:last-child{font-size:clamp(1.1rem,1.8vw,1.6rem);line-height:1.4;letter-spacing:-.02em;max-width:40ch;}
#servicios .services{display:block;}
/* Stack: every row sticks to the same point below the nav; the next row, later in
   the DOM and with a higher z-index, physically slides up over the previous one and
   covers it with its own solid background — no fade, the cover IS the transition. */
#servicios .scard{
  display:grid;grid-template-columns:65px minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,3vw,3rem);align-items:start;
  padding:clamp(1.8rem,3.4vw,2.8rem);border-radius:var(--r);margin-bottom:0;
  position:sticky;top:calc(var(--nav-h) + 14px);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 22px 42px -28px rgba(20,30,60,.28);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  #servicios .scard{backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);}
}
#servicios .scard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from 180deg,#ffd9a0,#ffb3c6,#c9b8ff,#9adaff,#b8f3d6,#ffd9a0);
  opacity:.4;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
#servicios .scard:nth-of-type(1){z-index:1;}
#servicios .scard:nth-of-type(2){z-index:2;}
#servicios .scard:nth-of-type(3){z-index:3;}
#servicios .scard:nth-of-type(4){z-index:4;}
#servicios .scard:nth-of-type(5){z-index:5;}
#servicios .scard__num{padding-top:.6rem;color:var(--ink-mute);font-weight:500;}
#servicios .scard__name{font-size:clamp(2.1rem,3.6vw,3.7rem);line-height:1.04;letter-spacing:-.02em;font-weight:400;max-width:15ch;}
#servicios .scard__lead{font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.5;margin-bottom:1rem;}
#servicios .scard__line{font-size:.95rem;line-height:1.7;color:var(--ink-mute);}
#servicios .expertise__intro{transform:translate3d(0,var(--expertise-offset,0px),0);opacity:var(--expertise-opacity,1);}
@media(prefers-reduced-motion:reduce){#servicios .scard{position:relative;top:auto;}}
.expertise__heading{--expertise-progress:1;}
.expertise__title span:first-child{transform:translateX(calc((1 - var(--expertise-progress,1)) * -40vw));}
.expertise__title span:last-child{transform:translateX(calc((1 - var(--expertise-progress,1)) * 40vw));}
#servicios .tools{margin-top:2.2rem;}
@media(max-width:999px){.expertise__title{font-size:12vw;}#servicios .scard{grid-template-columns:38px minmax(0,1fr) minmax(0,1.15fr);gap:1.4rem;}.expertise__intro{grid-template-columns:1fr 2fr;}}
@media(max-width:700px){.expertise__title{display:block;font-size:clamp(4rem,19vw,8rem);line-height:1.02;}.expertise__title span:last-child{text-align:right;}.expertise__intro{grid-template-columns:1fr;gap:1.5rem;margin-bottom:3rem;}.expertise__intro>p:last-child{font-size:1.25rem;}#servicios .scard{grid-template-columns:1fr;gap:1rem;padding-block:2.5rem;}#servicios .scard__num{padding-top:0;}#servicios .scard__name{font-size:2.5rem;max-width:none;}}
@media(prefers-reduced-motion:reduce){#servicios [data-expertise-scroll]{transform:none;}}