/*==============================================================
  DaIA — main3.css
  Rediseño v2.0 · sin dependencias (ni Bootstrap, ni AOS, ni Swiper)

  Índice
    01. Tokens
    02. Reset
    03. Layout (wrap, section, grid)
    04. Tipografía
    05. Botones y enlaces
    06. Iconos
    07. Header y navegación
    08. Hero
    09. Ventanas de video (lazy)
    10. Stats / contadores
    11. Diagnóstico (orbes clickeables)
    12. Ejes de dolor
    13. Productos (showcase)
    14. Shells de demo (Fase B)
    14b. Soluciones por industria
    15. Servicios
    16. Método
    17. Casos y testimonios (carrusel)
    18. Equipo
    19. FAQ
    20. Contacto y formulario
    21. Footer
    22. Modal
    23. Flotantes (WhatsApp, scroll-top)
    24. Página interior (política de privacidad)
    25. Animaciones de entrada y reduced-motion
    26. Manufactura — Command Center (landing de conversión)
    27. Manufactura — capa de movimiento (fondo, cursor, gráficos)
==============================================================*/


/*--------------------------------------------------------------
# 01. Tokens
--------------------------------------------------------------*/
:root {
  /* Marca */
  --bg:           #070708;
  --bg-alt:       #0a0a0c;
  --surface:      #131317;
  --surface-2:    #1f1f23;
  --line:         rgba(255, 255, 255, .09);
  --line-strong:  rgba(255, 255, 255, .18);

  --accent:       #575AFF;          /* violeta DaIA */
  --accent-hi:    #7A7CFF;
  --accent-soft:  rgba(87, 90, 255, .14);
  --accent-2:     #22D3EE;          /* cyan heredado de los orbes */
  --accent-2-soft: rgba(34, 211, 238, .12);

  --heading:      #ffffff;
  --text:         rgba(255, 255, 255, .74);
  --text-dim:     rgba(255, 255, 255, .48);
  --on-accent:    #ffffff;

  /* Tipografía */
  --font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(.8rem,  .77rem + .15vw,  .875rem);
  --step-0:  clamp(.95rem, .91rem + .2vw,   1.05rem);
  --step-1:  clamp(1.1rem, 1.03rem + .35vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.2rem + .7vw,  1.75rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-4:  clamp(2.1rem, 1.7rem + 2vw,    3.4rem);
  --step-5:  clamp(2.5rem, 1.9rem + 3vw,    4.5rem);

  /* Espaciado — escala 4/8 */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6.5rem; --sp-12: 8rem;

  /* Geometría y movimiento */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --wrap:      1200px;
  --wrap-pad:  clamp(1rem, 4vw, 2.5rem);

  --dur:  .3s;
  --dur-slow: .6s;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);

  --header-h: 76px;

  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  color-scheme: dark;
}

/* Superficie alterna, para intercalar secciones sin cambiar el markup */
.section--alt {
  --bg: var(--bg-alt);
  --surface: #17171c;
  background: var(--bg);
}


/*--------------------------------------------------------------
# 02. Reset
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* `clip` y no `hidden`: hidden convierte al elemento en contenedor de scroll
   y rompe el position:sticky del header. clip solo recorta.
   Necesario porque el panel de nav off-canvas vive desplazado fuera de pantalla. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent-hi); }

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

/* Salto al contenido, para lectores de pantalla y teclado */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: var(--on-accent); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/*--------------------------------------------------------------
# 03. Layout
--------------------------------------------------------------*/
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}
.wrap--narrow { max-width: 860px; }

.section {
  padding-block: clamp(3.5rem, 8vw, var(--sp-12));
  position: relative;
}

/* Grid genérica: se controla con --cols y --gap desde el componente */
.grid {
  display: grid;
  gap: var(--gap, var(--sp-5));
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(var(--cols-md, var(--cols, 1)), minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(var(--cols-lg, var(--cols-md, var(--cols, 1))), minmax(0, 1fr)); } }

/* Encabezado de sección */
.section-head {
  max-width: 760px;
  margin-bottom: var(--sp-9);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
.section-head--center .eyebrow::before { display: none; }

.section-head p {
  margin-top: var(--sp-4);
  font-size: var(--step-1);
  color: var(--text-dim);
  max-width: 62ch;
}
.section-head--center p { margin-inline: auto; }

/* Ritmo vertical para bloques de texto sueltos que no viven en .section-head */
.flow > * + * { margin-top: var(--sp-4); }
.flow > .eyebrow + * { margin-top: var(--sp-2); }
.flow > * + .btn,
.flow > * + .diagnostico__hint { margin-top: var(--sp-6); }


/*--------------------------------------------------------------
# 04. Tipografía
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--heading);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

strong { color: var(--heading); font-weight: 600; }

.lead {
  font-size: var(--step-1);
  color: var(--text);
  max-width: 60ch;
}


/*--------------------------------------------------------------
# 05. Botones
--------------------------------------------------------------*/
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--heading);
  --btn-bd: var(--line-strong);

  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: .8rem 1.5rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-bd: var(--accent);
  --btn-fg: var(--on-accent);
}
.btn--primary:hover { --btn-bg: var(--accent-hi); --btn-bd: var(--accent-hi); }

.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .06); --btn-bd: var(--line-strong); }

.btn--soft {
  --btn-bg: var(--accent-soft);
  --btn-bd: transparent;
  --btn-fg: var(--accent-hi);
}
.btn--soft:hover { --btn-bg: rgba(87, 90, 255, .22); }

.btn--sm { padding: .5rem 1rem; font-size: var(--step--1); gap: var(--sp-2); }
.btn--block { width: 100%; justify-content: center; }

/* Flecha circular — el gesto de CTA que se repite en toda la página */
.btn__arrow {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.btn__arrow svg { width: 11px; height: 11px; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Enlace de texto con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--accent-hi);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }


/*--------------------------------------------------------------
# 06. Iconos
--------------------------------------------------------------*/
.icon {
  /* inline-block y no el display:block del reset: así un icono suelto dentro
     de un título o un párrafo no se cae a su propia línea. En contenedores
     flex o grid el navegador lo blockifica igual, así que no cambia nada ahí. */
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon--fill { fill: currentColor; stroke: none; }

/* Caja de icono, reutilizada en dolores, servicios, método y contacto */
.icon-box {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-hi);
  font-size: 24px;
  flex-shrink: 0;
}


/*--------------------------------------------------------------
# 07. Header y navegación
--------------------------------------------------------------*/
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(7, 7, 8, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
body.is-scrolled .header {
  border-bottom-color: var(--line);
  background: rgba(7, 7, 8, .92);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.header__logo { margin-right: auto; display: flex; align-items: center; }
.header__logo img { height: 38px; width: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.nav__list a {
  position: relative;
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .01em;
  padding-block: var(--sp-2);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.nav__list a:hover,
.nav__list a.is-active { color: var(--heading); }
.nav__list a.is-active::after { transform: scaleX(1); }

.header__cta { flex-shrink: 0; }

/* El CTA dentro del panel solo existe en mobile: en desktop está el del header */
.nav__cta { display: none; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--heading);
  font-size: 26px;
  border-radius: var(--radius);
}

@media (max-width: 980px) {
  .nav__toggle { display: grid; order: 3; }
  .header__cta { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 auto;
    width: min(340px, 86vw);
    padding: var(--sp-7) var(--sp-6);
    background: var(--bg-alt);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
  }
  body.nav-open .nav { transform: translateX(0); }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
  }
  .nav__list a {
    display: block;
    padding: var(--sp-4) var(--sp-2);
    font-size: var(--step-1);
    border-bottom: 1px solid var(--line);
  }
  .nav__list a::after { display: none; }
  .nav__list a.is-active { color: var(--accent-hi); }

  .nav__cta { display: flex; margin-top: var(--sp-6); }

  /* Velo detrás del panel */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(0, 0, 0, .6);
    z-index: 99;
  }
  body.nav-open { overflow: hidden; }
}

/* Redes en el header, solo desktop */
.header__social { display: flex; gap: var(--sp-3); }
.header__social a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 15px;
}
.header__social a:hover { color: var(--heading); border-color: var(--accent); }
@media (max-width: 1180px) { .header__social { display: none; } }


/*--------------------------------------------------------------
# 08. Hero
--------------------------------------------------------------*/
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, var(--sp-11)) clamp(3rem, 6vw, var(--sp-10));
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -20%; left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--sp-9);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .4rem .9rem .4rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--step--1);
  color: var(--text);
  margin-bottom: var(--sp-5);
}
.hero__badge b { color: var(--heading); font-weight: 600; }
.hero__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-2-soft);
  margin-left: var(--sp-2);
}

.hero h1 { margin-bottom: var(--sp-5); }
.hero h1 em {
  font-style: normal;
  color: var(--accent-hi);
}

.hero__lead {
  font-size: var(--step-1);
  color: var(--text);
  max-width: 54ch;
  margin-bottom: var(--sp-7);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}

/* Accesos a los subdominios: Automatizar, Ser Partner, Influencer IA, Showcase */
.hero__links {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.hero__links-label {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero__links-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.hero__links-row .icon { font-size: 16px; color: var(--accent-hi); }


/*--------------------------------------------------------------
# 09. Ventanas de video (lazy)
--------------------------------------------------------------*/
.video-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(87, 90, 255, .1), transparent 55%),
    var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.video-frame__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
}

.video-frame__body {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  text-align: center;
}

.video-frame__play {
  position: relative; /* ancla el anillo del ::before */
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(10, 10, 12, .6);
  backdrop-filter: blur(6px);
  color: var(--heading);
  font-size: 26px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.video-frame__play::before {
  content: "";
  position: absolute;
  width: 68px; height: 68px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: video-ping 2.6s var(--ease) infinite;
}
@keyframes video-ping {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.9); opacity: 0;  }
}
.video-frame__play:hover {
  transform: scale(1.08);
  background: var(--accent);
  border-color: var(--accent);
}

.video-frame__label {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--heading);
  font-size: var(--step-0);
}
.video-frame__note {
  font-size: var(--step--1);
  color: var(--text-dim);
}

/* Estado sin video cargado todavía */
.video-frame[data-state="pending"] .video-frame__play {
  cursor: not-allowed;
  opacity: .55;
}
.video-frame[data-state="pending"] .video-frame__play::before { animation: none; }

/* Una vez inyectado el video real */
.video-frame__media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
}


/*--------------------------------------------------------------
# 10. Stats / contadores
--------------------------------------------------------------*/
.stats {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat__value {
  font-family: var(--font-head);
  font-size: var(--step-4);
  font-weight: 700;
  color: var(--heading);
  line-height: 1;
  letter-spacing: -.03em;
}
.stat__value span { color: var(--accent-hi); }

.stat__label {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  color: var(--text-dim);
}


/*--------------------------------------------------------------
# 11. Diagnóstico — orbes clickeables
  Se conserva el efecto orbital heredado, pero cada orbe es un
  <button> que abre el modal de diagnóstico.
--------------------------------------------------------------*/
.diagnostico {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
}

.diagnostico__inner {
  display: grid;
  gap: var(--sp-9);
  align-items: center;
}
/* El anillo exterior mide 510px + el radio de los orbes: la columna izquierda
   necesita ~570px o los orbes se montan sobre el texto de la derecha. */
@media (min-width: 1000px) {
  .diagnostico__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--sp-10);
  }
}

.orbit {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 540px;
}
.orbit::before {
  content: "";
  position: absolute;
  width: 700px; height: 700px;
  max-width: 130vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .06) 0%, transparent 68%);
  pointer-events: none;
}

.orbit__stage {
  position: relative;
  width: 540px;
  height: 540px;
}

/* Pulsos concéntricos */
.orbit__pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, .45);
  transform: translate(-50%, -50%) scale(.5);
  animation: orbit-pulse 4s ease-out infinite;
  pointer-events: none;
}
.orbit__pulse:nth-child(2) { animation-delay: -1.33s; }
.orbit__pulse:nth-child(3) { animation-delay: -2.66s; }

@keyframes orbit-pulse {
  0%   { transform: translate(-50%, -50%) scale(.5);  opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0;  }
}

/* Centro */
.orbit__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.orbit__glow {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .18) 0%, transparent 70%);
  animation: orbit-breathe 3s ease-in-out infinite;
}
@keyframes orbit-breathe {
  0%, 100% { transform: scale(1);   opacity: .7; }
  50%      { transform: scale(1.4); opacity: 1;  }
}

@property --orbit-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.orbit__ring-glow {
  position: absolute;
  width: 114px; height: 114px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-alt), var(--bg-alt)) padding-box,
    conic-gradient(from var(--orbit-angle), var(--accent-2) 0%, transparent 40%,
                   var(--accent-2) 80%, transparent 100%) border-box;
  box-shadow: 0 0 24px rgba(34, 211, 238, .45), inset 0 0 16px rgba(34, 211, 238, .08);
  animation: orbit-spin 7s linear infinite;
}
@keyframes orbit-spin { to { --orbit-angle: 360deg; } }

/* Sin soporte de @property el gradiente cónico no anima: borde plano */
@supports not (background: conic-gradient(from var(--orbit-angle), red, blue)) {
  .orbit__ring-glow {
    border: 2px solid var(--accent-2);
    background: var(--bg-alt);
    animation: none;
  }
}

.orbit__logo {
  position: relative;
  z-index: 21;
  width: 62px; height: 62px;
  object-fit: contain;
}

/* Anillos.
   pointer-events:none es obligatorio: el anillo externo mide 510px y, al ser
   un div posterior en el DOM, tapaba por completo los 6 orbes del anillo
   interno y los volvía imposibles de clickear con el mouse. */
.orbit__ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, .09);
  pointer-events: none;
}
.orbit__ring--inner { width: 310px; height: 310px; margin: -155px; }
.orbit__ring--outer { width: 510px; height: 510px; margin: -255px; }

/* Cada orbe: ahora es un botón real */
.orb {
  position: absolute;
  top: 50%; left: 50%;
  width: 52px; height: 52px;
  margin: -26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(5, 5, 8, .85);
  border: 1.5px solid rgba(34, 211, 238, .6);
  box-shadow: 0 0 14px rgba(34, 211, 238, .34), inset 0 0 10px rgba(34, 211, 238, .08);
  color: var(--accent-2);
  font-size: 20px;
  cursor: pointer;
  pointer-events: auto; /* el anillo contenedor los desactiva */
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.orb:hover,
.orb:focus-visible {
  border-color: var(--accent-2);
  color: #fff;
  box-shadow: 0 0 30px rgba(34, 211, 238, .95), inset 0 0 14px rgba(34, 211, 238, .25);
  z-index: 30;
}

/* ---- Micro-interacciones ----
   El transform del orbe está tomado por la animación orbital, así que el
   movimiento se hace sobre el glifo y sobre dos pseudo-elementos. */

/* Latido de reposo: escalonado por --i, para que se lean como clickeables */
.orb::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: orb-idle 3.4s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * -.45s);
  pointer-events: none;
}
@keyframes orb-idle {
  0%, 70%, 100% { opacity: 0; }
  35%           { opacity: .45; }
}

/* Anillo que se abre al pasar por encima */
.orb::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  transform: scale(.82);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.orb:hover::after,
.orb:focus-visible::after { opacity: .55; transform: scale(1); }

/* El glifo crece al pasar y se hunde al apretar */
.orb .icon {
  position: relative;
  z-index: 1;
  transition: transform var(--dur) var(--ease);
}
.orb:hover .icon,
.orb:focus-visible .icon { transform: scale(1.18); }
.orb:active .icon { transform: scale(.88); }

/* Al abrir su modal el orbe queda marcado hasta que el usuario siga navegando */
.orb.is-open {
  border-color: var(--accent-2);
  color: #fff;
  box-shadow: 0 0 30px rgba(34, 211, 238, .8);
}
.orb--ai.is-open {
  border-color: var(--accent-hi);
  box-shadow: 0 0 30px rgba(87, 90, 255, .8);
}

/* Los motores de IA se distinguen en violeta de los canales en cyan */
.orb--ai {
  border-color: var(--accent);
  color: var(--accent-hi);
  box-shadow: 0 0 16px rgba(87, 90, 255, .45), inset 0 0 10px rgba(87, 90, 255, .1);
}
.orb--ai:hover,
.orb--ai:focus-visible {
  border-color: var(--accent-hi);
  color: #fff;
  box-shadow: 0 0 32px rgba(87, 90, 255, .95), inset 0 0 14px rgba(87, 90, 255, .28);
}

.orbit__ring--inner .orb {
  animation: orbit-cw 22s linear infinite;
  animation-delay: calc(var(--i, 0) * -22s / var(--n, 6));
}
.orbit__ring--outer .orb {
  animation: orbit-ccw 38s linear infinite;
  animation-delay: calc(var(--i, 0) * -38s / var(--n, 10));
}

@keyframes orbit-cw {
  from { transform: rotate(0deg)   translateY(-155px) rotate(0deg);    }
  to   { transform: rotate(360deg) translateY(-155px) rotate(-360deg); }
}
@keyframes orbit-ccw {
  from { transform: rotate(0deg)    translateY(-255px) rotate(0deg);   }
  to   { transform: rotate(-360deg) translateY(-255px) rotate(360deg); }
}

/* Pausa al pasar el mouse o al navegar con teclado: hace clickeable el orbe.
   Se usa :focus-visible y NO :focus-within: al cerrar el modal el foco vuelve
   al orbe que lo abrió (correcto para accesibilidad), y con :focus-within eso
   dejaba la órbita congelada para siempre. */
.orbit__stage:hover .orb,
.orbit__stage:has(.orb:focus-visible) .orb { animation-play-state: paused; }

/* Etiqueta flotante del orbe */
.orb__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--heading);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.orb:hover .orb__tip,
.orb:focus-visible .orb__tip { opacity: 1; }

@media (max-width: 1240px) { .orbit__stage { transform: scale(.86); } .orbit { min-height: 500px; } }
@media (max-width: 1100px) { .orbit__stage { transform: scale(.8);  } .orbit { min-height: 460px; } }
@media (max-width: 560px)  { .orbit__stage { transform: scale(.56); } .orbit { min-height: 340px; } }

/* Texto de la sección */
.diagnostico__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--text-dim);
}
.diagnostico__hint .icon { color: var(--accent-2); font-size: 18px; }


/*--------------------------------------------------------------
# 11b. Stack — franja infinita de herramientas
  El track contiene la lista dos veces; la animación lo mueve
  -50%, así el punto de reinicio coincide exactamente y el loop
  no tiene costura.
--------------------------------------------------------------*/
.stack {
  padding-block: var(--sp-9);
  border-block: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}

.stack__title {
  text-align: center;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-6);
}

.stack__note {
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-dim);
}

.marquee {
  overflow: hidden;
  /* Difumina los bordes para que las fichas entren y salgan sin cortarse */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee + .marquee { margin-top: var(--sp-4); }

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-4);
  padding-block: var(--sp-1);
  animation: marquee 46s linear infinite;
}
.marquee--reverse .marquee__track {
  animation-duration: 58s;
  animation-direction: reverse;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pausa al pasar el mouse: deja leer los nombres */
.marquee:hover .marquee__track { animation-play-state: paused; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  padding: .6rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--heading); }
.chip .icon { font-size: 19px; color: var(--accent-hi); }

/* Sin animación: la franja pasa a ser una grilla estática legible */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    padding-inline: var(--wrap-pad);
  }
  /* La copia duplicada solo existe para el loop: sin animación, sobra */
  .marquee__track .chip[aria-hidden="true"] { display: none; }
}


/*--------------------------------------------------------------
# 12. Ejes de dolor
--------------------------------------------------------------*/
.pain-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.pain-card:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-4px);
}
.pain-card h3 { font-size: var(--step-1); }
.pain-card p { font-size: var(--step-0); color: var(--text-dim); flex-grow: 1; }
.pain-card .link-arrow { font-size: var(--step--1); }


/*--------------------------------------------------------------
# 13. Productos (showcase)
  Layout de Adrián: izquierda = dolor, derecha = producto,
  abajo a la derecha = ventana de video.
--------------------------------------------------------------*/
.products { display: grid; gap: clamp(3rem, 7vw, var(--sp-11)); }

.product {
  display: grid;
  gap: var(--sp-6);
  padding-top: clamp(2rem, 5vw, var(--sp-9));
  border-top: 1px solid var(--line);
}
.product:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 1000px) {
  .product {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-7);
    row-gap: var(--sp-8);
    align-items: start;
  }
  .product__pain     { grid-column: 1 / 6;  }
  .product__solution { grid-column: 6 / 13; }
  .product__demo     { grid-column: 1 / 9;  }
  .product__video    { grid-column: 9 / 13; align-self: end; }
}

/* Columna izquierda: el dolor */
.product__pain {
  position: relative;
  padding-left: var(--sp-6);
  border-left: 2px solid var(--accent);
}
.product__index {
  display: block;
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-hi);
  margin-bottom: var(--sp-3);
}
.product__pain-title {
  font-size: var(--step-2);
  color: var(--heading);
  margin-bottom: var(--sp-4);
}
.product__pain p { color: var(--text-dim); }

.product__pain-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: .3rem .8rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-hi);
  font-size: var(--step--1);
  font-weight: 600;
}

/* Columna derecha: el producto */
.product__name {
  font-size: var(--step-3);
  margin-bottom: var(--sp-4);
}
.product__desc { color: var(--text); margin-bottom: var(--sp-6); max-width: 56ch; }

.product__features {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
@media (min-width: 640px) { .product__features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.product__features li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--step-0);
  color: var(--text);
}
.product__features .icon {
  color: var(--accent-2);
  font-size: 18px;
  margin-top: .25em;
}

.product__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }


/*--------------------------------------------------------------
# 14. Shells de demo (Fase B)
  Cada [data-demo] queda como marco estático. main3.js monta el
  demo interactivo si hay uno registrado con ese nombre.
--------------------------------------------------------------*/
.demo {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%),
    var(--surface);
  overflow: hidden;
  min-height: 320px;
}

/* Barra superior tipo ventana de aplicación */
.demo__chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .25);
}
.demo__dots { display: flex; gap: 6px; }
.demo__dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}
.demo__title {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-dim);
  font-family: var(--font-body);
}
.demo__badge {
  margin-left: auto;
  padding: .15rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.demo__body {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-9) var(--sp-6);
  text-align: center;
  min-height: 260px;
}
.demo__body .icon-box { background: rgba(255, 255, 255, .04); color: var(--text-dim); }
.demo__body p { color: var(--text-dim); font-size: var(--step--1); max-width: 40ch; }

/* Esqueleto animado, para que el shell no se lea como un error */
.demo__skeleton {
  display: grid;
  gap: var(--sp-3);
  width: min(360px, 100%);
}
.demo__skeleton span {
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .04) 0%,
    rgba(255, 255, 255, .09) 50%,
    rgba(255, 255, 255, .04) 100%);
  background-size: 200% 100%;
  animation: demo-shimmer 1.8s linear infinite;
}
.demo__skeleton span:nth-child(2) { width: 78%; animation-delay: .15s; }
.demo__skeleton span:nth-child(3) { width: 56%; animation-delay: .3s;  }

@keyframes demo-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


/*--------------------------------------------------------------
# 14b. Soluciones por industria
  Los 5 productos ensamblados en verticales reales (Axia,
  Farmacia.AI, aegle). Cada tarjeta lleva su ventana de video.
--------------------------------------------------------------*/
.vertical {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.vertical:hover { border-color: var(--accent); transform: translateY(-4px); }

/* La ventana de video se integra al borde superior de la tarjeta */
.vertical__video {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}
.vertical__video .video-frame__play { width: 54px; height: 54px; font-size: 20px; }
.vertical__video .video-frame__play::before { width: 54px; height: 54px; }
.vertical__video .video-frame__body { gap: var(--sp-3); padding: var(--sp-5); }

.vertical__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  flex-grow: 1;
}

.vertical__industry {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-hi);
  font-size: var(--step--1);
  font-weight: 600;
}
.vertical__industry .icon { font-size: 15px; }

.vertical h3 { font-size: var(--step-2); }
.vertical > .vertical__body > p { color: var(--text-dim); font-size: var(--step-0); }

.vertical__features {
  display: grid;
  gap: var(--sp-2);
  margin-block: var(--sp-2);
  flex-grow: 1;
}
.vertical__features li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--text);
}
.vertical__features .icon {
  color: var(--accent-2);
  font-size: 15px;
  margin-top: .3em;
}


/*--------------------------------------------------------------
# 15. Servicios
  Sección separada de producto, como pide el brief.
--------------------------------------------------------------*/
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.service-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.service-card h3 { font-size: var(--step-1); }
.service-card p { color: var(--text-dim); font-size: var(--step-0); flex-grow: 1; }

.service-card__num {
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .1em;
}

/* Aclaración producto vs servicio */
.split-note {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  margin-bottom: var(--sp-8);
}
@media (min-width: 800px) { .split-note { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* El icono va al costado en su caja, como en el resto de las tarjetas.
   Suelto dentro del <h4> caía en su propia línea (el reset hace svg
   display:block) y quedaba flotando sin relación con el título. */
.split-note__item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.split-note__item .icon-box { width: 44px; height: 44px; font-size: 21px; background: rgba(255, 255, 255, .06); }
.split-note h4 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.split-note p { font-size: var(--step-0); color: var(--text); }


/*--------------------------------------------------------------
# 16. Método
--------------------------------------------------------------*/
.steps { counter-reset: step; }

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.step__num {
  font-family: var(--font-head);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  opacity: .7;
}
.step h3 { font-size: var(--step-1); }
.step p { font-size: var(--step-0); color: var(--text-dim); }
.step__free {
  align-self: flex-start;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font-size: var(--step--1);
  font-weight: 600;
}


/*--------------------------------------------------------------
# 17. Casos y testimonios
--------------------------------------------------------------*/
.case-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.case-card:hover { border-color: var(--accent); transform: translateY(-4px); }

.case-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0; /* la media nunca se comprime aunque la tarjeta estire */
}
.case-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.case-card:hover .case-card__media img { transform: scale(1.05); }

.case-card__tag {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  background: rgba(7, 7, 8, .82);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  font-size: .72rem;
  font-weight: 600;
  color: var(--heading);
}

.case-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex-grow: 1;
}
.case-card__body h3 { font-size: var(--step-1); }
.case-card__body p { font-size: var(--step-0); color: var(--text-dim); flex-grow: 1; }

.case-card__metric {
  font-family: var(--font-head);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--accent-hi);
  line-height: 1;
}
.case-card__metric small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--text-dim);
  margin-top: var(--sp-1);
}

/* Carrusel — reemplaza a Swiper con scroll-snap nativo */
/* CTA de cierre de sección */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
}

/* Testimonios */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  height: 100%;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.quote__text { color: var(--text); flex-grow: 1; }
.quote__text::before {
  content: "\201C";
  display: block;
  font-family: var(--font-head);
  font-size: 3rem;
  line-height: .6;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.quote__stars { display: flex; gap: 2px; color: #F5B301; font-size: 15px; }

.quote__author { display: flex; align-items: center; gap: var(--sp-3); }
.quote__author img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.quote__author h4 { font-size: var(--step-0); }
.quote__author span { font-size: var(--step--1); color: var(--text-dim); }

/* Franja de logos de clientes */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-7);
  padding-block: var(--sp-7);
  border-block: 1px solid var(--line);
}
.logos span {
  font-family: var(--font-head);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: -.01em;
  transition: color var(--dur) var(--ease);
}
.logos span:hover { color: var(--heading); }


/*--------------------------------------------------------------
# 18. Equipo
--------------------------------------------------------------*/
.member {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.member:hover { border-color: var(--accent); transform: translateY(-4px); }

.member__photo {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface-2);
}
.member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1);
  transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.member:hover .member__photo img { filter: grayscale(0); transform: scale(1.04); }

.member__body { padding: var(--sp-5); }
.member__body h3 { font-size: var(--step-0); }
.member__role {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--step--1);
  color: var(--accent-hi);
  font-weight: 600;
}
.member__body p {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-dim);
}


/*--------------------------------------------------------------
# 19. FAQ
--------------------------------------------------------------*/
.faq { display: grid; gap: var(--sp-3); }

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.faq__item:has(.faq__q[aria-expanded="true"]) { border-color: var(--accent); }

.faq__q {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5);
  text-align: left;
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.35;
}
.faq__q .icon { color: var(--accent); font-size: 20px; }
.faq__q-text { flex-grow: 1; }

.faq__chevron {
  transition: transform var(--dur) var(--ease);
  color: var(--text-dim);
  font-size: 18px;
}
.faq__q[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); color: var(--accent); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a p {
  padding: 0 var(--sp-5) var(--sp-5) calc(var(--sp-5) + 20px + var(--sp-4));
  color: var(--text-dim);
}


/*--------------------------------------------------------------
# 20. Contacto y formulario
--------------------------------------------------------------*/
.contact__grid {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 980px) {
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.info-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.info-card h4 { font-size: var(--step-0); margin-bottom: var(--sp-1); }
.info-card p, .info-card a { font-size: var(--step--1); color: var(--text-dim); }
.info-card a:hover { color: var(--accent-hi); }

.contact__cards { display: grid; gap: var(--sp-4); }

.form {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
@media (min-width: 620px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full, .form__foot, .form__status { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--sp-2); }
.field label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text);
}
.field input,
.field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--heading);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
.field textarea { resize: vertical; min-height: 140px; }

.form__status {
  display: none;
  padding: var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
}
.form__status[data-state="loading"] { display: block; background: var(--surface-2); color: var(--text); }
.form__status[data-state="error"]   { display: block; background: rgba(223, 21, 41, .14); color: #FF8B96; border: 1px solid rgba(223, 21, 41, .4); }
.form__status[data-state="ok"]      { display: block; background: rgba(5, 150, 82, .14);  color: #4ADE80; border: 1px solid rgba(5, 150, 82, .4); }

.map {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  margin-bottom: var(--sp-5);
}
.map iframe { width: 100%; height: 100%; border: 0; }

.social-row { display: flex; gap: var(--sp-3); }
.social-row a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 17px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.social-row a:hover { color: var(--heading); border-color: var(--accent); background: var(--accent-soft); }


/*--------------------------------------------------------------
# 21. Footer
--------------------------------------------------------------*/
.footer {
  padding-block: var(--sp-9) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}

.footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--sp-8);
}

.footer h4 {
  font-size: var(--step-0);
  margin-bottom: var(--sp-4);
}
.footer p, .footer li, .footer a { font-size: var(--step--1); color: var(--text-dim); }
.footer a:hover { color: var(--accent-hi); }
.footer li + li { margin-top: var(--sp-2); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-dim);
}

.kommo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-dim);
}
.kommo-badge:hover { border-color: var(--line-strong); color: var(--heading); }
/* El logo de Kommo es un wordmark 132×28: se respeta esa proporción
   o el texto queda aplastado. En espacios chicos se usa #i-kommo. */
.kommo-badge img {
  width: 76px;
  height: auto;
  aspect-ratio: 132 / 28;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .85;
}


/*--------------------------------------------------------------
# 22. Modal (diagnóstico y video)
--------------------------------------------------------------*/
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(3, 3, 5, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__panel {
  position: relative; /* ancla el botón de cerrar */
  width: min(620px, 100%);
  max-height: min(85vh, 760px);
  overflow-y: auto;
  padding: var(--sp-7);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(.98);
  transition: transform var(--dur) var(--ease);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal--wide .modal__panel { width: min(960px, 100%); padding: var(--sp-5); }

.modal__close {
  position: absolute;
  top: var(--sp-5); right: var(--sp-5);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--heading);
  font-size: 20px;
  background: var(--surface);
}
.modal__close:hover { background: var(--surface-2); border-color: var(--line-strong); }

.modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-bottom: var(--sp-3);
}
.modal__title { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.modal__lead { color: var(--text-dim); margin-bottom: var(--sp-6); }

/* Preguntas de diagnóstico */
.diag__q {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: var(--sp-4);
}
.diag__options { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }

.diag__option {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: var(--step-0);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.diag__option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--heading);
}
.diag__option .icon { color: var(--accent-hi); }

.diag__progress {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.diag__progress span {
  height: 3px;
  flex: 1;
  border-radius: var(--radius-pill);
  background: var(--line);
  transition: background var(--dur) var(--ease);
}
.diag__progress span.is-done { background: var(--accent); }

/* Resultado del diagnóstico */
.diag__result {
  padding: var(--sp-6);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  margin-bottom: var(--sp-5);
}
.diag__result h4 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.diag__result p { color: var(--text); font-size: var(--step-0); }

.diag__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Modal de integración (los logos que orbitan) */
.tool__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  padding-right: var(--sp-9); /* deja lugar al botón de cerrar */
}
.tool__head .modal__eyebrow { margin-bottom: var(--sp-1); }
.tool__head .modal__title { margin-bottom: 0; }

.tool__mark {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--accent-hi);
}
.tool__glyph { font-size: 32px; }

.tool__uses {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.tool__uses li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--step-0);
  color: var(--text);
}
.tool__uses .icon { color: var(--accent-2); font-size: 17px; margin-top: .3em; flex-shrink: 0; }


/*--------------------------------------------------------------
# 23. Flotantes
--------------------------------------------------------------*/
.wa-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .38);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wa-float:hover {
  transform: scale(1.08);
  color: #fff;
  box-shadow: 0 12px 32px rgba(37, 211, 102, .55);
}
.wa-float svg { width: 28px; height: 28px; fill: currentColor; stroke: none; }

.wa-float__tip {
  position: absolute;
  right: calc(100% + 12px);
  white-space: nowrap;
  padding: .4rem .8rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--heading);
  font-size: var(--step--1);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.wa-float:hover .wa-float__tip { opacity: 1; }

.scroll-top {
  position: fixed;
  right: 20px; bottom: 88px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--accent-hi); color: var(--on-accent); }


/*--------------------------------------------------------------
# 24. Página interior (política de privacidad)
--------------------------------------------------------------*/
.page-head {
  padding-block: var(--sp-9) var(--sp-7);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.breadcrumb {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--step--1);
  color: var(--text-dim);
  margin-top: var(--sp-4);
}

.prose { max-width: 74ch; }
.prose h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: var(--step-1);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.prose p, .prose li { margin-bottom: var(--sp-4); }
.prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }
.prose li::marker { color: var(--accent); }


/*--------------------------------------------------------------
# 25. Animaciones de entrada y reduced-motion
  Reemplaza a AOS: main3.js agrega .is-in vía IntersectionObserver.
--------------------------------------------------------------*/
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }

/* Si el usuario no tiene JS, nunca se agrega .is-in: el contenido debe verse igual */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .orb, .orbit__pulse, .orbit__glow, .orbit__ring-glow { animation: none !important; }
  .orb::before { animation: none !important; opacity: 0; }
  .video-frame__play::before { animation: none !important; }
  .demo__skeleton span { animation: none !important; }
}

/* Impresión */
@media print {
  .header, .nav, .wa-float, .scroll-top, .modal, .demo { display: none !important; }
  body { background: #fff; color: #000; }
}


/*--------------------------------------------------------------
# 26. Manufactura — Command Center (landing de conversión)

  Todo lo de acá abajo es aditivo: no pisa ninguna regla de las
  secciones 01–25. La landing de manufactura reutiliza .btn,
  .icon-box, .section-head, .pain-card, .form, .field, .header,
  .footer y .video-frame tal cual están definidos arriba.

  Regla de acentos de esta landing:
    --accent   (violeta) → marca, CTAs, navegación
    --accent-2 (cyan)    → datos, dashboards, métricas de mejora
    --danger   (rojo)    → SOLO el diagnóstico del dolor
--------------------------------------------------------------*/

/* --- 26.1 Tokens ------------------------------------------- */
:root {
  --danger:      #DF1529;
  --danger-hi:   #FF8B96;          /* el rojo puro sobre fondo oscuro no llega a AA */
  --danger-soft: rgba(223, 21, 41, .12);
}

/* Números como material tipográfico: mismo tratamiento en toda la página */
.num {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}


/* Logo de marca + bajada de línea de producto. El alto lo fija
   .header__logo img (sección 07); acá solo va el sufijo. */
.logo-sub {
  margin-left: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line-strong);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--text-dim);
  white-space: nowrap;
}
@media (max-width: 420px) { .logo-sub { display: none; } }


/* --- 26.1b Diagrama del hero -------------------------------- */
/* Placeholder honesto mientras no está la foto del operador: muestra la
   arquitectura real (tres orígenes → un centro), no un mockup decorativo. */
.hero-diagram {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-diagram text {
  font-family: var(--font-body);
  font-size: 15px;
  fill: var(--text);
}
.hero-diagram__node rect {
  fill: rgba(255, 255, 255, .03);
  stroke: var(--line-strong);
}
.hero-diagram__node text {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .1em;
  text-anchor: middle;
  fill: var(--heading);
}
.hero-diagram__core rect { fill: rgba(19, 19, 23, .9); stroke: var(--accent-2); stroke-opacity: .5; }
.hero-diagram__core-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  fill: #22D3EE;
}
.hero-diagram__core-num {
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 700;
  fill: var(--heading);
}
.hero-diagram__core-sub { font-size: 12px; fill: var(--text-dim); }
.hero-diagram__bar-bg  { fill: rgba(255, 255, 255, .1); stroke: none; }
.hero-diagram__bar-val { fill: #22D3EE; stroke: none; }

/* Coincide con el viewBox del diagrama (640×338): el SVG llena el marco
   sin bandas arriba y abajo. Si se reemplaza por la foto del operador,
   este valor vuelve al 16/10 de .video-frame. */
.hero .video-frame { aspect-ratio: 640 / 338; }

@media (max-width: 620px) {
  /* Como inline-flex, al no entrar en una línea el badge parte en dos
     columnas y "Integración / nativa" queda apilado contra el resto del
     texto. Como bloque, fluye como una frase normal. */
  .hero__badge { display: block; }
  .hero__badge-dot { display: inline-block; vertical-align: middle; }
}


/* --- 26.2 Barra de confianza -------------------------------- */
.trust-bar {
  padding-block: var(--sp-8);
  border-block: 1px solid var(--line);
  background: var(--bg);
}

/* Alineado a la izquierda y no centrado: el bloque de filas arranca en el
   eje del label, y un título centrado sobre él se lee fuera de registro. */
.trust-bar__title {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-7);
}

/* Estática a propósito: es información de confianza, no un elemento
   de movimiento. El carrusel infinito vive en #11b Stack.

   Un grupo por fila y no tres columnas: ERP tiene cinco sistemas y CRM
   dos, así que en columnas siempre queda una corta y otra en tres filas.
   En filas, el ancho sobrante es del grupo que lo necesita. */
/* 860px = label (150) + gap (40) + los cinco sistemas de ERP, que es la
   fila más larga. Así ERP llena el ancho exacto y los otros dos grupos
   quedan alineados contra el mismo eje izquierdo. */
.trust-rows,
.trust-bar__title {
  max-width: 860px;
  margin-inline: auto;
}

.trust-row {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}
@media (min-width: 760px) {
  /* 168px: lo que mide "DATOS DE PLANTA" en versalitas espaciadas. Con
     menos, ese label cae a dos líneas y desentona con ERP y CRM. */
  .trust-row { grid-template-columns: 168px minmax(0, 1fr); gap: var(--sp-6); }
}
.trust-row + .trust-row {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.trust-row__label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.trust-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

/* Placa + nombre. La placa iguala el peso visual de logos que de origen
   tienen formas y densidades muy distintas: sin ella, el óvalo de Oracle
   y las cuatro barras de Power BI no se leen como la misma familia. */
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  width: 104px;
  text-align: center;
}

.trust-item__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--heading);
  font-size: 34px;
  opacity: .6;
  filter: grayscale(1);
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.trust-item:hover .trust-item__mark {
  opacity: 1;
  border-color: var(--line-strong);
}
/* A 34px un stroke de 1.75 se ve endeble: el glifo tiene que sostener
   la placa, no flotar adentro. */
.trust-item__mark .icon { stroke-width: 1.6; }

/* Cuando lleguen los SVG oficiales entran acá y heredan la misma placa */
.trust-item__mark img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

/* Dos líneas reservadas: "SAP Business One" ocupa dos y "Oracle" una,
   y sin el alto mínimo la fila se desalinea entera. */
.trust-item__name {
  min-height: calc(2 * 1.3em);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease);
}
.trust-item:hover .trust-item__name { color: var(--text); }


/* --- 26.3 Diagnóstico del dolor ----------------------------- */
/* El ícono en rojo solo acá: marca "esto te cuesta plata", no "esto instalamos" */
.pain-card--alert .icon-box {
  background: var(--danger-soft);
  color: var(--danger-hi);
}
.pain-card--alert:hover { border-color: var(--danger); }

/* Dos de los tres títulos ocupan dos líneas y uno una sola: sin el alto
   mínimo, los párrafos arrancan a tres alturas distintas y las tarjetas
   se leen como componentes diferentes en vez de como una serie. */
.pain-card--alert h3 { min-height: calc(2 * 1.15em); }

/* Métrica destacada full-width: el argumento financiero de la sección */
.metric-hero {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  margin-bottom: var(--sp-8);
  padding: clamp(1.5rem, 4vw, var(--sp-8));
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(100deg, var(--danger-soft), transparent 45%),
    var(--surface);
}
@media (min-width: 900px) {
  .metric-hero { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-8); }
}

.metric-hero__num {
  font-size: var(--step-5);
  color: var(--accent-2);
  white-space: nowrap;
}
.metric-hero__num small {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.metric-hero__text {
  font-size: var(--step-2);
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.25;
  text-wrap: balance;
}
.metric-hero__source {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--text-dim);
}


/* --- 26.4 Bento de dashboards ------------------------------- */
/* Mobile: una columna, y las dos tarjetas grandes primero. El orden
   sigue el impacto financiero (OEE e inventario), no la grilla. */
.dash-bento {
  display: grid;
  gap: var(--sp-5);
  grid-template-areas:
    "oee"
    "inv"
    "pipeline"
    "scorecard";
}
@media (min-width: 780px) {
  .dash-bento {
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
      "oee pipeline"
      "inv scorecard";
  }
}
.dash-card--oee       { grid-area: oee; }
.dash-card--inv       { grid-area: inv; }
.dash-card--pipeline  { grid-area: pipeline; }
.dash-card--scorecard { grid-area: scorecard; }

.dash-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%),
    var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Mismo gesto que .pain-card pero con el acento de datos, no el de alerta */
.dash-card:hover { border-color: var(--accent-2); transform: translateY(-4px); }

/* Las dos grandes cargan los dos dolores más caros: se les da más aire
   y un título un escalón mayor, no solo más ancho de grilla. */
@media (min-width: 780px) {
  .dash-card--lg { padding: var(--sp-7); }
  .dash-card--lg h3 { font-size: var(--step-2); }
  .dash-card--lg .icon-box { width: 52px; height: 52px; font-size: 24px; }
}

.dash-card__head { display: flex; align-items: flex-start; gap: var(--sp-4); }
.dash-card .icon-box {
  width: 42px; height: 42px;
  font-size: 20px;
  background: var(--accent-2-soft);
  color: var(--accent-2);
}
.dash-card__eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--sp-2);
}
.dash-card h3 { font-size: var(--step-1); }
.dash-card__desc { font-size: var(--step-0); color: var(--text-dim); }

/* El visual va abajo y absorbe el alto sobrante: las dos tarjetas de
   cada fila terminan alineadas aunque el texto mida distinto. */
.dash-card__visual {
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.dash-note {
  margin-top: var(--sp-6);
  font-size: var(--step--1);
  color: var(--text-dim);
  text-align: center;
}

/* Visual 1 — OEE: una barra partida en tres segmentos reales */
.oee { display: grid; gap: var(--sp-4); }
.oee__total {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.oee__total .num { font-size: var(--step-3); color: var(--accent-2); }
.oee__total span { font-size: var(--step--1); color: var(--text-dim); }

/* El gap tiene que ser generoso: con 3px los labels de dos segmentos
   contiguos se tocan y se leen como una sola frase. */
.oee__bar { display: flex; gap: var(--sp-4); }
/* En pantallas chicas ni con gap alcanza: tres segmentos de ~130px no
   entran "Disponibilidad" + "91.4%". Se apilan uno por fila. */
@media (max-width: 640px) {
  .oee__bar { flex-direction: column; gap: var(--sp-3); }
}
.oee__seg { flex: 1; min-width: 0; }
.oee__track {
  height: 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.oee__fill {
  height: 100%;
  width: var(--pct, 0%);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
/* El segmento que arrastra el OEE hacia abajo se lee distinto */
.oee__seg--low .oee__fill { background: linear-gradient(90deg, var(--danger), var(--danger-hi)); }

.oee__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.oee__label { font-size: var(--step--1); color: var(--text-dim); }
.oee__val   { font-size: var(--step--1); color: var(--heading); font-variant-numeric: tabular-nums; }
.oee__seg--low .oee__val { color: var(--danger-hi); }

/* Visual 2 — DIO: gauge semicircular + alerta de stock */
.gauge { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.gauge__chart { width: 170px; flex-shrink: 0; }
.gauge__chart svg { width: 100%; height: auto; display: block; }
.gauge__arc-bg  { stroke: rgba(255, 255, 255, .08); }
.gauge__arc-val { stroke: var(--accent-2); }
/* En px de usuario y no con --step-*: el SVG ya se escala solo, y un
   clamp en rem dentro del viewBox se vuelve impredecible. */
.gauge__num { font-size: 30px; fill: var(--heading); }

.gauge__scale {
  display: flex;
  justify-content: space-between;
  padding-inline: 6px;
  font-size: var(--step--1);
  color: var(--text-dim);
}
.gauge__caption {
  margin-top: var(--sp-1);
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-dim);
}

.gauge__side { display: grid; gap: var(--sp-3); min-width: 0; }
.gauge__target { font-size: var(--step--1); color: var(--text-dim); }
.gauge__target b { color: var(--heading); }

.alert-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .35rem .75rem;
  border: 1px solid rgba(223, 21, 41, .35);
  border-radius: var(--radius-pill);
  background: var(--danger-soft);
  color: var(--danger-hi);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
}
.alert-badge .icon { font-size: 15px; }

/* Visual 3 — Pipeline: capacidad de planta vs. compromiso comercial */
.caps { display: grid; gap: var(--sp-3); }
.caps__plot {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-4);
  height: 92px;
}
.caps__month { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.caps__bar {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 3px 3px 0 0;
  background: rgba(255, 255, 255, .14);
}
.caps__bar--load { background: var(--accent-2); }
/* Compromiso por encima de la capacidad instalada: eso es una promesa que no se cumple */
.caps__bar--over { background: var(--danger); }

.caps__axis {
  display: flex;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.caps__axis span { flex: 1; text-align: center; font-size: var(--step--1); color: var(--text-dim); }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--step--1); color: var(--text-dim); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend i {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--swatch, var(--text-dim));
}

/* Visual 4 — Balanced scorecard: 3 KPIs en línea */
.kpi-row {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi__val {
  font-size: var(--step-1);
  color: var(--heading);
  white-space: nowrap;
}
.kpi__val small { font-size: .55em; color: var(--text-dim); font-weight: 600; }
.kpi__label {
  margin-top: var(--sp-1);
  font-size: var(--step--1);
  color: var(--text-dim);
}
.kpi__delta { font-size: var(--step--1); font-weight: 600; color: var(--accent-2); }
.kpi__delta--down { color: var(--danger-hi); }


/* --- 26.5 ROI y testimonios --------------------------------- */
/* Las tres tarjetas tienen que leerse como una sola familia: número en una
   línea, label en dos, cita abajo. Sin las alturas mínimas, "50% → 90%"
   parte a dos líneas y "precisión de inventario" ocupa una sola, y las tres
   citas arrancan a alturas distintas — se lee como tres componentes. */
.roi-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.roi-stat:hover { border-color: var(--accent-2); transform: translateY(-4px); }

.roi-stat__num {
  font-family: var(--font-head);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.roi-stat__label {
  min-height: calc(2 * 1.5em);      /* dos líneas: alinea el arranque de las citas */
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.5;
  color: var(--heading);
}
.roi-stat__quote {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--step-0);
  color: var(--text-dim);
  font-style: italic;
  flex-grow: 1;
}

.roi-disclaimer {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-dim);
  max-width: 70ch;
}


/* --- 26.6 Cierre — CTA único de WhatsApp -------------------- */
/* Reemplaza al stepper de 3 pasos: un solo destino, sin campos, sin
   validación y sin estado de envío que mantener. La calificación
   (cargo, ERP, cuello de botella) pasa a la conversación. */
.cta-panel {
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, var(--sp-9)) clamp(1.5rem, 4vw, var(--sp-8));
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 50% 0%, var(--accent-soft), transparent 62%),
    var(--surface);
}
.cta-panel .eyebrow { margin-bottom: var(--sp-4); }
.cta-panel .eyebrow::before { display: none; }
.cta-panel h2 { margin-bottom: var(--sp-5); }

.cta-panel__lead {
  margin-inline: auto;
  margin-bottom: var(--sp-7);
  color: var(--text);
}

.cta-panel__note {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--text-dim);
}

/* El CTA es el elemento más grande de la sección: si empata en peso con
   el H2, el usuario duda entre seguir leyendo y actuar. */
.btn--lg { padding: 1.05rem 2rem; font-size: var(--step-1); }
.wa-cta .icon { font-size: 22px; }

.cta-facts { margin-top: var(--sp-8); }
.cta-facts .info-card { height: 100%; padding: var(--sp-5) var(--sp-5) var(--sp-6); }
/* Mismo criterio que en .pain-card--alert: "60 minutos, con tu equipo de
   planta" ocupa dos líneas y los otros dos títulos una. */
.cta-facts .info-card h4 { min-height: calc(2 * 1.15em); }


/* --- 26.7 Footer de cumplimiento ---------------------------- */
/* (la capa de movimiento vive en la sección 27, al final del archivo) */
.compliance-block {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line);
}
.compliance-item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.compliance-item .icon-box { width: 40px; height: 40px; font-size: 19px; }
.compliance-item h4 { font-size: var(--step-0); margin-bottom: var(--sp-1); }
.compliance-item p  { font-size: var(--step--1); color: var(--text-dim); }

.footer__grid a .icon {
  font-size: 15px;
  margin-right: var(--sp-2);
  vertical-align: -.15em;
  color: var(--accent-hi);
}


/*--------------------------------------------------------------
# 27. Manufactura — capa de movimiento

  Regla de la sección: el movimiento tiene que hacer un trabajo.
  Nada gira ni rebota "para verse moderno". Cada efecto de acá
  cumple una de tres funciones:

    orientar   — dónde estoy (progreso de scroll, grid del fondo)
    responder  — el sitio registra lo que hago (spotlight de cursor)
    explicar   — el dato se construye a la vista (barras, contadores)

  Todo se apaga con prefers-reduced-motion y nada depende de JS
  para que el contenido sea legible: sin JS, los gráficos se
  muestran en su estado final.
--------------------------------------------------------------*/

/* --- 27.1 Fondo del hero: grid + auroras --------------------- */
/* Las líneas dan escala y profundidad al fondo plano; la máscara
   radial las apaga hacia los bordes para que no se lean como tabla. */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, #000 20%, transparent 72%);
}

/* Dos manchas de color en deriva muy lenta (28s y 34s). A esa
   velocidad no se percibe el movimiento: se percibe que el fondo
   "respira" y no está congelado. */
.hero__aurora {
  position: absolute;
  width: min(760px, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(10px);
  opacity: .5;
}
.hero__aurora--1 {
  top: -28%; left: 8%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
  animation: aurora-a 28s var(--ease) infinite alternate;
}
.hero__aurora--2 {
  top: 6%; right: -14%;
  width: min(560px, 70vw);
  background: radial-gradient(circle, var(--accent-2-soft) 0%, transparent 62%);
  animation: aurora-b 34s var(--ease) infinite alternate;
}
@keyframes aurora-a {
  from { transform: translate3d(0, 0, 0)          scale(1);    }
  to   { transform: translate3d(6%, 5%, 0)        scale(1.14); }
}
@keyframes aurora-b {
  from { transform: translate3d(0, 0, 0)          scale(1.08); }
  to   { transform: translate3d(-8%, 7%, 0)       scale(.92);  }
}

/* Halo que sigue al cursor. Las coordenadas las escribe el JS en
   --mx/--my; sin JS queda en su posición inicial y es inofensivo. */
.hero__halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%),
              rgba(122, 124, 255, .10), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.hero:hover .hero__halo { opacity: 1; }

/* El contenido del hero va por encima de todas las capas de fondo */
.hero__inner { z-index: 1; }


/* --- 27.2 Grano ---------------------------------------------- */
/* Rompe el banding de los degradados grandes sobre fondo casi negro,
   que es donde más se nota. Es textura, no debe leerse como ruido. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .028;
  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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* --- 27.3 Progreso de scroll --------------------------------- */
/* Dos píxeles al pie del header: en una landing larga es la única
   pista de cuánto falta, y no ocupa espacio de layout. */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
body.is-scrolled .scroll-progress { opacity: 1; }


/* --- 27.4 Spotlight de cursor en tarjetas -------------------- */
/* El patrón de Attio/Vercel: la luz nace donde está el puntero, no
   en el centro de la tarjeta. Es lo que hace que el hover se sienta
   "físico" en vez de un cambio de estado binario.
   z-index -1 + isolation: la luz queda sobre el fondo de la tarjeta
   pero por debajo de su contenido. */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .07), transparent 68%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.spot:hover::after { opacity: 1; }

/* En el diagnóstico la luz es del color de la alerta, no blanca:
   el hover no puede contradecir lo que dice la sección. */
.pain-card--alert.spot::after {
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
              rgba(223, 21, 41, .17), transparent 68%);
}
.dash-card.spot::after,
.roi-stat.spot::after {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(34, 211, 238, .12), transparent 68%);
}


/* --- 27.5 Los gráficos se dibujan al entrar en pantalla ------ */
/* Ver cómo se llena la barra explica que es una medición, no un
   adorno. Se dibuja una sola vez, al primer scroll que la cruza.
   Las reglas cuelgan de html:not(.no-js): sin JS el gráfico ya está
   en su valor final y no hay nada que animar. */
html:not(.no-js) [data-chart] .oee__fill {
  width: 0;
  transition: width 1.1s var(--ease) var(--delay, 0ms);
}
html:not(.no-js) [data-chart].is-drawn .oee__fill { width: var(--pct); }

html:not(.no-js) [data-chart] .caps__bar {
  height: 0;
  transition: height .9s var(--ease) var(--delay, 0ms);
}
html:not(.no-js) [data-chart].is-drawn .caps__bar { height: var(--h); }

html:not(.no-js) [data-chart] .gauge__arc-val {
  stroke-dashoffset: 194.8;                   /* arco completo = vacío */
  transition: stroke-dashoffset 1.3s var(--ease);
}
html:not(.no-js) [data-chart].is-drawn .gauge__arc-val { stroke-dashoffset: 60.6; }

/* La alerta de stock entra después del gauge: primero el dato, después
   la consecuencia. Invertido, la alerta se lee antes que su causa. */
html:not(.no-js) [data-chart] .alert-badge {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-slow) var(--ease) .6s,
              transform var(--dur-slow) var(--ease) .6s;
}
html:not(.no-js) [data-chart].is-drawn .alert-badge { opacity: 1; transform: none; }


/* --- 27.6 Micro-estados -------------------------------------- */
/* Las placas de sistemas se levantan apenas: confirma que la franja
   es contenido vivo y no una imagen. */
.trust-item__mark { transform: translateY(0); }
.trust-item:hover .trust-item__mark { transform: translateY(-3px); }
.trust-item__mark { transition: opacity var(--dur) var(--ease),
                                border-color var(--dur) var(--ease),
                                transform var(--dur) var(--ease); }

/* Brillo que cruza el CTA principal al pasar por encima. Una sola
   pasada, sin loop: un botón que titila solo se lee como banner. */
.wa-cta { position: relative; overflow: hidden; }
.wa-cta::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-18deg);
  transition: left .75s var(--ease);
}
.wa-cta:hover::after { left: 115%; }

/* El punto del badge del hero late como un indicador de "en vivo" */
.hero__badge-dot { animation: live-dot 2.4s var(--ease) infinite; }
@keyframes live-dot {
  0%, 100% { box-shadow: 0 0 0 4px var(--accent-2-soft); }
  50%      { box-shadow: 0 0 0 7px rgba(34, 211, 238, .04); }
}

/* Los números tabulares no deben saltar de ancho mientras cuentan */
[data-count-to] { font-variant-numeric: tabular-nums; }


/* --- 27.7 Reduced motion ------------------------------------- */
/* La sección 25 ya reduce duraciones a .01ms. Acá se apaga lo que
   además es continuo o innecesario, y se fija el estado final. */
@media (prefers-reduced-motion: reduce) {
  .hero__aurora { animation: none !important; }
  .hero__halo { display: none; }
  .hero__badge-dot { animation: none !important; }
  .wa-cta::after { display: none; }
  .spot::after { display: none; }
  .grain { display: none; }

  html:not(.no-js) [data-chart] .oee__fill { width: var(--pct); }
  html:not(.no-js) [data-chart] .caps__bar { height: var(--h); }
  html:not(.no-js) [data-chart] .gauge__arc-val { stroke-dashoffset: 60.6; }
  html:not(.no-js) [data-chart] .alert-badge { opacity: 1; transform: none; }
}