:root {
  --bg-top: #000;
  --bg-bottom: #000e14;
  --accent: #ade5ff;
  --dot: 173, 229, 255; /* color de los puntos del fondo (r, g, b) */
  --electric: #2f4bff;
  --text: #fff;
  --muted: #8a8f93;
  --line: rgba(255, 255, 255, 0.14);
  --radius: 0.875rem;
  --max: 73.75rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Curvas: ease-out fuerte para entradas y salidas, ease-in-out para lo que se mueve
     en pantalla, y la curva tipo iOS para el reproductor. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

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

html {
  background: var(--bg-bottom);
  scrollbar-gutter: stable;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: Switzer, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Fondo fijo en su propia capa: no se repinta al hacer scroll */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: linear-gradient(180deg, var(--bg-top) -20%, var(--bg-bottom) 75%);
}
/* Un único degradado del color de la marca, muy suave, que deriva despacio */
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  left: 50%;
  top: -55vmax;
  width: 150vmax;
  height: 110vmax;
  margin-left: -75vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(173, 229, 255, 0.13), rgba(173, 229, 255, 0.04) 55%, transparent);
  pointer-events: none;
  animation: glow 36s ease-in-out infinite alternate;
}
@keyframes glow { from { transform: translate3d(-6vmax, 0, 0); } to { transform: translate3d(6vmax, 5vmax, 0); } }
#dots {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: 100lvh;
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
main { flex: 1; }
img, video, svg { display: block; }

a, button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

/* ---------- Header: capa translúcida, el contenido pasa por debajo ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(0, 4, 6, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  /* Borde difuminado en vez de una línea dura de 1 px */
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
  animation: fade 600ms var(--ease-out) both;
}
.site-header-inner {
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 1.125rem var(--gutter) 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--accent);
  transition: transform 160ms var(--ease-out);
}
.logo:active { transform: scale(0.97); }
/* ---------- Hero ---------- */
.hero { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: clamp(8.5rem, 16vw, 12.5rem) var(--gutter) clamp(3rem, 6vw, 4.75rem); }
.kicker {
  display: flex;
  width: fit-content;
  margin: 0 0 1.75rem;
  padding: 0.4375rem 0.9375rem;
  border-radius: 999px;
  /* Vidrio: desenfoca los puntos que pasan por detrás, borde de 1 px y brillo en el canto superior */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 -0.625rem 1rem -0.625rem rgba(255, 255, 255, 0.12),
    0 0.625rem 1.75rem -0.625rem rgba(0, 0, 0, 0.7);
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: #d3d6d8;
  animation: rise 900ms var(--ease-out) 100ms backwards;
}
.hero h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.75rem, 7.4vw, 5.75rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.055em; /* tracking negativo: el texto grande se ve demasiado abierto */
  text-wrap: balance;
  animation: rise 900ms var(--ease-out) 170ms backwards;
}
.hero h1 span { color: var(--accent); }
.hero-sub {
  margin: 1.75rem 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #b9bec2;
  text-wrap: pretty;
  animation: rise 900ms var(--ease-out) 240ms backwards;
}
/* Descripciones palabra por palabra: main.js las enciende según el scroll */
.word { display: inline-block; }

/* Párrafo final: se escribe letra por letra en 2 s. Cada letra aparece en celeste y se queda en blanco. */
.type-word { display: inline-block; white-space: nowrap; }
.type-char { opacity: 0; }
.is-typing .type-char { animation: type 700ms ease-out both; animation-delay: var(--t); }
@keyframes type {
  0% { opacity: 0; color: var(--type-from, #ade5ff); }
  2% { opacity: 1; color: var(--type-from, #ade5ff); }
  100% { opacity: 1; color: #fff; }
}

@keyframes rise { from { opacity: 0; transform: translateY(1rem); filter: blur(6px); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Proyectos ---------- */
.work { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); scroll-margin-top: 5rem; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.25rem; }
.grid > li:first-child { grid-column: 1 / -1; }
/* Si después del destacado queda un número impar, el último no se queda solo a la izquierda */
.grid > li:last-child:nth-child(even) { grid-column: 1 / -1; }

.card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Respuesta al presionar, no al soltar */
  transition: transform 160ms var(--ease-out);
}
.card:active { transform: scale(0.985); }

.card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #05090b;
  isolation: isolate;
  box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.8);
}
/* Borde de luz: 1 px interior, más claro arriba */
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
  transition: box-shadow 200ms ease;
}
.card-media img,
.card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
/* El preview aparece con un fundido sobre la portada cuando ya tiene imagen */
.card-media video { opacity: 0; transition: opacity 200ms ease, transform 500ms var(--ease-out); }
.card.is-playing .card-media video { opacity: 1; }
.card.is-source .card-media { visibility: hidden; }

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.75rem 0.125rem 0;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.card-title { transition: color 200ms ease; }
.card-tag { color: var(--muted); white-space: nowrap; }

/* Etiqueta de vidrio que sigue al cursor sobre las tarjetas (la mueve main.js con un resorte) */
.cursor-pill { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; will-change: transform; }
.cursor-pill span {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5625rem 1rem 0.5625rem 0.875rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #00070b;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.cursor-pill span::before {
  content: "";
  border-style: solid;
  border-width: 0.3125rem 0 0.3125rem 0.5rem;
  border-color: transparent transparent transparent #00070b;
}
.cursor-pill.is-on span { opacity: 1; transform: none; }

/* Todo el hover vive aquí: en táctil el hover se queda "pegado" después del tap */
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-media img,
  .card:hover .card-media video { transform: scale(1.03); }
  .card:hover .card-media::after { box-shadow: inset 0 0 0 1px rgba(173, 229, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .card:hover .card-title { color: var(--accent); }
  .player-close:hover { color: var(--text); background-color: rgba(255, 255, 255, 0.1); }
}

/* ---------- About ---------- */
.about {
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(5rem, 10vw, 8rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.about h2 { margin: 0 0 0.5rem; font-size: inherit; font-weight: 500; }
.about p { margin: 0; max-width: 27rem; color: var(--muted); -webkit-user-select: text; user-select: text; }

/* ---------- Footer ---------- */
.site-footer-row {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Reproductor ---------- */
/* El cuadro del video sale de la tarjeta que tocaste y vuelve a ella (lo anima main.js). */
.player {
  --w: min(80rem, 100vw - 2rem, (100dvh - 7.5rem) * 16 / 9);
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: hidden;
}
.player::backdrop {
  background: rgba(0, 5, 8, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.player-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.player-bar {
  width: var(--w);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.125rem 0.625rem;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.player-title { font-weight: 500; }
.player-close {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: -0.5rem;
  padding: 0.375rem 0.625rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #b9bec2;
  font: inherit;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out);
}
.player-close:active { transform: scale(0.97); }
.player-close kbd {
  padding: 0.0625rem 0.375rem;
  border-radius: 0.3125rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font: inherit;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}
.player-frame {
  width: var(--w);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000 center / cover no-repeat;
  box-shadow: 0 2.5rem 6rem -2rem rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform-origin: 0 0;
  will-change: transform;
}
.player-frame video { width: 100%; height: 100%; background: transparent; }
@media (pointer: coarse) { .player-close kbd { display: none; } }

/* ---------- Aparición al hacer scroll (una sola vez) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal[data-visible] { opacity: 1; transform: none; }

/* ---------- Adaptación ---------- */
@media (max-width: 40rem) {
  .site-header-inner { padding-top: 0.875rem; padding-bottom: 1.25rem; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

/* Movimiento reducido: se quedan los fundidos, se va el desplazamiento y lo que oscila */
@media (prefers-reduced-motion: reduce) {
  .kicker, .hero h1, .hero-sub { animation: fade 300ms ease both; }
  body::after { animation: none; }
  .js .reveal { transform: none; transition: opacity 200ms ease; transition-delay: 0ms; }
  .type-char { opacity: 1; color: #fff; animation: none !important; }
  .card:active, .logo:active, .player-close:active { transform: none; }
  .card:hover .card-media img,
  .card:hover .card-media video { transform: none; }
  .cursor-pill { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .kicker { background: #14181a; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header { background: #000406; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .player::backdrop { background: #00070a; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #c4c9cc; --line: rgba(255, 255, 255, 0.6); }
  .site-header { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; border-bottom: 1px solid var(--line); }
  .card-media::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
}