body {
  background-color: #1a1a1a; /* Dark blue background */
  color: #f0f0f0;
  font-family: sans-serif; /* Basic font, consider importing a specific one */
}

/* Keyframes for the grid animation */
@keyframes animateGrid {
  0% {
    background-position: 0 0;
  }
  100% {
    /* Move by double the background size for a seamless loop */
    background-position: 40px 40px;
  }
}

body {
  background-color: #1a1a1a; /* Slightly different dark blue */
  /* Subtle grid pattern */
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  padding-bottom: 3rem; /* Add some padding at the bottom */
  /* Apply the animation */
  animation: animateGrid 10s linear infinite;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff;
}

.navbar-brand {
    color: #ffffff !important; /* Ensure brand text is white */
    font-weight: bold;
}

.navbar-brand img {
    vertical-align: middle;
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.8);
}

.btn-outline-light:hover {
    border-color: #fff;
    color: #1a1a1a;
    background-color: #fff;
}

.btn-light {
    font-weight: bold;
}
.live-demo-badge {
  position: absolute;
  top: 33px;
  left: -34px;
  transform: rotate(324deg);
  background-color: #194ddb;
  color: white;
  z-index: 10;
  font-weight: bold;
}
.hero-section h1 {
  font-size: 3.5rem; /* Adjust size as needed */
  line-height: 1.2;
}

.hero-section .lead {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
}

.card {
  background-color: #1e293b;
  border: none;
  position: relative;
  z-index: 2;
  background-color: rgb(255 255 255 / 11%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.form-control {
  border-radius: 50rem; /* Make inputs pill-shaped */
  padding: 0.75rem 1.25rem;
  border: 1px solid #ced4da;
}

.form-control:focus {
    border-color: #194ddb;
    box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.25);
}

.input-group-text {
    border-radius: 50rem 0 0 50rem; /* Round left side */
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-right: 0;
}

.form-control.rounded-end-pill {
    border-radius: 0 50rem 50rem 0 !important; /* Override Bootstrap */
}

.btn-primary {
  background-color: #194ddb; /* Purple color from button */
  border-color: #194ddb;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: #711db1; /* Darker purple */
  border-color: #711db1;
}

.badge.bg-success {
background-color: #194ddb!important;}

.badge.bg-light {
    background-color: #f8f9fa !important; /* Standard Bootstrap light */
    color: #1a1a1a !important; /* Dark text on light badge */
}

/* Placeholder for arrow pointing to the form */
/* You might need ::before or ::after on the "PRUEBALO EN VIVO" badge container */

.bottom-banner {
  background-color: #1a1a1a87;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(25 77 219);
  color: #fff;
}

.bottom-banner img {
    opacity: 0.6 !important;
    transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
    filter: brightness(0) invert(1);
}

.bottom-banner img:hover {
    opacity: 1 !important;
    filter: grayscale(0%) brightness(1);
}

/* Responsive adjustments if needed */
@media (max-width: 991.98px) {
  .hero-section h1 {
    font-size: 2.5rem;
  }
  .navbar-nav {
      text-align: center;
  }
  .navbar-nav.align-items-center {
      flex-direction: row;
      justify-content: center;
      margin-top: 1rem;
  }
}

/* Comparison Section Styles */
.comparison-section {
  /* Inherits dark background from body */
  position: relative; /* Needed if adding decorative elements later */
}

.comparison-section .badge.bg-primary {
   background-color: #194ddb !important; /* Match button purple */
}

.comparison-card {
  border: none;
  /* Remove default card background if needed, or set specific ones */
}

.card-humano {
    border: none;
    position: relative;
    z-index: 2;
    background-color: rgb(255 255 255 / 11%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    
  }

/* Define the floating animation */
@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Nueva animación flotante en dirección opuesta */
@keyframes floating-reverse {
  0% { transform: translateY(0px); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0px); }
}

/* Remove previous shimmer styles if they exist */
/* @keyframes border-shimmer { ... } */

/* Define the CSS custom property for the angle */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Define the rotation animation */
@keyframes rotate-glow {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

.card-rsunionai {
    border: none; /* Remove default border if glow replaces it */
    position: relative; /* Needed for pseudo-element positioning */
    z-index: 1; /* Ensure card is properly layered */
    /* Keep existing background/blur for the glass effect */
    background-color: rgb(255 255 255 / 11%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    color: #fff;
    border-radius: 1rem; /* Match desired border-radius */
    overflow: hidden; /* Clip the pseudo-element */
    padding: 2px; /* Create space for the border glow */
    /* Add floating animation */
    animation: floating 3s ease-in-out infinite, rotate-glow 4s linear infinite;
    /* Add box shadow for depth */
    box-shadow: 0 10px 25px rgba(25, 77, 219, 0.2);
}
.iti {
  position: relative;
  display: block;
}
.iti--separate-dial-code .iti__selected-dial-code {
  margin-left: 6px;
  color: #1a1a1a;
}
.iti__country-name {
  margin-right: 6px;
  color: #1a1a1a;
}
.card-rsunionai::before {
    content: '';
    position: absolute;
    /* Position gradient slightly outside to cover padding */
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Conic gradient for the glow */
    background: conic-gradient(
        from var(--angle),
        transparent 25%, /* Start transparency */
        #194ddb,       /* Glow color */
        transparent 35%  /* End transparency */
    );
    /* Apply the rotation animation */
    animation: rotate-glow 4s linear infinite;
    z-index: -1; /* Place the glow behind the content */
}

/* Ensure card content is styled correctly and above the glow */
.card-rsunionai > .card-body {
    /* Use a background matching the card's intended inner background */
    /* This might need adjustment depending on the desired look */
    background-color: #1a1a1a; /* Example: Match body background or a darker shade */
    color: #fff;
    border-radius: calc(1rem - 2px); /* Inner radius adjusted for padding */
    position: relative; /* Ensure content is layered above ::before */
    z-index: 2;
    /* Reset padding if inherited, use original padding values */
    padding: 1.5rem; /* Adjust as needed, e.g., py-4 py-lg-5 px-0 from original */
}

/* Adjust original card-body padding if needed */
.card-rsunionai > .card-body.py-4.py-lg-5.px-0 {
    padding-top: 1.5rem !important; /* Override Bootstrap if necessary */
    padding-bottom: 1.5rem !important; /* Override Bootstrap if necessary */
    padding-left: 1.5rem !important; /* Override Bootstrap if necessary */
    padding-right: 1.5rem !important; /* Override Bootstrap if necessary */
}

.card-humano > .card-body.py-4.py-lg-5.px-0 {
  padding-top: 1.5rem !important; /* Override Bootstrap if necessary */
  padding-bottom: 1.5rem !important; /* Override Bootstrap if necessary */
  padding-left: 1.5rem !important; /* Override Bootstrap if necessary */
  padding-right: 1.5rem !important; /* Override Bootstrap if necessary */
}
.bg-dark 
{
  background-color: #1a1a1a !important; /* Dark background */
}

.comparison-avatar {
  width: 100%;
  /* height: 80px; */
  /* border-radius: 50%; */
  /* object-fit: cover; */
  /* background-color: #e9ecef; */
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.comparison-list li {
  font-size: 0.95rem;
  /* Adjust padding: Use card's original horizontal padding here */
  padding: 0.6rem 1.5rem; /* Corresponds roughly to p-4/p-lg-5 */
  margin-bottom: 0 !important; /* Remove default margin if any */
  /* border-radius: 0.25rem; /* Remove border-radius for edge-to-edge */
}
.comparison-divider{
  background-color: rgba(255, 255, 255, 0.1); /* Lighten on hover */
margin:0;
}

.comparison-header .card-title {
    /* Style for the 'Humano' title if needed */
    font-weight: bold;
}

.comparison-list .bi-x-circle-fill {
    color: #dc3545 !important; /* Bootstrap danger red */
}

.comparison-list .bi-check-circle-fill {
    color: #198754 !important; /* Bootstrap success green */
}

.comparison-list .bi-plus-circle-fill {
     color: #194ddb !important; /* Match button purple */
}

/* World Map Section Styles */
.world-map-section {
  background-color: #1a1a1a; /* Dark background to match header */
  /* Optional: Add the grid pattern too if desired */
  /* background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
     background-size: 20px 20px; */
}

.map-title-badge {
  background: linear-gradient(90deg, #194ddb, #4a90e2); /* Purple to blue gradient */
  color: white;
  border: none;
  font-weight: 500;
}

.map-container {
  max-width: 900px; /* Limit map width if needed */
  margin-left: auto;
  margin-right: auto;
}

.world-map-image {
  user-select: none; /* Prevent map image selection */
}

.flag-marker {
  position: absolute;
  width: 45px;  /* Adjust size of circle */
  height: 45px; /* Adjust size of circle */
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px; /* Space between flag and circle edge */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%); /* Center marker on coordinates */
  transition: transform 0.2s ease-in-out; /* Add subtle hover effect */
}

.flag-marker:hover {
    transform: translate(-50%, -50%) scale(1.1); /* Slightly enlarge on hover */
}

.flag-marker img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 3px; /* Slightly round flag corners */
  object-fit: cover;
}

/* Features Section Styles */
.features-section {
  /* Use the same grid background as the header */

  color: #f0f0f0;
}

.feature-card {
  background-color: #1e293b;
  border: none;
  position: relative;
  z-index: 2;
  background-color: rgb(255 255 255 / 11%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.feature-card-image-col {
  /* Ensure image column has some background, adjust as needed */
  background-color: #e9ecef; /* Light grey placeholder background */
  display: flex; /* Center image if needed */
  align-items: center;
  justify-content: center;
}

.feature-image {
   /* Style the feature images - maybe add padding or specific dimensions */
   max-width: 100%;
   height: auto;
   /* Example: Add slight padding if images touch edges */
   /* padding: 1rem; */
}

.feature-badge {
  background-color: #194ddb !important;
  color: white;
  border: none;
  font-weight: 500;
  font-size: 0.75rem;
}

/* Aura Effect for Hero Card */
.card-container-with-aura {
  position: relative; /* Ensure container is positioned for pseudo-element */
  z-index: 1; /* Ensure container is above the aura */
}

.card-container-with-aura::before {
  content: '';
  position: absolute;
  /* Center the aura and define its size */
  top: 50%;
  left: 50%;
  width: 100%; /* Adjust size relative to the container */
  height: 110%; /* Make it slightly larger than the card */
  transform: translate(-50%, -50%); /* Center the element */
  /* Define the two-color gradient */
  background: linear-gradient(45deg, #194ddb, #2575fc); /* Purple and Blue */
  /* Create the blur effect */
  filter: blur(40px); /* Increase blur for a softer edge */
  /* Send it behind the card */
  z-index: -1;
  /* Add the animation with ease-in-out timing */
  animation: aura-glow 6s ease-in-out infinite;
  border-radius: 50%; /* Make it circular */
  opacity: 0.6; /* Make the aura slightly subtle */
}



@keyframes aura-glow {
  0% {
    /* Rotate the gradient */
    background: linear-gradient(45deg, #12ce9e, #194ddb);
    /* Keep initial opacity and blur constant */
    opacity: 0.6;
    filter: blur(40px);
    transform: translate(-50%, -50%) scale(1); /* Keep scale constant */
  }
  100% {
    /* Rotate gradient a full 360 degrees from the start */
    background: linear-gradient(405deg, #12ce9e, #194ddb);
    /* Keep initial opacity and blur constant */
    opacity: 0.6;
    filter: blur(40px);
    transform: translate(-50%, -50%) scale(1); /* Keep scale constant */
  }
}

/* Ensure the card itself has a higher z-index if needed, though container z-index should suffice */
.card-container-with-aura .card {
    position: relative; /* Ensure card content is above the aura */
    z-index: 2;
    /* Apply glass effect styles here if not already applied globally */
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Ensure card color is readable */
    color: #fff; 
}

.feature-list li {
  font-size: 0.9rem;
  color: #cbd5e1; /* Lighter text color */
}

.feature-list .bi-check-lg {
   color: #194ddb !important; /* Match badge/button purple */
}

.feature-btn-group .btn-light {
    /* Style the primary button */
    font-weight: 500;
}

.feature-btn-group .btn-outline-light {
    /* Style the secondary button */
     border-color: rgba(255, 255, 255, 0.3);
     color: rgba(255, 255, 255, 0.7);
}

.feature-btn-group .btn-outline-light:hover {
    border-color: #fff;
    color: #1e293b; /* Dark card background color */
    background-color: #fff;
}

/* Success Stories Section Styles */
.success-stories-section {
  color: #f0f0f0;
}

.gradient-text {
  background: -webkit-linear-gradient(45deg, #12dd97, #194ddb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.success-title {
    color: #f0f0f0;
}

.success-title .gradient-text {
  background: -webkit-linear-gradient(45deg, #12dd97, #194ddb); /* Example Green to Blue Gradient */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.success-stories-section .btn-light {
    font-weight: 500;
}

.success-stories-section .partner-logos img {
    filter: grayscale(100%) brightness(1.8); /* Lighten partner logos more */
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.success-stories-section .partner-logos img:hover {
     opacity: 1;
     filter: grayscale(0%) brightness(1);
}

/* Video Card Styles Updated */
.video-card {
  background-color: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  color: #f0f0f0;
  height: 100%;
}

.video-placeholder {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 177.78%; /* 9:16 Aspect Ratio (9/16 = 0.5625, multiplicado por 100 = 177.78) */
  overflow: hidden;
}

.video-placeholder video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.play-button-overlay:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.play-button-overlay i {
  font-size: 3rem;
  color: #ff3e3e;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease;
}

.play-button-overlay:hover i {
  transform: scale(1.1);
}

.community-footer {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   /* Add padding if needed */
   /* padding-top: 3rem; */
}

.community-footer h4 {
    font-weight: bold;
}

.community-footer a:hover {
    color: #a5b4fc !important; /* Lighter color on hover for links */
}

.community-footer small {
    color: #94a3b8; /* Muted color for small text */
}

/* Steps Section Styles */
.steps-section {
  color: #f0f0f0;
}

.steps-badge {
  background: linear-gradient(90deg, #194ddb, #4a90e2); /* Purple to blue gradient */
  color: white;
  border: none;
  font-weight: 500;
  font-size: 0.75rem;
}

/* Styles for the main title */

.steps-title .gradient-text-alt {
  background: -webkit-linear-gradient(45deg, #3b82f6, #4ade80); /* Blue to Green Gradient */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.steps-timeline {
  padding-top: 80px; /* Space for the large numbers */
  padding-bottom: 40px;
}

/* Simplified connecting line - SVG is recommended for the curve */
.steps-background-line {
    position: absolute;
    top: calc(80px + 25px); /* Align with center of markers */
    left: 15%;
    width: 70%;
    height: 4px; /* Line thickness */
    background: linear-gradient(90deg, #194ddb66, #4a90e266); /* Semi-transparent gradient line */
    border-radius: 2px;
    z-index: 1;
    /* NOTE: This is a straight line. Achieving the curve accurately
       requires SVG or very complex pseudo-elements that might not be robust. */
}

.step-number {
    position: absolute;
    font-size: 15rem; /* Very large font size */
    font-weight: bold;
    color: rgba(255, 255, 255, 0.05); /* Very low opacity */
    z-index: 1; /* Behind steps text */
    top: 0;
    line-height: 1;
}

.step-number-1 { left: 10%; transform: translateX(-50%); }
.step-number-2 { left: 50%; transform: translateX(-50%); }
.step-number-3 { left: 90%; transform: translateX(-50%); }

.step-item {
   position: relative; /* Needed if connecting line ends exactly here */
   z-index: 2;
}

.step-marker {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #194ddb, #4a90e2); /* Gradient for marker */
    display: inline-flex; /* Use inline-flex for text-alignment */
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem; /* Check icon size */
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
    margin-bottom: 1rem; /* Spacing below marker */
}

.step-item h4 {
    color: #ffffff;
}

/* Adjust alignment for first and last step marker */
@media (min-width: 768px) {
    .step-item:first-child .step-marker {
        margin-left: 0;
    }
     .step-item:last-child .step-marker {
        margin-right: 0;
    }
    /* Adjust line endpoints */
    .steps-background-line {
        left: calc(16.66% + 25px); /* Start near center of first marker */
        width: calc(66.66% - 50px); /* End near center of last marker */
    }
}

.testimonial-logo{
  filter: brightness(0) invert(1);

}
.steps-section .text-primary {
    color: #194ddb !important; /* Purple color */
}

/* Support/Community Section Styles */
.support-section {
  color: #f0f0f0;
}

.support-title .gradient-text {
    /* Reusing gradient from success section, adjust if needed */
    background: -webkit-linear-gradient(45deg, #4ade80, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.support-title .vip-text {
    /* Style for VIP text - maybe slightly different color/font */
    color: #a5b4fc; /* Example: Lighter indigo color */
}

.support-card {
    background-color: #1e293b;
    border: none;
    position: relative;
    z-index: 2;
    background-color: rgb(255 255 255 / 11%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    /* Características comunes para las tarjetas de soporte */
    border-radius: 1rem;
    overflow: hidden;
}

/* Primera tarjeta - animación hacia arriba */
.support-card-1 {
    animation: floating 3s ease-in-out infinite;
}

/* Segunda tarjeta - animación hacia abajo (inversa) */
.support-card-2 {
    animation: floating-reverse 3s ease-in-out infinite;
}