/* ===== VARIABLES CSS ===== */
:root {
  --primary-color: #3b82f6;
  --secondary-color: #60a5fa;
  --accent-color: #1e40af;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-light: #94a3b8;
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(255, 255, 255, 0.3);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ===== FORM SECTION - 50% ANCHO FIJO ===== */
.form-section {
  display: flex;
  justify-content: flex-start;
  padding: 2rem 0;
}

.form-container {
  display: block;
  width: 100%;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: var(--shadow-xl);
  position: absolute;
  min-height: 780px;
}

/* Mensajes */
.message-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 400px;
}

.message {
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease-out;
}

.message.success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.message.error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.message-content {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.message-content i {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.message-content span {
    flex: 1;
    font-weight: 500;
    line-height: 1.4;
}

.message-close {
    background: none;
    border: none;
    color: currentColor;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
    opacity: 0.8;
    flex-shrink: 0;
}

.message-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.message-close i {
    width: 16px;
    height: 16px;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Información del reCAPTCHA */
.recaptcha-info {
    margin-top: 15px;
    text-align: center;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}

.recaptcha-info a {
    color: #2563eb;
    text-decoration: none;
}

.recaptcha-info a:hover {
    text-decoration: underline;
}

/* Error messages en formulario */
.error-message {
    display: block;
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    min-height: 1.25rem;
}

/* Estados del botón durante carga */
.btn-modern .loading-spinner {
    display: none;
    align-items: center;
    gap: 8px;
    color: currentColor;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive para mensajes */
@media (max-width: 768px) {
    .message-container {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        max-width: none;
    }
    
    .message-content {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* ===== RESPONSIVE MEJORADO ===== */
@media (max-width: 1023px) {
  .main-content {
    flex-direction: column;
    gap: 2rem;
  }
  
  .hero-section {
    flex: none;
    width: 100%;
  }
  
  .form-section {
    flex: none;
    width: 100%;
    order: 2;
    margin-top: 4rem;
  }
}


/* ===== MAIN CONTENT LAYOUT 50%-50% ===== */
.main-content {
  flex: 1;
  display: flex;
  width: 100%;
  min-height: 0;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .main-content {
    flex-direction: row;
    align-items: stretch;
    gap: 3rem;
  }
  
  .hero-section {
    flex: 1;
    max-width: 50%;
  }
  
  .form-section {
    flex: 0 0 auto;
    width: 520px;
    max-width: 50%;
  }
}

/* ===== HERO SECTION COMO CONTENEDOR VERTICAL ===== */
.hero-section {
  display: flex;
  flex-direction: column;
  padding: 2rem 0;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.features-sections {
  display: flex;
  flex-direction: column;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.landing-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.content-wrapper {
  flex: 1;
  padding: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* ===== RESET Y BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ===== EFECTOS DE FONDO ===== */
.background-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
}

.grid-pattern {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: -1;
  opacity: 0.5;
}

/* ===== HEADER ===== */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--bg-primary), var(--border-medium));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: var(--shadow-md);
}

.logo-text h1 {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
}

.country-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.country-info p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
}

.argentina-flag {
  display: flex;
  flex-direction: column;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.flag-stripe {
  flex: 1;
}

.celeste {
  background: #74acdf;
}

.blanco {
  background: white;
}

.header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.badge {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 25px;
  padding: 0.5rem 1rem;
  color: var(--primary-color);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.badge:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.badge i {
  width: 16px;
  height: 16px;
}

.hero-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(34, 197, 94, 0.1));
  border-color: var(--success-color);
  color: var(--success-color);
}

/* ===== ARGENTINA BADGE ANIMADO Y ESTÉTICO ===== */
.argentina-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem 0.6rem 0.8rem;
  border-radius: 25px;
  background: linear-gradient(135deg, 
    rgba(116, 172, 223, 0.15) 0%, 
    rgba(255, 255, 255, 0.95) 30%, 
    rgba(116, 172, 223, 0.15) 100%);
  border: 2px solid rgba(116, 172, 223, 0.3);
  box-shadow: 
    0 4px 15px rgba(116, 172, 223, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 600;
  color: #2563eb; /* Azul que combina con el tema */
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(15px);
  animation: floatBadge 3s ease-in-out infinite;
}

/* Animación principal de flotación */
@keyframes floatBadge {
  0%, 100% { 
    transform: translateY(0px) scale(1);
    box-shadow: 
      0 4px 15px rgba(116, 172, 223, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  50% { 
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
      0 8px 25px rgba(116, 172, 223, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

/* Efecto de brillo que se mueve */
.argentina-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 100%);
  transition: left 1.5s ease;
  animation: shine 4s ease-in-out infinite;
}

@keyframes shine {
  0%, 100% { left: -100%; opacity: 0; }
  50% { left: 100%; opacity: 1; }
}

.argentina-badge:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 
    0 12px 35px rgba(116, 172, 223, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(116, 172, 223, 0.6);
  color: #1e40af; /* Azul más oscuro en hover */
}

.argentina-badge:hover::before {
  animation-duration: 1s;
}

/* Bandera argentina mejorada */
.argentina-badge .argentina-flag {
  width: 32px;
  height: 20px;
  border-radius: 6px;
  box-shadow: 
    0 2px 8px rgba(116, 172, 223, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  margin-right: 0.2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: flagWave 4s ease-in-out infinite;
}

@keyframes flagWave {
  0%, 100% { transform: perspective(100px) rotateY(0deg); }
  25% { transform: perspective(100px) rotateY(-2deg); }
  75% { transform: perspective(100px) rotateY(2deg); }
}

.argentina-badge:hover .argentina-flag {
  transform: scale(1.1);
  box-shadow: 
    0 4px 12px rgba(116, 172, 223, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Sol argentino animado */
.argentina-badge .sun {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, 
    #ffd700 0%, 
    #ffeb3b 50%, 
    #ffc107 100%);
  border-radius: 50%;
  border: 1px solid #ff8f00;
  box-shadow: 
    0 0 8px rgba(255, 215, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 2;
  animation: sunRotate 8s linear infinite, sunPulse 2s ease-in-out infinite alternate;
}

@keyframes sunRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes sunPulse {
  0% { 
    box-shadow: 
      0 0 8px rgba(255, 215, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  100% { 
    box-shadow: 
      0 0 15px rgba(255, 215, 0, 0.8),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}

/* Rayos del sol */
.argentina-badge .sun::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: conic-gradient(
    transparent 0deg,
    rgba(255, 215, 0, 0.3) 30deg,
    transparent 60deg,
    rgba(255, 215, 0, 0.3) 90deg,
    transparent 120deg,
    rgba(255, 215, 0, 0.3) 150deg,
    transparent 180deg,
    rgba(255, 215, 0, 0.3) 210deg,
    transparent 240deg,
    rgba(255, 215, 0, 0.3) 270deg,
    transparent 300deg,
    rgba(255, 215, 0, 0.3) 330deg,
    transparent 360deg
  );
  border-radius: 50%;
  animation: raysRotate 12s linear infinite reverse;
}

@keyframes raysRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Texto del badge */
.argentina-badge span {
  font-weight: 700;
  letter-spacing: 0.3px;
  color: inherit;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
}

.argentina-badge:hover span {
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

/* Partículas de fondo (opcional) */
.argentina-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, 
    rgba(116, 172, 223, 0.1) 0%, 
    transparent 50%),
    radial-gradient(circle at 80% 20%, 
    rgba(255, 215, 0, 0.05) 0%, 
    transparent 50%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: particles 6s ease-in-out infinite;
}

@keyframes particles {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.argentina-badge:hover::after {
  opacity: 1;
}

/* Responsive para el badge */
@media (max-width: 768px) {
  .argentina-badge {
    font-size: 0.8rem;
    padding: 0.5rem 1rem 0.5rem 0.7rem;
    gap: 0.4rem;
  }
  
  .argentina-badge .argentina-flag {
    width: 28px;
    height: 18px;
  }
  
  .argentina-badge .sun {
    width: 10px;
    height: 10px;
  }
}

/* Mejora del color del logo icon para que combine mejor */
.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, 
    var(--border-light) 0%, 
    var(--border-medium) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.logo-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 70%);
  animation: logoShine 6s ease-in-out infinite;
}

@keyframes logoShine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.hero-title {
  font-size: 2.5rem; /* Reducir ligeramente */
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 2.8rem; /* Tamaño optimizado para el 25% */
  }
}

.highlight-text {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ===== KEY BENEFITS ===== */
.key-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.benefit-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.benefit-item i {
  color: var(--success-color);
  width: 20px;
  height: 20px;
}

/* ===== FEATURES SECTIONS - 75% ALTURA ===== */
.features-sections {
  flex: 1; /* Tomar el espacio restante (75%) */
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 2rem;
  max-height: 75vh; /* Máximo 75% de altura de ventana */
}

.feature-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* ===== FEATURES GRID COMPACTO PARA 75% ===== */
.features-compact-grid {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

@media (min-width: 768px) {
  .features-compact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-compact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 1200px) {
  .features-compact-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== FEATURE BLOCKS OPTIMIZADOS ===== */
.feature-block {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.85) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px; /* Más compacto */
  padding: 1rem; /* Padding reducido */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 100px; /* Altura fija más compacta */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.feature-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.feature-block:hover::before {
  transform: scaleX(1);
}

.feature-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  background: rgba(255, 255, 255, 1);
  border-color: rgba(59, 130, 246, 0.3);
}

.feature-block.highlight {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, 
    rgba(223, 235, 255, 1), 
    rgba(255, 255, 255, 1));
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.feature-block.highlight:hover {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1), 
    rgba(208, 229, 255, 0.233));
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
}

.feature-block .feature-icon {
  width: 36px; /* Íconos más pequeños */
  height: 36px;
  margin: 0 auto 0.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    var(--primary-color, #2563eb), 
    var(--secondary-color, #14b8a6));
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all 0.3s ease;
}

.feature-block:hover .feature-icon {
  transform: scale(1.1);
  color: white;
}

.feature-block .feature-title {
  font-size: 0.8rem; /* Texto más pequeño */
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  line-height: 1.2;
  margin: 0;
  transition: color 0.3s ease;
}

.feature-block:hover .feature-title {
  color: var(--primary-color);
}

@media (min-width: 1024px) {
  .form-section {
    top: 2rem;
    align-self: flex-start;
    order: unset;
    padding: 2rem 0; /* Padding vertical */
    box-sizing: border-box;
  }
}

/* ===== FORM CONTAINER OPTIMIZADO ===== */
.form-container {
  width: 100%;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .form-container {
    max-width: 520px; /* Ancho máximo en desktop */
    margin: 0; /* Sin margen automático */
  }
}

.form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

/* ===== ARREGLO SIMPLE DEL ÍCONO DEL CALENDARIO ===== */
.form-container .form-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto; /* Reducido de 2rem a 1rem */
  color: white;
  box-shadow: var(--shadow-md);
}

/* Hacer el ícono SVG más grande sin cambiar el contenedor */
.form-container .form-icon i,
.form-container .form-icon svg {
  width: 24px !important; /* Ícono más grande */
  height: 24px !important;
  stroke-width: 2.5 !important; /* Líneas más gruesas para mejor visibilidad */
  color: white;
}

/* Si quieres un poquito más grande el contenedor sin que afecte mucho el espacio */
@media (min-width: 768px) {
  .form-container .form-icon {
    width: 52px;
    height: 52px;
  }
  
  .form-container .form-icon i,
  .form-container .form-icon svg {
    width: 26px !important;
    height: 26px !important;
  }
}

.form-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.form-header p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ===== FORMULARIO MEJORADO ===== */
.form-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 1023px) {
  .form-row {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0.75rem;
  }
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.form-group label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 1rem 1.25rem;
  border: 2px solid var(--border-light);
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  line-height: 1.5;
  min-height: 48px;
  max-height: 80px !important;
  width: 100%;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
  border-color: var(--danger-color);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 3rem;
}

.error-message {
  color: var(--danger-color);
  font-size: 0.85rem;
  font-weight: 500;
  display: none;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  border-left: 3px solid var(--danger-color);
}

/* ===== BOTÓN MEJORADO ===== */
.btn-modern {
  width: 100%;
  padding: 1.125rem 1.5rem;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  min-height: 56px;
}

.btn-modern::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;
}

.btn-modern:hover::before {
  left: 100%;
}

.btn-modern:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  background: linear-gradient(135deg, var(--accent-color), #1e3a8a);
}

.btn-modern:disabled {
  opacity: 0.8;
  cursor: not-allowed;
  transform: none;
  background: linear-gradient(135deg, #94a3b8, #64748b);
}

.btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.loading-spinner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: white;
  font-size: 0.9rem;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== SISTEMA DE MENSAJES ===== */
.message-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050;
  max-width: 400px;
}

.message-toast {
  background: white;
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideInRight 0.4s ease-out;
  border: 1px solid var(--border-light);
}

.alert-success {
  border-left: 4px solid var(--success-color);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(34, 197, 94, 0.05));
}

.alert-danger {
  border-left: 4px solid var(--danger-color);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(220, 38, 38, 0.05));
}

.message-content {
  flex: 1;
}

.message-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.btn-close {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 18px;
  cursor: pointer;
  padding: 0.25rem;
  margin-left: 1rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-close:hover {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* ===== FOOTER ===== */
.footer {
  margin-top: 4rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border-light);
  text-align: center;
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 20px 20px 0 0;
}

.footer-content p {
  color: var(--bg-primary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.footer-links a {
  color: var(--bg-primary) !important;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--primary-color);
}


/* ===== MENSAJES DE VALIDACIÓN MEJORADOS ===== */
.message-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050;
  max-width: 400px;
  pointer-events: none;
}

.message-toast {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: none;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: all;
  overflow: hidden;
  position: relative;
}

.message-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.message-toast.fade-out {
  opacity: 0;
  transform: translateX(100%);
}

.message-toast.alert-success {
  border-left: 4px solid #10b981;
}

.message-toast.alert-success .message-icon {
  background: #10b981;
  color: white;
}

.message-toast.alert-danger {
  border-left: 4px solid #ef4444;
}

.message-toast.alert-danger .message-icon {
  background: #ef4444;
  color: white;
}

.message-toast.alert-warning {
  border-left: 4px solid #f59e0b;
}

.message-toast.alert-warning .message-icon {
  background: #f59e0b;
  color: white;
}

.message-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.5rem;
}

.message-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0;
}

.message-text {
  flex: 1;
  min-width: 0;
}

.message-text strong {
  display: block;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.message-text p {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.4;
}

.btn-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #6b7280;
}

/* ===== CAMPOS CON ERROR MEJORADOS ===== */
.form-group.has-error .form-control,
.form-control.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
  background-color: rgba(254, 242, 242, 0.5);
}

.form-group.has-error label {
  color: #ef4444;
}

.error-message {
  color: #ef4444;
  font-size: 0.8rem;
  font-weight: 500;
  display: none;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(254, 242, 242, 0.8);
  border-radius: 8px;
  border-left: 3px solid #ef4444;
  animation: slideDown 0.3s ease;
}

.error-message.show-error {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== LOADING STATE MEJORADO ===== */
.loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== RESPONSIVE PARA MENSAJES ===== */
@media (max-width: 768px) {
  .message-container {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
  
  .message-content {
    padding: 0.875rem 1rem;
    gap: 0.75rem;
  }
  
  .message-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .message-text strong {
    font-size: 0.9rem;
  }
  
  .message-text p {
    font-size: 0.8rem;
  }
}

/* ===== CAMPOS VÁLIDOS ===== */
.form-control:valid:not(:placeholder-shown) {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-control:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ===== ANIMACIONES ===== */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-block {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.feature-block:nth-child(1) { animation-delay: 0.1s; }
.feature-block:nth-child(2) { animation-delay: 0.15s; }
.feature-block:nth-child(3) { animation-delay: 0.2s; }
.feature-block:nth-child(4) { animation-delay: 0.25s; }
.feature-block:nth-child(5) { animation-delay: 0.3s; }
.feature-block:nth-child(6) { animation-delay: 0.35s; }
.feature-block:nth-child(7) { animation-delay: 0.4s; }
.feature-block:nth-child(8) { animation-delay: 0.45s; }
.feature-block:nth-child(9) { animation-delay: 0.5s; }
.feature-block:nth-child(10) { animation-delay: 0.55s; }
.feature-block:nth-child(11) { animation-delay: 0.6s; }
.feature-block:nth-child(12) { animation-delay: 0.65s; }
.feature-block:nth-child(13) { animation-delay: 0.7s; }
.feature-block:nth-child(14) { animation-delay: 0.75s; }
.feature-block:nth-child(15) { animation-delay: 0.8s; }
.feature-block:nth-child(16) { animation-delay: 0.85s; }
.feature-block:nth-child(17) { animation-delay: 0.9s; }
.feature-block:nth-child(18) { animation-delay: 0.95s; }
.feature-block:nth-child(19) { animation-delay: 1s; }
.feature-block:nth-child(20) { animation-delay: 1.05s; }

/* ===== RESPONSIVE MEJORADO ===== */

@media (max-width: 768px) {
  .content-wrapper {
    padding: 1rem;
  }
  
  .header {
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-description {
    font-size: 1.1rem;
  }
  
  .key-benefits {
    justify-content: center;
  }
  
  .features-compact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .feature-block {
    height: 90px;
    padding: 0.75rem 0.5rem;
  }
  
  .feature-block .feature-icon {
    width: 28px;
    height: 28px;
  }
  
  .feature-block .feature-title {
    font-size: 0.75rem;
  }
  
  .form-container {
    padding: 1.5rem;
    max-width: 100%;
    border-radius: 20px;
  }
  
  .form-row {
    margin-bottom: 1rem;
  }
  
  .form-group {
    gap: 0.5rem;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 0.875rem 1rem;
    font-size: 16px;
    min-height: 44px;
  }
  
  .btn-modern {
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    font-size: 0.95rem;
  }
  
  .message-container {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.8rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .features-compact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  
  .feature-block {
    height: 80px;
    padding: 0.5rem;
  }
  
  .feature-block .feature-icon {
    width: 24px;
    height: 24px;
  }
  
  .feature-block .feature-title {
    font-size: 0.7rem;
  }
  
  .form-container {
    padding: 1.25rem;
    border-radius: 16px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 0.75rem 1rem;
    font-size: 16px;
  }
  
  .btn-modern {
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
  }
  
  .content-wrapper {
    padding: 0.75rem;
  }
}

/* ===== MEJORAS ESPECÍFICAS ===== */
.form-group input[name="empresa"],
.form-group input[name="telefono"] {
  min-width: 200px;
}

@media (min-width: 1024px) {
  .form-group input[name="empresa"],
  .form-group input[name="telefono"] {
    min-width: 180px;
  }
}

.form-group input::placeholder,
.form-group select::placeholder,
.form-group textarea::placeholder {
  color: var(--text-light);
  opacity: 0.7;
  font-size: 0.95rem;
}

.form-group:focus-within label {
  color: var(--primary-color);
  transform: translateY(-1px);
}

/* ===== EFECTOS ADICIONALES ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== CLEANUP - ELIMINAR ESTILOS NO USADOS ===== */
.category-title,
.feature-category,
.ecosystem-section,
.section-title,
.ecosystem-grid,
.product-card,
.product-header,
.product-icon,
.product-highlight,
.product-title,
.product-desc,
.product-status,
.status-dot {
  display: none !important;
}

.modern-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse"><path d="M24 0H0V24" fill="none" stroke="rgba(59,130,246,0.08)" stroke-width="1"/><circle cx="0" cy="0" r="1.5" fill="rgba(59,130,246,0.30)"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
  opacity: 0.3;
  border-radius: 20px;
}

.footer-main {
  position: relative;
  z-index: 2;
  padding: 3rem 0 2rem 0;
}

.footer-brand {
  position: relative;
}

.footer-brand-content {
  margin-bottom: 1.5rem;
}

.footer-logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0;
}

.footer-description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bg-primary);
  margin-bottom: 1.5rem;
  max-width: 400px;
}

.footer-tagline {
  position: relative;
  padding: 0.75rem 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.tagline-text {
  font-size: 0.875rem;
  font-style: italic;
  color: #60a5fa;
  font-weight: 500;
}

.footer-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #c6dcff;
  margin-bottom: 1.5rem;
  position: relative;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  border-radius: 1px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  display: inline-block;
  padding: 0.25rem 0;
  position: relative;
}

.footer-links a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #3b82f6;
  transition: width 0.3s ease;
}

.footer-links a:hover {
  color: #ffffff;
  transform: translateX(5px);
}

.footer-links a:hover::before {
  width: 100%;
}

.footer-cta {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.footer-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: footerShine 6s ease-in-out infinite;
}

@keyframes footerShine {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.footer-cta-text {
  color: var(--bg-primary);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.footer-buttons {
  margin-bottom: 2rem;
}

.btn-footer-primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-footer-primary::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;
}

.btn-footer-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  color: white;
  text-decoration: none;
}

.btn-footer-primary:hover::before {
  left: 100%;
}

.btn-footer-primary .btn-icon {
  width: 16px;
  height: 16px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.social-label {
  font-size: 0.875rem;
  color: var(--bg-primary);
  font-weight: 500;
}

.social-links {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 18px;
  position: relative;
  overflow: hidden;
}

.social-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.social-link:hover::before {
  transform: translateX(100%);
}

.social-link.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-link.linkedin {
  background: linear-gradient(45deg, #0077b5, #005885);
}

.social-link:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.footer-bottom {
  background: rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 0;
  position: relative;
  z-index: 2;
}

.copyright-text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--bg-primary);
  text-align: center;
}

/* ===== RESPONSIVE FOOTER ===== */
@media (max-width: 992px) {
  .footer-main {
    padding: 2rem 0 1.5rem 0;
  }

  .modern-footer{
    margin-top: 8rem !important;
  }

  .footer-cta {
    padding: 1.5rem;
  }
  
  .footer-social {
    justify-content: center;
    margin-top: 1rem;
  }
}

@media (max-width: 768px) {
  .modern-footer {
    text-align: center;
  }
  
  .footer-brand-content {
    justify-content: center;
  }
  
  .footer-description {
    margin: 0 auto 1.5rem auto;
  }
  
  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .footer-cta {
    margin: 2rem 0;
  }
  
  .footer-social {
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
  }
  
  .social-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-main {
    padding: 1.5rem 0 1rem 0;
  }
  
  .footer-cta {
    padding: 1rem;
  }
  
  .footer-logo-text {
    font-size: 1.25rem;
  }
  
  .btn-footer-primary {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }
  
  .social-link {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* ===== CONTAINER OVERRIDE FOR LANDING ===== */
.modern-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.modern-footer .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.75rem;
}

.modern-footer .col-lg-5,
.modern-footer .col-lg-3,
.modern-footer .col-lg-4,
.modern-footer .col-md-6,
.modern-footer .col-md-12 {
  padding: 0 0.75rem;
  flex: 1;
  min-width: 0;
}

/* ===== UTILITIES FOR LANDING ===== */
.modern-footer .d-flex {
  display: flex;
}

.modern-footer .align-items-center {
  align-items: center;
}

.modern-footer .align-items-start {
  align-items: flex-start;
}

.modern-footer .mb-0 { margin-bottom: 0; }
.modern-footer .mb-3 { margin-bottom: 1rem; }
.modern-footer .mb-4 { margin-bottom: 1.5rem; }
.modern-footer .me-3 { margin-right: 1rem; }
.modern-footer .py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* ===== RESPONSIVE FOOTER MEJORADO - ADAPTACIÓN VERTICAL ===== */
@media (max-width: 992px) {
  .modern-footer .row {
    flex-direction: column;
    gap: 2rem;
  }
  
  .modern-footer .col-lg-5,
  .modern-footer .col-lg-3,
  .modern-footer .col-lg-4,
  .modern-footer .col-md-6 {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  
  .footer-main {
    padding: 2rem 0 1.5rem 0;
  }
  
  .footer-cta {
    padding: 1.5rem;
    margin: 0; /* Eliminar márgenes laterales */
  }
  
  .footer-social {
    justify-content: center;
    margin-top: 1rem;
  }
}

@media (max-width: 768px) {
  .modern-footer {
    text-align: center;
    border-radius: 16px; /* Bordes menos redondeados en móvil */
  }
  
  .modern-footer .row {
    gap: 1.5rem;
  }
  
  .footer-brand {
    order: 1; /* Primero: Información de la empresa */
  }
  
  .footer-cta {
    order: 2; /* Segundo: CTA */
    margin: 0;
    padding: 1.5rem;
  }
  
  .col-lg-3 {
    order: 3; /* Tercero: Navegación */
  }
  
  .footer-brand-content {
    justify-content: center;
  }
  
  .footer-description {
    margin: 0 auto 1.5rem auto;
    max-width: 300px; /* Limitar ancho en móvil */
  }
  
  .footer-title {
    text-align: center;
  }
  
  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .footer-links li {
    margin-bottom: 0;
  }
  
  .footer-social {
    justify-content: center;
    flex-direction: row; /* Mantener horizontal en móvil */
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .social-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .modern-footer {
    border-radius: 12px;
  }
  
  .modern-footer .row {
    gap: 1rem;
  }
  
  .footer-main {
    padding: 1.5rem 0 1rem 0;
  }
  
  .footer-cta {
    padding: 1rem;
  }
  
  .footer-logo-text {
    font-size: 1.25rem;
  }
  
  .footer-description {
    font-size: 0.9rem;
    max-width: 280px;
  }
  
  .footer-title {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  .footer-links {
    gap: 0.25rem;
  }
  
  .footer-links a {
    font-size: 0.9rem;
    padding: 0.125rem 0;
  }
  
  .btn-footer-primary {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    width: 100%; /* Botón de ancho completo en móvil */
    justify-content: center;
  }
  
  .footer-social {
    gap: 0.75rem;
  }
  
  .social-link {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .social-label {
    font-size: 0.8rem;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  
  .footer-tagline {
    padding: 0.5rem 0.75rem;
    margin-top: 1rem;
  }
  
  .tagline-text {
    font-size: 0.8rem;
  }
}
/* ===== ORDEN VERTICAL ESPECÍFICO PARA TABLET ===== */
@media (min-width: 481px) and (max-width: 992px) {
  .modern-footer {
    text-align: center;
  }
  .modern-footer .row {
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }
  .footer-brand {
    order: 1;
    text-align: center;
    width: 100%;
  }
  .footer-cta {
    order: 2;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }
  .col-lg-3 {
    order: 3;
    text-align: center;
    width: 100%;
  }
  .footer-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  .footer-links li {
    margin-bottom: 0;
  }
  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ===== MEJORAS DE ESPACIADO VERTICAL ===== */
@media (max-width: 992px) {
  .modern-footer {
    text-align: center;
  }
  .footer-main {
    padding: 2rem 0 1.5rem 0;
  }
  .footer-brand-content {
    margin-bottom: 1rem;
    justify-content: center;
  }
  .footer-description {
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-tagline {
    margin-top: 1rem;
  }
  .footer-cta-text {
    margin-bottom: 1rem;
  }
  .footer-buttons {
    margin-bottom: 1.5rem;
  }
}

/* ===== CONTENEDOR PRINCIPAL RESPONSIVE ===== */
@media (max-width: 992px) {
  .modern-footer .container {
    padding: 0 1.5rem;
  }
}

@media (max-width: 768px) {
  .modern-footer .container {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .modern-footer .container {
    padding: 0 0.75rem;
  }
}

/* ===== ANIMACIONES SUAVES PARA TRANSICIONES ===== */
.modern-footer .row,
.footer-brand,
.footer-cta,
.col-lg-3 {
  transition: all 0.3s ease;
}

/* ===== GRID ESPECÍFICO PARA DIFERENTES BREAKPOINTS ===== */
@media (min-width: 1200px) {
  .modern-footer .row {
    align-items: flex-start;
    gap: 3rem;
  }
}

@media (min-width: 993px) and (max-width: 1199px) {
  .modern-footer .row {
    gap: 2rem;
  }
  .footer-cta {
    padding: 1.75rem;
  }
}

/* ===== MEJORAR LEGIBILIDAD EN PANTALLAS PEQUEÑAS ===== */
@media (max-width: 480px) {
  .footer-description,
  .footer-cta-text,
  .footer-links a {
    line-height: 1.5;
  }
  .footer-title {
    line-height: 1.3;
  }
}

.form-group textarea {
  min-height: 100px;
  max-height: 180px;
  resize: vertical;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--border-light);
}

/* Personalizar scrollbar en Webkit */
.form-group textarea::-webkit-scrollbar {
  width: 6px;
}

.form-group textarea::-webkit-scrollbar-track {
  background: var(--border-light);
  border-radius: 3px;
}

.form-group textarea::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

.form-group textarea::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* ===== RECAPTCHA VISIBLE STYLES ===== */
#recaptcha-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Contenedor del reCAPTCHA */
#recaptcha-container > div {
  transform-origin: center center;
}

/* Responsive para reCAPTCHA */
@media (max-width: 768px) {
  #recaptcha-container {
    transform: scale(0.9);
    transform-origin: center center;
  }
}

@media (max-width: 480px) {
  #recaptcha-container {
    transform: scale(0.8);
    transform-origin: center center;
  }
}

/* Efecto de error para reCAPTCHA */
#recaptcha-container.error {
  border: 2px solid #ef4444 !important;
  border-radius: 8px !important;
  padding: 10px;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Información del reCAPTCHA actualizada */
.recaptcha-info {
  margin-top: 15px;
  text-align: center;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.4;
}

.recaptcha-info a {
  color: #2563eb;
  text-decoration: none;
}

.recaptcha-info a:hover {
  text-decoration: underline;
}

/* Estilos para el badge cuando está activo */
.grecaptcha-badge:hover {
  transform: scale(1.02) !important;
}

/* Fix para móviles */
@media (max-width: 768px) {
  .grecaptcha-badge {
    right: -180px !important;
    bottom: 10px !important;
    max-width: 200px !important;
    font-size: 10px !important;
  }
  
  .form-container:hover .grecaptcha-badge,
  .form-section:hover .grecaptcha-badge {
    right: 10px !important;
  }
  
  .form-container.loading .grecaptcha-badge {
    right: 10px !important;
  }
}

@media (max-width: 480px) {
  .grecaptcha-badge {
    right: -160px !important;
    bottom: 8px !important;
    max-width: 180px !important;
    transform: scale(0.9) !important;
  }
  
  .form-container:hover .grecaptcha-badge,
  .form-section:hover .grecaptcha-badge {
    right: 8px !important;
  }
  
  .form-container.loading .grecaptcha-badge {
    right: 8px !important;
  }
}

@media (max-height: 700px) {
    .main-content {
        min-height: 500px;
    }
    
    .hero-section,
    .form-section {
        min-height: 900px;
    }
}

/* Fix para móviles en horizontal */
@media (max-width: 768px) and (orientation: landscape) {
    .landing-container {
        min-height: 100vh;
    }
    
    .main-content {
        min-height: calc(100vh - 150px);
    }
}


/* ===== FEATURES GRID COMPACTO OPTIMIZADO ===== */
.features-compact-grid {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

/* Desktop: 4 columnas */
@media (min-width: 1200px) {
  .features-compact-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

/* Laptop: 3 columnas */
@media (min-width: 1024px) and (max-width: 1199px) {
  .features-compact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

/* Tablet: 3 columnas */
@media (min-width: 768px) and (max-width: 1023px) {
  .features-compact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}

/* Móvil grande: 2 columnas pero más compacto */
@media (min-width: 481px) and (max-width: 767px) {
  .features-compact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
}

/* Móvil pequeño: Características agrupadas en categorías */
@media (max-width: 480px) {
  .features-compact-grid {
    display: block; /* Cambiar a bloque para móvil */
  }
  
  /* Crear secciones categorizadas para móvil */
  .feature-category-mobile {
    margin-bottom: 1.5rem;
  }
  
  .feature-category-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
  }
  
  .feature-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
}

/* ===== FEATURE BLOCKS RESPONSIVOS ===== */
.feature-block {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.85) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Móvil: Features más compactos */
@media (max-width: 768px) {
  .feature-block {
    height: 80px;
    padding: 0.5rem;
    border-radius: 10px;
  }
  
  .feature-block .feature-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0.25rem;
  }
  
  .feature-block .feature-title {
    font-size: 0.7rem;
    line-height: 1.1;
  }
}

@media (max-width: 480px) {
  .feature-block {
    height: 70px;
    padding: 0.4rem;
    border-radius: 8px;
  }
  
  .feature-block .feature-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 0.2rem;
  }
  
  .feature-block .feature-title {
    font-size: 0.65rem;
    line-height: 1;
  }
}


.landing-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.content-wrapper {
    flex: 1;
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.modern-footer {
    flex-shrink: 0; /* Evita que el footer se encoja */
}

/* ===== RECAPTCHA ERROR STYLES ===== */
#recaptcha-container.is-invalid {
  border: 2px solid #ef4444 !important;
  border-radius: 8px !important;
  padding: 10px !important;
  background-color: rgba(239, 68, 68, 0.1) !important;
  animation: shake 0.5s ease-in-out;
}

.form-group.has-error #recaptcha-container {
  border: 2px solid #ef4444 !important;
  border-radius: 8px !important;
  padding: 10px !important;
  background-color: rgba(239, 68, 68, 0.1) !important;
}

#recaptcha-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 5px;
  display: none;
}

#recaptcha-error.show-error {
  display: block !important;
  animation: fadeInError 0.3s ease-out;
}

@keyframes fadeInError {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}


/* ===== FOOTER FIJO AL FONDO ===== */
.modern-footer {
  background: linear-gradient(135deg, #243a5c 0%, #3b82f6 100%);
  color: #e2e8f0;
  position: relative;
  margin-top: 40px;
  flex-shrink: 0;
  z-index: 10;
  border-radius: 20px; /* Sin bordes redondeados para mejor adherencia */
  width: 100%;
}

/* ===== FEATURES MOBILE CON EXPANDIR ===== */
.features-mobile-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* Grid principal (6 features más importantes) */
.features-primary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  width: 100%;
}

/* Sección del botón expandir */
.features-expand-section {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0;
}

.btn-expand-features {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border: none;
  border-radius: 20px;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}

.btn-expand-features::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;
}

.btn-expand-features:hover::before {
  left: 100%;
}

.btn-expand-features:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn-expand-features.active {
  background: linear-gradient(135deg, var(--success-color), #059669);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.expand-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.expand-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn-expand-features.active .expand-icon {
  transform: rotate(180deg);
}

.expand-label {
  font-weight: 600;
  letter-spacing: 0.3px;
}

.feature-count {
  font-size: 0.8rem;
  opacity: 0.9;
  font-weight: 500;
}

/* Contenedor de features secundarios */
.features-secondary-container {
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

.features-secondary-container.collapsed {
  max-height: 0;
  opacity: 0;
  transform: scaleY(0);
  margin: 0;
  padding: 0;
}

.features-secondary-container.expanded {
  max-height: 1000px; /* Valor alto para permitir expansión */
  opacity: 1;
  transform: scaleY(1);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(59, 130, 246, 0.1);
}

.features-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  width: 100%;
  animation: fadeInUp 0.5s ease-out;
}

/* Indicador visual de expansión */
.features-secondary-container.expanded .features-secondary-grid {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE PARA FEATURES MOBILE ===== */
@media (max-width: 480px) {
  .features-primary-grid,
  .features-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  
  .btn-expand-features {
    padding: 0.625rem 1.25rem;
    font-size: 0.85rem;
    border-radius: 16px;
  }
  
  .expand-icon {
    width: 16px;
    height: 16px;
  }
  
  .feature-count {
    font-size: 0.75rem;
  }
  
  .features-secondary-container.expanded {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
  }

  .modern-footer{
    max-height: 1200px;
  }
}

/* ===== MANTENER GRID DESKTOP ORIGINAL ===== */
@media (min-width: 769px) {
  .features-mobile-container {
    display: none;
  }
  
  .features-compact-grid {
    display: grid;
    gap: 0.75rem;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .features-compact-grid {
    display: none;
  }
}

/* ===== FEATURE BLOCKS OPTIMIZADOS PARA MOBILE ===== */
@media (max-width: 768px) {
  .feature-block {
    height: 75px;
    padding: 0.5rem;
    border-radius: 10px;
  }
  
  .feature-block .feature-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0.3rem;
  }
  
  .feature-block .feature-title {
    font-size: 0.7rem;
    line-height: 1.1;
    font-weight: 600;
  }

  .form-section {
    max-height: 1200px !important;
  }

  /* APLICAR MARGIN-TOP SOLO CUANDO FEATURES ESTÁN EXPANDIDOS */
  .form-container.features-expanded {
    margin-top: 15rem !important;
  }

}

@media (max-width: 480px) {
  .feature-block {
    height: 70px;
    padding: 0.4rem;
    border-radius: 8px;
  }
  
  .feature-block .feature-icon {
    width: 22px;
    height: 22px;
    margin-bottom: 0.25rem;
  }
  
  .feature-block .feature-title {
    font-size: 0.65rem;
    line-height: 1;
    font-weight: 600;
  }
}

/* ===== EFECTOS ESPECIALES ===== */
.btn-expand-features:active {
  transform: scale(0.98);
}

.features-secondary-container.expanded .feature-block {
  animation: slideInUp 0.4s ease-out;
  animation-fill-mode: both;
}

.features-secondary-container.expanded .feature-block:nth-child(1) { animation-delay: 0.1s; }
.features-secondary-container.expanded .feature-block:nth-child(2) { animation-delay: 0.15s; }
.features-secondary-container.expanded .feature-block:nth-child(3) { animation-delay: 0.2s; }
.features-secondary-container.expanded .feature-block:nth-child(4) { animation-delay: 0.25s; }
.features-secondary-container.expanded .feature-block:nth-child(5) { animation-delay: 0.3s; }
.features-secondary-container.expanded .feature-block:nth-child(6) { animation-delay: 0.35s; }

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== FORM CONTAINER CON MARGIN CONDICIONAL ===== */
@media (max-width: 480px) {
  .form-container {
    padding: 1.25rem;
    border-radius: 16px;
    transition: margin-top 0.4s ease; /* Transición suave */
  }
  
  /* APLICAR MARGIN-TOP SOLO CUANDO FEATURES ESTÁN EXPANDIDOS */
  .form-container.features-expanded {
    margin-top: 10rem;
  }

  .form-section {
    max-height: 1200px !important;
  }
  
  /* Margen normal cuando no está expandido */
  .form-container:not(.features-expanded) {
    margin-top: 2rem; /* O el valor que prefieras para el estado normal */
  }
}

/* ===== MEJORAR LA TRANSICIÓN PARA MEJOR UX ===== */
@media (max-width: 768px) {
  .form-container {
    transition: margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (max-width: 568px) and (min-width: 481px) {
  .form-container.features-expanded {
    margin-top: 12rem; /* Menos margen en pantallas un poco más grandes */
  }
  
  .form-container:not(.features-expanded) {
    margin-top: 1.5rem;
  }
}

@media (max-width: 390px) {
  .form-container.features-expanded {
    margin-top: 8rem; /* Ajustar para pantallas muy pequeñas */
  }
  
  .form-container:not(.features-expanded) {
    margin-top: 1rem;
  }
}

/* ===== ASEGURAR QUE EN DESKTOP NO SE APLIQUE LA CLASE ===== */
@media (min-width: 769px) {
  .form-container.features-expanded {
    margin-top: initial; /* Reset en desktop */
  }
}