html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  background-color: #fafbfc;
  position: relative;
}

/* Orbs respirando · sensación "IA orquestando" */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(50% 40% at 20% 10%, rgba(124, 58, 237, 0.10), transparent 60%),
    radial-gradient(50% 40% at 80% 30%, rgba(6, 182, 212, 0.08), transparent 60%),
    radial-gradient(40% 35% at 70% 70%, rgba(124, 58, 237, 0.06), transparent 60%),
    radial-gradient(40% 35% at 30% 90%, rgba(255, 107, 74, 0.05), transparent 60%);
  animation: mesh-drift 18s ease-in-out infinite;
  pointer-events: none;
}

/* Mecanismo IA · circuit pattern global (estilo reloj esqueleto) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900'><g stroke='%237c3aed' stroke-width='0.6' fill='none' opacity='0.3'><path d='M80 120 L240 200 L400 140 L560 240 L720 160 L880 280 L1040 200 L1200 300 L1320 220'/><path d='M80 320 L240 200 M240 200 L380 360 M380 360 L560 240 M380 360 L540 440 M540 440 L720 160 M540 440 L700 520 M700 520 L880 280 M700 520 L860 600 M860 600 L1040 200 M860 600 L1020 680 M1020 680 L1200 300 M1020 680 L1180 760'/><path d='M80 120 L180 280 L300 380 L420 220 L540 340 L660 460 L780 320 L900 440 L1020 560 L1140 380 L1260 500'/></g><g fill='%237c3aed' opacity='0.55'><circle cx='80' cy='120' r='2'/><circle cx='240' cy='200' r='2.5'/><circle cx='400' cy='140' r='2'/><circle cx='560' cy='240' r='2.5'/><circle cx='720' cy='160' r='2'/><circle cx='880' cy='280' r='2.5'/><circle cx='1040' cy='200' r='2'/><circle cx='1200' cy='300' r='2.5'/><circle cx='1320' cy='220' r='2'/><circle cx='380' cy='360' r='2.5'/><circle cx='540' cy='440' r='3'/><circle cx='700' cy='520' r='2.5'/><circle cx='860' cy='600' r='3'/><circle cx='1020' cy='680' r='2.5'/><circle cx='1180' cy='760' r='2'/><circle cx='180' cy='280' r='2'/><circle cx='300' cy='380' r='2'/><circle cx='420' cy='220' r='2'/><circle cx='660' cy='460' r='2.5'/><circle cx='780' cy='320' r='2'/><circle cx='900' cy='440' r='2.5'/><circle cx='1140' cy='380' r='2'/><circle cx='1260' cy='500' r='2'/></g><g fill='%2306b6d4' opacity='0.7'><circle cx='240' cy='200' r='4'/><circle cx='540' cy='440' r='5'/><circle cx='860' cy='600' r='4'/><circle cx='1020' cy='560' r='4'/><circle cx='560' cy='240' r='4'/></g></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.55;
  pointer-events: none;
  animation: pulse-soft 8s ease-in-out infinite;
}

@keyframes mesh-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-2%, 1%) scale(1.04); }
  66% { transform: translate(2%, -1%) scale(0.97); }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}

/* Map dots sutil sobre light bg */
.bg-map {
  background-image: radial-gradient(rgba(11, 31, 58, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

#nav.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(11, 31, 58, 0.05), 0 4px 20px -8px rgba(11, 31, 58, 0.06);
}

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary svg { transform: rotate(180deg); }

/* AI typing cursor */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.ai-cursor::after {
  content: '▍';
  display: inline-block;
  color: #06b6d4;
  margin-left: 2px;
  animation: blink 1.1s steps(1) infinite;
}

/* Conic gradient border rotating · "IA processing" */
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
.ai-border {
  position: relative;
  isolation: isolate;
}
.ai-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg, #7c3aed, #06b6d4, #ff6b4a, #7c3aed);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin-slow 8s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Sparkle pulse */
@keyframes sparkle {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}
.sparkle { animation: sparkle 2.4s ease-in-out infinite; }

/* Data stream lines · quietas por defecto, pulsan sólo cuando se dispara .flowing desde JS */
@keyframes stream-flow {
  0% { stroke-dashoffset: 60; opacity: 0.3; }
  20% { opacity: 1; }
  100% { stroke-dashoffset: -60; opacity: 0.3; }
}
.stream { stroke-dasharray: 4 6; stroke-dashoffset: 0; opacity: 0.35; }
.stream.flowing { animation: stream-flow 1.2s linear; opacity: 1; }

/* AI message slide in */
@keyframes slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-msg { animation: slide-in 0.5s ease-out backwards; }

/* Typing dots WhatsApp · 3 puntos pulsando alternados */
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Chat WhatsApp · animación de entrada de cada mensaje */
.chat-msg.show, .chat-typing.show {
  opacity: 1 !important;
  animation: slide-in 0.35s ease-out;
}

/* Typings ocupan layout solo cuando se están mostrando,
   así no comen alto del chat antes de tiempo */
.chat-typing { display: none; }
.chat-typing.show { display: flex; }

/* Card neural · pulse violet sutil "IA pensando" */
@keyframes neural-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.25), 0 0 40px -5px rgba(124, 58, 237, 0.25); }
  50% { box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.5), 0 0 60px -5px rgba(124, 58, 237, 0.45); }
}
.card-neural {
  animation: neural-pulse 4s ease-in-out infinite;
}

/* HUD mecanismo IA · fragmentos decorativos esquina · "reloj esqueleto" */
.hud-mech {
  position: absolute;
  pointer-events: none;
  opacity: 0.45;
}
.hud-mech::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.15), transparent 65%);
  filter: blur(15px);
}

/* Mesh orbs · movimiento orgánico estilo Vercel/Linear */
@keyframes mesh-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8%, 6%) scale(1.1); }
}
@keyframes mesh-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10%, 8%) scale(0.95); }
}
@keyframes mesh-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, -8%) scale(1.05); }
}
@keyframes mesh-float-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-7%, -5%) scale(0.9); }
}
.mesh-orb { will-change: transform; }
.mesh-orb-1 { animation: mesh-float-1 18s ease-in-out infinite; }
.mesh-orb-2 { animation: mesh-float-2 22s ease-in-out infinite; }
.mesh-orb-3 { animation: mesh-float-3 20s ease-in-out infinite; }
.mesh-orb-4 { animation: mesh-float-4 16s ease-in-out infinite; }

/* Code stream · líneas IA apareciendo secuencialmente, infinite */
@keyframes code-line-in {
  0% { opacity: 0; transform: translateY(4px); }
  8%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
.code-stream > p {
  opacity: 0;
  animation: code-line-in 12s ease-in-out infinite;
}
.code-stream > p:nth-child(1)  { animation-delay: 0s; }
.code-stream > p:nth-child(2)  { animation-delay: 0.4s; }
.code-stream > p:nth-child(3)  { animation-delay: 0.8s; }
.code-stream > p:nth-child(4)  { animation-delay: 1.4s; }
.code-stream > p:nth-child(5)  { animation-delay: 2.0s; }
.code-stream > p:nth-child(6)  { animation-delay: 2.6s; }
.code-stream > p:nth-child(7)  { animation-delay: 3.4s; }
.code-stream > p:nth-child(8)  { animation-delay: 4.2s; }
.code-stream > p:nth-child(9)  { animation-delay: 4.8s; }
.code-stream > p:nth-child(10) { animation-delay: 5.5s; }

/* Mockup window decorations */
.window-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

::selection { background: #7c3aed; color: #ffffff; }

@media (max-width: 1024px) {
  html { font-size: 15px; }
  .postcard { transform: none !important; }
}

/* ============ CLIPBOT IA · copiloto flotante estilo Clippy tuneado ============ */
.clipbot-wrap {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 70;
  display: flex;
  flex-direction: row-reverse; /* robot a la izquierda, bocadillo a la derecha saliendo de su boca */
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}

.clipbot-trigger {
  pointer-events: auto;
  width: 180px;
  height: 130px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.25s ease;
  animation: clipbot-float 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(124, 58, 237, 0.22));
}
.clipbot-trigger:hover {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 14px 22px rgba(124, 58, 237, 0.4));
}
.clipbot-svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes clipbot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Antena pulsante */
.clipbot-antena {
  transform-origin: center;
  transform-box: fill-box;
  animation: clipbot-antena-pulse 1.8s ease-in-out infinite;
}
@keyframes clipbot-antena-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* Hélice del avión · gira rápido */
.clipbot-prop-side {
  transform-origin: 218px 95px;
  animation: clipbot-prop-spin 0.18s linear infinite;
}
@keyframes clipbot-prop-spin {
  to { transform: rotate(360deg); }
}

/* Estela HORIZONTAL del avión · puntos que SALEN de la cola y se ALEJAN hacia la izquierda */
.clipbot-trail-h circle {
  animation: clipbot-trail-h-flow 1.8s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.clipbot-trail-h circle:nth-child(5) { animation-delay: 0s; }     /* nace cerca del avión */
.clipbot-trail-h circle:nth-child(4) { animation-delay: 0.25s; }
.clipbot-trail-h circle:nth-child(3) { animation-delay: 0.50s; }
.clipbot-trail-h circle:nth-child(2) { animation-delay: 0.75s; }
.clipbot-trail-h circle:nth-child(1) { animation-delay: 1.00s; }  /* el más lejano (más antiguo) */
@keyframes clipbot-trail-h-flow {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-22px); }
}

/* Parpadeo de ojos */
.clipbot-eyes {
  transform-origin: center;
  animation: clipbot-blink 5s infinite;
}
@keyframes clipbot-blink {
  0%, 92%, 96%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.05); }
}

/* Pupilas que miran un poquito */
.clipbot-pupil {
  animation: clipbot-look 7s ease-in-out infinite;
}
@keyframes clipbot-look {
  0%, 40%, 100% { transform: translate(0, 0); }
  50%, 70% { transform: translate(2px, 1px); }
  80%, 90% { transform: translate(-2px, 1px); }
}

/* Pulso indicador (cuando bubble está oculto) */
.clipbot-pulse {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
  animation: clipbot-pulse-ring 1.8s ease-out infinite;
  opacity: 0;
  transition: opacity 0.3s;
}
.clipbot-wrap.is-collapsed .clipbot-pulse { opacity: 1; }
@keyframes clipbot-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(6, 182, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}

/* Speech bubble · ESTILO CÓMIC (borde negro grueso, sombra dura, cola triangular) */
.clipbot-bubble {
  pointer-events: auto;
  position: relative;
  background: white;
  border: 2.5px solid #0b1f3a;
  border-radius: 18px;
  padding: 14px 16px 14px 16px;
  max-width: 280px;
  /* sombra DURA tipo cómic (sin blur) */
  box-shadow: 5px 5px 0 0 #0b1f3a;
  transform-origin: bottom left;
  animation: clipbot-bubble-in 0.45s cubic-bezier(.34,1.56,.64,1);
}
/* Cola triangular del bocadillo · apunta a la BOCA del robot (zona LED arriba a la izquierda) */
.clipbot-bubble::before {
  content: '';
  position: absolute;
  left: -22px;
  bottom: 50px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 22px solid #0b1f3a;
}
.clipbot-bubble::after {
  content: '';
  position: absolute;
  left: -16px;
  bottom: 54px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 17px solid white;
}
@keyframes clipbot-bubble-in {
  0% { opacity: 0; transform: scale(0.6) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.clipbot-wrap.is-collapsed .clipbot-bubble {
  display: none;
}

.clipbot-greeting {
  font-size: 13px;
  line-height: 1.35;
  color: #0b1f3a;
  font-weight: 500;
  margin: 0 0 6px 0;
}
.clipbot-greeting strong {
  background: linear-gradient(90deg, #7c3aed, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.clipbot-hand {
  display: inline-block;
  animation: clipbot-wave 1.6s ease-in-out 2;
  transform-origin: 70% 70%;
}
@keyframes clipbot-wave {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30%, 50% { transform: rotate(14deg); }
  20%, 40% { transform: rotate(-8deg); }
}
.clipbot-text {
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  margin: 0 0 12px 0;
}
.clipbot-text strong { color: #0b1f3a; font-weight: 600; }

.clipbot-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.clipbot-cta {
  flex: 1;
  text-align: center;
  background: linear-gradient(90deg, #7c3aed, #06b6d4);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.clipbot-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(124, 58, 237, 0.5);
}
.clipbot-dismiss {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.clipbot-dismiss:hover { border-color: #7c3aed; color: #7c3aed; }

.clipbot-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f1f5f9;
  border: none;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.clipbot-close:hover { background: #fee2e2; color: #ef4444; }

/* Mobile: clipbot oculto · no aparece en pantallas pequeñas */
@media (max-width: 640px) {
  .clipbot-wrap { display: none !important; }
}

/* ============================================================
   ============ DARK MODE · AUTO según preferencia OS ============
   ============================================================ */
@media (prefers-color-scheme: dark) {

  /* === FONDOS PRINCIPALES === */
  body { background-color: #050a14 !important; color: #e2e8f0; }
  .bg-sand { background-color: #050a14 !important; }
  .bg-cloud { background-color: #0f1729 !important; }
  .bg-cloud\/50 { background-color: rgba(15, 23, 41, 0.5) !important; }
  .bg-cloud\/60 { background-color: rgba(15, 23, 41, 0.6) !important; }
  .bg-cloud\/30 { background-color: rgba(15, 23, 41, 0.3) !important; }
  .bg-paper { background-color: #131b2f !important; }
  .bg-paper\/95 { background-color: rgba(19, 27, 47, 0.95) !important; }
  .bg-paper\/80 { background-color: rgba(19, 27, 47, 0.8) !important; }
  .bg-white { background-color: #131b2f !important; }
  .bg-white\/80 { background-color: rgba(19, 27, 47, 0.8) !important; }

  /* Las secciones que ya son dark (gradient ink-graphite) las dejo intactas */

  /* === TEXTOS === */
  .text-ink { color: #f1f5f9 !important; }
  .text-graphite { color: #cbd5e1 !important; }
  .text-mist { color: #94a3b8 !important; }
  .text-gray-900 { color: #f1f5f9 !important; }
  .text-gray-700 { color: #cbd5e1 !important; }
  .text-gray-600 { color: #94a3b8 !important; }
  .text-gray-500 { color: #94a3b8 !important; }
  .text-gray-400 { color: #94a3b8 !important; }

  /* === BORDERS === */
  .border-steel { border-color: #1e293b !important; }
  .divide-steel > * + * { border-color: #1e293b !important; }
  .border-steel\/40 { border-color: rgba(30, 41, 59, 0.4) !important; }
  .border-y { border-color: #1e293b !important; }
  .border-t { border-color: #1e293b !important; }
  .border-b { border-color: #1e293b !important; }
  /* bg-steel cuando se usa como FONDO (gap del trust strip) · adaptar a dark */
  .bg-steel { background-color: #1e293b !important; }

  /* === SHADOWS · neutralizar shadow-paper (es claro) en dark === */
  .shadow-paper { box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 8px 24px -8px rgba(0,0,0,0.6) !important; }
  .shadow-card  { box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 18px 40px -20px rgba(0,0,0,0.7) !important; }

  /* === ORBS off en dark · fondo uniforme oscuro === */
  body::before { display: none !important; }

  /* === Circuit pattern · redibujado con colores claros para que se vea sobre fondo dark === */
  body::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900'><g stroke='%23a78bfa' stroke-width='0.8' fill='none' opacity='0.55'><path d='M80 120 L240 200 L400 140 L560 240 L720 160 L880 280 L1040 200 L1200 300 L1320 220'/><path d='M80 320 L240 200 M240 200 L380 360 M380 360 L560 240 M380 360 L540 440 M540 440 L720 160 M540 440 L700 520 M700 520 L880 280 M700 520 L860 600 M860 600 L1040 200 M860 600 L1020 680 M1020 680 L1200 300 M1020 680 L1180 760'/><path d='M80 120 L180 280 L300 380 L420 220 L540 340 L660 460 L780 320 L900 440 L1020 560 L1140 380 L1260 500'/></g><g fill='%23a78bfa' opacity='0.85'><circle cx='80' cy='120' r='2'/><circle cx='240' cy='200' r='2.5'/><circle cx='400' cy='140' r='2'/><circle cx='560' cy='240' r='2.5'/><circle cx='720' cy='160' r='2'/><circle cx='880' cy='280' r='2.5'/><circle cx='1040' cy='200' r='2'/><circle cx='1200' cy='300' r='2.5'/><circle cx='1320' cy='220' r='2'/><circle cx='380' cy='360' r='2.5'/><circle cx='540' cy='440' r='3'/><circle cx='700' cy='520' r='2.5'/><circle cx='860' cy='600' r='3'/><circle cx='1020' cy='680' r='2.5'/><circle cx='1180' cy='760' r='2'/><circle cx='180' cy='280' r='2'/><circle cx='300' cy='380' r='2'/><circle cx='420' cy='220' r='2'/><circle cx='660' cy='460' r='2.5'/><circle cx='780' cy='320' r='2'/><circle cx='900' cy='440' r='2.5'/><circle cx='1140' cy='380' r='2'/><circle cx='1260' cy='500' r='2'/></g><g fill='%2306b6d4' opacity='1'><circle cx='240' cy='200' r='4'/><circle cx='540' cy='440' r='5'/><circle cx='860' cy='600' r='4'/><circle cx='1020' cy='560' r='4'/><circle cx='560' cy='240' r='4'/></g></svg>") !important;
    opacity: 0.6 !important;
    animation: none !important;
  }

  /* === Overlay del hero (gradient color sand) · apagado en dark === */
  .hero-overlay { background: transparent !important; }

  /* === Hovers === */
  .hover\:bg-cloud:hover { background-color: #0f1729 !important; }
  .hover\:border-violet\/40:hover { border-color: rgba(124, 58, 237, 0.6) !important; }
  .hover\:border-sunset\/40:hover { border-color: rgba(255, 107, 74, 0.6) !important; }
  .hover\:border-neon\/40:hover { border-color: rgba(6, 182, 212, 0.6) !important; }

  /* === Nav scrolled · adaptado dark === */
  #nav.scrolled {
    background: rgba(5, 10, 20, 0.85) !important;
    box-shadow: 0 1px 0 rgba(124, 58, 237, 0.15), 0 4px 20px -8px rgba(0, 0, 0, 0.4) !important;
  }
  #nav.scrolled, #nav { color: #e2e8f0; }

  /* === Logo cuadrado del nav · invertir colores (claro con icono navy) === */
  #nav a[href="#"] > span.bg-ink {
    background-color: #f1f5f9 !important;
    color: #050a14 !important;
  }
  /* ring-offset del logo · cambiar offset a color de fondo dark */
  #nav .ring-offset-sand { --tw-ring-offset-color: #050a14 !important; }

  /* === Botón "Pedir demo" del nav · fondo claro sobre dark para destacar === */
  #nav a[href="#demo"].bg-ink {
    background-color: #f1f5f9 !important;
    color: #050a14 !important;
  }
  #nav a[href="#demo"].bg-ink:hover {
    background-color: #cbd5e1 !important;
  }

  /* === Botón hamburguesa móvil del nav · texto claro === */
  #menuBtn { color: #e2e8f0 !important; }
  #menuBtn:hover { background-color: #0f1729 !important; }

  /* === Mobile menu desplegable · adaptar a dark === */
  #mobileMenu .bg-paper { background-color: #131b2f !important; border-color: #1e293b !important; }
  #mobileMenu a.text-ink { color: #f1f5f9 !important; }
  #mobileMenu a.bg-ink { background-color: #f1f5f9 !important; color: #050a14 !important; }
  #mobileMenu a:hover { background-color: #0f1729 !important; }

  /* === Enlaces del nav (text-mist con hover text-ink en light) · ajustar hover === */
  #nav nav a.hover\:text-ink:hover { color: #ffffff !important; }

  /* === Inputs y formularios en mockups CRM === */
  input, select, textarea { background-color: #131b2f; color: #e2e8f0; border-color: #1e293b; }

  /* === Cards de planes / billetes · borde más oscuro === */
  .ticket-card { background-color: #131b2f !important; }

  /* === FAQ details · borde dark === */
  details { background-color: #131b2f !important; border-color: #1e293b !important; }

  /* === Mockup chat WhatsApp · darkmode WhatsApp REAL ===
     Light WA: fondo #ECE5DD, burbuja recibida blanca, burbuja propia verde claro #DCF8C6
     Dark WA:  fondo #0b141a, burbuja recibida #1f2c34, burbuja propia verde oscuro #005c4b */
  [data-chat-body] {
    background-color: #0b141a !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='10' cy='10' r='1' fill='%23182229'/><circle cx='30' cy='30' r='1' fill='%23182229'/></svg>") !important;
  }
  /* Burbujas recibidas (clientes) · gris oscuro */
  [data-chat-body] .bg-white { background-color: #1f2c34 !important; }
  /* Burbujas propias (IA) · verde oscuro */
  [data-chat-body] .bg-\[\#DCF8C6\] { background-color: #005c4b !important; }
  /* Texto dentro de las burbujas · claro */
  [data-chat-body] .text-gray-900 { color: #e9edef !important; }
  [data-chat-body] .text-gray-500 { color: #8696a0 !important; }
  /* Header "Asistente IA" violeta dentro de burbuja verde · color claro para contraste */
  [data-chat-body] .bg-\[\#DCF8C6\] .text-violet { color: #a78bfa !important; }
  /* HOY chip y otros white/80 dentro del chat */
  [data-chat-body] .bg-white\/80 { background-color: rgba(31, 44, 52, 0.9) !important; color: #e9edef !important; }
  [data-chat-body] .text-gray-600 { color: #8696a0 !important; }
  /* Typing dots */
  [data-chat-body] .bg-gray-500 { background-color: #8696a0 !important; }

  /* Barra de input WhatsApp (debajo del chat body) */
  .bg-\[\#F0F0F0\] { background-color: #1f2c34 !important; }
  .bg-\[\#F0F0F0\] .bg-white { background-color: #2a3942 !important; }
  .bg-\[\#F0F0F0\] .text-gray-400, .bg-\[\#F0F0F0\] .text-gray-500 { color: #8696a0 !important; }

  /* Header verde de WhatsApp (CRM Viajes · IA · "en línea") · pasar a dark gris-verdoso WhatsApp dark */
  .bg-\[\#075E54\] { background-color: #1f2c34 !important; }

  /* === Bocadillo del clipbot · invertido para legibilidad === */
  .clipbot-bubble {
    background: #131b2f !important;
    border-color: #e2e8f0 !important;
    box-shadow: 5px 5px 0 0 #e2e8f0 !important;
  }
  .clipbot-bubble::before { border-right-color: #e2e8f0 !important; }
  .clipbot-bubble::after  { border-right-color: #131b2f !important; }
  .clipbot-greeting { color: #f1f5f9 !important; }
  .clipbot-text { color: #94a3b8 !important; }
  .clipbot-text strong { color: #f1f5f9 !important; }
  .clipbot-dismiss { border-color: #334155 !important; color: #cbd5e1 !important; background: transparent !important; }
  .clipbot-dismiss:hover { border-color: #a78bfa !important; color: #c4b5fd !important; }
  .clipbot-close { background: #1e293b !important; color: #94a3b8 !important; }
  .clipbot-close:hover { background: #7f1d1d !important; color: #fca5a5 !important; }

  /* === Selección de texto === */
  ::selection { background: #7c3aed; color: #ffffff; }

  /* ===================== VERIFACTU BAND · dark mode coherente ===================== */
  /* Sección entera con fondo dark, sin claros */
  #verifactu { background-color: #050a14 !important; }

  /* Card contenedora · pasa de gradient claro a gradient navy con halos sutiles */
  #verifactu > div > div.rounded-3xl {
    background:
      radial-gradient(circle at 12% 0%, rgba(124,58,237,.22), transparent 55%),
      radial-gradient(circle at 92% 100%, rgba(6,182,212,.18), transparent 60%),
      linear-gradient(135deg, #0f1729 0%, #131b2f 100%) !important;
    border-color: #1e293b !important;
    box-shadow: 0 30px 60px -28px rgba(0,0,0,.55) !important;
  }

  /* Mini timeline cards · fondo más oscuro y borde sutil */
  #verifactu .rounded-xl.border.border-steel {
    background-color: #050a14 !important;
    border-color: #1e293b !important;
  }
  /* Card destacada del 2027 (ring sunset) · borde sunset visible */
  #verifactu .ring-2.ring-sunset\/30 {
    --tw-ring-color: rgba(255, 107, 74, 0.55) !important;
    background-color: rgba(255, 107, 74, 0.06) !important;
  }

  /* Halos decorativos del fondo · más visibles en dark */
  #verifactu .bg-violet\/5 { background-color: rgba(124, 58, 237, 0.18) !important; }
  #verifactu .bg-neon\/5 { background-color: rgba(6, 182, 212, 0.15) !important; }
}


/* ==============================================================================
   COOKIE BANNER · CRMV
   Banner ligero, sin dependencias, con dos vistas:
   - Banda inferior con 3 acciones (Aceptar todo · Rechazar · Configurar)
   - Panel modal con checkboxes por categoría
   ============================================================================== */

.crmv-cookies { position:fixed; left:0; right:0; bottom:0; z-index:9999; padding:1rem; pointer-events:none; }
.crmv-cookies__banner {
  pointer-events:auto;
  max-width: 980px; margin: 0 auto;
  background: #0b1f3a; color:#fafbfc;
  border-radius: 18px; padding: 1.25rem 1.5rem;
  box-shadow: 0 20px 60px -15px rgba(0,0,0,.45);
  display:grid; gap:1rem; grid-template-columns: 1fr;
  border: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 768px) {
  .crmv-cookies__banner { grid-template-columns: 1fr auto; align-items:center; }
}
.crmv-cookies__text h2 { font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; font-size:1rem; margin:0 0 .35rem; color:#fafbfc; }
.crmv-cookies__text p { font-size:.88rem; line-height:1.55; margin:0; color: rgba(250,251,252,.78); }
.crmv-cookies__text a { color:#a5f3fc; text-decoration: underline; text-decoration-thickness:1px; text-underline-offset: 3px; }
.crmv-cookies__actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:flex-end; }
.crmv-cookies__btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem 1.1rem; border-radius:999px;
  font-size:.85rem; font-weight:700; cursor:pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  font-family: inherit;
}
.crmv-cookies__btn--primary { background: linear-gradient(135deg, #7c3aed, #06b6d4); color:#fff; box-shadow: 0 10px 22px -10px rgba(124,58,237,.55); }
.crmv-cookies__btn--primary:hover { transform: translateY(-1px); }
.crmv-cookies__btn--secondary { background: transparent; color:#fafbfc; border-color: rgba(255,255,255,.22); }
.crmv-cookies__btn--secondary:hover { border-color: rgba(255,255,255,.5); }
.crmv-cookies__btn--ghost { background: transparent; color: rgba(250,251,252,.7); border-color: transparent; padding-left:.65rem; padding-right:.65rem; }
.crmv-cookies__btn--ghost:hover { color:#fafbfc; }

/* Modal de configuración */
.crmv-cookies__overlay {
  position:fixed; inset:0; z-index:10000;
  background: rgba(11,31,58,.55); backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding: 1.5rem;
}
.crmv-cookies__modal {
  background:#fff; color:#0b1f3a;
  width: 100%; max-width: 560px;
  border-radius: 22px; padding: 1.75rem;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4);
}
.crmv-cookies__modal h2 { font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; font-size:1.35rem; margin:0 0 .5rem; color:#0b1f3a; }
.crmv-cookies__modal > p { font-size:.92rem; line-height:1.6; color:#475569; margin:0 0 1.25rem; }
.crmv-cookies__row { padding: 1rem 0; border-top: 1px solid #e2e8f0; }
.crmv-cookies__row:first-of-type { border-top:0; }
.crmv-cookies__row-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.crmv-cookies__row-head h3 { font-size:1rem; font-weight:700; color:#0b1f3a; margin:0; }
.crmv-cookies__row p { font-size:.85rem; line-height:1.55; color:#64748b; margin: .35rem 0 0; }

/* Toggle switch */
.crmv-toggle { position:relative; display:inline-block; width:42px; height:22px; flex-shrink:0; }
.crmv-toggle input { opacity:0; width:0; height:0; }
.crmv-toggle__slider { position:absolute; cursor:pointer; inset:0; background-color:#cbd5e1; border-radius:999px; transition: .25s; }
.crmv-toggle__slider::before { position:absolute; content:""; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.25s; }
.crmv-toggle input:checked + .crmv-toggle__slider { background: linear-gradient(135deg, #7c3aed, #06b6d4); }
.crmv-toggle input:checked + .crmv-toggle__slider::before { transform: translateX(20px); }
.crmv-toggle input:disabled + .crmv-toggle__slider { background:#94a3b8; cursor:not-allowed; opacity:.7; }

.crmv-cookies__modal-actions { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid #e2e8f0; }

@media (prefers-color-scheme: dark) {
  .crmv-cookies__modal { background:#0f172a; color:#f1f5f9; }
  .crmv-cookies__modal h2 { color:#f1f5f9; }
  .crmv-cookies__modal > p { color:#94a3b8; }
  .crmv-cookies__row { border-color:#1e293b; }
  .crmv-cookies__row-head h3 { color:#f1f5f9; }
  .crmv-cookies__row p { color:#94a3b8; }
  .crmv-cookies__modal-actions { border-color:#1e293b; }
}