/* =========================================================
   MORENODEV — Alpine Editorial
   Aesthetic: deep ink + warm bone + electric lime
   ========================================================= */

/* Bricolage Grotesque (display) and Inter Tight (body) load via Google Fonts in index.html */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: optional;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* LIGHT MODE — default */
  --ink: #f5f1e8;
  --ink-2: #ede9dc;
  --surface: #ffffff;
  --surface-2: #f0ece3;
  --bone: #0d0d10;
  --bone-muted: #3d3d4a;
  --muted: #55555f;
  --border: #ddd8cc;
  --border-soft: #e8e3d6;
  --accent: #9e3e07;
  --accent-soft: #9e3e0714;
  --accent-glow: #9e3e0730;
  --warn: #d63b1f;
  --success: #008a5e;
  --nav-blur: rgba(245, 241, 232, 0.88);

  /* Type */
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body: 'Inter Tight', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --wrap: 1280px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-y: clamp(5rem, 12vw, 9rem);
  --radius: 18px;
  --radius-sm: 10px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* Shadows — light mode */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 4px 14px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 16px 56px rgba(0,0,0,0.13), 0 4px 16px rgba(0,0,0,0.07);
}

/* DARK MODE */
[data-theme="dark"] {
  --ink: #0b0b0e;
  --ink-2: #14141a;
  --surface: #1a1a22;
  --surface-2: #22222c;
  --bone: #f5f1e8;
  --bone-muted: #c8c4ba;
  --muted: #909099;
  --border: #2a2a34;
  --border-soft: #1f1f28;
  --accent: #d4ff3a;
  --accent-soft: #d4ff3a22;
  --accent-glow: #d4ff3a55;
  --warn: #ff5a3c;
  --success: #3affb0;
  --nav-blur: rgba(11, 11, 14, 0.78);

  /* Shadows — dark mode */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 56px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.30);
}

/* Smooth theme transition */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease !important;
}

/* =================== RESET =================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }

body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--bone);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* =================== GRAIN OVERLAY =================== */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  mix-blend-mode: overlay;
}
[data-theme="dark"] .grain {
  opacity: 0.05;
}
.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* =================== CUSTOM CURSOR =================== */
.cursor, .cursor-dot {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  transition: transform 0.2s var(--ease), opacity 0.2s, background 0.2s;
  mix-blend-mode: normal;
  will-change: transform;
}
[data-theme="dark"] .cursor,
[data-theme="dark"] .cursor-dot { mix-blend-mode: difference; }
.cursor {
  width: 32px; height: 32px;
  border: 1px solid var(--bone);
  transform: translate(-50%, -50%);
}
.cursor-dot {
  width: 4px; height: 4px;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.cursor.is-hover { transform: translate(-50%, -50%) scale(1.8); background: var(--accent); border-color: var(--accent); }
@media (hover: none), (max-width: 900px) { .cursor, .cursor-dot { display: none; } }

/* =================== NAVIGATION =================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px var(--gutter);
  transition: background 0.4s var(--ease), backdrop-filter 0.4s, padding 0.4s var(--ease);
}
.nav.is-scrolled {
  background: var(--nav-blur);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  position: relative; z-index: 100;
}
.nav__logo {
  display: flex; align-items: center; gap: 10px;
}
.logo-badge { display: block; flex-shrink: 0; }
.logo-badge--lg { display: block; }
.logo-ghost { stroke-opacity: 0.38; }
[data-theme="dark"] .logo-ghost { stroke-opacity: 0.18; }
.logo-text { line-height: 1; }
.logo-brand {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  color: var(--bone);
}
.logo-suffix {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  font-size: 0.9rem;
  color: var(--bone-muted);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s;
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: 1rem; }

/* ── Theme toggle ── */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--bone);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--surface-2); transform: rotate(20deg); }
.theme-toggle svg { width: 16px; height: 16px; }
/* show sun in dark mode, moon in light mode */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.lang__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 4px; border-radius: 999px;
  transition: all 0.25s var(--ease);
  opacity: 0.5;
  cursor: pointer;
}
.lang__btn .flag {
  display: block;
  width: 22px; height: 22px;
  border-radius: 50%;
  transition: transform 0.25s var(--ease);
}
.lang__btn:hover { opacity: 0.85; }
.lang__btn:hover .flag { transform: scale(1.08); }
.lang__btn.is-active { opacity: 1; }
.lang__btn.is-active .flag {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 3px var(--surface);
  transform: scale(1.05);
}

.nav__burger { display: none; width: 36px; height: 36px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--bone); transition: transform 0.3s, opacity 0.3s; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.nav__mobile {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--ink);
  padding: 80px var(--gutter) 2rem;
  display: flex; flex-direction: column; gap: 1.4rem;
  font-family: var(--f-display); font-size: 1.8rem; font-weight: 400;
  transform: translateY(-100%); opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.3s;
  pointer-events: none;
  z-index: 99;
  border-bottom: 1px solid var(--border);
}
.nav__mobile.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav__mobile a:not(.btn) { color: var(--bone); border-bottom: 1px solid var(--border-soft); padding-bottom: 0.8rem; transition: color 0.2s; }
.nav__mobile a:not(.btn):hover { color: var(--accent); }
.nav__mobile .btn { margin-top: 1rem; align-self: flex-start; font-family: var(--f-body); font-size: 0.95rem; font-weight: 500; }
.theme-toggle--mobile { width: auto; border-radius: 999px; padding: 0.6rem 1.2rem; gap: 0.5rem; margin-top: 0.5rem; align-self: flex-start; }
.theme-toggle--mobile span { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; color: var(--bone); }

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px;
  font-size: 0.94rem;
  font-weight: 500;
  border-radius: 999px;
  letter-spacing: -0.015em;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), color 0.2s, box-shadow 0.3s, background 0.2s;
  position: relative;
  overflow: hidden;
}
.btn--primary {
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn--primary:hover {
  background: var(--bone);
  box-shadow: 0 12px 40px -12px var(--accent-glow);
  transform: translate3d(0, -2px, 0);
}
.btn--ghost {
  background: transparent;
  color: var(--bone);
  border: 1.5px solid var(--bone-muted);
}
.btn--ghost:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}
.btn--lg { padding: 16px 28px; font-size: 1rem; }
.btn--full { width: 100%; }

/* =================== HERO =================== */
.hero {
  position: relative;
  min-height: 100vh;
  /* padding-top is just nav clearance + a tiny editorial gap. Content
     pinned to flex-start so it appears immediately under the nav, not
     vertically centered in the viewport. */
  padding: clamp(8rem, 14vh, 10rem) var(--gutter) 3rem;
  display: flex; flex-direction: column; justify-content: flex-start;
  overflow: hidden;
}

.hero__bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hero__mesh {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(180, 83, 9, 0.13), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(214, 59, 31, 0.09), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(180, 83, 9, 0.07), transparent 50%);
  filter: blur(60px);
  animation: drift 20s ease-in-out infinite;
  will-change: transform;
}
[data-theme="dark"] .hero__mesh {
  background:
    radial-gradient(circle at 20% 30%, rgba(212, 255, 58, 0.18), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(255, 90, 60, 0.12), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(212, 255, 58, 0.08), transparent 50%);
}
@keyframes drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(2%, -3%) scale(1.05); }
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.07) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 100% 55% at 50% 28%, black 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 100% 55% at 50% 28%, black 15%, transparent 70%);
  opacity: 0.5;
}
[data-theme="dark"] .hero__grid {
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  opacity: 0.4;
}

/* Mapa topográfico alpino — curvas de nivel */
.hero__topo {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 50%, black 35%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 50%, black 35%, transparent 95%);
}
.hero__topo svg { width: 100%; height: 100%; display: block; }

/* Estrellas — cielo sutil */
.hero__topo .stars circle {
  fill: var(--bone);
  opacity: 0.45;
}
.hero__topo .stars .twinkle {
  animation: starTwinkle 5s ease-in-out infinite;
}
.hero__topo .stars .twinkle:nth-of-type(2) { animation-delay: -1.5s; }
.hero__topo .stars .twinkle:nth-of-type(3) { animation-delay: -3s; }
.hero__topo .stars .twinkle:nth-of-type(4) { animation-delay: -2.2s; }
.hero__topo .stars .twinkle:nth-of-type(5) { animation-delay: -4s; }
@keyframes starTwinkle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* Parallax sutil de las estrellas */
.hero__topo .stars {
  transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -3px), 0);
  transition: transform 0.7s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

/* Silueta de montañas casi imperceptible */
.hero__topo .silhouette {
  fill: var(--bone);
  fill-opacity: 0.04;
  stroke: var(--bone);
  stroke-opacity: 0.14;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* Estrellas fugaces que cruzan el cielo con tiempos y ángulos escalonados
   para que casi siempre haya una en pantalla sin parecer lluvia de meteoros */
.hero__shoot {
  position: absolute;
  width: 90px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 255, 58, 0.85) 80%, var(--accent) 100%);
  filter: drop-shadow(0 0 6px var(--accent));
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  left: -10%;
}
.hero__shoot--a {
  top: 8%;
  width: 95px;
  animation: shoot-a 11s linear infinite;
  animation-delay: 0s;
}
.hero__shoot--b {
  top: 22%;
  width: 70px;
  animation: shoot-b 14s linear infinite;
  animation-delay: 4s;
}
.hero__shoot--c {
  top: 5%;
  width: 110px;
  animation: shoot-c 9s linear infinite;
  animation-delay: 6s;
}
.hero__shoot--d {
  top: 18%;
  width: 60px;
  animation: shoot-d 12s linear infinite;
  animation-delay: 2s;
}
.hero__shoot--e {
  top: 14%;
  width: 100px;
  animation: shoot-e 15s linear infinite;
  animation-delay: 9s;
}
/* RTL: vienen del lado derecho. Gradiente invertido (cabeza ahora a la
   izquierda, donde apunta el movimiento). Ángulo negativo = inclinación
   espejo respecto a las LTR. */
.hero__shoot--rtl {
  background: linear-gradient(270deg, transparent 0%, rgba(212, 255, 58, 0.85) 80%, var(--accent) 100%);
  left: auto;
  right: -10%;
}
.hero__shoot--f {
  top: 6%;
  width: 85px;
  animation: shoot-f 13s linear infinite;
  animation-delay: 5s;
}
.hero__shoot--g {
  top: 10%;
  width: 65px;
  animation: shoot-g 10s linear infinite;
  animation-delay: 8s;
}
/* Caída empinada: ángulo grande, entra desde arriba, recorrido más corto */
.hero__shoot--h {
  top: 4%;
  width: 50px;
  animation: shoot-h 16s linear infinite;
  animation-delay: 11s;
}
[data-theme="light"] .hero__shoot {
  background: linear-gradient(90deg, transparent 0%, rgba(180, 83, 9, 0.55) 80%, var(--accent) 100%);
  filter: drop-shadow(0 0 4px rgba(180, 83, 9, 0.5));
}
/* RTL override AFTER the general light rule above so it wins on source
   order at equal specificity (both selectors are attr+class = 0,0,2,0).
   Without this, light-mode RTL stars inherited the 90deg gradient and
   their bright head landed on the trailing side, looking backwards. */
[data-theme="light"] .hero__shoot--rtl {
  background: linear-gradient(270deg, transparent 0%, rgba(180, 83, 9, 0.55) 80%, var(--accent) 100%);
}
/* Cada estrella con un ángulo distinto y motion vector que coincide con
   ese ángulo. Fórmula: dy_vw = dx_vw × tan(rotación). Al usar vw en
   ambos ejes, la pendiente del recorrido es independiente del aspect
   ratio del viewport, así que la trayectoria visual respeta siempre la
   inclinación de la línea. */
@keyframes shoot-a {
  0%   { transform: rotate(12deg) translate3d(0, 0, 0); opacity: 0; }
  3%   { opacity: 0.95; }
  28%  { opacity: 0.95; }
  35%  { transform: rotate(12deg) translate3d(125vw, 27vw, 0); opacity: 0; }
  100% { transform: rotate(12deg) translate3d(125vw, 27vw, 0); opacity: 0; }
}
@keyframes shoot-b {
  0%   { transform: rotate(8deg) translate3d(0, 0, 0); opacity: 0; }
  4%   { opacity: 0.85; }
  24%  { opacity: 0.85; }
  30%  { transform: rotate(8deg) translate3d(130vw, 18vw, 0); opacity: 0; }
  100% { transform: rotate(8deg) translate3d(130vw, 18vw, 0); opacity: 0; }
}
@keyframes shoot-c {
  0%   { transform: rotate(15deg) translate3d(0, 0, 0); opacity: 0; }
  5%   { opacity: 0.9; }
  32%  { opacity: 0.9; }
  40%  { transform: rotate(15deg) translate3d(125vw, 33vw, 0); opacity: 0; }
  100% { transform: rotate(15deg) translate3d(125vw, 33vw, 0); opacity: 0; }
}
@keyframes shoot-d {
  0%   { transform: rotate(16deg) translate3d(0, 0, 0); opacity: 0; }
  4%   { opacity: 0.8; }
  22%  { opacity: 0.8; }
  28%  { transform: rotate(16deg) translate3d(115vw, 33vw, 0); opacity: 0; }
  100% { transform: rotate(16deg) translate3d(115vw, 33vw, 0); opacity: 0; }
}
@keyframes shoot-e {
  0%   { transform: rotate(14deg) translate3d(0, 0, 0); opacity: 0; }
  3%   { opacity: 0.95; }
  26%  { opacity: 0.95; }
  32%  { transform: rotate(14deg) translate3d(130vw, 32vw, 0); opacity: 0; }
  100% { transform: rotate(14deg) translate3d(130vw, 32vw, 0); opacity: 0; }
}
/* Estrellas que vienen de la derecha. Motion diagonal real con AMBOS
   ejes en vw, así el ángulo del recorrido es independiente del aspect
   ratio del viewport (en móvil portrait vw y vh son muy distintos y
   mezclarlos rompía el ángulo). dy = dx * tan(rotación), ambos vw. */
@keyframes shoot-f {
  0%   { transform: rotate(-10deg) translate3d(0, 0, 0); opacity: 0; }
  4%   { opacity: 0.85; }
  26%  { opacity: 0.85; }
  32%  { transform: rotate(-10deg) translate3d(-120vw, 21vw, 0); opacity: 0; }
  100% { transform: rotate(-10deg) translate3d(-120vw, 21vw, 0); opacity: 0; }
}
@keyframes shoot-g {
  0%   { transform: rotate(-13deg) translate3d(0, 0, 0); opacity: 0; }
  5%   { opacity: 0.9; }
  30%  { opacity: 0.9; }
  38%  { transform: rotate(-13deg) translate3d(-115vw, 27vw, 0); opacity: 0; }
  100% { transform: rotate(-13deg) translate3d(-115vw, 27vw, 0); opacity: 0; }
}
/* H es la más inclinada pero también moderada (18°). Los meteoros
   reales se ven con ángulos planos porque la distancia los aplana
   visualmente; ángulos >20° empiezan a parecer un objeto en caída
   libre, no un meteoro cruzando el cielo. */
@keyframes shoot-h {
  0%   { transform: rotate(18deg) translate3d(0, 0, 0); opacity: 0; }
  4%   { opacity: 0.85; }
  20%  { opacity: 0.85; }
  26%  { transform: rotate(18deg) translate3d(90vw, 29vw, 0); opacity: 0; }
  100% { transform: rotate(18deg) translate3d(90vw, 29vw, 0); opacity: 0; }
}

/* Drift horizontal lento de la silueta de montañas para un movimiento
   de fondo continuo, ±1% en 60s. Imperceptible aislado, da sensación de
   vida cuando la mirada está en el cielo. */
.hero__topo .silhouette {
  animation: silhouette-drift 60s ease-in-out infinite;
  transform-origin: 50% 100%;
  will-change: transform;
}
@keyframes silhouette-drift {
  0%, 100% { transform: translate3d(-0.6%, 0, 0); }
  50%      { transform: translate3d(0.6%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__shoot { animation: none; opacity: 0; }
  .hero__topo .silhouette { animation: none; }
}

/* Light mode: invertir tonos para que sigan siendo sutiles sobre fondo claro */
[data-theme="light"] .hero__topo .stars circle { fill: rgba(11, 11, 14, 0.45); }
[data-theme="light"] .hero__topo .silhouette {
  fill: rgba(11, 11, 14, 1);
  fill-opacity: 0.04;
  stroke: rgba(11, 11, 14, 1);
  stroke-opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
  .hero__topo .stars .twinkle { animation: none; }
  .hero__topo .stars { transform: none; transition: none; }
}


.hero__inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
  z-index: 1;
  padding-bottom: 5rem;
}

/* Swiss-made stamp: editorial, premium feel */
.hero__stamp {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: 1.1rem;
}
.hero__stamp .swiss-flag {
  display: inline-flex;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(255, 90, 60, 0.35));
}
.hero__stamp .swiss-flag svg { width: 16px; height: 16px; }

/* Hero profile avatar — circular portrait on its own row, right-aligned,
   sitting above the swissmade stamp / title. Same layout on desktop and
   mobile so the visual hierarchy stays consistent. */
.hero__avatar {
  display: block;
  position: relative;
  width: 200px;
  height: 200px;
  margin: 1.25rem 0 0.75rem auto;
  border-radius: 50%;
  overflow: visible;
  background: var(--surface);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}
.hero__avatar picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--accent);
  box-shadow: 0 22px 56px -14px var(--accent-glow), 0 4px 12px rgba(0,0,0,0.22);
  transition: inherit;
}
.hero__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.hero__avatar:hover { transform: translateY(-3px) rotate(-2deg); }
.hero__avatar:hover picture {
  box-shadow: 0 28px 68px -14px var(--accent-glow), 0 6px 16px rgba(0,0,0,0.28);
}
.hero__avatar-dot {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  background: var(--accent);
  border: 4px solid var(--ink);
  border-radius: 50%;
  z-index: 2;
}
.hero__avatar-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pulse 2s ease-out infinite;
}

/* Desktop: avatar floats absolute on the right with a generous top
   offset, so the text (stamp + title + sub + CTA) starts at the very
   top of hero__inner while the photo sits visibly lower. Stamp/title
   width clamped to avoid overlapping the avatar column. */
@media (min-width: 900px) {
  .hero__avatar {
    position: absolute;
    top: 3.25rem;
    right: 0;
    margin: 0;
  }
  .hero__stamp,
  .hero__title,
  .hero__sub,
  .hero__cta {
    max-width: calc(100% - 240px);
  }
}

@media (max-width: 899px) {
  .hero__avatar {
    width: 120px;
    height: 120px;
    margin-bottom: 1.75rem;
  }
  .hero__avatar picture { border-width: 2px; }
  .hero__avatar-dot {
    width: 16px;
    height: 16px;
    bottom: 6px;
    right: 6px;
    border-width: 3px;
  }
  .hero__avatar-dot::after { inset: -3px; border-width: 1.5px; }
}
@media (max-width: 480px) {
  .hero__avatar {
    width: 96px;
    height: 96px;
    margin-bottom: 1.5rem;
  }
}

.dot-pulse {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  position: relative;
  display: inline-block;
}
.dot-pulse::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: pulse 2s ease-out infinite;
}
.dot-pulse--small { width: 6px; height: 6px; }
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

.hero__title {
  font-family: var(--f-display);
  font-weight: 380;
  font-size: clamp(2.3rem, 7vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.042em;
  margin-bottom: 1.75rem;
}
.hero__title span { display: block; }
.hero__italic {
  font-style: italic;
  font-weight: 400;
  padding-left: clamp(1rem, 5vw, 4rem);
}
.hero__accent { color: var(--accent); }

.hero__sub {
  max-width: 580px;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--bone-muted);
  margin-bottom: 2.5rem;
  line-height: 1.47;
  letter-spacing: -0.012em;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4rem; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.75rem;
  margin-top: 4rem;
  max-width: 900px;
}
.stat {
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  position: relative;
}
/* Stat structure: big NUMBER + UNIT on top, clear sentence-case LABEL
   underneath and a small mono SUB-caption. Reads "what" then "why" in
   one glance — was the opposite before. */
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 3.8vw, 3rem);
  font-weight: 380;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--bone);
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.stat__num-value {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.stat__num-prefix,
.stat__num-unit {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--bone-muted);
  text-transform: none;
}
.stat__label {
  font-family: var(--f-body);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--bone);
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 0;
}
.stat__sub {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0.25rem 0 0;
}

/* =================== MARQUEE =================== */
.marquee {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background: var(--ink-2);
}
.marquee__track {
  display: flex; gap: 2rem;
  white-space: nowrap;
  animation: scroll 30s linear infinite;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--bone-muted);
  letter-spacing: 0.08em;
  will-change: transform;
}
.marquee__track span:nth-child(odd) { color: var(--accent); }
@keyframes scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* =================== SECTIONS =================== */
.section {
  padding: var(--section-y) var(--gutter);
  max-width: var(--wrap);
  margin: 0 auto;
  position: relative;
}
.section--lazy {
  /* content-visibility removed: interfered with first-tap interactivity
     of buttons/links inside lazy sections (delay before paint = lost clicks) */
}
.section--alt {
  max-width: none;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 30%, var(--ink-2) 70%, var(--ink) 100%);
  box-shadow: inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border);
}
.section--alt .section__head,
.section--alt .pricing,
.section--alt .testimonials,
.section--alt .faq,
.section--alt .maintenance {
  max-width: var(--wrap); margin-left: auto; margin-right: auto;
}

.section__head { margin-bottom: clamp(3rem, 6vw, 5rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}
.eyebrow__num { color: var(--muted); }
.eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
}

.section__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 1000px;
}
.section__title span { display: block; }
.section__title .italic {
  font-style: italic; font-weight: 400;
  padding-left: clamp(1rem, 4vw, 3rem);
}
.section__title .accent { color: var(--accent); }

.section__sub {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  color: var(--bone-muted);
  max-width: 600px;
}

/* =================== BENTO (services) =================== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.bento__card {
  grid-column: span 3;
  position: relative;
  padding: clamp(1.1rem, 1.8vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
  overflow: hidden;
  min-height: 180px;
  display: flex; flex-direction: column;
}
.bento__card:hover {
  border-color: var(--accent);
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--shadow-md);
}
.bento__card--lg { grid-column: span 4; min-height: 260px; }
.bento__card--wide { grid-column: span 6; }
.bento__card--lg + .bento__card { grid-column: span 2; }

.bento__num {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 0.9rem;
  letter-spacing: 0.1em;
}
.bento__title {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 500;
  margin-bottom: 0.6rem;
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.bento__desc {
  color: var(--bone-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.9rem;
}
.bento__list { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.bento__list li {
  font-size: 0.85rem;
  color: var(--bone-muted);
  padding-left: 18px;
  position: relative;
}
.bento__list li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--accent);
}

.tag {
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
  padding: 4px 10px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* Bento decorative visuals */
.bento__visual {
  margin-top: 1rem;
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.browser {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
.browser__bar {
  display: flex; gap: 6px;
  padding: 10px 12px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--border);
}
.browser__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.browser__bar span:first-child { background: var(--warn); }
.browser__bar span:nth-child(2) { background: #d4a574; }
.browser__bar span:nth-child(3) { background: var(--accent); }
.browser__content { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.bar { height: 7px; background: var(--surface); border-radius: 2px; }
.bar--w70 { width: 70%; }
.bar--w50 { width: 50%; }
.bar--w90 { width: 90%; }
.bar--accent { background: var(--accent); height: 20px; width: 35%; border-radius: 999px; margin-top: 4px; }
.bar-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px; }
.bar-grid > div { aspect-ratio: 2.4; background: var(--surface); border-radius: 4px; }
.bar-grid > div:nth-child(2) { background: var(--accent-soft); }

.flow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: auto 0;
  padding: 0.5rem 0;
}
.flow__node {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--ink);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  transition: all 0.3s;
}
.flow__node.accent { background: var(--accent); color: var(--ink); border-color: var(--accent); animation: rotate 6s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
.flow__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  position: relative;
}
.flow__line::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  top: -2.5px;
  animation: travel 2s ease-in-out infinite;
}
@keyframes travel {
  from { left: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

/* AI Integration: chat bubbles mockup */
.ai-chat {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
}
.ai-chat__msg {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-chat__msg--user { justify-content: flex-start; }
.ai-chat__msg--bot  { justify-content: flex-end; }
.ai-chat__avatar {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
}
.ai-chat__bubble {
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--ink);
  border: 1px solid var(--border);
  color: var(--bone-muted);
  letter-spacing: 0.01em;
  max-width: 88%;
}
.ai-chat__msg--bot .ai-chat__bubble {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="light"] .ai-chat__bubble {
  background: var(--surface-2);
}

/* CRM: mini dashboard de KPIs */
.crm-mini {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.crm-mini__kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 6px;
}
.crm-mini__num {
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.crm-mini__num small {
  font-size: 0.65em;
  margin-left: 1px;
  font-weight: 400;
}
.crm-mini__label {
  font-family: var(--f-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
[data-theme="light"] .crm-mini { background: var(--surface-2); }
[data-theme="light"] .crm-mini__kpi { background: var(--surface); }

.maint { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: auto; }
.maint__item {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--f-mono);
  font-size: 1.1rem;
  font-weight: 500;
}
.maint__item span { color: var(--accent); font-size: 1.4rem; }
.maint__item small { font-size: 0.7rem; color: var(--muted); margin-left: 4px; }

/* =================== PRICING =================== */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 3rem;
}
.price-card {
  position: relative;
  padding: 2.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.price-card:hover { border-color: var(--bone-muted); box-shadow: var(--shadow-md); }
.price-card--featured {
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: var(--accent);
  transform: translate3d(0, -12px, 0);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent), 0 30px 80px -20px var(--accent-glow);
}
.price-card--featured:hover { border-color: var(--accent); transform: translate3d(0, -16px, 0); }
.price-card__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--ink);
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.price-card__name {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.price-card__tag {
  margin-top: 0.4rem;
  color: var(--bone-muted);
  font-size: 0.88rem;
}
.price-card__price {
  margin: 1.5rem 0;
  display: flex; align-items: baseline; gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
}
.price-card__amount {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}
.price-card--featured .price-card__amount { color: var(--accent); }
.price-card__amount--from { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.price-card__amount--from span { font-family: var(--f-body); font-size: 0.7em; color: var(--muted); margin-right: 6px; font-style: italic; }
.price-card__cur {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--bone-muted);
  letter-spacing: 0.05em;
}
.price-card__list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 2rem;
  flex: 1;
}
.price-card__list li {
  font-size: 0.92rem;
  color: var(--bone-muted);
  padding-left: 22px;
  position: relative;
  line-height: 1.4;
}
.price-card__list li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--accent);
  font-weight: 600;
}
.price-card__list li strong { color: var(--bone); font-weight: 500; }
.price-card__includes {
  color: var(--accent) !important;
  font-size: 0.8rem !important;
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-left: 0 !important;
  margin-bottom: 2px;
}
.price-card__includes::before { display: none !important; }

/* Value pill for bundled extras */
.price-card__bonus {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  vertical-align: 1px;
  white-space: nowrap;
}

/* Total savings summary at bottom of featured plan */
.price-card__savings {
  margin: -0.5rem 0 1.4rem;
  padding: 0.7rem 0.9rem;
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--bone);
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.price-card__savings strong {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
}

.maintenance {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.6rem 2rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.maintenance__icon {
  font-size: 3rem;
  color: var(--accent);
  font-family: var(--f-display);
  font-style: italic;
  line-height: 0.8;
}
.maintenance h3 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 4px;
}
.maintenance p { color: var(--bone-muted); font-size: 0.9rem; }
.maintenance__note {
  margin-top: 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.7rem !important;
  color: var(--muted) !important;
  letter-spacing: 0.02em;
}

/* =================== PROJECTS =================== */
.projects { display: flex; flex-direction: column; gap: 4rem; }

/* All projects CTA — large card after the 3 featured projects */
.projects__all {
  display: block;
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.75rem, 5vw, 4rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 520ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color 520ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              background 520ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 520ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.projects__all::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 100% 0%, var(--accent-soft), transparent 55%);
  opacity: 0;
  transition: opacity 520ms ease;
  pointer-events: none;
}
.projects__all:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 24px 60px -28px var(--accent-glow);
}
.projects__all:hover::before { opacity: 1; }

.projects__all-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.projects__all-text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.projects__all-eyebrow {
  font-family: var(--f-mono, 'JetBrains Mono'), monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.projects__all-title {
  font-family: var(--f-display, 'Bricolage Grotesque'), serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.05;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.projects__all-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 8vw, 80px);
  height: clamp(56px, 8vw, 80px);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent);
  transition: transform 520ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              background 520ms ease,
              color 520ms ease;
}
.projects__all-arrow svg { width: 32%; height: 32%; }
.projects__all:hover .projects__all-arrow {
  transform: translateX(6px) rotate(-4deg);
  background: var(--accent);
  color: var(--surface);
}
@media (max-width: 640px) {
  .projects__all-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .projects__all-arrow { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .projects__all, .projects__all-arrow, .projects__all::before { transition: none; }
  .projects__all:hover { transform: none; }
  .projects__all:hover .projects__all-arrow { transform: none; }
}
.project {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem 3rem;
  align-items: center;
  position: relative;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.project--reverse { grid-template-columns: 1fr 1.1fr; }
.project--reverse .project__visual { order: 2; }
.project--reverse .project__meta { order: 1; }

/* Project header strip — index + category, sits above visual+meta */
.project__header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.project__index {
  color: var(--accent);
  font-weight: 500;
}
.project__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--bone-muted);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.project__header .project__cat {
  margin: 0 0 0 auto;
}
.project--featured .project__header { margin-bottom: 1.2rem; }

.project__visual {
  position: relative;
}
.browser-frame {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  transform: perspective(1200px) rotateY(-5deg) rotateX(1.5deg);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
  /* dark mode: glow blanco difuso */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    0 20px 60px -10px rgba(255,255,255,0.08),
    0 40px 80px -20px rgba(0,0,0,0.6);
}
[data-theme="light"] .browser-frame {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.12),
    0 20px 60px -10px rgba(0,0,0,0.12),
    0 40px 80px -20px rgba(0,0,0,0.18);
}
.project--reverse .browser-frame {
  transform: perspective(1200px) rotateY(5deg) rotateX(1.5deg);
}
.project:hover .browser-frame {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}
.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #1a1a1f;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.browser-frame__dots { display: flex; gap: 5px; flex-shrink: 0; }
.browser-frame__dots span { width: 10px; height: 10px; border-radius: 50%; }
.browser-frame__dots span:nth-child(1) { background: #ff5f57; }
.browser-frame__dots span:nth-child(2) { background: #febc2e; }
.browser-frame__dots span:nth-child(3) { background: #28c840; }
.browser-frame__url {
  flex: 1;
  height: 20px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.35);
  overflow: hidden;
  white-space: nowrap;
}
.browser-frame__screen { overflow: hidden; line-height: 0; }
.browser-frame__screen a { display: block; line-height: 0; }
.browser-frame__screen img { width: 100%; height: auto; display: block; }

.project__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.2rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.project__link:hover { border-color: var(--accent); }

/* ---- Featured project (Ginda) ---- */
.project--featured { display: block; }

/* ---- Ginda featured collage ---- */
.project__collage {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 2rem;
}

.collage__stack {
  flex: 1 1 auto;
  min-width: 0;
}

.collage__maps {
  flex: 0 0 clamp(140px, 16%, 195px);
  padding-left: 1.25rem;
  align-self: center;
}

/* accent "+" badges */
.collage__plus {
  flex-shrink: 0;
  align-self: center;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 900;
  font-family: var(--f-mono);
  box-shadow: 0 0 0 3px var(--ink), 0 4px 16px var(--accent-glow);
  line-height: 1;
  z-index: 5;
}

/* App stack: capturas apiladas en diagonal con rotación auto */
.app-stack {
  position: relative;
  padding-bottom: 72%;
}

.app-stack__card {
  position: absolute;
  width: 84%;
  transform-origin: top left;
  will-change: top, left, transform;
}

/* Posiciones iniciales para 4 cards (JS recalcula y centra según N) */
.app-stack__card--d { top: 15%; left: 14%; z-index: 1; }
.app-stack__card--c { top: 10%; left: 10%; z-index: 2; }
.app-stack__card--b { top:  5%; left:  6%; z-index: 3; }
.app-stack__card--a { top:  0;  left:  2%; z-index: 4; }

/* Each card's screen lets the image dictate its own height via width/height
   attrs on <img>. No forced aspect-ratio = no letterbox / black bars. */
.app-stack__card .browser-frame__screen { overflow: hidden; }
.app-stack__card .browser-frame__screen a { display: block; line-height: 0; }
.app-stack__card .browser-frame__screen img {
  width: 100%;
  height: auto;
  display: block;
}

/* Includes strip */
.project__includes {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
[data-theme="dark"] .project__includes {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.project__includes-col {
  flex: 1;
  min-width: 0;
}

.project__includes-label {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.project__includes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.project__includes-chips span {
  font-size: 0.7rem;
  font-family: var(--f-mono);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--bone-muted);
}
[data-theme="dark"] .project__includes-chips span {
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.65);
}

.project__includes-sep {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 900;
  font-family: var(--f-mono);
  box-shadow: 0 0 0 3px var(--ink), 0 4px 12px var(--accent-glow);
  line-height: 1;
}

.browser-frame--flat {
  transform: none !important;
  box-shadow: 0 8px 32px -6px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.10);
}
[data-theme="dark"] .browser-frame--flat {
  box-shadow: 0 8px 32px -6px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
}

.project__meta--featured {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}

.project__meta--featured .project__desc { margin-bottom: 0; }

.project__meta-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}


/* Mock Google Maps */
.mock-maps {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 28px -6px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.10);
  font-family: 'Google Sans', Arial, sans-serif;
}
[data-theme="dark"] .mock-maps {
  box-shadow: 0 8px 28px -6px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.1);
}

.mock-maps__map {
  height: 100px;
  position: relative;
  overflow: hidden;
  background: #e8f0e4;
}

.mock-maps__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mock-maps__pin {
  position: absolute;
  top: 38%;
  left: 44%;
  width: 14px;
  height: 18px;
  transform: translateX(-50%);
  z-index: 2;
}

.mock-maps__pin::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 14px;
  height: 14px;
  background: #ea4335;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 8px rgba(234,67,53,0.6);
}

.mock-maps__pin::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}

.mock-maps__info {
  padding: 8px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mock-maps__logo {
  display: none;
}

.mock-maps__name {
  font-size: 11px;
  font-weight: 600;
  color: #202124;
  line-height: 1.2;
}

.mock-maps__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

.mock-maps__score {
  font-size: 10px;
  font-weight: 700;
  color: #202124;
}

.mock-maps__stars {
  font-size: 9px;
  color: #fbbc04;
  letter-spacing: -1px;
}

.mock-maps__count {
  font-size: 9px;
  color: #70757a;
}

.mock-maps__type {
  font-size: 9px;
  color: #70757a;
  margin-top: 1px;
}

.mock-maps__reviews {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #e8eaed;
}

.mock-maps__review {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mock-maps__rev-name {
  font-size: 8px;
  font-weight: 600;
  color: #202124;
}

.mock-maps__rev-stars {
  font-size: 7px;
  color: #fbbc04;
}

.mock-maps__rev-text {
  font-size: 7.5px;
  color: #5f6368;
  line-height: 1.3;
  font-style: italic;
}

.mock-site {
  width: 100%;
  background: #f5f1e8;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
  transition: transform 0.6s var(--ease);
}
.project:hover .mock-site { transform: perspective(1000px) rotateY(-2deg) rotateX(0deg); }
.mock-site--cold { background: #f0f4f8; }
.mock-site--mint { background: #f4f9f5; }
.mock-site__nav { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.mock-site__nav span { width: 18px; height: 4px; background: rgba(0,0,0,0.2); border-radius: 2px; }
.mock-site__hero { padding: 24px 20px 16px; }
.mock-site__hero--centered { text-align: center; }
.mock-site__title { font-family: var(--f-display); font-style: italic; font-size: 1.4rem; color: #1a1a1a; font-weight: 500; }
.mock-site__sub { font-size: 0.7rem; color: rgba(0,0,0,0.5); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }
.mock-site__bar { height: 6px; background: rgba(0,0,0,0.08); width: 60%; margin-top: 10px; border-radius: 2px; }
.mock-site__btn {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  background: #1a1a1a;
  color: var(--accent);
  font-size: 0.7rem;
  border-radius: 999px;
  font-weight: 500;
}
.mock-site__btn--alt { background: #1a3d2a; color: white; }
.mock-site--cold .mock-site__btn { background: #1a2a3d; color: white; }
.mock-site__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 0 20px 20px; }
.mock-site__grid > div { aspect-ratio: 1; background: rgba(0,0,0,0.06); border-radius: 4px; }
.mock-site--warm .mock-site__grid > div:nth-child(2) { background: #d4a574; }
.mock-site__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 20px 20px; }
.mock-site__gallery > div { aspect-ratio: 16/9; background: rgba(0,0,0,0.08); border-radius: 4px; }
.mock-site__gallery > div:nth-child(2) { background: #1a2a3d; }
.mock-site__cal {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  padding: 0 20px 20px;
}
.mock-site__cal > div { aspect-ratio: 1; background: rgba(0,0,0,0.06); border-radius: 4px; }
.mock-site__cal > div.active { background: var(--accent); }

.project__cat {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}
.project__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 420;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  line-height: 1.05;
}
.project__desc { color: var(--bone-muted); margin-bottom: 1.6rem; }
.project__metrics { display: flex; gap: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.project__metrics > div { display: flex; flex-direction: column; gap: 4px; }
.project__metrics strong {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.project__metrics span { font-family: var(--f-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }

/* =================== ABOUT =================== */
.section--about { max-width: var(--wrap); }
.about {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.about__visual {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 480px;
}
.about__photo {
  width: 100%; height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.about__photo svg { width: 100%; height: 100%; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.about__photo-tag {
  position: absolute;
  bottom: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 18px;
  padding: 6px 14px 6px 10px;
  background: rgba(11,11,14,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: #f5f1e8;
}
.about__sticker {
  position: absolute;
  bottom: -28px; right: -28px;
  width: 110px; height: 110px;
  background: var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: transform 0.6s var(--ease);
  box-shadow: 0 20px 60px -10px var(--accent-glow);
}
.about__sticker svg { width: 100%; height: 100%; }

/* About hobbies — two overlapping polaroid-style photos
   replacing the old single profile photo. */
.about__hobbies {
  position: relative;
  width: 100%;
  height: 100%;
}
.about__hobby {
  position: absolute;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 700ms var(--ease), box-shadow 700ms var(--ease);
}
.about__hobby img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.about__hobby figcaption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(11,11,14,0.78);
  backdrop-filter: blur(8px);
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f5f1e8;
  width: max-content;
  max-width: calc(100% - 20px);
}
.about__hobby-num { color: var(--accent); font-weight: 600; }
.about__hobby-label { flex: 1; }

/* Mountain top-RIGHT (Miguel is on the right of that photo, so the right
   edge stays uncovered). Kayak bottom-LEFT (Miguel is centered in that
   photo, so the left/center stays clear). They only overlap in the
   middle diagonal where neither face is visible. */
.about__hobby--mountain {
  top: 0;
  right: 0;
  width: 58%;
  aspect-ratio: 3/4;
  transform: rotate(2.5deg);
  z-index: 1;
}
.about__hobby--kayak {
  bottom: 0;
  left: 0;
  width: 56%;
  aspect-ratio: 3/4;
  transform: rotate(-3deg);
  z-index: 2;
}

.about__visual:hover .about__hobby--mountain {
  transform: rotate(4deg) translate(8px, -6px);
}
.about__visual:hover .about__hobby--kayak {
  transform: rotate(-5deg) translate(-8px, 6px);
}

/* Pink/rose pulsing dot for the Online · CET tag — contrast with the
   lime-green rotating Swiss Quality sticker so both elements pop. */
.about__hobby-tag .dot-pulse {
  background: #ff6b9d;
}
.about__hobby-tag .dot-pulse::after {
  border-color: #ff6b9d;
}

/* Online tag — now floating on top of the hobby composition */
.about__hobby-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 14px 6px 10px;
  background: rgba(11,11,14,0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: #f5f1e8;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .about__hobby--mountain { width: 62%; }
  .about__hobby--kayak { width: 60%; }
}
@media (max-width: 640px) {
  .about__hobby figcaption { font-size: 0.55rem; padding: 4px 8px; }
  .about__hobby-tag { font-size: 0.62rem; padding: 5px 12px 5px 8px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .about__hobby, .hero__avatar, .hero__avatar picture { transition: none; }
}

.about__lead {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 400;
  line-height: 1.45;
  margin: 1.5rem 0;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.about__body {
  color: var(--bone-muted);
  margin-bottom: 2.5rem;
  max-width: 540px;
}
.about__values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.value__num {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.value h3 {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 6px 0 6px;
}
.value p { font-size: 0.85rem; color: var(--bone-muted); }

/* =================== TESTIMONIALS =================== */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.testimonial {
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 1.2rem;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.testimonial:hover { transform: translate3d(0, -4px, 0); border-color: var(--bone-muted); box-shadow: var(--shadow-md); }
.stars { color: var(--accent); font-size: 1rem; letter-spacing: 4px; }
.testimonial blockquote {
  font-family: var(--f-display);
  font-size: 1.05rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--bone);
  letter-spacing: -0.005em;
  flex: 1;
}
.testimonial figcaption {
  display: flex; align-items: center; gap: 12px;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.testimonial figcaption strong {
  display: block;
  font-weight: 500;
  font-size: 0.92rem;
}
.testimonial figcaption span {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}
.avatar--1 { background: linear-gradient(135deg, #d4ff3a, #a8cc2c); }
.avatar--2 { background: linear-gradient(135deg, #ff5a3c, #c84628); }
.avatar--3 { background: linear-gradient(135deg, #f4f1e8, #c8c4ba); }
.avatar--4 { background: linear-gradient(135deg, #3affb0, #2bd690); }
.avatar--5 { background: linear-gradient(135deg, #d4a574, #a87f50); }
.avatar--6 { background: linear-gradient(135deg, #b08fff, #8064cc); }

/* =================== PROCESS =================== */
.process {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
  position: relative;
}
.process::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 10%, var(--border) 90%, transparent);
  z-index: 0;
}
.process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 1;
}
.process__num {
  width: 48px; height: 48px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.process__step h3 {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 8px;
}
.process__step p { font-size: 0.88rem; color: var(--bone-muted); margin-bottom: 1rem; }
.process__time {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 4px;
}

/* =================== FAQ =================== */
.faq {
  display: flex; flex-direction: column;
  gap: 8px;
  max-width: 900px;
  margin: 0 auto;
}
.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.faq__item:hover { border-color: var(--bone-muted); box-shadow: var(--shadow-md); }
.faq__item[open] {
  border-color: var(--accent);
  background: var(--surface-2);
}
.faq__item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.6rem;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s, background 0.3s;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--accent); color: var(--ink); }
/* FAQ body: always laid out so JS can measure & animate height.
   This overrides the <details> UA rule that hides non-open content
   via display: none. The [open] rule provides the settled "auto"
   height for after the JS-driven transition. */
.faq__item > .faq__body {
  display: block;
  overflow: hidden;
  height: 0;
  transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq__item[open] > .faq__body {
  height: auto;
}
.faq__body p {
  padding: 0 1.6rem 1.4rem;
  color: var(--bone-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 700px;
}

/* =================== CONTACT =================== */
.section--contact { max-width: var(--wrap); }
.contact {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contact__lead {
  font-family: var(--f-display);
  font-size: 1.2rem;
  color: var(--bone);
  margin: 1.5rem 0 2.5rem;
  font-weight: 400;
  line-height: 1.45;
}
.contact__channels { display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.contact__channels li {
  display: flex; align-items: center; gap: 14px;
  font-size: 1rem;
  color: var(--bone);
}
.contact__channels a:hover { color: var(--accent); }
.contact__icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
}

.contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 2.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.field { display: flex; flex-direction: column; gap: 6px; }
fieldset.field { border: none; padding: 0; margin: 0; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  float: none;
  padding: 0;
  width: auto;
}
.field input, .field textarea {
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: var(--f-body);
  transition: border-color 0.25s, background 0.25s;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--ink-2);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
.chips input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.chips label {
  font-family: var(--f-body);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bone-muted);
  padding: 8px 14px;
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.chips label:hover { border-color: var(--bone-muted); color: var(--bone); }
.chips input[type="radio"]:checked + label {
  background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 500;
}
.contact__form button { grid-column: 1 / -1; margin-top: 0.5rem; }
.contact__honeypot { display: none; }
.contact__success {
  display: none;
  grid-column: 1 / -1;
  padding: 1.25rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}

/* =================== FOOTER =================== */
.footer {
  padding: 5rem var(--gutter) 2rem;
  border-top: 1px solid var(--border);
  background: var(--ink-2);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}
.footer__top {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding-bottom: 4rem;
}
.footer__brand { display: flex; flex-direction: column; gap: 1.5rem; }
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.footer__logo .logo-text {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}
.footer__logo .logo-brand { color: var(--bone); }
.footer__logo .logo-suffix { color: var(--accent); }
.footer__claim {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.footer__claim span { display: block; }
.footer__claim .italic { font-style: italic; padding-left: 1rem; }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.footer__cols h3 {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.footer__cols a {
  display: block;
  font-size: 0.92rem;
  color: var(--bone-muted);
  padding: 4px 0;
  transition: color 0.2s;
}
.footer__cols a:hover { color: var(--accent); }
.footer__bottom {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.footer__made {
  display: inline-flex; align-items: center; gap: 8px;
}
.footer__made .swiss-flag { display: inline-flex; }

/* =================== REVEAL ANIMATIONS =================== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Hero is above the fold from the first paint. The default reveal
   (opacity 0 + translateY 20px → fade-and-slide-up) made the text
   appear to "drop in" on every reload, which the user perceived as
   the text being cut on load. Disable the entry animation only for
   hero content so it shows up at its final position immediately. */
.hero .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* =================== MOBILE / RESPONSIVE =================== */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento__card { grid-column: span 2; }
  .bento__card--lg { grid-column: span 4; min-height: 360px; }
  .bento__card--wide { grid-column: span 4; }
  .bento__card--lg + .bento__card { grid-column: span 2; }
  .pricing { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .price-card--featured { transform: none; }
  .testimonials { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr 1fr; }
  .process::before { display: none; }
  .project, .project--reverse { grid-template-columns: 1fr; gap: 2rem; }
  /* Mobile: title/meta comes before the image so visitors read what it is
     before they scroll past the screenshot */
  .project__header { order: 0; }
  .project__meta { order: 1; }
  .project__visual { order: 2; aspect-ratio: auto; }
  /* Featured project uses block layout on desktop, but on mobile we flex
     it so we can re-order header → meta → collage → includes */
  .project--featured {
    display: flex;
    flex-direction: column;
    /* Override .project { align-items: center } del base, para que los
       hijos (header, meta, collage, includes) se estiren al 100% en vez
       de encogerse a su contenido. Era el motivo de que las capturas
       de Ginda salieran estrechas. */
    align-items: stretch;
  }
  .project--featured .project__header { order: 0; }
  .project--featured .project__meta { order: 1; }
  .project--featured .project__collage { order: 2; }
  .project--featured .project__includes { order: 3; }
  .about { grid-template-columns: 1fr; }
  .about__visual { max-width: 360px; }
  .contact { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 640px) {
  /* Compactación general en móvil: secciones algo más cortas y márgenes
     más apretados para que no sienta tanto el scroll. */
  :root {
    --section-y: clamp(3.5rem, 10vw, 6rem);
  }
  .hero__title { font-size: clamp(2.2rem, 12vw, 3.6rem); margin-bottom: 1.5rem; }
  .hero__italic { padding-left: 1.2rem; }
  .hero__stamp { font-size: 0.58rem; letter-spacing: 0.12em; margin-bottom: 1.5rem; }
  .hero__sub { margin-bottom: 1.8rem; }
  .hero__cta { margin-bottom: 2.5rem; }
  .hero__stats { grid-template-columns: 1fr 1fr; gap: 0; padding-top: 1.5rem; }
  .stat { padding: 1.2rem 1rem; border-bottom: 1px solid var(--border); }
  .stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-last-child(-n+2) { border-bottom: none; }
  .bento, .testimonials, .process { grid-template-columns: 1fr; }
  .bento__card, .bento__card--lg, .bento__card--wide, .bento__card--lg + .bento__card { grid-column: span 1; min-height: 200px; }
  .contact__form { grid-template-columns: 1fr; padding: 1.6rem; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__bottom { font-size: 0.7rem; }
  /* About values: compact inline number + heading on mobile.
     En vez de 3 bloques verticales largos, número en pequeño a la izquierda
     y heading + descripción en la columna principal. */
  .about__values {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 1.5rem;
  }
  .value {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 2px;
  }
  .value__num { grid-row: 1; align-self: center; font-size: 0.65rem; }
  .value h3 { grid-row: 1; grid-column: 2; margin: 0; font-size: 1rem; }
  .value p { grid-column: 2; font-size: 0.82rem; }

  /* Maintenance box en móvil: ∞ a la izquierda y el título a su derecha
     en dos líneas (rompe natural en "Monatliche Wartung: / 49 CHF / Monat"
     porque la columna es estrecha). La descripción y la nota van debajo
     ocupando todo el ancho. Truco: display:contents en el wrapper interno
     para que sus hijos (h3, p, note) participen en el grid del padre. */
  .maintenance {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    row-gap: 0.5rem;
    align-items: start;
    padding: 1.2rem 1.3rem;
  }
  .maintenance > div { display: contents; }
  .maintenance__icon {
    grid-row: 1; grid-column: 1;
    align-self: center;
    font-size: 2.4rem;
    line-height: 1;
  }
  .maintenance h3 {
    grid-row: 1; grid-column: 2;
    align-self: center;
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 0;
    text-wrap: balance;
  }
  .maintenance > div > p {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0.2rem 0 0;
  }
  .maintenance__note {
    grid-column: 1 / -1;
    font-size: 0.68rem !important;
    line-height: 1.45;
  }

  /* Savings strip dentro de la card Business: era flex horizontal con
     "Inkludierte Extras im Wert von" a la izquierda y "600 CHF" a la
     derecha. En móvil el texto largo y el CHF no caben juntos. Apilo. */
  .price-card__savings {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0.75rem 0.9rem;
  }
  .price-card__savings strong { font-size: 1.05rem; }
  .price-card { padding: 1.8rem; }
  .section__title .italic { padding-left: 1rem; }
  .nav__inner { gap: 0.5rem; }
  .lang { display: none; }
  .nav__mobile .lang { display: inline-flex; align-self: flex-start; }
  .project__collage {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  .collage__stack {
    flex: none;
    width: 100%;
  }
  /* Maps card sube a 92% para que pegue visualmente con el stack y otros
     proyectos, en vez de quedar pequeño centrado. Mantiene leve rotación
     editorial pero sin perder presencia. */
  .collage__maps {
    flex: none;
    padding-left: 0;
    margin-top: 0;
    width: 92%;
    align-self: center;
    transform: rotate(-1.2deg);
  }
  .collage__plus {
    align-self: center;
    margin-top: 0 !important;
  }
  .project__includes { flex-direction: column; gap: 1rem; padding: 0.9rem 1rem; }
  .project__includes-sep { align-self: flex-start; }
  .project__meta--featured { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .project__meta-aside { align-items: flex-start; }

  /* Stack del featured project en móvil: la card al frente ocupa el
     ancho completo del contenedor (igual que el resto de proyectos),
     y las back cards se mantienen detrás peeking ligeramente por
     debajo gracias a stepTop + scale + rotation. stepLeft = 0 para
     no salirse horizontalmente. padding-bottom 80% acomoda la card
     más alta + el offset vertical de las back cards sin que se
     desborde. */
  .app-stack__card { width: 100%; }
  .app-stack { padding-bottom: 80%; overflow: hidden; }

  /* Maps card: acortar verticalmente. Mostramos solo una review en vez
     de dos, mapa algo más bajo y padding interno más apretado. */
  .mock-maps__map { height: 78px; }
  .mock-maps__info { padding: 6px 9px 6px; gap: 2px; }
  .mock-maps__reviews { gap: 0; margin-top: 4px; padding-top: 4px; }
  .mock-maps__review:nth-of-type(2) { display: none; }

  /* Process steps: en móvil reorganizo cada card en layout horizontal
     (número a la izquierda centrado vertical, título + descripción +
     time pill apilados a la derecha). Mucho más compacto sin perder
     información: ahorra ~40% de altura por card. */
  .process__step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.9rem;
    row-gap: 4px;
    padding: 1rem 1.1rem;
  }
  .process__num {
    grid-row: 1 / span 3;
    align-self: center;
    width: 38px; height: 38px;
    font-size: 0.78rem;
    margin-bottom: 0;
  }
  .process__step h3 {
    grid-row: 1; grid-column: 2;
    font-size: 1.02rem;
    margin: 0;
  }
  .process__step p {
    grid-row: 2; grid-column: 2;
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0;
  }
  .process__time {
    grid-row: 3; grid-column: 2;
    margin-top: 0.4rem;
    justify-self: start;
    align-self: start;
    font-size: 0.65rem;
    padding: 3px 6px;
  }
}

/* =================== REDUCED MOTION =================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =================== TOUCH-DEVICE FIXES ===================
   Prevents the "I have to tap twice" bug on iOS / Android.
   Issue 1: :hover styles with transforms fire on first tap; the second
            tap is what actually triggers the click. Solution: disable
            hover-driven transforms when the device has no real hover.
   Issue 2: 300ms tap delay on iOS for double-tap-to-zoom. Solution:
            touch-action: manipulation on interactive elements.
*/
a, button, summary, [role="button"], .btn, label, input, textarea, select {
  touch-action: manipulation;
}

@media (hover: none) {
  .btn:hover,
  .btn--primary:hover,
  .btn--ghost:hover,
  .bento__card:hover,
  .price-card:hover,
  .price-card--featured:hover,
  .project:hover .browser-frame,
  .project:hover .mock-site,
  .testimonial:hover,
  .theme-toggle:hover,
  .lang__btn:hover .flag,
  .faq__item:hover,
  .browser-frame:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }
}

/* =================== ALL PROJECTS PAGE =================== */
/* Hero of /projects.html: editorial intro */
.page-allprojects { background: var(--ink); color: var(--bone); }

.allprojects-hero {
  position: relative;
  padding-top: clamp(7rem, 14vw, 11rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
  padding-left: clamp(1.25rem, 5vw, 3rem);
  padding-right: clamp(1.25rem, 5vw, 3rem);
  max-width: 1480px;
  margin: 0 auto;
  isolation: isolate;
}
.allprojects-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 20% 10%, var(--accent-soft), transparent 60%),
    radial-gradient(40% 40% at 80% 90%, var(--accent-soft), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}
.allprojects-hero__inner {
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.allprojects-hero__title {
  font-family: var(--f-display, 'Bricolage Grotesque'), serif;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0;
}
.allprojects-hero__title .italic.accent {
  display: block;
  font-style: italic;
  color: var(--accent);
}
.allprojects-hero__intro {
  font-family: var(--f-body, 'Inter Tight'), sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
  margin: 0;
}

.allprojects-back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  font-family: var(--f-mono, 'JetBrains Mono'), monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--muted);
  padding: 0.5rem 0;
  transition: color 320ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform 320ms ease;
}
.allprojects-back:hover {
  color: var(--accent);
  transform: translateX(-3px);
}

.allprojects-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
}
.allprojects-back--bottom {
  align-self: center;
}

#allprojects.section {
  padding-top: 0;
}

@media (max-width: 640px) {
  .allprojects-footer { flex-direction: column; align-items: stretch; }
  .allprojects-footer .btn { width: 100%; justify-content: center; }
  .allprojects-back--bottom { text-align: center; }
}