/* ==========================================================================
   CAPA DE EFECTOS — Holística Empresarial S.A.C.
   Efectos visuales expertos (estilo MiMo/Kimi): reveal al scroll, marquee,
   tilt 3D, sheen, glass header, cursor custom, blobs animados, scroll progress.
   Independiente de estilos.css para poder desactivarse fácilmente.
   ========================================================================== */

/* ==========================================================================
   1. SISTEMA BASE: reveal al scroll
   ========================================================================== */
.reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up    { transform: translateY(36px); }
.reveal-down  { transform: translateY(-28px); }
.reveal-left  { transform: translateX(-42px); }
.reveal-right { transform: translateX(42px); }
.reveal-fade  { transform: scale(0.96); }
.reveal-blur  { filter: blur(10px); transform: translateY(16px); }
.reveal-zoom  { transform: scale(0.88); }

.reveal.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: blur(0);
}

/* Escalonado de hijos */
[data-stagger] > .reveal {
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}
[data-stagger="2"] > .reveal:nth-child(1) { --stagger-index: 0; }
[data-stagger="2"] > .reveal:nth-child(2) { --stagger-index: 1; }
[data-stagger="3"] > .reveal:nth-child(1) { --stagger-index: 0; }
[data-stagger="3"] > .reveal:nth-child(2) { --stagger-index: 1; }
[data-stagger="3"] > .reveal:nth-child(3) { --stagger-index: 2; }
[data-stagger="4"] > .reveal:nth-child(1) { --stagger-index: 0; }
[data-stagger="4"] > .reveal:nth-child(2) { --stagger-index: 1; }
[data-stagger="4"] > .reveal:nth-child(3) { --stagger-index: 2; }
[data-stagger="4"] > .reveal:nth-child(4) { --stagger-index: 3; }
[data-stagger="5"] > .reveal:nth-child(1) { --stagger-index: 0; }
[data-stagger="5"] > .reveal:nth-child(2) { --stagger-index: 1; }
[data-stagger="5"] > .reveal:nth-child(3) { --stagger-index: 2; }
[data-stagger="5"] > .reveal:nth-child(4) { --stagger-index: 3; }
[data-stagger="5"] > .reveal:nth-child(5) { --stagger-index: 4; }
[data-stagger="6"] > .reveal:nth-child(1) { --stagger-index: 0; }
[data-stagger="6"] > .reveal:nth-child(2) { --stagger-index: 1; }
[data-stagger="6"] > .reveal:nth-child(3) { --stagger-index: 2; }
[data-stagger="6"] > .reveal:nth-child(4) { --stagger-index: 3; }
[data-stagger="6"] > .reveal:nth-child(5) { --stagger-index: 4; }
[data-stagger="6"] > .reveal:nth-child(6) { --stagger-index: 5; }
[data-stagger="7"] > .reveal:nth-child(1) { --stagger-index: 0; }
[data-stagger="7"] > .reveal:nth-child(2) { --stagger-index: 1; }
[data-stagger="7"] > .reveal:nth-child(3) { --stagger-index: 2; }
[data-stagger="7"] > .reveal:nth-child(4) { --stagger-index: 3; }
[data-stagger="7"] > .reveal:nth-child(5) { --stagger-index: 4; }
[data-stagger="7"] > .reveal:nth-child(6) { --stagger-index: 5; }
[data-stagger="7"] > .reveal:nth-child(7) { --stagger-index: 6; }
[data-stagger="8"] > .reveal:nth-child(1) { --stagger-index: 0; }
[data-stagger="8"] > .reveal:nth-child(2) { --stagger-index: 1; }
[data-stagger="8"] > .reveal:nth-child(3) { --stagger-index: 2; }
[data-stagger="8"] > .reveal:nth-child(4) { --stagger-index: 3; }
[data-stagger="8"] > .reveal:nth-child(5) { --stagger-index: 4; }
[data-stagger="8"] > .reveal:nth-child(6) { --stagger-index: 5; }
[data-stagger="8"] > .reveal:nth-child(7) { --stagger-index: 6; }
[data-stagger="8"] > .reveal:nth-child(8) { --stagger-index: 7; }

/* Titulo con reveal por palabra (JS divide el H1) */
.split-text { display: inline-block; overflow: hidden; vertical-align: top; }
.split-word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
  transition-delay: calc(var(--word-index, 0) * 60ms);
  will-change: transform;
}
.visible .split-word,
.split-text.visible .split-word,
.is-loaded .split-word { transform: translateY(0); opacity: 1; }

/* ==========================================================================
   2. HEADER GLASS + SCROLL PROGRESS
   ========================================================================== */
.header {
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, transform 0.4s ease;
}
/* En la página de inicio, el header está oculto (sobre el hero) y aparece al hacer scroll */
.es-inicio .header {
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
.es-inicio .header.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
/* Mobile: header siempre visible (con hamburguesa) sobre el hero apilado */
@media (max-width: 820px) {
  .es-inicio .header,
  .es-inicio .header.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}
.header.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 30px rgba(31, 36, 48, 0.10);
}
.header.scrolled .header-contenido { height: 64px; }
.header-contenido { transition: height 0.3s ease; }

/* Barra de progreso de scroll */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, var(--vio), var(--azu), var(--esm), var(--nar));
  z-index: 200;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px rgba(139, 47, 201, 0.4);
}

/* Subrayado animado de links de nav */
.nav > a:not(.activo)::after {
  content: "";
  position: absolute; left: 0; bottom: 4px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--vio), var(--esm));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav > a:not(.activo):hover::after { transform: scaleX(1); }

/* Dropdown stagger */
.dropdown-menu a {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.dropdown:hover .dropdown-menu a,
.dropdown:focus-within .dropdown-menu a {
  opacity: 1; transform: translateY(0);
}
.dropdown:hover .dropdown-menu a:nth-child(2),
.dropdown:focus-within .dropdown-menu a:nth-child(2) { transition-delay: 0.05s; }
.dropdown:hover .dropdown-menu a:nth-child(3),
.dropdown:focus-within .dropdown-menu a:nth-child(3) { transition-delay: 0.10s; }

/* ==========================================================================
   3. HERO: blobs, marquee, patron, split
   ========================================================================== */
.hero { isolation: isolate; }

/* Blobs animados */
/* (eliminados — sustituidos por cuadrícula técnica en hero) */

/* Marquee de fondo (estilo MiMo) */
/* (eliminado — sustituido por cuadrícula técnica) */

/* (eliminado — patrón de círculos de fondo reemplazado por figuras .ac con hover) */

/* ==========================================================================
   3.1 CUADRÍCULA TÉCNICA DEL HERO (estilo ingeniería)
   ========================================================================== */
.hero-tecnico { position: relative; }

/* Grid fino de ingeniería */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.07) 0 1px, transparent 1px 44px);
}
/* Grid mayor de referencia */
.hero-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.05) 0 1px, transparent 1px 220px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 220px);
}

/* Crosshair central */
.hero-crosshair {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.35;
}
.hero-crosshair::before {
  content: "";
  position: absolute;
  left: -70px; top: -1px;
  width: 140px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--esm), transparent);
}
.hero-crosshair::after {
  content: "";
  position: absolute;
  top: -70px; left: -1px;
  height: 140px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--esm), transparent);
}

/* Ticks de regla en los bordes */
.hero-ticks {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.30;
  background-image:
    repeating-linear-gradient(to right, var(--blanco) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(to bottom, var(--blanco) 0 2px, transparent 2px 40px);
  background-size: 100% 14px, 14px 100%;
  background-position: 0 100%, 100% 0;
  background-repeat: repeat-x, repeat-y;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 40px), linear-gradient(to right, rgba(0,0,0,0) 0, #000 40px), linear-gradient(to top, rgba(0,0,0,0) 0, #000 40px), linear-gradient(to left, rgba(0,0,0,0) 0, #000 40px);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 40px), linear-gradient(to right, rgba(0,0,0,0) 0, #000 40px), linear-gradient(to top, rgba(0,0,0,0) 0, #000 40px), linear-gradient(to left, rgba(0,0,0,0) 0, #000 40px);
  -webkit-mask-composite: source-in;
}

/* ==========================================================================
   3.2 PANEL TÉCNICO DEL DIAGRAMA (estilo ingeniería)
   ========================================================================== */
.hero-icono { position: relative; }
.panel-tecnico {
  position: relative;
  max-width: 442px;
  margin: 0 auto;
  padding: 39px 39px 52px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 60px rgba(0,0,0,0.25);
}
.panel-tecnico svg { display: block; width: 100%; height: auto; }
.panel-tecnico svg path { transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease; cursor: pointer; }
.panel-tecnico svg path:hover { filter: brightness(1.25) drop-shadow(0 0 10px currentColor); }

/* Atenuar piezas no activas */
.panel-tecnico.dim svg path:not(.activa) { opacity: 0.25; }

/* Esquinas en L (plano técnico) */
.esq { position: absolute; width: 23px; height: 23px; border: 3px solid var(--esm); opacity: 0.8; pointer-events: none; }
.esq-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.esq-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.esq-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.esq-br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* Etiquetas técnicas 01-04 (JetBrains Mono) */
.etiq {
  position: absolute;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  background: rgba(15,168,107,0.12);
  border: 1px solid rgba(15,168,107,0.35);
  border-radius: 2px;
  padding: 4px 9px;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.etiq-1 { top: 2px; left: 50%; transform: translateX(-50%); color: var(--vio); border-color: rgba(139,47,201,0.5); background: rgba(139,47,201,0.14); }
.etiq-2 { top: 50%; right: 2px; transform: translateY(-50%) rotate(90deg); transform-origin: right center; color: var(--azu); border-color: rgba(30,107,255,0.5); background: rgba(30,107,255,0.14); }
.etiq-3 { bottom: 2px; left: 50%; transform: translateX(-50%); color: var(--esm); }
.etiq-4 { top: 50%; left: 2px; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; color: var(--nar); border-color: rgba(255,122,26,0.5); background: rgba(255,122,26,0.14); }

/* Líneas líder (dashed) hacia cada pieza */
.linea { position: absolute; border: 0; border-top: 1px dashed rgba(255,255,255,0.35); z-index: 1; pointer-events: none; }
.linea-1 { top: 29px; left: 50%; width: 0; transform: translateX(-50%); }
.linea-2 { top: 50%; right: 26px; height: 0; border-top: none; border-right: 1px dashed rgba(255,255,255,0.35); }
.linea-3 { bottom: 29px; left: 50%; width: 0; transform: translateX(-50%); }
.linea-4 { top: 50%; left: 26px; height: 0; border-top: none; border-left: 1px dashed rgba(255,255,255,0.35); }

/* Notas de anotación */
.nota {
  position: absolute;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
  z-index: 2;
}
.nota-tl { top: -23px; left: 0; }
.nota-tr { top: -23px; right: 0; }
.nota-bl { bottom: -23px; left: 0; }
.nota-br { bottom: -23px; right: 0; }

/* ==========================================================================
   3.3 CALLOUT (popup) del diagrama
   ========================================================================== */
.callout {
  position: absolute;
  z-index: 50;
  min-width: 250px;
  max-width: 290px;
  padding: 20px 22px;
  border-radius: 4px;
  background: rgba(20, 24, 33, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease,
    visibility 0s linear 0.75s;
  pointer-events: none;
}
/* Visibilidad inmediata al abrir */
.callout.mostrar {
  opacity: 1;
  visibility: visible;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  pointer-events: auto;
}
/* Fase: el popup se abre (scaleY desde el centro) */
.callout.fase-abrir { transform: scaleY(1); }

/* Línea central horizontal de color del pilar (aparece/desaparece por fase) */
.callout::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  top: 50%;
  height: 2px;
  background: var(--c-color, var(--esm));
  opacity: 0;
  transform: scaleX(0);
  box-shadow: 0 0 8px var(--c-color, var(--esm));
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.callout.fase-linea::before { opacity: 0.85; transform: scaleX(1); }

.callout .c-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.callout .c-num { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--c-color, rgba(255,255,255,0.6)); }
.callout .c-titulo {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blanco);
}
.callout .c-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.callout .c-desc { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 12px; color: #C9CEDE; line-height: 1.5; margin-bottom: 10px; }
.callout .c-servicios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.callout .c-chip { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.08); color: #DDE2EC; }
.callout .c-link { font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.callout .c-link:hover { gap: 9px; }
.callout .c-flecha { transition: transform 0.3s ease; }

/* Entrada del hero */
.hero-texto > * { will-change: transform, opacity; }
.hero-logo { animation: heroEntrada 0.9s cubic-bezier(0.22,1,0.36,1) both; }
.hero-icono { animation: heroIcono 1.1s cubic-bezier(0.22,1,0.36,1) 0.2s both; }
@keyframes heroEntrada { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes heroIcono {
  0% { opacity: 0; transform: scale(0.6) rotate(-14deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Destacado con gradiente animado */
.hero h1 .destacado {
  background: linear-gradient(120deg, var(--nar), var(--nar) 30%, var(--esm) 60%, var(--azu));
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientMove 6s ease-in-out infinite;
}
@keyframes gradientMove { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ==========================================================================
   4. TARJETAS: tilt 3D, sheen, borde animado, iconos
   ========================================================================== */
.tarjeta, .servicio, .bloque-odoo .modo { position: relative; }

/* Tilt 3D (la clase la aplica JS) */
.tilt { transform-style: preserve-3d; transition: transform 0.12s ease-out; will-change: transform; }
.tilt .tarjeta-icono, .tilt h3, .tilt .enlace { transform: translateZ(28px); }
.tilt p { transform: translateZ(16px); }

/* Sheen (brillo que barre) */
.tarjeta::after, .bloque-odoo .modo::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.tarjeta:hover::after, .bloque-odoo .modo:hover::after {
  opacity: 1;
  animation: sheenBarrido 0.9s ease;
}
@keyframes sheenBarrido { from { left: -80%; } to { left: 130%; } }

/* Borde animado con gradiente (el "todo") */
.tarjeta.todo-borde {
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.tarjeta.todo-borde::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: calc(var(--radio) + 2px);
  background: conic-gradient(from var(--angulo, 0deg), var(--vio), var(--azu), var(--esm), var(--nar), var(--vio));
  z-index: -1;
  animation: bordeGirar 6s linear infinite;
  opacity: 0.7;
}
@property --angulo { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes bordeGirar { to { --angulo: 360deg; } }

/* Iconos animados */
.tarjeta-icono { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.tarjeta:not(.tarjeta-modulo):hover .tarjeta-icono { transform: scale(1.12) rotate(-8deg); }

/* Enlaces con flecha que se desplaza */
.tarjeta .enlace svg, .tarjeta .enlace .arr { transition: transform 0.3s ease; }
.tarjeta:hover .enlace .arr { transform: translateX(6px); }

/* Módulos blueprint: esquinas e iconos */
.tarjeta-modulo .tarjeta-esquina { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.tarjeta-modulo:hover .tarjeta-esquina { border-color: var(--c-pilar, var(--vio)); box-shadow: 0 0 8px color-mix(in srgb, var(--c-pilar, var(--vio)) 40%, transparent); }
.tarjeta-modulo .icono-svg { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.tarjeta-modulo:hover .icono-svg { transform: scale(1.15) rotate(-8deg); color: #fff; }

/* ==========================================================================
   5. BOTONES: ripple + magnetismo + sheen
   ========================================================================== */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn:hover::after { animation: btnSheen 0.8s ease; }
@keyframes btnSheen { from { left: -80%; } to { left: 140%; } }

/* Ripple (lo crea JS) */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: rippleExp 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleExp { to { transform: scale(4); opacity: 0; } }

/* Boton magnetico */
.btn-magnet { transition: transform 0.18s ease-out; }

/* ==========================================================================
   6. METODOLOGIA: line-draw de cada fase con scroll
   ========================================================================== */
.fase .fl-path { stroke-dasharray: var(--len, 800); stroke-dashoffset: var(--len, 800); transition: stroke-dashoffset 1.4s ease 0.2s; }
.fase[data-linedraw].dibujado .fl-path { stroke-dashoffset: 0; }
.fase-cards .tl-nodo { transition-delay: calc(var(--tl-index, 0) * 90ms); }
.fase-cards .tl-nodo:nth-child(1) { --tl-index: 0; }
.fase-cards .tl-nodo:nth-child(2) { --tl-index: 1; }
.fase-cards .tl-nodo:nth-child(3) { --tl-index: 2; }
.fase-cards .tl-nodo:nth-child(4) { --tl-index: 3; }

/* ---------- Grid de metodología legacy (nosotros.html) ---------- */
.pasos { position: relative; }
.pasos::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 8px;
  width: 3px;
  background: rgba(31,36,48,0.10);
  border-radius: 3px;
}
.pasos-progreso {
  position: absolute;
  top: 0; left: 8px;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--vio), var(--azu), var(--esm), var(--nar));
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(139,47,201,0.35);
}
.paso { overflow: hidden; }
.paso .n { transition: transform 0.4s ease, color 0.3s ease; }
.paso:hover .n { transform: scale(1.15); }

/* ==========================================================================
   7. CAPAS DEL HOLISMO: entrada escalonada con giro
   ========================================================================== */
.capa { overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; }
.capa:hover { transform: translateX(8px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.capas[data-stagger] > .capa { transition-delay: calc(var(--capa-index, 0) * 80ms); }
.capas[data-stagger] > .capa:nth-child(1) { --capa-index: 0; }
.capas[data-stagger] > .capa:nth-child(2) { --capa-index: 1; }
.capas[data-stagger] > .capa:nth-child(3) { --capa-index: 2; }
.capas[data-stagger] > .capa:nth-child(4) { --capa-index: 3; }
.capas[data-stagger] > .capa:nth-child(5) { --capa-index: 4; }

/* ---------- Line-draw SVG ---------- */
html.js [data-linedraw] .capa-pieza { fill-opacity: 0; stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); transition: stroke-dashoffset 1.4s ease 0.15s, fill-opacity 0.6s ease 1.2s, fill 0.3s ease, filter 0.3s ease; }
html.js [data-linedraw].dibujado .capa-pieza { stroke-dashoffset: 0; fill-opacity: 1; }
[data-linedraw].dibujado .capa-pieza:nth-child(2) { transition-delay: 0.25s, 1.2s; }
[data-linedraw].dibujado .capa-pieza:nth-child(3) { transition-delay: 0.35s, 1.2s; }
[data-linedraw].dibujado .capa-pieza:nth-child(4) { transition-delay: 0.45s, 1.2s; }

/* ==========================================================================
   8. ODOO: glow y parallax
   ========================================================================== */
.bloque-odoo .modo { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.bloque-odoo .modo:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 16px 40px rgba(15,168,107,0.35);
}
.bloque-odoo[data-parallax] { will-change: transform; }

/* ==========================================================================
   8.1 CTA FINAL: acentos con deriva + glow
   ========================================================================== */
.cta-accentos .ac { animation: deriva 14s ease-in-out infinite alternate; transition: opacity 0.3s ease, filter 0.3s ease; }
.cta-accentos .ac:hover {
  opacity: 0.5;
  filter: brightness(1.4) drop-shadow(0 0 20px var(--c-ac)) drop-shadow(0 0 40px var(--c-ac));
}

/* ---------- Line-draw ecosistema Odoo ---------- */
html.js .eco-svg .eco-linea, html.js .eco-svg .eco-capa, html.js .eco-svg .eco-nodo, html.js .eco-svg .eco-core, html.js .eco-svg .eco-a, html.js .eco-svg .eco-app, html.js .eco-svg .eco-int {
  opacity: 0; transition: opacity 0.4s ease;
}
html.js [data-linedraw].dibujado .eco-linea { opacity: 1; }
html.js [data-linedraw].dibujado .eco-capa { opacity: 1; }
html.js [data-linedraw].dibujado .eco-nodo { opacity: 1; }
html.js [data-linedraw].dibujado .eco-nodo:hover,
html.js [data-linedraw].dibujado .eco-nodo:focus { filter: brightness(1.4) drop-shadow(0 0 10px var(--c-nodo, currentColor)); }
.eco-svg .eco-nodo { transition: opacity 0.4s ease 0.5s, filter 0.3s ease; }
html.js [data-linedraw].dibujado .eco-core { animation: ecoCoreGlow 3s ease-in-out infinite; }
@keyframes ecoCoreGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(15,168,107,0.6)); } 50% { filter: drop-shadow(0 0 18px rgba(15,168,107,0.9)); } }

/* ---------- Line-draw ecosistema IA ---------- */
html.js .eia-svg .eia-linea, html.js .eia-svg .eia-nodo, html.js .eia-svg .eia-core { opacity: 0; transition: opacity 0.4s ease; }
html.js [data-linedraw].dibujado .eia-linea { opacity: 1; }
html.js [data-linedraw].dibujado .eia-nodo { opacity: 1; }
html.js [data-linedraw].dibujado .eia-core { opacity: 1; animation: eiaCoreGlow 3s ease-in-out infinite; }
@keyframes eiaCoreGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(0,224,198,0.6)); } 50% { filter: drop-shadow(0 0 18px rgba(0,224,198,0.9)); } }

/* ==========================================================================
   9. CURSOR CUSTOM (solo dispositivos con pointer fino)
   ========================================================================== */
@media (pointer: fine) {
  body.cursor-custom, body.cursor-custom a, body.cursor-custom .btn, body.cursor-custom button { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 300;
    will-change: transform;
  }
  .cursor-dot {
    width: 8px; height: 8px;
    background: var(--nar);
    transform: translate(-50%, -50%);
  }
  .cursor-ring {
    width: 36px; height: 36px;
    border: 2px solid rgba(139,47,201,0.55);
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }
  .cursor-ring.activo {
    width: 56px; height: 56px;
    background: rgba(139,47,201,0.10);
    border-color: var(--vio);
  }
}

/* ==========================================================================
   10. CONTADORES
   ========================================================================== */
.contador { display: inline-block; font-family: var(--fuente-titulos); font-weight: 800; }
.contador-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   11. ACCESIBILIDAD: reduce motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .split-word { transform: none; opacity: 1; }
  .cursor-dot, .cursor-ring { display: none; }
}