/* =========================================================
 * PAS ROBOTICS — Orbital hero widget (3D · Three.js)
 * ---------------------------------------------------------
 * canvas WebGL (isotipo + anillo) + nodos HTML superpuestos
 * (texto nítido) + texto de resultado en el centro.
 * ========================================================= */

.orbital {
  position: relative;
  width: 100%;
  max-width: 1040px;
  aspect-ratio: 1 / 1;     /* reserva el espacio cuadrado ANTES de que cargue el canvas
                              → sin salto de layout al inicializar el orbital */
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Escenario 3D cuadrado: canvas WebGL + nodos HTML + texto central */
.orbital__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.orbital__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.orbital.is-dragging .orbital__canvas { cursor: grabbing; }

/* Isotipo central como MARCA DE AGUA tenue de fondo (estilo referencia):
   grande, baja opacidad, detrás de los nodos, estático. El anillo es el protagonista. */
.orbital__logo {
  position: absolute;
  left: 50%; top: 50%;
  width: 69px;             /* ratio 1.15 de las imágenes → con alto 60px, ancho ~69px (sin deformar) */
  height: 60px;
  z-index: 3;
  opacity: 0.5;            /* reposo: factory amarilla */
  background: url('/img/factory-yellow.png') center / contain no-repeat;
  transform: translate(-50%, -50%);
  transition: opacity .6s ease;
  pointer-events: none;
}
/* Al enfocar un nodo, el logo de fondo se oculta: la tarjeta del centro
   (con la factory verde a un lado) toma el relevo. */
.orbital.is-focused .orbital__logo {
  opacity: 0;
}

/* Nodos HTML proyectados desde el espacio 3D.
   --x/--y (px) y --scale/--opacity los fija el JS cada frame. */
.orbital__node {
  position: absolute;
  left: 0; top: 0;
  width: 218px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(15,25,40,0.06);
  border-radius: 16px;
  box-shadow: 0 11px 30px rgba(15,25,40,0.12), 0 2px 5px rgba(15,25,40,0.06);
  transform: translate(var(--x, 0px), var(--y, 0px)) translate(-50%, -50%) scale(var(--scale, 1));
  opacity: var(--opacity, 1);
  will-change: transform, opacity;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .25s ease;
}
.orbital__node:hover {
  border-color: var(--node-color, rgba(91,141,184,0.5));
  box-shadow: 0 18px 44px rgba(15,25,40,0.18), 0 2px 6px rgba(15,25,40,0.08);
}
/* Icono = PNG (círculo de color con símbolo blanco) → sin fondo extra */
.orbital__node-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.orbital__node-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.orbital__node-text { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; flex: 1 1 auto; }
.orbital__node-label {
  font-size: .92rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--color-text, #1A1A1A);
  white-space: normal;            /* permite 2 líneas → no desborda */
}
.orbital__node-sub {
  font-size: .72rem; font-weight: 500;
  color: var(--color-text-mute, #676C71);
  white-space: normal;
  margin-top: 2px;
  line-height: 1.25;
}
/* Flecha de acción a la derecha → señal de "clic para explorar" */
.orbital__node-arrow {
  flex-shrink: 0;
  width: 23px; height: 23px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(15,25,40,0.05);
  color: var(--color-text-mute, #676C71);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.orbital__node-arrow svg { width: 14px; height: 14px; display: block; }
.orbital__node:hover .orbital__node-arrow {
  background: var(--node-color, #5B8DB8);
  color: #fff;
  transform: translateX(2px);
}

/* Estado activo (fijado por click) — tarjeta blanca + acento del color del pain point */
.orbital__node.is-active {
  background: #fff;
  border-color: var(--node-color, #5B8DB8);
  border-width: 2px;
  box-shadow: 0 18px 44px rgba(15,25,40,0.20), 0 2px 6px rgba(15,25,40,0.08);
}
.orbital__node.is-active .orbital__node-label { color: var(--node-color, #1A1A1A); }
.orbital__node.is-active .orbital__node-arrow {
  background: var(--node-color, #5B8DB8);
  color: #fff;
}

/* Resultado al enfocar un nodo — TARJETA en el centro: imagen (factory) a un
   lado + texto (título en el color del nodo + subtítulo) al otro. */
.orbital__center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 500;            /* por encima de los nodos */
  width: max-content;
  max-width: 360px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(15,25,40,0.08);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(15,25,40,0.16), 0 3px 8px rgba(15,25,40,0.06);
  padding: 14px 18px 14px 14px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.orbital__center.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.orbital__center-img {
  width: 60px; height: 60px;
  flex-shrink: 0;
  object-fit: contain;
}
.orbital__center-textwrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.orbital__center-title {
  font-size: 1.1rem; font-weight: 800; letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--color-text, #1A1A1A);   /* el color del nodo lo fija el JS (inline) */
}
.orbital__center-sub {
  font-size: .85rem; line-height: 1.4;
  color: var(--color-text-mute, #676C71);
}

/* SR-only (accesibilidad + SEO) */
.orbital__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap;
}

/* Controles del orbital (esquina inferior derecha): activar/desactivar la rotación
   y la auto-pausa. Píldoras sutiles; en azul cuando están activas. */
.orbital__controls {
  position: absolute;
  right: 14px;
  top: 14px;               /* esquina superior derecha del canvas (todos los anchos) */
  z-index: 600;            /* por encima de nodos y texto central */
  display: flex;
  gap: 8px;
}
.orbital__ctrl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(15,25,40,0.18);   /* inactivo: borde gris claro */
  background: #fff;                          /* siempre blanco */
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: var(--color-text-mute, #676C71);    /* inactivo: texto gris */
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.orbital__ctrl svg { width: 14px; height: 14px; flex-shrink: 0; }
.orbital__ctrl:hover { border-color: rgba(15,25,40,0.4); color: var(--color-text, #1A1A1A); }
.orbital__ctrl:focus-visible { outline: 2px solid var(--color-text, #1A1A1A); outline-offset: 2px; }
/* Activo (encendido) → blanco con borde y texto negros (sin colores de marca) */
.orbital__ctrl.is-on {
  color: var(--color-text, #1A1A1A);
  border-color: var(--color-text, #1A1A1A);
  background: #fff;
}

/* Apilado (<1400): los controles se sacan FUERA del orbital (que recorta con
   overflow) y quedan centrados justo debajo, sin solapar el nodo frontal. El JS
   los reubica como hijo del layout y les pone esta clase. */
.orbital__controls--stacked {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  align-self: flex-start;  /* a la izquierda: fuera del eje central, no solapa el "Descubre más" */
  margin: -52px 0 8px;     /* sube los controles hacia el canvas (hueco inferior izq. vacío) */
  justify-content: flex-start;
}

/* Por debajo de 1400px el hero pasa a columna y el orbital queda DEBAJO del
   titular centrado, como una sección. El canvas necesita ≈835px como mínimo
   para que las 5 tarjetas no se amontonen → ocupa todo el ancho disponible
   (cap 1040). Es responsive en el rango 840–1399px. */
@media (max-width: 1399px) {
  .orbital {
    /* Ocupa todo el ancho disponible (cap 1040px), centrado. El padding lateral
       del hero se reduce a 16px en este rango (styles.css) para que en el extremo
       bajo (≈840px) el canvas roce el mínimo de 835px. */
    /* El ancho lo limita la ALTURA LIBRE del hero: el canvas (apaisado, alto =
       0.58·ancho) intenta caber en 100vh debajo del texto. (100vh − chrome)·1.72 = ancho
       máximo por altura; 1.72 = 1/0.58. Cap por contenedor (100%, 1040px) y SUELO de
       620px para que los nodos nunca se amontonen: en pantallas con altura suficiente el
       hero queda en 100vh exacto; en las bajas el canvas se queda en 620px y el hero crece
       un poco (scroll mínimo) en vez de romper el layout. */
    width: max(620px, min(100%, 1040px, calc((100vh - 586px) * 1.72)));
    max-width: none;
    margin: 14px auto 0;
    /* El canvas es cuadrado, pero la elipse (más ancha que alta) solo ocupa la
       franja central → dejaba mucho hueco vacío arriba/abajo. Lo dejamos en formato
       apaisado (0.58) y ocultamos el sobrante, que siempre está vacío.
       Reserva el alto antes de cargar (calc con 100vh, sin JS) → sin salto. */
    aspect-ratio: 1 / 0.58;
    overflow: hidden;        /* recorta el cuadrado a la franja apaisada visible */
  }
  /* El stage sigue cuadrado (aspect-ratio 1/1, width 100%). margin-top negativo en
     % (relativo al ANCHO) sube el stage para recortar sobre todo por arriba, donde
     hay más hueco vacío → la banda de nodos queda centrada en la ventana apaisada. */
  .orbital__stage { margin-top: -25%; }
}
/* Por debajo de 840px ya no caben ≈835px de canvas con margen → se oculta
   (debajo de ese ancho las tarjetas se amontonarían). */
@media (max-width: 839px) {
  .orbital { display: none; }
}