/*
 * ================================================================
 * NORTHENIX — Estilos principales (main.css)
 * ================================================================
 * Estructura del archivo:
 *   1. Variables CSS       — colores, tipografías, espaciados, transiciones
 *   2. Reset               — normalización base cross-browser
 *   3. Container           — wrapper centrado de ancho máximo
 *   4. Nav                 — barra de navegación fija
 *   5. Hero                — sección principal con grid y glows
 *   6. Buttons             — variantes .btn--primary, .btn--ghost, .btn--sm
 *   7. Sections            — estilos base compartidos por todas las secciones
 *   8. Servicios           — cards de servicios
 *   9. Portfolio           — cards de proyectos reales
 *  10. Contacto            — formulario de contacto
 *  11. Footer              — pie de página
 *  12. Automatizaciones    — tabs, paneles y demos interactivos
 *  13. Ejemplos de webs    — grilla de 6 cards con mini-preview
 *  14. Responsive          — breakpoints 768px y 480px
 *  15. Web Booking         — demo de turnos online (panel whatsapp)
 *  16. Reportes            — demo de dashboard semanal
 *  17. Notificaciones      — demo multi-canal pantalla a pantalla
 *  18. Archivos            — demo de comparación de bases de datos
 *  19. Overrides de escala — tamaños y alineaciones específicas por panel
 *  20. Turnos (acciones)   — pasos nuevo/cancelar/modificar turno
 * ================================================================
 */

/* ===== VARIABLES =====
   Design tokens del sistema. Modificar aquí afecta todo el sitio.
   Colores principales: #07070d (fondo) / #06b6d4 (acento) / #14b8a6 (acento 2)
===== */
:root {
  /* Fondos */
  --bg:           #07070d;
  --bg-surface:   #0a0a14;
  --bg-card:      #0e0e1c;
  --bg-card-hover:#13132a;
  --bg-elevated:  #15152e;
  --bg-glass:     rgba(20, 20, 38, 0.55);

  /* Acento (configurable via Tweaks) */
  --accent:       #06b6d4;
  --accent-2:     #14b8a6;
  --accent-soft:  rgba(6, 182, 212, 0.14);
  --accent-glow:  rgba(6, 182, 212, 0.45);
  --accent-light: rgba(6, 182, 212, 0.12);

  /* Texto */
  --text-primary:   #f4f4f7;
  --text-secondary: #9aa0b4;
  --text-muted:     #585e75;
  --text-faint:     #353a4c;

  /* Bordes */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(6, 182, 212, 0.32);

  /* Gradientes */
  --gradient:      linear-gradient(135deg, var(--accent), var(--accent-2));
  --gradient-text: linear-gradient(135deg, #a5f3fc 0%, #5eead4 60%, #ffffff 100%);
  --gradient-soft: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(20,184,166,0.08));

  /* Sombras */
  --shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px -22px rgba(0,0,0,0.65);
  --shadow-hover: 0 1px 0 rgba(255,255,255,0.06) inset, 0 26px 70px -24px rgba(0,0,0,0.8), 0 0 0 1px var(--border-accent);
  --shadow-glow:  0 18px 50px -8px var(--accent-glow);

  /* Tipografia */
  --font-main:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Layout */
  --section-py:    120px;
  --container-max: 1240px;
  --container-px:  28px;

  /* Timings */
  --t:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ts:  0.45s cubic-bezier(0.22, 1, 0.36, 1);
  --tl:  0.8s  cubic-bezier(0.22, 1, 0.36, 1);

  /* Radios */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 32px;
}

/* ===== RESET =====
   Normalización mínima para comportamiento consistente entre navegadores.
===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1d1d34; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2a2a4a; }

img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ===== CONTAINER =====
   Wrapper centrado con ancho máximo (1180px) y padding lateral.
   Se usa en todas las secciones como hijo directo de <section>.
===== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ===== NAV =====
   Barra fija (position: fixed). Transparente por defecto, gana fondo oscuro
   con la clase .scrolled que agrega JS al superar 20px de scroll.
   El menú hamburguesa (.nav__toggle) solo es visible en mobile (display: none
   en desktop, display: flex en ≤768px).
===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 var(--container-px);
  transition: background var(--t), border var(--t), backdrop-filter var(--t);
}

.nav.scrolled {
  background: rgba(8, 8, 15, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

.nav__container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  transition: opacity var(--t);
}
.nav__logo:hover { opacity: 0.85; }
.logo__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--gradient);
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 6px 20px -6px var(--accent-glow);
}
.logo__img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px var(--accent-glow));
  transition: transform var(--t), filter var(--t);
}
.nav__logo:hover .logo__img {
  transform: scale(1.08) rotate(-4deg);
  filter: drop-shadow(0 6px 22px var(--accent-glow));
}
.footer__brand .logo__img { width: 40px; height: 40px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__link {
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
  position: relative;
}
.nav__link:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }

.nav__link--cta {
  background: var(--gradient);
  color: #fff !important;
  padding: 9px 20px;
  margin-left: 10px;
  box-shadow: 0 8px 22px -10px var(--accent-glow);
}
.nav__link--cta:hover { opacity: 0.92; background: var(--gradient); transform: translateY(-1px); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: var(--r-sm);
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: var(--t);
}
.nav__toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.active span:nth-child(2) { opacity: 0; }
.nav__toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== HERO =====
   Hero a pantalla completa, layout asimetrico con visual interactivo.
   Stack visual:
     - .hero__grid: cuadricula muy sutil enmascarada radialmente
     - .hero__noise: textura granular para romper el plano
     - .hero__glow: 3 glows ambientales (acento + complementario)
     - .hero__container: copy + actions + marquee de marcas al pie
     - .hero__mock: ventana de navegador mock con flujo n8n animado
===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(6,182,212,0.07), transparent 60%),
    transparent;
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 85%);
  animation: gridDrift 30s linear infinite;
}
@keyframes gridDrift {
  to { background-position: 72px 72px; }
}

.hero__noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  will-change: transform;
}
.hero__glow--1 {
  width: 620px; height: 620px;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  top: -180px; left: -120px;
  animation: glowFloat 16s ease-in-out infinite;
}
.hero__glow--2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(20,184,166,0.34), transparent 70%);
  bottom: -120px; right: -80px;
  animation: glowFloat 20s ease-in-out infinite reverse;
}
.hero__glow--3 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(80,170,255,0.16), transparent 70%);
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  animation: glowFloat 24s ease-in-out infinite;
}
@keyframes glowFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.08); }
}

.hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 120px var(--container-px) 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

.hero__copy { text-align: left; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 9px;
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #c4b8ff;
  margin-bottom: 28px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.hero__badge::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #50e3a4;
  box-shadow: 0 0 0 4px rgba(80, 227, 164, 0.18);
  animation: pulseDot 2.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(80, 227, 164, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(80, 227, 164, 0.05); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  font-family: 'Instrument Serif', 'Space Grotesk', serif;
  color: #c4b8ff;
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 0 40px;
  line-height: 1.65;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.hero__stats {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding: 18px 32px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stat { text-align: left; }
.stat__number {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1;
}
.stat__label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
  font-family: var(--font-mono);
}
.stat__divider {
  width: 1px;
  height: 32px;
  background: var(--border);
}

/* --- Mock browser flotante en el hero --- */
.hero__visual {
  position: relative;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
}

.hero__mock {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, #15152e 0%, #0a0a1a 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 40px 80px -20px rgba(0,0,0,0.6),
    0 0 60px -10px var(--accent-glow);
  transform: rotateY(-6deg) rotateX(4deg);
  animation: mockFloat 9s ease-in-out infinite;
}
@keyframes mockFloat {
  0%, 100% { transform: rotateY(-6deg) rotateX(4deg) translateY(0); }
  50%      { transform: rotateY(-6deg) rotateX(4deg) translateY(-12px); }
}

.hero__mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
}
.hero__mock-bar i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #3a3a55;
  display: inline-block;
}
.hero__mock-bar i:nth-child(1) { background: #ff5f57; }
.hero__mock-bar i:nth-child(2) { background: #febc2e; }
.hero__mock-bar i:nth-child(3) { background: #28c840; }
.hero__mock-url {
  margin-left: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.hero__mock-flow {
  padding: 26px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hmf-node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
  position: relative;
  opacity: 0.55;
  transition: all var(--ts);
}
.hmf-node.is-on {
  opacity: 1;
  background: linear-gradient(135deg, rgba(6,182,212,0.16), rgba(20,184,166,0.06));
  border-color: var(--border-accent);
  color: var(--text-primary);
  box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.06);
}
.hmf-node__icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  font-size: 1rem;
  flex-shrink: 0;
}
.hmf-node.is-on .hmf-node__icon {
  background: var(--gradient);
  box-shadow: 0 8px 20px -4px var(--accent-glow);
}
.hmf-node__txt { flex: 1; font-family: var(--font-mono); font-size: 0.78rem; }
.hmf-node__status {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.hmf-node.is-on .hmf-node__status { color: #50e3a4; }
.hmf-connector {
  height: 14px;
  width: 2px;
  margin-left: 32px;
  background: linear-gradient(180deg, var(--border) 0%, transparent 100%);
  margin-top: -6px;
  margin-bottom: -6px;
}
.hmf-connector.is-on {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* --- Marquee de marcas/ejemplos al pie del hero --- */
.hero__marquee {
  position: relative;
  z-index: 1;
  width: 100%;
  flex-shrink: 0;
  margin-top: 56px;
  padding: 24px 0 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.018));
  overflow: hidden;
  --marquee-duration: 42s;
}
.hero__marquee::before,
.hero__marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.hero__marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.hero__marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

.marquee-label {
  display: block;
  text-align: center;
  margin: 0 auto 14px;
  padding: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono);
  position: relative;
  z-index: 3;
}
.marquee-label::before,
.marquee-label::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 36px;
  height: 1px;
  background: var(--border-strong);
  margin: 0 14px 2px;
}

.marquee-track {
  display: flex;
  gap: 64px;
  align-items: center;
  animation: marqueeScroll var(--marquee-duration) linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }

.marquee-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--t), opacity var(--t);
  opacity: 0.55;
}
.marquee-item:hover { color: var(--text-primary); opacity: 1; }
.marquee-item__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.marquee-item__tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}

@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}

@media (max-width: 960px) {
  .hero__container {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 120px;
    text-align: center;
  }
  .hero__copy { text-align: center; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__visual { height: 380px; order: 2; }
}

/* ===== BUTTONS =====
   Variantes:
     .btn--primary — gradiente acento, shimmer en hover, sombra coloreada
     .btn--ghost   — borde sutil, hover sube y aclara borde
     .btn--full    — ancho 100%
     .btn--sm      — reducido para demos
===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t), color var(--t);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: var(--gradient);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 8px 28px -10px var(--accent-glow), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px -10px var(--accent-glow), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.btn--primary:hover::after { transform: translateX(100%); }

.btn--ghost {
  background: rgba(255,255,255,0.02);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

.btn--full { width: 100%; }

/* ===== SECTIONS =====
   Bases compartidas. .section--dark alterna fondo.
===== */
.section { padding: var(--section-py) 0; position: relative; }
.section--dark {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section__header {
  text-align: center;
  margin-bottom: 72px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #c4b8ff;
  margin-bottom: 18px;
  padding: 6px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  border-radius: 100px;
  font-family: var(--font-mono);
}
.section__tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
  line-height: 1.08;
  text-wrap: balance;
}
.section__title em {
  font-style: italic;
  font-weight: 400;
  font-family: 'Instrument Serif', 'Space Grotesk', serif;
  color: #c4b8ff;
}

.section__subtitle {
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ===== SERVICIOS =====
   2 cards principales con icon-tile, lista de bullets y borde con glow on hover.
===== */
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.service-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 44px;
  transition: border-color var(--ts), transform var(--ts), box-shadow var(--ts);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.service-card::before {
  /* Gradient halo top-right, revealed slowly on hover */
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity var(--ts);
  pointer-events: none;
}
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 220px at var(--mx, 50%) var(--my, 0%), rgba(6,182,212,0.12), transparent 60%);
  opacity: 0;
  transition: opacity var(--ts);
  border-radius: inherit;
  pointer-events: none;
}
.service-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.service-card:hover::before { opacity: 0.7; }
.service-card:hover::after  { opacity: 1; }
.service-card--accent { border-color: rgba(6, 182, 212, 0.22); }

.service-card__icon {
  width: 60px;
  height: 60px;
  background:
    linear-gradient(135deg, rgba(6,182,212,0.18), rgba(20,184,166,0.08));
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  color: #c4b8ff;
  position: relative;
}
.service-card__icon::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--r-sm) + 8px);
  border: 1px dashed rgba(6,182,212,0.15);
  opacity: 0;
  transition: opacity var(--ts);
}
.service-card:hover .service-card__icon::after { opacity: 1; }

.service-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.service-card__desc {
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.7;
  margin-bottom: 32px;
}

.service-card__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.service-card__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  transition: color var(--t), transform var(--t);
}
.service-card__list li:hover {
  color: var(--text-primary);
  transform: translateX(2px);
}
.service-card__list li::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--accent) 0%, var(--accent) 30%, transparent 32%),
    radial-gradient(circle, transparent 0%, transparent 60%, var(--border-accent) 61%, var(--border-accent) 100%);
  flex-shrink: 0;
}

/* ===== PORTFOLIO =====
   Grid de cards para proyectos reales. Cada card tiene:
   - Imagen/placeholder en la parte superior (220px de alto)
   - Contenido (título, descripción, tech tags, link)
   .project-card--coming es la card de "próximamente" con borde punteado.
===== */
.portfolio__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
}
@media (max-width: 860px) {
  .portfolio__grid { grid-template-columns: 1fr; }
}

.project-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--ts), transform var(--ts), box-shadow var(--ts);
  box-shadow: var(--shadow-card);
  position: relative;
}
.project-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.project-card__image {
  position: relative;
  height: 280px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(6,182,212,0.18), transparent 70%),
    linear-gradient(180deg, #0a0a18 0%, #06060e 100%);
  overflow: hidden;
}
.project-card__image::after {
  /* Browser dots top-left */
  content: '\2022  \2022  \2022';
  position: absolute;
  top: 16px;
  left: 18px;
  color: var(--text-faint);
  font-size: 1rem;
  letter-spacing: 4px;
  z-index: 2;
}

.project-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.project-card__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 36px 48px;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover .project-card__img { transform: scale(1.04); }

.project-card__caption {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

.project-card__overlay {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}
.project-card__tag {
  padding: 5px 14px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border-accent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #c4b8ff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.project-card__content { padding: 36px; }

.project-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.project-card__desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 24px;
}

.project-card__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tech-tag {
  padding: 5px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
  transition: var(--t);
}
.tech-tag:hover {
  border-color: var(--border-accent);
  color: #c4b8ff;
}

.project-card__placeholder--drn {
  background: linear-gradient(135deg, #0a0a1f 0%, #0d1a2e 100%);
  color: #4a7fa5;
}

.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #c4b8ff;
  transition: color var(--t), gap var(--t);
  padding: 10px 16px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
}
.project-card__link:hover {
  color: #fff;
  gap: 14px;
  background: var(--accent);
  border-color: var(--accent);
}

.project-card--coming {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  border-style: dashed;
  border-color: rgba(255,255,255,0.07);
  background:
    repeating-linear-gradient(135deg, transparent, transparent 18px, rgba(255,255,255,0.012) 18px, rgba(255,255,255,0.012) 36px),
    var(--bg-card);
}
.project-card--coming:hover { transform: none; box-shadow: none; border-color: rgba(6,182,212,0.3); }

.project-card__coming {
  text-align: center;
  color: var(--text-muted);
  padding: 40px;
}
.coming-icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px dashed var(--border-strong);
  font-size: 1.8rem;
  font-weight: 200;
  opacity: 0.7;
  font-family: var(--font-display);
}
.project-card__coming p {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== EQUIPO (SECCION ELIMINADA) =====
   Estilos de las cards del equipo. La sección fue eliminada del HTML
   pero los estilos se mantienen por si se vuelve a agregar en el futuro.
===== */
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 36px 28px;
  text-align: center;
  transition: border-color var(--ts), transform var(--ts), box-shadow var(--ts);
}
.team-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}

.team-card__avatar { margin: 0 auto 20px; width: 76px; height: 76px; }
.avatar-placeholder {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
}

.team-card__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.team-card__role {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #67e8f9;
  margin-bottom: 14px;
}
.team-card__bio {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ===== CONTACTO =====
   Formulario centrado con dos columnas, hover y focus refinados.
===== */
/* Layout dos columnas: panel "Qué pasa después" + form */
.contact__layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.contact__process {
  position: relative;
  padding: 8px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact__process-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
}
.contact__process-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--text-primary);
}

.process-steps {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.process-step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: flex-start;
  position: relative;
}
/* Línea vertical que conecta los pasos */
.process-step::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 56px;
  bottom: -32px;
  width: 1px;
  background: linear-gradient(180deg,
    var(--border-accent) 0%,
    rgba(6, 182, 212, 0.08) 100%);
  pointer-events: none;
}
.process-step:last-child::before { display: none; }

.process-step__num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 60%),
    var(--accent-soft);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 16px -8px var(--accent-glow);
  transition: transform var(--t), box-shadow var(--t);
}
.process-step:hover .process-step__num {
  transform: scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 24px -8px var(--accent-glow);
}

.process-step__body h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 8px 0 6px;
  color: var(--text-primary);
}
.process-step__body p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
.process-step__body strong {
  color: var(--text-primary);
  font-weight: 600;
}

.contact__guarantee {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 14px 16px;
  background: rgba(6, 182, 212, 0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 4px;
}
.contact__guarantee strong {
  color: var(--text-primary);
  font-weight: 600;
}
.contact__guarantee-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--accent-glow);
  animation: softPulse 2.6s ease-in-out infinite;
}

/* En layout 2 columnas, el wrapper del form pierde max-width centrada */
.contact__layout .contact__wrapper {
  max-width: none;
  margin: 0;
}

/* Mobile: se apilan (form arriba o abajo según preferencia visual) */
@media (max-width: 900px) {
  .contact__layout {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 640px;
  }
  .contact__process { gap: 22px; }
  .process-steps { gap: 22px; }
  .process-step::before { top: 50px; bottom: -26px; left: 22px; }
  .process-step__num { width: 44px; height: 44px; font-size: 0.86rem; }
  .process-step { grid-template-columns: 44px 1fr; gap: 14px; }
}

.contact__wrapper {
  max-width: 680px;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 48px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.contact__wrapper::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  filter: blur(40px);
  opacity: 0.4;
  pointer-events: none;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form__group { display: flex; flex-direction: column; gap: 10px; }
.form__label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.form__input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.94rem;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
  outline: none;
  -webkit-appearance: none;
}
.form__input:hover  { border-color: var(--border-strong); }
.form__input:focus  {
  border-color: var(--accent);
  background: rgba(6,182,212,0.04);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.form__input::placeholder { color: var(--text-muted); }

/* Select: estilizado para que el dropdown nativo respete el tema oscuro */
.form__select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Flecha custom (SVG inline en cyan) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2367e8f9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  padding-right: 42px;
  /* Color-scheme dark fuerza al browser a usar UI oscura nativa para el popup */
  color-scheme: dark;
}
.form__select option {
  background: #0e0e1c;
  color: var(--text-primary);
  padding: 12px;
  font-family: var(--font-main);
}

.form__textarea { resize: vertical; min-height: 140px; }

/* Honeypot anti-spam: invisible para humanos, visible para bots */
.form__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Botón de envío en estado "cargando": muestra spinner, oculta label */
#contactSubmit { position: relative; }
.contact__btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: contactSpin 0.7s linear infinite;
}
#contactSubmit.is-loading .contact__btn-label  { visibility: hidden; }
#contactSubmit.is-loading .contact__btn-spinner {
  display: inline-block;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
#contactSubmit:disabled { cursor: wait; opacity: 0.85; }
@keyframes contactSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Mensaje de feedback (éxito / error) bajo el botón */
.contact__feedback {
  display: none;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  line-height: 1.45;
  border: 1px solid transparent;
  margin-top: 4px;
}
.contact__feedback.is-visible { display: block; animation: contactFadeIn 0.3s ease; }
.contact__feedback--success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}
.contact__feedback--error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}
@keyframes contactFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== FOOTER =====
===== */
.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 64px 0 36px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.footer__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.footer__brand .nav__logo { font-size: 1.4rem; }
.footer__tagline {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 12px;
  max-width: 320px;
  line-height: 1.55;
}
.footer__nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.footer__link {
  font-size: 0.88rem;
  color: var(--text-secondary);
  transition: color var(--t);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.footer__link:hover { color: var(--text-primary); }
.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.footer__bottom-meta {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.footer__bottom-meta::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #50e3a4;
  box-shadow: 0 0 8px #50e3a4;
  animation: pulseDot 2.4s ease-in-out infinite;
}

/* ===== AUTOMATIZACIONES DEMO =====
   Contenedor principal de los demos interactivos.
   .auto-tabs: barra de tabs con scroll horizontal en mobile.
   .auto-demo: caja que contiene el panel activo (display: flex, flex-direction: column).
   .auto-panel: paneles individuales, solo el que tiene .is-active se muestra.
   .panel-title: título de cada panel con línea divisora inferior.
===== */

.auto-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 auto 36px;
  padding: 6px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 100px;
  width: fit-content;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
}

.auto-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: var(--t);
  background: transparent;
  white-space: nowrap;
  font-family: var(--font-main);
  letter-spacing: -0.005em;
}
.auto-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.auto-tab.is-active {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 6px 20px -8px var(--accent-glow);
}

.auto-demo {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.auto-panel { display: none; }
.auto-panel.is-active { display: flex; flex-direction: column; flex: 1; }

.panel-title {
  padding: 22px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.98rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-primary);
  flex-shrink: 0;
  letter-spacing: -0.015em;
  background: rgba(0,0,0,0.18);
}
.panel-title span {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-left: 8px;
  font-family: var(--font-main);
  letter-spacing: 0;
}

/* --- Panel Turnos Web: layout dividido en 2 columnas (widget | flujo n8n) --- */
.demo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  flex: 1;
}

.wsp-wrapper {
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(6,182,212,0.04) 0%, transparent 80%);
}

.wsp-phone {
  width: 100%;
  max-width: 320px;
  background: #0c0e17;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}

.wsp-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  background: #151a28;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.wsp-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.wsp-name  { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.wsp-status { font-size: 0.7rem; color: #25D366; }

.wsp-body {
  padding: 14px;
  min-height: 268px;
  max-height: 268px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: #080b12;
  scroll-behavior: smooth;
}

.wsp-msg {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.55;
  animation: msgPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.wsp-msg--bot {
  background: #1a2035;
  color: var(--text-primary);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.wsp-msg--user {
  background: var(--gradient);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}

.wsp-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 11px 14px;
  background: #1a2035;
  border-radius: 12px;
  border-bottom-left-radius: 3px;
  width: fit-content;
  align-self: flex-start;
}
.wsp-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingDot 1.1s infinite;
}
.wsp-typing span:nth-child(2) { animation-delay: 0.18s; }
.wsp-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@keyframes msgPop {
  from { transform: scale(0.82); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.wsp-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 11px 14px;
  background: #0c0e17;
  border-top: 1px solid rgba(255,255,255,0.04);
  min-height: 54px;
  align-content: flex-start;
}
.wsp-btn {
  padding: 6px 13px;
  background: rgba(79, 70, 229, 0.13);
  border: 1px solid rgba(79, 70, 229, 0.28);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #67e8f9;
  cursor: pointer;
  transition: var(--t);
  font-family: var(--font-main);
  white-space: nowrap;
}
.wsp-btn:hover:not(:disabled) { background: rgba(79, 70, 229, 0.26); color: #a78bfa; }
.wsp-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* --- Flujo n8n (columna derecha del panel Turnos): cadena de nodos conectados --- */
.flow-wrapper {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.flow-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.flow-chain {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.flow-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.015);
  transition: all 0.35s ease;
}
.flow-node span { font-size: 1rem; }
.flow-node.is-active {
  border-color: var(--accent);
  color: var(--text-primary);
  background: rgba(79, 70, 229, 0.1);
  box-shadow: 0 0 0 1px rgba(6,182,212,0.12);
}
.flow-node.is-done {
  border-color: rgba(34, 197, 94, 0.38);
  color: #86efac;
  background: rgba(34, 197, 94, 0.06);
}
.flow-connector {
  width: 2px;
  height: 18px;
  margin-left: 25px;
  background: var(--border);
  transition: background 0.35s ease;
}
.flow-connector.is-done { background: rgba(34, 197, 94, 0.38); }

/* --- Panel Reportes: layout grid 1:1 (tabla/KPIs | descripción) ---
   .demo-center es el contenedor grid compartido por Reportes, Pedidos, Email y Archivos.
   Usa gap:0 y align-items:stretch en los paneles con línea divisora vertical (ver overrides). */
.demo-center {
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  flex: 1;
  align-content: center;
}
.report-demo {
  background: #080b12;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--r);
  overflow: hidden;
}
.report-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: #111725;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.85rem;
  font-weight: 600;
}
.report-header span:first-child { font-size: 1.05rem; }
.report-header .btn { margin-left: auto; }
.report-table { padding: 14px 16px; }
.report-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 9px 10px;
  font-size: 0.78rem;
  border-radius: 5px;
  gap: 6px;
}
.report-row--head {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 5px;
  padding-bottom: 10px;
}
.report-row--data {
  color: var(--text-primary);
  animation: rowSlide 0.3s ease forwards;
}
.report-row--data:nth-child(even) { background: rgba(255,255,255,0.02); }
@keyframes rowSlide {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.report-sent {
  margin: 4px 14px 14px;
  padding: 11px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
  min-height: 38px;
  transition: all 0.3s ease;
}
.report-sent.sent {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.22);
  color: #86efac;
  animation: msgPop 0.3s ease;
}

/* --- Panel Notificaciones: estilos del sistema de canales (email, wsp, sheets, crm) --- */
.notif-demo { display: flex; flex-direction: column; gap: 16px; }
.notif-trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(79, 70, 229, 0.07);
  border: 1px solid rgba(79, 70, 229, 0.18);
  border-radius: var(--r);
  font-size: 1.4rem;
  flex-wrap: wrap;
}
.notif-trigger__title { font-size: 0.88rem; font-weight: 600; margin-bottom: 3px; }
.notif-trigger__sub   { font-size: 0.76rem; color: var(--text-secondary); }
.notif-trigger .btn   { margin-left: auto; flex-shrink: 0; }

.notif-channels { display: flex; flex-direction: column; gap: 10px; }
.notif-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: all 0.35s ease;
}
.notif-channel.is-sending {
  border-color: rgba(79, 70, 229, 0.35);
  background: rgba(79, 70, 229, 0.06);
}
.notif-channel.is-sent {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.05);
}
.nc-icon { font-size: 1.25rem; }
.nc-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nc-name { font-size: 0.85rem; font-weight: 600; }
.nc-msg  { font-size: 0.75rem; color: var(--text-secondary); }
.nc-status { font-size: 0.75rem; font-weight: 600; min-width: 84px; text-align: right; color: var(--text-muted); }
.is-sending .nc-status { color: #67e8f9; }
.is-sent    .nc-status { color: #86efac; }

/* --- demo-desc: columna "¿Cómo funciona?" compartida por todos los paneles ---
   Lista numerada con bullets en gradiente (counter CSS). */
.demo-desc h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.demo-desc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: steps;
}
.demo-desc ol li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  counter-increment: steps;
}
.demo-desc ol li::before {
  content: counter(steps);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* small button variant */
.btn--sm { padding: 7px 16px; font-size: 0.78rem; }

/* Tabs: scrollable on mobile */
.auto-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.auto-tabs::-webkit-scrollbar { display: none; }

/* nc-preview: message preview text */
.nc-preview { font-style: italic; opacity: 0.85; }
.is-sent .nc-preview { opacity: 1; }

/* 4th notification channel */
#nc-crm { }

/* ── Reportes mejorado ── */
.report-loading {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 14px 10px;
}
.report-loading span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-muted);
  animation: typingDot 1s infinite;
}
.report-loading span:nth-child(2) { animation-delay: 0.15s; }
.report-loading span:nth-child(3) { animation-delay: 0.3s; }

.report-total {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
  transition: opacity 0.4s ease;
}

/* ── Pedidos demo ── */
.pedido-left { display: flex; flex-direction: column; gap: 14px; }

.pedido-card {
  background: #080b12;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.pedido-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: #111725;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.pedido-card__info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
}
.pedido-card__title { font-size: 0.86rem; font-weight: 600; }
.pedido-card__time  { font-size: 0.68rem; color: var(--text-muted); margin-top: 1px; }

.pedido-badge {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: all 0.4s ease;
}
.pedido-badge--pending {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.22);
  color: #fbbf24;
}
.pedido-badge--done {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #86efac;
}

.pedido-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pedido-item { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; }
.pedido-item__name { font-size: 0.84rem; font-weight: 600; }
.pedido-item__meta { font-size: 0.73rem; color: var(--text-secondary); margin-top: 2px; }
.pedido-client { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--text-secondary); }

.pedido-steps {
  background: #080b12;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.p-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 0.79rem;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}
.p-step:last-child { border-bottom: none; }
.p-step__icon { font-size: 0.9rem; width: 20px; text-align: center; flex-shrink: 0; }

.p-step--active {
  background: rgba(79, 70, 229, 0.07);
  color: var(--text-primary);
  border-left-color: var(--accent);
}
.p-step--active .p-step__text::after {
  content: ' ...';
  color: var(--text-muted);
  animation: pulseFade 1.2s infinite;
}
@keyframes pulseFade { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

.p-step--done {
  color: #86efac;
  border-left-color: rgba(34, 197, 94, 0.45);
}

/* ── Email auto demo ── */
.email-left { display: flex; flex-direction: column; }

.email-form {
  background: #080b12;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  flex: 1;
}
.email-form__title {
  padding: 12px 16px;
  background: #111725;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
  font-weight: 600;
}
.email-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  min-height: 40px;
  transition: background 0.25s;
}
.email-field:last-of-type { border-bottom: none; }
.email-field.ef--filled { background: rgba(79, 70, 229, 0.05); }
.email-field.ef--filling .ef-value::after {
  content: '|';
  color: var(--accent);
  animation: blink 0.65s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.ef-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  min-width: 62px;
  flex-shrink: 0;
}
.ef-value { font-size: 0.8rem; color: var(--text-primary); }

.email-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  background: #111725;
}
.email-status { font-size: 0.76rem; font-weight: 600; }
.email-status--processing { color: #67e8f9; }
.email-status--sent       { color: #86efac; }

.email-preview-wrapper { display: flex; flex-direction: column; }
.email-preview {
  background: #080b12;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  flex: 1;
}
.email-preview__header {
  padding: 13px 16px;
  background: #111725;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ep-row { display: flex; gap: 10px; font-size: 0.76rem; }
.ep-label { color: var(--text-muted); min-width: 46px; flex-shrink: 0; }
.ep-row span:last-child { color: var(--text-primary); }

.email-preview__body {
  padding: 18px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ep-placeholder { color: var(--text-muted); font-size: 0.78rem; font-style: italic; margin: auto; text-align: center; }
.ep-line {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-secondary);
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}
.ep-line--d1 { animation-delay: 0.05s; }
.ep-line--d2 { animation-delay: 0.25s; }
.ep-line--d3 { animation-delay: 0.5s; }
.ep-line--d4 { animation-delay: 0.75s; }

/* ===== EJEMPLOS DE WEBS =====
   Grid de 3 columnas en desktop, 2 en tablet, 1 en mobile.
   Cada card tiene una mini-preview de colores/identidad del sitio ejemplo
   y una sección de info debajo (tipo, título, descripción, link).
   Las mini-previews usan ::before y ::after para efectos decorativos.
===== */
.ejemplos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ejemplo-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
  color: inherit;
  transition: border-color var(--ts), transform var(--ts), box-shadow var(--ts);
  box-shadow: var(--shadow-card);
  position: relative;
}
.ejemplo-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

/* Mock browser chrome on top of each preview */
.ejemplo-preview {
  height: 220px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 24px;
}
.ejemplo-preview::before {
  /* Browser dots top-left */
  content: '\2022  \2022  \2022';
  position: absolute;
  top: 14px;
  left: 16px;
  color: rgba(255,255,255,0.25);
  font-size: 1rem;
  letter-spacing: 4px;
  z-index: 3;
}
.ejemplo-card .ejemplo-preview::after {
  /* Decorative bottom-fade for separation */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 2;
}

.ep-brand {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  position: relative;
  z-index: 1;
}
.ep-brand--dark  { color: #1a2744; }

.ep-logo {
  display: block;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ejemplo-card:hover .ep-logo { transform: scale(1.08); }

.ep-brand--gold  { color: #c9a050; }
.ep-brand--cyan  { color: #00e5ff; }

.ep-tag-inner {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: 10px;
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
}
.ep-tag-inner--dark { color: #6b7a9a; }
.ep-tag-inner--gold { color: rgba(201,160,80,0.7); }
.ep-tag-inner--cyan { color: rgba(0,229,255,0.6); }

/* Mini-previews por tema, con animacion sutil de gradientes */
.ejemplo-preview--stride {
  background:
    radial-gradient(ellipse at 30% 80%, rgba(255,69,0,0.18) 0%, transparent 60%),
    #060606;
  border-bottom: 1px solid rgba(255,69,0,0.18);
}
.ejemplo-preview--info {
  background: linear-gradient(180deg, #0a1628 0%, #152238 50%, #1a2744 100%);
}
.ejemplo-preview--info::before {
  /* Override dots position with brand */
  color: rgba(255,255,255,0.35);
}
.ejemplo-preview--veltrano {
  background: linear-gradient(160deg, #1b2a4a 60%, #2a3d65 100%);
}
.ejemplo-preview--vertice {
  background:
    radial-gradient(ellipse at 70% 50%, rgba(139,21,21,0.22) 0%, transparent 70%),
    #0d0806;
}
.ejemplo-preview--nexara {
  background:
    radial-gradient(ellipse at 70% 50%, rgba(0,229,255,0.16) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 80%, rgba(139,0,255,0.16) 0%, transparent 50%),
    #030510;
}
.ejemplo-preview--auro {
  background:
    radial-gradient(ellipse at 60% 40%, rgba(201,160,80,0.22) 0%, transparent 65%),
    #0a0806;
}

/* Decorative bar at top edge of preview for personality */
.ejemplo-preview--stride { box-shadow: inset 0 2px 0 #ff4500; }
.ejemplo-preview--info     { box-shadow: inset 0 -2px 0 #e53935; }
.ejemplo-preview--veltrano { box-shadow: inset 0 -2px 0 #c9a050; }
.ejemplo-preview--vertice  { box-shadow: inset 0 2px 0 #8b1515; }
.ejemplo-preview--nexara   { box-shadow: inset 0 2px 0 #00e5ff; }
.ejemplo-preview--auro     { box-shadow: inset 0 2px 0 #c9a050; }

.ejemplo-card__info {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ejemplo-tipo {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #c4b8ff;
  font-family: var(--font-mono);
}
.ejemplo-card__info h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.ejemplo-card__info p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 4px;
}
.ejemplo-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: #c4b8ff;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--t), color var(--t);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ejemplo-card:hover .ejemplo-link { gap: 12px; color: #fff; }

/* ===== RESPONSIVE =====
   Dos breakpoints:
   - 768px: mobile. Nav se colapsa, grids pasan a 1 columna, demos se apilan.
   - 480px: mobile chico. Grids de servicios/portfolio/ejemplos a 1 columna.
===== */
@media (max-width: 768px) {
  :root { --section-py: 72px; }

  .nav__links {
    display: none;
    position: fixed;
    top: 72px;
    left: 0; right: 0;
    z-index: 1001;
    /* Gradiente sutil acorde a la paleta del sitio (bg-card → bg principal),
       con un brillo cyan tenue arriba para integrar con el accent del sitio. */
    background:
      radial-gradient(ellipse at top, rgba(6, 182, 212, 0.06), transparent 60%),
      linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%);
    border-top: 1px solid var(--border-accent);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6);
    flex-direction: column;
    align-items: stretch;       /* explícito: los <li> ocupan TODO el ancho */
    padding: 14px 6px 24px;     /* padding lateral muy chico para que las líneas casi lleguen al borde */
    gap: 0;
  }
  /* Forzar que los <li> sean full-width (algunos browsers no lo hacen por default en flex) */
  .nav__links > li {
    display: block;
    width: 100%;
  }
  .nav__links.open { display: flex; }
  .nav__toggle { display: flex; }

  /* Cada link: full width + línea divisoria abajo. display:block es clave para que
     el border tenga el mismo ancho en todos los items (el <a> por default es inline). */
  .nav__link {
    display: block;
    width: 100%;
    padding: 16px 16px;
    text-align: center;
    font-size: 0.98rem;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav__link:hover { background: transparent; }
  /* El CTA NO lleva border-bottom — es un botón, no item de lista.
     width: auto + margin: auto = botón centrado horizontalmente con su ancho propio */
  .nav__link--cta {
    display: block;
    width: auto;
    max-width: calc(100% - 32px);
    margin: 28px auto 0;       /* margin-top 28px, auto para centrar horizontalmente */
    padding: 14px 36px;        /* padding generoso para que el botón se vea proporcionado */
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    border-bottom: none;
  }

  .hero__stats { gap: 20px; padding: 18px 24px; flex-wrap: wrap; justify-content: center; }
  .stat__divider { display: none; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { text-align: center; }

  .form__row { grid-template-columns: 1fr; }

  .footer__content { flex-direction: column; gap: 24px; }

  .ejemplos__grid { grid-template-columns: 1fr 1fr; }

  /* Demo responsive */
  .demo-split { grid-template-columns: 1fr; }
  .wsp-wrapper { border-right: none; border-bottom: 1px solid var(--border); }
  .flow-wrapper { padding: 24px; }
  .demo-center { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .auto-tab { padding: 10px 14px; font-size: 0.82rem; }
}

@media (max-width: 480px) {
  :root { --section-py: 56px; }
  .services__grid,
  .portfolio__grid,
  .team__grid,
  .ejemplos__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   WEB BOOKING DEMO
═══════════════════════════════════════════ */
.web-booking-wrapper {
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(6,182,212,0.04) 0%, transparent 80%);
  overflow-y: auto;
}

.web-booking {
  width: 100%;
  max-width: 360px;
  background: #0c0e17;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wb-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: #151a28;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.wb-topbar__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
}
.wb-topbar__url {
  margin-left: 8px;
  font-size: 0.67rem;
  color: var(--text-muted);
  flex: 1;
  text-align: center;
}

.wb-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.wb-header-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 1.4rem;
}
.wb-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-display);
}
.wb-subtitle { font-size: 0.67rem; color: var(--text-muted); margin-top: 2px; }

.wb-step { display: flex; flex-direction: column; gap: 9px; }
.wb-step--hidden { display: none; }

.wb-step-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wb-step-num {
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-size: 0.63rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.wb-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.wb-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 11px 4px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--font-main);
}
.wb-service:hover { border-color: var(--border-accent); background: rgba(6,182,212,0.08); }
.wb-service.is-selected { border-color: var(--accent); background: rgba(6,182,212,0.15); }
.wb-service__icon { font-size: 1.15rem; }
.wb-service__name { font-size: 0.68rem; font-weight: 600; color: var(--text-primary); }
.wb-service__price { font-size: 0.6rem; color: var(--text-muted); }

.wb-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.wb-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--font-main);
}
.wb-slot:hover:not(:disabled) { border-color: var(--border-accent); background: rgba(6,182,212,0.1); }
.wb-slot.is-selected { border-color: var(--accent); background: rgba(6,182,212,0.18); }
.wb-slot--busy { opacity: 0.32; cursor: not-allowed; }
.wb-slot__date { font-size: 0.67rem; font-weight: 600; color: var(--text-primary); }
.wb-slot__time { font-size: 0.62rem; color: var(--text-muted); }

.wb-confirm {
  padding: 13px;
  background: rgba(34,197,94,0.07);
  border: 1px solid rgba(34,197,94,0.22);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: msgPop 0.3s ease;
}
.wb-confirm__title { font-size: 0.88rem; font-weight: 700; color: #86efac; }
.wb-confirm__detail { font-size: 0.76rem; color: var(--text-secondary); }
.wb-confirm__email { font-size: 0.7rem; color: var(--text-muted); font-style: italic; }

.wb-footer-bar {
  padding: 9px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: #0c0e17;
  display: flex;
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════
   REPORTES — KPIs + gráfico
═══════════════════════════════════════════ */
.report-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  background: #080b12;
  border-right: 1px solid rgba(255,255,255,0.04);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.kpi-card:last-child { border-right: none; }
.kpi-card.visible { opacity: 1; animation: msgPop 0.35s ease; }
.kpi-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 600;
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.kpi-trend { font-size: 0.62rem; font-weight: 600; }
.kpi-trend--up   { color: #86efac; }
.kpi-trend--down { color: #f87171; }

/* tabla con 4 columnas */
.report-row { grid-template-columns: 2fr 1fr 1.2fr 0.8fr; }

.report-chart {
  padding: 9px 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.report-chart.visible { opacity: 1; }
.chart-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 7px;
  font-weight: 600;
}
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 56px;
}
.chart-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.chart-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--gradient);
  height: 0;
  transition: height 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 3px;
}
.chart-bar-name {
  font-size: 0.58rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* ═══════════════════════════════════════════
   NOTIFICACIONES — formulario animado
═══════════════════════════════════════════ */
.notif-form-section {
  background: rgba(6,182,212,0.04);
  border: 1px solid rgba(6,182,212,0.14);
  border-radius: var(--r);
  overflow: hidden;
}
.notif-form-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  font-size: 1.25rem;
  border-bottom: 1px solid rgba(6,182,212,0.1);
  flex-wrap: wrap;
}
.notif-form-actions { margin-left: auto; display: flex; gap: 7px; }
.notif-live-form {
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nlf-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 5px;
  transition: background 0.25s;
  min-height: 32px;
}
.nlf-field.nlf--filling { background: rgba(6,182,212,0.06); }
.nlf-field.nlf--done    { background: rgba(34,197,94,0.04); }
.nlf-label {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  min-width: 58px;
  flex-shrink: 0;
}
.nlf-value { font-size: 0.8rem; color: var(--text-primary); }
.nlf-field.nlf--filling .nlf-value::after {
  content: '|';
  color: var(--accent);
  animation: blink 0.65s step-end infinite;
}

/* ═══════════════════════════════════════════
   ARCHIVOS — comparación
═══════════════════════════════════════════ */
.archivos-demo { display: flex; flex-direction: column; gap: 12px; }

.arch-files { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.arch-file {
  background: #080b12;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.arch-file__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  background: #111725;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}
.arch-file__name { font-size: 0.78rem; font-weight: 600; }
.arch-file__meta { font-size: 0.63rem; color: var(--text-muted); margin-top: 1px; }
.arch-file__badge {
  margin-left: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}
.arch-file__badge--a { background: rgba(6,182,212,0.18); color: #67e8f9; border: 1px solid rgba(6,182,212,0.32); }
.arch-file__badge--b { background: rgba(124,58,237,0.18); color: #a78bfa; border: 1px solid rgba(124,58,237,0.32); }

.arch-file__rows {
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 80px;
}
.arch-row {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.015);
  opacity: 0;
  animation: rowSlide 0.25s ease forwards;
}
.arch-row.arch-row--header {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: transparent;
  opacity: 1;
  animation: none;
}

.arch-process {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.arch-process__bar {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
}
.arch-process__fill {
  height: 100%;
  width: 0%;
  background: var(--gradient);
  border-radius: 10px;
  transition: width 0.4s ease;
}
.arch-process__steps { display: flex; flex-direction: column; gap: 4px; }
.arch-proc-step {
  font-size: 0.73rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: fadeInUp 0.3s ease forwards;
}
.arch-proc-step.done { color: #86efac; }

.arch-result {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.arch-result__section {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.arch-result__section--match  { border-color: rgba(34,197,94,0.25); }
.arch-result__section--only-a { border-color: rgba(6,182,212,0.25); }
.arch-result__section--only-b { border-color: rgba(124,58,237,0.25); }

.arch-result__head {
  padding: 6px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid var(--border);
}
.arch-result__rows {
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 50px;
}
.arch-result-row {
  font-size: 0.68rem;
  padding: 4px 6px;
  border-radius: 3px;
  opacity: 0;
  animation: rowSlide 0.3s ease forwards;
}
.arch-result__section--match  .arch-result-row { color: #86efac; background: rgba(34,197,94,0.05); }
.arch-result__section--only-a .arch-result-row { color: #67e8f9; background: rgba(6,182,212,0.05); }
.arch-result__section--only-b .arch-result-row { color: #a78bfa; background: rgba(124,58,237,0.05); }

.arch-actions { display: flex; align-items: center; gap: 9px; padding-top: 2px; }
.arch-download { font-size: 0.74rem; font-weight: 600; color: #86efac; }

/* ── Línea divisora vertical en paneles demo-center ── */
#panel-reportes .demo-center,
#panel-pedidos  .demo-center,
#panel-email    .demo-center,
#panel-archivos .demo-center  { gap: 0; align-items: stretch; position: relative; }

/* Pseudo-elemento full-height: va de extremo a extremo del panel */
#panel-reportes .demo-center::after,
#panel-pedidos  .demo-center::after,
#panel-email    .demo-center::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}
/* Archivos: columnas 4fr 2fr → línea en ~66% menos offset del padding */
#panel-archivos .demo-center::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: calc(66.67% - 14px);
  width: 1px;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}

/* Centrado vertical + padding-right para separar contenido de la línea */
#panel-reportes .report-demo  { display: flex; flex-direction: column; justify-content: center; margin-right: 40px; }
#panel-pedidos  .pedido-left  { display: flex; flex-direction: column; justify-content: center; padding-right: 40px; }
#panel-email    .email-left            { padding-right: 40px; }
#panel-email    .email-preview-wrapper { padding-left: 40px; }
#panel-archivos .archivos-demo { padding-right: 40px; }

#panel-reportes .demo-desc,
#panel-pedidos  .demo-desc,
#panel-email    .demo-desc,
#panel-archivos .demo-desc    { padding-left: 40px; }

/* ── Overrides de escala: tamaños específicos de cada panel ──────────────
   Estos bloques agrandan los widgets de cada demo para que sean más
   legibles y llenen mejor el espacio disponible en el panel.
   Los overrides están agrupados por panel para facilitar el mantenimiento. */

/* Turnos Web: columna de widget más ancha (3fr vs 2fr) + elementos más grandes */
#panel-whatsapp .demo-split         { grid-template-columns: 3fr 2fr; }
#panel-whatsapp .web-booking-wrapper { align-items: stretch; padding: 32px; }
#panel-whatsapp .web-booking        { max-width: 440px; max-height: 460px; min-height: 380px; margin: auto; }
#panel-whatsapp .wb-body            { padding: 22px; gap: 16px; }
#panel-whatsapp .wb-header-row      { font-size: 1.7rem; }
#panel-whatsapp .wb-title           { font-size: 1rem; }
#panel-whatsapp .wb-subtitle        { font-size: 0.78rem; }
#panel-whatsapp .wb-step-label      { font-size: 0.82rem; }
#panel-whatsapp .wb-step-num        { width: 22px; height: 22px; font-size: 0.7rem; }
#panel-whatsapp .wb-service         { padding: 14px 6px; }
#panel-whatsapp .wb-service__icon   { font-size: 1.4rem; }
#panel-whatsapp .wb-service__name   { font-size: 0.78rem; }
#panel-whatsapp .wb-service__price  { font-size: 0.68rem; }
#panel-whatsapp .wb-slot            { padding: 12px 4px; }
#panel-whatsapp .wb-slot__date      { font-size: 0.77rem; }
#panel-whatsapp .wb-slot__time      { font-size: 0.72rem; }
#panel-whatsapp .wb-confirm         { padding: 16px; gap: 8px; }
#panel-whatsapp .wb-confirm__title  { font-size: 1rem; }
#panel-whatsapp .wb-confirm__detail { font-size: 0.86rem; }
#panel-whatsapp .wb-confirm__email  { font-size: 0.76rem; }
#panel-whatsapp .wb-action-btn__icon  { font-size: 1.7rem; }
#panel-whatsapp .wb-action-btn__label { font-size: 0.78rem; }
#panel-whatsapp .wb-appt__service   { font-size: 0.86rem; }
#panel-whatsapp .wb-appt__date      { font-size: 0.73rem; }
#panel-whatsapp .wb-cancel-q        { font-size: 0.86rem; }
#panel-whatsapp .wb-cancel-appt     { font-size: 0.9rem; }

/* Email auto: form y preview se estiran al alto del panel (align-items: stretch),
   los botones de acción se pegan al fondo con margin-top: auto */
#panel-email .demo-center           { align-items: stretch; align-content: stretch; }
#panel-email .email-form            { display: flex; flex-direction: column; }
#panel-email .email-form__title     { font-size: 0.91rem; padding: 14px 18px; }
#panel-email .email-field           { min-height: 48px; padding: 12px 18px; }
#panel-email .ef-label              { font-size: 0.74rem; min-width: 66px; }
#panel-email .ef-value              { font-size: 0.87rem; }
#panel-email .email-actions         { padding: 14px 18px; margin-top: auto; }
#panel-email .email-preview__header { padding: 14px 18px; gap: 7px; }
#panel-email .ep-row                { font-size: 0.81rem; }
#panel-email .email-preview__body   { padding: 20px; min-height: 175px; gap: 12px; }
#panel-email .ep-line               { font-size: 0.86rem; }
#panel-email .ep-placeholder        { font-size: 0.84rem; }

/* Archivos: columna de demo ocupa 4fr vs 2fr para dar más espacio a las tablas */
#panel-archivos .demo-center        { grid-template-columns: 4fr 2fr; align-items: stretch; align-content: stretch; }
#panel-archivos .archivos-demo      { flex: 1; justify-content: center; }
#panel-archivos .arch-file__head    { padding: 12px 16px; }
#panel-archivos .arch-file__name    { font-size: 0.9rem; }
#panel-archivos .arch-file__meta    { font-size: 0.73rem; }
#panel-archivos .arch-file__badge   { width: 25px; height: 25px; font-size: 0.76rem; }
#panel-archivos .arch-file__rows    { padding: 10px; min-height: 160px; }
#panel-archivos .arch-row           { padding: 6px 10px; font-size: 0.82rem; }
#panel-archivos .arch-row.arch-row--header { font-size: 0.7rem; }
#panel-archivos .arch-process__bar  { height: 8px; }
#panel-archivos .arch-proc-step     { font-size: 0.86rem; }
#panel-archivos .arch-result-row    { font-size: 0.82rem; }
#panel-archivos .arch-result__head  { font-size: 0.8rem; }
#panel-archivos .demo-desc          { display: flex; flex-direction: column; justify-content: center; }

/* Responsive: los paneles de demo se apilan en mobile */
@media (max-width: 768px) {
  .web-booking-wrapper { border-right: none; border-bottom: 1px solid var(--border); }
  .report-kpis { grid-template-columns: repeat(2, 1fr); }
  .arch-files { grid-template-columns: 1fr; }
  .arch-result { grid-template-columns: 1fr; }
  .notif-form-actions { margin-left: 0; }
}
@media (max-width: 480px) {
  .wb-service-grid { grid-template-columns: repeat(3, 1fr); }
  .wb-slots { grid-template-columns: repeat(2, 1fr); }
  .report-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════
   TURNOS WEB — paso 0 + cancelar/modificar
═══════════════════════════════════════════ */
.wb-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wb-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 13px 6px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--font-main);
}
.wb-action-btn:hover { border-color: var(--border-accent); background: rgba(6,182,212,0.1); transform: translateY(-2px); }
.wb-action-btn__icon { font-size: 1.4rem; }
.wb-action-btn__label { font-size: 0.67rem; font-weight: 600; color: var(--text-primary); text-align: center; }

.wb-step-num--red    { background: rgba(239,68,68,0.25); color: #f87171; }
.wb-step-num--yellow { background: rgba(234,179,8,0.25); color: #fbbf24; }

.wb-appt-list { display: flex; flex-direction: column; gap: 7px; }
.wb-appt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 1rem;
}
.wb-appt__info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.wb-appt__service { font-size: 0.76rem; font-weight: 600; color: var(--text-primary); }
.wb-appt__date    { font-size: 0.65rem; color: var(--text-muted); }

.wb-confirm-cancel {
  padding: 12px;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.18);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wb-cancel-q    { font-size: 0.78rem; color: var(--text-secondary); }
.wb-cancel-appt { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.wb-cancel-btns { display: flex; gap: 7px; flex-wrap: wrap; }

.wb-confirm--red    { background: rgba(239,68,68,0.07);   border-color: rgba(239,68,68,0.25);   }
.wb-confirm--yellow { background: rgba(234,179,8,0.07);   border-color: rgba(234,179,8,0.25);   }
.wb-confirm--red    .wb-confirm__title { color: #f87171;  }
.wb-confirm--yellow .wb-confirm__title { color: #fbbf24;  }

/* ═══════════════════════════════════════════
   NOTIFICACIONES — pantalla a pantalla
═══════════════════════════════════════════ */
.notif-full {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
  min-height: 480px;
  flex: 1;
}
.notif-stage-col {
  padding: 28px 32px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.notif-desc-col {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Progress bar */
.notif-progress {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.notif-progress::-webkit-scrollbar { display: none; }
.np-step {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all 0.35s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.np-icon { font-size: 0.85rem; }
.np-label { }
.np-step.np-step--active { background: var(--accent-light); border-color: var(--border-accent); color: #67e8f9; }
.np-step.np-step--done   { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.25); color: #86efac; }
.np-arrow { font-size: 0.8rem; color: var(--text-muted); flex-shrink: 0; }

/* Stage */
.notif-stage {
  position: relative;
  flex: 1;
  min-height: 260px;
}
.notif-screen {
  background: #080b12;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  height: 100%;
}
.notif-screen--hidden { display: none; }
.notif-screen--entering { animation: screenEnter 0.38s cubic-bezier(0.4,0,0.2,1) forwards; }
.notif-screen--leaving  { animation: screenLeave 0.32s cubic-bezier(0.4,0,0.2,1) forwards; }

@keyframes screenEnter {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes screenLeave {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}

.nscreen-label {
  padding: 10px 14px;
  background: #111725;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
}
.nscreen-done {
  margin: 8px 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #86efac;
  background: rgba(34,197,94,0.07);
  border: 1px solid rgba(34,197,94,0.2);
  display: none;
  animation: msgPop 0.3s ease;
}

/* Notif controls */
.notif-controls { display: flex; gap: 8px; }

/* Screen 1: Email client */
.ns-email-client {
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
}
.ns-ec-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: #151a28;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  color: #67e8f9;
}
.ns-ec-fields { padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ns-ec-field {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.ns-ec-field:last-child { border-bottom: none; }
.ns-ec-lbl { color: var(--text-muted); min-width: 44px; flex-shrink: 0; }
.ns-ec-body {
  padding: 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 80px;
}
.ns-ec-line {
  font-size: 0.76rem;
  color: var(--text-secondary);
  opacity: 0;
  animation: fadeInUp 0.35s ease forwards;
  line-height: 1.55;
}
.ns-ec-footer {
  padding: 9px 14px;
  background: #111725;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Screen 2: WhatsApp mini */
.ns-wsp-mini { display: flex; flex-direction: column; height: calc(100% - 40px); }
.ns-wsp-mini__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #151a28;
  border-bottom: 1px solid var(--border);
}
.ns-wsp-mini__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0;
}
.ns-wsp-mini__name   { font-size: 0.8rem; font-weight: 600; }
.ns-wsp-mini__status { font-size: 0.65rem; color: #25D366; }
.ns-wsp-mini__body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #080b12;
}
.ns-wsp-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 11px;
  font-size: 0.78rem;
  line-height: 1.5;
  animation: msgPop 0.25s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.ns-wsp-bubble--bot  { background: #1a2035; color: var(--text-primary); align-self: flex-start; border-bottom-left-radius: 3px; }
.ns-wsp-bubble--sent { background: var(--gradient); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }

/* Screen 3: Sheets */
.ns-sheets-wrapper { display: flex; flex-direction: column; height: calc(100% - 40px); }
.ns-sheets-tab {
  padding: 7px 14px;
  background: #151a28;
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.ns-sheet-grid { flex: 1; }
.ns-sheet-row {
  display: grid;
  grid-template-columns: 1.2fr 1.3fr 1.2fr 0.9fr;
  padding: 6px 12px;
  font-size: 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  gap: 6px;
  align-items: center;
}
.ns-sheet-head { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; background: rgba(255,255,255,0.02); }
.ns-sheet-existing { color: var(--text-secondary); }
.ns-sheet-new {
  color: var(--text-primary);
  background: rgba(34,197,94,0.07);
  border-left: 3px solid rgba(34,197,94,0.5);
  animation: rowSlide 0.4s ease forwards;
}
.ns-pill {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 600;
  width: fit-content;
}
.ns-pill--done     { background: rgba(34,197,94,0.1); color: #86efac; border: 1px solid rgba(34,197,94,0.25); }
.ns-pill--progress { background: rgba(234,179,8,0.1); color: #fbbf24; border: 1px solid rgba(234,179,8,0.25); }
.ns-pill--new      { background: rgba(6,182,212,0.15); color: #67e8f9; border: 1px solid rgba(6,182,212,0.3); }

/* Screen 4: CRM */
.ns-crm-card { display: flex; flex-direction: column; height: calc(100% - 40px); }
.ns-crm-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: #151a28;
  border-bottom: 1px solid var(--border);
}
.ns-crm-card__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
  font-family: var(--font-display);
}
.ns-crm-card__info { flex: 1; }
.ns-crm-card__name { font-size: 0.9rem; font-weight: 700; }
.ns-crm-card__sub  { font-size: 0.65rem; color: var(--text-muted); margin-top: 1px; }
.ns-crm-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.67rem;
  font-weight: 600;
  background: rgba(6,182,212,0.15);
  border: 1px solid rgba(6,182,212,0.3);
  color: #67e8f9;
  transition: opacity 0.4s ease;
}
.ns-crm-fields { padding: 8px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ns-crm-field {
  display: flex;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 0.75rem;
  background: rgba(255,255,255,0.015);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ns-crm-field--hidden { opacity: 0; transform: translateX(-8px); }
.ns-crm-field.ns-crm-visible { opacity: 1; transform: translateX(0); }
.ns-crm-field span:first-child { color: var(--text-muted); min-width: 75px; flex-shrink: 0; }
.ns-crm-field span:last-child  { color: var(--text-primary); }

/* Responsive notificaciones */
@media (max-width: 768px) {
  .notif-full { grid-template-columns: 1fr; }
  .notif-stage-col { border-right: none; border-bottom: 1px solid var(--border); padding: 20px; }
  .notif-desc-col { padding: 20px; }
  .ns-sheet-row { grid-template-columns: 1fr 1fr; }
  .ns-sheet-row span:nth-child(3) { display: none; }
}


/* ================================================================
 * EXTENSIONES DEL REDISENO 2.0
 * Componentes nuevos: trust band, tweaks panel, fancy reveals.
 * ================================================================ */

/* ---- Auto-tabs scroll container so they don't wrap into 2 lines ---- */
@media (max-width: 1100px) {
  .auto-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: thin;
  }
}

/* ---- Trust band (logos/tecnologias) ---- */
.trust-band {
  padding: 56px 0 28px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-band__inner {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
  justify-content: center;
}
.trust-band__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.trust-band__label::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--border-strong);
}
.trust-band__items {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.trust-band__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0.65;
  transition: var(--t);
  letter-spacing: -0.015em;
}
.trust-band__item:hover { opacity: 1; color: var(--text-primary); }
.trust-band__item .logo-mark {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  font-size: 0.85rem;
}

/* ---- Section eyebrow numbering ---- */
.section__num {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ---- Reveal variants (mas potentes) ---- */
.reveal--stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ts), transform 0.6s var(--ts);
}
.reveal--stagger.visible > * { opacity: 1; transform: translateY(0); }
.reveal--stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal--stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal--stagger.visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal--stagger.visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal--stagger.visible > *:nth-child(5) { transition-delay: 0.33s; }
.reveal--stagger.visible > *:nth-child(6) { transition-delay: 0.4s; }

/* ---- Tweaks Panel (floating bottom-right) ---- */
.tweaks-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 280px;
  background: rgba(14, 14, 28, 0.92);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  font-family: var(--font-main);
}
.tweaks-panel.is-open { display: block; animation: tweaksIn 0.3s var(--ts) forwards; }
@keyframes tweaksIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tweaks-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.tweaks-panel__title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.tweaks-panel__close {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 1rem;
  transition: var(--t);
}
.tweaks-panel__close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.tweak-group { margin-bottom: 16px; }
.tweak-group:last-child { margin-bottom: 0; }
.tweak-group__label {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tweak-swatches { display: flex; gap: 8px; }
.tweak-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  cursor: pointer;
  transition: var(--t);
  position: relative;
}
.tweak-swatch:hover { transform: scale(1.1); }
.tweak-swatch.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
.tweak-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}
.tweak-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.tweak-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}
.tweak-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
}
.tweak-toggle button {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: transparent;
  font-family: var(--font-main);
  transition: var(--t);
}
.tweak-toggle button.is-active {
  background: var(--gradient);
  color: #fff;
}

/* Tweaks open button (always visible) */
.tweaks-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 199;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: var(--text-primary);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5);
  transition: var(--t);
  font-size: 1.1rem;
}
.tweaks-fab:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}
.tweaks-panel.is-open ~ .tweaks-fab,
.tweaks-fab.is-hidden { display: none; }

/* ---- Back to top: aparece tras hacer scroll ---- */
.back-to-top {
  position: fixed;
  bottom: 84px;              /* arriba del tweaks-fab (24px + 48px + 12px gap) */
  right: 24px;
  z-index: 199;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.32s var(--t), transform 0.32s var(--t),
              border-color var(--t), background var(--t), color var(--t),
              box-shadow var(--t);
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  color: var(--accent);
  box-shadow: 0 14px 38px -10px var(--accent-glow);
  transform: translateY(-2px) scale(1);
}
.back-to-top:active { transform: translateY(0) scale(0.96); }
@media (max-width: 640px) {
  .back-to-top { bottom: 78px; right: 18px; width: 44px; height: 44px; }
}

/* ---- Section separators with subtle lines ---- */
.section-divider {
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: 0;
}

/* ---- Hero CTA shimmer arrow ---- */
.cta-arrow {
  display: inline-block;
  transition: transform var(--t);
}
.btn:hover .cta-arrow { transform: translateX(3px); }

/* ---- Refine reveal default for richer entrance ---- */
.reveal {
  transition-delay: 0s;
}

/* ---- Density variable applied to sections ---- */
.section { padding: calc(var(--section-py) * var(--density, 1)) 0; }

/* ---- Browser preview frame variant on hero image card ---- */
.hero__visual::after {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}

/* ---- Subtle dotted background under reportes/notifs panels ---- */
.auto-demo > .auto-panel.is-active {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0);
  background-size: 24px 24px;
}
.auto-panel .panel-title { background-image: none; }

/* ---- Responsive small tweaks ---- */
@media (max-width: 760px) {
  .hero__container { padding-top: 110px; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3.4rem); }
  .hero__stats { gap: 20px; padding: 16px 22px; }
  .stat__number { font-size: 1.3rem; }
  .stat__divider { height: 24px; }
  .section__header { margin-bottom: 48px; }
  .ejemplos__grid { grid-template-columns: 1fr 1fr; }
  .contact__wrapper { padding: 32px 24px; }
  .trust-band__inner { gap: 28px; }
  .trust-band__items { gap: 22px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .tweaks-panel { width: calc(100vw - 32px); right: 16px; bottom: 16px; }
}
@media (max-width: 480px) {
  .ejemplos__grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__marquee { margin-top: 24px; }
  .marquee-item { font-size: 1rem; }
}


/* ================================================================
 * REDISENO 3.0 — Backgrounds innovadores + Automatizaciones rediseñadas
 * ================================================================ */

/* ---- Canvas background (red de partículas global) ---- */
.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}
.hero, .section, .footer, .trust-band { position: relative; }
.hero > *, .section > *, .footer > *, .trust-band > * { position: relative; z-index: 1; }
/* El .nav se queda con sus propios position:fixed y z-index altos (definidos arriba) — NO lo
   incluimos en la regla anterior porque eso lo bajaba a z-index:1 y el menú hamburger
   terminaba siendo tapado por elementos del hero. */

/* ---- Mesh gradient animado (SVG blobs morfeando) ---- */
.mesh-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.mesh-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  mix-blend-mode: screen;
  animation: blobMorph 18s ease-in-out infinite;
}
.mesh-bg__blob--1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  top: -120px; left: 10%;
  animation-duration: 22s;
}
.mesh-bg__blob--2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(20,184,166,0.4), transparent 70%);
  bottom: -100px; right: 8%;
  animation-duration: 26s;
  animation-direction: reverse;
}
.mesh-bg__blob--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(80,170,255,0.3), transparent 70%);
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 30s;
}
@keyframes blobMorph {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 50%;
  }
  33% {
    transform: translate(60px, -40px) scale(1.15) rotate(120deg);
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
  }
  66% {
    transform: translate(-40px, 60px) scale(0.9) rotate(240deg);
    border-radius: 40% 60% 70% 30% / 60% 30% 70% 40%;
  }
}

/* ---- Hero visual: tarjetas 3D adicionales flotando ---- */
.hero__cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}
.hero__card-float {
  position: absolute;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(20,20,40,0.92), rgba(8,8,20,0.92));
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.7);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__card-float i {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--gradient);
  display: grid; place-items: center;
  font-size: 0.8rem;
  color: #fff;
  font-style: normal;
}
.hero__card-float--top {
  top: -8px;
  right: -20px;
  animation: floatA 6s ease-in-out infinite;
}
.hero__card-float--bottom {
  bottom: 10px;
  left: -36px;
  animation: floatB 7s ease-in-out infinite;
}
@keyframes floatA {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(10px) rotate(-3deg); }
}

/* ---- AUTOMATIZACIONES REDISEÑO ---- */
/* Layout: sidebar vertical de tabs + escenario inmersivo */
.auto-shell {
  /* Layout single-column ahora — los tabs viven integrados al chrome
     del browser (auto-stage__chrome), no en una sidebar separada. */
  display: block;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 30%), var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.auto-shell::before {
  /* Spotlight detrás del panel activo */
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  opacity: 0.7;
}

.auto-tabs--side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  height: fit-content;
  position: relative;
  z-index: 1;
}
.auto-tabs--side .auto-tabs-header {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 14px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.auto-tabs--side .auto-tabs-header::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #50e3a4;
  box-shadow: 0 0 8px #50e3a4;
}
.auto-tabs--side .auto-tab {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  transition: var(--t);
  white-space: normal;
  letter-spacing: -0.005em;
}
.auto-tabs--side .auto-tab::before {
  /* Indicator dot */
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
  transition: var(--t);
}
.auto-tabs--side .auto-tab:hover {
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
}
.auto-tabs--side .auto-tab:hover::before { background: var(--text-secondary); }
.auto-tabs--side .auto-tab.is-active {
  background: var(--accent-soft);
  color: #fff;
  border: 1px solid var(--border-accent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px -4px var(--accent-glow);
}
.auto-tabs--side .auto-tab.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.auto-tab__num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-left: auto;
}
.auto-tabs--side .auto-tab.is-active .auto-tab__num { color: #c4b8ff; }

/* Stage / panel inmersivo */
.auto-stage {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0),
    linear-gradient(180deg, #0a0a16, #06060e);
  background-size: 28px 28px, auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-height: 540px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.auto-stage::before {
  /* Inner glow */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, var(--accent-soft), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.auto-stage > * { position: relative; z-index: 1; }

/* Chrome del browser: tabs row (arriba) + address bar (abajo) */
.auto-stage__chrome {
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.auto-stage__tabs-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 12px 22px 0;
}
.auto-stage__addressbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 28px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.auto-stage__dots {
  display: flex;
  gap: 6px;
  padding-bottom: 10px; /* alinea con la base de los tabs */
}
.auto-stage__dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #3a3a55;
}
.auto-stage__dots i:nth-child(1) { background: #ff5f57; }
.auto-stage__dots i:nth-child(2) { background: #febc2e; }
.auto-stage__dots i:nth-child(3) { background: #28c840; }

/* Tabs estilo browser-chrome dentro del header del demo */
.auto-tabs--chrome {
  display: flex;
  flex: 1;
  gap: 2px;
  margin-bottom: -1px; /* solapa con el border-bottom del chrome para el "connected" feel */
}
.auto-tabs--chrome .auto-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 11px;
  border: 1px solid transparent;
  border-bottom-color: transparent;
  border-radius: 9px 9px 0 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font-body);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--t);
  position: relative;
}
.auto-tabs--chrome .auto-tab__icon {
  font-size: 0.95rem;
  line-height: 1;
}
.auto-tabs--chrome .auto-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}
.auto-tabs--chrome .auto-tab.is-active {
  background: rgba(6, 182, 212, 0.08);
  color: var(--text-primary);
  border-color: var(--border-accent);
  border-bottom-color: transparent;
  box-shadow: 0 -1px 0 var(--border-accent) inset, 0 0 20px -6px var(--accent-glow);
}
.auto-tabs--chrome .auto-tab.is-active::after {
  /* Línea fina de color sobre el borde inferior del chrome */
  content: '';
  position: absolute;
  left: -1px; right: -1px; bottom: -1px;
  height: 1px;
  background: rgba(6, 182, 212, 0.08);
}

.auto-stage__title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.auto-stage__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(80, 227, 164, 0.1);
  border: 1px solid rgba(80, 227, 164, 0.3);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: #50e3a4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.auto-stage__live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #50e3a4;
  animation: softPulse 2s ease-in-out infinite;
}

/* Responsive: en tablet y mobile, dots arriba + tabs en grid prolijo
   (en desktop ≥1100px, dots y tabs comparten una sola línea como un browser real) */
@media (max-width: 1100px) {
  .auto-stage__tabs-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px 12px;
  }
  .auto-stage__dots {
    padding-bottom: 0;
    padding-top: 2px;
  }
  /* Las tabs pasan de fila flex a una grilla simétrica */
  .auto-tabs--chrome {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0;
    width: 100%;
  }
  .auto-tabs--chrome .auto-tab {
    min-width: 0;          /* permite que el grid achique la celda — fix overflow */
    justify-content: center;
    text-align: center;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .auto-tabs--chrome .auto-tab.is-active {
    border-color: var(--border-accent);
    background: rgba(6, 182, 212, 0.10);
    box-shadow: 0 0 22px -8px var(--accent-glow);
  }
  /* En grid no necesitamos la línea inferior de "conexión con el chrome" */
  .auto-tabs--chrome .auto-tab.is-active::after { display: none; }
}

@media (max-width: 540px) {
  .auto-stage__tabs-row { padding: 12px 12px 12px; }
  .auto-tabs--chrome {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .auto-tabs--chrome .auto-tab {
    padding: 10px 6px;
    font-size: 0.76rem;
    gap: 5px;
    letter-spacing: -0.01em;
  }
  .auto-tabs--chrome .auto-tab__icon { font-size: 0.88rem; }
  .auto-stage__addressbar { padding: 9px 14px; gap: 10px; }
  .auto-stage__title { font-size: 0.72rem; }
}

.auto-stage__body {
  flex: 1;
  padding: 0;
  overflow: hidden;
}

/* Override existing auto-demo to integrate into the stage */
.auto-stage .auto-demo {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: auto;
  height: 100%;
}
.auto-stage .panel-title {
  background: transparent;
  border-bottom-color: var(--border);
  font-family: var(--font-display);
}

/* Responsive: sidebar collapses to scrollable horizontal pill bar on small screens */
@media (max-width: 920px) {
  .auto-shell {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .auto-tabs--side {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    gap: 4px;
  }
  .auto-tabs--side .auto-tabs-header { display: none; }
  .auto-tabs--side .auto-tab {
    flex-shrink: 0;
    width: auto;
    padding: 10px 16px;
    font-size: 0.82rem;
  }
  .auto-tab__num { display: none; }
  .auto-stage { min-height: 460px; }
}

/* ---- Section ambient backgrounds (gradient mesh per section) ---- */
.section--mesh {
  position: relative;
  overflow: hidden;
}
.section--mesh > .container { position: relative; z-index: 2; }

/* ---- Scroll-driven parallax accent strips ---- */
.parallax-strip {
  position: absolute;
  font-family: var(--font-mono);
  font-size: clamp(6rem, 18vw, 16rem);
  font-weight: 700;
  color: rgba(255,255,255,0.018);
  letter-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
}
.parallax-strip--left { left: -2vw; }
.parallax-strip--right { right: -2vw; }

/* ---- Code rain (for automatizaciones bg flavor) ---- */
.code-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.06;
  z-index: 0;
}
.code-rain__col {
  position: absolute;
  top: -50%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  line-height: 1.4;
  animation: codeFall linear infinite;
  white-space: pre;
}
@keyframes codeFall {
  to { transform: translateY(180vh); }
}


/* ================================================================
 * REDISENO PANELES DE AUTOMATIZACION
 * ================================================================ */

/* ---- FIX: Comparar archivos — stack vertical de archivos A/B ---- */
#panel-archivos .arch-files {
  grid-template-columns: 1fr;
  gap: 14px;
}
#panel-archivos .arch-file {
  position: relative;
}
#panel-archivos .arch-file__head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
#panel-archivos .arch-file__head > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
#panel-archivos .arch-file__name {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel-archivos .arch-file__meta {
  font-size: 0.72rem;
  margin-top: 2px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
#panel-archivos .arch-file__icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  font-size: 1.15rem;
}
#panel-archivos .arch-file__badge {
  width: 28px; height: 28px;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}
#panel-archivos .arch-file__rows {
  padding: 12px;
  min-height: 80px;
}
/* Connector "VS" entre los dos archivos */
#panel-archivos .arch-files {
  position: relative;
}
#panel-archivos .arch-files::after {
  content: 'vs';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 12px;
  z-index: 2;
  text-transform: uppercase;
  pointer-events: none;
}
/* demo-center vuelve a stack vertical en archivos para que la descripción quede abajo */
#panel-archivos .demo-center {
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 24px;
}
#panel-archivos .archivos-demo { padding-right: 0; }

/* ---- REDISENO: Pedidos (panel-pedidos) ---- */
/* Convertir el listado lineal en un timeline cinematico con conectores ---- */
#panel-pedidos .demo-center {
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  padding: 28px;
  align-items: start;
}
#panel-pedidos .pedido-card {
  background:
    linear-gradient(135deg, rgba(6,182,212,0.08), transparent 60%),
    rgba(0,0,0,0.4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
#panel-pedidos .pedido-card::before {
  /* Subtle scanline overlay */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 3px);
  pointer-events: none;
}
#panel-pedidos .pedido-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
#panel-pedidos .pedido-card__info {
  display: flex;
  align-items: center;
  gap: 14px;
}
#panel-pedidos .pedido-card__info > span:first-child {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--gradient);
  box-shadow: 0 8px 24px -6px var(--accent-glow);
  font-size: 1.25rem;
}
#panel-pedidos .pedido-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
#panel-pedidos .pedido-card__time {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}
#panel-pedidos .pedido-badge {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#panel-pedidos .pedido-badge--pending {
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.35);
  color: #fbbf24;
}
#panel-pedidos .pedido-badge--done {
  background: rgba(80,227,164,0.12);
  border: 1px solid rgba(80,227,164,0.4);
  color: #50e3a4;
}
#panel-pedidos .pedido-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.025);
  border-radius: var(--r-sm);
  margin-bottom: 10px;
}
#panel-pedidos .pedido-item > span:first-child {
  font-size: 1.4rem;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}
#panel-pedidos .pedido-item__name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
#panel-pedidos .pedido-item__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
#panel-pedidos .pedido-client {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: rgba(0,0,0,0.25);
  border-radius: var(--r-sm);
}
/* Timeline reediseñado */
#panel-pedidos .pedido-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#panel-pedidos .pedido-steps::before {
  /* Vertical timeline spine */
  content: '';
  position: absolute;
  left: 19px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, var(--border) 0%, var(--border) 100%);
}
#panel-pedidos .p-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  position: relative;
  z-index: 1;
  opacity: 0.45;
  transition: opacity 0.4s ease;
}
#panel-pedidos .p-step.p-step--done {
  opacity: 1;
}
#panel-pedidos .p-step__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-strong);
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}
#panel-pedidos .p-step.p-step--active .p-step__icon {
  background: var(--gradient);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft), 0 8px 20px -4px var(--accent-glow);
  animation: pulseRing 1.6s ease-in-out infinite;
}
#panel-pedidos .p-step.p-step--done .p-step__icon {
  background: rgba(80,227,164,0.18);
  border-color: rgba(80,227,164,0.6);
  color: #50e3a4;
}
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 6px var(--accent-soft), 0 8px 20px -4px var(--accent-glow); }
  50%      { box-shadow: 0 0 0 12px rgba(6,182,212,0.04), 0 8px 20px -4px var(--accent-glow); }
}
#panel-pedidos .p-step__text {
  font-size: 0.92rem;
  color: var(--text-secondary);
}
#panel-pedidos .p-step.p-step--done .p-step__text,
#panel-pedidos .p-step.p-step--active .p-step__text {
  color: var(--text-primary);
}
#panel-pedidos #runPedido {
  margin-top: 18px;
}

/* ---- REDISENO: Email auto (panel-email) ---- */
#panel-email .demo-center {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}
#panel-email .email-left {
  padding: 28px;
  border-right: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
}
#panel-email .email-form__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#panel-email .email-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: all 0.3s ease;
  position: relative;
}
#panel-email .email-field.ef--filling,
#panel-email .email-field.ef--filled {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(6,182,212,0.08);
}
#panel-email .ef-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
#panel-email .ef-value {
  font-size: 0.95rem;
  color: var(--text-primary);
  min-height: 1.2em;
  font-family: var(--font-main);
}
#panel-email .email-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  align-items: center;
}
#panel-email .email-status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #50e3a4;
}
#panel-email .email-preview-wrapper {
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}
#panel-email .email-preview {
  background: linear-gradient(180deg, #f8f7fa 0%, #ffffff 100%);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.1) inset;
  position: relative;
  color: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.1);
  min-height: 380px;
  display: flex;
  flex-direction: column;
}
#panel-email .email-preview::before {
  /* Paper envelope corner fold */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40px; height: 40px;
  background: linear-gradient(225deg, rgba(0,0,0,0.05) 50%, transparent 50%);
}
#panel-email .email-preview__header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.025);
}
#panel-email .ep-row {
  display: flex;
  gap: 10px;
  font-size: 0.82rem;
  padding: 3px 0;
  color: #404060;
}
#panel-email .ep-label {
  font-weight: 600;
  min-width: 56px;
  color: #6b6b8c;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}
#panel-email .email-preview__body {
  padding: 26px 22px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #2a2a40;
  flex: 1;
  overflow-y: auto;
}
#panel-email .email-preview__body p {
  margin-bottom: 14px;
}
#panel-email .ep-placeholder {
  color: #999;
  font-style: italic;
  text-align: center;
  padding-top: 60px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Connector animado entre el form y el preview */
#panel-email .email-preview-wrapper::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  width: 28px;
  height: 2px;
  background: var(--gradient);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s;
  border-radius: 2px;
  box-shadow: 0 0 12px var(--accent-glow);
}
#panel-email.is-sending .email-preview-wrapper::before {
  opacity: 1;
  animation: connectorPulse 1.5s ease-in-out infinite;
}
@keyframes connectorPulse {
  0%, 100% { width: 28px; }
  50%      { width: 48px; }
}

/* ---- REFINAMIENTO: Reportes (mejor visual de KPIs y chart) ---- */
#panel-reportes .demo-center {
  padding: 28px;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
}
#panel-reportes .report-demo {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 50%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
#panel-reportes .report-demo::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
#panel-reportes .report-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 600;
}
#panel-reportes .report-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
#panel-reportes .kpi-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 12px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
#panel-reportes .kpi-card.is-active {
  border-color: var(--border-accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(6,182,212,0.04), 0 4px 14px -4px var(--accent-glow);
}
#panel-reportes .kpi-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-family: var(--font-mono);
}
#panel-reportes .kpi-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
#panel-reportes .kpi-trend {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  font-family: var(--font-mono);
}
#panel-reportes .kpi-trend--up   { color: #50e3a4; }
#panel-reportes .kpi-trend--down { color: #ff6b8b; }

/* Chart bars con glow */
#panel-reportes .chart-bar {
  position: relative;
  overflow: hidden;
}
#panel-reportes .chart-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: barShimmer 3s ease-in-out infinite;
}
@keyframes barShimmer {
  to { transform: translateX(200%); }
}

/* ---- RESPONSIVE: si el panel queda muy angosto, todo apila ---- */
@media (max-width: 1100px) {
  #panel-pedidos .demo-center,
  #panel-email .demo-center,
  #panel-reportes .demo-center {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #panel-email .email-left { border-right: none; border-bottom: 1px solid var(--border); }
  #panel-reportes .report-kpis { grid-template-columns: repeat(2, 1fr); }
}


/* ================================================================
 * FIX v4.1 — Ajustes según feedback usuario
 * ================================================================ */

/* ---- REPORTES: stack vertical con divisor horizontal y KPIs en 2x2 ---- */
#panel-reportes .demo-center {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
}
#panel-reportes .report-demo {
  margin: 28px;
  margin-bottom: 0;
}
#panel-reportes .report-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
#panel-reportes .kpi-card {
  padding: 16px;
  min-width: 0;
}
#panel-reportes .kpi-value {
  font-size: 1.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel-reportes .kpi-trend {
  font-size: 0.68rem;
  white-space: nowrap;
}
#panel-reportes .demo-desc {
  margin: 28px;
  margin-top: 0;
  padding: 24px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: var(--r);
  border-top: 1px dashed var(--border-strong);
  position: relative;
}
#panel-reportes .demo-desc::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* En anchos pequeños, KPIs a 2x2 */
@media (max-width: 1100px) {
  #panel-reportes .report-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- PEDIDOS: arreglar línea vertical (alineación con iconos) ---- */
#panel-pedidos .pedido-steps {
  padding-left: 0;
  position: relative;
}
#panel-pedidos .pedido-steps::before {
  /* Línea exactamente al centro del icono (icono w=40px → centro a 20px) */
  left: 19px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: linear-gradient(180deg, var(--border-strong) 0%, var(--border) 50%, var(--border-strong) 100%);
}
#panel-pedidos .p-step {
  padding: 10px 0;
}
/* Cuando el step está done, su segmento de spine también marca verde */
#panel-pedidos .p-step.p-step--done .p-step__icon {
  background: rgba(80,227,164,0.18);
  border-color: rgba(80,227,164,0.5);
  color: #50e3a4;
}
/* Stack en mobile / si demo-center está en 1fr */
#panel-pedidos .demo-center {
  grid-template-columns: 1.4fr 1fr !important;
  gap: 32px !important;
  padding: 28px !important;
}
#panel-pedidos .demo-desc {
  padding: 24px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: var(--r);
  align-self: start;
}

/* ---- EMAIL: labels a la izquierda + preview en tema oscuro ---- */
#panel-email .email-field {
  flex-direction: row !important;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
#panel-email .ef-label {
  flex-shrink: 0;
  min-width: 80px;
  text-align: left;
}
#panel-email .ef-value {
  flex: 1;
  font-size: 0.92rem;
}

/* Preview oscuro on-brand */
#panel-email .email-preview {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 50px -10px rgba(0,0,0,0.7),
    0 0 0 1px var(--border);
}
#panel-email .email-preview::before {
  background: linear-gradient(225deg, rgba(6,182,212,0.15) 50%, transparent 50%);
}
#panel-email .email-preview__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.3);
}
#panel-email .ep-row {
  color: var(--text-secondary);
}
#panel-email .ep-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
}
#panel-email .email-preview__body {
  padding: 28px 24px;
  color: var(--text-primary);
  background: transparent;
}
#panel-email .email-preview__body p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
}
#panel-email .email-preview__body strong {
  color: var(--text-primary);
  font-weight: 600;
}
#panel-email .ep-placeholder {
  color: var(--text-muted);
}

/* ---- COMPARAR ARCHIVOS: divisor horizontal entre demo y "cómo funciona" ---- */
#panel-archivos .demo-center {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  position: relative;
}
#panel-archivos .archivos-demo {
  padding: 28px;
  padding-bottom: 0;
}
#panel-archivos .demo-desc {
  margin: 0 28px 28px;
  padding: 24px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: var(--r);
  border-top: 1px dashed var(--border-strong);
  position: relative;
  margin-top: 24px;
}
#panel-archivos .demo-desc::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* Botones de acción de archivos van dentro del archivos-demo */
#panel-archivos .arch-actions {
  padding: 0;
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}


/* ---- KILL old vertical divider en paneles stack-vertical ---- */
#panel-reportes .demo-center::after,
#panel-archivos .demo-center::after {
  display: none !important;
}
/* También quitamos los márgenes/paddings que centraban contra esa línea inexistente */
#panel-reportes .report-demo { margin-right: 28px; margin-left: 28px; }


/* ---- Kill vertical divider en TODOS los paneles, ahora todos van en stack vertical ---- */
#panel-pedidos .demo-center::after { display: none !important; }

/* Pedidos: stack vertical con divisor horizontal */
#panel-pedidos .demo-center {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
}
#panel-pedidos .pedido-left {
  padding: 28px !important;
  padding-bottom: 0 !important;
  margin-right: 0 !important;
}
#panel-pedidos .demo-desc {
  margin: 24px 28px 28px;
  padding: 24px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: var(--r);
  border-top: 1px dashed var(--border-strong);
  position: relative;
}
#panel-pedidos .demo-desc::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}




/* ================================================================
 * EMAIL PANEL — Fix de inner box y paddings
 * ================================================================ */

/* Quitar el "form box" interno: el form ahora es solo un wrapper */
#panel-email .email-form {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#panel-email .email-form__title {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 0 16px 0 !important;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Email left column: ya tiene padding 28px del panel anterior — agregamos respiro */
#panel-email .email-left {
  padding: 32px !important;
  padding-right: 32px !important;
  background: rgba(0,0,0,0.18);
  border-right: 1px solid var(--border) !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Email fields: pills más cómodos con padding interno mayor */
#panel-email .email-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 18px !important;
  margin-bottom: 0;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  min-height: 52px;
  width: 100%;
  transition: all 0.3s ease;
}
#panel-email .email-field.ef--filling,
#panel-email .email-field.ef--filled {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(6,182,212,0.06);
}

#panel-email .ef-label {
  flex-shrink: 0;
  min-width: 78px;
  text-align: left;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
#panel-email .ef-value {
  flex: 1;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-family: var(--font-main);
  min-height: 1.2em;
}

/* Email actions row */
#panel-email .email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  align-items: center;
}

/* Email preview wrapper: respiro a la derecha */
#panel-email .email-preview-wrapper {
  padding: 32px !important;
  padding-left: 32px !important;
  display: flex;
  flex-direction: column;
}

/* Mobile / narrow: stack vertical con divisor horizontal */
@media (max-width: 1100px) {
  #panel-email .email-left {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
}


/* ================================================================
 * Divisores horizontales edge-to-edge en paneles stack-vertical
 * ================================================================ */

#panel-reportes .demo-desc,
#panel-pedidos  .demo-desc,
#panel-archivos .demo-desc {
  margin: 0 !important;
  padding: 32px !important;
  background: rgba(0,0,0,0.3) !important;
  border: none !important;
  border-top: 1px solid var(--border-strong) !important;
  border-radius: 0 !important;
  position: relative;
}

/* Línea de acento centrada arriba del divisor */
#panel-reportes .demo-desc::before,
#panel-pedidos  .demo-desc::before,
#panel-archivos .demo-desc::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Quitar bordes laterales/inferior decorativos de los contenedores demo cuando van en stack */
#panel-reportes .report-demo,
#panel-archivos .archivos-demo,
#panel-pedidos  .pedido-left {
  margin: 0 !important;
  padding: 32px !important;
  padding-bottom: 32px !important;
}

/* Pedidos: el spine de los steps vuelve a alinearse y no recibe padding extra */
#panel-pedidos .pedido-left {
  padding: 32px !important;
}


/* ================================================================
 * REPORTES: el dashboard tiene margen visible respecto al container
 * ================================================================ */
#panel-reportes .report-demo {
  margin: 32px !important;
  padding: 28px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    rgba(8, 8, 18, 0.55) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 40px -16px rgba(0,0,0,0.5);
}


/* ================================================================
 * EMAIL — kill vertical divider entre form y preview
 * ================================================================ */
#panel-email .email-left {
  border-right: none !important;
}
#panel-email .demo-center::after {
  display: none !important;
}


/* ================================================================
 * EMAIL — formulario con container border igual que el preview
 * ================================================================ */
#panel-email .email-form {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    rgba(8, 8, 18, 0.55) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 28px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 40px -16px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden !important;
}
#panel-email .email-form::before { content: none; }
#panel-email .email-form__title {
  border-bottom: 1px solid var(--border) !important;
  padding: 0 0 16px !important;
  margin-bottom: 18px !important;
}
#panel-email .email-left {
  background: transparent !important;
  padding: 32px !important;
}


/* ================================================================
 * EMAIL — polish final: vertical divider + preview discreto + buttons
 * ================================================================ */

/* Vertical divider entre las 2 columnas del panel */
#panel-email .demo-center {
  position: relative;
}
#panel-email .demo-center::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 1px !important;
  background: var(--border-strong) !important;
  pointer-events: none !important;
}

/* Email preview con fondo más discreto */
#panel-email .email-preview {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 30%),
    rgba(8, 8, 18, 0.55) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 18px 40px -16px rgba(0,0,0,0.5) !important;
}
#panel-email .email-preview::before {
  /* Doblez de esquina mucho más sutil */
  background: linear-gradient(225deg, rgba(6,182,212,0.08) 50%, transparent 50%) !important;
}
#panel-email .email-preview__header {
  background: rgba(0,0,0,0.18) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Botones inferiores: sin caja interna, alineados al borde inferior del form */
#panel-email .email-actions {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  padding: 20px 0 0 !important;
  margin-top: 8px !important;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
/* Status mensaje (n8n procesando, enviado) */
#panel-email .email-status {
  margin-left: auto;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
#panel-email .email-status--processing { color: #fbbf24; }
#panel-email .email-status--sent { color: #50e3a4; }


/* ================================================================
 * Unificar fondos de Turnos Web, Notificaciones y Archivos al de Reportes
 * ================================================================ */

/* Turnos Web — phone/booking card */
#panel-whatsapp .web-booking {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    rgba(8, 8, 18, 0.55) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 40px -16px rgba(0,0,0,0.5) !important;
}
#panel-whatsapp .wb-body {
  background: transparent !important;
}
#panel-whatsapp .wb-footer-bar {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
}
#panel-whatsapp .wb-topbar {
  background: rgba(0,0,0,0.25) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Notificaciones — stage column + screens */
#panel-notifs .notif-full {
  background: transparent !important;
}
#panel-notifs .notif-stage-col {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    rgba(8, 8, 18, 0.55) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  margin: 28px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 40px -16px rgba(0,0,0,0.5) !important;
}
#panel-notifs .notif-desc-col {
  margin: 0 28px 28px 28px !important;
}

/* Comparar archivos — file cards */
#panel-archivos .arch-file {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    rgba(8, 8, 18, 0.55) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 40px -16px rgba(0,0,0,0.5) !important;
}


/* ================================================================
 * REPORTES — header bar "Dashboard Semanal" más claro
 * ================================================================ */
#panel-reportes .report-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-sm) !important;
  padding: 14px 18px !important;
  margin-bottom: 22px !important;
}


/* ================================================================
 * NOTIFICACIONES — fondo de los screens igual al de Reportes
 * ================================================================ */
#panel-notifs .notif-screen {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
    rgba(8, 8, 18, 0.55) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 40px -16px rgba(0,0,0,0.5);
}


/* ================================================================
 * NOTIFICACIONES — label header con estilo igual al topbar de Turnos Web
 * ================================================================ */
#panel-notifs .nscreen-label {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 12px 16px !important;
  background: rgba(0,0,0,0.25) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  font-family: var(--font-main) !important;
  position: relative !important;
}
#panel-notifs .nscreen-label::before {
  /* MacOS-style dots como en Turnos Web */
  content: '';
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow:
    18px 0 0 #febc2e,
    36px 0 0 #28c840;
  margin-right: 36px;
  flex-shrink: 0;
}


/* ================================================================
 * COMPARAR ARCHIVOS — head bar de cada archivo igual al topbar de Turnos Web
 * ================================================================ */
#panel-archivos .arch-file__head {
  background: rgba(0,0,0,0.25) !important;
  border-bottom: 1px solid var(--border) !important;
}


/* ================================================================
 * PEDIDOS — pedido card head con estilo report-header
 * ================================================================ */
#panel-pedidos .pedido-card__head {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-sm) !important;
  padding: 14px 18px !important;
  margin-bottom: 18px !important;
}


/* ================================================================
 * NOTIFICACIONES — stack vertical con divisor horizontal abajo
 * ================================================================ */
#panel-notifs .notif-full {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
}
#panel-notifs .notif-stage-col {
  border-right: none !important;
}
#panel-notifs .notif-desc-col {
  margin: 0 !important;
  padding: 32px !important;
  background: rgba(0,0,0,0.3) !important;
  border: none !important;
  border-top: 1px solid var(--border-strong) !important;
  position: relative;
}
#panel-notifs .notif-desc-col::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px var(--accent-glow);
}
#panel-notifs .notif-desc-col h4 {
  display: inline-block;
  margin-right: 24px;
}


/* ================================================================
 * NOTIFICACIONES — quitar tonos gris-topo (#151a28, #111725) en pantallas
 * ================================================================ */
#panel-notifs .ns-ec-toolbar,
#panel-notifs .ns-ec-footer,
#panel-notifs .ns-sheets-tab,
#panel-notifs .ns-wsp-mini__header,
#panel-notifs .ns-crm-card__header {
  background: rgba(0,0,0,0.25) !important;
  border-bottom: 1px solid var(--border) !important;
}
#panel-notifs .ns-ec-footer {
  border-top: 1px solid var(--border) !important;
  border-bottom: none !important;
}


/* ================================================================
 * MOBILE RESPONSIVE — Mejoras integrales (≤768px y ≤480px)
 * Sobrescribe los layouts que estaban forzados con !important para
 * que todas las secciones queden usables y estéticas en celular.
 * ================================================================ */

/* ----- Anti-overflow lateral ----- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .hero, .section, .footer, .auto-shell { overflow-x: hidden; }
  .parallax-strip { display: none; }
  :root { --container-px: 20px; }
}

/* ----- NAV ----- */
@media (max-width: 768px) {
  .nav { padding: 0 16px; }
  .nav__container { height: 64px; }
  .nav__logo { font-size: 1.05rem; gap: 8px; }
  .logo__img { width: 30px; height: 30px; }
  .nav__links { top: 64px; }
  .footer__brand .logo__img { width: 34px; height: 34px; }
}

/* ----- HERO ----- */
@media (max-width: 768px) {
  .hero { min-height: auto; padding-bottom: 30px; }
  .hero__container {
    padding: 100px 20px 30px;
    gap: 36px;
  }
  .hero__title { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: 20px; }
  .hero__badge { margin-bottom: 18px; padding: 6px 14px 6px 8px; font-size: 0.66rem; }
  .hero__subtitle { font-size: 0.96rem; margin: 0 auto 28px; }
  .hero__actions { flex-direction: column; gap: 10px; margin-bottom: 36px; width: 100%; }
  .hero__actions .btn { width: 100%; padding: 14px 20px; }
  .hero__stats { gap: 14px; padding: 14px 18px; justify-content: space-around; width: 100%; max-width: 360px; margin: 0 auto; }
  .stat__number { font-size: 1.2rem; }
  .stat__label { font-size: 0.62rem; }

  .hero__visual { height: auto; min-height: 320px; padding: 10px 0 0; perspective: none; }
  .hero__mock { max-width: 100%; transform: none; animation: none; }
  .hero__mock-flow { padding: 18px 14px 20px; gap: 10px; }
  .hero__mock-bar { padding: 10px 12px; }
  .hero__mock-bar i { width: 9px; height: 9px; }
  .hero__mock-url { font-size: 0.62rem; margin-left: 8px; }
  .hmf-node { padding: 9px 11px; gap: 9px; font-size: 0.78rem; }
  .hmf-node__icon { width: 26px; height: 26px; font-size: 0.85rem; }
  .hmf-node__txt { font-size: 0.68rem; }
  .hmf-node__status { font-size: 0.6rem; }
  .hmf-connector { margin-left: 26px; height: 10px; }

  .hero__card-float { padding: 9px 11px; font-size: 0.62rem; gap: 7px; }
  .hero__card-float--top { top: -2px; right: 0; }
  .hero__card-float--bottom { bottom: 4px; left: 0; }
  .hero__visual::after { display: none; }
}

@media (max-width: 480px) {
  .hero__container { padding: 90px 16px 24px; gap: 28px; }
  .hero__title { font-size: clamp(1.85rem, 9vw, 2.4rem); }
  .hero__subtitle { font-size: 0.9rem; }
  .hero__visual { min-height: 280px; }
  .hero__cards { display: none; }
}

/* ----- MARQUEE ----- */
@media (max-width: 768px) {
  .hero__marquee { padding: 18px 0 22px; margin-top: 28px; --marquee-duration: 30s; }
  .hero__marquee::before, .hero__marquee::after { width: 60px; }
  .marquee-label { font-size: 0.6rem; margin-bottom: 10px; }
  .marquee-label::before, .marquee-label::after { width: 20px; margin: 0 8px 2px; }
  .marquee-item { font-size: 0.92rem; gap: 9px; }
  .marquee-item__tag { font-size: 0.58rem; }
  .marquee-track { gap: 32px; }
}

/* ----- TRUST BAND ----- */
@media (max-width: 768px) {
  .trust-band { padding: 32px 0 22px; }
  .trust-band__inner { gap: 18px; flex-direction: column; }
  .trust-band__label { font-size: 0.62rem; }
  .trust-band__label::after { display: none; }
  .trust-band__items { gap: 14px 22px; }
  .trust-band__item { font-size: 0.9rem; gap: 7px; opacity: 0.8; }
  .trust-band__item .logo-mark { width: 22px; height: 22px; font-size: 0.74rem; }
}

/* ----- SECTION HEADERS ----- */
@media (max-width: 768px) {
  .section__header { margin-bottom: 36px; }
  .section__tag { font-size: 0.62rem; padding: 5px 12px; margin-bottom: 14px; }
  .section__title { font-size: clamp(1.7rem, 6.5vw, 2.3rem); }
  .section__subtitle { font-size: 0.92rem; }
}

/* ----- SERVICIOS ----- */
@media (max-width: 768px) {
  .services__grid { gap: 18px; }
  .service-card { padding: 28px 22px; }
  .service-card__icon { width: 52px; height: 52px; margin-bottom: 22px; }
  .service-card__icon svg { width: 24px; height: 24px; }
  .service-card__title { font-size: 1.25rem; margin-bottom: 10px; }
  .service-card__desc { font-size: 0.9rem; margin-bottom: 22px; }
  .service-card__list { padding-top: 18px; gap: 11px; }
  .service-card__list li { font-size: 0.86rem; gap: 10px; }
}

/* ============================================================
 *  AUTOMATIZACIONES — shell + tabs + stage
 * ============================================================ */
@media (max-width: 768px) {
  .auto-shell { padding: 10px; border-radius: var(--r); gap: 14px; }
  .auto-tabs--side {
    padding: 6px;
    gap: 4px;
    border-radius: var(--r);
    /* Hint visual de que se puede scrollear */
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .auto-tabs--side .auto-tab {
    padding: 8px 12px;
    font-size: 0.76rem;
    gap: 7px;
  }
  .auto-tabs--side .auto-tab::before { width: 6px; height: 6px; }

  .auto-stage { min-height: 380px; border-radius: var(--r); }
  .auto-stage__head { padding: 12px 14px; gap: 8px; }
  .auto-stage__dots i { width: 8px; height: 8px; }
  .auto-stage__title { font-size: 0.66rem; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auto-stage__live { padding: 4px 9px; font-size: 0.58rem; gap: 5px; flex-shrink: 0; }

  .panel-title { padding: 14px 18px; font-size: 0.88rem; }
  .panel-title span { display: block; font-size: 0.74rem; margin-left: 0; margin-top: 4px; line-height: 1.4; }
}

@media (max-width: 480px) {
  .auto-tabs--side .auto-tab { padding: 7px 10px; font-size: 0.72rem; }
  .auto-stage__live { display: none; }
}

/* ============================================================
 *  TURNOS WEB (panel-whatsapp) — Flow ARRIBA + Widget ABAJO
 *  En mobile: flow n8n horizontal arriba (compacto, siempre
 *  visible) + widget full-width abajo (cómodo de usar).
 * ============================================================ */
@media (max-width: 768px) {
  /* Stack vertical pero con flow ARRIBA del widget */
  #panel-whatsapp .demo-split {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
    gap: 0 !important;
    min-height: 0;
    display: grid !important;
  }
  /* Flow va primero (orden invertido vía CSS grid order) */
  #panel-whatsapp .flow-wrapper {
    order: -1 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 14px 12px !important;
    background: rgba(0,0,0,0.22) !important;
    gap: 8px !important;
  }

  /* Label del flow */
  #panel-whatsapp .flow-label {
    font-size: 0.58rem !important;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 2px;
  }

  /* Chain en HORIZONTAL — pills compactos, scroll si no entran */
  #panel-whatsapp .flow-chain {
    flex-direction: row !important;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    overflow-x: visible;
  }

  /* Cada nodo: pill compacto con icon arriba + label corto debajo */
  #panel-whatsapp .flow-node {
    flex: 1 1 0 !important;
    flex-direction: column !important;
    padding: 6px 3px !important;
    gap: 2px !important;
    font-size: 0 !important; /* Esconde el texto largo del HTML */
    border-radius: 8px !important;
    text-align: center;
    min-width: 0;
    line-height: 1.1;
    transition: all 0.3s ease;
  }
  /* Restaurar tamaño del emoji (primer span) */
  #panel-whatsapp .flow-node > span:first-child {
    font-size: 0.95rem !important;
    line-height: 1;
  }
  /* Labels cortos por ID, vía ::after — más legible que el texto original */
  #fn0::after,
  #fn1::after,
  #fn2::after,
  #fn3::after,
  #fn4::after {
    display: block;
    font-size: 0.5rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-top: 1px;
    font-family: var(--font-mono);
  }
  #fn0::after { content: 'Form'; }
  #fn1::after { content: 'Verif'; }
  #fn2::after { content: 'Proc'; }
  #fn3::after { content: 'Email'; }
  #fn4::after { content: 'Cal'; }

  /* Estado activo: borde acento + label más claro + pulse glow */
  #panel-whatsapp .flow-node.is-active {
    background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(20,184,166,0.08)) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(6,182,212,0.08), 0 4px 12px -4px var(--accent-glow) !important;
    animation: flowNodePulse 1.6s ease-in-out infinite;
  }
  #panel-whatsapp .flow-node.is-active::after { color: #fff !important; font-weight: 700; }
  #panel-whatsapp .flow-node.is-done {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
  }
  #panel-whatsapp .flow-node.is-done::after   { color: #86efac !important; }
  @keyframes flowNodePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(6,182,212,0.08), 0 4px 12px -4px var(--accent-glow); }
    50%      { box-shadow: 0 0 0 6px rgba(6,182,212,0.04), 0 6px 18px -4px var(--accent-glow); }
  }

  /* Connectors horizontales (eran verticales) */
  #panel-whatsapp .flow-connector {
    flex: 0 0 auto !important;
    width: 10px !important;
    height: 2px !important;
    margin: 0 !important;
    align-self: center;
    border-radius: 1px;
  }

  /* "¿Cómo funciona?" se mueve abajo del widget, fuera del flow-wrapper */
  #panel-whatsapp .flow-wrapper .demo-desc {
    display: none !important;
  }

  /* WIDGET full-width abajo — cómodo, tamaños desktop-like */
  #panel-whatsapp .web-booking-wrapper {
    padding: 18px !important;
    border-right: none !important;
    border-bottom: none !important;
    align-items: center !important;
    overflow: visible;
  }
  #panel-whatsapp .web-booking {
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
  }

  /* Topbar normal */
  #panel-whatsapp .wb-topbar { padding: 8px 12px !important; gap: 5px; }
  #panel-whatsapp .wb-topbar__dot { width: 8px; height: 8px; }
  #panel-whatsapp .wb-topbar__url { font-size: 0.62rem !important; }

  /* Body del widget — tamaños cómodos */
  #panel-whatsapp .wb-body { padding: 16px !important; gap: 14px !important; }
  #panel-whatsapp .wb-header-row { font-size: 1.4rem !important; gap: 11px; padding-bottom: 10px; }
  #panel-whatsapp .wb-title { font-size: 0.92rem !important; }
  #panel-whatsapp .wb-subtitle { font-size: 0.7rem !important; margin-top: 2px; }
  #panel-whatsapp .wb-step-label { font-size: 0.74rem !important; gap: 7px !important; }
  #panel-whatsapp .wb-step-num { width: 20px !important; height: 20px !important; font-size: 0.66rem !important; }

  /* Acciones iniciales: 1 columna para target táctil grande */
  .wb-action-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  #panel-whatsapp .wb-action-btn {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 14px 16px !important;
    gap: 12px;
  }
  #panel-whatsapp .wb-action-btn__icon { font-size: 1.5rem !important; }
  #panel-whatsapp .wb-action-btn__label { font-size: 0.8rem !important; text-align: left; }

  /* Servicios: 3 cols, tamaño cómodo */
  .wb-service-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  #panel-whatsapp .wb-service { padding: 14px 6px !important; gap: 4px; }
  #panel-whatsapp .wb-service__icon { font-size: 1.4rem !important; }
  #panel-whatsapp .wb-service__name { font-size: 0.78rem !important; }
  #panel-whatsapp .wb-service__price { font-size: 0.68rem !important; }

  /* Slots: 2 cols cómodos */
  .wb-slots { grid-template-columns: repeat(2, 1fr) !important; gap: 7px !important; }
  #panel-whatsapp .wb-slot { padding: 12px 4px !important; gap: 3px; }
  #panel-whatsapp .wb-slot__date { font-size: 0.82rem !important; }
  #panel-whatsapp .wb-slot__time { font-size: 0.72rem !important; }

  /* Confirmación */
  #panel-whatsapp .wb-confirm { padding: 16px !important; gap: 7px; }
  #panel-whatsapp .wb-confirm__title { font-size: 1rem !important; }
  #panel-whatsapp .wb-confirm__detail { font-size: 0.86rem !important; }
  #panel-whatsapp .wb-confirm__email { font-size: 0.76rem !important; }

  /* Lista de turnos */
  #panel-whatsapp .wb-appt-list { gap: 8px; }
  #panel-whatsapp .wb-appt { padding: 10px 12px !important; font-size: 1.2rem; gap: 10px; }
  #panel-whatsapp .wb-appt__service { font-size: 0.86rem !important; }
  #panel-whatsapp .wb-appt__date { font-size: 0.74rem !important; }
  #panel-whatsapp .wb-appt-cancel-btn,
  #panel-whatsapp .wb-appt-modify-btn { padding: 7px 14px !important; font-size: 0.78rem !important; }
  #panel-whatsapp .wb-cancel-q { font-size: 0.85rem !important; }
  #panel-whatsapp .wb-cancel-appt { font-size: 0.9rem !important; }
  #panel-whatsapp .wb-cancel-btns { gap: 8px; flex-wrap: wrap; }
  #panel-whatsapp .wb-cancel-btns .btn { padding: 8px 14px !important; font-size: 0.78rem !important; flex: 1 1 auto; }

  /* Footer */
  #panel-whatsapp .wb-footer-bar { padding: 9px 14px !important; }
  #panel-whatsapp .wb-footer-bar .btn { padding: 7px 14px !important; font-size: 0.78rem !important; }
}

/* Descripción "¿Cómo funciona?" se muestra como nota DEBAJO del widget en mobile */
@media (max-width: 768px) {
  #panel-whatsapp .demo-split::after {
    content: '✓ El cliente gestiona su turno desde la web · n8n procesa, sincroniza calendario y envía confirmación automática.';
    grid-column: 1 / -1;
    padding: 14px 18px;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.55;
    font-family: var(--font-main);
  }
}

@media (max-width: 380px) {
  #panel-whatsapp .web-booking-wrapper { padding: 14px !important; }
  #panel-whatsapp .wb-body { padding: 14px !important; gap: 12px !important; }
  #panel-whatsapp .wb-service { padding: 12px 4px !important; }
  #panel-whatsapp .wb-service__name { font-size: 0.7rem !important; }
  #panel-whatsapp .wb-slot { padding: 10px 4px !important; }
  #fn0::after { content: 'Form'; }
  #fn1::after { content: 'Ver'; }
  #fn2::after { content: 'Proc'; }
  #fn3::after { content: 'Mail'; }
  #fn4::after { content: 'Cal'; }
}

/* ============================================================
 *  REPORTES
 * ============================================================ */
@media (max-width: 768px) {
  #panel-reportes .report-demo { margin: 18px !important; padding: 16px !important; }
  #panel-reportes .report-header { padding: 12px 14px !important; font-size: 0.82rem !important; gap: 10px; flex-wrap: wrap; }
  #panel-reportes .report-header span:first-child { font-size: 1rem; }
  #panel-reportes .report-header .btn { margin-left: auto; padding: 6px 12px; font-size: 0.74rem; }
  #panel-reportes .report-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; margin-bottom: 14px; }
  #panel-reportes .kpi-card { padding: 12px 10px; }
  #panel-reportes .kpi-value { font-size: 1rem; }
  #panel-reportes .kpi-label { font-size: 0.6rem; margin-bottom: 5px; }
  #panel-reportes .kpi-trend { font-size: 0.65rem; }

  .report-table { padding: 0; }
  .report-row { grid-template-columns: 1.6fr 0.8fr 1.1fr 0.7fr; padding: 8px 6px; font-size: 0.7rem; gap: 4px; }
  .report-row--head { font-size: 0.56rem; padding-bottom: 8px; }
  .chart-bars { height: 50px; gap: 6px; }
  .chart-bar-name { font-size: 0.55rem; }
  .chart-label { font-size: 0.58rem; }
}

@media (max-width: 480px) {
  /* Mostrar solo 3 columnas en report-row (eliminamos "Variación") */
  .report-row { grid-template-columns: 1.5fr 0.8fr 1.1fr; }
  .report-row > span:nth-child(4),
  .report-row > *:nth-child(4) { display: none; }
  #panel-reportes .kpi-card { padding: 10px 8px; }
  #panel-reportes .kpi-value { font-size: 0.9rem; }
  #panel-reportes .kpi-label { font-size: 0.56rem; }
}

/* ============================================================
 *  PEDIDOS
 *  Override del !important que forzaba 1.4fr 1fr — ya estaba en 1fr
 *  pero ajustamos paddings y tamaños para que respire en mobile.
 * ============================================================ */
@media (max-width: 768px) {
  #panel-pedidos .pedido-left { padding: 20px !important; }
  #panel-pedidos .pedido-card { padding: 18px; margin-bottom: 18px; }
  #panel-pedidos .pedido-card__head {
    padding: 12px 14px !important;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px !important;
  }
  #panel-pedidos .pedido-card__info { gap: 10px; }
  #panel-pedidos .pedido-card__info > span:first-child { width: 36px; height: 36px; font-size: 1.05rem; }
  #panel-pedidos .pedido-card__title { font-size: 0.95rem; }
  #panel-pedidos .pedido-card__time { font-size: 0.66rem; }
  #panel-pedidos .pedido-badge { padding: 4px 10px; font-size: 0.62rem; }
  #panel-pedidos .pedido-item { padding: 11px 12px; gap: 10px; }
  #panel-pedidos .pedido-item > span:first-child { width: 32px; height: 32px; font-size: 1.1rem; }
  #panel-pedidos .pedido-item__name { font-size: 0.86rem; }
  #panel-pedidos .pedido-item__meta { font-size: 0.7rem; }
  #panel-pedidos .pedido-client { padding: 9px 12px; font-size: 0.78rem; gap: 8px; }

  #panel-pedidos .pedido-steps::before { left: 15px; }
  #panel-pedidos .p-step { gap: 12px; padding: 8px 0; }
  #panel-pedidos .p-step__icon { width: 32px; height: 32px; font-size: 0.9rem; border-width: 2px; }
  #panel-pedidos .p-step__text { font-size: 0.84rem; }

  #panel-pedidos .demo-desc { padding: 22px !important; }
}

/* ============================================================
 *  EMAIL AUTO
 *  El divisor vertical ::after estaba forzado con !important — lo
 *  ocultamos en mobile donde las columnas se apilan.
 * ============================================================ */
@media (max-width: 1100px) {
  #panel-email .demo-center::after { display: none !important; }
}
@media (max-width: 768px) {
  #panel-email .email-left { padding: 20px !important; gap: 10px; }
  #panel-email .email-form { padding: 20px !important; }
  #panel-email .email-form__title { font-size: 0.95rem !important; padding: 0 0 12px !important; margin-bottom: 14px !important; }
  #panel-email .email-field { padding: 12px 14px !important; min-height: 46px; gap: 10px; }
  #panel-email .ef-label { min-width: 60px; font-size: 0.6rem !important; }
  #panel-email .ef-value { font-size: 0.86rem !important; }
  #panel-email .email-actions { padding: 14px 0 0 !important; gap: 8px; }
  #panel-email .email-actions .btn { padding: 9px 14px; font-size: 0.82rem; }
  #panel-email .email-status { font-size: 0.66rem !important; }

  #panel-email .email-preview-wrapper { padding: 20px !important; }
  #panel-email .email-preview { min-height: 280px; }
  #panel-email .email-preview__header { padding: 14px 16px !important; gap: 5px; }
  #panel-email .email-preview__body { padding: 18px 16px !important; font-size: 0.85rem; }
  #panel-email .email-preview__body p { font-size: 0.84rem; line-height: 1.65; }
  #panel-email .ep-row { font-size: 0.74rem !important; gap: 6px; flex-wrap: wrap; }
  #panel-email .ep-label { min-width: 48px; font-size: 0.62rem; }
  #panel-email .ep-placeholder { font-size: 0.78rem; padding-top: 40px; }
}

@media (max-width: 480px) {
  #panel-email .email-field {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px;
    padding: 11px 13px !important;
  }
  #panel-email .ef-label { min-width: 0; }
}

/* ============================================================
 *  COMPARAR ARCHIVOS
 * ============================================================ */
@media (max-width: 768px) {
  #panel-archivos .archivos-demo { padding: 18px !important; gap: 10px; }
  #panel-archivos .arch-files { gap: 12px; }
  #panel-archivos .arch-files::after {
    /* El "vs" se reduce un poco en mobile */
    font-size: 0.56rem;
    padding: 3px 9px;
  }
  #panel-archivos .arch-file__head { padding: 11px 14px !important; gap: 10px; }
  #panel-archivos .arch-file__name { font-size: 0.85rem !important; }
  #panel-archivos .arch-file__meta { font-size: 0.66rem !important; }
  #panel-archivos .arch-file__icon { width: 30px; height: 30px; font-size: 1rem; }
  #panel-archivos .arch-file__badge { width: 24px !important; height: 24px !important; font-size: 0.72rem !important; }
  #panel-archivos .arch-file__rows { padding: 9px !important; min-height: 70px !important; }
  #panel-archivos .arch-row { padding: 4px 6px !important; font-size: 0.68rem !important; gap: 4px; grid-template-columns: 0.7fr 1fr 1fr; }

  .arch-result { gap: 8px; }
  #panel-archivos .arch-result__head { padding: 6px 10px; font-size: 0.7rem !important; }
  #panel-archivos .arch-result-row { font-size: 0.66rem !important; padding: 3px 6px; }
  #panel-archivos .arch-result__rows { padding: 4px 6px; min-height: 40px; }
  .arch-process { padding: 0; }
  .arch-proc-step { font-size: 0.72rem !important; }
  .arch-actions { flex-wrap: wrap; gap: 8px; }
  .arch-actions .btn { padding: 9px 14px; font-size: 0.8rem; }
  .arch-download { font-size: 0.7rem; }

  #panel-archivos .demo-desc { padding: 22px !important; }
}

@media (max-width: 480px) {
  /* Mostrar solo nombre + email en arch-row para que entren */
  #panel-archivos .arch-row { grid-template-columns: 1fr 1.2fr; gap: 4px; }
  #panel-archivos .arch-row > *:nth-child(3) { display: none; }
}

/* ============================================================
 *  NOTIFICACIONES
 * ============================================================ */
@media (max-width: 768px) {
  #panel-notifs .notif-stage-col {
    margin: 16px !important;
    padding: 14px !important;
    gap: 12px;
    border-radius: var(--r) !important;
  }
  #panel-notifs .notif-desc-col { padding: 22px !important; }

  /* Progress: iconos + label debajo (vertical) para que se entienda qué es cada paso */
  .notif-progress { gap: 4px; justify-content: space-between; }
  .np-step {
    flex-direction: column !important;
    padding: 5px 6px !important;
    gap: 2px !important;
    font-size: 0.55rem !important;
    border-radius: 8px !important;
    text-align: center;
    min-width: 0;
    flex: 1 1 0;
  }
  .np-label {
    display: block !important;
    font-size: 0.5rem !important;
    line-height: 1.1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .np-icon { font-size: 0.95rem !important; line-height: 1; }
  .np-arrow { font-size: 0.6rem; color: var(--text-faint); align-self: center; flex-shrink: 0; }

  .notif-stage { min-height: 240px; }
  .nscreen-label { padding: 10px 12px !important; font-size: 0.74rem !important; gap: 8px !important; }
  #panel-notifs .nscreen-label::before {
    width: 9px !important; height: 9px !important;
    box-shadow: 14px 0 0 #febc2e, 28px 0 0 #28c840 !important;
    margin-right: 28px !important;
  }

  .ns-email-client, .ns-wsp-mini, .ns-sheets-wrapper, .ns-crm-card { height: calc(100% - 38px); }
  .ns-ec-toolbar { padding: 8px 12px !important; font-size: 0.74rem; }
  .ns-ec-footer { padding: 8px 12px !important; font-size: 0.72rem; }
  .ns-ec-fields { padding: 7px 12px; }
  .ns-ec-field { font-size: 0.7rem; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
  .ns-ec-lbl { min-width: 38px; font-size: 0.68rem; }
  .ns-ec-body { padding: 10px 12px; gap: 5px; }
  .ns-ec-line { font-size: 0.72rem; line-height: 1.55; }

  .ns-wsp-mini__header { padding: 9px 12px; gap: 9px; }
  .ns-wsp-mini__avatar { width: 28px; height: 28px; font-size: 0.8rem; }
  .ns-wsp-mini__name { font-size: 0.74rem; }
  .ns-wsp-mini__status { font-size: 0.58rem; }
  .ns-wsp-mini__body { padding: 10px; gap: 6px; }
  .ns-wsp-bubble { font-size: 0.72rem; max-width: 88%; padding: 7px 10px; line-height: 1.45; }

  .ns-sheets-tab { padding: 6px 12px !important; font-size: 0.66rem; }
  .ns-sheet-row { grid-template-columns: 1fr 1.1fr 0.7fr !important; padding: 6px 10px; font-size: 0.66rem; gap: 4px; }
  .ns-sheet-row > *:nth-child(3) { display: none; }
  .ns-sheet-head { font-size: 0.56rem; }
  .ns-pill { padding: 2px 6px; font-size: 0.55rem; }

  .ns-crm-card__header { padding: 10px 12px; gap: 9px; }
  .ns-crm-card__avatar { width: 32px; height: 32px; font-size: 0.78rem; }
  .ns-crm-card__name { font-size: 0.82rem; }
  .ns-crm-card__sub { font-size: 0.6rem; }
  .ns-crm-badge { padding: 2px 8px; font-size: 0.6rem; }
  .ns-crm-fields { padding: 8px 12px; gap: 4px; }
  .ns-crm-field { font-size: 0.7rem; padding: 5px 8px; gap: 6px; }
  .ns-crm-field span:first-child { min-width: 60px; font-size: 0.68rem; }

  .notif-controls { flex-wrap: wrap; gap: 8px; }
  .notif-controls .btn { padding: 9px 14px; font-size: 0.8rem; }
}

@media (max-width: 480px) {
  /* En pantallas muy chicas, sheets queda a 2 columnas */
  .ns-sheet-row { grid-template-columns: 1fr 1fr !important; }
  .ns-sheet-row > *:nth-child(3),
  .ns-sheet-row > *:nth-child(4) { display: none; }
  .np-step { padding: 5px 7px; font-size: 0.6rem; }
}

/* ============================================================
 *  EJEMPLOS — grid de cards
 *  En mobile: 2 columnas (como tablet) para que las cards sean
 *  más chicas y se vean similar a desktop, no ocupando todo el ancho.
 * ============================================================ */
@media (max-width: 768px) {
  .ejemplos__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .ejemplo-preview { height: 130px !important; padding: 28px 14px 14px !important; }
  .ejemplo-preview::before { font-size: 0.78rem !important; letter-spacing: 3px !important; top: 10px !important; left: 12px !important; }
  .ep-logo { max-height: 60px !important; height: auto !important; }
  .ejemplo-preview .ep-logo[style*="height:120px"],
  .ejemplo-preview .ep-logo[style*="height:140px"],
  .ejemplo-preview .ep-logo[style*="height:150px"] { height: 60px !important; }
  .ejemplo-preview .ep-logo[style*="width:86%"] { width: 72% !important; height: auto !important; }
  .ep-tag-inner { font-size: 0.5rem !important; margin-top: 6px !important; letter-spacing: 0.1em; }
  .ejemplo-card__info { padding: 14px 12px !important; gap: 4px !important; }
  .ejemplo-tipo { font-size: 0.54rem !important; letter-spacing: 0.1em; }
  .ejemplo-card__info h3 { font-size: 0.85rem !important; }
  .ejemplo-card__info p { font-size: 0.68rem !important; line-height: 1.45; margin-top: 2px !important; }
  .ejemplo-link { font-size: 0.62rem !important; padding-top: 8px !important; margin-top: 6px !important; }
}

@media (max-width: 380px) {
  /* En pantallas muy chicas el gap más chico */
  .ejemplos__grid { gap: 10px !important; }
  .ejemplo-preview { height: 110px !important; padding: 24px 10px 10px !important; }
  .ejemplo-card__info { padding: 12px 10px !important; }
  .ejemplo-card__info h3 { font-size: 0.78rem !important; }
  .ejemplo-card__info p { font-size: 0.62rem !important; }
}

/* ============================================================
 *  PORTFOLIO
 * ============================================================ */
@media (max-width: 768px) {
  .portfolio__grid { gap: 18px; }
  .project-card__image { height: 220px; }
  .project-card__img { padding: 28px 32px; }
  .project-card__content { padding: 24px 22px; }
  .project-card__title { font-size: 1.2rem; }
  .project-card__desc { font-size: 0.88rem; margin-bottom: 18px; }
  .project-card__tech { gap: 6px; }
  .tech-tag { padding: 4px 11px; font-size: 0.66rem; }
  .project-card__link { padding: 9px 14px; font-size: 0.82rem; margin-top: 18px; }
  .project-card--coming { min-height: 220px; }
  .project-card__coming p { font-size: 0.72rem; }
  .coming-icon { width: 52px; height: 52px; font-size: 1.4rem; }
}

/* ============================================================
 *  CONTACTO
 * ============================================================ */
@media (max-width: 768px) {
  .contact__wrapper { padding: 28px 22px; }
  .form__row { gap: 14px; }
  .form__input { padding: 12px 14px; font-size: 0.92rem; }
  .form__label { font-size: 0.7rem; }
  .form__textarea { min-height: 110px; }
}

/* ============================================================
 *  FOOTER
 * ============================================================ */
@media (max-width: 768px) {
  .footer { padding: 44px 0 28px; }
  .footer__content { gap: 22px; margin-bottom: 32px; }
  .footer__nav { gap: 16px 22px; }
  .footer__link { font-size: 0.82rem; }
  .footer__tagline { font-size: 0.86rem; max-width: none; }
  .footer__bottom { font-size: 0.74rem; flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
 *  TWEAKS FAB — más chico en mobile y fuera del paso
 * ============================================================ */
@media (max-width: 768px) {
  .tweaks-fab { width: 42px; height: 42px; right: 14px; bottom: 14px; font-size: 1rem; }
  .tweaks-panel { width: calc(100vw - 28px); right: 14px; bottom: 14px; padding: 16px; }
}

/* ============================================================
 *  Reducir parallax/marquee animations en mobile para perf
 * ============================================================ */
@media (max-width: 768px) {
  .mesh-bg__blob { filter: blur(60px); opacity: 0.25; }
  .hero__glow { filter: blur(80px); }
  .hero__noise { opacity: 0.025; }
}




/* ================================================================
 * EJEMPLOS CARRUSEL — Coverflow 3D infinito tipo "revólver"
 * Cards con position: absolute, JS calcula transforms en virtual-pos.
 * Wrap modular para loop infinito en ambas direcciones. Drag fluido
 * con momentum + snap a la card más cercana.
 * ================================================================ */
.ejemplos-carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  user-select: none;
}

.carousel-viewport {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  padding: 0;
  perspective: 1800px;
  perspective-origin: 50% 50%;
}

/* Track: contenedor relativo, ya no es flex (cards son absolute) */
.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
  transform-style: preserve-3d;
}
.carousel-track:active,
.carousel-track.is-dragging { cursor: grabbing; }
/* Durante drag: cards sin transición (siguen el mouse al instante) */
.carousel-track.is-dragging .ejemplo-card {
  transition: opacity 0.15s ease !important;
}

/* Cards absolute: JS controla transform/opacity/z-index inline */
.ejemplos-carousel .ejemplo-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  max-width: 380px;
  margin: 0;
  flex: none;
  /* Estado inicial: oculto, JS lo posiciona en update() */
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    filter 0.45s ease,
    box-shadow 0.4s ease;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* Bloquear el native drag de anchors — el drag custom del carrusel
     se rompía en cards laterales porque el browser mostraba el icono
     de "arrastrar enlace". */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.ejemplos-carousel .ejemplo-card * {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Card activa: sombra y borde acento (JS aplica la clase) */
.ejemplos-carousel .ejemplo-card.is-active {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 40px 80px -16px rgba(0,0,0,0.8),
    0 0 0 1px var(--border-accent),
    0 0 60px -10px var(--accent-glow);
}

/* En el carrusel: la activa muestra info al 100%, las no-activas a 0.85.
   La atenuación adicional por profundidad la da el card.opacity (1 → 0.36
   en cards a ±2), así que el effective opacity del texto en una ±2 termina
   ≈ 0.85 × 0.36 = 0.31 (faded pero legible), y en ±1 ≈ 0.85 × 0.68 = 0.58. */
.ejemplos-carousel .ejemplo-card .ejemplo-card__info {
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ejemplos-carousel .ejemplo-card:not(.is-active) .ejemplo-card__info {
  opacity: 0.85;
  pointer-events: none;
}


/* Arrows de navegación */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(14, 14, 28, 0.85);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5);
  transition:
    border-color var(--t),
    background var(--t),
    transform var(--t),
    color var(--t),
    opacity var(--t);
}
.carousel-arrow:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.carousel-arrow:active {
  transform: translateY(-50%) scale(0.96);
}
.carousel-arrow--prev { left: 24px; }
.carousel-arrow--next { right: 24px; }
.carousel-arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Dots indicador */
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background var(--t),
    transform var(--t);
}
.carousel-dot:hover {
  background: var(--text-muted);
  transform: scale(1.2);
}
.carousel-dot.is-active {
  width: 32px;
  border-radius: 5px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Responsive — Tablet */
@media (max-width: 1024px) {
  .carousel-viewport { height: 490px; }
  .ejemplos-carousel .ejemplo-card { width: 340px; max-width: 340px; }
  .carousel-arrow--prev { left: 12px; }
  .carousel-arrow--next { right: 12px; }
}

/* Responsive — Mobile */
@media (max-width: 768px) {
  .carousel-viewport { height: 410px; perspective: 1200px; }
  .ejemplos-carousel .ejemplo-card { width: 260px; max-width: 260px; }

  .ejemplos-carousel .ejemplo-card .ejemplo-preview { height: 150px !important; }
  .ejemplos-carousel .ejemplo-card .ep-logo[style*="height:120px"],
  .ejemplos-carousel .ejemplo-card .ep-logo[style*="height:140px"],
  .ejemplos-carousel .ejemplo-card .ep-logo[style*="height:150px"] { height: 70px !important; }
  .ejemplos-carousel .ejemplo-card__info { padding: 16px 16px 18px !important; }
  .ejemplos-carousel .ejemplo-card__info h3 { font-size: 1rem !important; }
  .ejemplos-carousel .ejemplo-card__info p { font-size: 0.78rem !important; }

  .carousel-arrow {
    width: 40px;
    height: 40px;
  }
  .carousel-arrow svg { width: 18px; height: 18px; }
  .carousel-arrow--prev { left: 6px; }
  .carousel-arrow--next { right: 6px; }

  .carousel-dot.is-active { width: 24px; }
  .carousel-dots { margin-top: 18px; }
}

@media (max-width: 380px) {
  .carousel-viewport { height: 360px; }
  .ejemplos-carousel .ejemplo-card { width: 220px; max-width: 220px; }
  .carousel-arrow { width: 36px; height: 36px; }
}




/* ================================================================
 * AUTO-TABS REDISEÑO MOBILE — Grid 2x3 con cards grandes
 * Reemplaza el scroll horizontal por una grilla visible toda de
 * un vistazo, con target táctil grande y animación clara al cambiar.
 * ================================================================ */
@media (max-width: 768px) {
  .auto-shell { padding: 14px !important; gap: 14px !important; }

  /* Anular el flex-row + scroll del breakpoint 920px */
  .auto-tabs--side {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow: visible !important;
    flex-direction: initial !important;
    background: rgba(0,0,0,0.32) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  /* Header "Demos · 6 flujos" arriba de la grilla, full width */
  .auto-tabs--side .auto-tabs-header {
    display: flex !important;
    grid-column: 1 / -1;
    padding: 6px 10px 12px !important;
    margin-bottom: 2px !important;
    font-size: 0.6rem !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.18em !important;
  }
  .auto-tabs--side .auto-tabs-header::before {
    width: 6px !important; height: 6px !important;
  }

  /* Cada tab pasa a ser una card vertical */
  .auto-tabs--side .auto-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 14px 14px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    line-height: 1.22 !important;
    min-height: 76px !important;
    width: auto !important;
    flex-shrink: 1 !important;
    white-space: normal !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    background: rgba(255,255,255,0.02) !important;
    color: var(--text-secondary) !important;
    transition:
      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      background 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      color 0.3s ease !important;
    position: relative;
    overflow: hidden;
  }
  /* El dot indicator desktop sobra: lo escondemos */
  .auto-tabs--side .auto-tab::before { display: none !important; }

  /* Número en la esquina inferior derecha */
  .auto-tabs--side .auto-tab__num {
    display: block !important;
    align-self: flex-end !important;
    margin-left: 0 !important;
    font-size: 0.6rem !important;
    color: var(--text-faint) !important;
    letter-spacing: 0.1em !important;
    transition: color 0.3s ease;
  }

  /* Feedback táctil */
  .auto-tabs--side .auto-tab:active {
    transform: scale(0.96) !important;
  }

  /* Estado activo — borde + glow + lift */
  .auto-tabs--side .auto-tab.is-active {
    background:
      linear-gradient(135deg, var(--accent-soft), rgba(20,184,166,0.06)) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow:
      0 0 0 3px rgba(6,182,212,0.08),
      0 8px 20px -6px var(--accent-glow),
      0 1px 0 rgba(255,255,255,0.06) inset !important;
    transform: translateY(-1px);
  }
  .auto-tabs--side .auto-tab.is-active .auto-tab__num {
    color: var(--accent) !important;
    font-weight: 700;
  }

  /* Shimmer sutil al activarse */
  .auto-tabs--side .auto-tab.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: tabShimmer 0.8s ease-out;
    pointer-events: none;
  }
  @keyframes tabShimmer {
    to { transform: translateX(100%); }
  }
}

/* Pantallas muy chicas: padding/font algo menor */
@media (max-width: 380px) {
  .auto-tabs--side .auto-tab {
    padding: 12px 11px !important;
    font-size: 0.8rem !important;
    min-height: 68px !important;
  }
}