/* =============================================

   LANDING PAGE STYLES (VERSION 3.0 - PREMIUM BENTO)

   ============================================= */



/* Font import moved to top */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');



/* 1. Magical Deep Space Background */

/* 1. Tech Grid Background - Lighter & Cinematic */

.landing-container {

  position: relative;

  z-index: 1;

  width: 100%;

  height: 100vh;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  background-color: transparent;

  background-image: none;

  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

}



/* Split Mode: Shift Landing Content */

.landing-container.split-mode {

  width: 60%;

  border-right: 1px solid rgba(255, 255, 255, 0.1);

}



.landing-container.split-mode .landing-main {

  transform: scale(0.9) translateX(-5%);

  opacity: 0.8;

  filter: blur(2px);

}



.landing-container.split-mode .landing-header {

  transform: translateY(-100%);

  /* Hide header in split mode */

}



/* Cinematic Noise Overlay and Vignette Overlay combined */

.landing-container::after {

  content: '';

  position: absolute;

  inset: 0;

  background: none;

  pointer-events: none;

  z-index: 2;

  opacity: 0;

}



/* 2. Typography Upgrade */

/* 2. Typography Upgrade */

.landing-hero h1 {

  font-size: 72px;

  font-weight: 700;

  line-height: 1.1;

  margin-bottom: 24px;

  letter-spacing: -1px;

  text-transform: uppercase;

  font-family: var(--font-tech);

  color: white;

  /* White text on dark background */

}



.landing-hero h1 .gradient-text {

  background: linear-gradient(135deg, #ec4899 0%, #a78bfa 50%, #8b5cf6 100%);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  filter: drop-shadow(0 0 20px rgba(236, 72, 153, 0.3));

  background-size: 200% auto;

  animation: shine 5s linear infinite;

}



@keyframes shine {

  to {

    background-position: 200% center;

  }

}



/* 3. Cinematic Glass Cards */

/* 3. Cyber Glass Cards with Zoom Effect */

.bento-card {

  background: var(--cyber-panel);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1px solid var(--cyber-border);

  border-radius: 24px;

  /* Slightly softer but still tech */

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

  transition: all 0.4s var(--bounce);

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

}



/* Background Image Container (for Zoom) */

.bento-card::before {

  content: '';

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  z-index: 0;

  opacity: 0.6;

  /* Blend with the panel color */

}



/* Gradient Overlay on top of image */

.bento-card::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.0), rgba(15, 23, 42, 0.3));

  z-index: 1;

  pointer-events: none;

}



/* Content sits on top */

.card-content,

.card-header-icon,

h3,

p,

.live-metric-pill,

.metric-row,

.whatsapp-preview {

  position: relative;

  z-index: 2;

}



/* Hover Effects */

.bento-card:hover {

  transform: translateY(-6px);

  border-color: rgba(255, 255, 255, 0.2);

  box-shadow:

    0 20px 50px rgba(0, 0, 0, 0.5),

    0 0 30px rgba(34, 211, 238, 0.1);

}



.bento-card:hover::before {

  transform: scale(1.1);

  /* Smooth Zoom */

  opacity: 0.8;

}



/* 4. Stats Bar - Floating Pills */

/* 4. Stats Bar - Tech Pills */

.landing-stats-bar {

  display: flex;

  flex-direction: row;

  gap: 16px;

  margin-top: 48px;

  width: 100%;

}



.stat-item {

  background: rgba(10, 10, 20, 0.6);

  border: 1px solid rgba(0, 243, 255, 0.2);

  border-radius: 8px;

  /* Tech shape */

  padding: 12px 20px;

  backdrop-filter: blur(8px);

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  position: relative;

  overflow: hidden;

}



.stat-item::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 2px;

  background: var(--neon-cyan);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.3s ease;

}



.stat-item:hover::after {

  transform: scaleX(1);

}



.stat-value {

  font-family: var(--font-tech);

  font-size: 28px;

  font-weight: 700;

  color: white;

  /* White for visibility */

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

}



/* 5. Refined Card Backgrounds (Subtle & Deep) */

/* Call Center - Hero Image */

.card-callcenter {

  position: relative;

}



/* Other Cards - Deep Gradients */

/* Removed empty rulesets */



/* Icons - Glowing */

.card-header-icon svg {

  filter: drop-shadow(0 0 8px currentColor);

  opacity: 0.9;

}



.landing-container.hidden {

  display: none;

}



/* Header */

/* Floating Header */

.landing-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 24px;

  margin: 20px auto 0;

  width: 90%;

  max-width: 1200px;

  background: rgba(15, 23, 42, 0.6);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 100px;

  /* Pill shape */

  position: sticky;

  top: 20px;

  z-index: 100;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}



.landing-logo {

  display: flex;

  align-items: center;

  gap: 12px;

  font-family: var(--font-tech);

  font-size: 26px;

  font-weight: 700;

  letter-spacing: 1px;

  text-transform: uppercase;

  color: white;

}



.landing-login-btn {

  background: linear-gradient(135deg, #ffd54f, #ffb300);

  border: none;

  color: #1a1a2e;

  padding: 13px 30px;

  border-radius: 24px;

  font-weight: 700;

  font-size: 15px;

  letter-spacing: 0.4px;

  transition: all 0.3s ease;

  box-shadow: 0 0 25px rgba(255, 213, 79, 0.5);

  cursor: pointer;

  position: relative;

  overflow: hidden;

}



.landing-login-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

  transition: left 0.5s ease;

}



.landing-login-btn:hover::before {

  left: 100%;

}



.landing-login-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 0 30px rgba(255, 213, 79, 0.6);

  background: linear-gradient(135deg, #ffe082, #ffd54f);

}



/* Main Content - Split Layout */

.landing-main {

  flex: 1;

  display: flex;

  flex-direction: row;

  /* Horizontal layout */

  align-items: center;

  /* Center vertically */

  justify-content: center;

  padding: 0 40px 40px 40px;

  gap: 60px;

  /* Space between Hero and Grid */

  max-width: calc(100vw - 60px);

  margin: 0 auto;

  width: 100%;

  height: 100%;

}



/* Hero Section - Left Side */

.landing-hero {

  text-align: left;

  /* Align text to left */

  margin-bottom: 0;

  max-width: 450px;

  /* Limit width */

  animation: fade-in-left 1s cubic-bezier(0.2, 0.8, 0.2, 1);

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  /* Align items to start */

  flex-shrink: 0;

}



.hero-badge {

  display: inline-block;

  padding: 8px 20px;

  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.15));

  border: 1px solid rgba(236, 72, 153, 0.3);

  border-radius: 50px;

  font-size: 12px;

  font-weight: 600;

  color: #ec4899;

  /* Pink */

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 20px;

}



.landing-hero h1 {

  font-size: 56px;

  /* Smaller font for fit */

  line-height: 1.1;

  margin-bottom: 24px;

  font-weight: 800;

  letter-spacing: -2px;

  color: white;

}



.landing-hero p {

  font-size: 20px;

  color: rgba(255, 255, 255, 0.8);

  /* Light text */

  margin-bottom: 36px;

  max-width: 600px;

}



/* Stats Bar - Premium Glass Cards */

.landing-stats-bar {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  gap: 16px;

  width: 100%;

  margin-top: 40px;

  background: transparent;

  box-shadow: none;

  border: none;

  backdrop-filter: none;

}



.stat-item {

  background: rgba(15, 23, 42, 0.6);

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: 16px;

  padding: 20px 16px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 8px;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

  overflow: hidden;

}



.stat-item::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 2px;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

  transform: translateX(-100%);

  transition: transform 0.5s ease;

}



.stat-item:hover {

  transform: translateY(-4px);

  background: rgba(30, 41, 59, 0.8);

  border-color: rgba(255, 255, 255, 0.1);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.stat-item:hover::before {

  transform: translateX(100%);

}



.stat-value {

  font-size: 32px;

  font-weight: 700;

  letter-spacing: -1px;

  line-height: 1;

  display: flex;

  align-items: center;

  gap: 8px;

}



.stat-label {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.7);

  /* Light gray */

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.stat-divider {

  display: none;

}



/* Bento Grid - Right Side */

.landing-bento-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  /* 3 Columns */

  grid-template-rows: repeat(2, 1fr);

  /* 2 Rows, auto fit */

  gap: 20px;

  width: 100%;

  height: 100%;

  max-height: 600px;

  /* Limit height */

  animation: fade-in-right 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;

}



.bento-card {

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);

  /* More visible white glass */

  backdrop-filter: blur(15px) saturate(120%);

  /* Stronger blur and saturation */

  border: 1px solid rgba(255, 255, 255, 0.3);

  /* Brighter border */

  border-radius: 24px;

  padding: 28px;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  display: flex;

  flex-direction: column;

  position: relative;

  overflow: hidden;

  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.05);

  /* Glow effect */

}



.bento-card:hover {

  transform: translateY(-5px) scale(1.02);

  border-color: rgba(255, 255, 255, 0.8);

  /* Almost white on hover */

  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 255, 0.1);

  /* Stronger glow */

  z-index: 10;

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);

}



/* Colorful Borders - Matching Icon Colors */

.card-callcenter {

  border-left: 3px solid #ec4899 !important;

}



.card-audit {

  border-left: 3px solid #a78bfa !important;

}



.card-whatsapp {

  border-left: 3px solid #34d399 !important;

}



.card-reports {

  border-left: 3px solid #8b5cf6 !important;

}



.card-os {

  border-left: 3px solid #fb923c !important;

}



.card-bcra {

  border-left: 3px solid #fbbf24 !important;

}



/* Grid Spans */

/* Grid Spans - Adjusted for 3 Columns */

.bento-card.large {

  grid-column: span 2;

  grid-row: span 2;

}



.bento-card.medium {

  grid-column: span 1;

  grid-row: span 1;

}



.bento-card.small {

  grid-column: span 1;

  grid-row: span 1;

}



/* Card Content */

.card-content {

  position: relative;

  z-index: 3;

  height: 100%;

  display: flex;

  flex-direction: column;

}



/* Tech Icons with Pastel Backgrounds */

.card-header-icon {

  font-size: 24px;

  margin-bottom: 16px;

  width: 56px;

  height: 56px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

  border: none;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  color: white;

}



/* Pastel Icon Backgrounds - One for each card */

.card-callcenter .card-header-icon {

  background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);

}



.card-audit .card-header-icon {

  background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);

}



.card-whatsapp .card-header-icon {

  background: linear-gradient(135deg, #34d399 0%, #6ee7b7 100%);

}



.card-reports .card-header-icon {

  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);

}



.card-os .card-header-icon {

  background: linear-gradient(135deg, #fb923c 0%, #fdba74 100%);

}



.card-bcra .card-header-icon {

  background: linear-gradient(135deg, #fbbf24 0%, #fcd34d 100%);

}



.bento-card h3 {

  font-family: var(--font-tech);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin: 0 0 8px 0;

  font-size: 18px;

  font-weight: 700;

  color: #f8fafc;

  /* White text */

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

  position: relative;

  z-index: 2;

}



.bento-card p {

  margin: 0;

  font-size: 14px;

  color: #cbd5e1;

  /* Light slate text */

  line-height: 1.6;

  font-weight: 400;

  position: relative;

  z-index: 2;

}



/* --- Cyber HUD Backgrounds with 3D Images (Pseudo-Element Version) --- */



/* Vivid Illustrations via ::before */

.bento-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 1;

  z-index: 0;

  transition: all 0.4s ease;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  mix-blend-mode: normal;

  /* Reset blend mode to see full image */

  filter: brightness(1.4) saturate(1.2) contrast(1.1);

  /* Significant brightness boost */

  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);

  /* Soft fade at bottom */

}



.bento-card:hover::before {

  transform: scale(1.05);

  filter: brightness(1.5) saturate(1.3);

}



/* Vivid Gradient Backgrounds via ::before */

/* Removed conflicting gradient overlay that was hiding the images */



/* Removed conflicting hover opacity */



@keyframes gradientMove {

  0% {

    background-position: 0% 50%;

  }



  50% {

    background-position: 100% 50%;

  }



  100% {

    background-position: 0% 50%;

  }

}



/* 1. Call Center (Cyan/Blue) */

.card-callcenter::before {

  background-image: url('/static/img/card_call_center.png');

}



.card-callcenter {

  border-color: rgba(6, 182, 212, 0.3) !important;

}



.card-callcenter:hover {

  box-shadow: 0 20px 50px rgba(6, 182, 212, 0.2);

  border-color: rgba(6, 182, 212, 0.6) !important;

}



.card-callcenter .card-header-icon {

  color: #22d3ee;

  border-color: rgba(34, 211, 238, 0.5);

  background: rgba(34, 211, 238, 0.1);

}



/* 2. Audit (Violet/Purple) */

.card-audit::before {

  background-image: url('/static/img/card_audit_ia.png');

}



.card-audit {

  border-color: rgba(139, 92, 246, 0.3) !important;

}



.card-audit:hover {

  box-shadow: 0 20px 50px rgba(139, 92, 246, 0.2);

  border-color: rgba(139, 92, 246, 0.6) !important;

}



.card-audit .card-header-icon {

  color: #a78bfa;

  border-color: rgba(167, 139, 250, 0.5);

  background: rgba(167, 139, 250, 0.1);

}



/* 3. WhatsApp (Green/Emerald) */

.card-whatsapp::before {

  background-image: url('/static/img/card_whatsapp.png');

}



.card-whatsapp {

  border-color: rgba(16, 185, 129, 0.3) !important;

}



.card-whatsapp:hover {

  box-shadow: 0 20px 50px rgba(16, 185, 129, 0.2);

  border-color: rgba(16, 185, 129, 0.6) !important;

}



.card-whatsapp .card-header-icon {

  color: #34d399;

  border-color: rgba(52, 211, 153, 0.5);

  background: rgba(52, 211, 153, 0.1);

}



/* 4. Reports (Orange/Amber) */

.card-reports::before {

  background-image: url('/static/img/card_reports.png');

}



.card-reports {

  border-color: rgba(245, 158, 11, 0.3) !important;

}



.card-reports:hover {

  box-shadow: 0 20px 50px rgba(245, 158, 11, 0.2);

  border-color: rgba(245, 158, 11, 0.6) !important;

}



.card-reports .card-header-icon {

  color: #fbbf24;

  border-color: rgba(251, 191, 36, 0.5);

  background: rgba(251, 191, 36, 0.1);

}



/* 5. Verificador OS (Red/Rose) */

.card-os::before {

  background-image: url('/static/img/card_verifier.png');

}



.card-os {

  border-color: rgba(244, 63, 94, 0.3) !important;

}



.card-os:hover {

  box-shadow: 0 20px 50px rgba(244, 63, 94, 0.2);

  border-color: rgba(244, 63, 94, 0.6) !important;

}



.card-os .card-header-icon {

  color: #fb7185;

  border-color: rgba(251, 113, 133, 0.5);

  background: rgba(251, 113, 133, 0.1);

}



/* 6. BCRA (Yellow/Gold) */

.card-bcra::before {

  background-image: url('/static/img/card_bcra.png');

}



.card-bcra {

  border-color: rgba(234, 179, 8, 0.3) !important;

}



.card-bcra:hover {

  box-shadow: 0 20px 50px rgba(234, 179, 8, 0.2);

  border-color: rgba(234, 179, 8, 0.6) !important;

}



.card-bcra .card-header-icon {

  color: #facc15;

  border-color: rgba(250, 204, 21, 0.5);

  background: rgba(250, 204, 21, 0.1);

}



.live-metric-pill {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background: rgba(16, 185, 129, 0.1);

  border: 1px solid rgba(16, 185, 129, 0.2);

  padding: 10px 20px;

  border-radius: 100px;

  color: #34d399;

  font-size: 14px;

  font-weight: 600;

  margin-top: auto;

  width: fit-content;

}



.pulsing-dot {

  width: 10px;

  height: 10px;

  background: #34d399;

  border-radius: 50%;

  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);

  animation: pulse-green 2s infinite;

}



.metric-row {

  display: flex;

  gap: 24px;

  margin-top: auto;

  padding-top: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.mini-stat {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.mini-stat strong {

  font-size: 28px;

  color: white;

  font-weight: 700;

}



.mini-stat span {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.4);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.whatsapp-preview {

  margin-top: auto;

  display: flex;

  flex-direction: column;

  gap: 12px;

  padding: 16px;

  background: rgba(0, 0, 0, 0.2);

  border-radius: 16px;

}



.msg-bubble {

  background: rgba(255, 255, 255, 0.08);

  padding: 10px 16px;

  border-radius: 12px 12px 12px 2px;

  font-size: 13px;

  width: fit-content;

  max-width: 85%;

  color: rgba(255, 255, 255, 0.9);

}



.msg-bubble.reply {

  background: rgba(37, 211, 102, 0.2);

  align-self: flex-end;

  border-radius: 12px 12px 2px 12px;

  color: #4ade80;

}



/* Footer - Hidden in No-Scroll or minimal */

.landing-footer {

  display: none;

}



/* New Animations */

@keyframes fade-in-left {

  from {

    opacity: 0;

    transform: translateX(-40px);

  }



  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes fade-in-right {

  from {

    opacity: 0;

    transform: translateX(40px);

  }



  to {

    opacity: 1;

    transform: translateX(0);

  }

}



/* Animations */

@keyframes fade-in-up {

  from {

    opacity: 0;

    transform: translateY(40px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes pulse-green {

  0% {

    transform: scale(0.95);

    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);

  }



  70% {

    transform: scale(1);

    box-shadow: 0 0 0 10px rgba(52, 211, 153, 0);

  }



  100% {

    transform: scale(0.95);

    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);

  }

}



/* Responsive */

@media (max-width: 1200px) {

  .landing-bento-grid {

    grid-template-columns: repeat(2, 1fr);

    grid-template-rows: auto;

  }



  .bento-card.large {

    grid-column: span 2;

  }



  .bento-card.medium {

    grid-column: span 1;

  }



  .bento-card.small {

    grid-column: span 1;

  }

}



@media (max-width: 768px) {

  .landing-header {

    padding: 20px;

  }



  .landing-hero h1 {

    font-size: 42px;

  }



  .landing-stats-bar {

    flex-direction: column;

    gap: 30px;

    width: 100%;

  }



  .stat-divider {

    width: 60px;

    height: 1px;

  }



  .landing-bento-grid {

    display: flex;

    flex-direction: column;

  }

}



/* --- Login Split View with Video Background --- */

#loginContainer {

  /* Override .container styles */

  position: fixed !important;

  top: 0 !important;

  right: 0 !important;

  bottom: auto !important;

  left: auto !important;

  position: fixed;

  top: 0;

  right: 0;

  width: 50%;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);



  /* Dark base color as fallback */

  background: #0a0e1a;



  /* Multi-layer shadows for depth */

  box-shadow:

    -10px 0 40px rgba(168, 85, 247, 0.15),

    -20px 0 80px rgba(236, 72, 153, 0.1),

    inset 0 0 100px rgba(168, 85, 247, 0.06);

}



#loginContainer.active {

  opacity: 1;

  pointer-events: all;

}



#loginContainer.hidden {

  display: none;

}



/* Auth Form Toggle */

.auth-form {

  width: 100%;

}



.auth-form.hidden {

  display: none;

}



#loginContainer .link {

  background: none;

  border: none;

  cursor: pointer;

  font-family: inherit;

}



/* Register Form */

.reg-form-scroll {

  max-height: none;

  overflow-y: visible;

}



.reg-form-scroll .field {

  margin-bottom: 10px;

}



.reg-form-scroll .field span {

  font-size: 13px;

  margin-bottom: 4px;

}



.reg-form-scroll .input input {

  padding: 10px 12px;

  font-size: 14px;

}



.reg-section-title {

  font-size: 11px;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.5);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin: 12px 0 6px;

  padding-top: 8px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.reg-section-title:first-child {

  margin-top: 0;

  padding-top: 0;

  border-top: none;

}



.field-row {

  display: flex;

  gap: 10px;

}



.field-row .field {

  flex: 1;

  min-width: 0;

}



#registerForm .title {

  margin-bottom: 12px;

}



#registerForm .title h1 {

  font-size: 22px;

  margin-bottom: 4px;

}



#registerForm .title span {

  font-size: 13px;

}



#registerForm .primary {

  padding: 12px;

  margin-top: 12px;

  font-size: 15px;

}



#registerForm .actions {

  margin-top: 10px;

}



#registerForm .actions span,

#registerForm .actions button {

  font-size: 12px !important;

}



/* Mantener logo visible en registro para identidad de marca */

#loginContainer:has(#registerForm:not(.hidden)) .login-logo {

  display: flex;

}



#loginContainer:has(#registerForm:not(.hidden)) .login-logo .logo-image {

  max-height: 40px;

}



/* Collapsible advanced config */

.reg-advanced-toggle {

  margin: 8px 0;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 10px;

  overflow: hidden;

}



.reg-advanced-toggle summary {

  padding: 10px 14px;

  font-size: 13px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.6);

  cursor: pointer;

  background: rgba(255, 255, 255, 0.03);

  transition: all 0.2s ease;

  list-style: none;

}



.reg-advanced-toggle summary::-webkit-details-marker {

  display: none;

}



.reg-advanced-toggle summary::before {

  content: '\25B6';

  display: inline-block;

  margin-right: 8px;

  font-size: 10px;

  transition: transform 0.2s ease;

}



.reg-advanced-toggle[open] summary::before {

  transform: rotate(90deg);

}



.reg-advanced-toggle summary:hover {

  color: rgba(255, 255, 255, 0.8);

  background: rgba(255, 255, 255, 0.05);

}



.reg-advanced-content {

  padding: 10px 14px 14px;

}



#loginContainer .card {

  padding: 28px 24px;

}



/* Card en modo registro - sin scale, solo ajuste de padding */

#loginContainer .card.register-mode {

  padding: 22px 24px;

}



/* Hover normal en modo registro */

#loginContainer .card.register-mode:hover {

  transform: translateY(-3px);

}



/* Video de fondo con overlay */

#loginContainer .login-bg-video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 0;

  opacity: 1;

  /* Aumentado para mayor visibilidad */

  filter: blur(0px);

  /* Eliminado blur para nitidez */

}



/* Overlay oscuro sobre el video */

#loginContainer::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg,

      rgba(10, 14, 26, 0.1) 0%,

      rgba(15, 18, 35, 0.1) 50%,

      rgba(10, 14, 26, 0.1) 100%);

  /* Reducida opacidad del overlay */

  z-index: 1;

  pointer-events: none;

}



/* Ambient Glow Orbs */

#loginContainer::after {

  content: '';

  position: absolute;

  width: 600px;

  height: 600px;

  background: radial-gradient(circle,

      rgba(20, 184, 166, 0.2) 0%,

      rgba(6, 182, 212, 0.15) 30%,

      transparent 60%);

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  filter: blur(90px);

  animation: pulseAmbient 8s ease-in-out infinite alternate;

  z-index: 0;

  pointer-events: none;

}



@keyframes pulseAmbient {

  0% {

    opacity: 0.4;

    transform: translate(-50%, -50%) scale(0.95);

  }



  100% {

    opacity: 0.7;

    transform: translate(-50%, -50%) scale(1.15);

  }

}



@keyframes pulse-glow {



  0%,

  100% {

    transform: translate(-50%, -50%) scale(1) rotate(0deg);

    opacity: 0.6;

  }



  33% {

    transform: translate(-45%, -55%) scale(1.3) rotate(120deg);

    opacity: 0.8;

  }



  66% {

    transform: translate(-55%, -45%) scale(0.9) rotate(240deg);

  }

}



#loginContainer.active {

  transform: translateX(0) !important;

  box-shadow: -20px 0 100px rgba(0, 0, 0, 0.8);

  visibility: visible !important;

}



@keyframes rotateBorderSlow {

  0% {

    filter: hue-rotate(0deg);

  }



  100% {

    filter: hue-rotate(360deg);

  }

}



/* ULTRA-PREMIUM Glassmorphism Card - Violet/Magenta Palette */

#loginContainer .card {

  width: 420px;

  padding: 48px 36px;

  background: linear-gradient(145deg,

      rgba(10, 12, 20, 0.98) 0%,

      rgba(15, 18, 28, 0.96) 50%,

      rgba(12, 15, 24, 0.98) 100%);

  backdrop-filter: blur(32px) saturate(180%);

  -webkit-backdrop-filter: blur(32px) saturate(180%);

  border-radius: 28px;

  border: 1px solid rgba(139, 92, 246, 0.15);

  position: relative;

  z-index: 10;

  box-shadow:

    0 24px 80px rgba(0, 0, 0, 0.6),

    0 0 60px rgba(139, 92, 246, 0.12),

    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  margin: auto;

  align-self: center;

  overflow: visible;

}



/* Subtle Animated Border Glow */

#loginContainer .card::before {

  content: '';

  position: absolute;

  top: -1px;

  left: -1px;

  right: -1px;

  bottom: -1px;

  border-radius: 28px;

  background: linear-gradient(135deg,

      rgba(139, 92, 246, 0.2) 0%,

      rgba(236, 72, 153, 0.15) 50%,

      rgba(249, 115, 22, 0.1) 100%);

  z-index: -1;

  opacity: 0.4;

  animation: rotateBorderSlow 12s linear infinite;

}



#loginContainer .card:not(.register-mode):hover {

  transform: translateY(-3px);

  border-color: rgba(139, 92, 246, 0.25);

  box-shadow:

    0 28px 90px rgba(0, 0, 0, 0.7),

    0 0 80px rgba(139, 92, 246, 0.18),

    inset 0 1px 0 rgba(255, 255, 255, 0.08);

}



/* Minimal Close Button */

#loginContainer .back-btn-minimal {

  position: absolute;

  top: 20px;

  right: 20px;

  background: transparent;

  border: none;

  color: #9ca3af;

  font-size: 2rem;

  line-height: 1;

  cursor: pointer;

  padding: 4px 8px;

  transition: all 0.2s ease;

  z-index: 10;

  opacity: 0.5;

}



#loginContainer .back-btn-minimal:hover {

  opacity: 1;

  color: #f0fdfa;

  transform: rotate(90deg);

}



/* Logo Neo-Tech */

#loginContainer .login-logo {

  display: flex;

  justify-content: center;

  margin-bottom: 1.5rem;

  animation: logo-float 3s ease-in-out infinite;

}



#loginContainer .logo-image {

  width: 100px;

  height: 100px;

  object-fit: contain;

  filter: drop-shadow(0 4px 16px rgba(139, 92, 246, 0.3));

}



@keyframes logo-float {



  0%,

  100% {

    transform: translateY(0px);

  }



  50% {

    transform: translateY(-8px);

  }

}



/* Title - Large Bold "Sign in" */

#loginContainer .title {

  text-align: center;

  margin-bottom: 2.5rem;

}



#loginContainer .title h1 {

  font-size: 2rem;

  font-weight: 700;

  color: #f0fdfa;

  margin: 0 0 0.75rem 0;

  letter-spacing: -0.02em;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;

}



#loginContainer .title span {

  color: #9ca3af;

  text-align: center;

  display: block;

  font-size: 0.875rem;

  font-weight: 400;

  opacity: 0.7;

}



/* Form Fields */

#loginContainer .field {

  margin-bottom: 2rem;

  display: block;

}



/* Labels - Above inputs */

#loginContainer .field>span {

  display: block;

  color: #9ca3af;

  font-size: 0.8125rem;

  font-weight: 500;

  margin-bottom: 0.75rem;

  text-transform: none;

  letter-spacing: 0;

  margin-left: 0;

}



/* Input Container */

#loginContainer .input {

  position: relative;

  display: flex;

  align-items: center;

}



/* Inputs - Ultra Minimalist Underline Style */

#loginContainer .input input {

  width: 100%;

  background: transparent;

  border: none;

  border-bottom: 1px solid rgba(148, 163, 184, 0.25);

  border-radius: 0;

  padding: 12px 0;

  color: #f0fdfa;

  font-size: 0.9375rem;

  font-weight: 400;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  outline: none;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

}



#loginContainer .input input:focus {

  border-bottom-color: rgba(139, 92, 246, 0.6);

  box-shadow: 0 1px 0 rgba(139, 92, 246, 0.6);

}



#loginContainer .input input::placeholder {

  color: #64748b;

  opacity: 0.6;

}



/* Input Icons - Hidden for minimal look */

#loginContainer .input .icon {

  display: none;

}



/* Password Toggle Button - Minimal */

#loginContainer .input .toggle {

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  background: transparent;

  border: none;

  font-size: 1rem;

  cursor: pointer;

  padding: 4px 8px;

  opacity: 0.5;

  transition: all 0.2s ease;

  z-index: 2;

  color: #94a3b8;

}



#loginContainer .input .toggle:hover {

  opacity: 1;

}



/* Button - Dark Minimal Style */

#loginContainer .primary {

  width: 100%;

  background: rgba(30, 35, 50, 0.6);

  color: #f0fdfa;

  font-weight: 600;

  padding: 14px;

  border-radius: 12px;

  border: 1px solid rgba(139, 92, 246, 0.2);

  cursor: pointer;

  font-size: 0.9375rem;

  letter-spacing: 0.02em;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  margin-top: 1.5rem;

  position: relative;

  overflow: hidden;

}



/* Button Shimmer - Subtle */

#loginContainer .primary::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);

  transition: left 0.6s ease;

}



#loginContainer .primary:hover::before {

  left: 100%;

}



#loginContainer .primary:hover {

  background: rgba(40, 45, 60, 0.7);

  border-color: rgba(139, 92, 246, 0.4);

  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);

}



#loginContainer .primary:active {

  transform: scale(0.98);

}



/* Actions (links) - Minimal style with arrow */

#loginContainer .actions {

  margin-top: 1.5rem;

  text-align: center;

}



#loginContainer .actions .link {

  color: #9ca3af;

  text-decoration: none;

  font-size: 0.8125rem;

  transition: all 0.2s ease;

  display: inline-flex;

  align-items: center;

  gap: 4px;

}



#loginContainer .actions .link::after {

  content: '\203A';

  font-size: 1.25rem;

  transition: transform 0.2s ease;

}



#loginContainer .actions .link:hover {

  color: #a78bfa;

}



#loginContainer .actions .link:hover::after {

  transform: translateX(2px);

}



/* Hint text - Violet/Magenta accent */

#loginContainer .hint {

  margin-top: 1rem;

  padding: 0.75rem;

  background: rgba(168, 85, 247, 0.1);

  border-left: 3px solid rgba(236, 72, 153, 0.5);

  border-radius: 6px;

  font-size: 0.75rem;

  color: #c4b5fd;

  line-height: 1.4;

}



/* Card Header - Brand & Back Button */

#loginContainer .card-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 1.5rem;

}



#loginContainer .brand {

  display: flex;

  align-items: center;

  gap: 12px;

}



#loginContainer .back-btn {

  background: transparent;

  border: none;

  color: #94a3b8;

  font-size: 1.5rem;

  cursor: pointer;

  padding: 4px 8px;

  transition: color 0.2s ease;

}



#loginContainer .back-btn:hover {

  color: #ec4899;

}



/* Responsive Split */

/* Responsive Split */

@media (max-width: 1024px) {

  .landing-container.split-mode {

    width: 100%;

    opacity: 0.3;

    pointer-events: none;

  }



  #loginContainer {

    width: 100%;

    background: rgba(15, 23, 42, 0.98);

    z-index: 2147483647 !important;

  }

}



/* =============================================

   DASHBOARD MULTIMEDIA STYLES

   Estilos modernos para componentes de visualización

   ============================================= */



/* =============================================

   1. ANIMATED STATS CARDS

   ============================================= */

.stats-card {

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: 16px;

  padding: 24px;

  position: relative;

  overflow: hidden;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  backdrop-filter: blur(10px);

}



.stats-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: var(--card-color);

  opacity: 0.8;

}



.stats-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);

  border-color: var(--card-color);

}



.stats-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 16px;

}



.stats-icon {

  font-size: 32px;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));

}



.stats-trend {

  font-size: 14px;

  font-weight: 600;

  padding: 4px 12px;

  border-radius: 20px;

  display: flex;

  align-items: center;

  gap: 4px;

}



.stats-trend.trend-up {

  background: rgba(46, 213, 115, 0.15);

  color: #2ed573;

}



.stats-trend.trend-down {

  background: rgba(255, 71, 87, 0.15);

  color: #ff4757;

}



.stats-body {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.stats-title {

  font-size: 14px;

  font-weight: 500;

  color: var(--muted);

  margin: 0;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.stats-value {

  font-size: 36px;

  font-weight: 700;

  color: var(--text);

  line-height: 1;

  font-variant-numeric: tabular-nums;

}



.stats-progress {

  height: 8px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 4px;

  overflow: hidden;

  position: relative;

}



.progress-bar {

  height: 100%;

  background: linear-gradient(90deg, var(--card-color), var(--accent-2));

  border-radius: 4px;

  transition: width 0.3s ease;

  position: relative;

  overflow: hidden;

}



.progress-bar::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

  animation: shimmer 2s infinite;

}



.stats-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 12px;

  color: var(--muted);

}



.stats-target {

  font-weight: 600;

  color: var(--text);

}



/* =============================================

   2. ACTIVITY FEED

   ============================================= */

.activity-feed {

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: 16px;

  padding: 24px;

  backdrop-filter: blur(10px);

}



.feed-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

  padding-bottom: 16px;

  border-bottom: 1px solid var(--border);

}



.feed-header h3 {

  margin: 0;

  font-size: 18px;

  font-weight: 600;

  color: var(--text);

}



.pulse-indicator {

  width: 12px;

  height: 12px;

  background: #2ed573;

  border-radius: 50%;

  position: relative;

  animation: pulse 2s infinite;

}



.pulse-indicator::before {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  height: 100%;

  background: #2ed573;

  border-radius: 50%;

  animation: pulse-ring 2s infinite;

}



@keyframes pulse {



  0%,

  100% {

    opacity: 1;

  }



  50% {

    opacity: 0.5;

  }

}



@keyframes pulse-ring {

  0% {

    width: 100%;

    height: 100%;

    opacity: 1;

  }



  100% {

    width: 200%;

    height: 200%;

    opacity: 0;

  }

}



.feed-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

  max-height: 400px;

  overflow-y: auto;

}



.feed-item {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 12px;

  background: rgba(255, 255, 255, 0.03);

  border-radius: 12px;

  border-left: 3px solid var(--item-color);

  transition: all 0.2s ease;

  animation: slideIn 0.3s ease;

}



@keyframes slideIn {

  from {

    opacity: 0;

    transform: translateX(-20px);

  }



  to {

    opacity: 1;

    transform: translateX(0);

  }

}



.feed-item:hover {

  background: rgba(255, 255, 255, 0.06);

  transform: translateX(4px);

}



.feed-icon {

  font-size: 24px;

  flex-shrink: 0;

}



.feed-content {

  flex: 1;

  min-width: 0;

}



.feed-title {

  font-size: 14px;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 4px;

}



.feed-description {

  font-size: 12px;

  color: var(--muted);

  line-height: 1.4;

}



.feed-time {

  font-size: 11px;

  color: var(--muted);

  white-space: nowrap;

  flex-shrink: 0;

}



/* =============================================

   3. GAUGE CHART

   ============================================= */

.gauge-chart {

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: 16px;

  padding: 24px;

  text-align: center;

  backdrop-filter: blur(10px);

}



.gauge-title {

  font-size: 16px;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 20px;

}



.gauge-svg {

  width: 100%;

  max-width: 200px;

  height: auto;

  margin: 0 auto;

  display: block;

}



.gauge-value {

  transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);

}



.gauge-needle {

  transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);

  transform-origin: center;

}



.gauge-value-display {

  margin: 20px 0;

  display: flex;

  align-items: baseline;

  justify-content: center;

  gap: 4px;

}



.gauge-number {

  font-size: 48px;

  font-weight: 700;

  color: var(--text);

  line-height: 1;

  font-variant-numeric: tabular-nums;

}



.gauge-unit {

  font-size: 20px;

  font-weight: 500;

  color: var(--muted);

}



.gauge-legend {

  display: flex;

  justify-content: center;

  gap: 16px;

  margin-top: 20px;

  flex-wrap: wrap;

}



.legend-item {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 12px;

  color: var(--muted);

}



.legend-color {

  width: 12px;

  height: 12px;

  border-radius: 3px;

}



/* =============================================

   4. TIMELINE CHART

   ============================================= */

.timeline-chart {

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: 16px;

  padding: 24px;

  backdrop-filter: blur(10px);

}



.timeline-title {

  font-size: 18px;

  font-weight: 600;

  color: var(--text);

  margin: 0 0 24px 0;

}



.timeline-container {

  position: relative;

  padding-left: 40px;

}



.timeline-container::before {

  content: '';

  position: absolute;

  left: 16px;

  top: 0;

  bottom: 0;

  width: 2px;

  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));

  opacity: 0.3;

}



.timeline-item {

  position: relative;

  padding-bottom: 32px;

  animation: fadeInUp 0.5s ease both;

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.timeline-marker {

  position: absolute;

  left: -32px;

  top: 0;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  box-shadow: 0 0 0 4px var(--card-bg);

  z-index: 1;

}



.timeline-content {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 16px;

  transition: all 0.2s ease;

}



.timeline-content:hover {

  background: rgba(255, 255, 255, 0.06);

  transform: translateX(4px);

}



.timeline-time {

  font-size: 12px;

  color: var(--muted);

  margin-bottom: 8px;

  font-weight: 500;

}



.timeline-event-title {

  font-size: 14px;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 4px;

}



.timeline-event-desc {

  font-size: 13px;

  color: var(--muted);

  line-height: 1.5;

}



/* =============================================

   5. HEATMAP CALENDAR

   ============================================= */

.heatmap-calendar {

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: 16px;

  padding: 24px;

  backdrop-filter: blur(10px);

}



.heatmap-title {

  font-size: 18px;

  font-weight: 600;

  color: var(--text);

  margin: 0 0 20px 0;

}



.heatmap-grid {

  display: flex;

  gap: 3px;

  overflow-x: auto;

  padding: 10px 0;

}



.heatmap-week {

  display: flex;

  flex-direction: column;

  gap: 3px;

}



.heatmap-day {

  width: 12px;

  height: 12px;

  border-radius: 2px;

  cursor: pointer;

  transition: all 0.2s ease;

  position: relative;

}



.heatmap-day:hover {

  transform: scale(1.5);

  z-index: 10;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

}



.heatmap-day:hover::after {

  content: attr(title);

  position: absolute;

  bottom: 100%;

  left: 50%;

  transform: translateX(-50%);

  background: rgba(0, 0, 0, 0.9);

  color: white;

  padding: 6px 10px;

  border-radius: 6px;

  font-size: 11px;

  white-space: nowrap;

  margin-bottom: 8px;

  z-index: 100;

  pointer-events: none;

}



.heatmap-legend {

  display: flex;

  align-items: center;

  gap: 6px;

  margin-top: 16px;

  font-size: 12px;

  color: var(--muted);

  justify-content: flex-end;

}



.legend-box {

  width: 12px;

  height: 12px;

  border-radius: 2px;

}



/* =============================================

   RESPONSIVE DESIGN

   ============================================= */

@media (max-width: 768px) {

  .stats-card {

    padding: 16px;

  }



  .stats-value {

    font-size: 28px;

  }



  .gauge-number {

    font-size: 36px;

  }



  .timeline-container {

    padding-left: 32px;

  }



  .timeline-marker {

    width: 24px;

    height: 24px;

    left: -28px;

    font-size: 12px;

  }



  .heatmap-day {

    width: 10px;

    height: 10px;

  }

}



/* =============================================

   DARK MODE ADJUSTMENTS

   ============================================= */

html.theme-dark .stats-card,

html.theme-dark .activity-feed,

html.theme-dark .gauge-chart,

html.theme-dark .timeline-chart,

html.theme-dark .heatmap-calendar {

  background: rgba(16, 18, 40, 0.8);

}



html.theme-dark .feed-item,

html.theme-dark .timeline-content {

  background: rgba(255, 255, 255, 0.05);

}



html.theme-dark .feed-item:hover,

html.theme-dark .timeline-content:hover {

  background: rgba(255, 255, 255, 0.08);

}



/* =============================================

   ANIMATIONS & TRANSITIONS

   ============================================= */

@keyframes glow {



  0%,

  100% {

    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);

  }



  50% {

    box-shadow: 0 0 30px rgba(102, 126, 234, 0.6);

  }

}



.stats-card:hover::before {

  animation: glow 2s infinite;

}



/* Smooth scrollbar para feeds */

.feed-list::-webkit-scrollbar {

  width: 6px;

}



.feed-list::-webkit-scrollbar-track {

  background: rgba(255, 255, 255, 0.05);

  border-radius: 3px;

}



.feed-list::-webkit-scrollbar-thumb {

  background: rgba(255, 255, 255, 0.2);

  border-radius: 3px;

}



.feed-list::-webkit-scrollbar-thumb:hover {

  background: rgba(255, 255, 255, 0.3);

}



/* =============================================

   DASHBOARD COMPACTO - SIN SCROLL

   ============================================= */



.dashboard-content {

  padding: 16px;

  max-width: 100%;

  height: calc(100vh - 32px);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.dashboard-header-compact {

  margin: 0;

  padding: 12px 16px;

  background: linear-gradient(135deg, rgba(119, 93, 208, 0.08), rgba(0, 227, 150, 0.06));

  border-radius: 16px;

  border: 1px solid rgba(119, 93, 208, 0.15);

  backdrop-filter: blur(8px);

}



.dashboard-header-compact h2 {

  margin: 0;

  font-size: 20px;

  font-weight: 700;

  color: #fff;

  background: linear-gradient(135deg, #a78bfa, #34d399);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  letter-spacing: -0.3px;

}



/* Stats Grid - Compacto */

.stats-grid-compact {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 12px;

  flex-shrink: 0;

}



.stat-card-compact {

  background: rgba(15, 23, 42, 0.6);

  backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 16px;

  padding: 16px;

  display: flex;

  align-items: center;

  gap: 12px;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

  overflow: hidden;

}

.stat-card-compact::before {

  content: '';

  position: absolute;

  inset: 0;

  border-radius: 16px;

  opacity: 0;

  transition: opacity 0.3s ease;

  background: radial-gradient(circle at 30% 50%, currentColor, transparent 70%);

  pointer-events: none;

}

.stat-card-compact:hover::before {

  opacity: 0.04;

}

.stat-card-compact:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);

}



.stat-icon {

  font-size: 32px;

  filter: drop-shadow(0 0 8px rgba(119, 93, 208, 0.5));

}



.stat-data {

  flex: 1;

}



.stat-label {

  display: block;

  font-size: 11px;

  color: #94a3b8;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 4px;

}



.stat-value {

  font-size: 24px;

  font-weight: 700;

  color: #fff;

  margin: 0;

  background: linear-gradient(135deg, #00E396, #775DD0);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



/* Charts Grid - Compacto */

.charts-grid-compact {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;

  flex: 1;

  min-height: 0;

}



.chart-card-compact {

  background: rgba(15, 23, 42, 0.6);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 12px;

  padding: 16px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



.chart-card-compact h4 {

  margin: 0 0 12px 0;

  font-size: 13px;

  font-weight: 600;

  color: #cbd5e1;

}



.chart-card-compact>div:last-child {

  flex: 1;

  min-height: 0;

}



/* Responsive */

@media (max-width: 1200px) {

  .stats-grid-compact {

    grid-template-columns: repeat(2, 1fr);

  }



  .charts-grid-compact {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 768px) {

  .dashboard-content {

    padding: 12px;

  }



  .stats-grid-compact {

    grid-template-columns: 1fr;

    gap: 8px;

  }



  .stat-card-compact {

    padding: 10px;

  }



  .stat-icon {

    font-size: 24px;

  }



  .stat-value {

    font-size: 20px;

  }

}



/* History Tables Grid */

.history-tables-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  flex: 1;

  min-height: 0;

  overflow: hidden;

}



.history-table-card {

  background: rgba(15, 23, 42, 0.6);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 12px;

  padding: 12px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



.history-table-card h4 {

  margin: 0 0 10px 0;

  font-size: 13px;

  font-weight: 600;

  color: #cbd5e1;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.table-wrapper {

  flex: 1;

  overflow-y: auto;

  overflow-x: hidden;

}



.history-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 11px;

}



.history-table thead {

  position: sticky;

  top: 0;

  background: rgba(15, 23, 42, 0.95);

  z-index: 10;

}



.history-table th {

  padding: 8px 6px;

  text-align: left;

  font-weight: 600;

  color: #94a3b8;

  text-transform: uppercase;

  font-size: 10px;

  letter-spacing: 0.5px;

  border-bottom: 1px solid rgba(119, 93, 208, 0.3);

}



.history-table td {

  padding: 8px 6px;

  color: #e2e8f0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.history-table tbody tr {

  transition: background 0.2s ease;

}



.history-table tbody tr:nth-child(even) {

  background: rgba(255, 255, 255, 0.02);

}



.history-table tbody tr:hover {

  background: rgba(119, 93, 208, 0.15);

}



.no-data {

  text-align: center !important;

  color: #64748b !important;

  font-style: italic;

  padding: 32px 20px !important;

  font-size: 12px;

  letter-spacing: 0.3px;

  position: relative;

}

.no-data::before {

  content: '📭';

  display: block;

  font-size: 24px;

  margin-bottom: 8px;

  font-style: normal;

  opacity: 0.5;

}



.status-badge {

  padding: 3px 8px;

  border-radius: 12px;

  font-size: 10px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.3px;

}



.status-success {

  background: rgba(0, 227, 150, 0.2);

  color: #00E396;

  border: 1px solid rgba(0, 227, 150, 0.3);

}



.status-error {

  background: rgba(255, 69, 96, 0.2);

  color: #FF4560;

  border: 1px solid rgba(255, 69, 96, 0.3);

}



/* Scrollbar para tablas */

.table-wrapper::-webkit-scrollbar {

  width: 4px;

}



.table-wrapper::-webkit-scrollbar-track {

  background: rgba(255, 255, 255, 0.05);

  border-radius: 2px;

}



.table-wrapper::-webkit-scrollbar-thumb {

  background: rgba(119, 93, 208, 0.5);

  border-radius: 2px;

}



.table-wrapper::-webkit-scrollbar-thumb:hover {

  background: rgba(119, 93, 208, 0.7);

}



/* Responsive para tablas */

@media (max-width: 1400px) {

  .history-tables-grid {

    grid-template-columns: 1fr;

  }



  .history-table-card {

    max-height: 300px;

  }

}



@media (max-width: 768px) {

  .history-table {

    font-size: 10px;

  }



  .history-table th,

  .history-table td {

    padding: 6px 4px;

  }

}



/* Boton de descarga PRO */

.btn-download {

  background: rgba(0, 227, 150, 0.12);

  border: 1px solid rgba(0, 227, 150, 0.25);

  color: #00E396;

  padding: 6px 10px;

  border-radius: 8px;

  cursor: pointer;

  font-size: 13px;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  min-width: 32px;

  min-height: 32px;

}



.btn-download:hover {

  background: rgba(0, 227, 150, 0.25);

  border-color: rgba(0, 227, 150, 0.5);

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(0, 227, 150, 0.2);

}



.btn-download:active {

  transform: translateY(0) scale(0.96);

  box-shadow: none;

}



/* Nombre de archivo */

.file-name {

  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  font-size: 11px;

  color: #cbd5e1;

  max-width: 220px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  cursor: default;

  position: relative;

}



.file-name:hover {

  color: #e2e8f0;

}



.file-name[title]:hover::after {

  content: attr(title);

  position: absolute;

  left: 0;

  bottom: 100%;

  background: rgba(15, 23, 42, 0.95);

  border: 1px solid rgba(139, 92, 246, 0.3);

  color: #e2e8f0;

  padding: 6px 10px;

  border-radius: 8px;

  font-size: 11px;

  white-space: nowrap;

  z-index: 100;

  pointer-events: none;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

  animation: tooltip-in 0.15s ease-out;

}



@keyframes tooltip-in {

  from { opacity: 0; transform: translateY(4px); }

  to { opacity: 1; transform: translateY(0); }

}



/* =============================================

   FUTURISTIC DASHBOARD STYLES (APEXCHARTS)

   ============================================= */



.stat-card-modern {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 160px;

  position: relative;

  overflow: hidden;

}



.stat-info {

  z-index: 2;

}



.stat-label {

  color: var(--text-muted);

  font-size: 0.85rem;

  text-transform: uppercase;

  letter-spacing: 1px;

  display: block;

  margin-bottom: 8px;

}



.stat-value {

  font-size: 2rem;

  font-weight: 700;

  color: #fff;

  margin: 0;

  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);

}



.stat-chart {

  position: absolute;

  bottom: -10px;

  left: 0;

  right: 0;

  z-index: 1;

}



.card-header {

  margin-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  padding-bottom: 10px;

}



.card-header h3 {

  margin: 0;

  font-size: 1.1rem;

  color: var(--text-main);

  font-weight: 600;

}



/* ApexCharts Tooltip Customization */

.apexcharts-tooltip {

  background: rgba(20, 24, 36, 0.9) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important;

  color: #fff !important;

}



.apexcharts-tooltip-title {

  background: rgba(255, 255, 255, 0.05) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

  font-family: inherit !important;

}



.apexcharts-text {

  fill: #cbd5e1 !important;

}



/* Neon Glow Effects */

.stat-card-modern:nth-child(1) .stat-value {

  text-shadow: 0 0 15px rgba(119, 93, 208, 0.5);

}



.stat-card-modern:nth-child(2) .stat-value {

  text-shadow: 0 0 15px rgba(255, 69, 96, 0.5);

}



.stat-card-modern:nth-child(3) .stat-value {

  text-shadow: 0 0 15px rgba(0, 227, 150, 0.5);

}



.stat-card-modern:nth-child(4) .stat-value {

  text-shadow: 0 0 15px rgba(254, 176, 25, 0.5);

}



/* =============================================

   BENTO GRID PREMIUM LANDING STYLES

   ============================================= */



/* Container Bento Style */

html:has(.landing-container.bento-style),

body:has(.landing-container.bento-style) {

  overflow: auto !important;

  height: auto !important;

}



.landing-container.bento-style {

  min-height: 100vh;

  height: auto;

  overflow: visible;

  background: transparent;

  padding: 0;

  position: relative;

}



/* Hero Video Background */

.hero-video-bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 12px;

  z-index: 0;

}



.hero-video-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(10, 10, 15, 0.85) 0%, rgba(10, 10, 15, 0.6) 100%);

  border-radius: 12px;

  z-index: 1;

}



.hero-content-over {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.landing-container.bento-style::before {

  content: '';

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: none;

  pointer-events: none;

  z-index: 0;

}



/* Wave Decorative Element */

.landing-container.bento-style::after {

  content: '';

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  height: 300px;

  background: 

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='2' d='M0,160 C320,280 720,40 1440,160 C1440,200 1440,240 1440,280 L1440,320 L0,320 L0,280 C0,240 0,200 0,160'/%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1.5' d='M0,180 C360,300 800,60 1440,180'/%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1' d='M0,200 C400,320 840,80 1440,200'/%3E%3C/svg%3E") center bottom/cover no-repeat;

  pointer-events: none;

  z-index: 0;

}



/* Bento Header */

.bento-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(15, 5, 25, 0.95);

  backdrop-filter: blur(20px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.header-content {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  padding: 12px 40px;

  max-width: calc(100vw - 60px);

  margin: 0 auto;

}



.header-location {

  font-size: 11px;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.5);

  margin-left: 12px;

}



.landing-logo {

  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 800;

  font-size: 18px;

  color: #fff;

  letter-spacing: -0.3px;

}



.landing-logo span:last-child {

  background: linear-gradient(135deg, #00ffff, #ff00ff);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.4));

}



.logo-emoji {

  font-size: 22px;

  filter: drop-shadow(0 0 10px rgba(255, 213, 79, 0.6));

}



.landing-nav {

  display: flex;

  gap: 32px;

}



.landing-nav .nav-link {

  color: rgba(255, 255, 255, 0.6);

  text-decoration: none;

  font-size: 13px;

  font-weight: 500;

  transition: all 0.2s;

  position: relative;

}



.landing-nav .nav-link::after {

  content: '';

  position: absolute;

  bottom: -4px;

  left: 0;

  width: 0;

  height: 2px;

  background: linear-gradient(90deg, #a855f7, #e879f9);

  transition: width 0.3s;

}



.landing-nav .nav-link:hover {

  color: #fff;

}



.landing-nav .nav-link:hover::after {

  width: 100%;

}



/* Service Illustration */

.service-illustration {

  position: absolute;

  top: 15px;

  right: 15px;

  width: 90px;

  height: 90px;

  opacity: 1;

  z-index: 2;

}



.service-illustration svg {

  width: 100%;

  height: 100%;

  filter: drop-shadow(0 8px 20px rgba(168, 85, 247, 0.25));

}



/* Hero Illustration */

.hero-illustration {

  position: absolute;

  top: 15px;

  right: 15px;

  width: 160px;

  height: 160px;

  opacity: 1;

  z-index: 2;

}



.hero-illustration svg {

  width: 100%;

  height: 100%;

  filter: drop-shadow(0 10px 30px rgba(168, 85, 247, 0.3));

}



/* Bento Main */

.bento-main {

  padding: 30px 60px;

  max-width: 1900px;

  margin: 0 auto;

  overflow-y: auto;

}



/* ========== BENTO GRID ========== */

.bento-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-auto-rows: minmax(90px, auto);

  gap: 24px;

}



.bento-card {

  background: rgba(20, 20, 25, 0.9);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  padding: 22px;

  transition: all 0.3s ease;

}



.bento-card:hover {

  border-color: rgba(255, 165, 0, 0.3);

  transform: translateY(-2px);

}



/* LEFT STACK - Contenedor izquierdo */

.left-stack {

  grid-column: span 2;

  grid-row: span 1;

  display: flex;

  flex-direction: column;

  gap: 24px;

}



.left-stack .hero-card {

  grid-column: unset;

  grid-row: unset;

  flex: 1;

  min-height: 280px;

}



.services-tech-section-stacked {

  background: transparent !important;

  border: none !important;

  padding: 0 !important;

}



.services-tech-grid-stacked {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

}



.services-tech-grid-stacked .service-tech-card {

  min-height: 220px;

}



/* Hero Card */

.hero-card {

  grid-column: span 2;

  grid-row: span 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 12px;

  position: relative;

  overflow: hidden;

}



.hero-badge {

  font-size: 11px;

  color: #ffa500;

  background: rgba(255, 165, 0, 0.1);

  padding: 6px 12px;

  border-radius: 20px;

  width: fit-content;

}



.hero-card h1 {

  font-size: 30px;

  font-weight: 800;

  color: #fff;

  line-height: 1.15;

  margin: 0;

}



.hero-desc {

  font-size: 15px;

  color: rgba(255, 255, 255, 0.65);

  margin: 0;

  line-height: 1.6;

}



.hero-buttons {

  display: flex;

  gap: 10px;

  margin-top: 8px;

}



.btn-primary {

  background: linear-gradient(135deg, #ffa500, #ff8c00);

  color: #000;

  border: none;

  padding: 14px 28px;

  border-radius: 10px;

  font-weight: 600;

  font-size: 15px;

  cursor: pointer;

  transition: all 0.3s;

}



.btn-primary:hover {

  transform: scale(1.02);

  box-shadow: 0 5px 20px rgba(255, 165, 0, 0.4);

}



.btn-secondary {

  background: transparent;

  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.2);

  padding: 14px 28px;

  border-radius: 10px;

  font-size: 15px;

  cursor: pointer;

  transition: all 0.3s;

}



.btn-secondary:hover {

  border-color: #ffa500;

  color: #ffa500;

}



/* Stat Cards */

.stat-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  gap: 4px;

}



.stat-icon {

  font-size: 20px;

}



.stat-number {

  font-size: 20px;

  font-weight: 800;

  color: #ffa500;

}



.stat-text {

  font-size: 10px;

  color: rgba(255, 255, 255, 0.5);

  text-transform: uppercase;

}



/* Service Main Card */

/* Service Main Pro con planes inline */

.service-main-pro,

.bento-card.service-main-pro {

  grid-column: span 2;

  grid-row: span 1;

  min-height: 320px;

  display: flex;

  flex-direction: column;

  background: linear-gradient(145deg, #0a0a14 0%, #080810 100%) !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  border: 1px solid rgba(255, 165, 0, 0.3);

  border-radius: 20px;

  box-shadow: 

    0 25px 50px rgba(0, 0, 0, 0.5),

    0 0 0 1px rgba(255, 165, 0, 0.1),

    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  position: relative;

  overflow: hidden;

  padding: 32px;

}



.service-main-pro::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, #ff8c00, #ffa500, #ffb347, #ffa500, #ff8c00);

  background-size: 300% 100%;

  animation: gradient-shift 4s ease infinite;

}



.service-main-pro::after {

  content: '';

  position: absolute;

  top: 0;

  right: 0;

  width: 200px;

  height: 200px;

  background: radial-gradient(circle, rgba(255, 165, 0, 0.08) 0%, transparent 70%);

  pointer-events: none;

}



.service-main-pro:hover {

  border-color: rgba(255, 165, 0, 0.5);

  box-shadow: 

    0 30px 60px rgba(0, 0, 0, 0.6),

    0 0 40px rgba(255, 165, 0, 0.15),

    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transform: translateY(-8px);

}



.service-main-header {

  display: flex;

  align-items: flex-start;

  gap: 20px;

  margin-bottom: 24px;

  position: relative;

  z-index: 2;

}



.service-main-icon {

  width: 72px;

  height: 72px;

  border-radius: 18px;

  background: linear-gradient(145deg, rgba(255, 165, 0, 0.15), rgba(255, 140, 0, 0.08));

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 

    0 10px 30px rgba(255, 165, 0, 0.2),

    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 165, 0, 0.25);

  flex-shrink: 0;

}



.service-main-icon img {

  width: 44px;

  height: 44px;

  object-fit: contain;

  filter: drop-shadow(0 0 12px rgba(255, 165, 0, 0.5));

}



.service-main-header h3 {

  font-family: 'Outfit', sans-serif;

  font-size: 30px;

  font-weight: 800;

  color: #fff;

  margin: 0 0 8px;

  letter-spacing: 1px;

  text-transform: uppercase;

  background: linear-gradient(135deg, #fff 0%, #ffa500 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}



.service-main-header p {

  font-family: 'Outfit', sans-serif;

  font-size: 14px;

  color: rgba(255, 255, 255, 0.6);

  margin: 0;

  letter-spacing: 0.3px;

}



.plans-inline {

  display: flex;

  flex-direction: column;

  gap: 14px;

  margin-bottom: 24px;

  position: relative;

  z-index: 2;

}



.plan-inline {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px 18px;

  background: linear-gradient(135deg, rgba(20, 20, 30, 0.8), rgba(15, 15, 25, 0.9));

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.plan-inline:hover {

  background: linear-gradient(135deg, rgba(30, 30, 45, 0.9), rgba(20, 20, 35, 0.95));

  border-color: rgba(255, 165, 0, 0.3);

  transform: translateX(8px);

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

}



.plan-inline.featured {

  background: linear-gradient(135deg, rgba(255, 165, 0, 0.12), rgba(255, 140, 0, 0.08));

  border: 2px solid rgba(255, 165, 0, 0.4);

  box-shadow: 

    0 8px 25px rgba(255, 165, 0, 0.15),

    inset 0 1px 0 rgba(255, 255, 255, 0.05);

}



.plan-inline.featured:hover {

  border-color: rgba(255, 165, 0, 0.6);

  box-shadow: 

    0 12px 35px rgba(255, 165, 0, 0.2),

    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transform: translateX(8px) scale(1.01);

}



.plan-inline-badge {

  color: #fbbf24;

  font-size: 14px;

  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));

}



.plan-inline-name {

  font-family: 'Outfit', sans-serif;

  font-size: 15px;

  font-weight: 700;

  color: #fff;

  min-width: 100px;

  letter-spacing: 0.5px;

}



.plan-inline-positions {

  font-family: 'Outfit', sans-serif;

  font-size: 11px;

  color: rgba(255, 255, 255, 0.6);

  background: rgba(255, 165, 0, 0.1);

  border: 1px solid rgba(255, 165, 0, 0.2);

  padding: 4px 10px;

  border-radius: 8px;

}



.plan-inline-price {

  margin-left: auto;

  font-family: 'Outfit', sans-serif;

  font-size: 18px;

  font-weight: 800;

  color: #ffa500;

  text-shadow: 0 0 20px rgba(255, 165, 0, 0.4);

}



.plan-inline-price small {

  font-size: 10px;

  font-weight: 400;

  opacity: 0.7;

}



.plan-inline.featured .plan-inline-price {

  color: #ffb347;

  text-shadow: 0 0 20px rgba(255, 179, 71, 0.5);

}



.plan-inline-features {

  font-size: 10px;

  color: rgba(255, 255, 255, 0.4);

  flex: 1;

}



.service-includes {

  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(16, 185, 129, 0.03));

  border: 1px solid rgba(34, 197, 94, 0.15);

  border-radius: 16px;

  padding: 18px 20px;

  margin-bottom: 20px;

  flex: 1;

  position: relative;

  z-index: 2;

}



.includes-title {

  display: block;

  font-family: 'Outfit', sans-serif;

  font-size: 11px;

  font-weight: 700;

  color: #4ade80;

  margin-bottom: 16px;

  text-transform: uppercase;

  letter-spacing: 1.5px;

}



.includes-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

}



.include-item {

  display: flex;

  align-items: center;

  gap: 10px;

  font-family: 'Outfit', sans-serif;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.75);

  letter-spacing: 0.2px;

}



.include-item svg {

  color: #4ade80;

  flex-shrink: 0;

  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.4));

}



.service-features-inline {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 16px;

}



.service-features-inline span {

  font-size: 11px;

  color: rgba(255, 255, 255, 0.6);

  background: rgba(34, 197, 94, 0.1);

  padding: 4px 10px;

  border-radius: 6px;

}



.service-main {

  grid-column: span 2;

  grid-row: span 2;

  position: relative;

  border-color: rgba(255, 165, 0, 0.2);

}



.service-badge {

  position: absolute;

  top: 12px;

  right: 12px;

  background: linear-gradient(135deg, #ffa500, #ff6b00);

  color: #000;

  font-size: 9px;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: 12px;

}



.service-icon-lg {

  font-size: 26px;

}



.service-main h3 {

  font-size: 18px;

  font-weight: 700;

  color: #fff;

  margin: 8px 0 4px;

}



.service-main p {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.6);

  margin: 0 0 8px;

}



.service-price {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.5);

  margin-bottom: 10px;

}



.service-price strong {

  color: #ffa500;

  font-size: 16px;

}



.service-features {

  list-style: none;

  padding: 0;

  margin: 0 0 12px;

  font-size: 11px;

  color: rgba(255, 255, 255, 0.7);

}



.service-features li {

  padding: 3px 0;

}



.btn-service-main {

  background: linear-gradient(135deg, #ffa500 0%, #ff8c00 50%, #ff6b00 100%);

  color: #000;

  border: none;

  padding: 14px 28px;

  border-radius: 12px;

  font-family: 'Outfit', sans-serif;

  font-weight: 700;

  font-size: 14px;

  letter-spacing: 0.5px;

  cursor: pointer;

  width: 100%;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

  z-index: 2;

  box-shadow: 

    0 4px 15px rgba(255, 165, 0, 0.3),

    inset 0 1px 0 rgba(255, 255, 255, 0.3);

  text-transform: none;

}



.btn-service-main:hover {

  transform: translateY(-2px);

  box-shadow: 

    0 8px 25px rgba(255, 165, 0, 0.4),

    inset 0 1px 0 rgba(255, 255, 255, 0.4);

}



.btn-service-main:active {

  transform: translateY(0);

}



/* Service Small Cards */

.service-card-sm {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.service-icon-sm {

  font-size: 24px;

}



.service-card-sm h4 {

  font-size: 14px;

  font-weight: 600;

  color: #fff;

  margin: 0;

}



.service-card-sm p {

  font-size: 11px;

  color: rgba(255, 255, 255, 0.5);

  margin: 0;

  line-height: 1.4;

}



.price-tag {

  font-size: 11px;

  color: #ffa500;

  margin-top: auto;

}



/* ========== SERVICES TECH SECTION ========== */

.services-tech-section {

  grid-column: 1 / -1;

  padding: 0;

  background: transparent !important;

  border: none !important;

  backdrop-filter: none !important;

}



.services-tech-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

  height: 100%;

}



.service-tech-card {

  background: linear-gradient(145deg, #0a0a14 0%, #080810 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 24px;

  padding: 32px;

  display: flex;

  flex-direction: column;

  position: relative;

  overflow: hidden;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

  min-height: 280px;

}



.service-tech-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background-size: 200% 100%;

  animation: gradient-shift 3s ease infinite;

}



.service-tech-card::after {

  content: '';

  position: absolute;

  top: 0;

  right: 0;

  width: 150px;

  height: 150px;

  border-radius: 50%;

  pointer-events: none;

  opacity: 0.5;

}



.service-tech-card:hover {

  transform: translateY(-8px) scale(1.02);

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

}



/* Dev Web Theme */

.service-tech-card.dev-web {

  border-color: rgba(6, 182, 212, 0.25);

}

.service-tech-card.dev-web::before {

  background: linear-gradient(90deg, #06b6d4, #3b82f6, #06b6d4);

}

.service-tech-card.dev-web::after {

  background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 70%);

}

.service-tech-card.dev-web:hover {

  border-color: rgba(6, 182, 212, 0.4);

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(6, 182, 212, 0.15);

}

.service-tech-card.dev-web .service-tech-icon {

  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.1));

  color: #06b6d4;

  border: 1px solid rgba(6, 182, 212, 0.3);

  box-shadow: 0 8px 20px rgba(6, 182, 212, 0.2);

}

.service-tech-card.dev-web .price-value {

  color: #06b6d4;

  text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);

}



/* Soporte IT Theme */

.service-tech-card.soporte-it {

  border-color: rgba(245, 158, 11, 0.25);

}

.service-tech-card.soporte-it::before {

  background: linear-gradient(90deg, #f59e0b, #ef4444, #f59e0b);

}

.service-tech-card.soporte-it::after {

  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);

}

.service-tech-card.soporte-it:hover {

  border-color: rgba(245, 158, 11, 0.4);

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(245, 158, 11, 0.15);

}

.service-tech-card.soporte-it .service-tech-icon {

  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.1));

  color: #f59e0b;

  border: 1px solid rgba(245, 158, 11, 0.3);

  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);

}

.service-tech-card.soporte-it .price-value {

  color: #f59e0b;

  text-shadow: 0 0 20px rgba(245, 158, 11, 0.5);

}



.service-tech-icon {

  width: 56px;

  height: 56px;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 18px;

  transition: all 0.3s ease;

}



.service-tech-card:hover .service-tech-icon {

  transform: scale(1.1) rotate(5deg);

}



.service-tech-icon svg {

  width: 26px;

  height: 26px;

}



.service-tech-content {

  flex: 1;

}



.service-tech-header {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 8px;

}



.service-tech-header h4 {

  font-family: 'Outfit', sans-serif;

  font-size: 18px;

  font-weight: 700;

  color: #fff;

  margin: 0;

  letter-spacing: 0.3px;

}



.service-tech-badge {

  font-family: 'Outfit', sans-serif;

  font-size: 9px;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: 12px;

  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(6, 182, 212, 0.15));

  color: #22d3ee;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  border: 1px solid rgba(6, 182, 212, 0.3);

}



.service-tech-badge.orange {

  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.15));

  color: #fbbf24;

  border: 1px solid rgba(245, 158, 11, 0.3);

}



.service-tech-content > p {

  font-family: 'Outfit', sans-serif;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.55);

  margin: 0 0 14px;

  line-height: 1.5;

}



.service-tech-features {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.service-tech-features li {

  font-family: 'Outfit', sans-serif;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.65);

  padding-left: 2px;

}



.service-tech-features li::before {

  content: '✓';

  margin-right: 8px;

  opacity: 0.7;

}



.service-tech-price {

  margin-top: auto;

  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  display: flex;

  align-items: baseline;

  gap: 8px;

}



.price-label {

  font-family: 'Outfit', sans-serif;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.45);

}



.price-value {

  font-family: 'Outfit', sans-serif;

  font-size: 24px;

  font-weight: 800;

}



.price-value small {

  font-size: 13px;

  font-weight: 500;

  opacity: 0.7;

}



/* ========== VERIFIERS SECTION ========== */

.verifiers-section {

  grid-column: span 4;

  padding: 36px 40px;

  background: linear-gradient(135deg, rgba(20, 20, 30, 0.95), rgba(15, 15, 25, 0.98));

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.verifiers-header {

  text-align: center;

  margin-bottom: 20px;

}



.section-badge {

  display: inline-block;

  background: linear-gradient(135deg, #ff6b35, #f7931e);

  color: #000;

  font-size: 10px;

  font-weight: 800;

  padding: 6px 14px;

  border-radius: 20px;

  letter-spacing: 0.5px;

  margin-bottom: 10px;

}



.verifiers-header h3 {

  font-size: 26px;

  font-weight: 800;

  color: #fff;

  margin: 0 0 8px;

}



.verifiers-header p {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.55);

  margin: 0;

}



.verifiers-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 28px;

}



/* Verifier Card Base - Neon Style */

.verifier-card {

  background: linear-gradient(145deg, #0f0f19 0%, #0a0a14 100%) !important;

  backdrop-filter: none !important;

  border: 2px solid transparent;

  border-radius: 20px;

  padding: 28px 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

  overflow: visible;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}



/* Glow effect behind card */

.verifier-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  border-radius: 20px 20px 0 0;

}



/* Animated gradient overlay */

.verifier-card::after {

  content: '';

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%);

  opacity: 0;

  transition: opacity 0.4s ease;

  pointer-events: none;

}



.verifier-card:hover::after {

  opacity: 1;

}



.verifier-card:hover {

  transform: translateY(-10px) scale(1.03);

}



/* Icon Box - Premium */

.verifier-icon-box {

  width: 80px;

  height: 80px;

  border-radius: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 16px;

  position: relative;

  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}



/* Icon glow ring */

.verifier-icon-box::before {

  content: '';

  position: absolute;

  inset: -3px;

  border-radius: 22px;

  padding: 3px;

  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  opacity: 0;

  transition: opacity 0.3s ease;

}



.verifier-card:hover .verifier-icon-box::before {

  opacity: 1;

}



.verifier-3d-icon {

  width: 56px;

  height: 56px;

  object-fit: contain;

  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));

}



.verifier-card:hover .verifier-3d-icon {

  transform: scale(1.15) rotate(8deg) translateY(-8px);

}



.verifier-card:hover .verifier-icon-box {

  transform: translateY(-4px);

}



/* Content - Premium */

.verifier-content {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 10px;

  flex-wrap: wrap;

  justify-content: center;

}



.verifier-content h4 {

  font-size: 16px;

  font-weight: 800;

  color: #fff;

  margin: 0;

  letter-spacing: 0.5px;

  text-shadow: 0 2px 10px rgba(0,0,0,0.3);

}



.verifier-metric {

  font-size: 10px;

  font-weight: 800;

  padding: 4px 10px;

  border-radius: 12px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  animation: pulse-glow 2s ease-in-out infinite;

}



@keyframes pulse-glow {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.7; }

}



.verifier-desc {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.6);

  margin: 0;

  line-height: 1.5;

  max-width: 180px;

}



/* WhatsApp Theme - Neon */

.verifier-card.whatsapp {

  border-color: #25d366;

  box-shadow: 0 0 20px rgba(37, 211, 102, 0.4), 0 0 40px rgba(37, 211, 102, 0.2), inset 0 0 30px rgba(37, 211, 102, 0.05);

}

.verifier-card.whatsapp:hover {

  box-shadow: 0 0 30px rgba(37, 211, 102, 0.6), 0 0 60px rgba(37, 211, 102, 0.4), 0 0 100px rgba(37, 211, 102, 0.2), inset 0 0 40px rgba(37, 211, 102, 0.1);

}

.verifier-card.whatsapp::before {

  background: linear-gradient(90deg, #25d366, #5fff9e, #25d366);

  background-size: 200% 100%;

  animation: gradient-shift 3s ease infinite;

}

@keyframes gradient-shift {

  0%, 100% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

}

.verifier-card.whatsapp .verifier-icon-box {

  background: linear-gradient(135deg, rgba(37, 211, 102, 0.25), rgba(18, 140, 126, 0.15));

  box-shadow: 0 0 25px rgba(37, 211, 102, 0.5), inset 0 0 15px rgba(37, 211, 102, 0.1);

  border: 1px solid rgba(37, 211, 102, 0.4);

}

.verifier-card.whatsapp .verifier-3d-icon {

  filter: drop-shadow(0 0 20px rgba(37, 211, 102, 0.8));

}

.verifier-card.whatsapp .verifier-metric {

  background: rgba(37, 211, 102, 0.2);

  color: #5fff9e;

  box-shadow: 0 0 15px rgba(37, 211, 102, 0.5);

  border: 1px solid rgba(37, 211, 102, 0.5);

}

.verifier-card.whatsapp .verifier-content h4 {

  text-shadow: 0 0 20px rgba(37, 211, 102, 0.8);

}



/* Obras Sociales Theme - Neon */

.verifier-card.obras-sociales {

  border-color: #3b82f6;

  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2), inset 0 0 30px rgba(59, 130, 246, 0.05);

}

.verifier-card.obras-sociales:hover {

  box-shadow: 0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.4), 0 0 100px rgba(59, 130, 246, 0.2), inset 0 0 40px rgba(59, 130, 246, 0.1);

}

.verifier-card.obras-sociales::before {

  background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);

  background-size: 200% 100%;

  animation: gradient-shift 3s ease infinite;

}

.verifier-card.obras-sociales .verifier-icon-box {

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(6, 182, 212, 0.15));

  box-shadow: 0 0 25px rgba(59, 130, 246, 0.5), inset 0 0 15px rgba(59, 130, 246, 0.1);

  border: 1px solid rgba(59, 130, 246, 0.4);

}

.verifier-card.obras-sociales .verifier-3d-icon {

  filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.8));

}

.verifier-card.obras-sociales .verifier-metric {

  background: rgba(59, 130, 246, 0.2);

  color: #60a5fa;

  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);

  border: 1px solid rgba(59, 130, 246, 0.5);

}

.verifier-card.obras-sociales .verifier-content h4 {

  text-shadow: 0 0 20px rgba(59, 130, 246, 0.8);

}



/* BCRA Theme - Neon */

.verifier-card.bcra {

  border-color: #fbbf24;

  box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2), inset 0 0 30px rgba(251, 191, 36, 0.05);

}

.verifier-card.bcra:hover {

  box-shadow: 0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.4), 0 0 100px rgba(251, 191, 36, 0.2), inset 0 0 40px rgba(251, 191, 36, 0.1);

}

.verifier-card.bcra::before {

  background: linear-gradient(90deg, #fbbf24, #fde047, #fbbf24);

  background-size: 200% 100%;

  animation: gradient-shift 3s ease infinite;

}

.verifier-card.bcra .verifier-icon-box {

  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.15));

  box-shadow: 0 0 25px rgba(251, 191, 36, 0.5), inset 0 0 15px rgba(251, 191, 36, 0.1);

  border: 1px solid rgba(251, 191, 36, 0.4);

}

.verifier-card.bcra .verifier-3d-icon {

  filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8));

}

.verifier-card.bcra .verifier-metric {

  background: rgba(251, 191, 36, 0.2);

  color: #fde047;

  box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);

  border: 1px solid rgba(251, 191, 36, 0.5);

}

.verifier-card.bcra .verifier-content h4 {

  text-shadow: 0 0 20px rgba(251, 191, 36, 0.8);

}



/* IA Theme - Neon */

.verifier-card.ia-card {

  border-color: #a855f7;

  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4), 0 0 40px rgba(168, 85, 247, 0.2), inset 0 0 30px rgba(168, 85, 247, 0.05);

}

.verifier-card.ia-card:hover {

  box-shadow: 0 0 30px rgba(168, 85, 247, 0.6), 0 0 60px rgba(168, 85, 247, 0.4), 0 0 100px rgba(168, 85, 247, 0.2), inset 0 0 40px rgba(168, 85, 247, 0.1);

}

.verifier-card.ia-card::before {

  background: linear-gradient(90deg, #a855f7, #e879f9, #a855f7);

  background-size: 200% 100%;

  animation: gradient-shift 3s ease infinite;

}

.verifier-card.ia-card .verifier-icon-box {

  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(236, 72, 153, 0.15));

  box-shadow: 0 0 25px rgba(168, 85, 247, 0.5), inset 0 0 15px rgba(168, 85, 247, 0.1);

  border: 1px solid rgba(168, 85, 247, 0.4);

}

.verifier-card.ia-card .verifier-3d-icon {

  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.8));

}

.verifier-card.ia-card .verifier-metric {

  background: rgba(168, 85, 247, 0.2);

  color: #e879f9;

  box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);

  border: 1px solid rgba(168, 85, 247, 0.5);

}

.verifier-card.ia-card .verifier-content h4 {

  text-shadow: 0 0 20px rgba(168, 85, 247, 0.8);

}



/* ========== SOLUTIONS PRO SECTION ========== */

.solutions-card-pro,

.bento-card.solutions-card-pro {

  grid-column: span 2;

  padding: 28px;

  background: linear-gradient(145deg, #0a0a14 0%, #080810 100%) !important;

  backdrop-filter: none !important;

  border: 1px solid rgba(59, 130, 246, 0.25);

  border-radius: 20px;

}



.section-header-pro {

  margin-bottom: 20px;

  text-align: center;

}



.badge-pro {

  display: inline-block;

  font-family: 'Outfit', sans-serif;

  font-size: 9px;

  font-weight: 700;

  padding: 5px 12px;

  border-radius: 12px;

  margin-bottom: 10px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.badge-pro.blue {

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));

  color: #60a5fa;

  border: 1px solid rgba(59, 130, 246, 0.3);

}



.badge-pro.orange {

  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));

  color: #fbbf24;

  border: 1px solid rgba(245, 158, 11, 0.3);

}



.section-header-pro h3 {

  font-family: 'Outfit', sans-serif;

  font-size: 22px;

  font-weight: 800;

  color: #fff;

  margin: 0;

  letter-spacing: 0.5px;

}



.solutions-grid-pro {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 14px;

}



.solution-item-pro {

  background: linear-gradient(135deg, rgba(20, 20, 30, 0.8), rgba(15, 15, 25, 0.9));

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  padding: 18px 14px;

  text-align: center;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.solution-item-pro:hover {

  background: linear-gradient(135deg, rgba(30, 30, 45, 0.9), rgba(20, 20, 35, 0.95));

  border-color: rgba(59, 130, 246, 0.3);

  transform: translateY(-4px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

}



.solution-icon-pro {

  width: 48px;

  height: 48px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 12px;

  transition: all 0.3s ease;

}



.solution-item-pro:hover .solution-icon-pro {

  transform: scale(1.1);

}



.solution-icon-pro svg {

  width: 22px;

  height: 22px;

}



.solution-icon-pro.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

.solution-icon-pro.purple { background: rgba(168, 85, 247, 0.15); color: #a855f7; }

.solution-icon-pro.green { background: rgba(34, 197, 94, 0.15); color: #22c55e; }

.solution-icon-pro.orange { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }



.solution-item-pro h4 {

  font-family: 'Outfit', sans-serif;

  font-size: 14px;

  font-weight: 700;

  color: #fff;

  margin: 0 0 5px;

}



.solution-item-pro p {

  font-family: 'Outfit', sans-serif;

  font-size: 11px;

  color: rgba(255, 255, 255, 0.55);

  margin: 0;

}



/* ========== TECH SERVICES PRO ========== */

.tech-services-pro,

.bento-card.tech-services-pro {

  grid-column: span 2;

  padding: 28px;

  background: linear-gradient(145deg, #0a0a14 0%, #080810 100%) !important;

  backdrop-filter: none !important;

  border: 1px solid rgba(245, 158, 11, 0.25);

  border-radius: 20px;

}



.tech-grid-pro {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

}



.tech-item-pro {

  background: linear-gradient(135deg, rgba(20, 20, 30, 0.8), rgba(15, 15, 25, 0.9));

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  padding: 16px;

  display: flex;

  align-items: center;

  gap: 12px;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.tech-item-pro:hover {

  background: linear-gradient(135deg, rgba(30, 30, 45, 0.9), rgba(20, 20, 35, 0.95));

  border-color: rgba(245, 158, 11, 0.3);

  transform: translateY(-3px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

}



.tech-icon-pro {

  width: 42px;

  height: 42px;

  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));

  border: 1px solid rgba(245, 158, 11, 0.3);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fbbf24;

  flex-shrink: 0;

  transition: all 0.3s ease;

}



.tech-item-pro:hover .tech-icon-pro {

  transform: scale(1.1);

}



.tech-icon-pro svg {

  width: 18px;

  height: 18px;

}



.tech-info {

  display: flex;

  flex-direction: column;

  gap: 4px;

  flex: 1;

}



.tech-name-pro {

  font-family: 'Outfit', sans-serif;

  font-size: 13px;

  font-weight: 700;

  color: #fff;

  letter-spacing: 0.2px;

}



.tech-price-pro {

  font-family: 'Outfit', sans-serif;

  font-size: 14px;

  font-weight: 800;

  color: #fbbf24;

  text-shadow: 0 0 15px rgba(251, 191, 36, 0.4);

}



/* ========== PLANS PRO SECTION ========== */

.plans-card-pro {

  grid-column: span 3;

  padding: 24px;

}



.plans-header-pro {

  margin-bottom: 20px;

}



.plans-badge {

  display: inline-block;

  font-size: 10px;

  font-weight: 700;

  padding: 5px 12px;

  border-radius: 12px;

  background: rgba(168, 85, 247, 0.15);

  color: #a855f7;

  margin-bottom: 10px;

  text-transform: uppercase;

}



.plans-header-pro h3 {

  font-size: 20px;

  font-weight: 800;

  color: #fff;

  margin: 0 0 6px;

}



.plans-subtitle {

  font-size: 12px;

  color: #22c55e;

  margin: 0;

}



.plans-grid-pro {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

}



.plan-card-pro {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  padding: 20px;

  text-align: center;

  position: relative;

  transition: all 0.3s ease;

}



.plan-card-pro:hover {

  transform: translateY(-4px);

  border-color: rgba(255, 255, 255, 0.15);

}



.plan-card-pro.featured {

  background: linear-gradient(145deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.05));

  border-color: rgba(168, 85, 247, 0.3);

}



.plan-card-pro.featured:hover {

  border-color: rgba(168, 85, 247, 0.5);

}



.plan-popular-badge {

  position: absolute;

  top: -10px;

  left: 50%;

  transform: translateX(-50%);

  background: linear-gradient(135deg, #a855f7, #ec4899);

  color: #fff;

  font-size: 9px;

  font-weight: 700;

  padding: 4px 12px;

  border-radius: 12px;

  white-space: nowrap;

}



.plan-icon-pro {

  width: 48px;

  height: 48px;

  background: rgba(168, 85, 247, 0.12);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 12px;

  color: #a855f7;

}



.plan-icon-pro svg {

  width: 24px;

  height: 24px;

}



.plan-name-pro {

  display: block;

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 8px;

}



.plan-price-pro {

  margin-bottom: 16px;

}



.price-currency {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.5);

  margin-right: 2px;

}



.price-amount {

  font-size: 28px;

  font-weight: 800;

  color: #fff;

}



.plan-card-pro.featured .price-amount {

  color: #a855f7;

}



.price-period {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.5);

}



.plan-features-pro {

  list-style: none;

  padding: 0;

  margin: 0 0 16px;

  text-align: left;

}



.plan-features-pro li {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.7);

  padding: 4px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.plan-features-pro li:last-child {

  border-bottom: none;

}



.plan-btn-pro {

  width: 100%;

  padding: 10px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 8px;

  background: transparent;

  color: #fff;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

}



.plan-btn-pro:hover {

  background: rgba(255, 255, 255, 0.1);

}



.plan-btn-pro.featured {

  background: linear-gradient(135deg, #a855f7, #ec4899);

  border: none;

}



.plan-btn-pro.featured:hover {

  opacity: 0.9;

}



/* ========== CONTACT PRO ========== */

.contact-card-pro,

.bento-card.contact-card-pro {

  grid-column: span 1;

  padding: 28px;

  background: linear-gradient(145deg, #0a0a14 0%, #080810 100%) !important;

  backdrop-filter: none !important;

  border: 1px solid rgba(34, 197, 94, 0.25);

  border-radius: 20px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.contact-header-pro {

  margin-bottom: 20px;

  text-align: center;

}



.contact-badge {

  display: inline-block;

  font-family: 'Outfit', sans-serif;

  font-size: 9px;

  font-weight: 700;

  padding: 5px 12px;

  border-radius: 12px;

  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));

  color: #4ade80;

  margin-bottom: 12px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  border: 1px solid rgba(34, 197, 94, 0.3);

}



.contact-header-pro h3 {

  font-family: 'Outfit', sans-serif;

  font-size: 22px;

  font-weight: 800;

  color: #fff;

  margin: 0 0 6px;

  letter-spacing: 0.5px;

}



.contact-header-pro p {

  font-family: 'Outfit', sans-serif;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.55);

  margin: 0;

}



.contact-links-pro {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-bottom: 20px;

  flex: 1;

}



.contact-item-pro {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px 16px;

  background: linear-gradient(135deg, rgba(20, 20, 30, 0.8), rgba(15, 15, 25, 0.9));

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  text-decoration: none;

  transition: all 0.3s ease;

}



.contact-item-pro:hover {

  background: rgba(255, 255, 255, 0.06);

}



.contact-item-pro.whatsapp:hover {

  border-color: rgba(37, 211, 102, 0.3);

}



.contact-item-pro.email:hover {

  border-color: rgba(59, 130, 246, 0.3);

}



.contact-icon-pro {

  width: 36px;

  height: 36px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.contact-icon-pro svg {

  width: 18px;

  height: 18px;

}



.contact-item-pro.whatsapp .contact-icon-pro {

  background: rgba(37, 211, 102, 0.15);

  color: #25d366;

}



.contact-item-pro.email .contact-icon-pro {

  background: rgba(59, 130, 246, 0.15);

  color: #3b82f6;

}



.contact-info-pro {

  display: flex;

  flex-direction: column;

}



.contact-label {

  font-size: 10px;

  color: rgba(255, 255, 255, 0.5);

  text-transform: uppercase;

}



.contact-value {

  font-size: 13px;

  font-weight: 600;

  color: #fff;

}



.contact-location-pro {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 11px;

  color: rgba(255, 255, 255, 0.5);

  padding-top: 12px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

}



.contact-location-pro svg {

  color: #ef4444;

}



/* Plans Card */

.plans-card {

  grid-column: span 3;

}



.plans-card h3 {

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  margin: 0 0 12px;

}



.plans-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}



.plan-item {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 10px;

  padding: 12px;

  text-align: center;

  position: relative;

}



.plan-item.featured {

  border-color: rgba(255, 165, 0, 0.4);

  background: rgba(255, 165, 0, 0.05);

}



.plan-badge {

  position: absolute;

  top: -8px;

  left: 50%;

  transform: translateX(-50%);

  background: #ffa500;

  color: #000;

  font-size: 8px;

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 10px;

}



.plan-name {

  display: block;

  font-size: 12px;

  font-weight: 600;

  color: #fff;

}



.plan-price {

  display: block;

  font-size: 14px;

  font-weight: 800;

  color: #ffa500;

  margin: 2px 0;

}



.plan-price small {

  font-size: 10px;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.5);

}



.plan-desc {

  display: block;

  font-size: 10px;

  color: rgba(255, 255, 255, 0.5);

}



/* Contact Card */

.contact-card {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.contact-card h3 {

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  margin: 0;

}



.contact-card > p {

  font-size: 11px;

  color: rgba(255, 255, 255, 0.5);

  margin: 0;

}



.contact-links {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.contact-link {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  color: #fff;

  text-decoration: none;

  padding: 8px 12px;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 8px;

  transition: all 0.3s;

}



.contact-link:hover {

  background: rgba(255, 165, 0, 0.1);

  color: #ffa500;

}



.contact-link.whatsapp {

  background: rgba(37, 211, 102, 0.1);

  color: #25d366;

}



.contact-location {

  font-size: 10px;

  color: rgba(255, 255, 255, 0.4);

  margin-top: auto;

}



/* Solutions Card */

.solutions-card {

  grid-column: span 2;

}



.solutions-card h3 {

  font-size: 14px;

  font-weight: 700;

  color: #fff;

  margin: 0 0 12px;

}



.solutions-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

}



.solution-item {

  background: rgba(255, 255, 255, 0.03);

  border-radius: 10px;

  padding: 12px;

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.solution-item span {

  font-size: 20px;

}



.solution-item strong {

  font-size: 12px;

  color: #fff;

}



.solution-item p {

  font-size: 10px;

  color: rgba(255, 255, 255, 0.5);

  margin: 0;

  line-height: 1.3;

}



/* Tech Services Card */

.tech-services-card {

  grid-column: span 2;

}



.tech-services-card h3 {

  font-size: 14px;

  font-weight: 700;

  color: #fff;

  margin: 0 0 12px;

}



.tech-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

}



.tech-item {

  display: flex;

  align-items: center;

  gap: 8px;

  background: rgba(255, 255, 255, 0.03);

  border-radius: 8px;

  padding: 10px;

}



.tech-item span {

  font-size: 18px;

}



.tech-item strong {

  display: block;

  font-size: 11px;

  color: #fff;

}



.tech-price {

  font-size: 10px;

  color: #ffa500;

}



/* Testimonial Card */

.testimonial-card,

.bento-card.testimonial-card {

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  background: linear-gradient(145deg, #0a0a14 0%, #080810 100%) !important;

  backdrop-filter: none !important;

  border: 1px solid rgba(255, 165, 0, 0.2);

  border-radius: 20px;

  padding: 24px;

}



.quote-icon {

  font-size: 56px;

  color: rgba(255, 165, 0, 0.25);

  line-height: 1;

  position: absolute;

  top: 15px;

  left: 20px;

  font-family: Georgia, serif;

}



.testimonial-text {

  font-family: 'Outfit', sans-serif;

  font-size: 14px;

  color: rgba(255, 255, 255, 0.75);

  font-style: italic;

  line-height: 1.6;

  margin: 0 0 20px;

  padding-top: 30px;

  padding-left: 10px;

}



.testimonial-author {

  display: flex;

  align-items: center;

  gap: 14px;

  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.author-avatar {

  width: 44px;

  height: 44px;

  background: linear-gradient(135deg, #ffa500, #ff6b00);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: 'Outfit', sans-serif;

  font-size: 14px;

  font-weight: 700;

  color: #000;

  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);

}



.testimonial-author strong {

  display: block;

  font-family: 'Outfit', sans-serif;

  font-size: 14px;

  font-weight: 700;

  color: #fff;

}



.testimonial-author span {

  font-family: 'Outfit', sans-serif;

  font-size: 11px;

  color: rgba(255, 255, 255, 0.5);

}



/* CTA Card */

.cta-card,

.bento-card.cta-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: linear-gradient(145deg, #0f0a05 0%, #0a0805 100%) !important;

  backdrop-filter: none !important;

  border: 2px solid rgba(255, 165, 0, 0.4);

  border-radius: 20px;

  padding: 32px 28px;

  position: relative;

  overflow: hidden;

}



.cta-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, #ff8c00, #ffa500, #ffb347, #ffa500, #ff8c00);

  background-size: 300% 100%;

  animation: gradient-shift 4s ease infinite;

}



.cta-card h3 {

  font-family: 'Outfit', sans-serif;

  font-size: 20px;

  font-weight: 800;

  color: #fff;

  margin: 0 0 8px;

  letter-spacing: 0.5px;

}



.cta-card p {

  font-family: 'Outfit', sans-serif;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.6);

  margin: 0 0 18px;

}



.btn-cta-final {

  background: linear-gradient(135deg, #ffa500 0%, #ff8c00 50%, #ff6b00 100%);

  color: #000;

  border: none;

  padding: 14px 28px;

  border-radius: 12px;

  font-family: 'Outfit', sans-serif;

  font-weight: 700;

  font-size: 14px;

  cursor: pointer;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);

}



.btn-cta-final:hover {

  transform: translateY(-3px) scale(1.02);

  box-shadow: 0 10px 30px rgba(255, 165, 0, 0.5);

}



.trust-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(255, 213, 79, 0.15);

  border: 1px solid rgba(255, 213, 79, 0.4);

  padding: 8px 16px;

  border-radius: 50px;

  width: fit-content;

  font-size: 13px;

  color: #ffd54f;

  font-weight: 600;

}



.badge-icon {

  font-size: 14px;

}



.hero-headline {

  font-size: 32px;

  font-weight: 800;

  line-height: 1.2;

  color: #fff;

  letter-spacing: -0.5px;

}



.highlight-text {

  background: linear-gradient(135deg, #00ffff, #ff00ff);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.4));

}



.hero-subtitle {

  font-size: 18px;

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.6;

}



.hero-subtitle strong {

  color: #fff;

}



.hero-cta {

  display: flex;

  flex-direction: column;

  gap: 12px;

  align-items: flex-start;

}



.btn-cta-primary {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background: linear-gradient(135deg, #00ffff, #00d4ff);

  color: #0a0a0a;

  border: none;

  padding: 16px 32px;

  border-radius: 30px;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), 0 8px 25px rgba(0, 0, 0, 0.2);

}



.btn-cta-primary:hover {

  transform: translateY(-3px);

  box-shadow: 0 0 50px rgba(0, 255, 255, 0.6), 0 15px 40px rgba(0, 0, 0, 0.3);

  background: linear-gradient(135deg, #00ffff, #40ffff);

}



.cta-note {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.5);

}



.hero-stats {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.stat-box {

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 16px;

  padding: 24px 28px;

  display: flex;

  align-items: center;

  gap: 16px;

  transition: all 0.3s ease;

}



.stat-box:hover {

  background: rgba(255, 255, 255, 0.15);

  border-color: rgba(255, 255, 255, 0.25);

  transform: translateY(-2px);

}



.stat-num {

  font-size: 36px;

  font-weight: 800;

  color: #00ffff;

  text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);

}



.stat-desc {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.7);

}



/* ========== SERVICES SECTION ========== */

.services-section {

  padding: 60px 0;

}



.section-title {

  font-size: 28px;

  font-weight: 700;

  color: #fff;

  text-align: center;

  margin-bottom: 40px;

}



.services-grid {

  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr 1fr;

  gap: 20px;

}



.service-card {

  background: rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 20px;

  padding: 24px;

  transition: all 0.3s ease;

}



.service-card:hover {

  transform: translateY(-4px);

  border-color: rgba(255, 255, 255, 0.25);

  background: rgba(255, 255, 255, 0.12);

}



.service-card.featured {

  grid-row: span 3;

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));

  border: 2px solid rgba(255, 255, 255, 0.3);

  padding: 28px;

  position: relative;

}



.card-badge {

  position: absolute;

  top: -12px;

  left: 24px;

  background: linear-gradient(135deg, #ffd54f, #ffb300);

  color: #1a1a2e;

  font-size: 11px;

  font-weight: 700;

  padding: 6px 14px;

  border-radius: 20px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  box-shadow: 0 0 15px rgba(255, 213, 79, 0.4);

}



.service-header {

  display: flex;

  align-items: flex-start;

  gap: 14px;

  margin-bottom: 20px;

}



.service-icon {

  font-size: 32px;

}



.service-header h3 {

  font-size: 20px;

  font-weight: 700;

  color: #fff;

  margin: 0;

}



.service-tagline {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.6);

  margin: 4px 0 0;

}



.feature-list {

  list-style: none;

  padding: 0;

  margin: 0 0 24px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.feature-list li {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 14px;

  color: rgba(255, 255, 255, 0.85);

}



.price-block {

  display: flex;

  align-items: baseline;

  gap: 6px;

  margin-bottom: 20px;

}



.price-from {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.5);

}



.price-amount {

  font-size: 28px;

  font-weight: 800;

  color: #ffd54f;

  text-shadow: 0 0 15px rgba(255, 213, 79, 0.3);

}



.price-period {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.5);

}



.btn-service {

  width: 100%;

  background: linear-gradient(135deg, #00ffff, #00d4ff);

  color: #0a0a0a;

  border: none;

  padding: 14px 24px;

  border-radius: 25px;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);

}



.btn-service:hover {

  box-shadow: 0 0 35px rgba(0, 255, 255, 0.5);

  background: linear-gradient(135deg, #40ffff, #00ffff);

}



.service-card:not(.featured) .service-icon {

  font-size: 28px;

  margin-bottom: 12px;

}



.service-card:not(.featured) h3 {

  font-size: 16px;

  font-weight: 600;

  color: #fff;

  margin: 0 0 8px;

}



.service-card:not(.featured) p {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.6);

  margin: 0 0 12px;

  line-height: 1.4;

}



.price-small {

  font-size: 13px;

  color: #ffd54f;

  font-weight: 600;

}



/* ========== PROOF SECTION ========== */

.proof-section {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 32px;

  padding: 32px 40px;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 16px;

  margin: 20px 0;

}



.proof-item {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 14px;

  color: rgba(255, 255, 255, 0.8);

}



.proof-icon {

  font-size: 20px;

}



.proof-item strong {

  color: #ffd54f;

  font-weight: 700;

}



.proof-divider {

  width: 1px;

  height: 24px;

  background: rgba(255, 255, 255, 0.15);

}



/* ========== FINAL CTA ========== */

.final-cta {

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 24px;

  padding: 48px;

  text-align: center;

  margin-top: 40px;

}



.cta-content h2 {

  font-size: 28px;

  font-weight: 700;

  color: #fff;

  margin: 0 0 8px;

}



.cta-content p {

  font-size: 16px;

  color: rgba(255, 255, 255, 0.6);

  margin: 0 0 28px;

}



.cta-buttons {

  display: flex;

  justify-content: center;

  gap: 16px;

  margin-bottom: 24px;

}



.btn-whatsapp {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background: #25d366;

  color: #fff;

  text-decoration: none;

  padding: 14px 28px;

  border-radius: 10px;

  font-size: 15px;

  font-weight: 600;

  transition: all 0.3s ease;

  box-shadow: 0 0 20px rgba(37, 211, 102, 0.3);

}



.btn-whatsapp:hover {

  background: #1fb855;

  transform: translateY(-2px);

  box-shadow: 0 0 35px rgba(37, 211, 102, 0.5);

}



.btn-phone {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(255, 255, 255, 0.1);

  color: #fff;

  text-decoration: none;

  padding: 14px 28px;

  border-radius: 10px;

  font-size: 15px;

  font-weight: 500;

  border: 1px solid rgba(255, 255, 255, 0.2);

  transition: all 0.3s ease;

}



.btn-phone:hover {

  background: rgba(255, 255, 255, 0.15);

  border-color: rgba(255, 255, 255, 0.3);

}



.contact-info {

  display: flex;

  justify-content: center;

  gap: 24px;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.5);

}



/* BENTO GRID */

.bento-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-auto-rows: auto;

  gap: 24px;

}



/* BENTO CARDS */

.bento-card {

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 20px;

  padding: 32px;

  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

  overflow: hidden;

}



.bento-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

  opacity: 0;

  transition: opacity 0.3s;

}



.bento-card:hover {

  border-color: rgba(232, 121, 249, 0.4);

  transform: translateY(-4px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px rgba(168, 85, 247, 0.15);

  background: rgba(255, 255, 255, 0.12);

}



.bento-card:hover::before {

  opacity: 1;

}



/* HERO CARD - Spans 2 cols */

.hero-card {

  grid-column: span 2;

  grid-row: span 1;

  min-height: 360px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 40px;

  position: relative;

  overflow: hidden;

}



/* Hero Visual Decorations - REMOVED duplicate rule */



.floating-shape {

  position: absolute;

  border-radius: 50%;

  animation: float 6s ease-in-out infinite;

}



.shape-1 {

  width: 80px;

  height: 80px;

  background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(192, 132, 252, 0.2));

  top: 20px;

  right: 20px;

  animation-delay: 0s;

}



.shape-2 {

  width: 40px;

  height: 40px;

  background: linear-gradient(135deg, rgba(232, 121, 249, 0.5), rgba(244, 114, 182, 0.2));

  top: 60px;

  right: 100px;

  animation-delay: 1s;

}



.shape-3 {

  width: 20px;

  height: 20px;

  background: linear-gradient(135deg, rgba(34, 211, 238, 0.5), rgba(56, 189, 248, 0.2));

  top: 100px;

  right: 50px;

  animation-delay: 2s;

}



@keyframes float {



  0%,

  100% {

    transform: translateY(0) rotate(0deg);

  }



  50% {

    transform: translateY(-15px) rotate(10deg);

  }

}



.hero-card h1 {

  font-size: 30px;

  line-height: 1.25;

  font-weight: 800;

  color: #fff;

  margin-bottom: 14px;

  letter-spacing: -0.5px;

}



.hero-card .gradient-text {

  background: linear-gradient(135deg, #e879f9 0%, #c084fc 50%, #a78bfa 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  display: inline;

}



.hero-card p {

  font-size: 14px;

  color: #a1a1aa;

  margin-bottom: 24px;

  line-height: 1.6;

  max-width: 380px;

}



.hero-buttons {

  display: flex;

  gap: 10px;

}



.btn-primary {

  background: linear-gradient(135deg, #a855f7, #7c3aed);

  border: none;

  color: #fff;

  padding: 12px 28px;

  border-radius: 8px;

  font-weight: 600;

  font-size: 13px;

  cursor: pointer;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);

}



.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.5);

  background: linear-gradient(135deg, #c084fc, #a855f7);

}



.btn-secondary {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: #d4d4d8;

  padding: 12px 24px;

  border-radius: 12px;

  font-weight: 500;

  font-size: 13px;

  cursor: pointer;

  transition: all 0.2s;

}



.btn-secondary:hover {

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.2);

  color: #fff;

}



/* STAT CARDS */

.bento-card.stat-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 16px;

  position: relative;

  overflow: hidden;

}



.bento-card.stat-card::after {

  content: '';

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(circle at center, rgba(168, 85, 247, 0.08) 0%, transparent 50%);

  animation: rotate-glow 15s linear infinite;

  z-index: 0;

}



@keyframes rotate-glow {

  0% {

    transform: rotate(0deg);

  }



  100% {

    transform: rotate(360deg);

  }

}



.stat-icon {

  font-size: 24px;

  margin-bottom: 6px;

  position: relative;

  z-index: 1;

}



.stat-number {

  font-size: 28px;

  font-weight: 800;

  color: #fff;

  position: relative;

  z-index: 1;

  line-height: 1;

}



.stat-label {

  font-size: 10px;

  color: #71717a;

  margin-top: 6px;

  text-transform: uppercase;

  letter-spacing: 0.8px;

  position: relative;

  z-index: 1;

}



/* SERVICE MAIN CARD */

.service-main-card {

  grid-column: span 1;

  grid-row: span 2;

  position: relative;

  overflow: hidden;

  padding: 20px;

}



/* SERVICES STACKED */

.services-stacked {

  display: flex;

  flex-direction: column;

  gap: 0;

  padding: 16px;

}



.stacked-service {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 0;

}



.stacked-service .service-icon-box {

  width: 40px;

  height: 40px;

  margin-bottom: 0;

  flex-shrink: 0;

}



.stacked-info {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.stacked-info h4 {

  font-size: 13px;

  font-weight: 600;

  color: #fff;

  margin: 0;

}



.price-tag-sm {

  font-size: 11px;

  color: #e879f9;

  font-weight: 600;

}



.stacked-divider {

  height: 1px;

  background: rgba(255, 255, 255, 0.1);

  margin: 4px 0;

}



/* TECH PANEL COMPACT */

.tech-panel-compact {

  grid-column: span 2;

  padding: 16px;

}



.tech-row {

  display: flex;

  gap: 12px;

}



.tech-item {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: 12px 8px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 12px;

  gap: 4px;

}



.tech-item span {

  font-size: 20px;

}



.tech-item strong {

  font-size: 11px;

  color: #fff;

  font-weight: 500;

}



.tech-item em {

  font-size: 10px;

  color: #e879f9;

  font-style: normal;

  font-weight: 600;

}



/* Card Background Visual Effects */

.card-bg-visual {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  overflow: hidden;

}



.glow-orb {

  position: absolute;

  border-radius: 50%;

  filter: blur(40px);

  opacity: 0.6;

  animation: pulse-glow 4s ease-in-out infinite;

}



.orb-1 {

  width: 120px;

  height: 120px;

  background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);

  top: -30px;

  right: -30px;

  animation-delay: 0s;

}



.orb-2 {

  width: 80px;

  height: 80px;

  background: radial-gradient(circle, rgba(232, 121, 249, 0.3) 0%, transparent 70%);

  bottom: 20px;

  left: -20px;

  animation-delay: 2s;

}



@keyframes pulse-glow {



  0%,

  100% {

    transform: scale(1);

    opacity: 0.5;

  }



  50% {

    transform: scale(1.2);

    opacity: 0.8;

  }

}



.service-icon-box {

  width: 52px;

  height: 52px;

  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(232, 121, 249, 0.1));

  border: 1px solid rgba(168, 85, 247, 0.3);

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 16px;

  color: #e879f9;

}



.service-main-card h3 {

  font-size: 18px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 8px;

}



.service-main-card p {

  font-size: 13px;

  color: #71717a;

  margin-bottom: 12px;

  line-height: 1.5;

}



.service-price {

  display: inline-block;

  background: linear-gradient(135deg, #a855f7, #7c3aed);

  color: #fff;

  font-weight: 700;

  font-size: 13px;

  padding: 8px 18px;

  border-radius: 24px;

  margin-bottom: 16px;

  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);

}



.service-features-mini {

  list-style: none;

  padding: 0;

  margin: 0 0 14px;

}



.service-features-mini li {

  font-size: 12px;

  color: #a1a1aa;

  padding: 4px 0;

}



.btn-outline {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.15);

  color: #fff;

  padding: 10px 18px;

  border-radius: 10px;

  font-weight: 600;

  font-size: 13px;

  cursor: pointer;

  transition: all 0.2s;

}



.btn-outline:hover {

  background: rgba(255, 255, 255, 0.05);

}



/* SERVICE CARD SM */

.service-card-sm {

  padding: 18px;

}



.service-card-sm .service-icon-box {

  width: 36px;

  height: 36px;

  margin-bottom: 12px;

}



.service-card-sm h4 {

  font-size: 14px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 6px;

}



.service-card-sm p {

  font-size: 12px;

  color: #71717a;

  margin-bottom: 10px;

}



.price-tag {

  display: inline-block;

  background: linear-gradient(135deg, #a855f7, #c084fc);

  color: #fff;

  font-weight: 700;

  font-size: 12px;

  padding: 6px 14px;

  border-radius: 16px;

}



/* SOLUTIONS PANEL */

.solutions-panel {

  grid-column: span 2;

  background: linear-gradient(145deg, rgba(24, 24, 32, 0.95), rgba(18, 18, 24, 0.98));

  position: relative;

  overflow: hidden;

  padding: 18px;

}



.solutions-panel::before {

  content: '';

  position: absolute;

  top: -80px;

  right: -80px;

  width: 160px;

  height: 160px;

  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 60%);

  filter: blur(30px);

}



.solutions-panel h3 {

  font-size: 14px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 14px;

}



.solutions-mini-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

}



.sol-item {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 14px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: 12px;

  transition: all 0.2s;

}



.sol-item:hover {

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(168, 85, 247, 0.3);

}



.sol-item span {

  font-size: 18px;

}



.sol-item strong {

  font-size: 12px;

  color: #e4e4e7;

  font-weight: 500;

}



/* TECH PANEL */

.tech-panel {

  grid-column: span 2;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  padding: 18px;

}



.tech-mini {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: 10px;

  padding: 12px 10px;

  text-align: center;

  transition: all 0.2s;

}



.tech-mini:hover {

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(168, 85, 247, 0.3);

}



.tech-mini strong {

  display: block;

  font-size: 11px;

  color: #e4e4e7;

  margin-bottom: 4px;

  font-weight: 500;

}



.tech-price-sm {

  font-size: 11px;

  color: #e879f9;

  font-weight: 600;

}



/* BENTO GRID 2 */

.bento-grid-2 {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 14px;

  margin-top: 14px;

}



/* PLANS PANEL */

.plans-panel {

  grid-column: span 2;

  position: relative;

  overflow: hidden;

}



.plans-panel::after {

  content: '';

  position: absolute;

  bottom: -50px;

  left: -50px;

  width: 150px;

  height: 150px;

  background: radial-gradient(circle, rgba(249, 115, 22, 0.12) 0%, transparent 60%);

  filter: blur(25px);

}



.plans-panel h3 {

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 14px;

}



.plans-mini {

  display: flex;

  gap: 10px;

}



.plan-mini {

  flex: 1;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 14px;

  padding: 16px 12px;

  text-align: center;

  position: relative;

  transition: all 0.2s;

}



.plan-mini:hover {

  border-color: rgba(255, 255, 255, 0.12);

}



.plan-mini.featured {

  background: linear-gradient(145deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.08));

  border: 1px solid rgba(168, 85, 247, 0.4);

}



.popular-tag {

  position: absolute;

  top: -8px;

  left: 50%;

  transform: translateX(-50%);

  background: linear-gradient(135deg, #a855f7, #7c3aed);

  color: #fff;

  font-size: 9px;

  font-weight: 700;

  padding: 3px 8px;

  border-radius: 10px;

}



.plan-mini strong {

  display: block;

  font-size: 13px;

  color: #fff;

  margin-bottom: 6px;

}



.plan-price-mini {

  display: block;

  font-size: 14px;

  color: #e879f9;

  font-weight: 700;

  margin-bottom: 4px;

}



.plan-mini small {

  font-size: 10px;

  color: #71717a;

}



/* CRM PANEL */

.crm-panel h3 {

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 14px;

}



.crm-mini-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

}



.crm-tool {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: 10px;

  padding: 10px 12px;

  display: flex;

  align-items: center;

  gap: 10px;

  color: #a1a1aa;

  transition: all 0.2s;

}



.crm-tool:hover {

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(168, 85, 247, 0.3);

  color: #e879f9;

}



.crm-tool span {

  font-size: 11px;

  color: #a1a1aa;

}



/* CONTACT PANEL */

.contact-panel h3 {

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 12px;

}



.contact-mini {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 14px;

}



.contact-link {

  font-size: 12px;

  color: #a1a1aa;

  text-decoration: none;

}



.contact-link:hover {

  color: #e879f9;

}



/* TESTIMONIAL */

.testimonial-card {

  position: relative;

  padding-top: 30px;

}



.quote-icon {

  position: absolute;

  top: 10px;

  left: 20px;

  font-size: 40px;

  color: #27272a;

  font-family: serif;

}



.testimonial-card p {

  font-size: 13px;

  color: #a1a1aa;

  font-style: italic;

  margin-bottom: 12px;

  line-height: 1.5;

}



.author-mini {

  display: flex;

  align-items: center;

  gap: 10px;

}



.avatar-mini {

  width: 28px;

  height: 28px;

  background: linear-gradient(135deg, #f97316, #fb923c);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 10px;

  font-weight: 700;

  color: #000;

}



.author-mini span {

  font-size: 11px;

  color: #71717a;

}



/* BENTO FOOTER */

.bento-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 40px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  margin-top: 32px;

  color: #52525b;

  font-size: 12px;

  background: rgba(10, 10, 16, 0.5);

}



.footer-links-mini {

  display: flex;

  gap: 24px;

}



.footer-links-mini a {

  color: #71717a;

  text-decoration: none;

  font-size: 12px;

  transition: color 0.2s;

}



.footer-links-mini a:hover {

  color: #e879f9;

}



/* WhatsApp Float Button */

.whatsapp-float {

  position: fixed;

  bottom: 24px;

  right: 24px;

  background: linear-gradient(135deg, #22c55e, #16a34a);

  color: white;

  padding: 14px 20px;

  border-radius: 16px;

  text-decoration: none;

  display: flex;

  align-items: center;

  gap: 10px;

  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  z-index: 1000;

  font-size: 13px;

  font-weight: 600;

}



.whatsapp-float:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.45);

}



.whatsapp-icon-float {

  font-size: 18px;

}



/* Responsive Bento Grid */

@media (max-width: 1200px) {

  .bento-grid {

    grid-template-columns: repeat(4, 1fr);

  }



  .hero-card {

    grid-column: span 2;

  }



  .service-main-card {

    grid-column: span 2;

  }



  .solutions-panel {

    grid-column: span 2;

  }



  .tech-panel {

    grid-column: span 2;

  }

}



@media (max-width: 900px) {

  .bento-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

  }



  .hero-card {

    grid-column: span 2;

    grid-row: span 1;

  }



  .service-main-card {

    grid-column: span 2;

    grid-row: span 1;

  }



  .solutions-panel {

    grid-column: span 2;

  }



  .tech-panel {

    grid-column: span 2;

  }



  .bento-grid-2 {

    grid-template-columns: repeat(2, 1fr);

  }



  .plans-panel {

    grid-column: span 2;

  }



  .verifiers-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

  }



  .left-stack {

    grid-column: span 2;

  }



  .services-tech-grid-stacked {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 600px) {

  .bento-main {

    padding: 12px 16px;

  }



  .bento-header {

    padding: 12px 16px;

  }



  .bento-grid,

  .bento-grid-2 {

    grid-template-columns: 1fr;

  }



  .hero-card,

  .service-main-card,

  .solutions-panel,

  .tech-panel,

  .plans-panel {

    grid-column: span 1;

    grid-row: span 1;

  }



  .hero-card h1 {

    font-size: 22px;

  }



  .landing-nav {

    display: none;

  }



  .solutions-mini-grid {

    grid-template-columns: 1fr;

  }



  .tech-panel {

    grid-template-columns: repeat(2, 1fr);

  }



  .crm-mini-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .plans-mini {

    flex-direction: column;

  }



  .whatsapp-float {

    bottom: 12px;

    right: 12px;

    padding: 10px 14px;

  }



  .whatsapp-text {

    display: none;

  }

}



/* ========== LANDING MOBILE RESPONSIVE ========== */

@media (max-width: 768px) {

  /* Header Mobile */

  .header-content {

    padding: 12px 16px;

  }

  

  .landing-logo {

    font-size: 14px;

    flex-direction: column;

    align-items: flex-start;

    gap: 2px;

  }

  

  .header-location {

    margin-left: 0;

    font-size: 10px;

  }

  

  .landing-nav {

    display: none;

  }

  

  .landing-login-btn {

    padding: 8px 14px;

    font-size: 11px;

  }



  /* Grid Mobile */

  .bento-main {

    padding: 16px;

  }

  

  .bento-grid {

    grid-template-columns: 1fr;

    gap: 16px;

  }

  

  .bento-card {

    padding: 20px;

  }



  /* Hero Mobile */

  .hero-card {

    grid-column: span 1;

    min-height: 280px;

  }

  

  .hero-content-over h1 {

    font-size: 26px;

  }

  

  .hero-buttons {

    flex-direction: column;

    gap: 8px;

  }

  

  .hero-buttons button {

    width: 100%;

  }



  /* Cards que ocupan varias columnas -> 1 columna */

  .stat-card,

  .service-main-pro,

  .services-tech-section,

  .verifiers-section,

  .contact-card-pro,

  .solutions-card-pro,

  .tech-services-pro,

  .testimonial-card,

  .cta-card {

    grid-column: span 1;

  }

  

  .service-main-pro {

    grid-row: span 1;

  }



  /* Planes Mobile */

  .plan-inline {

    flex-wrap: wrap;

    gap: 6px;

  }

  

  .plan-inline-name {

    min-width: auto;

    flex: 1;

  }

  

  .plan-inline-features {

    display: none;

  }

  

  .plan-inline-price {

    font-size: 13px;

  }

  

  .includes-grid {

    grid-template-columns: 1fr;

    gap: 8px;

  }



  /* Services Tech Mobile */

  .services-tech-grid {

    grid-template-columns: 1fr;

  }



  /* Verifiers Mobile */

  .verifiers-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

  }

  

  .verifier-card {

    padding: 12px;

  }

  

  .verifier-icon-box {

    width: 40px;

    height: 40px;

    margin-bottom: 8px;

  }

  

  .verifier-content h4 {

    font-size: 11px;

  }

  

  .verifier-metric {

    font-size: 9px;

    padding: 2px 6px;

  }

  

  .verifier-desc {

    font-size: 10px;

  }



  /* Solutions & Tech Services Mobile */

  .solutions-grid-pro,

  .tech-grid-pro {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 480px) {

  .verifiers-grid,

  .solutions-grid-pro,

  .tech-grid-pro {

    grid-template-columns: 1fr;

  }

  

  .hero-content-over h1 {

    font-size: 22px;

  }

  

  .hero-badge {

    font-size: 10px;

    padding: 6px 12px;

  }

}



/* ========== SECCIÓN MEGA SERVICIOS - DISEÑO IMPACTANTE ========== */

.services-mega-section {

  grid-column: 1 / -1;

  display: flex;

  flex-direction: column;

  gap: 32px;

  padding: 40px 0;

}



/* HEADER DE SECCIÓN */

.services-mega-header {

  text-align: center;

  margin-bottom: 20px;

}



.mega-badge {

  display: inline-block;

  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(234, 88, 12, 0.2));

  border: 1px solid rgba(249, 115, 22, 0.4);

  color: #fb923c;

  font-family: 'Outfit', sans-serif;

  font-size: 13px;

  font-weight: 700;

  padding: 8px 20px;

  border-radius: 30px;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 20px;

}



.mega-title {

  font-family: 'Outfit', sans-serif;

  font-size: 42px;

  font-weight: 900;

  color: #fff;

  margin: 0 0 12px;

  text-transform: uppercase;

  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.mega-subtitle {

  font-family: 'Outfit', sans-serif;

  font-size: 18px;

  color: rgba(255, 255, 255, 0.6);

  margin: 0;

}



/* GRID DE SERVICIOS - 4 CARDS */

.services-mega-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



/* MEGA CARD BASE */

.mega-card {

  position: relative;

  background: linear-gradient(160deg, rgba(15, 15, 25, 0.95) 0%, rgba(8, 8, 14, 0.98) 100%);

  border-radius: 24px;

  padding: 32px;

  min-height: 320px;

  overflow: hidden;

  transition: all 0.4s ease;

  border: 1px solid rgba(255, 255, 255, 0.08);

}



.mega-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

}



/* GLOW EFFECT */

.mega-card-glow {

  position: absolute;

  top: -50%;

  right: -50%;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  filter: blur(80px);

  opacity: 0.3;

  transition: opacity 0.4s ease;

}



.mega-card:hover .mega-card-glow {

  opacity: 0.5;

}



.mega-card-glow.green { background: #22c55e; }

.mega-card-glow.blue { background: #3b82f6; }

.mega-card-glow.purple { background: #a855f7; }

.mega-card-glow.orange { background: #f97316; }



/* CARD CONTENT */

.mega-card-content {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  height: 100%;

}



/* ICON WRAP */

.mega-icon-wrap {

  width: 70px;

  height: 70px;

  border-radius: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 36px;

  margin-bottom: 20px;

}



.mega-icon-wrap.green {

  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));

  border: 1px solid rgba(34, 197, 94, 0.3);

}



.mega-icon-wrap.blue {

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));

  border: 1px solid rgba(59, 130, 246, 0.3);

}



.mega-icon-wrap.purple {

  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1));

  border: 1px solid rgba(168, 85, 247, 0.3);

}



.mega-icon-wrap.orange {

  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.1));

  border: 1px solid rgba(249, 115, 22, 0.3);

}



/* CARD TITLES */

.mega-card h3 {

  font-family: 'Outfit', sans-serif;

  font-size: 26px;

  font-weight: 800;

  color: #fff;

  margin: 0 0 10px;

}



.mega-card p {

  font-family: 'Outfit', sans-serif;

  font-size: 15px;

  color: rgba(255, 255, 255, 0.6);

  margin: 0 0 20px;

  line-height: 1.5;

}



/* CONTACT CARD */

.contact-actions {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-bottom: 16px;

}



.action-btn {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px 18px;

  background: rgba(34, 197, 94, 0.1);

  border: 1px solid rgba(34, 197, 94, 0.2);

  border-radius: 14px;

  text-decoration: none;

  transition: all 0.3s ease;

}



.action-btn:hover {

  background: rgba(34, 197, 94, 0.2);

  transform: translateX(5px);

}



.action-btn.email {

  background: rgba(59, 130, 246, 0.1);

  border-color: rgba(59, 130, 246, 0.2);

}



.action-btn.email:hover {

  background: rgba(59, 130, 246, 0.2);

}



.action-icon {

  font-size: 24px;

}



.action-text {

  font-family: 'Outfit', sans-serif;

  font-size: 16px;

  font-weight: 600;

  color: #fff;

}



.card-location {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.5);

  margin-top: auto;

}



/* FEATURE LIST */

.feature-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.feature-list li {

  font-family: 'Outfit', sans-serif;

  font-size: 15px;

  color: rgba(255, 255, 255, 0.8);

  padding: 10px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.feature-list li:last-child {

  border-bottom: none;

}



/* CTA CARD */

.cta-card {

  background: linear-gradient(160deg, rgba(26, 15, 5, 0.95) 0%, rgba(15, 8, 5, 0.98) 100%);

  border-color: rgba(249, 115, 22, 0.3);

}



.mega-cta-btn {

  display: block;

  width: 100%;

  padding: 18px 24px;

  background: linear-gradient(135deg, #f97316, #ea580c);

  border: none;

  border-radius: 14px;

  font-family: 'Outfit', sans-serif;

  font-size: 17px;

  font-weight: 700;

  color: #fff;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 8px 30px rgba(249, 115, 22, 0.4);

  margin-bottom: 20px;

}



.mega-cta-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 12px 40px rgba(249, 115, 22, 0.5);

}



.mini-testimonial {

  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.mini-testimonial span {

  display: block;

  font-family: 'Outfit', sans-serif;

  font-size: 14px;

  color: rgba(255, 255, 255, 0.6);

  font-style: italic;

  margin-bottom: 8px;

}



.mini-testimonial strong {

  font-family: 'Outfit', sans-serif;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.4);

}



/* TECH MEGA BAR */

.tech-mega-bar {

  background: linear-gradient(160deg, rgba(15, 15, 25, 0.95) 0%, rgba(8, 8, 14, 0.98) 100%);

  border: 1px solid rgba(249, 115, 22, 0.25);

  border-radius: 24px;

  padding: 32px 40px;

}



.tech-mega-header {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 28px;

  padding-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.tech-mega-icon {

  width: 60px;

  height: 60px;

  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.1));

  border: 1px solid rgba(249, 115, 22, 0.3);

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 30px;

}



.tech-mega-title h3 {

  font-family: 'Outfit', sans-serif;

  font-size: 28px;

  font-weight: 800;

  color: #fff;

  margin: 0 0 4px;

  text-transform: uppercase;

}



.tech-mega-title span {

  font-family: 'Outfit', sans-serif;

  font-size: 15px;

  color: rgba(255, 255, 255, 0.5);

}



/* TECH GRID - TABLA */

.tech-mega-grid {

  display: flex;

  flex-direction: column;

  gap: 0;

  border: 1px solid rgba(249, 115, 22, 0.2);

  border-radius: 16px;

  overflow: hidden;

}



/* TECH ROW - FILA DE TABLA */

.tech-card-slim {

  display: grid;

  grid-template-columns: 50px 200px 1fr 140px 180px;

  align-items: center;

  gap: 20px;

  padding: 18px 24px;

  background: rgba(10, 10, 20, 0.6);

  border-bottom: 1px solid rgba(249, 115, 22, 0.1);

  transition: all 0.3s ease;

}



.tech-card-slim:last-child {

  border-bottom: none;

}



.tech-card-slim:hover {

  background: rgba(249, 115, 22, 0.08);

}



.tech-card-slim:nth-child(odd) {

  background: rgba(249, 115, 22, 0.03);

}



.tech-card-slim:nth-child(odd):hover {

  background: rgba(249, 115, 22, 0.1);

}



.tech-slim-top {

  display: contents;

}



.tech-slim-icon {

  font-size: 32px;

  text-align: center;

}



.tech-card-slim h4 {

  font-family: 'Outfit', sans-serif;

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  margin: 0;

}



.tech-card-slim p {

  font-family: 'Outfit', sans-serif;

  font-size: 14px;

  color: rgba(255, 255, 255, 0.6);

  line-height: 1.5;

  margin: 0;

}



.tech-slim-price {

  font-family: 'Outfit', sans-serif;

  font-size: 20px;

  font-weight: 800;

  color: #fb923c;

  text-align: right;

}



.tech-slim-price span {

  font-size: 12px;

  font-weight: 600;

  color: rgba(251, 146, 60, 0.7);

}



.tech-slim-cta {

  display: inline-block;

  font-family: 'Outfit', sans-serif;

  font-size: 13px;

  font-weight: 600;

  color: #fb923c;

  background: transparent;

  border: 1px solid rgba(249, 115, 22, 0.4);

  text-decoration: none;

  text-align: center;

  padding: 10px 16px;

  border-radius: 8px;

  transition: all 0.3s ease;

}



.tech-slim-cta:hover {

  background: #fb923c;

  color: #0a0a14;

  border-color: #fb923c;

}



/* RESPONSIVE TECH CARDS */

@media (max-width: 1000px) {

  .tech-card-slim {

    grid-template-columns: 40px 150px 1fr 100px;

  }

  .tech-slim-cta {

    display: none;

  }

}



@media (max-width: 700px) {

  .tech-card-slim {

    grid-template-columns: 36px 1fr 90px;

    padding: 14px 16px;

    gap: 12px;

  }

  .tech-card-slim p {

    display: none;

  }

  .tech-card-slim h4 {

    font-size: 14px;

  }

  .tech-slim-price {

    font-size: 16px;

  }

}



/* RESPONSIVE MEGA */

@media (max-width: 1200px) {

  .services-mega-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  

  .tech-mega-grid {

    grid-template-columns: repeat(3, 1fr);

  }

  

  .mega-title {

    font-size: 32px;

  }

}



@media (max-width: 768px) {

  .services-mega-grid {

    grid-template-columns: 1fr;

  }

  

  .tech-mega-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  

  .mega-title {

    font-size: 26px;

  }

  

  .tech-mega-header {

    flex-direction: column;

    text-align: center;

  }

}



/* ========== ESTILOS ANTIGUOS (mantener por compatibilidad) ========== */

.services-section-new {

  grid-column: 1 / -1;

  display: flex;

  flex-direction: column;

  gap: 24px;

}



/* FILA SUPERIOR: 3 TARJETAS */

.services-top-row {

  display: grid;

  grid-template-columns: 1fr 1.5fr 1fr;

  gap: 24px;

  align-items: stretch;

}



/* ESTILOS BASE PARA TARJETAS */

.card-contact-new,

.card-consulting-new,

.card-cta-new {

  background: linear-gradient(145deg, #0c0c16 0%, #08080e 100%);

  border-radius: 20px;

  padding: 32px;

  display: flex;

  flex-direction: column;

  min-height: 320px;

}



.card-contact-new {

  border: 1px solid rgba(34, 197, 94, 0.25);

}



.card-consulting-new {

  border: 1px solid rgba(59, 130, 246, 0.25);

}



.card-cta-new {

  border: 1px solid rgba(249, 115, 22, 0.3);

  background: linear-gradient(145deg, #1a0f05 0%, #0c0806 100%);

  text-align: center;

  justify-content: center;

}



/* BADGE */

.card-badge-new {

  display: inline-block;

  font-family: 'Outfit', sans-serif;

  font-size: 11px;

  font-weight: 700;

  padding: 6px 14px;

  border-radius: 8px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 16px;

  width: fit-content;

}



.card-badge-new.green {

  background: rgba(34, 197, 94, 0.15);

  color: #4ade80;

  border: 1px solid rgba(34, 197, 94, 0.3);

}



.card-badge-new.blue {

  background: rgba(59, 130, 246, 0.15);

  color: #60a5fa;

  border: 1px solid rgba(59, 130, 246, 0.3);

}



.card-badge-new.orange {

  background: rgba(249, 115, 22, 0.15);

  color: #fb923c;

  border: 1px solid rgba(249, 115, 22, 0.3);

}



/* TÍTULOS */

.card-contact-new h3,

.card-consulting-new h3,

.card-cta-new h3 {

  font-family: 'Outfit', sans-serif;

  font-size: 32px;

  font-weight: 800;

  color: #fff;

  margin: 0 0 10px;

  text-transform: uppercase;

}



.card-desc {

  font-family: 'Outfit', sans-serif;

  font-size: 15px;

  color: rgba(255, 255, 255, 0.5);

  margin: 0 0 24px;

}



/* CONTACTO */

.contact-items-new {

  display: flex;

  flex-direction: column;

  gap: 14px;

  flex: 1;

}



.contact-link-new {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 18px 20px;

  background: rgba(34, 197, 94, 0.08);

  border: 1px solid rgba(34, 197, 94, 0.15);

  border-radius: 14px;

  text-decoration: none;

  transition: all 0.3s ease;

}



.contact-link-new:hover {

  background: rgba(34, 197, 94, 0.15);

  transform: translateX(4px);

}



.contact-link-new > span {

  font-size: 28px;

}



.contact-link-new small {

  display: block;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.5);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 2px;

}



.contact-link-new strong {

  font-family: 'Outfit', sans-serif;

  font-size: 18px;

  font-weight: 600;

  color: #fff;

}



.location-new {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.4);

  margin-top: auto;

  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

}



/* CONSULTORÍA */

.consulting-list-new {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.consulting-item-new {

  display: flex;

  align-items: flex-start;

  gap: 16px;

  padding: 18px;

  background: rgba(59, 130, 246, 0.06);

  border-radius: 14px;

  transition: all 0.3s ease;

}



.consulting-item-new:hover {

  background: rgba(59, 130, 246, 0.12);

}



.c-icon {

  font-size: 32px;

  flex-shrink: 0;

}



.consulting-item-new strong {

  display: block;

  font-family: 'Outfit', sans-serif;

  font-size: 17px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 4px;

}



.consulting-item-new span {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.5);

}



/* CTA */

.btn-cta-new {

  display: inline-block;

  padding: 18px 36px;

  background: linear-gradient(135deg, #f97316, #ea580c);

  border: none;

  border-radius: 12px;

  font-family: 'Outfit', sans-serif;

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.35);

  margin-bottom: 20px;

}



.btn-cta-new:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 25px rgba(249, 115, 22, 0.5);

}



.testimonial-inline {

  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.testimonial-inline p {

  font-family: 'Outfit', sans-serif;

  font-size: 15px;

  color: rgba(255, 255, 255, 0.7);

  font-style: italic;

  margin: 0 0 6px;

}



.testimonial-inline span {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.4);

}



/* SERVICIOS TÉCNICOS - FILA HORIZONTAL */

.tech-services-row-new {

  background: linear-gradient(145deg, #0c0c16 0%, #08080e 100%);

  border: 1px solid rgba(249, 115, 22, 0.2);

  border-radius: 20px;

  padding: 28px 32px;

  display: flex;

  align-items: center;

  gap: 32px;

}



.tech-header-new {

  flex-shrink: 0;

  min-width: 180px;

}



.tech-header-new h3 {

  font-family: 'Outfit', sans-serif;

  font-size: 24px;

  font-weight: 800;

  color: #fff;

  margin: 0;

  text-transform: uppercase;

}



.tech-items-new {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  flex: 1;

}



.tech-item-new {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px 20px;

  background: rgba(249, 115, 22, 0.08);

  border: 1px solid rgba(249, 115, 22, 0.15);

  border-radius: 14px;

  transition: all 0.3s ease;

  flex: 1;

  min-width: 200px;

}



.tech-item-new:hover {

  background: rgba(249, 115, 22, 0.15);

  border-color: rgba(249, 115, 22, 0.3);

}



.t-icon {

  font-size: 28px;

}



.t-name {

  font-family: 'Outfit', sans-serif;

  font-size: 15px;

  font-weight: 600;

  color: #fff;

  flex: 1;

}



.t-price {

  font-family: 'Outfit', sans-serif;

  font-size: 14px;

  font-weight: 700;

  color: #fb923c;

  white-space: nowrap;

}



/* RESPONSIVE */

@media (max-width: 1000px) {

  .services-top-row {

    grid-template-columns: 1fr 1fr;

  }

  

  .card-cta-new {

    grid-column: span 2;

  }

  

  .tech-services-row-new {

    flex-direction: column;

    align-items: flex-start;

  }

  

  .tech-items-new {

    width: 100%;

  }

}



@media (max-width: 600px) {

  .services-top-row {

    grid-template-columns: 1fr;

  }

  

  .card-cta-new {

    grid-column: span 1;

  }

  

  .tech-item-new {

    min-width: calc(50% - 5px);

  }

}