/* Light Tech SaaS styles for facturacion.galarzaec.com */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --bg-light: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFFFFF;
  --accent-cyan: #0284C7;
  --accent-emerald: #059669;
  --accent-teal: #0D9488;
  --telegram-blue: #2AABEE;
  --text-main: #0F172A;
  --text-muted: #475569;
  --border-subtle: #E2E8F0;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-light);
  color: var(--text-main);
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Light Tech Cards & Panels */
.light-panel {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05);
}

.light-panel-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.light-panel-hover:hover {
  border-color: #38BDF8;
  box-shadow: 0 15px 35px -5px rgba(2, 132, 199, 0.12);
  transform: translateY(-2px);
}

.light-card-active {
  background: #FFFFFF !important;
  border-color: #0284C7 !important;
  box-shadow: 0 0 25px rgba(2, 132, 199, 0.18) !important;
}

/* Ambient Soft Glow Backgrounds */
.ambient-glow-cyan {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ambient-glow-emerald {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Telegram Chat Simulator Styling */
.telegram-chat-container {
  background: #0E1621;
  background-image: radial-gradient(#17212B 1px, transparent 1px);
  background-size: 16px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}

.chat-bubble-user {
  background: #2B5278;
  color: #FFFFFF;
  border-radius: 16px 16px 4px 16px;
  max-width: 88%;
}

.chat-bubble-bot {
  background: #182533;
  color: #F5F5F5;
  border-radius: 16px 16px 16px 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  max-width: 92%;
}

/* Drag & Drop Upload Zone */
.drag-drop-zone {
  border: 2px dashed #0284C7;
  transition: all 0.3s ease;
  background: #F0F9FF;
}
.drag-drop-zone.dragging, .drag-drop-zone:hover {
  border-color: #0369A1;
  background: #E0F2FE;
}

/* Shiny Text Effect */
.text-gradient-cyan {
  background: linear-gradient(135deg, #0284C7 0%, #0D9488 50%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Button Styling */
.btn-glow-cyan {
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.25);
  transition: all 0.3s ease;
}
.btn-glow-cyan:hover {
  box-shadow: 0 8px 30px rgba(2, 132, 199, 0.4);
  transform: translateY(-2px);
}

/* =========================================================
   ANIMACIONES LANDING (v3)
   ========================================================= */
html { scroll-padding-top: 88px; }

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .40s; }

/* Entrada del hero */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.fade-up { opacity: 0; animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
.delay-1 { animation-delay: .1s; } .delay-2 { animation-delay: .25s; }
.delay-3 { animation-delay: .4s; } .delay-4 { animation-delay: .55s; }

/* Teléfono flotando */
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.floaty { animation: floaty 6s ease-in-out infinite; }

/* Mensajes de chat apareciendo en secuencia (bucle) */
@keyframes chatIn {
  0%, 4% { opacity: 0; transform: translateY(10px) scale(.96); }
  9%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
.chat-msg { opacity: 0; animation: chatIn 14s ease-in-out infinite; }

/* Manchas de color animadas en el fondo */
@keyframes blob { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.1); } 66% { transform: translate(-30px,20px) scale(.95); } }
.blob { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .55; animation: blob 16s ease-in-out infinite; pointer-events: none; }

/* Texto con degradado en movimiento */
@keyframes shine { to { background-position: 200% center; } }
.text-shine { background: linear-gradient(90deg, #0284C7, #0D9488, #22D3EE, #0284C7); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s linear infinite; }

/* Tarjetas que se levantan */
.lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(2,132,199,.22); border-color: #7DD3FC; }

/* Pulso del botón de WhatsApp */
@keyframes ping-soft { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
.ping-soft::before { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: #10B981; animation: ping-soft 2s cubic-bezier(0,0,.2,1) infinite; z-index: -1; }

/* Subrayado animado del menú */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: #0284C7; transform: scaleX(0); transition: transform .3s; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* Modales */
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-in { animation: modalIn .35s cubic-bezier(.2,.7,.2,1); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fadeIn { animation: fadeIn .25s ease-out; }

/* Menú móvil */
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.slide-down { animation: slideDown .25s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .fade-up, .chat-msg { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .floaty, .blob, .text-shine, .ping-soft::before { animation: none !important; }
}