/**
 * La portada.
 *
 * Una sola escena, construida por capas y dentro de un lienzo:
 *
 *   0  el fondo general de la página
 *   1  la atmósfera — luz ambiental en radiales casi imperceptibles
 *   2  SYLAR gigante, editorial, detrás de todo
 *   3  las órbitas — dos curvas que conectan copy, robot y tarjetas
 *   4  el robot, con halo y reflejo: dentro de la escena, no pegado encima
 *   5  el mensaje
 *   6  el racimo de tarjetas
 *   7  las microinteracciones
 *
 * Dirección: editorial tecnológico claro, vidrio sutil, sin neón y sin grilla
 * SaaS. La referencia compositiva aporta proporciones; la identidad es Sylar.
 * El sistema compartido vive en `site.css`.
 */

/* ── Barra: la isla compartida de site.css, sin excepciones. Una pieza que
   flota sobre la escena no compite con ella. ──────────────────────────────── */

/* Microinteracción de botones: un asomo de escala, nada más. El hover del
   botón de vidrio vive con su componente en site.css. */
@media (hover: hover) {
  .landing .button:hover { transform: translateY(-1px) scale(1.015); }
}

/* ── Capa 0-1: el lienzo. La escena vive en un canvas centrado con luz
   ambiental propia — no flota sobre blanco infinito. El borde y la sombra
   son casi subliminales: espacio diseñado, no tarjeta gigante. ────────────── */

/* La atmósfera es de la página, no de la sección. Cuando vivía en el hero, el
   degradado arrancaba bajo la barra y esa costura hacía que la barra se leyera
   como un contenedor aparte, aunque fuera transparente. */
.landing {
  --content: 1520px;
  background:
    radial-gradient(ellipse 42% 27% at 10% 3%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(ellipse 46% 34% at 52% 38%, rgba(167, 139, 250, .13), transparent 70%),
    radial-gradient(ellipse 38% 31% at 90% 24%, rgba(129, 140, 248, .09), transparent 72%),
    radial-gradient(ellipse 54% 22% at 50% 82%, rgba(255, 255, 255, .55), transparent 72%),
    linear-gradient(180deg, #faf8ff, #f3f0ff);
  background-repeat: no-repeat;
}

/* La escena ocupa la página entera, sin fondo propio: el de la página ya
   llega hasta los bordes de la ventana. Sin lienzo, sin tarjeta, sin costura. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 4svh, 40px) 20px 34px;
  text-align: center;
}

/* ── Capa 2: SYLAR editorial. Enorme, cercano, apretado; el robot lo tapa y
   eso —la oclusión— es lo que fabrica la profundidad. El degradado lo apaga
   hacia abajo para cederle el lugar al titular. ───────────────────────────── */

/* Legible en menos de un segundo, y aun así fondo: opacidad pareja en la
   mitad superior y un apagado suave solo al final. Antes el desvanecido
   arrancaba tan arriba que quedaban fragmentos abstractos. */
.hero-marca {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 50%;
  translate: -50% 0;
  margin: 0;
  width: max-content;
  color: rgba(87, 79, 145, .085);
  font-size: clamp(110px, 28vw, 150px);
  font-weight: 560;
  letter-spacing: -.075em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .4) 75%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .4) 75%, transparent 96%);
}

/* ── Capa 3: las órbitas. Decorativas, sofisticadas, casi invisibles. ─────── */

/* ── Capa 4: el robot. El asset de siempre, más grande, con luz debajo y un
   resplandor detrás del torso: presente físicamente en la escena. ─────────── */

.hero-visual {
  order: 5;
  position: relative;
  z-index: 3;
  margin: 0;
  display: grid;
  place-items: center;
  animation: hero-entra .9s .22s var(--curva) both;
}

/* El agente es el render oficial animado por capas. Esta hoja sigue siendo la
   dueña del encuadre —tamaño y posición dentro de la escena— y el movimiento es
   del componente.

   Dos cosas cambiaron con el reemplazo:

   - `aspect-ratio` sostiene la caja desde la primera pintura, así que el
     contenedor mide lo mismo antes y después de que React monte: cero
     desplazamiento de contenido;
   - la figura usa el mismo lienzo en reposo, transición y saludo; la sustitución
     de fotogramas no cambia la caja ni desplaza el contenido. */
.hero-robot {
  position: relative;
  z-index: 1;
  width: clamp(250px, 72vw, 330px);
  aspect-ratio: 1086 / 1448;
}

/* El resplandor detrás del torso: integra al robot con el ambiente. */
.hero-halo {
  position: absolute;
  z-index: 0;
  top: 30%;
  width: 78%;
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(117, 72, 255, .16) 0%, rgba(117, 72, 255, .06) 35%, transparent 68%);
  filter: blur(24px);
}

/* La luz del piso: el reflejo del ambiente, no una sombra dura. */
.hero-piso {
  position: absolute;
  z-index: 0;
  bottom: -4%;
  width: 82%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(117, 72, 255, .16) 0%, rgba(117, 72, 255, .06) 35%, transparent 68%);
  filter: blur(12px);
}

/* ── Capa 5: el mensaje. ──────────────────────────────────────────────────── */

.hero-texto { order: 1; position: relative; z-index: 4; animation: hero-entra .8s .1s var(--curva) both; }

.hero-insignia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(14px, 2.4svh, 24px);
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(124, 58, 237, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  color: var(--violet-deep);
  font-size: 13px;
  font-weight: 580;
}

.hero-texto h1 {
  margin: 0;
  font-size: clamp(42px, 11vw, 54px);
  font-weight: 690;
  letter-spacing: -.055em;
  line-height: .95;
}

.hero-texto h1 span,
.hero-texto h1 em { display: block; }

.hero-texto h1 em { color: var(--violet); font-style: normal; }

/* La declaración: dos frases, dos voces — la primera cede, la segunda manda.
   Más aire respecto del titular: son dos momentos, no un bloque. */
.hero-frase {
  margin: clamp(20px, 3.2svh, 32px) 0 0;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 640;
  letter-spacing: -.022em;
  line-height: 1.35;
}

/* Cada voz en su renglón: quebrar a mitad de frase deshace la declaración. */
.hero-frase span,
.hero-frase em { display: block; }

.hero-frase span { color: var(--muted-strong); font-size: .88em; font-weight: 560; }
.hero-frase em { color: var(--violet-deep); font-style: normal; }

/* El subtexto son la declaración y el eco de One Sylar: el detalle vive en
   las tarjetas y en Producto. Cinco piezas de texto en la portada, ni una más. */
.hero-frase { margin-bottom: clamp(22px, 3.4svh, 34px); }

.hero-texto .actions { justify-content: center; }

/* La acción secundaria es de vidrio, como las tarjetas. El componente vive en
   site.css desde que Mission Control también lo usa. */

/* El eco de One Sylar: una frase chica bajo las acciones. El orbe en miniatura
   repite el degradado del asistente de voz —la esquina inferior derecha— para
   que el texto y el botón se reconozcan sin que esta hoja toque su código. */
.hero-eco {
  max-width: 52ch;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.hero-eco a {
  color: var(--violet-deep);
  font-weight: 620;
  text-decoration: underline;
  text-decoration-color: rgba(124, 58, 237, .35);
  text-underline-offset: 3px;
}

.hero-eco-orbe {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: -1px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95) 0 12%, transparent 42%),
    conic-gradient(from 210deg, #211b55, #6635df, #c6a8ff, #8148ec, #28205f, #7c3aed, #211b55);
  box-shadow: 0 2px 6px rgba(75, 38, 165, .35);
}

/* De tableta hacia arriba el mensaje se alinea a la izquierda; el eco lo sigue. */
@media (min-width: 801px) {
  .hero-eco { margin-inline: 0; }
}

/* ── Capa 6: el racimo de tarjetas. Vidrio liviano, alturas distintas,
   bordes solapados: dirección de arte, no componentes de UI. ──────────────── */

.hero-tarjetas {
  order: 6;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  /* El anillo del bisel mide 8 px por lado: el aire entre tarjetas lo suma
     para que los marcos no se toquen. */
  gap: 30px;
  padding-inline: 8px;
}

/* Doble bisel sin tocar el DOM: el marco exterior son dos anillos de sombra
   extendida —vidrio y hairline— alrededor del núcleo blanco. La pieza queda
   encajada en la escena, no puesta encima. */
.hero-tarjetas a {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 9px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 20px;
  /* Vidrio, pero opaco lo suficiente: al 68 % el brazo del robot se veía a
     través de la primera tarjeta y el texto quedaba sucio. */
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, .42),
    0 0 0 8px rgba(30, 27, 75, .07),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 24px 80px rgba(47, 32, 88, .1);
  color: inherit;
  text-align: left;
  text-decoration: none;
  transition: box-shadow var(--paso) var(--curva), translate var(--paso) var(--curva);
  animation: hero-entra .7s both;
}

.hero-tarjetas a:nth-child(1) { animation-delay: .34s; }
.hero-tarjetas a:nth-child(2) { animation-delay: .44s; }
.hero-tarjetas a:nth-child(3) { animation-delay: .54s; }

.hero-tarjetas b { font-size: 15.5px; font-weight: 640; letter-spacing: -.02em; }
.hero-tarjetas a > span:not(.tarjeta-icono) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Un solo lenguaje de ícono para las tres: cuadrado redondeado, tinte violeta
   y trazo de 1,8 — el mismo de los sellos. Antes convivían un cuadrado de
   40 px, el rostro del robot a 52 px y una tarjeta sin ícono: tres pesos
   distintos en una fila de tres. */
.tarjeta-icono {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 3px;
  border: 1px solid rgba(124, 58, 237, .12);
  border-radius: 13px;
  background: rgba(124, 58, 237, .08);
  color: var(--violet-deep);
}

@media (hover: hover) {
  .hero-tarjetas a:hover {
    translate: 0 -4px;
    box-shadow:
      0 0 0 7px rgba(255, 255, 255, .55),
      0 0 0 8px rgba(30, 27, 75, .09),
      inset 0 1px 0 rgba(255, 255, 255, .9),
      0 30px 90px rgba(47, 32, 88, .14);
  }
}

/* ── Las micro-escenas de los íconos. Cada tarjeta actúa su frase una sola
   vez, recién cuando su tarjeta ya aterrizó (los retardos siguen a los de
   `hero-entra`). La regla de siempre: el estado por defecto es el cuadro
   final —el pulso ya entregado, el punto ya detenido, el registro ya
   escrito—, así sin JavaScript ni animación no falta nada. ────────────────── */

/* El equipo: dos agentes conectados y un pulso que viaja de uno al otro. El
   pulso es transitorio —como .esc-pulso en escenas.css—: su cuadro final es
   invisible. El agente que recibe lo acusa con un latido. */
.tarjeta-equipos .io-pulso {
  opacity: 0;
  animation: io-pulso-viaja .9s var(--curva) 1.35s both;
}

.tarjeta-equipos .io-agente--b {
  transform-box: fill-box;
  transform-origin: center;
  animation: io-recibe .45s var(--curva) 2.1s;
}

@keyframes io-pulso-viaja {
  0% { opacity: 0; transform: translateX(0); }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(4px); }
}

@keyframes io-recibe { 50% { transform: scale(1.16); } }

/* El límite: un punto llega y se detiene ante el anillo, del lado de afuera.
   El anillo lo acusa con un latido; la marca de adentro es la aprobación. */
.tarjeta-seg .io-freno { animation: io-freno-llega .7s var(--curva) 1.2s both; }

.tarjeta-seg .io-anillo {
  transform-box: fill-box;
  transform-origin: center;
  animation: io-anillo-late .5s var(--curva) 1.75s;
}

@keyframes io-freno-llega {
  0% { opacity: 0; transform: translateX(-5px); }
  55% { opacity: 1; transform: translateX(.8px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes io-anillo-late { 45% { transform: scale(1.07); } }

/* Mission Control: el registro se escribe línea por línea en la pantalla.
   `pathLength="1"` en el SVG normaliza el trazo: lleno por defecto, y la
   animación solo lo reconstruye desde cero una vez. */
.tarjeta-cien .io-registro { stroke-dasharray: 1; stroke-dashoffset: 0; }
.tarjeta-cien .io-registro--a { animation: io-escribe .5s var(--curva) 1.5s both; }
.tarjeta-cien .io-registro--b { animation: io-escribe .5s var(--curva) 1.85s both; }

@keyframes io-escribe { from { stroke-dashoffset: 1; } }

/* Sin movimiento, las micro-escenas quedan clavadas en su cuadro final. */
@media (prefers-reduced-motion: reduce) {
  .tarjeta-equipos .io-pulso,
  .tarjeta-equipos .io-agente--b,
  .tarjeta-seg .io-freno,
  .tarjeta-seg .io-anillo,
  .tarjeta-cien .io-registro--a,
  .tarjeta-cien .io-registro--b { animation: none; }
}

/* ── Capa 7: microinteracciones. Flotar apenas, entrar una vez. ───────────── */

@keyframes hero-entra {
  from { opacity: 0; translate: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-texto,
  .hero-visual,
  .hero-tarjetas a { animation: none; }
}

@media (max-width: 520px) {
  .hero-texto .actions { flex-direction: column; align-items: stretch; }
  .hero-texto .actions .button,
  .hero-texto .actions .boton-vidrio { width: 100%; }
}

/* ── Tableta: el robot arriba al centro, el mensaje debajo a la izquierda,
   las tarjetas en fila. ───────────────────────────────────────────────────── */

@media (min-width: 801px) and (max-width: 1199px) {
  .hero { padding: clamp(24px, 4svh, 44px) clamp(28px, 4vw, 56px) 40px; gap: 8px; text-align: left; }

  .hero-marca { top: 10px; font-size: clamp(170px, 21vw, 260px); }

  .hero-visual { order: 0; margin-top: clamp(24px, 6vh, 64px); }
  .hero-robot { width: clamp(320px, 40vw, 420px); }

  .hero-texto { order: 1; max-width: 640px; }
  .hero-insignia { margin-bottom: 16px; }
  .hero-texto h1 { font-size: clamp(48px, 5.6vw, 64px); }
  .hero-parrafo { margin-inline: 0; }
  .hero-texto .actions { justify-content: flex-start; }

  .hero-tarjetas { order: 2; flex-direction: row; align-items: stretch; margin-top: 18px; }
  .hero-tarjetas a { flex: 1; }
}

/* ── Escritorio grande: la composición editorial completa. Diagonal:
   SYLAR → robot → titular → declaración → tarjetas → CTA. ─────────────────── */

@media (min-width: 1200px) {
  /* El alto se recorta 80 px y los tres anclajes de abajo bajan lo mismo: el
     contenido queda donde está y se va la cola vacía bajo las tarjetas. */
  .hero {
    display: block;
    /* La isla mide unos 90 px con su aire: el lienzo se recorta eso. */
    min-height: clamp(640px, calc(100svh - 170px), 1000px);
    padding: 0;
    text-align: left;
  }

  /* La marca acompaña al robot: su centro óptico cae cerca del centro de la
     figura, para que ambos se lean como una sola pieza y no como texto de
     fondo más imagen encima. */
  /* Pegada a la barra. El recuadro de la línea deja aire propio sobre las
     mayúsculas, así que arranca casi en cero: lo que se mide es la letra
     visible, no la caja. */
  .hero-marca {
    top: clamp(-10px, 1vh, 14px);
    font-size: clamp(190px, 18vw, 330px);
  }

  /* El robot: punto focal, grande a propósito y nunca recortado. Anclado
     entre un respiro arriba y su base abajo, la figura escala con el lienzo
     y la cabeza roza el borde sin tocarlo. */
  .hero-visual {
    position: absolute;
    z-index: 3;
    bottom: clamp(16px, 3.6vh, 60px);
    /* A la derecha del centro: la mano levantada tiene que despejar el punto
       de «Automatiza.» — si lo roza, el titular pierde su remate. */
    left: 55.5%;
    translate: -50% 0;
  }

  /* Grande a propósito y nunca recortado: la altura sale del viewport menos
     la barra y la base. El techo subió con la marca — la cabeza tiene que
     volver a meterse en las letras, que es de donde sale la profundidad. */
  .hero-robot { height: clamp(440px, calc(100svh - 260px), 690px); width: auto; }

  /* El mensaje: arranca hacia la mitad del lienzo y baja hasta el CTA.
     Siempre por encima del robot: la voz no se negocia. */
  .hero-texto {
    position: absolute;
    z-index: 6;
    left: max(32px, calc((100vw - var(--content)) / 2));
    /* Apenas debajo de la marca: el mensaje y las tarjetas suben juntos para
       que la escena se lea como un bloque continuo bajo SYLAR. */
    bottom: clamp(60px, 11.6vh, 135px);
    max-width: 560px;
  }

  .hero-texto h1 { font-size: clamp(56px, 4.8vw, 84px); line-height: .94; }
  .hero-parrafo { margin-inline: 0; }
  .hero-texto .actions { justify-content: flex-start; }

  /* El racimo: tres tarjetas del mismo ancho y la misma altura, escalonadas
     solo por desplazamiento. Los `min-height` de 240/340/380 px que había
     antes no creaban jerarquía: creaban tres huecos en blanco de distinto
     tamaño, porque el texto no llega ni a la mitad de esa altura. Ahora la
     altura la fija el contenido más largo y `stretch` la reparte. */
  .hero-tarjetas {
    position: absolute;
    z-index: 5;
    right: max(32px, calc((100vw - var(--content)) / 2));
    bottom: clamp(45px, 9.6vh, 105px);
    flex-direction: row;
    align-items: stretch;
    gap: clamp(24px, 1.8vw, 30px);
    width: min(48vw, 810px);
    padding-inline: 0;
  }

  .hero-tarjetas a { flex: 1; padding: 26px 26px 28px; }
  .hero-tarjetas b { font-size: 17px; line-height: 1.25; }
  .hero-tarjetas a > span:not(.tarjeta-icono) { font-size: 14px; }

  /* La del medio manda por luz, no por tamaño: más blanca y con más sombra.
     Un tamaño distinto en una fila de tres se lee como error de maqueta. */
  .tarjeta-seg { z-index: 1; translate: 0 6px; }

  .tarjeta-equipos {
    z-index: 3;
    background: rgba(255, 255, 255, .94);
    box-shadow:
      0 0 0 7px rgba(255, 255, 255, .55),
      0 0 0 8px rgba(30, 27, 75, .08),
      inset 0 1px 0 rgba(255, 255, 255, .95),
      0 30px 90px rgba(47, 32, 88, .14);
    translate: 0 -14px;
  }

  .tarjeta-cien { z-index: 2; translate: 0 -30px; }

  @media (hover: hover) {
    .tarjeta-seg:hover { translate: 0 2px; }
    .tarjeta-equipos:hover { translate: 0 -18px; }
    .tarjeta-cien:hover { translate: 0 -34px; }
  }
}

/* Pantallas bajas y anchas: el robot cede antes que el texto. */
@media (min-width: 1200px) and (max-height: 760px) {
  /* Por altura, igual que la regla base: mezclar un ancho fijo con la altura
     calculada deformaba la figura en portátiles. */
  .hero-robot { height: clamp(360px, calc(100svh - 240px), 500px); width: auto; }
  .hero-marca { font-size: clamp(170px, 16.5vw, 290px); }
  .hero-texto h1 { font-size: clamp(50px, 4.2vw, 68px); }
}

/* --- Asistente de voz ------------------------------------------------------ */

.asistente-voz {
  position: fixed;
  z-index: 80;
  right: clamp(16px, 2.4vw, 34px);
  bottom: clamp(16px, 2.4vw, 30px);
  color: #211b55;
  font-family: var(--sans);
}

.asistente-voz button { font: inherit; }

.asistente-voz__lanzador {
  display: flex;
  min-width: 206px;
  min-height: 68px;
  align-items: center;
  gap: 12px;
  padding: 8px 17px 8px 9px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 54px rgba(49, 31, 101, .18), inset 0 1px 0 #fff;
  backdrop-filter: blur(20px);
  color: #211b55;
  cursor: pointer;
  transition: translate .25s ease, box-shadow .25s ease;
}

.asistente-voz__lanzador > span:last-child { display: grid; gap: 2px; text-align: left; }
.asistente-voz__lanzador small { color: #71678d; font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.asistente-voz__lanzador strong { font-size: 14px; font-weight: 680; }

.asistente-voz__panel {
  position: relative;
  width: min(370px, calc(100vw - 24px));
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 18%, rgba(151, 104, 255, .2), transparent 38%),
    rgba(252, 249, 255, .92);
  box-shadow: 0 30px 90px rgba(40, 24, 91, .24), inset 0 1px 0 #fff;
  backdrop-filter: blur(28px);
  animation: asistente-aparece .36s cubic-bezier(.2, .8, .2, 1) both;
}

.asistente-voz__cerrar {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(45, 34, 91, .1);
  border-radius: 50%;
  background: rgba(255, 255, 255, .65);
  color: #4c4369;
  cursor: pointer;
  font-size: 22px;
}

.asistente-voz__etiqueta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #71678d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.asistente-voz__etiqueta i,
.asistente-voz__estado i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
  box-shadow: 0 0 0 5px rgba(124, 58, 237, .1);
}

.asistente-voz__escena {
  display: grid;
  height: 178px;
  place-items: center;
  margin-top: 2px;
}

.voz-orbe {
  --voz-nivel: 0;
  position: relative;
  display: block;
  width: 136px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .98) 0 4%, transparent 24%),
    conic-gradient(from 210deg, #211b55, #6635df, #c6a8ff, #8148ec, #28205f, #7c3aed, #211b55);
  box-shadow:
    0 22px 48px rgba(75, 38, 165, calc(.24 + var(--voz-nivel) * .28)),
    inset 8px 7px 19px rgba(255, 255, 255, .32),
    inset -13px -12px 24px rgba(24, 13, 73, .36);
  filter: saturate(calc(1 + var(--voz-nivel) * .7));
  scale: calc(1 + var(--voz-nivel) * .09);
  transition: scale .09s linear, filter .12s linear;
  animation: voz-orbe-gira 9s linear infinite;
}

.voz-orbe::before,
.voz-orbe::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.voz-orbe::before {
  inset: -12%;
  border: 1px solid rgba(124, 58, 237, .19);
  box-shadow: 0 0 42px rgba(124, 58, 237, calc(.16 + var(--voz-nivel) * .28));
  scale: calc(1 + var(--voz-nivel) * .08);
}

.voz-orbe::after {
  inset: 13%;
  border: 1px solid rgba(255, 255, 255, .34);
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .24), transparent 48%);
  filter: blur(1px);
}

.voz-orbe > i,
.voz-orbe > b {
  position: absolute;
  inset: 8%;
  border-radius: 44% 56% 58% 42% / 58% 45% 55% 42%;
  border: 1px solid rgba(255, 255, 255, .2);
  animation: voz-orbe-forma 5.5s ease-in-out infinite alternate;
}

.voz-orbe > b { inset: 19%; animation-delay: -2.4s; animation-direction: alternate-reverse; }
.voz-orbe--mini { width: 50px; box-shadow: 0 9px 22px rgba(75, 38, 165, .3), inset 4px 3px 8px rgba(255,255,255,.32); }
.voz-orbe--mini::before { inset: -8%; }
.voz-orbe--hablando { animation-duration: 3.3s; }
.voz-orbe--pensando { animation-duration: 5.2s; }

.asistente-voz h2 { margin: 0; color: #211b55; font-size: 29px; letter-spacing: -.045em; }
.asistente-voz__intro { margin: 8px 0 16px; color: #665d7e; font-size: 14px; line-height: 1.5; }
.asistente-voz__estado { display: flex; min-height: 24px; align-items: center; gap: 9px; margin: 0 0 14px; color: #4d436a; font-size: 13px; font-weight: 620; }
.asistente-voz__estado i { width: 6px; height: 6px; animation: voz-estado 1.6s ease-in-out infinite; }
.asistente-voz__error { margin: -4px 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(190, 24, 93, .07); color: #9f174f; font-size: 12px; line-height: 1.45; }
.asistente-voz__microfono { margin: 0 0 12px; display: grid; gap: 6px; color: #706b88; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.asistente-voz__microfono select { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid rgba(67, 54, 129, .16); border-radius: 11px; color: #292348; background: rgba(255, 255, 255, .86); font: 500 12px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }

.asistente-voz__accion {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #6530dc);
  box-shadow: 0 15px 34px rgba(124, 58, 237, .28), inset 0 1px 0 rgba(255,255,255,.28);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 680;
}

.asistente-voz__accion.activo { background: #2d2557; box-shadow: 0 12px 28px rgba(34, 27, 75, .22); }
.asistente-voz__accion svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.asistente-voz__panel > small { display: block; margin-top: 11px; color: #847b99; font-size: 10.5px; text-align: center; }

.asistente-voz button:focus-visible { outline: 3px solid rgba(124, 58, 237, .28); outline-offset: 3px; }

@media (hover: hover) {
  .asistente-voz__lanzador:hover { translate: 0 -3px; box-shadow: 0 23px 62px rgba(49, 31, 101, .23), inset 0 1px 0 #fff; }
  .asistente-voz__accion:hover { filter: brightness(.96); translate: 0 -1px; }
}

@keyframes asistente-aparece {
  from { opacity: 0; translate: 0 18px; scale: .96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes voz-orbe-gira { to { rotate: 1turn; } }
@keyframes voz-orbe-forma { to { rotate: 145deg; scale: 1.08; border-radius: 58% 42% 38% 62% / 45% 62% 38% 55%; } }
@keyframes voz-estado { 50% { opacity: .38; scale: .72; } }

@media (max-width: 560px) {
  .asistente-voz { right: 12px; bottom: 12px; }
  .asistente-voz__lanzador { min-width: 0; min-height: 58px; padding: 6px; }
  .asistente-voz__lanzador > span:last-child { display: none; }
  .voz-orbe--mini { width: 46px; }
  .asistente-voz__panel { padding: 21px; border-radius: 26px; }
  .asistente-voz__escena { height: 150px; }
  .voz-orbe:not(.voz-orbe--mini) { width: 116px; }
}