/* ═══════════════════════════════════════════════════════════════════
   Prisma Studio — sistema de diseño

   Estilo: Bento Box Grid + Interactive Product Demo sobre base oscura
   cinematográfica. Un prisma parte la luz blanca en su espectro: por eso
   el fondo es casi negro y el color solo aparece donde hay que mirar.

   Móvil primero. El 80% de las visitas llegan desde el teléfono, así que
   todo se dimensiona para 390px y a partir de ahí se ensancha.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fichas de diseño ─────────────────────────────────────────────── */
:root {
  /* Superficies. Nunca #000000 puro: en pantallas OLED el negro absoluto
     produce arrastre al hacer scroll. Las superficies son translúcidas
     para que el fondo se vea a través de ellas. */
  --negro: #06060a;
  --fondo: #08090e;
  --sup: rgba(255, 255, 255, 0.035);
  --sup-alta: rgba(255, 255, 255, 0.065);
  --sup-solida: #12141c;
  --vidrio: rgba(255, 255, 255, 0.045);
  --linea: rgba(255, 255, 255, 0.085);
  --linea-viva: rgba(255, 255, 255, 0.18);

  /* Texto. Los tres niveles pasan 4.5:1 contra --fondo. */
  --texto: #edeef3;
  --texto-2: #a0a6b4;
  --texto-3: #818897;

  /* El espectro. Cada servicio tiene su color y no se mezclan. */
  --violeta: #8b7bff;
  --cian: #3fc8ff;
  --verde: #3ddc97;
  --ambar: #ffb84d;
  --rosa: #ff6b8a;
  --acento: var(--violeta);
  --espectro: linear-gradient(
    90deg,
    var(--rosa) 0%,
    var(--ambar) 26%,
    var(--verde) 52%,
    var(--cian) 76%,
    var(--violeta) 100%
  );

  /* Ritmo. Escala de 4px. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 72px;
  --e9: 104px;

  --radio: 16px;
  --radio-g: 24px;
  --radio-p: 10px;

  --ancho: 1200px;
  --borde: 1px solid var(--linea);

  /* Un solo juego de curvas para todo el sitio. */
  --sale: cubic-bezier(0.16, 1, 0.3, 1);
  --rapido: 160ms var(--sale);
  --medio: 280ms var(--sale);
  --lento: 520ms var(--sale);

  --tipo: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Space Grotesk", var(--tipo);
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
  /* El encabezado fijo tapaba el título de la sección al saltar por anclas. */
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

a { color: inherit; }

/* `hidden` tiene que ganarle al `display` de los componentes: sin esto el
   botón "Abrir el sitio" seguía visible en los proyectos sin publicar. */
[hidden] { display: none !important; }

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

::selection {
  background: var(--violeta);
  color: var(--negro);
}

/* Saltar al contenido: el primer tabulador de quien navega con teclado. */
.saltar {
  position: absolute;
  left: -9999px;
  top: var(--e2);
  z-index: 200;
  padding: var(--e3) var(--e4);
  background: var(--violeta);
  color: var(--negro);
  border-radius: var(--radio-p);
  font-weight: 600;
}
.saltar:focus { left: var(--e2); }

/* ── Fondo ────────────────────────────────────────────────────────── */
/*
   Tres capas fijas, detrás de todo. Van en un elemento propio y no en
   `body::before` porque un hijo con z-index negativo se pinta por debajo
   del fondo de su ancestro y no se vería.

   1. Luz difusa del espectro, quieta: le da profundidad al negro.
   2. Dos auroras que derivan muy lento. El fondo respira sin que se note
      de dónde viene la luz.
   3. Grano, que rompe las bandas de los degradados.

   Sin patrones geométricos: la textura del sitio son las imágenes reales
   del mosaico de la portada.
*/
.fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.fondo__luz {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(52% 38% at 14% 4%, rgba(139, 123, 255, 0.22), transparent 62%),
    radial-gradient(46% 34% at 88% 14%, rgba(63, 200, 255, 0.15), transparent 62%),
    radial-gradient(60% 42% at 52% 48%, rgba(61, 220, 151, 0.07), transparent 66%),
    radial-gradient(48% 36% at 10% 84%, rgba(255, 107, 138, 0.11), transparent 62%),
    radial-gradient(44% 34% at 92% 92%, rgba(255, 184, 77, 0.08), transparent 62%);
}

.fondo__aurora {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  mix-blend-mode: screen;
}
.fondo__aurora--1 {
  top: -22vmax;
  left: -14vmax;
  background: radial-gradient(circle, rgba(139, 123, 255, 0.42), transparent 66%);
  animation: derivar1 34s ease-in-out infinite alternate;
}
.fondo__aurora--2 {
  bottom: -26vmax;
  right: -18vmax;
  background: radial-gradient(circle, rgba(63, 200, 255, 0.3), transparent 66%);
  animation: derivar2 44s ease-in-out infinite alternate;
}
@keyframes derivar1 {
  to { transform: translate3d(16vmax, 10vmax, 0) scale(1.14); }
}
@keyframes derivar2 {
  to { transform: translate3d(-14vmax, -8vmax, 0) scale(1.1); }
}

.fondo__grano {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Todo el contenido va por encima del fondo. */
.tope,
main,
.pie,
.fija,
.visor { position: relative; z-index: 1; }

/* ── Tipografía ───────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 9vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 6vw, 3rem); }
h3 { font-size: clamp(1.125rem, 3.4vw, 1.5rem); letter-spacing: -0.02em; }

p { margin: 0; text-wrap: pretty; }

.plomo {
  color: var(--texto-2);
  font-size: clamp(1rem, 2.6vw, 1.1875rem);
  line-height: 1.55;
  max-width: 60ch;
}

/* El rubro del proyecto. Antes iba en versalitas monoespaciadas, como el
   resto de los rotulillos de sección; se quitaron todos. */
.obra__rubro {
  font-size: 0.8125rem;
  color: var(--texto-3);
}

.iris {
  background: var(--espectro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Estructura ───────────────────────────────────────────────────── */
.marco {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e5);
}

section { padding-block: var(--e8); }

.cabecera-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-bottom: var(--e6);
}

@media (min-width: 900px) {
  .marco { padding-inline: var(--e7); }
  section { padding-block: var(--e9); }
  .cabecera-seccion { margin-bottom: var(--e7); }
}

/* ── Encabezado ───────────────────────────────────────────────────── */
.tope {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(8, 9, 14, 0.7);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: var(--borde);
}

.tope__caja {
  display: flex;
  align-items: center;
  gap: var(--e4);
  height: 64px;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e5);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-right: auto;
  text-decoration: none;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
/* El logo lleva prisma y espectro dentro: a 26px los cuatro rayos de
   colores se empastan y no se distingue nada. */
.marca svg { width: 34px; height: 34px; flex: none; }
.marca span { white-space: nowrap; }
.marca b { font-weight: 400; color: var(--texto-3); }

.menu {
  display: none;
  gap: var(--e2);
}
.menu a {
  padding: var(--e2) var(--e3);
  border-radius: 999px;
  text-decoration: none;
  color: var(--texto-2);
  font-size: 0.9375rem;
  transition: color var(--rapido), background var(--rapido);
}
.menu a:hover { color: var(--texto); background: var(--vidrio); }

@media (min-width: 900px) {
  .menu { display: flex; }
  .tope__caja { padding-inline: var(--e7); }
}

/* ── Botones ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  /* 44px de alto: el mínimo táctil. */
  min-height: 44px;
  padding: var(--e3) var(--e5);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--rapido), background var(--rapido),
    border-color var(--rapido), opacity var(--rapido);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--fuerte {
  background: var(--violeta);
  color: var(--negro);
}
.btn--fuerte:hover { background: #a294ff; }

.btn--verde {
  background: var(--verde);
  color: var(--negro);
}
.btn--verde:hover { background: #5ee6ab; }

.btn--linea {
  border: 1px solid var(--linea-viva);
  color: var(--texto);
  background: rgba(255, 255, 255, 0.02);
}
.btn--linea:hover { background: var(--vidrio); border-color: var(--texto-3); }

.btn--chico { min-height: 38px; padding: var(--e2) var(--e4); font-size: 0.875rem; }

/* ── Portada ──────────────────────────────────────────────────────── */
.portada {
  position: relative;
  padding-top: var(--e7);
  padding-bottom: var(--e8);
}

/*
   Detrás del titular van los sitios de verdad, en un mosaico inclinado.
   Tres reglas lo mantienen a raya:

   - La máscara se centra donde está el texto y se apaga antes de llegar al
     teléfono de la derecha, que es lo que no se puede opacar.
   - El velo oscuro va por encima del mosaico, no por debajo, para que el
     titular conserve su contraste.
   - Las teselas salen de tools/mosaico.mjs y pesan 104 KB entre las seis.
     Las capturas completas habrían sido varios megas en la primera pantalla.
*/
.portada__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.portada__mosaico {
  position: absolute;
  top: -26%;
  left: -12%;
  width: 128%;
  height: 152%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  transform: rotate(-8deg);
  opacity: 0.52;
  -webkit-mask-image: radial-gradient(
    76% 52% at 40% 30%, #000 0%, rgba(0, 0, 0, 0.5) 44%, transparent 72%
  );
  mask-image: radial-gradient(
    76% 52% at 40% 30%, #000 0%, rgba(0, 0, 0, 0.5) 44%, transparent 72%
  );
}

.portada__col {
  display: grid;
  gap: 18px;
  align-content: start;
}
.portada__col:nth-child(2) { transform: translateY(-9%); }
.portada__col:nth-child(3) { transform: translateY(6%); }
.portada__col:nth-child(4) { transform: translateY(-4%); }
/* En móvil el teléfono va centrado bajo el texto, así que sobran columnas. */
.portada__col:nth-child(n + 3) { display: none; }

.portada__col img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  filter: brightness(0.62) saturate(0.9) contrast(1.02);
}

.portada__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Termina en transparente, no en el color de fondo: con un final opaco
     quedaba un escalón de tono contra la sección siguiente, que sí deja ver
     el resplandor. El mosaico ya se apaga solo por su máscara. */
  background:
    radial-gradient(
      54% 72% at 20% 44%, rgba(8, 9, 14, 0.74) 0%, rgba(8, 9, 14, 0) 76%
    ),
    linear-gradient(
      180deg,
      rgba(8, 9, 14, 0.34) 0%,
      rgba(8, 9, 14, 0.48) 45%,
      rgba(8, 9, 14, 0.26) 82%,
      rgba(8, 9, 14, 0) 100%
    );
}

@media (min-width: 900px) {
  .portada__mosaico {
    grid-template-columns: repeat(4, 1fr);
    opacity: 0.64;
    /* Se apaga antes del 62% de ancho, que es donde empieza el teléfono. */
    -webkit-mask-image: radial-gradient(
      48% 54% at 24% 34%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 66%
    );
    mask-image: radial-gradient(
      48% 54% at 24% 34%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 66%
    );
  }
  .portada__col:nth-child(n + 3) { display: grid; }
}

.portada__caja { position: relative; }

.portada h1 { margin-bottom: var(--e4); }

.portada__sub {
  color: var(--texto-2);
  font-size: clamp(1.0625rem, 3vw, 1.375rem);
  max-width: 46ch;
  margin-bottom: var(--e6);
}

.portada__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-bottom: var(--e7);
}

.cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e3);
  border-top: var(--borde);
  padding-top: var(--e5);
}
.cifra__n {
  font-family: var(--titulo);
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.cifra__t {
  color: var(--texto-3);
  font-size: 0.8125rem;
  margin-top: var(--e1);
  line-height: 1.3;
}

@media (min-width: 900px) {
  .portada__caja {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--e8);
    align-items: center;
  }
  .portada__texto { grid-column: 1; grid-row: 1; }
  .portada__muestra { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .cifras { grid-column: 1; grid-row: 2; }
}

/* Teléfono que se desplaza solo en la portada */
.muestra {
  display: flex;
  justify-content: center;
  /* El hueco de abajo es para la etiqueta flotante, que sale del marco. */
  margin-bottom: var(--e8);
}
.muestra__cinta {
  position: relative;
  width: min(260px, 72vw);
}
.muestra__etiqueta {
  position: absolute;
  z-index: 3;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sup-solida);
  border: var(--borde);
  font-size: 0.75rem;
  color: var(--texto-2);
  white-space: nowrap;
}
.muestra__punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
}

@media (min-width: 900px) {
  .muestra { margin-bottom: 0; }
  .muestra__cinta { width: 300px; }
}

/* ── Marcos de dispositivo ────────────────────────────────────────── */
.aparato {
  position: relative;
  background: #1b1d26;
  border: 1px solid var(--linea-viva);
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
}

.aparato--telefono {
  border-radius: 34px;
  padding: 9px;
}
.aparato--telefono .aparato__pantalla {
  border-radius: 26px;
  aspect-ratio: 390 / 780;
}
/* La isla del teléfono */
.aparato--telefono::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 20px;
  border-radius: 999px;
  background: #0c0d12;
}

.aparato--portatil {
  border-radius: 12px;
  padding: 0;
}
.aparato--portatil .aparato__pantalla {
  border-radius: 0 0 10px 10px;
  aspect-ratio: 1440 / 900;
}

/* Barra del navegador */
.barra {
  display: flex;
  align-items: center;
  gap: var(--e2);
  height: 34px;
  padding-inline: var(--e3);
  background: #191b24;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.barra__luces { display: flex; gap: 6px; flex: none; }
.barra__luces i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a3d4a;
}
.barra__url {
  flex: 1;
  min-width: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #0f1017;
  color: var(--texto-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aparato__pantalla {
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* Lienzo con las tiras apiladas. Se desplaza de verdad. */
.lienzo {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
  -webkit-overflow-scrolling: touch;
}
.lienzo img {
  width: 100%;
  height: auto;
  display: block;
}
.lienzo::-webkit-scrollbar { width: 6px; }
.lienzo::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 3px;
}

/* Variante que se desplaza sola (portada). No lleva scroll manual.
   El recorrido y la duración los calcula vitrina.js en píxeles reales:
   con porcentajes el desplazamiento cambiaba de tamaño en cada pantalla. */
.lienzo--auto { overflow: hidden; }
.lienzo--auto .lienzo__tira {
  animation: recorrer var(--duracion, 30s) linear infinite;
  will-change: transform, opacity;
}
/*
   Baja, se apaga abajo, vuelve arriba mientras esta invisible y se enciende.
   Antes iba con `alternate`, y eso hacia que el regreso durase lo mismo que
   la bajada — casi un minuto rebobinando — asi que parecia que se quedaba
   trabado al final. El fundido corta ese regreso y el corte no se ve.
*/
@keyframes recorrer {
  0%, 4%   { transform: translateY(0); opacity: 1; }
  86%      { transform: translateY(var(--recorrido, -60%)); opacity: 1; }
  93%      { transform: translateY(var(--recorrido, -60%)); opacity: 0; }
  94%      { transform: translateY(0); opacity: 0; }
  100%     { transform: translateY(0); opacity: 1; }
}

/* ── Rejilla bento de trabajos ────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
}

@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e5);
  }
  .bento > :first-child { grid-column: span 2; }
}

.obra {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--borde);
  border-radius: var(--radio-g);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  text-align: left;
  transition: transform var(--medio), border-color var(--medio);
}
.obra:hover {
  transform: translateY(-3px);
  border-color: var(--linea-viva);
}
.obra:active { transform: translateY(0) scale(0.995); }

.obra__foto {
  position: relative;
  overflow: hidden;
  background: #12141c;
  aspect-ratio: 16 / 11;
}
.obra__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--lento);
}
.obra:hover .obra__foto img { transform: scale(1.03); }

/* La primera tarjeta es ancha: la foto se recorta más baja. */
@media (min-width: 760px) {
  .bento > :first-child .obra__foto { aspect-ratio: 21 / 9; }
}

.obra__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e5);
}

.obra__fila {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  flex-wrap: wrap;
}

.obra__pie {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e3);
  flex-wrap: wrap;
}

.obra__desc { color: var(--texto-2); font-size: 0.9375rem; }

.cinta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--vidrio);
  font-size: 0.75rem;
  color: var(--texto-2);
  white-space: nowrap;
}
.cinta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.cinta--vivo { color: var(--verde); border-color: rgba(61, 220, 151, 0.3); }
.cinta--obra { color: var(--ambar); border-color: rgba(255, 184, 77, 0.3); }
/* Proyecto de muestra, no un cliente: conviene que se distinga de un vistazo. */
.cinta--demo { color: var(--cian); border-color: rgba(63, 200, 255, 0.32); }

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e2);
  margin-top: var(--e2);
}
.etiqueta {
  padding: 2px 9px;
  border-radius: 6px;
  background: var(--vidrio);
  border: var(--borde);
  color: var(--texto-3);
  font-size: 0.75rem;
  font-family: var(--mono);
}

/* ── Visor de proyecto ────────────────────────────────────────────── */
.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgba(5, 6, 10, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.visor[open] { display: block; }

.visor__hoja {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  animation: subir var(--medio) both;
}
@keyframes subir {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.visor__tope {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: var(--borde);
  flex: none;
}
.visor__titulo {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 1rem;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visor__cerrar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: var(--borde);
  flex: none;
  transition: background var(--rapido);
}
.visor__cerrar:hover { background: var(--vidrio); }
.visor__cerrar svg { width: 18px; height: 18px; }

.visor__controles {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-bottom: var(--borde);
  /* Envuelve en vez de desplazarse: en 390px el selector de dispositivo
     quedaba cortado contra el borde y no se veía que estaba ahí. */
  flex-wrap: wrap;
  flex: none;
}

.visor__cuerpo {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--e4);
  overflow: hidden;
}

/* Dentro del visor el aparato se ajusta al alto disponible, no al ancho:
   así nunca se sale de la pantalla en un portátil de poca altura. */
.visor__cuerpo .aparato {
  max-width: 100%;
  max-height: 100%;
}
.visor__cuerpo .aparato--telefono {
  height: 100%;
  width: auto;
  aspect-ratio: 390 / 800;
}
.visor__cuerpo .aparato--telefono .aparato__pantalla {
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
}
.visor__cuerpo .aparato--portatil {
  display: flex;
  flex-direction: column;
  width: min(1080px, 100%);
  height: 100%;
}
.visor__cuerpo .aparato--portatil .aparato__pantalla {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}

.visor__pie {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  padding-bottom: max(var(--e3), env(safe-area-inset-bottom));
  border-top: var(--borde);
  flex: none;
  font-size: 0.8125rem;
  color: var(--texto-3);
  flex-wrap: wrap;
}

.grupo {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--sup);
  border: var(--borde);
  flex: none;
}
.grupo button {
  min-height: 34px;
  padding: 0 var(--e4);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--texto-3);
  white-space: nowrap;
  transition: background var(--rapido), color var(--rapido);
}
.grupo button:hover { color: var(--texto); }
.grupo button[aria-selected="true"],
.grupo button[aria-pressed="true"] {
  background: var(--sup-alta);
  color: var(--texto);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

@media (min-width: 900px) {
  .visor__hoja {
    inset: 3vh 3vw;
    border: var(--borde);
    border-radius: var(--radio-g);
    overflow: hidden;
  }
  .visor__tope,
  .visor__controles,
  .visor__pie { padding-inline: var(--e5); }
}

/* ── Panel genérico ───────────────────────────────────────────────── */
.panel {
  border: var(--borde);
  border-radius: var(--radio-g);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

/* ══ Que te encuentren ════════════════════════════════════════════ */

/* Selector de caso */
.casos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e5);
}
.caso {
  min-height: 40px;
  padding: var(--e2) var(--e4);
  border-radius: 999px;
  border: var(--borde);
  background: var(--vidrio);
  color: var(--texto-2);
  font-size: 0.8125rem;
  transition: all var(--rapido);
}
.caso:hover { color: var(--texto); }
.caso[aria-pressed="true"] {
  background: var(--violeta);
  border-color: var(--violeta);
  color: var(--negro);
  font-weight: 600;
}

.buscador { display: flex; flex-direction: column; }

.buscador__tabs {
  display: flex;
  gap: var(--e1);
  padding: var(--e3) var(--e3) 0;
  border-bottom: var(--borde);
}
.buscador__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  padding: 0 var(--e4);
  border-radius: var(--radio-p) var(--radio-p) 0 0;
  color: var(--texto-3);
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color var(--rapido), border-color var(--rapido), background var(--rapido);
}
.buscador__tab svg { width: 17px; height: 17px; }
.buscador__tab:hover { color: var(--texto-2); }
.buscador__tab[aria-selected="true"] {
  color: var(--texto);
  border-bottom-color: var(--violeta);
  background: rgba(139, 123, 255, 0.07);
}

/* La barra de búsqueda se escribe sola */
.buscador__barra {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: var(--e4);
  padding: var(--e3) var(--e4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--linea-viva);
}
.buscador__barra > svg {
  width: 18px;
  height: 18px;
  color: var(--texto-3);
  flex: none;
}
.buscador__texto {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--texto);
}
.cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: -2px;
  background: var(--cian);
  animation: latir 1s steps(2) infinite;
}
@keyframes latir { 50% { opacity: 0; } }

.buscador__cuerpo {
  padding: 0 var(--e4) var(--e5);
  min-height: 380px;
}
@media (min-width: 760px) {
  .buscador__barra { margin: var(--e5); }
  .buscador__cuerpo { padding: 0 var(--e5) var(--e6); }
}

/* Esqueleto mientras "busca" */
.cargando { display: grid; gap: var(--e5); padding-top: var(--e2); }
.cargando i {
  display: block;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sup) 25%, var(--sup-alta) 50%, var(--sup) 75%);
  background-size: 240% 100%;
  animation: brillar 1.3s linear infinite;
}
.cargando i:nth-child(2n) { width: 72%; }
.cargando i:nth-child(3n) { width: 54%; }
@keyframes brillar { to { background-position: -240% 0; } }

/* Un resultado de búsqueda */
.resultado {
  padding: var(--e4);
  border-radius: var(--radio);
  border: 1px solid transparent;
  animation: entrar var(--medio) both;
}
.resultado + .resultado { margin-top: var(--e2); }
@keyframes entrar {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.resultado__url {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.75rem;
  color: var(--texto-3);
  margin-bottom: var(--e1);
}
.resultado__icono {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sup-alta);
  border: var(--borde);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--texto-2);
  flex: none;
}
.resultado__titulo {
  font-size: 1.0625rem;
  font-weight: 500;
  color: #a9bdff;
  line-height: 1.35;
  margin-bottom: var(--e1);
}
.resultado__desc {
  font-size: 0.875rem;
  color: var(--texto-2);
  line-height: 1.55;
}

/* El del cliente es el único encendido */
.resultado--tuyo {
  border-color: rgba(139, 123, 255, 0.4);
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(139, 123, 255, 0.13), transparent 70%),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 0 1px rgba(139, 123, 255, 0.12),
    0 18px 40px -24px rgba(139, 123, 255, 0.6);
}
.resultado--tuyo .resultado__icono {
  background: var(--violeta);
  color: var(--negro);
  border-color: transparent;
}

/* Los demás se ven, pero no compiten */
.resultado--otro { opacity: 0.42; }
.resultado--otro .resultado__titulo { color: var(--texto-2); font-size: 0.9375rem; }

.riqueza {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}
.riqueza span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--vidrio);
  border: var(--borde);
  font-size: 0.75rem;
  color: var(--texto-2);
}
.riqueza svg { width: 12px; height: 12px; }
.riqueza .abre { color: var(--verde); }
.riqueza .estrella { color: var(--ambar); }

.subenlaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e1) var(--e4);
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: var(--borde);
}
.subenlaces span {
  font-size: 0.8125rem;
  color: #a9bdff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pisada {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: var(--borde);
  font-size: 0.8125rem;
  color: var(--texto-3);
}
.pisada svg { width: 15px; height: 15px; flex: none; color: var(--violeta); margin-top: 3px; }

/* Vista del asistente */
.ia__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e4);
}
.ia__sello {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(139, 123, 255, 0.35), rgba(63, 200, 255, 0.25));
  border: 1px solid rgba(139, 123, 255, 0.35);
  flex: none;
}
.ia__sello svg { width: 18px; height: 18px; color: #cfc6ff; }
.ia__quien { font-size: 0.875rem; font-weight: 600; }
.ia__nota { font-size: 0.75rem; color: var(--texto-3); }

.ia__texto {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--texto-2);
  min-height: 10em;
}
.ia__texto b { color: var(--texto); font-weight: 600; }
.ia__texto mark {
  background: rgba(139, 123, 255, 0.18);
  color: var(--texto);
  border-radius: 4px;
  padding: 1px 4px;
  font-weight: 600;
}

.ia__fuentes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: var(--borde);
}
.ia__fuente {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 8px;
  background: rgba(139, 123, 255, 0.1);
  border: 1px solid rgba(139, 123, 255, 0.3);
  font-size: 0.75rem;
  color: #cfc6ff;
}
.ia__fuente svg { width: 13px; height: 13px; }

.mando {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-top: var(--e4);
}

.reloj {
  flex: 1;
  min-width: 90px;
  height: 3px;
  border-radius: 999px;
  background: var(--sup-alta);
  overflow: hidden;
}
.reloj i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--violeta);
  transition: width 300ms linear;
}

/* ══ Agente de IA en la web ═══════════════════════════════════════ */
.agente {
  display: grid;
  gap: var(--e6);
  align-items: start;
}
@media (min-width: 1000px) {
  .agente { grid-template-columns: 1.25fr 0.75fr; gap: var(--e7); }
}

.agente__marco {
  position: relative;
  border-radius: var(--radio-g);
  overflow: hidden;
  border: 1px solid var(--linea-viva);
  background: #0d0f16;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.agente__lienzo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
@media (min-width: 620px) { .agente__lienzo { aspect-ratio: 16 / 11; } }
@media (min-width: 1000px) { .agente__lienzo { aspect-ratio: 16 / 10; } }

/* La web del cliente, atrás: se reconoce pero no compite con el agente. */
.agente__sitio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.6) brightness(0.4) blur(1.5px);
}
.agente__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(8, 9, 14, 0.32), rgba(8, 9, 14, 0.84));
}

.widget {
  position: absolute;
  right: var(--e3);
  bottom: var(--e3);
  left: var(--e3);
  display: flex;
  flex-direction: column;
  max-height: calc(100% - var(--e5));
  border-radius: 18px;
  overflow: hidden;
  background: rgba(16, 18, 26, 0.92);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--linea-viva);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
}
@media (min-width: 620px) {
  .widget {
    left: auto;
    width: 344px;
    right: var(--e4);
    bottom: var(--e4);
    max-height: calc(100% - var(--e6));
  }
}

.widget__tope {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: var(--borde);
  background: rgba(255, 255, 255, 0.03);
  flex: none;
}
.widget__sello {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--violeta), #5f7bff);
  color: #0a0b10;
  flex: none;
}
.widget__sello svg { width: 17px; height: 17px; }
.widget__quien { min-width: 0; line-height: 1.25; margin-right: auto; }
.widget__nombre {
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget__estado {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  color: var(--texto-3);
}
.widget__estado i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
}

.widget__hilo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  scrollbar-width: none;
}
.widget__hilo::-webkit-scrollbar { display: none; }

.globo {
  max-width: 88%;
  padding: var(--e3) var(--e4);
  border-radius: 14px;
  font-size: 0.8125rem;
  line-height: 1.55;
  animation: aparecer 240ms var(--sale) both;
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.globo b { font-weight: 600; color: var(--texto); }

.globo--visitante {
  align-self: flex-end;
  background: var(--violeta);
  color: #0a0b10;
  border-bottom-right-radius: 4px;
}
.globo--visitante b { color: #0a0b10; }

.globo--agente {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: var(--borde);
  color: var(--texto-2);
  border-bottom-left-radius: 4px;
}

/* Aviso de que el agente pasó el caso a una persona */
.globo--traspaso {
  align-self: center;
  max-width: 96%;
  text-align: center;
  background: rgba(61, 220, 151, 0.09);
  border: 1px solid rgba(61, 220, 151, 0.28);
  color: var(--verde);
  font-size: 0.6875rem;
  border-radius: 999px;
  padding: var(--e2) var(--e4);
}

.pensando {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: var(--borde);
  font-size: 0.6875rem;
  color: var(--texto-3);
}
.pensando i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violeta);
  animation: rebotar 1.1s infinite;
}
.pensando i:nth-of-type(2) { animation-delay: 0.15s; }
.pensando i:nth-of-type(3) { animation-delay: 0.3s; }
@keyframes rebotar {
  0%, 60%, 100% { transform: none; opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* El campo del visitante también se escribe solo */
.widget__pie {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3);
  border-top: var(--borde);
  background: rgba(255, 255, 255, 0.02);
  flex: none;
}
.widget__campo {
  flex: 1;
  min-width: 0;
  padding: var(--e2) var(--e3);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  border: var(--borde);
  font-size: 0.75rem;
  color: var(--texto);
  min-height: 32px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.widget__campo:empty::before {
  content: "Escribe tu pregunta";
  color: var(--texto-3);
}
.widget__enviar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sup-alta);
  color: var(--texto-3);
  flex: none;
  transition: background var(--rapido), color var(--rapido);
}
.widget__enviar--activo { background: var(--violeta); color: #0a0b10; }
.widget__enviar svg { width: 14px; height: 14px; }

/* Notas al lado del agente */
.notas { display: grid; gap: var(--e3); }
.nota {
  display: flex;
  gap: var(--e3);
  padding: var(--e4);
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--sup);
}
.nota__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--vidrio);
  border: var(--borde);
  flex: none;
  color: var(--violeta);
}
.nota__ico svg { width: 17px; height: 17px; }
.nota h3 { font-size: 0.9375rem; margin-bottom: 2px; }
.nota p { font-size: 0.8125rem; color: var(--texto-2); }

/* ── Servicios ────────────────────────────────────────────────────── */
.tarjetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
}
@media (min-width: 700px) {
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta {
  padding: var(--e5);
  border: var(--borde);
  border-radius: var(--radio-g);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tarjeta__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: var(--e4);
  background: var(--vidrio);
  border: var(--borde);
}
.tarjeta__ico svg { width: 21px; height: 21px; }
.tarjeta h3 { margin-bottom: var(--e2); }
.tarjeta p { color: var(--texto-2); font-size: 0.9375rem; }

.tarjeta--violeta .tarjeta__ico { color: var(--violeta); }
.tarjeta--cian .tarjeta__ico { color: var(--cian); }
.tarjeta--verde .tarjeta__ico { color: var(--verde); }

/* ── Cierre ───────────────────────────────────────────────────────── */
.cierre {
  position: relative;
  text-align: center;
  border: var(--borde);
  border-radius: var(--radio-g);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(139, 123, 255, 0.2), transparent 62%),
    rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: var(--e8) var(--e5);
  overflow: hidden;
}
.cierre h2 { margin-bottom: var(--e4); }
.cierre .plomo { margin-inline: auto; margin-bottom: var(--e6); }
.cierre__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  justify-content: center;
}

.franja {
  height: 3px;
  background: var(--espectro);
  border-radius: 999px;
}

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie {
  border-top: var(--borde);
  padding-block: var(--e6);
  /* Deja aire para la barra fija del móvil. */
  padding-bottom: calc(var(--e6) + 84px);
  color: var(--texto-3);
  font-size: 0.875rem;
}
.pie__caja {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--e4); }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--texto); }

@media (min-width: 760px) {
  .pie__caja { flex-direction: row; align-items: center; justify-content: space-between; }
  .pie { padding-bottom: var(--e6); }
}

/* ── Barra fija de contacto en móvil ──────────────────────────────── */
.fija {
  position: fixed;
  z-index: 55;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  padding-bottom: max(var(--e3), env(safe-area-inset-bottom));
  background: rgba(8, 9, 14, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: var(--borde);
}
.fija .btn { flex: 1; }
@media (min-width: 860px) {
  .fija { display: none; }
}

/* ── Entrada al hacer scroll ──────────────────────────────────────── */
.entra {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--lento), transform var(--lento);
}
.entra.dentro { opacity: 1; transform: none; }

/* ── Menos movimiento ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .entra { opacity: 1; transform: none; }
  .lienzo--auto .lienzo__tira { animation: none; }
  .fondo__aurora { animation: none; }
}