/* ===== BRAND COLORS UPGRADE - Full Hosting Argentina ===== */

/* Nuevos colores basados en el logo azul de la empresa */
:root {
  /* Colores principales del logo azul */
  --brand-blue: #0d6efd;
  --brand-blue-light: #3d8bfd;
  --brand-blue-dark: #0b5cd9;
  --brand-blue-accent: #1976d2;
  --brand-blue-soft: #42a5f5;
  --brand-blue-deep: #1565c0;
  
  /* Gradientes de marca azul */
  --brand-primary-gradient: linear-gradient(135deg, #0d6efd 0%, #1976d2 100%);
  --brand-secondary-gradient: linear-gradient(135deg, #3d8bfd 0%, #42a5f5 100%);
  --brand-accent-gradient: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
  --brand-cool-gradient: linear-gradient(135deg, #2196f3 0%, #0d6efd 100%);
  
  /* Colores complementarios */
  --brand-teal: #009688;
  --brand-green: #4caf50;
  --brand-cyan: #00bcd4;
  --brand-indigo: #3f51b5;
  --brand-purple: #9c27b0;
  
  /* Colores neutros mejorados */
  --brand-gray-50: #fafafa;
  --brand-gray-100: #f5f5f5;
  --brand-gray-200: #eeeeee;
  --brand-gray-300: #e0e0e0;
  --brand-gray-400: #bdbdbd;
  --brand-gray-500: #9e9e9e;
  --brand-gray-600: #757575;
  --brand-gray-700: #616161;
  --brand-gray-800: #424242;
  --brand-gray-900: #212121;
  
  /* Sombras mejoradas con azul */
  --brand-shadow-sm: 0 2px 8px rgba(13, 110, 253, 0.15);
  --brand-shadow: 0 4px 20px rgba(13, 110, 253, 0.25);
  --brand-shadow-lg: 0 8px 40px rgba(13, 110, 253, 0.35);
  --brand-shadow-xl: 0 16px 60px rgba(13, 110, 253, 0.4);
  
  /* Transiciones suaves */
  --brand-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --brand-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --brand-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Bordes redondeados */
  --brand-radius-sm: 8px;
  --brand-radius: 12px;
  --brand-radius-lg: 16px;
  --brand-radius-xl: 24px;
}

/* ===== SOPORTE - COLORES DE MARCA ===== */

/* Hero Section con colores de marca */
.support-hero {
  background: var(--brand-primary-gradient);
  position: relative;
  overflow: hidden;
}

.support-hero::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.2"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="150" cy="150" r="100" fill="url(%23a)"/><circle cx="850" cy="250" r="150" fill="url(%23a)"/><circle cx="400" cy="800" r="120" fill="url(%23a)"/></svg>') no-repeat center center;
  background-size: cover;
  opacity: 0.6;
}

/* Buscador con colores de marca */
.btn-search {
  background: var(--brand-secondary-gradient);
  box-shadow: var(--brand-shadow);
}

.btn-search:hover {
  background: var(--brand-accent-gradient);
  box-shadow: var(--brand-shadow-lg);
  transform: scale(1.05);
}

/* Iconos de categorías con colores de marca */
.category-icon {
  background: var(--brand-primary-gradient);
  box-shadow: var(--brand-shadow);
}

.category-card:hover .category-icon {
  background: var(--brand-secondary-gradient);
  transform: scale(1.1);
}

/* Cards con efectos de marca */
.category-card::before {
  background: var(--brand-primary-gradient);
}

.category-card:hover {
  box-shadow: var(--brand-shadow-lg);
}

/* Enlaces con colores de marca azul */
.category-links a:hover {
  color: var(--brand-blue);
  background: rgba(13, 110, 253, 0.08);
}

.category-links a:hover i {
  color: var(--brand-blue);
}

.category-links a::before {
  background: var(--brand-primary-gradient);
}

/* Botones con colores de marca */
.btn-primary {
  background: var(--brand-primary-gradient);
  border: none;
  box-shadow: var(--brand-shadow);
}

.btn-primary:hover {
  background: var(--brand-secondary-gradient);
  box-shadow: var(--brand-shadow-lg);
  transform: translateY(-2px);
}

/* ===== GUÍAS - COLORES DE MARCA ===== */

/* Hero de guías */
.guide-hero {
  background: var(--brand-primary-gradient);
}

.guide-hero::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.25"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="120" fill="url(%23a)"/><circle cx="800" cy="300" r="180" fill="url(%23a)"/><circle cx="300" cy="700" r="140" fill="url(%23a)"/></svg>') no-repeat center center;
  background-size: cover;
  opacity: 0.5;
}

/* Pasos numerados */
.step-number {
  background: var(--brand-primary-gradient);
  box-shadow: var(--brand-shadow);
}

/* Cajas informativas con colores de marca azul */
.info-box {
  background: linear-gradient(135deg, #e3f2fd 0%, #e1f5fe 100%);
  border: 1px solid rgba(13, 110, 253, 0.2);
}

.info-box i {
  color: var(--brand-blue);
}

.success-box {
  background: linear-gradient(135deg, #e8f5e9 0%, #d4edda 100%);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.warning-box {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  border: 1px solid rgba(255, 193, 7, 0.2);
}

/* Códigos con tema de marca azul */
code {
  background: linear-gradient(135deg, #e3f2fd 0%, #e1f5fe 100%);
  border: 1px solid rgba(13, 110, 253, 0.2);
  color: var(--brand-blue-dark);
}

/* ===== MEJORAS MÓVILES ===== */

/* Breakpoints mejorados */
@media (max-width: 1200px) {
  .container {
    max-width: 100%;
    padding: 0 1rem;
  }
}

@media (max-width: 992px) {
  /* Hero responsive */
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }
  
  /* Cards en tablet */
  .category-card {
    margin-bottom: 1.5rem;
  }
  
  /* Espaciado reducido */
  .support-categories {
    padding: 3rem 0;
  }
}

@media (max-width: 768px) {
  /* Hero móvil */
  .support-hero {
    padding: 60px 0;
    min-height: 50vh;
  }
  
  .hero-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  /* Buscador móvil */
  .search-input {
    height: 50px;
    font-size: 1rem;
    padding: 0 50px 0 20px;
  }
  
  .btn-search {
    width: 40px;
    height: 40px;
    right: 5px;
    top: 5px;
  }
  
  /* Cards móviles */
  .category-card {
    padding: 2rem 1.5rem;
    margin-bottom: 1rem;
  }
  
  .category-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
  }
  
  .category-icon i,
  .category-icon svg {
    font-size: 1.5rem;
    width: 24px;
    height: 24px;
  }
  
  .category-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  
  /* Enlaces móviles */
  .category-links a {
    padding: 0.75rem 0;
    font-size: 0.95rem;
  }
  
  /* Guías móviles */
  .guide-hero {
    padding: 50px 0;
    min-height: 40vh;
  }
  
  .guide-title {
    font-size: 2rem;
    line-height: 1.2;
  }
  
  .guide-subtitle {
    font-size: 1rem;
  }
  
  .guide-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
  }
  
  .guide-step {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .guide-step h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  
  .guide-step h3 {
    font-size: 1.2rem;
  }
  
  .guide-step h4 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
  }
  
  .step-number {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
}

@media (max-width: 576px) {
  /* Extra pequeño - móviles */
  .container {
    padding: 0 0.75rem;
  }
  
  /* Hero extra pequeño */
  .support-hero {
    padding: 40px 0;
  }
  
  .hero-title {
    font-size: 1.8rem;
  }
  
  .hero-subtitle {
    font-size: 0.95rem;
  }
  
  /* Buscador extra pequeño */
  .search-box {
    margin: 0 auto;
    max-width: 100%;
  }
  
  .search-input {
    height: 45px;
    font-size: 0.9rem;
  }
  
  /* Cards extra pequeñas */
  .category-card {
    padding: 1.5rem 1rem;
  }
  
  .category-icon {
    width: 50px;
    height: 50px;
  }
  
  .category-card h3 {
    font-size: 1.2rem;
  }
  
  .category-links a {
    font-size: 0.9rem;
    padding: 0.6rem 0;
  }
  
  /* Botones móviles */
  .btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
  
  .btn-lg {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
  
  /* Guías extra pequeñas */
  .guide-hero {
    padding: 30px 0;
  }
  
  .guide-title {
    font-size: 1.6rem;
  }
  
  .guide-step {
    padding: 1.25rem;
  }
  
  .guide-step h2 {
    font-size: 1.3rem;
  }
  
  /* Espaciado general */
  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ===== ANIMACIONES CON COLORES DE MARCA ===== */

/* Animación de pulso para elementos importantes */
@keyframes brandPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 107, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
  }
}

/* Animación de brillo */
@keyframes brandShine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Aplicar animaciones */
.btn-primary:hover {
  animation: brandPulse 2s infinite;
}

.category-card:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: brandShine 1.5s ease-in-out;
}

/* ===== MEJORAS DE ACCESIBILIDAD ===== */

/* Focus states mejorados con azul */
.search-input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.category-links a:focus {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

.btn:focus {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* ===== MODO OSCURO CON COLORES DE MARCA ===== */

.dark-mode .support-hero {
  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
}

.dark-mode .category-icon {
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
}

.dark-mode .btn-primary {
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
}

.dark-mode .category-links a:hover {
  color: #64b5f6;
  background: rgba(33, 150, 243, 0.1);
}

/* ===== OPTIMIZACIONES DE RENDIMIENTO ===== */

/* GPU acceleration para animaciones */
.category-card,
.btn,
.search-input {
  will-change: transform;
  backface-visibility: hidden;
}

/* Reducir motion para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}