/* Generado por web/build.mjs desde web/css/. No editar aquí. */
/* ── fuentes.css ── */
/* Fuentes servidas desde la propia web (subconjunto latino). Generado desde Google Fonts. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/anton-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/jetbrains-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/jetbrains-mono-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fuentes/outfit-300-700.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;
}
/* Caveat solo con las letras del saludo («Hola, soy» / «Hi, I’m») */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/caveat-600-saludo.woff2) format('woff2');
  unicode-range: U+20, U+27, U+2c, U+48-49, U+61, U+69, U+6c-6d, U+6f, U+73, U+79, U+2019;
}

/* ── tokens.css ── */
/* =============================================================================
   Sistema de diseño · tokens
   Marca: magenta Samuel sobre tinta oscura (solo tema oscuro).
   Cada «agente» tiene su color; todos con contraste AA sobre su fondo.
   ========================================================================== */

:root {
  /* Tipografía */
  --fuente: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala tipográfica fluida (móvil → escritorio) */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --t-2xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --t-3xl: clamp(3rem, 1.8rem + 6vw, 7.5rem);

  /* Espaciado (base 4 px) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-24: 6rem;
  --e-32: 8rem;

  --gutter: max(16px, 4vw);
  --ancho: 1200px;
  --radio-s: 8px;
  --radio: 16px;
  --radio-l: 28px;

  /* Movimiento */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);      /* salida suave */
  --curva-muelle: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-c: 160ms;
  --dur: 320ms;

  /* ── Tema (solo oscuro) ── */
  --fondo: #08080b;
  --fondo-2: #111116;
  --superficie: #15151b;
  --tinta: #f3f3f6;
  --tinta-2: #b4b4c0;       /* 10:1 sobre fondo */
  --tinta-3: #8b8b98;       /* 5.9:1 */
  --linea: rgba(243, 243, 246, 0.1);
  --linea-fuerte: rgba(243, 243, 246, 0.26);
  --plano: rgba(243, 243, 246, 0.32);  /* trazos del boceto */
  --primario: #ff3d9a;
  --primario-suave: rgba(255, 61, 154, 0.14);
  --sobre-primario: #0b0b0e;

  /* Agentes */
  --ag-diseno: #ff3d9a;
  --ag-codigo: #6c9bff;
  --ag-datos: #ffb547;
  --ag-qa: #43d68b;

  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* ── base.css ── */
/* =============================================================================
   Base y componentes
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--primario); outline-offset: 3px; border-radius: 4px; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }

/* ── Tipografía ── */
.titular {
  font-size: var(--t-3xl); font-weight: 700; line-height: 0.95;
  letter-spacing: -0.045em;
}
.titulo {
  font-size: var(--t-2xl); font-weight: 650; line-height: 1.02;
  letter-spacing: -0.035em;
}
.subtitulo { font-size: var(--t-xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.entradilla { font-size: var(--t-lg); color: var(--tinta-2); max-width: 46ch; line-height: 1.5; }
.texto { color: var(--tinta-2); max-width: 62ch; }
.mono { font-family: var(--fuente-mono); font-size: var(--t-xs); letter-spacing: 0.02em; }
.etiqueta {
  font-family: var(--fuente-mono); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--tinta-3);
}
.acento { color: var(--primario); }

/* ── Botones ── */
.boton {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-6);
  border-radius: 999px; border: 1px solid transparent;
  font: 600 var(--t-base) / 1 var(--fuente); text-decoration: none; cursor: pointer;
  transition: transform var(--dur-c) var(--curva), background-color var(--dur) var(--curva),
    border-color var(--dur) var(--curva);
}
.boton:active { transform: scale(0.97); }
.boton--primario { background: var(--tinta); color: var(--fondo); }
.boton--primario:hover { background: var(--primario); color: var(--sobre-primario); }
.boton--borde { border-color: var(--linea-fuerte); color: var(--tinta); background: transparent; }
.boton--borde:hover { border-color: var(--tinta); }

/* ── Chip ── */
.chip {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-3); border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  font-family: var(--fuente-mono); font-size: var(--t-xs); color: var(--tinta-2);
}
.chip .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--ag-qa); }

/* ── Tarjeta ── */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio-l); padding: var(--e-8);
  box-shadow: var(--sombra);
}

/* ── Móvil primero: zonas táctiles de 44 px y líneas equilibradas ── */
/* El área pulsable crece sin mover el diseño (relleno + margen negativo) */
.nav__enlaces a, .experimento__enlaces a, .obras__mientras a {
  display: inline-block; padding-block: 13px; margin-block: -13px;
}
h1, h2, h3, h4, .rol, .titulo { text-wrap: balance; }
p { text-wrap: pretty; }

/* Partículas rosas de fondo (js/particulas.js). z-index -1: por encima del fondo
   del body y por debajo de todo el contenido. */
.particulas {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── secciones.css ── */
/* =============================================================================
   Secciones
   ========================================================================== */

/* ── Cabecera ── */
.cabecera { position: absolute; inset: 0 0 auto; z-index: 20; }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  min-height: 80px;
}
.marca { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.04em; text-decoration: none; }
.nav__enlaces { display: flex; gap: var(--e-6); list-style: none; padding: 0; }
.nav__enlaces a {
  text-decoration: none; font-size: var(--t-sm); color: var(--tinta-2);
  transition: color var(--dur) var(--curva);
}
.nav__enlaces a:hover { color: var(--tinta); }
.nav__acciones { display: flex; align-items: center; gap: var(--e-3); }
@media (max-width: 760px) {
  .nav__enlaces { display: none; }
}

/* ── Portada ── */
.portada {
  position: relative; min-height: 100svh;
  padding: 104px 0 var(--e-16);
  overflow: hidden;
}
.portada__rejilla {
  position: relative;
  display: grid; gap: var(--e-6);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 0.7fr);
  grid-template-areas:
    'gigante gigante gigante'
    'texto   foto    lateral';
  align-items: start;
}
.gigante {
  grid-area: gigante;
  font-family: 'Anton', var(--fuente); text-transform: uppercase;
  font-size: calc(min(100vw - 2 * var(--gutter), var(--ancho)) * 0.265); line-height: 0.82; letter-spacing: -0.01em;
  color: transparent; -webkit-text-stroke: 2px var(--primario);
  margin-bottom: calc(-1 * clamp(1.5rem, 6vw, 5rem));
  user-select: none; white-space: nowrap;
}
.portada__texto { grid-area: texto; position: relative; z-index: 1; display: grid; gap: var(--e-4); justify-items: start; }
.saludo { font-family: 'Caveat', cursive; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; }
.nombre { font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.nombre span {
  display: inline-block; background: var(--primario); color: var(--sobre-primario);
  padding: 0.12em 0.25em 0.16em;
}
.rol { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--tinta-2); }
.punto-rojo { width: 8px; height: 8px; border-radius: 50%; background: var(--primario); display: inline-block; flex: none; }
.portada__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.portada__datos { display: flex; flex-wrap: wrap; gap: var(--e-8); margin-top: var(--e-4); }
.portada__datos dt { font-weight: 700; font-size: var(--t-lg); color: var(--primario); }
.portada__datos dd { margin: 0; font-family: var(--fuente-mono); font-size: var(--t-xs); color: var(--tinta-3); }

.foto { grid-area: foto; position: relative; z-index: 1; margin: var(--e-8) 0 0; }
.foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--primario);
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;
}
.foto { background: var(--primario); }
.foto figcaption {
  position: absolute; left: var(--e-3); bottom: var(--e-3);
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-3); border-radius: 999px;
  background: var(--fondo); color: var(--tinta); border: 1px solid var(--linea-fuerte);
}

.portada__lateral { grid-area: lateral; display: grid; gap: var(--e-3); margin-top: var(--e-8); }
.mini { border-top: 1px solid var(--linea-fuerte); padding-top: var(--e-3); }
.mini .mono { color: var(--primario); }
.mini h2 { font-size: var(--t-base); font-weight: 600; margin: var(--e-1) 0; }
.mini p { font-size: var(--t-sm); color: var(--tinta-3); }

@media (max-width: 980px) {
  .portada__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    grid-template-areas: 'gigante gigante' 'texto foto' 'lateral lateral';
  }
  .portada__lateral { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
}
@media (max-width: 640px) {
  .portada { padding-top: 88px; }
  .portada__rejilla { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'gigante' 'texto' 'foto' 'lateral'; }
  .gigante { -webkit-text-stroke-width: 1.5px; margin-bottom: 0; }
  .foto { margin-top: 0; max-width: 360px; }
  .portada__lateral { grid-template-columns: minmax(0, 1fr); }
  .portada__datos { gap: var(--e-6); }
}

/* ── Secciones comunes ── */
.seccion { position: relative; padding: var(--e-32) 0; border-top: 1px solid var(--linea); }
.indice {
  font-family: var(--fuente-mono); font-size: var(--t-sm); color: var(--tinta-3);
  margin-bottom: var(--e-6); width: fit-content;
}
.indice span { color: var(--primario); }
.seccion .titulo { margin-bottom: var(--e-16); max-width: 18ch; }
@media (max-width: 640px) { .seccion { padding: var(--e-24) 0; } .seccion .titulo { margin-bottom: var(--e-12); } }

/* ── Sobre mí ── */
.sobre { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-16); }
.sobre__texto { display: grid; gap: var(--e-6); align-content: start; }
.linea-tiempo { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
.linea-tiempo li {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--e-4);
  padding: var(--e-4) 0; border-bottom: 1px solid var(--linea);
}
.linea-tiempo .mono { grid-row: span 2; color: var(--primario); padding-top: 0.2em; }
.linea-tiempo strong { font-weight: 600; }
.linea-tiempo li > span:last-child { color: var(--tinta-3); font-size: var(--t-sm); }
@media (max-width: 860px) { .sobre { grid-template-columns: minmax(0, 1fr); gap: var(--e-8); } }

/* ── Qué hago ── */
.servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.servicio {
  display: grid; gap: var(--e-4); align-content: start;
  padding: var(--e-8); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-l);
  background: var(--superficie);
}
.servicio__num { font-family: 'Anton', var(--fuente); font-size: 3rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--primario); }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
@media (max-width: 900px) { .servicios { grid-template-columns: minmax(0, 1fr); } }

/* ── Proyectos destacados ── */
.destacados { display: grid; gap: var(--e-24); }
.destacado {
  display: grid; gap: var(--e-12); align-items: center;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.destacado--inverso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.destacado--inverso .destacado__imagen { order: 2; }
.destacado__imagen {
  margin: 0; border-radius: var(--radio-l); overflow: hidden;
  border: 1px solid var(--linea-fuerte); background: var(--fondo-2);
  box-shadow: var(--sombra);
}
.destacado__imagen img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.destacado__texto { display: grid; gap: var(--e-4); justify-items: start; align-content: start; }
.destacado__texto .subtitulo { font-size: var(--t-2xl); letter-spacing: -0.035em; line-height: 1; }
.destacado__lema { font-size: var(--t-lg); color: var(--primario); font-weight: 500; margin-top: calc(-1 * var(--e-2)); }
.estado { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--tinta-2); }
.estado__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ag-datos); }
.estado__punto--vivo { background: var(--ag-qa); }
.puntos { padding: 0; list-style: none; display: grid; gap: var(--e-2); color: var(--tinta-2); }
.puntos li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--e-2); }
.puntos li::before { content: '→'; color: var(--primario); font-family: var(--fuente-mono); }
@media (max-width: 900px) {
  .destacados { gap: var(--e-16); }
  .destacado, .destacado--inverso { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .destacado--inverso .destacado__imagen { order: 0; }
}

/* ── Laboratorio (proyectos del panel) ── */
.laboratorio {
  margin-top: var(--e-24); padding-top: var(--e-12); border-top: 1px solid var(--linea-fuerte);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--e-12);
}
.laboratorio__cabeza { display: grid; gap: var(--e-2); align-content: start; }
.laboratorio__lista { list-style: none; padding: 0; display: grid; }
.experimento {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--e-2) var(--e-4);
  padding: var(--e-4) 0; border-bottom: 1px solid var(--linea);
}
.experimento__num { font-family: var(--fuente-mono); font-size: var(--t-xs); color: var(--primario); padding-top: 0.3em; }
.experimento h4 { font-size: var(--t-base); font-weight: 600; }
.experimento p { grid-column: 2 / 3; color: var(--tinta-3); font-size: var(--t-sm); }
.experimento .mono { color: var(--tinta-3); }
.experimento__enlaces { display: flex; gap: var(--e-3); grid-row: 1; grid-column: 3; }
.experimento__enlaces a { font-family: var(--fuente-mono); font-size: var(--t-xs); color: var(--tinta-2); }
.experimento__enlaces a:hover { color: var(--primario); }
@media (max-width: 760px) {
  .laboratorio { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .experimento { grid-template-columns: 2rem minmax(0, 1fr); }
  .experimento__enlaces { grid-row: auto; grid-column: 2; }
}

/* ── Lo de ahora ── */
.empresas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
/* Tarjetas de Eden y bady: «liquid glass». Cristal translúcido que deja ver (desenfocado)
   un resplandor de marca fijo y las partículas; brillo que sigue al puntero (js/cristal.js).
   Nada en bucle: solo transiciones al pasar por encima. */
.empresas { position: relative; isolation: isolate; }
.empresas__brillo {
  position: absolute; inset: 8% 10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 60% at 22% 45%, rgba(255, 61, 154, 0.38), transparent 70%),
    radial-gradient(40% 60% at 78% 55%, rgba(108, 155, 255, 0.3), transparent 70%);
  filter: blur(40px);
}
.empresa {
  --mx: 30%; --my: 0%; --brillo: 0;
  position: relative;
  display: grid; gap: var(--e-4); justify-items: start; align-content: start;
  padding: var(--e-8); border-radius: var(--radio-l);
  background: var(--superficie); border: 1px solid var(--linea-fuerte);
  transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva),
    border-color var(--dur) var(--curva), background-color var(--dur) var(--curva);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .empresa {
    background:
      radial-gradient(120% 90% at var(--mx) var(--my), rgba(255, 255, 255, calc(0.05 + var(--brillo) * 0.09)), transparent 55%),
      linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.04));
    background-color: rgba(21, 21, 27, 0.42);
    border-color: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(255, 255, 255, 0.05),
      inset 0 0 24px rgba(255, 255, 255, 0.03),
      0 12px 32px rgba(0, 0, 0, 0.4);
  }
}
@media (hover: hover) and (pointer: fine) {
  .empresa:hover {
    --brillo: 1;
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 32px rgba(255, 255, 255, 0.05),
      0 20px 44px rgba(0, 0, 0, 0.5);
  }
  .empresa:hover .empresa__logo { transform: scale(1.06) rotate(-3deg); }
}
.empresa__logo { transition: transform var(--dur) var(--curva-muelle); }
.empresa:focus-within { border-color: var(--primario); }
@media (prefers-reduced-motion: reduce) {
  .empresa, .empresa__logo { transition: none; }
  .empresa:hover, .empresa:hover .empresa__logo { transform: none; }
}
.empresa__logo { width: 56px; height: 56px; object-fit: contain; }
.empresa__logo--bady { background: #000; border-radius: 14px; padding: 6px; }
.empresa__logo--eden { background: #000; border-radius: 14px; padding: 6px; }
.extra { margin-top: var(--e-16); display: grid; gap: var(--e-4); }
.video { aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: var(--fondo-2); border: 1px solid var(--linea); }
.video iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) { .empresas { grid-template-columns: minmax(0, 1fr); } }

/* ── Contacto y pie ── */
.contacto .titular { margin-bottom: var(--e-12); }
.contacto__fila { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-8) 0 var(--e-16); border-top: 1px solid var(--linea);
  color: var(--tinta-3); font-size: var(--t-sm);
}

/* ── Volver al inicio (js/arriba.js lo muestra al pasar la portada) ── */
.arriba {
  position: fixed; right: 16px; bottom: 16px; z-index: 31;
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; color: var(--tinta); text-decoration: none;
  background: rgba(21, 21, 27, 0.6); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--sombra);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva),
    visibility 0s linear var(--dur), background-color var(--dur) var(--curva), color var(--dur) var(--curva);
}
.arriba--visible {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva),
    visibility 0s, background-color var(--dur) var(--curva), color var(--dur) var(--curva);
}
.arriba:hover { background: var(--primario); color: var(--sobre-primario); }
.arriba:focus-visible { outline: 2px solid var(--primario); outline-offset: 3px; }
.arriba svg { transition: transform var(--dur) var(--curva); }
@media (hover: hover) { .arriba:hover svg { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .arriba, .arriba--visible, .arriba svg { transition: none; transform: none; }
}

/* ── montaje.css ── */
/* =============================================================================
   Montaje: la web «la construyen» agentes al hacer scroll.
   Sin JS o con «Reducir movimiento» no se aplica nada de esto: se ve la web final.
   ========================================================================== */

:root { --seleccion: #0d8bff; }

/* Antes de que el motor tome el control, las piezas no se ven (evita parpadeo) */
.montaje-activo .pieza { opacity: 0; }
/* Decoración que aparece cuando su sección ya está montada (data-despues) */
.montaje-activo [data-despues] { opacity: 0; }

/* Capa por sección donde viven marcos y cursores */
.capa-montaje {
  position: absolute; inset: 0; z-index: 15;
  pointer-events: none; overflow: hidden;
}

/* ── Marco de selección (tipo herramienta de diseño) ── */
.marco {
  position: absolute; top: 0; left: 0;
  border: 1.5px solid var(--seleccion);
  background: color-mix(in srgb, var(--seleccion) 6%, transparent);
  opacity: 0;
  will-change: transform, opacity, clip-path;
}
.marco--plano { border-style: dashed; background: transparent; }
.asa {
  position: absolute; width: 7px; height: 7px;
  background: var(--fondo); border: 1.5px solid var(--seleccion);
}
.asa:nth-child(1) { top: -4px; left: -4px; }
.asa:nth-child(2) { top: -4px; right: -4px; }
.asa:nth-child(3) { bottom: -4px; left: -4px; }
.asa:nth-child(4) { bottom: -4px; right: -4px; }
.medida {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  padding: 1px 5px; border-radius: 3px;
  background: var(--seleccion); color: #fff;
  font: 600 10px/1.5 var(--fuente-mono); white-space: nowrap;
}
.marco__nombre {
  position: absolute; left: -1px; bottom: calc(100% + 4px);
  font: 500 10px/1.4 var(--fuente-mono); color: var(--seleccion); white-space: nowrap;
}
/* Icono de imagen pendiente */
.marco--imagen::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 22px;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--plano); border-radius: 3px;
  background:
    radial-gradient(circle at 30% 35%, var(--plano) 2.5px, transparent 3px),
    linear-gradient(135deg, transparent 55%, var(--plano) 56% 62%, transparent 63%);
}

/* Cursor de texto que acompaña al tecleo */
.caret {
  position: absolute; top: 0; left: 0; width: 2px;
  background: var(--seleccion); opacity: 0;
}

/* ── Cursores de agente ── */
.cursor {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: flex-start; gap: 2px;
  opacity: 0; will-change: transform;
  --c: var(--ag-codigo);
}
.cursor svg { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.cursor svg path { fill: var(--c); stroke: #0b0b0e; stroke-width: 1.4; }
.cursor__nombre {
  margin-top: 14px; padding: 2px 7px; border-radius: 999px;
  background: var(--c); color: #0b0b0e;
  font: 600 10px/1.4 var(--fuente-mono); white-space: nowrap;
}
.cursor[data-ag='diseno'] { --c: var(--ag-diseno); }
.cursor[data-ag='codigo'] { --c: var(--ag-codigo); }
.cursor[data-ag='datos'] { --c: var(--ag-datos); }
.cursor[data-ag='qa'] { --c: var(--ag-qa); }
/* ── Enjambre inicial de la portada ── */
.enjambre { position: absolute; inset: 0; z-index: 16; pointer-events: none; }
.enjambre .cursor svg { width: 14px; height: 14px; }

/* ── Registro de agentes ── */
.registro {
  position: fixed; left: 16px; bottom: 16px; z-index: 30;
  width: min(320px, calc(100vw - 32px));
  padding: var(--e-3) var(--e-4);
  border-radius: 14px; border: 1px solid var(--linea-fuerte);
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  box-shadow: var(--sombra);
  font: 400 11px/1.55 var(--fuente-mono); color: var(--tinta-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.registro--visible { opacity: 1; transform: none; }
.registro__cabeza {
  display: flex; justify-content: space-between;
  color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px;
  margin-bottom: var(--e-1);
}
.registro__lineas { list-style: none; padding: 0; display: grid; gap: 1px; min-height: calc(4 * 1.55em); }
.registro__lineas li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.registro__lineas b { font-weight: 600; }
.registro__lineas .ok { color: var(--ag-qa); }
.registro b[data-ag='diseno'] { color: var(--ag-diseno); }
.registro b[data-ag='codigo'] { color: var(--ag-codigo); }
.registro b[data-ag='datos'] { color: var(--ag-datos); }
.registro b[data-ag='qa'] { color: var(--ag-qa); }

@media (max-width: 640px) {
  .registro__lineas { min-height: 0; }
  /* Deja sitio al botón «Volver al inicio» (48 px + 8 de aire) */
  .registro { width: calc(100vw - 32px - 56px); }
  .registro__lineas li:not(:last-child) { display: none; }
  .cursor__nombre { font-size: 9px; padding: 1px 5px; }
}

/* ── paginas.css ── */
/* =============================================================================
   Piezas añadidas: idioma, botones de destacados, mantenimiento y 404
   ========================================================================== */

/* ── Selector de idioma ── */
.idioma {
  min-width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 var(--e-3);
  border: 1px solid var(--linea-fuerte); text-decoration: none;
  font: 600 var(--t-xs) / 1 var(--fuente-mono); letter-spacing: 0.08em; color: var(--tinta);
  transition: border-color var(--dur) var(--curva), color var(--dur) var(--curva);
}
.idioma:hover { border-color: var(--primario); color: var(--primario); }

/* ── Destacados ── */
.destacado__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.destacado--sin-imagen { grid-template-columns: minmax(0, 1fr) !important; }
/* Repetir el montaje solo tiene sentido si hay montaje */
html:not(.montaje-activo) .boton-repetir { display: none; }

/* ── Páginas sueltas (mantenimiento y 404) ── */
.pagina-sola { min-height: 100svh; display: grid; }
.pagina-sola .gigante { grid-area: auto; font-size: calc(min(100vw - 2 * var(--gutter), var(--ancho)) * 0.24); margin: 0; }

.obras, .error {
  position: relative; display: grid; align-content: center; gap: var(--e-8);
  padding: var(--e-16) 0; min-height: 100svh;
}
.obras__cuerpo, .error__cuerpo { position: relative; z-index: 1; display: grid; gap: var(--e-6); justify-items: start; max-width: 640px; }
.obras .marca, .error .marca { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.04em; text-decoration: none; }
.obras .titulo, .error .titulo { font-size: var(--t-xl); line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; }

.progreso { width: min(100%, 420px); display: grid; gap: var(--e-2); }
.progreso__cabeza { display: flex; justify-content: space-between; align-items: baseline; }
.progreso__cabeza b { font: 600 var(--t-lg) / 1 var(--fuente-mono); color: var(--primario); }
.progreso__barra { height: 6px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.progreso__barra i { display: block; height: 100%; width: 0; background: var(--primario); border-radius: inherit; }

.obras__tareas {
  list-style: none; padding: var(--e-3) var(--e-4); margin: 0;
  width: min(100%, 420px);
  border: 1px solid var(--linea-fuerte); border-radius: 14px; background: var(--superficie);
  font: 400 12px/1.7 var(--fuente-mono); color: var(--tinta-2);
}
.obras__tareas b { font-weight: 600; }
.obras__tareas [data-ag='diseno'] b { color: var(--ag-diseno); }
.obras__tareas [data-ag='codigo'] b { color: var(--ag-codigo); }
.obras__tareas [data-ag='datos'] b { color: var(--ag-datos); }
.obras__tareas [data-ag='qa'] b { color: var(--ag-qa); }
.montaje-activo .obras__tareas li { opacity: 0; }

.obras__mientras { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: baseline; }
.obras__mientras a { color: var(--tinta-2); font-size: var(--t-sm); }
.obras__mientras a:hover { color: var(--primario); }

/* 404: un marco vacío y QA buscando */
.error__marco { position: absolute; right: 0; top: 18%; width: min(38vw, 360px); height: 200px; }
.error__marco .marco { opacity: 1; width: 100%; height: 100%; }
.error__marco .cursor { opacity: 1; transform: translate(70%, 78%); }
@media (prefers-reduced-motion: no-preference) {
  .error__marco--buscando .cursor { animation: buscar 2.4s var(--curva) 2 both; }
  @keyframes buscar {
    0% { transform: translate(10%, 20%); }
    35% { transform: translate(85%, 30%); }
    70% { transform: translate(30%, 90%); }
    100% { transform: translate(70%, 78%); }
  }
}
@media (max-width: 760px) {
  .error__marco { position: relative; right: auto; top: auto; width: 100%; height: 120px; }
}