/* Limitación de Velocidad - Estilos Específicos */

/* Variables CSS */
:root {
     --gradient-primary: linear-gradient(135deg, #ff6b35, #f7931e, #ff6b35);
     --gradient-secondary: linear-gradient(135deg, #667eea, #764ba2);
     --gradient-tech: linear-gradient(135deg, #1e3c72, #2a5298);
     --shadow-primary: 0 10px 40px rgba(255, 107, 53, 0.3);
     --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1);
     --speed-fast: 0.8s;
     --speed-normal: 1.2s;
     --speed-slow: 2s;
}

/* Hero Section */
.limitacion-hero-section {
     position: relative;
     background: var(--gradient-tech);
     min-height: 100vh;
     display: flex;
     align-items: center;
     overflow: hidden;
     color: white;
}

.limitacion-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
          radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.2) 0%, transparent 50%),
          radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.2) 0%, transparent 50%);
     z-index: 1;
}

/* Partículas animadas */
.limitacion-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
}

.limitacion-particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: rgba(255, 255, 255, 0.6);
     border-radius: 50%;
     animation: float var(--speed-slow) infinite ease-in-out;
}

.limitacion-particle:nth-child(1) {
     top: 20%;
     left: 20%;
     animation-delay: 0s;
}

.limitacion-particle:nth-child(2) {
     top: 60%;
     left: 80%;
     animation-delay: 0.5s;
}

.limitacion-particle:nth-child(3) {
     top: 80%;
     left: 30%;
     animation-delay: 1s;
}

.limitacion-particle:nth-child(4) {
     top: 30%;
     left: 70%;
     animation-delay: 1.5s;
}

.limitacion-particle:nth-child(5) {
     top: 70%;
     left: 10%;
     animation-delay: 2s;
}

.limitacion-particle:nth-child(6) {
     top: 10%;
     left: 90%;
     animation-delay: 2.5s;
}

@keyframes float {

     0%,
     100% {
          transform: translateY(0px) rotate(0deg);
          opacity: 1;
     }

     50% {
          transform: translateY(-20px) rotate(180deg);
          opacity: 0.3;
     }
}

/* Hero Content */
.limitacion-hero-content {
     position: relative;
     z-index: 3;
     text-align: center;
     max-width: 800px;
     margin: 0 auto;
     padding: 2rem;
}

/* Icono principal con ondas */
.limitacion-icon-container {
     position: relative;
     display: inline-block;
     margin-bottom: 2rem;
}

.limitacion-main-icon {
     font-size: 4rem;
     color: #ff6b35;
     background: rgba(255, 255, 255, 0.1);
     padding: 1.5rem;
     border-radius: 50%;
     backdrop-filter: blur(10px);
     border: 2px solid rgba(255, 107, 53, 0.3);
     animation: iconPulse var(--speed-normal) infinite ease-in-out;
}

@keyframes iconPulse {

     0%,
     100% {
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
     }

     50% {
          transform: scale(1.05);
          box-shadow: 0 0 0 20px rgba(255, 107, 53, 0);
     }
}

/* Ondas de señal */
.limitacion-signal-waves {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 120px;
     height: 120px;
}

.limitacion-wave {
     position: absolute;
     border: 2px solid rgba(255, 107, 53, 0.6);
     border-radius: 50%;
     animation: waveExpand var(--speed-normal) infinite ease-out;
}

.wave-1 {
     width: 80px;
     height: 80px;
     top: 20px;
     left: 20px;
     animation-delay: 0s;
}

.wave-2 {
     width: 100px;
     height: 100px;
     top: 10px;
     left: 10px;
     animation-delay: 0.3s;
}

.wave-3 {
     width: 120px;
     height: 120px;
     top: 0;
     left: 0;
     animation-delay: 0.6s;
}

@keyframes waveExpand {
     0% {
          transform: scale(0.8);
          opacity: 1;
     }

     100% {
          transform: scale(1.4);
          opacity: 0;
     }
}

/* Títulos del hero */
.limitacion-hero-title {
     font-size: 3.5rem;
     font-weight: 800;
     margin-bottom: 1rem;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: titleGlow var(--speed-slow) infinite ease-in-out;
}

@keyframes titleGlow {

     0%,
     100% {
          text-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
     }

     50% {
          text-shadow: 0 0 40px rgba(255, 107, 53, 0.8);
     }
}

.limitacion-hero-subtitle {
     font-size: 1.5rem;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 1.5rem;
}

.limitacion-hero-description {
     font-size: 1.1rem;
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.6;
     margin-bottom: 2rem;
}

/* Estadísticas del hero */
.limitacion-stats {
     display: flex;
     justify-content: center;
     gap: 2rem;
     flex-wrap: wrap;
     margin-top: 2rem;
}

.stat-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
     padding: 1rem;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 15px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.3s ease;
     min-width: 120px;
}

.stat-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.15);
     box-shadow: var(--shadow-primary);
}

.stat-item i {
     font-size: 2rem;
     color: #ff6b35;
}

.stat-item span {
     font-weight: 600;
     color: white;
     text-align: center;
     font-size: 0.9rem;
}

/* Mejoras para las tarjetas de factores */
.card {
     transition: all 0.3s ease;
     border: none;
     overflow: hidden;
}

.card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-card);
}

.card-body {
     position: relative;
}

.card-body::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: var(--gradient-primary);
     transform: scaleX(0);
     transition: transform 0.3s ease;
}

.card:hover .card-body::before {
     transform: scaleX(1);
}

/* Mejoras para el acordeón */
.accordion-button {
     background: var(--gradient-primary);
     color: white;
     border: none;
     font-weight: 600;
}

.accordion-button:not(.collapsed) {
     background: var(--gradient-secondary);
     color: white;
     box-shadow: none;
}

.accordion-button:focus {
     border-color: transparent;
     box-shadow: 0 0 0 0.25rem rgba(255, 107, 53, 0.25);
}

.accordion-item {
     border: 1px solid rgba(255, 107, 53, 0.2);
     margin-bottom: 1rem;
     border-radius: 10px !important;
     overflow: hidden;
}

.accordion-body {
     background: linear-gradient(145deg, #f8f9fa, #ffffff);
     border-top: 3px solid #ff6b35;
}

/* Sección de contacto mejorada */
.bg-light.rounded-4 {
     background: var(--gradient-secondary) !important;
     color: white;
     position: relative;
     overflow: hidden;
}

.bg-light.rounded-4::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: repeating-linear-gradient(45deg,
               transparent,
               transparent 2px,
               rgba(255, 255, 255, 0.05) 2px,
               rgba(255, 255, 255, 0.05) 4px);
     animation: patternMove 10s linear infinite;
}

@keyframes patternMove {
     0% {
          transform: translate(-50%, -50%) rotate(0deg);
     }

     100% {
          transform: translate(-50%, -50%) rotate(360deg);
     }
}

.bg-light.rounded-4 * {
     position: relative;
     z-index: 2;
}

/* Botones mejorados */
.btn {
     border-radius: 25px;
     font-weight: 600;
     padding: 0.75rem 1.5rem;
     transition: all 0.3s ease;
     border: 2px solid transparent;
}

.btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-success {
     background: linear-gradient(135deg, #28a745, #20c997);
     border: none;
}

.btn-primary {
     background: linear-gradient(135deg, #007bff, #6f42c1);
     border: none;
}

.btn-outline-orange {
     color: #ff6b35;
     border-color: #ff6b35;
     background: transparent;
}

.btn-outline-orange:hover {
     background: var(--gradient-primary);
     border-color: transparent;
     color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
     .limitacion-hero-title {
          font-size: 2.5rem;
     }

     .limitacion-hero-subtitle {
          font-size: 1.2rem;
     }

     .limitacion-main-icon {
          font-size: 3rem;
          padding: 1rem;
     }

     .limitacion-stats {
          gap: 1rem;
     }

     .stat-item {
          min-width: 100px;
          padding: 0.75rem;
     }

     .stat-item span {
          font-size: 0.8rem;
     }
}

@media (max-width: 576px) {
     .limitacion-hero-section {
          min-height: 80vh;
     }

     .limitacion-hero-content {
          padding: 1rem;
     }

     .limitacion-hero-title {
          font-size: 2rem;
     }

     .limitacion-stats {
          flex-direction: column;
          align-items: center;
     }
}

/* Animaciones adicionales */
@keyframes fadeInUp {
     from {
          opacity: 0;
          transform: translateY(30px);
     }

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

@keyframes pulse {
     0% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
     }

     70% {
          transform: scale(1);
          box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
     }

     100% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
     }
}

@keyframes twinkle {

     0%,
     100% {
          opacity: 0.3;
          transform: scale(1);
     }

     50% {
          opacity: 1;
          transform: scale(1.5);
     }
}

@keyframes iconBounce {

     0%,
     20%,
     50%,
     80%,
     100% {
          transform: translateY(0);
     }

     40% {
          transform: translateY(-10px);
     }

     60% {
          transform: translateY(-5px);
     }
}

@keyframes supportWave {
     0% {
          transform: scale(0.8);
          opacity: 1;
     }

     100% {
          transform: scale(1.4);
          opacity: 0;
     }
}

.card {
     animation: fadeInUp 0.6s ease forwards;
}

.card:nth-child(even) {
     animation-delay: 0.1s;
}

.card:nth-child(odd) {
     animation-delay: 0.2s;
}

/* Hover effects para botones de contacto */
.contact-btn:hover {
     transform: translateY(-3px) !important;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.contact-btn:hover div {
     left: 0 !important;
}

/* Efectos para las tarjetas de factores */
.factor-card:hover {
     transform: translateY(-10px) scale(1.02);
}

.user-factor-card:hover {
     transform: translateY(-8px) scale(1.01);
}