/* =====================================================================
   home-servicios.css — hero de la portada de Altitud 100K (2026-10-29)
   =====================================================================
   El hero: la propuesta de valor a la izquierda y, a la derecha, un panel
   de vidrio con los 6 servicios en pestañas, cada uno con su escena
   animada. Va DESPUÉS de home.css y froz3d-promo.css y manda sobre ellas
   sin tocarlas.

   Por ahora la carga sólo / (español). /en/ comparte home.css y conserva
   el hero anterior hasta que se traduzca: por eso estas reglas viven aquí
   y no en home.css. Se probó en Laboratorio_nuevas_paginas/portada_v3; su
   LEEME.md tiene las decisiones de Manuel y la fuente de cada dato.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1 · Colores del hero
   Manuel eligió (2026-10-29) un púrpura y un naranja más vivos que los del
   manual de marca (#913793 y #F9921C). Se redefinen SÓLO dentro de .hero:
   el menú, el «soluciones reales.» del título y las pestañas los toman por
   cascada, y el resto de la página sigue con los oficiales.
   Cada uno tiene su versión para texto: #C084FC (7,5:1) y #FB923C (8,8:1)
   sobre el azul de fondo.
   --------------------------------------------------------------------- */
.hero {
  --accent-cool: #A855F7;
  --accent-cool-ink: #C084FC;
  --accent-warm: #F97316;
  --accent-warm-ink: #FB923C;
}

/* El brillo del menú venía escrito con los tonos antiguos. */
.hero-nav__link--cool { --nav-glow: rgba(168, 85, 247, 0.40); }
.hero-nav__link--warm { --nav-glow: rgba(249, 115, 22, 0.34); }

.hero-content--v3 .hero-title em { color: var(--accent-warm-ink); }


/* ---------------------------------------------------------------------
   2 · Hero en dos columnas
   home.css fija el hero a 100dvh con overflow oculto. Con el panel, en una
   pantalla baja o en celular el contenido se cortaría: aquí el alto es «al
   menos una pantalla» y crece si hace falta. El canvas del fondo
   (position:absolute; inset:0) lo sigue cubriendo entero.
   Ancho (pedido de Manuel, 2026-10-30: en pantallas grandes se veía
   apretado): el contenido ya no se queda en los 1280 px de --w-wide. Usa el
   mismo margen lateral que el encabezado (40 px; 32, 24 y 20 en pantallas
   menores), así el titular arranca bajo el logo y el panel termina bajo el
   botón de idioma, y en un monitor grande los dos crecen en vez de quedar
   juntos al centro. Tope de 2000 px para monitores ultra anchos.
   --------------------------------------------------------------------- */
.hero {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

.hero-content--v3 {
  --hero-margen: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 1.1fr);
  align-items: center;
  column-gap: clamp(28px, 3.6vw, 72px);
  row-gap: 32px;
  max-width: 2000px;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  /* El encabezado es absoluto y mide hasta ~126 px: el contenido parte bajo él. */
  padding: clamp(112px, 15vh, 140px) var(--hero-margen) clamp(28px, 5vh, 56px);
}

.hero-copy { min-width: 0; }

/* El titular crece con la pantalla (hasta 68 px) junto con su columna: en un
   monitor grande queda en cuatro líneas y no en seis. */
.hero-content--v3 .hero-title {
  max-width: none;
  margin-bottom: clamp(18px, 2.8vh, 30px);
  font-size: clamp(30px, min(3.3vw, 6.4vh), 68px);
}

.hero-content--v3 .hero-lede {
  max-width: 54ch;
  margin-bottom: clamp(24px, 4vh, 38px);
}


/* ---------------------------------------------------------------------
   3 · Botones
   Píldora: según home.css, el radio --r-pill es sólo para CTAs.
   --------------------------------------------------------------------- */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.hero-cta svg { flex: none; }

/* El fucsia de botones del manual, un punto más oscuro (#E0124A): con
   #F21651 el texto blanco queda en 4,2:1, bajo el mínimo AA; así llega a
   4,8:1. El borde y el brillo sí son el fucsia oficial. */
.hero-cta--primary {
  color: #FFFFFF;
  background: #E0124A;
  border: 1px solid var(--accent-hot);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 22px rgba(242, 22, 81, 0.45);
}

.hero-cta--primary:hover,
.hero-cta--primary:focus-visible {
  transform: translateY(var(--lift));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.40), 0 0 34px rgba(242, 22, 81, 0.62);
}

/* WhatsApp: vidrio, y el ícono en el verde de la marca de WhatsApp. */
.hero-cta--ghost {
  color: var(--ink);
  background: rgba(1, 10, 31, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-cta--ghost svg { color: #25D366; }

.hero-cta--ghost:hover,
.hero-cta--ghost:focus-visible {
  transform: translateY(var(--lift));
  border-color: #25D366;
  background: rgba(37, 211, 102, 0.10);
}

.hero-cta:active { transform: translateY(0); }

.hero-cta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}


/* ---------------------------------------------------------------------
   4 · Panel de servicios (vidrio)
   Va encima del cohete del fondo (decisión de Manuel): translúcido y con
   desenfoque, deja pasar su brillo sin competir con el texto.
   --------------------------------------------------------------------- */
/* minmax(0, 1fr): la columna del panel nunca pasa su ancho. Sin esto, en
   celular la fila de pestañas (deslizable, pero dentro de la cabecera)
   ensanchaba la columna a lo que suman las seis y el panel se salía. */
.hero-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  container: showcase / inline-size;
  padding: clamp(14px, 1.4vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(2, 24, 61, 0.42), rgba(1, 10, 31, 0.64));
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--e-3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Colores por camino: los heredan la pestaña, el panel y su escena. */
.showcase-tab--cool,
.showcase-panel--cool {
  --camino: var(--accent-cool);
  --camino-ink: var(--accent-cool-ink);
  --camino-tinte: rgba(168, 85, 247, 0.16);
  --camino-brillo: rgba(168, 85, 247, 0.30);
  --lamina-acento: var(--accent-cool-ink);
}

.showcase-tab--warm,
.showcase-panel--warm {
  --camino: var(--accent-warm);
  --camino-ink: var(--accent-warm-ink);
  --camino-tinte: rgba(249, 115, 22, 0.14);
  --camino-brillo: rgba(249, 115, 22, 0.28);
  --lamina-acento: var(--accent-warm-ink);
}

/* ---- Cabecera: cada camino sobre SUS pestañas ----
   Grilla de 7 columnas: 3 pestañas, un respiro y 3 pestañas. La fila de
   pestañas la hereda con subgrid, así «Aplicamos tecnología» empieza justo
   sobre «Automatización» (pedido de Manuel, 2026-10-30). Las columnas
   crecen por igual para llenar el ancho del panel. */
.showcase-cabecera {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(max-content, 1fr)) 4px repeat(3, minmax(max-content, 1fr));
  column-gap: 5px;
  row-gap: 7px;
}

.showcase-grupo {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-dim);
}

/* Punto del color del camino y una línea que abarca sus tres pestañas. */
.showcase-grupo::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--punto);
}

.showcase-grupo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--punto), transparent);
  opacity: 0.55;
}

.showcase-grupo--cool { grid-column: 1 / 4; --punto: var(--accent-cool); }
.showcase-grupo--warm { grid-column: 5 / 8; --punto: var(--accent-warm); }

.showcase-tabs {
  position: relative;  /* home-servicios.js mide offsetLeft de las pestañas contra esta caja */
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

/* Sin text-transform: «Froz3D» se escribe siempre así, nunca en mayúsculas. */
.showcase-tab {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

/* Primera pestaña del segundo camino: salta el respiro (columna 4). */
.showcase-tab--grupo { grid-column: 5; }

.showcase-tab::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--camino);
}

.showcase-tab:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.28);
}

.showcase-tab[aria-selected="true"] {
  color: var(--ink);
  border-color: var(--camino);
  background: var(--camino-tinte);
  box-shadow: 0 0 18px var(--camino-brillo);
}

.showcase-tab:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* Barra de avance automático. Su fin (animationend) es lo que cambia de
   pestaña en home-servicios.js: pausar la animación pausa el avance. Cada
   pestaña dura lo que dice su data-duracion (home-servicios.js lo pasa a
   --duracion): Froz3D, lo que su video; STEM, sus cinco talleres. */
.showcase-tab__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--camino-ink);
  transform: scaleX(0);
  transform-origin: left;
}

.showcase-tab.is-running .showcase-tab__progress {
  animation: showcaseProgreso var(--duracion, 10s) linear forwards;
}

.hero-showcase.is-paused .showcase-tab__progress { animation-play-state: paused; }

@keyframes showcaseProgreso {
  to { transform: scaleX(1); }
}


/* ---------------------------------------------------------------------
   5 · Paneles
   Los 6 comparten la misma celda de la grilla: el alto lo pone el más alto
   y cambiar de pestaña no mueve la página. visibility:hidden además los
   saca del orden de tabulación y de los lectores de pantalla. El cambio es
   un fundido cruzado de 0,2 s.
   --------------------------------------------------------------------- */
.showcase-panels {
  display: grid;
  container-type: inline-size;
}

.showcase-panel {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}

.showcase-panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s var(--ease), visibility 0s;
}

/* ---- Escena ----
   2:1 por defecto. En pantallas bajas (notebooks) se limita el alto para que
   el panel completo quepa en la primera pantalla: 380 px es lo que suman el
   encabezado, los márgenes, las pestañas y el texto del panel. Las escenas
   SVG se centran sin deformarse y el video se ajusta sin recortarse.
   width:100% va explícito: sin él, al topar el alto la caja se angosta para
   guardar el 2:1 (es un ítem de grilla con proporción). */
.showcase-visual {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 2 / 1;
  max-height: max(190px, calc(100vh - 380px));
  max-height: max(190px, calc(100dvh - 380px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: radial-gradient(130% 140% at 0% 0%, rgba(2, 24, 61, 0.92), rgba(1, 8, 26, 0.96));
  container-type: size;
}

/* ---- Texto del panel ----
   El botón va a la derecha del rótulo y el título; la descripción ocupa todo
   el ancho debajo. Sin las cajitas de datos (pedido de Manuel, 2026-10-30)
   el panel queda más bajo y la escena gana alto. */
.showcase-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "rotulo boton"
    "titulo boton"
    "desc   desc";
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
}

.showcase-kicker {
  grid-area: rotulo;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--camino-ink);
}

/* Jost sin inclinar, como los títulos de las tarjetas de ruta: no compite
   con el titular. */
.showcase-title {
  grid-area: titulo;
  margin: 0;
  font-family: var(--display-alt);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.showcase-desc {
  grid-area: desc;
  max-width: 68ch;
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-dim);
}

.showcase-cta {
  grid-area: boton;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--camino);
  border-radius: var(--r-pill);
  color: var(--camino-ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

/* Texto oscuro sobre el color lleno: el blanco sobre #A855F7 no llega a
   4,5:1 y el casi negro sí (4,9:1). */
.showcase-cta:hover,
.showcase-cta:focus-visible {
  background: var(--camino);
  color: #0B0D12;
  transform: translateY(var(--lift));
}

.showcase-cta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* Panel angosto (celular): todo en una columna y el botón al final. */
@container (max-width: 480px) {
  .showcase-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rotulo" "titulo" "desc" "boton";
  }

  .showcase-cta {
    justify-self: start;
    margin-top: 4px;
  }
}

/* Panel demasiado angosto para las 6 pestañas en una fila, o navegador sin
   subgrid: los rótulos van en una línea y las pestañas se acomodan en filas. */
@container showcase (max-width: 560px) {
  .showcase-cabecera { display: block; }
  .showcase-grupo { display: inline-flex; margin: 0 16px 8px 0; }
  .showcase-grupo::after { display: none; }
  .showcase-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
  .showcase-tab--grupo { margin-left: 6px; }
}

@supports not (grid-template-columns: subgrid) {
  .showcase-cabecera { display: block; }
  .showcase-grupo { display: inline-flex; margin: 0 16px 8px 0; }
  .showcase-grupo::after { display: none; }
  .showcase-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
  .showcase-tab--grupo { margin-left: 6px; }
}


/* ---------------------------------------------------------------------
   6 · Escenas
   --------------------------------------------------------------------- */

/* ---- 6a · Froz3D: fragmento del video explicativo ----
   El fondo imita el del video (blanco frío degradado) para que, cuando la
   caja no es 16:9, las franjas a los lados no se noten. */
.showcase-visual--froz3d {
  border-color: #D7DEE5;
  background: linear-gradient(135deg, #FAFCFE, #E8EEF6);
}

.escena-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- 6b · Lienzo compartido de Three.js (Insight AI e I+D+i) ---- */
.escena-3d {
  position: absolute;
  inset: 0;
}

.escena-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- 6c · Insight AI: figuras de puntos detrás y tablero en 3D delante ----
   El tablero se inclina hacia el centro y flota; las figuras pasan detrás
   de su vidrio. Las medidas van en cqi/cqb: escalan con la escena. */
.showcase-visual--insight {
  background: radial-gradient(120% 120% at 20% 30%, #0A2556, #02183D 60%);
  perspective: 900px;
}

.tablero {
  position: absolute;
  top: 50%;
  right: 3%;
  width: 57%;
  transform: translateY(-50%) rotateY(-17deg) rotateX(7deg);
  transform-style: preserve-3d;
  animation: tableroFlota 7s ease-in-out infinite;
}

@keyframes tableroFlota {
  50% { transform: translateY(-52%) rotateY(-13deg) rotateX(5deg); }
}

.tablero__marco {
  padding: clamp(6px, 2cqi, 12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(14, 20, 44, 0.86), rgba(8, 12, 30, 0.80));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.50), 0 0 44px rgba(168, 85, 247, 0.22);
  transform-style: preserve-3d;
}

.tablero__cabecera {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2cqi, 8px);
}

.tablero__logo {
  display: block;
  width: auto;
  height: clamp(12px, 4.2cqi, 20px);
}

.tablero__vivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 clamp(7px, 1.6cqi, 9.5px)/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4ADE80;
}

.tablero__vivo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px #4ADE80;
  animation: tableroVivo 1.4s ease-in-out infinite;
}

@keyframes tableroVivo { 50% { opacity: 0.25; } }

/* Este rótulo es el que deja claro que los números no son de un cliente. */
.tablero__demo {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  font: 500 clamp(6.5px, 1.45cqi, 8.5px)/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.tablero__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 1.2cqi, 7px);
  margin-top: clamp(5px, 1.6cqi, 9px);
  transform: translateZ(22px);
}

.tablero__kpi {
  padding: clamp(4px, 1.2cqi, 7px) clamp(5px, 1.4cqi, 9px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.tablero__rotulo {
  display: block;
  font: 500 clamp(6.5px, 1.5cqi, 9px)/1.2 var(--sans);
  color: var(--ink-dim);
  white-space: nowrap;
}

.tablero__cifra {
  display: block;
  font: 700 clamp(11px, 3.3cqi, 19px)/1.15 var(--display-alt);
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}

.tablero__tendencia {
  display: block;
  font: 500 clamp(6px, 1.3cqi, 8px)/1.2 var(--mono);
  color: #4ADE80;
  white-space: nowrap;
}

.tablero__graficos {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(4px, 1.2cqi, 7px);
  height: clamp(36px, 22cqb, 86px);
  margin-top: clamp(4px, 1.4cqi, 8px);
  transform: translateZ(10px);
}

.tablero__curva,
.tablero__barras {
  width: 100%;
  height: 100%;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.tablero__rejilla { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.tablero__area { fill: url(#tablero-area); }
.tablero__linea { fill: none; stroke: #C084FC; stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tablero__punto { fill: #FFFFFF; stroke: #C084FC; stroke-width: 2; vector-effect: non-scaling-stroke; }

.tablero__barras {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.tablero__barras i {
  flex: 1;
  height: 30%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #F21651, #A855F7);
  box-shadow: 0 0 10px rgba(242, 22, 81, 0.35);
}

/* ---- 6d · I+D+i: planeta y satélite en Three.js ----
   Sin WebGL queda este planeta en CSS, con el mismo encuadre. */
.showcase-visual--idi {
  background:
    radial-gradient(circle at 46% 44%, #3B82F6 0, #1E3A8A 14%, #0B1A3A 22%, rgba(11, 26, 58, 0) 23%),
    radial-gradient(ellipse at 50% 50%, #08122B, #01040F 70%);
}

.escena-rotulo {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: grid;
  gap: 2px;
  margin: 0;
  font: 500 clamp(7px, 1.5cqi, 9px)/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* Sin mayúsculas forzadas: «I+D+i» lleva la i final en minúscula. */
.escena-rotulo b {
  font-weight: 600;
  text-transform: none;
  color: var(--camino-ink);
}

/* ---- 6e · Láminas SVG: piezas comunes ---- */
.lamina-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.lamina {
  display: block;
  width: 100%;
  height: 100%;
}

.lamina__trazo { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.62); stroke-width: 1.3; }
.lamina__suave { fill: none; stroke: rgba(255, 255, 255, 0.30); stroke-width: 1.1; }
.lamina__acento { fill: none; stroke: var(--lamina-acento); stroke-width: 1.6; }
.lamina__relleno-acento { fill: var(--lamina-acento); stroke: none; }
.lamina__punto { fill: rgba(255, 255, 255, 0.45); }
.lamina__punteado { stroke-dasharray: 3 5; }

.lamina__texto {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  fill: rgba(255, 255, 255, 0.72);
}

.lamina__bloque rect,
.lamina__bloque line { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1; }

.lamina__bloque text {
  font-family: var(--mono);
  font-size: 7.4px;
  letter-spacing: 0.06em;
  fill: rgba(255, 255, 255, 0.62);
}

.lamina__flujo { stroke-dasharray: 4 6; animation: laminaFlujo 1.2s linear infinite; }
.lamina__pulso { transform-box: fill-box; transform-origin: center; animation: laminaPulso 2.4s ease-in-out infinite; }

@keyframes laminaFlujo { to { stroke-dashoffset: -20; } }
@keyframes laminaPulso { 50% { opacity: 0.35; transform: scale(1.5); } }

/* Las animaciones CSS sólo corren en la pestaña activa; las de GSAP las
   pausa home-servicios-escenas.js. */
.showcase-panel:not(.is-active) .lamina *,
.showcase-panel:not(.is-active) .tablero,
.showcase-panel:not(.is-active) .tablero * { animation-play-state: paused; }

/* ---- 6f · Automatización: flujo al estilo n8n ---- */
.showcase-visual--n8n { background: #131722; }

.n8n-titulo { font: 600 10px var(--sans); fill: #D4D9E4; }
.n8n-activo rect { fill: rgba(34, 197, 94, 0.16); stroke: rgba(34, 197, 94, 0.55); }
.n8n-activo circle { fill: #22C55E; }
.n8n-activo text { font: 600 8px var(--sans); fill: #86EFAC; }

.n8n-conexion { fill: none; stroke: #4B5367; stroke-width: 2; transition: stroke 0.3s; }
.n8n-conexion.is-ok { stroke: #22C55E; }
.n8n-subconexion { fill: none; stroke: #4B5367; stroke-width: 1.6; stroke-dasharray: 4 4; }
.n8n-subconexion.is-activa { stroke: #FB923C; animation: laminaFlujo 0.6s linear infinite; }

.n8n-salidas rect { fill: #1D2232; stroke: #40475A; stroke-width: 1; transition: stroke 0.25s; }
.n8n-salidas text { font: 600 7.5px var(--sans); fill: #AAB2C5; text-anchor: middle; }
.n8n-salidas .is-elegida rect { stroke: #FB923C; }
.n8n-salidas .is-elegida text { fill: #FDBA74; }

.n8n-nodo { color: #CFD5E2; }
.n8n-marco { fill: #262B3B; stroke: #4B5367; stroke-width: 1.6; transition: stroke 0.25s, fill 0.25s; }
.n8n-nodo--agente .n8n-marco { fill: #2C2542; }
.n8n-nodo--sub .n8n-marco { fill: #1F2433; }
.n8n-rayo { color: #FB923C; }
.n8n-rombo { fill: #5B6478; }
.n8n-agente-nombre { font: 700 10.5px var(--sans); fill: #FFFFFF; }
.n8n-agente-tarea { font: 500 8.5px var(--sans); fill: #9CA3B8; }
.n8n-rotulo { font: 500 8.6px var(--sans); fill: #AEB6C8; text-anchor: middle; }

.n8n-nodo.is-ejecutando { color: #FDBA74; }
.n8n-nodo.is-ejecutando .n8n-marco {
  stroke: #FB923C;
  stroke-dasharray: 6 4;
  animation: n8nEjecuta 0.7s linear infinite;
}
.n8n-nodo.is-ok .n8n-marco { stroke: #22C55E; }

.n8n-ok { opacity: 0; transition: opacity 0.2s; }
.n8n-ok circle { fill: #22C55E; }
.n8n-ok use { color: #052E16; }
.n8n-nodo.is-ok .n8n-ok { opacity: 1; }

.n8n-dato { fill: #FB923C; opacity: 0; filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.95)); }

.n8n-estado { opacity: 0; transition: opacity 0.3s; }
.n8n-estado.is-visible { opacity: 1; }
.n8n-estado rect { fill: rgba(34, 197, 94, 0.14); stroke: rgba(34, 197, 94, 0.5); }
.n8n-estado use { color: #4ADE80; }
.n8n-estado text { font: 600 9px var(--sans); fill: #BBF7D0; }

@keyframes n8nEjecuta { to { stroke-dashoffset: -20; } }

/* ---- 6g · Bootcamp: perfil de misión ---- */
.bc-estrellas circle { fill: #FFFFFF; animation: bcTitila 3s ease-in-out infinite; }
.bc-estrellas circle:nth-child(3n) { animation-delay: -1s; }
.bc-estrellas circle:nth-child(3n + 1) { animation-delay: -2s; }

@keyframes bcTitila { 50% { opacity: 0.25; } }

.bc-estela {
  fill: none;
  stroke: var(--lamina-acento);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(251, 146, 60, 0.7));
}

.bc-hito circle { fill: #1B2236; stroke: rgba(255, 255, 255, 0.40); stroke-width: 1.4; transition: fill 0.3s, stroke 0.3s; }
.bc-hito text { font: 600 9px var(--mono); letter-spacing: 0.08em; fill: rgba(255, 255, 255, 0.50); transition: fill 0.3s; }
.bc-hito.is-activo circle { fill: var(--lamina-acento); stroke: var(--lamina-acento); }
.bc-hito.is-activo text { fill: #FFFFFF; }

.bc-humo circle { fill: rgba(226, 232, 240, 0.80); opacity: 0; }
.bc-cuenta { font: 700 22px var(--display-alt); fill: #FFFFFF; opacity: 0; }
.bc-cuerpo { fill: #E5E7EB; }
.bc-aletas { fill: var(--lamina-acento); }
.bc-llama { fill: #FDBA74; filter: drop-shadow(0 0 5px #F97316); }
.bc-paracaidas { opacity: 0; }
.bc-paracaidas path:first-child { fill: rgba(251, 146, 60, 0.88); }
.bc-cuerdas { fill: none; stroke: rgba(255, 255, 255, 0.65); stroke-width: 0.8; }
.bc-equipo circle { fill: #E2E8F0; }
.bc-cumplida { opacity: 0; }
.bc-cumplida rect { fill: rgba(34, 197, 94, 0.16); stroke: rgba(34, 197, 94, 0.6); }
.bc-cumplida use { color: #4ADE80; }
.bc-cumplida text { font: 700 9px var(--mono); letter-spacing: 0.08em; fill: #BBF7D0; }

/* ---- 6h · STEM: recorrido por los cinco talleres ---- */
.stem-escena:not(:first-of-type) { opacity: 0; }

.stem-rotulo rect { fill: rgba(9, 14, 32, 0.78); stroke: rgba(255, 255, 255, 0.16); }
.stem-rotulo-num { font: 600 8.5px var(--mono); letter-spacing: 0.12em; fill: var(--lamina-acento); }
.stem-rotulo-nombre { font: 700 12.5px var(--sans); fill: #FFFFFF; }
.stem-avance rect { fill: rgba(255, 255, 255, 0.18); transition: fill 0.3s; }
.stem-avance rect.is-on { fill: var(--lamina-acento); }

/* 1 · Satélites y Cohetes */
.stem-aguja { stroke: var(--lamina-acento); stroke-width: 2.4; stroke-linecap: round; }
.stem-agua { fill: rgba(56, 189, 248, 0.45); }
.stem-gotas circle { fill: #7DD3FC; opacity: 0; }
.stem-paracaidas { fill: rgba(251, 146, 60, 0.88); }
.stem-senal path { fill: none; stroke: rgba(125, 211, 252, 0.5); stroke-width: 1.4; stroke-dasharray: 3 5; }
.stem-paquete { fill: #7DD3FC; filter: drop-shadow(0 0 4px #38BDF8); }
.stem-telemetria { fill: none; stroke: #4ADE80; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* 2 · Electrónica y Robótica */
.stem-placa { fill: #0E5F8A; stroke: #38BDF8; stroke-width: 1.2; }
.stem-cable { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.stem-cable--rojo { stroke: #F87171; }
.stem-cable--ambar { stroke: #FBBF24; }
.stem-cable--verde { stroke: #4ADE80; }
.stem-led { fill: currentColor; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.2; opacity: 0.3; }
.stem-led--rojo { color: #EF4444; }
.stem-led--ambar { color: #F59E0B; }
.stem-led--verde { color: #22C55E; }
.stem-led.is-on { opacity: 1; filter: drop-shadow(0 0 7px currentColor); }
.stem-pista { fill: none; stroke: #94A3B8; stroke-width: 3; opacity: 0.55; }
.stem-ojo { fill: var(--lamina-acento); }

/* 3 · Programación + IA */
.stem-editor { fill: #0B1222; stroke: rgba(255, 255, 255, 0.18); }
.stem-archivo { font: 500 8.5px var(--mono); fill: rgba(255, 255, 255, 0.5); }
.stem-codigo text { font: 500 12px var(--mono); fill: #E2E8F0; }
.stem-kw { fill: #C084FC; }
.stem-fn { fill: #7DD3FC; }
.stem-num { fill: #FB923C; }
.stem-cursor { fill: #FB923C; }
.stem-sinapsis { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.stem-neurona { fill: #1B2236; stroke: rgba(255, 255, 255, 0.40); stroke-width: 1.4; transition: fill 0.2s, stroke 0.2s; }
.stem-neurona.is-on { fill: var(--lamina-acento); stroke: #FFFFFF; }
.stem-prediccion { opacity: 0; }
.stem-prediccion circle { fill: rgba(34, 197, 94, 0.2); stroke: #4ADE80; stroke-width: 1.4; }
.stem-prediccion use { color: #4ADE80; }

/* 4 · Matemática + Física */
.stem-parabola { fill: none; stroke: var(--lamina-acento); stroke-width: 2.4; stroke-linecap: round; }
.stem-apex { stroke: rgba(255, 255, 255, 0.3); stroke-dasharray: 3 4; }
.stem-bola circle { fill: #FFFFFF; }
.stem-vector { stroke: #FB923C; stroke-width: 2; }
.stem-ecuacion { font: italic 600 17px var(--sans); fill: #FFFFFF; }

/* 5 · Innovación y Negocios STEM */
.stem-aura { opacity: 0.15; }
.stem-rayos { fill: none; stroke: #FDE68A; stroke-width: 2; stroke-linecap: round; opacity: 0; }
.stem-tarjeta rect { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.22); transition: fill 0.3s, stroke 0.3s; }
.stem-tarjeta-titulo { font: 700 12px var(--sans); letter-spacing: 0.1em; fill: #FFFFFF; }
.stem-tarjeta.is-on rect { stroke: var(--lamina-acento); fill: rgba(249, 115, 22, 0.12); }
.stem-flecha { fill: none; stroke: #FB923C; stroke-width: 2; }
.stem-barras rect { fill: var(--lamina-acento); opacity: 0.85; }


/* ---------------------------------------------------------------------
   7 · Pantallas menores
   El margen lateral sigue al del encabezado (home.css: 32 px bajo 1200 px,
   24 px bajo 900 px). Bajo 1024 px, una columna.
   --------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hero-content--v3 { --hero-margen: 32px; }
}

@media (max-width: 900px) {
  .hero-content--v3 { --hero-margen: 24px; }
}

@media (max-width: 1023px) {
  .hero-content--v3 {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-top: clamp(100px, 14vh, 128px);
    padding-bottom: 56px;
  }

  .hero-showcase {
    width: 100%;
    max-width: 680px;
  }

  /* En una columna el alto de la pantalla ya no limita la escena. */
  .showcase-visual { max-height: none; }
}

@media (max-width: 600px) {
  /* Mismos valores que home.css para celular: 130 px esquivan el encabezado
     de dos filas, y el titular vuelve a su tamaño de celular. */
  .hero-content--v3 {
    --hero-margen: 20px;
    padding-top: 130px;
    padding-bottom: 48px;
  }

  .hero-content--v3 .hero-title { font-size: clamp(25px, 7vw, 34px); }

  /* Pestañas en una fila deslizable. El degradado del borde derecho avisa
     que hay más. */
  .showcase-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px 56px 4px 0;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }

  .showcase-tabs::-webkit-scrollbar { display: none; }

  .showcase-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .showcase-tab--grupo { margin-left: 0; }

  /* Más alto que 2:1 para que las escenas no queden diminutas. */
  .showcase-visual { aspect-ratio: 16 / 10; }

  .hero-cta {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* ---------------------------------------------------------------------
   8 · Reducir movimiento: sin fundidos, sin avance y escenas quietas
   (home-servicios-escenas.js y home-servicios-3d.js dejan un cuadro fijo)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .showcase-panel,
  .showcase-panel.is-active,
  .showcase-tab,
  .showcase-cta,
  .hero-cta { transition: none; }

  .showcase-tab__progress { display: none; }
  .lamina *,
  .tablero,
  .tablero * { animation: none !important; }
}


/* ---------------------------------------------------------------------
   9 · Texto sólo para lectores de pantalla (home.css no lo tiene)
   --------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}