/* Propuesta B: negro total, puntos blancos y textos en blanco grisáceo con degradado.
   Se carga encima de styles.css solo en black.html; la versión celeste no cambia. */
:root {
  --accent: #fff;
  --dot: 255, 255, 255;
  --muted: #7f8387;
  --line: rgba(255, 255, 255, 0.12);
}
html { background: #000; }
body::before { background: #000; }
body::after { display: none; } /* sin degradado de color */

/* Los puntos se apagan hacia los bordes de la pantalla */
#dots {
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 100%);
}

.site-header { background: rgba(0, 0, 0, 0.45); }
.logo { color: #e9ebec; }

/* Titular: un solo degradado de blanco a gris que se va apagando hacia el borde */
.hero h1 {
  padding-bottom: 0.08em; /* para que el recorte no corte las descendentes */
  color: transparent;
  background: linear-gradient(100deg, #fff 0%, #f1f2f3 30%, #a9adb0 70%, #5d6164 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero h1 span { color: inherit; }
.hero-sub { color: #a4a8ab; }

.card-media { background: #0a0a0a; }
.about h2 { color: #e9ebec; }

@media (hover: hover) and (pointer: fine) {
  .card:hover .card-media::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .card:hover .card-title { color: #fff; }
}

/* Desenfoque en los bordes: lo que sale por abajo de la pantalla se difumina, igual que arriba */
/* Desenfoque progresivo: siete capas, cada una con el doble de desenfoque que la anterior
   y visible solo en su franja. Las franjas se solapan, así el desenfoque crece de forma continua
   y no se ve una línea recta donde empieza. Encima, un fundido a negro con curva suave. */
body > .edge-blur {
  position: fixed;
  inset: auto 0 0;
  z-index: 9;
  height: 14rem;
  pointer-events: none;
}
body > .edge-blur i { position: absolute; inset: 0; }
body > .edge-blur i:nth-child(1) { -webkit-backdrop-filter: blur(0.5px); backdrop-filter: blur(0.5px); -webkit-mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
body > .edge-blur i:nth-child(2) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
body > .edge-blur i:nth-child(3) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
body > .edge-blur i:nth-child(4) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
body > .edge-blur i:nth-child(5) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
body > .edge-blur i:nth-child(6) { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(transparent 62.5%, #000 75%); mask-image: linear-gradient(transparent 62.5%, #000 75%); }
body > .edge-blur i:nth-child(7) { -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); -webkit-mask-image: linear-gradient(transparent 75%, #000 87.5%); mask-image: linear-gradient(transparent 75%, #000 87.5%); }
body > .edge-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 20%, rgba(0, 0, 0, 0.07) 38%, rgba(0, 0, 0, 0.17) 54%,
    rgba(0, 0, 0, 0.33) 69%, rgba(0, 0, 0, 0.52) 83%, rgba(0, 0, 0, 0.72) 100%);
}
@media (prefers-reduced-transparency: reduce) { body > .edge-blur { display: none; } }
.site-footer { position: relative; z-index: 10; }

/* El texto final y el pie quedan por encima del desenfoque inferior: nunca se difuminan */
.about { position: relative; z-index: 10; }

/* Tarjetas: el video arriba y, dentro de la misma tarjeta, una barra con el nombre a la izquierda
   y el tipo de video a la derecha en mayúsculas espaciadas */
.card {
  overflow: hidden;
  border-radius: 1.25rem;
  background: #0c0c0c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.card-media { border-radius: 0; box-shadow: none; background: #0a0a0a; }
.card-media::after { display: none; }
.card-meta {
  align-items: center;
  gap: 1rem;
  padding: 1.0625rem 1.375rem 1.125rem;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  color: #e9ebec;
}
.card-tag {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f7377;
}
/* Énfasis al pasar por un video: el trazo pasa a celeste y sale un halo muy suave alrededor */
.card { transition: transform 160ms var(--ease-out), box-shadow 280ms ease; }
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    box-shadow:
      inset 0 0 0 1px rgba(173, 229, 255, 0.6),
      0 0 0 1px rgba(173, 229, 255, 0.1),
      0 0 3rem -0.75rem rgba(173, 229, 255, 0.38);
  }
}
.card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(173, 229, 255, 0.9), 0 0 3rem -0.75rem rgba(173, 229, 255, 0.5);
}
@media (max-width: 40rem) {
  .card { border-radius: 1rem; }
  .card-meta { padding: 0.875rem 1rem 0.9375rem; font-size: 1rem; }
  .card-tag { font-size: 0.625rem; letter-spacing: 0.13em; }
}
@media (prefers-contrast: more) {
  .card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
  .card-tag { color: #c4c9cc; }
}

/* El trazo de la tarjeta va en una capa encima del video, para que rodee toda la tarjeta
   (como sombra interior quedaba tapado por el video en la parte de arriba) */
.card { position: relative; }
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  pointer-events: none;
  transition: box-shadow 280ms ease;
}
.card,
.card:focus-visible { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: 0 0 3rem -0.75rem rgba(173, 229, 255, 0.38); }
  .card:hover::after { box-shadow: inset 0 0 0 1px rgba(173, 229, 255, 0.6); }
}
.card:focus-visible { box-shadow: 0 0 3rem -0.75rem rgba(173, 229, 255, 0.5); }
.card:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(173, 229, 255, 0.9); }
@media (prefers-contrast: more) {
  .card { box-shadow: none; }
  .card::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
}

/* Al pasar por un video, toda la tarjeta se acerca un poco (escala), con entrada y salida suaves.
   El zoom interno del video se quita para que no se sumen dos movimientos. */
.card { transition: transform 550ms var(--ease-out), box-shadow 280ms ease; will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: scale(1.028); z-index: 3; }
  .card:hover .card-media img,
  .card:hover .card-media video { transform: none; }
}
/* La respuesta al presionar sigue siendo inmediata */
.card:active { transform: scale(0.995); transition-duration: 160ms, 280ms; }
@media (prefers-reduced-motion: reduce) {
  .card:hover, .card:active { transform: none; }
}

/* Unión entre el video y la barra del nombre: la barra se monta 2 px sobre el borde inferior del video
   (que al escalar quedaba con un corte irregular) y lleva un trazo fino arriba, igual que el del contorno */
.card-meta {
  position: relative;
  z-index: 1;
  margin-top: -2px;
  background: #0c0c0c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transition: box-shadow 280ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-meta { box-shadow: inset 0 1px 0 rgba(173, 229, 255, 0.6); }
}
.card:focus-visible .card-meta { box-shadow: inset 0 1px 0 rgba(173, 229, 255, 0.9); }
@media (prefers-contrast: more) {
  .card-meta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}

/* Logos de clientes: una cuadrícula sobria, todos en blanco apagado y al mismo alto visual */
.clients {
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2.75rem 2rem;
  align-items: center;
}
.clients[hidden] { display: none; }
.client {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #fff;
  white-space: nowrap;
}
.client img { width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) invert(1); }
/* La opacidad va en el contenido, no en el <li>, para no pisar la animación de aparición */
.client img,
.client span { opacity: 0.62; }
@media (max-width: 64rem) { .clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; font-size: 0.75em; }
  .client { font-size: 1rem; gap: 0.375rem; }
  .client img { transform: scale(0.78); }
}
@media (prefers-contrast: more) { .client img, .client span { opacity: 1; } }

/* Cinta de logos: ocupa todo el ancho, se desvanece en los bordes y se puede arrastrar */
.clients-view { margin: 0 0 clamp(3rem, 6vw, 4.75rem); }
.clients-view[hidden] { display: none; }
.clients-view.is-marquee {
  overflow: hidden;
  padding: 1.75rem 0;
  cursor: grab;
  touch-action: pan-y; /* el dedo arrastra la cinta en horizontal; el scroll vertical sigue siendo del navegador */
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.clients-view.is-dragging { cursor: grabbing; }
.is-marquee .clients {
  display: flex;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
  will-change: transform;
}
.is-marquee .client { flex: none; margin-right: 5.25rem; opacity: 0.26; will-change: transform, opacity; }
.is-marquee .client img,
.is-marquee .client span { opacity: 1; }
.is-marquee .client img { max-width: none; pointer-events: none; }
@media (max-width: 40rem) {
  .clients-view.is-marquee { padding: 1.25rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .is-marquee .client { margin-right: 3.25rem; }
}

/* ---------- Píldora: barrido de brillo que recorre el texto cada 8 s ---------- */
.kicker span {
  --shiny-width: 110px;
  color: rgba(211, 214, 216, 0.62);
  background: linear-gradient(90deg, transparent, #fff 50%, transparent) no-repeat;
  background-size: var(--shiny-width) 100%;
  background-position: calc(-100% - var(--shiny-width)) 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shiny-text 8s infinite;
}
@keyframes shiny-text {
  0%, 90%, 100% { background-position: calc(-100% - var(--shiny-width)) 0; }
  30%, 60% { background-position: calc(100% + var(--shiny-width)) 0; }
}

/* ---------- Tarjetas: el trazo de hover es una línea de luz con puntas finas que sigue al cursor ---------- */
/* ::before = contorno gris fijo. ::after = anillo de 1 px pintado con un degradado radial centrado
   en el cursor (blanco → celeste → nada), así la línea se afina y desaparece hacia los lados. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  pointer-events: none;
}
.card::after {
  padding: 1px;
  box-shadow: none;
  background: radial-gradient(19rem circle at var(--mx, 50%) var(--my, 0%), #fff 0%, #ade5ff 28%, rgba(173, 229, 255, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 320ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::after { opacity: 1; box-shadow: none; }
  .card:hover .card-meta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); }
}
.card:focus-visible::after { opacity: 0; box-shadow: none; }
.card:focus-visible::before { box-shadow: inset 0 0 0 1px rgba(173, 229, 255, 0.9); }
@media (prefers-contrast: more) {
  .card::after { display: none; }
  .card::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
}

@media (prefers-reduced-motion: reduce) { .kicker span { animation: none; } }

/* ---------- "Trusted by teams at": etiqueta a la izquierda y la cinta de logos a la derecha ---------- */
.clients-row {
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto clamp(3rem, 6vw, 4.75rem);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.clients-row[hidden] { display: none; }
.clients-label {
  flex: none;
  margin: 0;
  padding-bottom: 0.5rem; /* compensa el espacio que la cinta reserva abajo para la etiqueta del logo */
  font-size: 0.9375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #e9ebec;
}
.clients-label span { display: block; color: var(--muted); }
.clients-row .clients-view { flex: 1; min-width: 0; margin: 0; }
.clients-row .clients-view.is-marquee {
  padding: 1.5rem 0 2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
/* Cada logo abre su video */
.client[data-project] { position: relative; cursor: pointer; }
.client-tag {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.5rem);
  transform: translateX(-50%);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  pointer-events: none;
}
.client .client-tag,
.is-marquee .client .client-tag { opacity: 0; transition: opacity 200ms ease; }
.client-tag::before {
  content: "";
  display: inline-block;
  margin-right: 0.4375rem;
  border-style: solid;
  border-width: 0.21875rem 0 0.21875rem 0.34375rem;
  border-color: transparent transparent transparent currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .client[data-project]:hover .client-tag { opacity: 1; }
}
.client:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 4px; }
.client:focus-visible .client-tag { opacity: 1; }
@media (max-width: 48rem) {
  .clients-row { display: block; padding: 0; }
  .clients-label { padding: 0 var(--gutter); }
  .clients-label span { display: inline; }
  .clients-row .clients-view.is-marquee { padding-top: 1.25rem; }
}

/* ---------- "Trusted by teams at", versión con encuadre ---------- */
/* Etiqueta centrada entre dos líneas finas, la cinta debajo con enfoque en el centro,
   una leyenda que nombra el logo enfocado, y una línea de cierre. */
.clients-row { display: block; max-width: none; padding: 0; margin: 0 auto clamp(3.5rem, 7vw, 5.5rem); }
.clients-label {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8a8f93;
}
.clients-label span { display: inline; color: inherit; }
.clients-label::before,
.clients-label::after { content: ""; flex: 1; height: 1px; }
.clients-label::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16)); }
.clients-label::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent); }
.clients-row::after {
  content: "";
  display: block;
  height: 1px;
  max-width: var(--max);
  margin: 1.75rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 28%, rgba(255, 255, 255, 0.14) 72%, transparent);
}
.clients-row .clients-view.is-marquee {
  padding: 2.25rem 0 1.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.is-marquee .client { margin-right: 7rem; will-change: transform, opacity, filter; }
.client-tag { display: none; }
.clients-caption {
  margin: 0;
  min-height: 1rem;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: -0.005em;
  color: #e9ebec;
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 170ms ease, transform 170ms ease;
}
.clients-caption[hidden] { display: none; }
.clients-caption.is-on { opacity: 1; transform: none; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.clients-caption span:last-child {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8f93;
}
@media (max-width: 48rem) {
  .clients-label { gap: 1rem; font-size: 0.625rem; }
  .clients-row .clients-view.is-marquee { padding: 1.75rem 0 1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
  .is-marquee .client { margin-right: 4.25rem; }
}

/* Párrafo final: cada letra aparece al recibir la clase "on" (la pone y la quita main.js);
   nace en celeste y pasa a blanco. Al borrarse desaparece sin transición, como al borrar texto. */
.type-char { opacity: 0; }
.type-char.on { opacity: 1; animation: type-in 700ms ease-out both; }
@keyframes type-in { from { color: #ade5ff; } to { color: #fff; } }
@media (prefers-reduced-motion: reduce) { .type-char.on { animation: none; color: #fff; } }

/* ---------- Titular: barrido celeste sutil bajo el cursor ---------- */
/* Encima del degradado blanco→gris va una mancha celeste centrada en el cursor (--hx, --hy, desde main.js).
   Su intensidad (--hl) se registra como número para poder hacerle transición: entra y sale con un fundido. */
@property --hl { syntax: "<number>"; inherits: false; initial-value: 0; }
.hero h1 {
  background:
    radial-gradient(12rem circle at var(--hx, 50%) var(--hy, 50%), rgb(173 229 255 / calc(var(--hl) * 0.9)) 0%, rgb(173 229 255 / calc(var(--hl) * 0.45)) 45%, rgb(173 229 255 / 0) 100%),
    linear-gradient(100deg, #fff 0%, #f1f2f3 30%, #a9adb0 70%, #5d6164 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: --hl 450ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero h1:hover { --hl: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero h1:hover { --hl: 0; } }

/* ---------- Versión personal: nombre, firma con foto y foto en el cierre ---------- */
.logo { font-size: 1.125rem; letter-spacing: -0.02em; }
.logo span { margin-left: 0.625rem; color: var(--muted); font-weight: 400; }
.byline {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 2.25rem 0 0;
  animation: rise 900ms var(--ease-out) 310ms backwards;
}
.byline img,
.about-photo {
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.byline img { width: 3rem; height: 3rem; }
.byline span { display: flex; flex-direction: column; gap: 0.1875rem; font-size: 0.875rem; line-height: 1.2; color: var(--muted); }
.byline strong { font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.01em; color: #e9ebec; }
.about-photo { display: block; width: 4.5rem; height: 4.5rem; margin-bottom: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .byline { animation: fade 300ms ease both; } }
@media (max-width: 40rem) { .logo { font-size: 1rem; } }

/* ---------- Nota que acompaña al cursor en las zonas vacías ---------- */
/* La caja es una píldora real que crece hacia la derecha mientras el texto se escribe, y se encoge
   hacia la izquierda mientras se borra. No hay recorte: el contorno redondo se ve entero en todo momento.
   El ancho y el texto los lleva main.js. */
.cursor-note { position: fixed; left: 0; top: 0; z-index: 19; pointer-events: none; will-change: transform; }
.note-pill {
  display: block;
  box-sizing: border-box;
  height: 2.25rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: rgba(20, 22, 24, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
  opacity: 0;
  /* Punto de anclaje en la punta del cursor: la caja va 16 px a la derecha y 20 px por debajo de él
     (ver main.js), así que su origen queda arriba a la izquierda, fuera de la caja. Nace y muere hacia el puntero. */
  transform: scale(0);
  transform-origin: -16px -20px;
  width: max-content;
}
.note-text {
  display: block;
  height: 100%;
  width: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 2.25rem;
  letter-spacing: -0.005em;
  white-space: pre;
  color: #f1f2f3;
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .cursor-note { display: none; } }
@media (prefers-reduced-transparency: reduce) { .note-pill { background: #141618; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- "Trusted by": la franja es una barra de vidrio ---------- */
/* Entre las dos líneas finas, el fondo se desenfoca y se aclara un poco: los puntos dejan de
   mezclarse con los logos y la sección se lee como una pieza. Se desvanece en los extremos. */
.clients-row { position: relative; }
.clients-row::before {
  content: "";
  position: absolute;
  inset: 0.34rem 0 0 0; /* empieza a la altura de la línea superior */
  z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  pointer-events: none;
}
.clients-label,
.clients-row .clients-view,
.clients-caption { position: relative; z-index: 1; }
.clients-caption { padding-bottom: 1.75rem; }
.clients-row::after { position: relative; z-index: 1; margin-top: 0; }
@media (prefers-reduced-transparency: reduce) {
  .clients-row::before { background: #0b0b0b; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- "Trusted by teams at" dentro de una píldora de vidrio, como la de arriba ---------- */
/* Las dos líneas llegan hasta la píldora (sin hueco a los lados) y el texto lleva el mismo barrido de brillo. */
.clients-label { gap: 0; }
.clients-pill {
  display: inline-flex;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  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);
}
.clients-label .clients-pill > span {
  --shiny-width: 110px;
  display: block;
  color: rgba(211, 214, 216, 0.62);
  background: linear-gradient(90deg, transparent, #fff 50%, transparent) no-repeat;
  background-size: var(--shiny-width) 100%;
  background-position: calc(-100% - var(--shiny-width)) 0;
  -webkit-background-clip: text;
  background-clip: text;
  /* mismo ciclo que la píldora de arriba, desfasado medio ciclo para que no brillen a la vez */
  animation: shiny-text 8s infinite -4s;
}
@media (prefers-reduced-motion: reduce) { .clients-label .clients-pill > span { animation: none; } }
@media (prefers-reduced-transparency: reduce) { .clients-pill { background: #14181a; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- Alineación de la barra "Trusted by" con su línea superior ---------- */
/* La línea gris pasa por el centro de la píldora. La barra de vidrio toma esa
   misma altura (mitad del alto de la píldora), así la barra empieza justo en la línea y no la rebasa. */
.clients-row { --pill-h: 1.75rem; }
.clients-pill { box-sizing: border-box; height: var(--pill-h); align-items: center; padding-top: 0; padding-bottom: 0; }
.clients-row::before { inset: calc(var(--pill-h) / 2 - 0.5px) 0 0 0; }
/* La píldora centra su texto en vertical (regla más específica que la del <span> genérico de la etiqueta) */
.clients-label .clients-pill { display: flex; align-items: center; }

/* ---------- Barra "Trusted by": resplandor celeste que sigue al cursor por el fondo ---------- */
/* Ocupa exactamente la barra de vidrio (mismo borde superior, mismos extremos desvanecidos) y queda
   por detrás de los logos. La mancha es un degradado radial, ya difuso de por sí: no hace falta blur. */
.clients-glow {
  position: absolute;
  inset: calc(var(--pill-h) / 2) 0 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.clients-glow i {
  position: absolute;
  left: 0;
  top: 0;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(173, 229, 255, 0.2), rgba(173, 229, 255, 0.09) 40%, rgba(173, 229, 255, 0.025) 70%, rgba(173, 229, 255, 0));
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .clients-row:hover .clients-glow { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .clients-glow { display: none; } }

/* Etiqueta "Play banger 🔥": el emoji sin cursiva y alineado con el texto */
.cursor-pill span { white-space: nowrap; }
.cursor-pill span i { font-style: normal; font-size: 0.9375em; line-height: 1; margin-left: -0.125rem; }

/* Cuadrícula uniforme: todas las tarjetas del mismo tamaño, en dos columnas (sin destacado a ancho completo) */
.grid > li:first-child,
.grid > li:last-child:nth-child(even) { grid-column: auto; }

/* Insignia junto al tipo de video (p. ej. "YC S25"): una cápsula fina, en la misma tipografía */
.card-tag { display: inline-flex; align-items: center; gap: 0.625rem; }
.badge {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #d3d6d8;
  white-space: nowrap;
}
.badge { display: inline-flex; align-items: center; gap: 0.375rem; }
.badge svg { width: 0.6875rem; height: 0.6875rem; flex: none; }
.badge-yc { padding-left: 0.3125rem; }
.clients-caption { align-items: center; }
.clients-caption .badge {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
}

/* Insignia de YC: mismo aire a la izquierda del símbolo que a la derecha del texto.
   A la derecha se descuenta el espaciado que la tipografía añade tras la última letra. */
.badge-yc { padding-left: 0.5rem; padding-right: calc(0.5rem - 0.12em); }

/* ---------- Reproductor en dos columnas: video a la izquierda, ficha de la empresa a la derecha ---------- */
.player {
  --info: 21rem;
  --pad: 0.625rem;
  --w: min(100vw - 2rem - var(--info) - var(--pad) * 2, (100dvh - 5rem) * 16 / 9, 70rem);
}
.player-box {
  position: relative;
  display: grid;
  grid-template-columns: var(--w) var(--info);
  padding: var(--pad);
}
/* Fondo de la caja, en una capa propia: así puede aparecer con fundido mientras el video llega volando */
.player-plate {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  background: #0c0c0c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2.5rem 6rem -2rem rgba(0, 0, 0, 0.9);
}
.player-frame { position: relative; z-index: 1; width: var(--w); box-shadow: none; }
.player-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  max-height: calc(var(--w) * 9 / 16);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 1.125rem 1rem 1.75rem;
}
.player-info .player-close { align-self: flex-end; margin: 0 -0.5rem 1.5rem 0; }
.info-tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0 0 0.875rem;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8f93;
}
.info-title { margin: 0 0 1rem; font-size: 2rem; font-weight: 400; line-height: 1.05; letter-spacing: -0.04em; color: #fff; }
.info-about { margin: 0; font-size: 0.9375rem; line-height: 1.5; letter-spacing: -0.005em; color: #b9bec2; -webkit-user-select: text; user-select: text; }
.info-founders { width: 100%; margin-top: 1.5rem; padding-top: 1.25rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.info-founders[hidden] { display: none; }
.info-label { margin: 0 0 0.75rem; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8f93; }
.info-founders li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.3125rem 0; font-size: 0.9375rem; letter-spacing: -0.01em; }
.founder-name { color: #e9ebec; }
.founder-role { font-size: 0.8125rem; color: #8a8f93; white-space: nowrap; }
.info-link {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  color: #b9bec2;
  -webkit-user-select: auto;
  user-select: auto;
  transition: color 200ms ease;
}
.info-link[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .info-link:hover { color: #fff; } }
/* Pantallas estrechas: el video arriba y la ficha debajo */
@media (max-width: 60rem) {
  .player { --w: min(100vw - 1.25rem - var(--pad) * 2, 70rem); }
  .player-inner { justify-content: flex-start; overflow-y: auto; padding-top: max(0.625rem, env(safe-area-inset-top, 0px)); padding-bottom: max(0.625rem, env(safe-area-inset-bottom, 0px)); }
  .player-box { grid-template-columns: var(--w); margin: auto 0; }
  .player-info { max-height: none; overflow: visible; padding: 1rem 0.625rem 0.875rem; }
  .player-info .player-close { position: absolute; right: 0.625rem; top: 0.75rem; margin: 0; }
  .info-tag { padding-right: 4.5rem; }
  .info-title { font-size: 1.625rem; }
  .info-link { margin-top: 0; }
}

/* La leyenda de la barra tiene alto fijo: la insignia de YC es más alta que el texto y, al entrar o salir,
   hacía crecer y encoger toda la barra de golpe. Ahora la barra no cambia de tamaño. */
.clients-caption { box-sizing: content-box; height: 1.375rem; min-height: 0; }