/* ============================================
   INTERSHOW - Sitio Web Optimizado
   ============================================
   Versión: 8.4 - Hero Animations Fix (páginas internas)
   
   ÍNDICE DE CONTENIDOS:
   1. Variables CSS (Custom Properties)
   2. Loading Screen (Premium Effect)
   3. Accessibility & Skip Links
   4. Reset & Base Styles
   5. Utilidades Globales (.container, .btn, .section-title)
   6. Custom Cursor con Glow (Premium Effect)
   7. Navegación (nav)
   8. Hero Section con Video Parallax (Premium Effect)
   9. Split Text Reveal Animation (Premium Effect)
   10. About Section
   11. Services Section con Tilt 3D (Premium Effect)
   12. Portfolio/Proyectos
   13. Clientes/Marcas
   14. Testimonios
   15. Blog/Noticias
   16. Contacto/Newsletter
   17. Footer
   18. Back to Top Button
   19. WhatsApp Widget
   20. Cookie Consent Banner
   21. Scroll Indicator & Progress Bar
   22. Legal Pages
   23. Animations & Keyframes (Centralizadas)
   24. Media Queries (Responsive)
   
   BREAKPOINTS RESPONSIVE:
   - Desktop: >1000px (experiencia completa con efectos premium)
   - Tablet Landscape: 850-1000px (grids 2-3 cols, stats 3 cols)
   - Tablet: ≤1000px (grids 2 cols, mobile menu, parallax reducido)
   - Tablet Pequeño: ≤800px (about grid 2 cols, última centrada)
   - Mobile Medium: 550-640px (proporciones optimizadas)
   - Mobile: ≤640px (columna única, max-width 380px)
   - Mobile XS: ≤480px (ultra optimizado, animaciones mínimas)
   
   NOTA: Los efectos premium (cursor, parallax, split text, tilt 3D,
   botones magnéticos) están implementados con GPU acceleration
   para máxima performance.
   
   OPTIMIZACIONES PRE-RESPONSIVE:
   - ✅ Loading Screen premium con animación
   - ✅ Google Analytics 4 con Consent Mode
   - ✅ Meta Tags mejorados (OG, Twitter Cards)
   - ✅ Favicons completos + PWA Manifest
   - ✅ Sitemap.xml y robots.txt optimizados
   - ✅ Preload de recursos críticos
   - ✅ Accesibilidad mejorada (A11y)
   - ✅ Skip links para navegación por teclado
   ============================================ */

/* ============================================
   1. VARIABLES CSS - Custom Properties
   ============================================
   Tokens de diseño centralizados para mantener
   consistencia visual en todo el sitio.
   ============================================ */
:root {
  /* Colores principales */
  --color-primary: #e3211f; /* Rojo corporativo Intershow */
  --color-primary-light: #ff3634; /* Variante clara para hovers */
  --color-primary-dark: #c41d1b; /* Variante oscura para active */

  /* Colores de fondo oscuro */
  --color-dark-1: #1e120d; /* Fondo principal oscuro */
  --color-dark-2: #1e110d; /* Fondo alternativo */
  --color-dark-3: #1d120d; /* Fondo terciario */

  /* Escala de grises */
  --color-white: #fff;
  --color-gray-50: #f9fafb; /* Gris muy claro */
  --color-gray-100: #f3f4f6; /* Gris claro */
  --color-gray-200: #e5e7eb; /* Borders */
  --color-gray-600: #4b5563; /* Texto secundario */
  --color-gray-900: #111827; /* Texto principal */

  /* Tipografía */
  --font-primary: "Montserrat", sans-serif; /* Headings y botones */
  --font-secondary: "Inter", sans-serif; /* Body text */

  /* Espaciado */
  --section-padding: 80px; /* Padding vertical de secciones */

  /* Border radius */
  --border-radius-sm: 12px; /* Elementos pequeños */
  --border-radius-md: 20px; /* Elementos medianos */
  --border-radius-lg: 30px; /* Elementos grandes */

  /* Transiciones */
  --transition-fast: 0.2s; /* Hovers sutiles */
  --transition-base: 0.3s; /* Transiciones estándar */
  --transition-slow: 0.5s; /* Animaciones complejas */

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra sutil */
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra media */
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15); /* Sombra pronunciada */
  --shadow-primary: 0 4px 20px rgba(227, 33, 31, 0.25); /* Sombra con color brand */
}

/* ============================================
   2. LOADING SCREEN (Premium Effect)
   ============================================ */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a1f 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================
   LOADER - Animación de carga inicial
   ============================================
   Pantalla fullscreen que aparece al cargar la página.
   Se oculta con fade-out después de 2 segundos.
   
   ESTRUCTURA:
   - .page-loader: contenedor fullscreen con backdrop-filter
   - .loader-content: flex column centrado
   - .loader-logo: logo con animación float
   - .loader-spinner: 3 anillos rotando (efecto "pulsing rings")
   - .loader-text: texto animado con fade-in
   
   ANIMACIONES:
   - logoFloat: movimiento vertical suave (3s loop)
   - spinnerRotate: rotación continua de anillos (1.2s)
   - textPulse: fade in/out del texto (2s)
   
   PERFORMANCE:
   - Usa transform y opacity (GPU-accelerated)
   - backdrop-filter para blur de fondo
   ============================================ */

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.loader-logo {
  width: 120px;
  height: 120px;
  position: relative;
  animation: logoFloat 3s ease-in-out infinite;
}

.loader-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(227, 33, 31, 0.5));
}

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.05);
  }
}

.loader-spinner {
  width: 60px;
  height: 60px;
  position: relative;
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinnerRotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1) {
  animation-delay: -0.45s;
  border-top-color: var(--color-primary);
}

.spinner-ring:nth-child(2) {
  animation-delay: -0.3s;
  border-top-color: var(--color-primary-light);
}

.spinner-ring:nth-child(3) {
  animation-delay: -0.15s;
  border-top-color: rgba(227, 33, 31, 0.5);
}

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

.loader-text {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: textPulse 1.5s ease-in-out infinite;
}

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

.loader-progress {
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.loader-progress-bar {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 50%,
    var(--color-primary) 100%
  );
  background-size: 200% 100%;
  animation: progressSlide 1.5s ease-in-out infinite;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(227, 33, 31, 0.5);
}

@keyframes progressSlide {
  0% {
    width: 0%;
    background-position: 0% 50%;
  }
  50% {
    width: 100%;
    background-position: 100% 50%;
  }
  100% {
    width: 100%;
    background-position: 200% 50%;
  }
}

/* ============================================
   3. RESET & BASE STYLES
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-secondary);
  line-height: 1.6;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Mejor performance en animaciones */
* {
  -webkit-tap-highlight-color: transparent;
}

*:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Mejorar contraste para accesibilidad */
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(227, 33, 31, 0.15);
}

/* Focus visible para elementos interactivos */
.btn:focus-visible,
.nav-link:focus-visible,
.social-link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  transform: scale(1.02);
}
img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
ul {
  list-style: none;
}

/* Respeto por prefers-reduced-motion - Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Alto contraste para mejor accesibilidad */
@media (prefers-contrast: high) {
  :root {
    --color-primary: #ff0000;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  }

  .btn,
  .nav-link,
  a {
    border: 2px solid currentColor;
  }
}

/* ============================================
   3. ACCESSIBILITY & SKIP LINKS
   ============================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  background: var(--color-primary);
  color: white;
  padding: 1rem 2rem;
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid white;
  outline-offset: -6px;
}

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   4. UTILIDADES GLOBALES
   ============================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}
.highlight {
  color: var(--color-primary);
}
.section-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(227, 33, 31, 0.1);
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px;
  margin-bottom: 1.5rem;
}
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}
.section-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-dark-1);
  margin-bottom: 1rem;
}
.section-description {
  font-size: 1.125rem;
  color: var(--color-gray-600);
  line-height: 1.8;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  transition: all var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s,
    height 0.6s;
}
.btn:hover::before {
  width: 300px;
  height: 300px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
  box-shadow: var(--shadow-primary);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s ease,
    height 0.6s ease;
}

.btn-primary:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(227, 33, 31, 0.4);
}
.btn-secondary {
  background: transparent;
  color: var(--color-dark-1);
  border: 2px solid currentColor;
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--color-dark-1);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.hero .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}
.hero .btn-secondary:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}
.btn-block {
  width: 100%;
  justify-content: center;
}

/* ==========================================
   4. CUSTOM CURSOR CON GLOW - Premium Effect
   Dual-layer cursor con interpolación lerp
   GPU accelerated con mix-blend-mode
   ========================================== */
.custom-cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background: #e3211f;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition:
    width 0.3s ease,
    height 0.3s ease,
    background 0.3s ease;
  mix-blend-mode: difference;
}

.cursor-glow {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(227, 33, 31, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition:
    width 0.3s ease,
    height 0.3s ease,
    opacity 0.3s ease;
  box-shadow: 0 0 20px rgba(227, 33, 31, 0.4);
}

.custom-cursor.cursor-hover {
  width: 50px;
  height: 50px;
  background: rgba(227, 33, 31, 0.3);
}

.cursor-glow.cursor-hover {
  width: 80px;
  height: 80px;
  opacity: 0.6;
}

/* ============================================
   5. NAVEGACIÓN - Fixed Navbar con Scroll Effect
   ============================================ */
/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  z-index: 1001;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(227, 33, 31, 0.5);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  padding: 1.25rem 0;
  z-index: 1000;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav.scrolled {
  padding: 0.75rem 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.05);
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
}

.nav-logo {
  height: 40px;
  width: auto;
  transition: all 0.3s ease;
}
.nav-logo img {
  height: 50px;
  max-width: 220px;
  object-fit: contain;
  transition: all var(--transition-base);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.nav.scrolled .nav-logo,
.nav.scrolled .nav-logo img {
  height: 44px;
  max-width: 200px;
}
.nav-menu {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}
.nav-menu li {
  opacity: 1;
  transform: translateX(0);
}
.nav-link {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-dark-1);
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transition: all var(--transition-base);
  transform: translateX(-50%);
  border-radius: 2px;
}
.nav-link:hover {
  color: var(--color-primary);
  transform: translateY(-2px);
  background: rgba(227, 33, 31, 0.05);
}
.nav-link:hover::before,
.nav-link.active::before {
  width: 80%;
}
.nav-link.nav-cta {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  box-shadow: var(--shadow-primary);
  position: relative;
  overflow: hidden;
}
.nav-link.nav-cta::before {
  display: none;
}
.nav-link.nav-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transform: translate(-50%, -50%);
  transition:
    width 0.5s ease,
    height 0.5s ease;
}
.nav-link.nav-cta:hover::after {
  width: 200px;
  height: 200px;
}
.nav-link.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(227, 33, 31, 0.3);
}
.nav-link.nav-cta span {
  position: relative;
  z-index: 1;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  z-index: 10002;
  position: relative;
  padding: 0.5rem;
  background: transparent;
  border: none;
}
.nav-toggle .bar {
  width: 28px;
  height: 3px;
  background: var(--color-dark-1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  transform-origin: center;
}

/* Hamburger Animation to X */
.nav-toggle.active .bar-1 {
  transform: translateY(9px) rotate(45deg);
}
.nav-toggle.active .bar-2 {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.active .bar-3 {
  transform: translateY(-9px) rotate(-45deg);
}

/* ==========================================
   6. HERO SECTION - Video Parallax + Content
   Video con efecto parallax (0.5 speed)
   Z-index layers: video(1) → overlay(2) → content(10)
   ========================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-dark-1);
  padding: 120px 0 0 0;
  margin-top: 0;
}

/* Video Layer - Siempre de fondo */
.hero-video-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  /* Optimización de renderizado */
  contain: layout style paint;
}

.hero-video-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(227, 33, 31, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 69, 66, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(227, 33, 31, 0.03) 0%, transparent 40%);
  pointer-events: none;
  animation: particlesFloat 20s ease-in-out infinite;
  z-index: 3;
}

@keyframes particlesFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(20px, -20px) scale(1.05);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Dimensiones más flexibles para reducir recorte */
  width: 100%;
  height: auto;
  min-height: 100%;
  transform: translate(-50%, -50%);
  /* Cover para llenar pero respetando más el ancho */
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  animation: videoFadeIn 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
  /* Filtros optimizados para máxima calidad */
  filter: brightness(0.92) contrast(1.03) saturate(1.02);
  /* Optimizaciones de renderizado para calidad premium */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  /* Renderizado de alta calidad sin pixelación */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Aceleración por hardware */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

@keyframes videoFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 15, 0.92) 0%,
    rgba(20, 20, 25, 0.88) 50%,
    rgba(30, 30, 35, 0.85) 100%
  );
  z-index: 2;
  /* GPU acceleration */
  transform: translateZ(0);
}

/* Content Layer - Sobre el video */
.hero-content-layer {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 2rem 0;
  display: flex;
  align-items: center;
}

/* Hero Content */
.hero-content {
  position: relative;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
  padding: 0 2rem;
}

/* Animaciones de entrada escalonadas */
.hero-badge {
  display: inline-block !important;
  padding: 0.65rem 1.75rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
  visibility: visible !important;
  position: relative;
  overflow: hidden;
}

.hero-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: badgeShine 3s ease-in-out infinite;
}

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

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

/* Split Text Reveal Animation */
@keyframes revealChar {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-shadow:
    0 4px 30px rgba(0, 0, 0, 0.5),
    0 2px 10px rgba(0, 0, 0, 0.3);
  color: #ffffff;
  opacity: 1;
  visibility: visible;
}

.hero-title .line {
  display: block;
  margin-bottom: 0.2em;
  opacity: 1;
}

.hero-title .char {
  display: inline-block;
  opacity: 1 !important;
  animation-fill-mode: both !important;
}

.hero-title .highlight {
  background: linear-gradient(135deg, #e3211f 0%, #ff4542 50%, #e3211f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
  text-shadow:
    0 0 30px rgba(227, 33, 31, 0.6),
    0 0 60px rgba(227, 33, 31, 0.4);
}

/* Asegurar que los chars dentro de highlight también sean visibles */
.hero-title .highlight .char {
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(135deg, #e3211f 0%, #ff4542 50%, #e3211f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-description {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out 0.7s forwards;
  color: rgba(255, 255, 255, 0.92);
  max-width: 700px;
  margin: 0 auto 2.5rem;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
  font-weight: 400;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out 0.9s forwards;
}

/* Hero Stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 4rem auto 0;
  padding: 2.5rem 2rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(20px);
  animation: statsSlideIn 0.8s ease-out 1.5s forwards;
}

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

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #e3211f;
  line-height: 1;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px rgba(227, 33, 31, 0.3);
}

.stat-label {
  display: block;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

/* Scroll Indicator */
.scroll-indicator {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: fadeIn 1s ease-out 2s both;
  z-index: 3;
  margin: 5rem auto 2rem;
  padding: 0 1.5rem;
  text-align: center;
}

.scroll-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
  position: relative;
  overflow: hidden;
  animation: scrollPulse 2s ease-in-out infinite;
}

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

.scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: rgba(227, 33, 31, 0.8);
  animation: scrollMove 2s ease-in-out infinite;
}

@keyframes scrollMove {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(200%);
  }
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 1.5s forwards;
  cursor: pointer;
}

.scroll-arrow {
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  position: relative;
}

.scroll-arrow::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(12px);
    opacity: 0.3;
  }
}

/* Decorative Floating Elements */
.hero-decorations {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.float-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 33, 31, 0.15), transparent);
  backdrop-filter: blur(2px);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.float-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 5%;
  animation: float1 20s infinite;
}

.float-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 10%;
  animation: float2 25s infinite;
}

.float-3 {
  width: 100px;
  height: 100px;
  bottom: 15%;
  left: 15%;
  animation: float3 18s infinite;
}

/* ==========================================
   KEYFRAMES para círculos flotantes del Hero
   ========================================== */
@keyframes float1 {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
  50% {
    transform: translate(30px, -30px);
    opacity: 0.6;
  }
}

@keyframes float2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  33% {
    transform: translate(-50px, 40px) scale(1.2);
    opacity: 0.6;
  }
  66% {
    transform: translate(30px, -30px) scale(0.8);
    opacity: 0.5;
  }
}

@keyframes float3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: translate(-60px, 50px) rotate(180deg);
    opacity: 0.5;
  }
}

@keyframes float4 {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
  25% {
    transform: translate(-30px, -50px);
    opacity: 0.5;
  }
  50% {
    transform: translate(20px, -30px);
    opacity: 0.4;
  }
  75% {
    transform: translate(-40px, 20px);
    opacity: 0.6;
  }
}

@keyframes float5 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(40px, -70px) scale(1.3);
    opacity: 0.3;
  }
}

@keyframes float6 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.4;
  }
  33% {
    transform: translate(50px, 30px) rotate(120deg) scale(1.1);
    opacity: 0.6;
  }
  66% {
    transform: translate(-30px, -40px) rotate(240deg) scale(0.9);
    opacity: 0.3;
  }
}

/* ==========================================
   KEYFRAMES GLOBALES - Animaciones Reutilizables
   Usadas en hero, about, services y otras secciones
   ========================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

/* ==========================================
   HERO CONTENT - Texto y elementos de contenido
   ========================================== */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  color: #fff;
}

.hero-content.visible {
  opacity: 1;
}
.hero-badge {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 2rem;
}

/* ==========================================
   7. SPLIT TEXT REVEAL - Premium Effect
   Animación character-by-character
   ========================================== */
.hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.hero-description {
  font-size: clamp(1.1rem, 2vw, 1.375rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.hero-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 5rem;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 5rem;
  position: relative;
  z-index: 2;
}

.hero-stats.visible {
  opacity: 1;
}
.stat-item {
  text-align: center;
  padding: 1.5rem;
  border-radius: var(--border-radius-md);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  transition: all var(--transition-base);
}
.stat-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
}
.stat-number {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  display: block;
  text-shadow: 0 2px 10px rgba(227, 33, 31, 0.3);
}
.stat-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: fadeInUp 0.8s ease-out 1.5s both;
  z-index: 2;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.scroll-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: rgba(227, 33, 31, 0.8);
  animation: scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(140%);
    opacity: 0;
  }
}

/* Hero Actions */
.hero-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 5rem;
}

/* ============================================
   UTILITY CLASSES - Estilos reutilizables
   ============================================
   Clases auxiliares para reducir repetición de código.
   Úsalas cuando múltiples elementos compartan el mismo patrón.
   ============================================ */

/* Card Base - Estilos compartidos por todas las cards */
.card-base-shared {
  background: #fff;
  border-radius: var(--border-radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Hover Effect - Top border animation */
.card-top-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

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

/* Hover Lift Effect - Elevación suave */
.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.services {
  padding: var(--section-padding) 0;
  background: #fff;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}
.service-card {
  background: #fff;
  border-radius: var(--border-radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transform: scaleX(0);
  transition: transform var(--transition-base);
}
.service-card:hover::before {
  transform: scaleX(1);
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(227, 33, 31, 0.1);
}
.service-icon {
  width: 70px;
  height: 70px;
  background: rgba(227, 33, 31, 0.1);
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all var(--transition-base);
}
.service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  transform: scale(1.15) rotate(5deg);
  box-shadow: var(--shadow-primary);
}
.service-icon svg {
  width: 36px;
  height: 36px;
  stroke: var(--color-primary);
  transition: stroke var(--transition-base);
}
.service-card:hover .service-icon svg {
  stroke: #fff;
}
.service-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark-1);
  margin-bottom: 1rem;
}
.service-description {
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.service-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.service-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-gray-600);
  font-size: 0.95rem;
}
.service-features li::before {
  content: "\2713";
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.1rem;
}
.service-card.featured {
  background: linear-gradient(135deg, var(--color-dark-1), var(--color-dark-2));
  color: #fff;
  border: 2px solid var(--color-primary);
}
.service-card.featured .service-title,
.service-card.featured .service-description,
.service-card.featured .service-features li {
  color: #fff;
}
.service-card.featured .service-icon {
  background: rgba(255, 255, 255, 0.15);
}
.service-card.featured .service-icon svg {
  stroke: #fff;
}
.service-card.featured:hover .service-icon {
  background: var(--color-primary);
}
/* Services Page - 360 Design */
.services-hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 0 100px;
  overflow: hidden;
}
.services-hero-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #1a202c 100%);
  z-index: 0;
}
.services-hero-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
  opacity: 0.4;
  animation: gridMove 20s linear infinite;
}
.services-hero-background::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 70% 50%, rgba(227, 33, 31, 0.2) 0%, transparent 50%);
  animation: pulseGlow 10s ease-in-out infinite;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}
.services-hero-content {
  position: relative;
  z-index: 1;
  max-width: 950px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 0.3s forwards;
}
.services-hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  letter-spacing: -1px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.services-hero-title .highlight {
  color: var(--color-primary);
  text-shadow:
    0 0 50px rgba(227, 33, 31, 0.7),
    0 4px 20px rgba(0, 0, 0, 0.3);
  display: inline-block;
  animation: glowPulse 3s ease-in-out infinite;
}
.services-hero-subtitle {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.services-360 {
  padding: calc(var(--section-padding) * 0.9) 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  position: relative;
  overflow: hidden;
}
.services-360::before {
  content: "";
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(227, 33, 31, 0.03) 0%, transparent 70%);
  border-radius: 50%;
}
.services-360-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 3rem;
  margin-top: 4rem;
}

/* ==========================================
   9. SERVICE CARDS con TILT 3D - Premium Effect
   Efecto de inclinación 3D con perspective
   GPU accelerated con transform-style: preserve-3d
   ========================================== */
.service-360-card {
  background: #fff;
  border-radius: 24px;
  padding: 3.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(227, 33, 31, 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  /* will-change: transform; - Removido para reducir consumo de memoria */
}
.service-360-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-360-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.service-360-card:hover::before {
  transform: scaleX(1);
}
.service-360-card:hover::after {
  opacity: 1;
}
.service-360-card:hover {
  transform: translateY(-12px);
  box-shadow:
    0 20px 60px rgba(227, 33, 31, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary);
}
.service-360-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.12), rgba(227, 33, 31, 0.06));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.service-360-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: 22px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: iconPulseService 3s ease-in-out infinite;
}
@keyframes iconPulseService {
  0%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.2;
  }
}
.service-360-card:hover .service-360-icon {
  transform: translateY(-8px) scale(1.1);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  box-shadow: 0 12px 35px rgba(227, 33, 31, 0.35);
}
.service-360-card:hover .service-360-icon::after {
  opacity: 1;
  animation: pulse-icon 2s ease-in-out infinite;
}
@keyframes pulse-icon {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.15);
    opacity: 0;
  }
}
.service-360-icon svg {
  width: 48px;
  height: 48px;
  stroke: var(--color-primary);
  transition: all 0.4s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.service-360-card:hover .service-360-icon svg {
  stroke: #fff;
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.service-360-title {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-dark-1);
  margin-bottom: 1.25rem;
  line-height: 1.3;
  transition: color 0.3s ease;
}
.service-360-card:hover .service-360-title {
  color: var(--color-primary);
}
.service-360-description {
  color: var(--color-gray-600);
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0 0 1.75rem 0;
}

.service-360-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0 0;
}

.service-360-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.85rem;
  color: var(--color-gray-700);
  font-size: 0.95rem;
  line-height: 1.9;
  transition: all 0.3s ease;
}

.service-360-card:hover .service-360-list li {
  padding-left: 2.25rem;
}

.service-360-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 800;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.service-360-card:hover .service-360-list li::before {
  transform: scale(1.2) rotate(10deg);
  text-shadow: 0 2px 8px rgba(227, 33, 31, 0.3);
}

.services-cta {
  padding: calc(var(--section-padding) * 1.2) 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
  position: relative;
  overflow: hidden;
}
.services-cta::before {
  content: "";
  position: absolute;
  bottom: -30%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(227, 33, 31, 0.1) 0%, transparent 65%);
  border-radius: 50%;
  animation: ctaFloat 15s ease-in-out infinite;
}
.services-cta::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(227, 33, 31, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  animation: ctaFloat 12s ease-in-out infinite reverse;
}
.services-cta-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 4rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.services-cta-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-dark-1) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}
.services-cta-description {
  font-size: 1.25rem;
  color: var(--color-gray-600);
  line-height: 1.8;
  margin-bottom: 2.5rem;
  font-weight: 400;
}
.services-cta-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
/* Team Page */
.team-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 0 100px;
  overflow: hidden;
}
.team-hero-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #1a202c 100%);
  z-index: 0;
}
.team-hero-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
  opacity: 0.4;
  animation: gridMove 20s linear infinite;
}
.team-hero-background::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(227, 33, 31, 0.15) 0%, transparent 50%);
  animation: pulseGlow 8s ease-in-out infinite;
}
@keyframes gridMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}
@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}
.team-hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 0.3s forwards;
}
.team-hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.team-hero-title .highlight {
  color: var(--color-primary);
  text-shadow:
    0 0 40px rgba(227, 33, 31, 0.6),
    0 4px 20px rgba(0, 0, 0, 0.3);
  display: inline-block;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}
.team-hero-subtitle {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.team-intro {
  padding: calc(var(--section-padding) * 0.75) 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.team-intro::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(227, 33, 31, 0.03) 0%, transparent 70%);
  border-radius: 50%;
}
.team-intro-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.team-intro-text {
  font-size: 1.2rem;
  color: var(--color-gray-600);
  line-height: 1.9;
  margin-top: 1.5rem;
  font-weight: 400;
}
.team-members {
  padding: var(--section-padding) 0;
  background: var(--color-gray-50);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  margin-top: 3rem;
}
.team-card {
  background: #fff;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(227, 33, 31, 0.1);
  position: relative;
}
.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.team-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 20px 60px rgba(227, 33, 31, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary);
}
.team-card:hover::before {
  opacity: 1;
}
.team-card.featured {
  grid-column: span 2;
}
.team-card.featured .team-image {
  aspect-ratio: 2/1;
}
.team-image {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}
.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.4s ease;
}
.team-card:hover .team-image img {
  transform: scale(1.15) rotate(2deg);
  filter: brightness(0.9) contrast(1.1);
}
.team-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.96), rgba(26, 32, 44, 0.96));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  backdrop-filter: blur(4px);
}
.team-card:hover .team-overlay {
  opacity: 1;
}
.team-icon {
  width: 110px;
  height: 110px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.4);
  animation: floatIcon 4s ease-in-out infinite;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
}
.team-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
  border-radius: 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.team-card:hover .team-icon::before {
  opacity: 1;
}
@keyframes floatIcon {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(2deg);
  }
  75% {
    transform: translateY(-8px) rotate(-2deg);
  }
}
.team-icon svg {
  color: #fff;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  transition: transform 0.4s ease;
}
.team-card:hover .team-icon svg {
  transform: scale(1.1);
}
.team-social {
  display: flex;
  gap: 1rem;
}
.team-social a {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all var(--transition-base);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.team-social a:hover {
  background: #fff;
  color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.team-info {
  padding: 2.5rem;
  position: relative;
  z-index: 2;
}
.team-name {
  font-family: var(--font-primary);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-dark-1);
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}
.team-card:hover .team-name {
  color: var(--color-primary);
}
.team-role {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(227, 33, 31, 0.08);
  border-radius: 20px;
}
.team-bio {
  color: var(--color-gray-600);
  line-height: 1.8;
  font-size: 1rem;
}
.team-values {
  padding: var(--section-padding) 0;
  background: #fff;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}
.value-card {
  text-align: center;
  padding: 3rem 2.5rem;
  background: #fff;
  border-radius: var(--border-radius-xl);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid var(--color-gray-200);
  position: relative;
  overflow: hidden;
}
.value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(227, 33, 31, 0.05), transparent);
  transition: left 0.6s ease;
}
.value-card:hover::before {
  left: 100%;
}
.value-card:hover {
  background: #fff;
  transform: translateY(-8px);
  box-shadow:
    0 12px 40px rgba(227, 33, 31, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary);
}
.value-icon {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.1), rgba(227, 33, 31, 0.05));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.75rem;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.value-icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
.value-card:hover .value-icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  transform: scale(1.15) rotate(10deg);
  box-shadow: 0 12px 35px rgba(227, 33, 31, 0.35);
}
.value-card:hover .value-icon::before {
  opacity: 0.2;
  animation: iconPulseValue 2s ease-in-out infinite;
}
@keyframes iconPulseValue {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
}
.value-icon svg {
  stroke: var(--color-primary);
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}
.value-card:hover .value-icon svg {
  stroke: #fff;
  transform: scale(1.1);
}
.value-title {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-dark-1);
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}
.value-card:hover .value-title {
  color: var(--color-primary);
}
.value-description {
  color: var(--color-gray-600);
  line-height: 1.8;
  font-size: 1rem;
}
.team-cta {
  padding: calc(var(--section-padding) * 0.9) 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
  position: relative;
  overflow: hidden;
}
.team-cta::before {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(227, 33, 31, 0.1) 0%, transparent 65%);
  border-radius: 50%;
  animation: ctaFloat 15s ease-in-out infinite;
}
.team-cta::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(227, 33, 31, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  animation: ctaFloat 12s ease-in-out infinite reverse;
}
@keyframes ctaFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -30px) scale(1.1);
  }
}
.team-cta-content {
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--border-radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.team-cta-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-dark-1) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}
.team-cta-description {
  font-size: 1.2rem;
  color: var(--color-gray-600);
  line-height: 1.8;
  margin-bottom: 2.5rem;
  font-weight: 400;
}
/* About Section */
.about {
  padding: 6rem 0;
  background: var(--color-gray-50);
  position: relative;
  overflow: hidden;
  z-index: 10;
  margin-top: 0;
}
.about::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
  border-radius: 50%;
}
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-top: 4rem;
}
.about-image-wrapper {
  position: relative;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.1), transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 1;
  pointer-events: none;
}
.about-image-wrapper:hover::before {
  opacity: 1;
}
.about-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-slow);
}
.about-image-wrapper:hover img {
  transform: scale(1.05);
}
.about-badge {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 1.5rem 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  z-index: 2;
  transition: all var(--transition-base);
}
.about-image-wrapper:hover .about-badge {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.badge-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.badge-text {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.about-text h3 {
  font-size: 2rem;
  color: var(--color-dark-1);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}
.about-text p {
  color: var(--color-gray-600);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

.about-image {
  position: relative;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
}

.image-placeholder {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--border-radius-xl);
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: all var(--transition-base);
}

.image-placeholder:hover {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.image-placeholder svg {
  stroke: var(--color-gray-400);
  transition: stroke var(--transition-base);
}

.image-placeholder:hover svg {
  stroke: var(--color-primary);
}

.image-placeholder p {
  color: var(--color-gray-500);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  transition: color var(--transition-base);
}

.image-placeholder:hover p {
  color: var(--color-primary);
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.feature-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--border-radius-md);
  transition: all var(--transition-base);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.feature-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(10px);
}
.feature-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.feature-icon svg {
  width: 24px;
  height: 24px;
}
.feature-content h4 {
  font-size: 1.1rem;
  color: var(--color-dark-1);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.feature-content p {
  color: var(--color-gray-600);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}
/* Clients Section */
.clients {
  padding: var(--section-padding) 0;
  background: #fff;
}
.clients-carousel-wrapper {
  margin-top: 3rem;
  overflow: hidden;
  position: relative;
  padding: 2rem 0;
}
.clients-carousel-wrapper::before,
.clients-carousel-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}
.clients-carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}
.clients-carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}
.clients-carousel {
  overflow: hidden;
}
.clients-track {
  display: flex;
  gap: 5rem;
  animation: scroll-clients 35s linear infinite;
  width: fit-content;
  align-items: center;
}
.clients-track:hover {
  animation-play-state: paused;
}
@keyframes scroll-clients {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.client-slide {
  flex-shrink: 0;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.client-slide:hover {
  transform: scale(1.1);
}
.client-slide img {
  max-width: 180px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0.85;
}
.client-slide:hover img {
  opacity: 1;
  transform: scale(1.02);
}
.clients-cta {
  text-align: center;
  margin-top: 4rem;
  padding: 3rem;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.clients-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: rotateBg 15s linear infinite;
}
@keyframes rotateBg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.clients-cta p {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.clients-cta .btn {
  background: #fff;
  color: var(--color-primary);
  border: none;
  position: relative;
  z-index: 1;
  font-weight: 700;
}
.clients-cta .btn:hover {
  background: var(--color-dark-1);
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* ============================================
   TRUST BAR - Barra de Confianza
   ============================================ */
.trust-bar {
  padding: 4rem 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  position: relative;
  overflow: hidden;
}

.trust-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.trust-bar::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  animation: shimmer 8s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.trust-content {
  text-align: center;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.trust-badge {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  animation: floatGlow 3s ease-in-out infinite;
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.2),
    0 0 40px rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@keyframes floatGlow {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    box-shadow:
      0 0 20px rgba(255, 255, 255, 0.2),
      0 0 40px rgba(255, 255, 255, 0.1);
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
    box-shadow:
      0 0 30px rgba(255, 255, 255, 0.3),
      0 0 60px rgba(255, 255, 255, 0.15);
  }
}

.trust-badge svg {
  stroke: #fff;
}

.trust-title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.trust-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

/* ============================================
   CLIENTS LOGOS - Versión minimalista
   ============================================ */
.clients-logos {
  padding: 3rem 0;
  background: var(--color-gray-50);
}

/* ============================================
   SERVICIOS DESTACADOS
   ============================================ */
.services-featured {
  padding: var(--section-padding) 0;
  background: #fff;
}

.services-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 4rem;
}

.service-featured-card {
  background: #fff;
  border-radius: var(--border-radius-lg);
  padding: 2.5rem;
  border: 2px solid var(--color-gray-200);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.service-featured-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-featured-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius-lg);
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(227, 33, 31, 0.08) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

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

.service-featured-card:hover::after {
  opacity: 1;
}

.service-featured-card:hover {
  border-color: var(--color-primary);
  box-shadow:
    0 20px 60px rgba(227, 33, 31, 0.15),
    0 0 0 1px rgba(227, 33, 31, 0.1);
  transform: translateY(-10px);
}

.service-featured-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.1), rgba(227, 33, 31, 0.05));
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.service-featured-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--border-radius-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.service-featured-card:hover .service-featured-icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  transform: scale(1.15) rotate(5deg);
  box-shadow:
    0 10px 40px rgba(227, 33, 31, 0.35),
    0 0 60px rgba(227, 33, 31, 0.2);
}

.service-featured-card:hover .service-featured-icon::before {
  opacity: 0.5;
  animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.3;
  }
}

.service-featured-icon svg {
  stroke: var(--color-primary);
  transition: stroke var(--transition-base);
}

.service-featured-card:hover .service-featured-icon svg {
  stroke: #fff;
}

.service-featured-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark-1);
  margin-bottom: 1rem;
}

.service-featured-description {
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.service-featured-list {
  list-style: none;
  margin-bottom: 2rem;
}

.service-featured-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--color-gray-600);
  font-size: 0.9rem;
  line-height: 1.6;
}

.service-featured-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.125rem;
}

.service-featured-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-base);
}

.service-featured-link:hover {
  gap: 0.75rem;
  color: var(--color-primary-dark);
}

.services-cta {
  text-align: center;
  margin-top: 2rem;
}

.services-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  min-width: 180px;
  height: auto;
}

/* ============================================
   PROYECTOS DESTACADOS
   ============================================ */
.projects-featured {
  padding: var(--section-padding) 0;
  background: var(--color-gray-50);
}

.projects-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.5rem;
  margin-top: 4rem;
}

.project-featured-card {
  background: #fff;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
}

.project-featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.project-featured-card:hover {
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(227, 33, 31, 0.1);
  transform: translateY(-12px);
}

.project-featured-card:hover::before {
  opacity: 1;
}

.project-featured-image {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--color-gray-100);
}

.project-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.5s ease;
}

.project-featured-card:hover .project-featured-image img {
  transform: scale(1.15) rotate(1deg);
  filter: brightness(1.05) contrast(1.05);
}

.project-featured-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(227, 33, 31, 0.5) 50%, rgba(0, 0, 0, 0.8) 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-featured-card:hover .project-featured-overlay {
  opacity: 1;
}

.project-featured-category {
  background: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transform: translateY(20px);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  box-shadow: 0 4px 15px rgba(227, 33, 31, 0.4);
}

.project-featured-card:hover .project-featured-category {
  transform: translateY(0);
}

.project-featured-content {
  padding: 2rem;
}

.project-featured-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark-1);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.project-featured-description {
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.project-featured-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.project-featured-tags .tag {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  padding: 0.4rem 0.875rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

.project-featured-card:hover .project-featured-tags .tag {
  background: rgba(227, 33, 31, 0.1);
  color: var(--color-primary);
  border-color: rgba(227, 33, 31, 0.2);
  transform: translateY(-2px);
}

.project-featured-card:hover .project-featured-tags .tag:nth-child(1) {
  transition-delay: 0.05s;
}
.project-featured-card:hover .project-featured-tags .tag:nth-child(2) {
  transition-delay: 0.1s;
}
.project-featured-card:hover .project-featured-tags .tag:nth-child(3) {
  transition-delay: 0.15s;
}

.projects-cta {
  text-align: center;
  margin-top: 3rem;
}

/* ============================================
   TESTIMONIALES
   ============================================ */
.testimonials {
  padding: var(--section-padding) 0;
  background: #fff;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 4rem;
}

.testimonial-card {
  background: #fff;
  border-radius: var(--border-radius-lg);
  padding: 2.5rem;
  border: 2px solid var(--color-gray-200);
  transition: all var(--transition-base);
  position: relative;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-size: 5rem;
  font-family: Georgia, serif;
  color: rgba(227, 33, 31, 0.1);
  line-height: 1;
}

.testimonial-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 15px 40px rgba(227, 33, 31, 0.15);
  transform: translateY(-5px);
}

.testimonial-rating {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}

.testimonial-rating svg {
  fill: #ffb800;
  width: 20px;
  height: 20px;
}

.testimonial-text {
  color: var(--color-gray-600);
  line-height: 1.8;
  margin-bottom: 2rem;
  font-size: 1rem;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
}

.author-info {
  flex: 1;
}

.author-name {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark-1);
  margin-bottom: 0.25rem;
}

.author-position {
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

/* ============================================
   CTA FINAL - Formulario de Contacto
   ============================================ */
.cta-final {
  padding: calc(var(--section-padding) * 1.2) 0;
  background: linear-gradient(135deg, var(--color-dark-1), var(--color-dark-2));
  position: relative;
  overflow: hidden;
}

.cta-final::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23dots)"/></svg>');
}

.cta-final-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta-final-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.cta-final-description {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 3rem;
  line-height: 1.6;
}

.cta-form {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.cta-form::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(227, 33, 31, 0.05) 0%, transparent 70%);
  animation: formGlow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes formGlow {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10%, 10%);
  }
}

.cta-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.cta-input,
.cta-textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-secondary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.cta-input::placeholder,
.cta-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease;
}

.cta-input:hover,
.cta-textarea:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
}

.cta-input:focus,
.cta-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 0 0 4px rgba(227, 33, 31, 0.15),
    0 8px 20px rgba(227, 33, 31, 0.2);
  transform: translateY(-2px);
}

.cta-input:focus::placeholder,
.cta-textarea:focus::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.cta-textarea {
  resize: vertical;
  min-height: 120px;
  margin-bottom: 1.5rem;
}

.cta-input option {
  background: var(--color-dark-1);
  color: #fff;
}

.btn-large {
  padding: 1.125rem 2.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  width: 100%;
  justify-content: center;
  gap: 0.75rem;
}

.cta-note {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  margin-top: 1.5rem;
}

.cta-note a {
  color: var(--color-primary-light);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.cta-note a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Portfolio Page */
.portfolio-hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 0 100px;
  overflow: hidden;
}
.portfolio-hero-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #1a202c 100%);
  z-index: 0;
}
.portfolio-hero-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
  opacity: 0.4;
  animation: gridMovePortfolio 20s linear infinite;
}
.portfolio-hero-background::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 70% 50%, rgba(227, 33, 31, 0.2) 0%, transparent 50%);
  animation: pulseGlowPortfolio 10s ease-in-out infinite;
}
@keyframes gridMovePortfolio {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}
@keyframes pulseGlowPortfolio {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}
.portfolio-hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 0.3s forwards;
}
.portfolio-hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  letter-spacing: -1px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.portfolio-hero-title .highlight {
  color: var(--color-primary);
  text-shadow:
    0 0 50px rgba(227, 33, 31, 0.7),
    0 4px 20px rgba(0, 0, 0, 0.3);
  display: inline-block;
  animation: glowPulsePortfolio 3s ease-in-out infinite;
}
@keyframes glowPulsePortfolio {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}
.portfolio-hero-subtitle {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.portfolio {
  padding: var(--section-padding) 0;
  background: #fff;
}
.portfolio-filter {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}
.filter-btn {
  padding: 1rem 2.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(227, 33, 31, 0.15);
  border-radius: 50px;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.filter-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.08), rgba(227, 33, 31, 0.18));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}
.filter-btn:hover::before {
  opacity: 1;
}
.filter-btn:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(227, 33, 31, 0.4);
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 12px 30px rgba(227, 33, 31, 0.2),
    0 6px 15px rgba(0, 0, 0, 0.1);
  color: var(--color-primary);
}
.filter-btn.active {
  background: linear-gradient(135deg, #e3211f 0%, #ff4757 100%);
  color: #fff;
  border-color: #e3211f;
  box-shadow:
    0 12px 35px rgba(227, 33, 31, 0.45),
    0 6px 20px rgba(227, 33, 31, 0.3),
    inset 0 -2px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px) scale(1.05);
}
.filter-btn.active::before {
  opacity: 0;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  width: 100%;
}

.portfolio-item {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border: 3px solid rgba(255, 255, 255, 0.8);
  background: #fff;
  width: 100%;
  max-width: 100%;
}
.portfolio-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.08), rgba(255, 71, 87, 0.2));
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 1;
  pointer-events: none;
}
.portfolio-item::after {
  content: "";
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, #e3211f, #ff4757, #ff6b6b);
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: -1;
  border-radius: 24px;
}
.portfolio-item:hover {
  transform: translateY(-16px) scale(1.03) rotate(0.5deg);
  box-shadow:
    0 30px 60px rgba(227, 33, 31, 0.25),
    0 15px 30px rgba(0, 0, 0, 0.15),
    0 5px 15px rgba(227, 33, 31, 0.1);
  border-color: rgba(255, 255, 255, 1);
}
.portfolio-item:hover::before {
  opacity: 1;
}
.portfolio-item:hover::after {
  opacity: 0.6;
}
.portfolio-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio-featured-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.65rem 1.25rem 0.65rem 1rem;
  background: linear-gradient(135deg, #e3211f 0%, #ff4757 100%);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 8px;
  box-shadow:
    0 8px 32px rgba(227, 33, 31, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 10;
  backdrop-filter: blur(10px);
  animation: pulseGlow 3s ease-in-out infinite;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.portfolio-featured-badge::before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  animation: starPulse 3s ease-in-out infinite;
}
@keyframes starPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.85;
  }
}
@keyframes pulseGlow {
  0%,
  100% {
    box-shadow:
      0 8px 32px rgba(227, 33, 31, 0.4),
      0 0 0 2px rgba(255, 255, 255, 0.95),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 12px 40px rgba(227, 33, 31, 0.6),
      0 0 0 2px rgba(255, 255, 255, 1),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: scale(1.02);
  }
}
.portfolio-item:hover .portfolio-image img {
  transform: scale(1.15) rotate(1deg);
}
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 32, 44, 0) 0%, rgba(26, 32, 44, 0.75) 50%, rgba(26, 32, 44, 0.98) 100%);
  backdrop-filter: blur(8px) saturate(120%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}
.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
  backdrop-filter: blur(12px) saturate(140%);
}
.portfolio-content {
  transform: translateY(30px);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio-item:hover .portfolio-content {
  transform: translateY(0);
}
.portfolio-category {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, #e3211f 0%, #ff6b6b 100%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px;
  margin-bottom: 1rem;
  align-self: flex-start;
  box-shadow: 0 4px 15px rgba(227, 33, 31, 0.4);
  transition: all 0.3s ease;
}
.portfolio-item:hover .portfolio-category {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(227, 33, 31, 0.6);
}
.portfolio-title {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  transition: all 0.3s ease;
}
.portfolio-item:hover .portfolio-title {
  transform: translateX(5px);
}
.portfolio-description {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.portfolio-tags {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.portfolio-tags .tag {
  padding: 0.375rem 0.875rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio-tags .tag:hover {
  background: rgba(227, 33, 31, 0.3);
  border-color: rgba(227, 33, 31, 0.5);
  transform: translateY(-2px);
}
.portfolio-item:hover .portfolio-tags .tag:nth-child(1) {
  transition-delay: 0.1s;
}
.portfolio-item:hover .portfolio-tags .tag:nth-child(2) {
  transition-delay: 0.15s;
}
.portfolio-item:hover .portfolio-tags .tag:nth-child(3) {
  transition-delay: 0.2s;
}

/* Portfolio Carousel - Mini carrusel dentro de cada tarjeta */
.portfolio-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.portfolio-carousel-track {
  display: flex;
  height: 100%;
  max-height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.portfolio-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navegación del carrusel (flechas) */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px) saturate(180%);
  border: 2px solid rgba(227, 33, 31, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.carousel-nav svg {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
  transition: all 0.3s ease;
}

.carousel-nav-prev {
  left: 1.5rem;
}

.carousel-nav-next {
  right: 1.5rem;
}

.portfolio-item:hover .carousel-nav,
.project-featured-card:hover .carousel-nav {
  opacity: 1;
}

.carousel-nav:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 25px rgba(227, 33, 31, 0.4);
}

.carousel-nav:hover svg {
  fill: #fff;
}

.carousel-nav:active {
  transform: translateY(-50%) scale(0.95);
}

/* Indicadores del carrusel (dots) */
.carousel-indicators {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 5;
  background: rgba(26, 32, 44, 0.6);
  backdrop-filter: blur(10px);
  padding: 0.6rem 1rem;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.carousel-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.carousel-indicator:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.carousel-indicator.active {
  width: 28px;
  background: linear-gradient(135deg, #e3211f, #ff4757);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(227, 33, 31, 0.5);
}

/* Contador de imágenes (opcional) */
.carousel-counter {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background: rgba(26, 32, 44, 0.85);
  backdrop-filter: blur(15px);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  z-index: 5;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

/* Ocultar controles si solo hay una imagen */
.portfolio-carousel[data-slides="1"] .carousel-nav,
.portfolio-carousel[data-slides="1"] .carousel-indicators,
.portfolio-carousel[data-slides="1"] .carousel-counter {
  display: none;
}

/* Portfolio Pagination */
.portfolio-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 5rem;
  padding: 2rem 0;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.25rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(227, 33, 31, 0.15);
  border-radius: 50px;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.pagination-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.08), rgba(227, 33, 31, 0.15));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.pagination-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(227, 33, 31, 0.4);
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 30px rgba(227, 33, 31, 0.2),
    0 6px 15px rgba(0, 0, 0, 0.1);
  color: var(--color-primary);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-btn svg {
  transition: transform 0.3s ease;
}

.pagination-btn:hover:not(:disabled) svg {
  transform: translateX(3px);
}

.pagination-prev:hover:not(:disabled) svg {
  transform: translateX(-3px);
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-gray-600);
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(227, 33, 31, 0.1);
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  letter-spacing: 0.5px;
}

.pagination-info span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  background: linear-gradient(135deg, #e3211f 0%, #ff4757 100%);
  border-radius: 50px;
  box-shadow:
    0 4px 12px rgba(227, 33, 31, 0.35),
    inset 0 -2px 6px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.pagination-info span::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.pagination-info span:hover::before {
  left: 100%;
}

.pagination-numbers {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.pagination-number {
  min-width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(227, 33, 31, 0.15);
  border-radius: 50%;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.pagination-number::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.08), rgba(227, 33, 31, 0.15));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
}

.pagination-number:hover:not(.active)::before {
  opacity: 1;
}

.pagination-number:hover:not(.active) {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(227, 33, 31, 0.4);
  box-shadow: 0 8px 20px rgba(227, 33, 31, 0.2);
  color: var(--color-primary);
}

.pagination-number.active {
  background: linear-gradient(135deg, #e3211f 0%, #ff4757 100%);
  color: #fff;
  border-color: #e3211f;
  box-shadow:
    0 8px 25px rgba(227, 33, 31, 0.45),
    0 4px 15px rgba(227, 33, 31, 0.3),
    inset 0 -2px 8px rgba(0, 0, 0, 0.15);
  transform: scale(1.1);
  cursor: default;
}

.pagination-number.active::before {
  opacity: 0;
}

.pagination-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 50px;
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-gray-500);
  letter-spacing: 2px;
  user-select: none;
}

/* Portfolio CTA Section */
.portfolio-cta {
  padding: var(--section-padding) 0;
  background: linear-gradient(135deg, #f7fafc 0%, #fff 100%);
  position: relative;
  overflow: hidden;
}
.portfolio-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(227, 33, 31, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: ctaFloatPortfolio1 8s ease-in-out infinite;
}
.portfolio-cta::after {
  content: "";
  position: absolute;
  bottom: 20%;
  right: 15%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  animation: ctaFloatPortfolio2 10s ease-in-out infinite;
}
@keyframes ctaFloatPortfolio1 {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}
@keyframes ctaFloatPortfolio2 {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}
.portfolio-cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 30px;
  border: 2px solid rgba(227, 33, 31, 0.1);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.portfolio-cta-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  background: linear-gradient(135deg, #1a202c 0%, #e3211f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}
.portfolio-cta-description {
  font-size: 1.15rem;
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.newsletter {
  padding: var(--section-padding) 0;
  background: linear-gradient(135deg, var(--color-dark-1), var(--color-dark-2));
}
.newsletter .section-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.newsletter .section-title {
  color: #fff;
}
.newsletter .section-description {
  color: rgba(255, 255, 255, 0.8);
}
.newsletter-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.newsletter-text {
  color: #fff;
}
.newsletter-title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.newsletter-description {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
}
.newsletter-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}
.benefit-item svg {
  flex-shrink: 0;
  stroke: var(--color-primary);
  stroke-width: 3;
}
.newsletter-form {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-md);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}
.form-group {
  margin-bottom: 1.5rem;
}
.form-input,
select.form-input,
textarea.form-input {
  width: 100%;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-sm);
  color: #fff;
  font-size: 1rem;
  transition: all var(--transition-base);
  font-family: var(--font-secondary);
}
.form-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.form-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(227, 33, 31, 0.2);
  transform: translateY(-2px);
}
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
}
select.form-input option {
  background: var(--color-dark-1);
  color: #fff;
}
textarea.form-input {
  resize: vertical;
  min-height: 100px;
}
.form-privacy {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.form-privacy a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* =================================================================
   CONTACT PAGE STYLES
   ================================================================= */

/* Contact Hero Section */
.contact-hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 0 100px;
  overflow: hidden;
}
.contact-hero-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #1a202c 100%);
  z-index: 0;
}
.contact-hero-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
  opacity: 0.4;
  animation: gridMoveContact 20s linear infinite;
}
.contact-hero-background::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(227, 33, 31, 0.15) 0%, transparent 50%);
  animation: pulseGlowContact 8s ease-in-out infinite;
}
@keyframes gridMoveContact {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}
@keyframes pulseGlowContact {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}
.contact-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
  z-index: 1;
}
.contact-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 0.3s forwards;
}
.contact-hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  letter-spacing: -1px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.contact-hero-title .highlight {
  color: var(--color-primary);
  text-shadow:
    0 0 50px rgba(227, 33, 31, 0.7),
    0 4px 20px rgba(0, 0, 0, 0.3);
  display: inline-block;
  animation: glowPulseContact 3s ease-in-out infinite;
}
@keyframes glowPulseContact {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}
.contact-hero-subtitle {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Contact Info Cards Section */
.contact-info {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f7fafc 0%, #fff 100%);
  position: relative;
  overflow: hidden;
}
.contact-info::before {
  content: "";
  position: absolute;
  top: 20%;
  right: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(227, 33, 31, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  animation: floatContact 10s ease-in-out infinite;
}
@keyframes floatContact {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-30px, 30px);
  }
}
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.contact-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 2px solid rgba(227, 33, 31, 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.05), rgba(227, 33, 31, 0.15));
  opacity: 0;
  transition: opacity 0.5s ease;
}
.contact-card:hover::before {
  opacity: 1;
}
.contact-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(227, 33, 31, 0.15),
    0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: rgba(227, 33, 31, 0.3);
}
.contact-card-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #e3211f 0%, #ff6b6b 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(227, 33, 31, 0.3);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}
.contact-card-icon::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, #e3211f, #ff6b6b);
  border-radius: 20px;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.5s ease;
}
.contact-card:hover .contact-card-icon {
  transform: translateY(-5px) rotate(5deg);
  box-shadow: 0 15px 40px rgba(227, 33, 31, 0.5);
}
.contact-card:hover .contact-card-icon::before {
  opacity: 0.7;
}
.contact-card-icon svg {
  stroke: #fff;
  fill: none;
  position: relative;
  z-index: 1;
}
.contact-card-title {
  font-family: var(--font-primary);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-dark-1);
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}
.contact-card:hover .contact-card-title {
  color: var(--color-primary);
}
.contact-card-text {
  color: var(--color-gray-600);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
}
.contact-card-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-card-link:hover {
  gap: 0.75rem;
  color: #c41c1a;
  transform: translateX(3px);
}

/* Contact Form Section */
.contact-form-section {
  padding: var(--section-padding) 0;
}
.contact-form-wrapper {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: start;
}
.contact-form-container {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 24px;
  padding: 3rem;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(227, 33, 31, 0.1);
}
.contact-form-header {
  margin-bottom: 2.5rem;
}
.contact-form-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, #1a202c 0%, #e3211f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}
.contact-form-description {
  color: var(--color-gray-600);
  font-size: 1.05rem;
  line-height: 1.6;
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 0;
}
.contact-form .form-group {
  margin-bottom: 1.5rem;
}
.contact-form .form-label {
  display: block;
  font-weight: 700;
  color: var(--color-dark-1);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.contact-form .form-input {
  width: 100%;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(227, 33, 31, 0.1);
  border-radius: 12px;
  color: var(--color-dark-1);
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-secondary);
}
.contact-form .form-input::placeholder {
  color: var(--color-gray-600);
  opacity: 0.6;
}
.contact-form .form-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 4px rgba(227, 33, 31, 0.1),
    0 4px 12px rgba(227, 33, 31, 0.15);
  transform: translateY(-2px);
}
.contact-form select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e3211f' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
  cursor: pointer;
}
.contact-form select.form-input option {
  background: #fff;
  color: var(--color-dark-1);
}
.contact-form textarea.form-input {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}
.contact-form .form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  color: var(--color-gray-600);
}
.contact-form .form-checkbox input[type="checkbox"] {
  margin-top: 0.25rem;
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}
.contact-form .form-checkbox a {
  color: var(--color-primary);
  text-decoration: underline;
}
.contact-form .btn-block {
  width: 100%;
  padding: 1.25rem 2rem;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* Contact Info Sidebar */
.contact-info-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.info-box {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(227, 33, 31, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.info-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), #ff6b6b);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.info-box:hover {
  transform: translateY(-8px);
  box-shadow:
    0 12px 40px rgba(227, 33, 31, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.info-box:hover::before {
  opacity: 1;
}
.info-box-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-dark-1) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
}
.info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-gray-600);
  font-size: 1rem;
  line-height: 1.5;
  transition: all 0.3s ease;
}
.info-item:hover {
  color: var(--color-primary);
  transform: translateX(4px);
}
.info-item svg {
  flex-shrink: 0;
  stroke: var(--color-primary);
  stroke-width: 3;
  transition: all 0.3s ease;
}
.info-item:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(227, 33, 31, 0.4));
}
.social-links-vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.social-link-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  color: var(--color-dark-1);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(227, 33, 31, 0.1);
  position: relative;
  overflow: hidden;
}
.social-link-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary), #ff6b6b);
  transition: left 0.4s ease;
  z-index: -1;
}
.social-link-item:hover {
  color: #fff;
  transform: translateX(8px) translateY(-2px);
  box-shadow: 0 8px 24px rgba(227, 33, 31, 0.25);
  border-color: transparent;
}
.social-link-item:hover::before {
  left: 0;
}
.social-link-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  z-index: 1;
}
.social-link-item:hover svg {
  transform: scale(1.15) rotate(5deg);
}

footer {
  background: var(--color-dark-1);
  color: rgba(255, 255, 255, 0.8);
  padding: 4rem 0 2rem;
}
.footer-content {
  display: grid;
  grid-template-columns: 1.8fr 1fr 0.9fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer-brand .footer-logo {
  height: 55px;
  max-width: 250px;
  object-fit: contain;
  margin-bottom: 1.5rem;
}
.footer-tagline {
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
}
.footer-description {
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
}
.footer-social {
  display: flex;
  gap: 1.25rem;
  margin-top: 2rem;
}
.social-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all var(--transition-base);
}
.social-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-lg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-base);
  overflow: hidden;
}
.social-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.social-icon::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: var(--border-radius-lg);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.social-link:hover .social-icon {
  transform: translateY(-5px) scale(1.08);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 10px 30px rgba(99, 102, 241, 0.4),
    0 0 20px rgba(99, 102, 241, 0.3);
}
.social-link:hover .social-icon::before {
  opacity: 1;
}
.social-link:hover .social-icon::after {
  opacity: 1;
  animation: pulse-ring 1.5s ease-out infinite;
}
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
/* Colores específicos por red social */
.social-link[data-social="facebook"]:hover .social-icon {
  box-shadow:
    0 10px 30px rgba(24, 119, 242, 0.5),
    0 0 20px rgba(24, 119, 242, 0.4);
}
.social-link[data-social="facebook"]:hover .social-icon::after {
  background: linear-gradient(135deg, #1877f2, #0e5cca);
}
.social-link[data-social="instagram"]:hover .social-icon {
  box-shadow:
    0 10px 30px rgba(225, 48, 108, 0.5),
    0 0 20px rgba(225, 48, 108, 0.4);
}
.social-link[data-social="instagram"]:hover .social-icon::after {
  background: linear-gradient(135deg, #e1306c, #f77737, #fcaf45);
}
.social-link[data-social="linkedin"]:hover .social-icon {
  box-shadow:
    0 10px 30px rgba(10, 102, 194, 0.5),
    0 0 20px rgba(10, 102, 194, 0.4);
}
.social-link[data-social="linkedin"]:hover .social-icon::after {
  background: linear-gradient(135deg, #0a66c2, #004182);
}
.social-link[data-social="youtube"]:hover .social-icon {
  box-shadow:
    0 10px 30px rgba(255, 0, 0, 0.5),
    0 0 20px rgba(255, 0, 0, 0.4);
}
.social-link[data-social="youtube"]:hover .social-icon::after {
  background: linear-gradient(135deg, #ff0000, #cc0000);
}
.social-icon svg {
  width: 24px;
  height: 24px;
  color: #fff;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  transition: all var(--transition-base);
}
.social-link:hover .social-icon svg {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.social-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-base);
  opacity: 0;
  transform: translateY(-5px);
}
.social-link:hover .social-label {
  opacity: 1;
  transform: translateY(0);
  color: #fff;
}
.footer-column h4,
.footer-title {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.25rem;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s;
}
.footer-links a:hover {
  color: var(--color-primary);
}
.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  gap: 2rem;
}
.footer-copyright {
  margin: 0;
}
.footer-credit {
  margin: 0;
}
.footer-bottom a {
  color: var(--color-primary);
  font-weight: 600;
  transition: all var(--transition-fast);
}
.footer-bottom a:hover {
  color: var(--color-primary-light);
  text-shadow: 0 0 10px rgba(227, 33, 31, 0.5);
}
.footer-bottom .heart {
  color: var(--color-primary);
  display: inline-block;
  animation: heartBeat 1.5s ease infinite;
}
@keyframes heartBeat {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.15);
  }
  50% {
    transform: scale(1);
  }
}

/* ==========================================
   16. BACK TO TOP BUTTON
   Botón flotante con animación pulse-ring
   Aparece al hacer scroll > 300px (controlado por main.js)
   ========================================== */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(227, 33, 31, 0.4);
}
.back-to-top::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  background: #c41d1b;
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(227, 33, 31, 0.5);
}
.back-to-top:hover::before {
  opacity: 1;
  animation: pulse-ring 1.5s ease-out infinite;
}
.back-to-top svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  stroke-width: 2.5;
  position: relative;
  z-index: 1;
  transition: transform 0.3s;
}
.back-to-top:hover svg {
  transform: translateY(-2px);
}

/* Animaciones de scroll solo cuando JS está listo */
.js-ready [data-scroll] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s,
    transform 0.6s;
}

.js-ready [data-scroll].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback si JS no carga - mostrar todo */
[data-scroll] {
  opacity: 1;
  transform: none;
}

/* ============================================
   PÁGINAS LEGALES
   Diseño profesional con TOC lateral sticky
   ============================================ */

/* --- Hero Section --- */
.legal-hero {
  padding: 6rem 0 3rem;
  background: linear-gradient(180deg, #f8f9fa 0%, white 100%);
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.legal-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--color-dark);
  margin: 1rem 0 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.legal-subtitle {
  font-size: 1rem;
  color: rgba(26, 26, 26, 0.6);
  margin: 0;
  font-weight: 500;
}

/* --- Layout Principal --- */
.legal-content {
  padding: 1.5rem 0 6rem;
  background: white;
}

.legal-wrapper {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3.5rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* --- Sidebar TOC --- */
.legal-sidebar {
  position: sticky;
  top: 6rem;
  background: white;
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.75rem 1.75rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Scrollbar personalizada */
.legal-sidebar::-webkit-scrollbar {
  width: 4px;
}

.legal-sidebar::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.legal-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.legal-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(227, 33, 31, 0.5);
}

.legal-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* --- Navegación TOC --- */
.legal-nav h3 {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(26, 26, 26, 0.5);
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.legal-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-nav li {
  margin-bottom: 0.25rem;
}

.legal-nav-link {
  display: block;
  padding: 0.65rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
  border-left: 3px solid transparent;
}

.legal-nav-link:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--color-dark);
  border-left-color: rgba(227, 33, 31, 0.3);
}

.legal-nav-link.active {
  background: rgba(227, 33, 31, 0.08);
  color: var(--color-primary);
  font-weight: 600;
  border-left-color: var(--color-primary);
}

/* --- Documento Legal --- */
.legal-document {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  padding: 2.5rem 3rem;
  border: 1px solid rgba(227, 33, 31, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(227, 33, 31, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Secciones */
.legal-section {
  margin-bottom: 3.5rem;
  scroll-margin-top: 6rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(227, 33, 31, 0.06);
}

.legal-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Títulos con diseño moderno */
.legal-section h2 {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  position: relative;
  padding-bottom: 0.75rem;
}

.legal-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), rgba(227, 33, 31, 0.3));
  border-radius: 2px;
}

.legal-section h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-dark);
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Contenido de texto mejorado */
.legal-section p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(52, 58, 64, 0.85);
  margin-bottom: 1.5rem;
}

.legal-section ul,
.legal-section ol {
  margin: 1.5rem 0;
  padding-left: 1.75rem;
}

.legal-section li {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(52, 58, 64, 0.85);
  margin-bottom: 0.75rem;
}

.legal-section ul li::marker {
  color: var(--color-primary);
}

.legal-section ol li::marker {
  color: var(--color-primary);
  font-weight: 600;
}

.legal-section strong {
  color: var(--color-dark);
  font-weight: 600;
}

.legal-section a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(227, 33, 31, 0.3);
  transition: all 0.2s ease;
}

.legal-section a:hover {
  border-bottom-color: var(--color-primary);
  color: #c41d1b;
}

/* --- Tablas modernas --- */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5rem 0;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(227, 33, 31, 0.08);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(227, 33, 31, 0.04);
}

.legal-table th {
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.95) 0%, rgba(227, 33, 31, 1) 100%);
  color: white;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

.legal-table td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(227, 33, 31, 0.06);
  color: rgba(52, 58, 64, 0.85);
  font-size: 1rem;
  line-height: 1.6;
}

.legal-table tr:last-child td {
  border-bottom: none;
}

.legal-table tr:hover td {
  background: rgba(227, 33, 31, 0.02);
}

/* --- Cajas destacadas --- */
.legal-highlight {
  background: linear-gradient(135deg, rgba(227, 33, 31, 0.05) 0%, rgba(227, 33, 31, 0.02) 100%);
  border-left: 4px solid var(--color-primary);
  padding: 1.75rem 2rem;
  border-radius: 12px;
  margin: 2.5rem 0;
  box-shadow: 0 2px 8px rgba(227, 33, 31, 0.08);
}

.legal-highlight p {
  margin-bottom: 0;
  color: var(--color-dark);
  font-weight: 500;
}

/* --- Botones de navegación footer --- */
.legal-footer-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 2px solid rgba(0, 0, 0, 0.06);
}

.legal-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.35rem;
  background: white;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  color: var(--color-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.legal-footer-link:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(227, 33, 31, 0.3);
}

.legal-footer-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.legal-footer-link:hover svg {
  transform: scale(1.1) rotate(5deg);
}

/* ============================================
   WHATSAPP WIDGET
   Botón flotante con badge en hover
   ============================================ */
.whatsapp-widget {
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 999;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

/* Badge de mensaje - Aparece solo con hover */
.whatsapp-message {
  background: linear-gradient(135deg, #ffffff 0%, #f8fff9 100%);
  padding: 0.85rem 1.15rem;
  border-radius: 16px;
  box-shadow:
    0 8px 25px rgba(37, 211, 102, 0.15),
    0 3px 10px rgba(0, 0, 0, 0.08);
  max-width: 200px;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-15px) scale(0.95);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%) translateX(-15px) scale(0.95);
  border: 1.5px solid rgba(37, 211, 102, 0.25);
}

/* Flecha del badge apuntando al botón */
.whatsapp-message::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -9px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid #f8fff9;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  filter: drop-shadow(2px 0 3px rgba(37, 211, 102, 0.12));
}

/* Mostrar mensaje al hacer hover en el botón */
.whatsapp-button:hover + .whatsapp-message {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
}

.whatsapp-message-text {
  font-size: 0.85rem;
  color: #1a5f3a;
  line-height: 1.4;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Botón principal de WhatsApp */
.whatsapp-button {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 24px rgba(37, 211, 102, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 3px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: white;
}

.whatsapp-button::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: shimmer 3s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.whatsapp-button:hover {
  transform: scale(1.15) rotate(-5deg);
  box-shadow:
    0 12px 32px rgba(37, 211, 102, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.2);
}

.whatsapp-button:hover::before {
  opacity: 1;
}

.whatsapp-button:active {
  transform: scale(1.05);
}

.whatsapp-icon {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
  position: relative;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.whatsapp-button:hover .whatsapp-icon {
  transform: scale(1.12) rotate(8deg);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) brightness(1.1);
}

/* Animación de pulso mejorada */
@keyframes whatsapp-pulse {
  0% {
    box-shadow:
      0 8px 24px rgba(37, 211, 102, 0.4),
      0 4px 12px rgba(0, 0, 0, 0.15),
      0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  50% {
    box-shadow:
      0 8px 24px rgba(37, 211, 102, 0.4),
      0 4px 12px rgba(0, 0, 0, 0.15),
      0 0 0 20px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow:
      0 8px 24px rgba(37, 211, 102, 0.4),
      0 4px 12px rgba(0, 0, 0, 0.15),
      0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-button.pulse {
  animation: whatsapp-pulse 2.5s infinite;
}

/* ============================================
   COOKIE BANNER - Diseño profesional con paleta del proyecto
   ============================================ */
.cookie-banner {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  max-width: 720px;
  width: calc(100% - 4rem);
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.98), rgba(38, 38, 38, 0.98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(227, 33, 31, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 2rem;
  z-index: 998;
  border-radius: 24px;
  border: 1px solid rgba(227, 33, 31, 0.2);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cookie-banner.show {
  transform: translateX(-50%) translateY(0);
}

.cookie-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cookie-icon {
  font-size: 3.5rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(227, 33, 31, 0.4));
  flex-shrink: 0;
}

.cookie-text {
  flex: 1;
  color: white;
}

.cookie-text h4 {
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

.cookie-text > p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0 0 1.25rem 0;
}

.cookie-text a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.cookie-text a:hover {
  color: #ff5555;
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cookie-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.cookie-btn-accept {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 16px rgba(227, 33, 31, 0.4);
  flex: 1;
}

.cookie-btn-accept:hover {
  background: #ff5555;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(227, 33, 31, 0.5);
}

.cookie-btn-reject {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex: 1;
}

.cookie-btn-reject:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.cookie-btn-settings {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.75rem 1rem;
  border: none;
  font-size: 0.85rem;
}

.cookie-btn-settings:hover {
  color: var(--color-primary);
  background: rgba(227, 33, 31, 0.1);
}

/* Cookie Settings Modal */
.cookie-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cookie-modal.show {
  display: flex;
  opacity: 1;
}

.cookie-modal-content {
  background: white;
  border-radius: 24px;
  padding: 2.5rem;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 25px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-modal.show .cookie-modal-content {
  transform: scale(1);
}

.cookie-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--color-border);
}

.cookie-modal-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}

.cookie-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-light);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 1.25rem;
  color: var(--color-text);
}

.cookie-modal-close:hover {
  background: var(--color-primary);
  color: white;
  transform: rotate(90deg);
}

.cookie-category {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: var(--color-light);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.cookie-category:hover {
  border-color: rgba(227, 33, 31, 0.15);
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.cookie-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.cookie-category-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0;
}

.cookie-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  background: #ccc;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.cookie-toggle.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cookie-toggle input {
  display: none;
}

.cookie-toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.cookie-toggle input:checked + .cookie-toggle-slider {
  transform: translateX(24px);
}

.cookie-toggle:has(input:checked) {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.cookie-category-description {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}

.cookie-modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-border);
}

.cookie-modal-actions .cookie-btn {
  flex: 1;
}

/* ============================================
   RESPONSIVE DESIGN - BREAKPOINTS
   Mobile-first approach con breakpoints descendentes
   ============================================ */

/* ============================================
   BREAKPOINT: 1238px
   Grid valores (equipo) 4 items - centrar cuarto elemento
   ============================================ */
@media (max-width: 1238px) {
  /* Valores Grid (Equipo) - Cambiar a 3 columnas fijas */
  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Centrar el cuarto item (huérfano) */
  .value-card:nth-child(4) {
    grid-column: 2 / 3;
  }
}

/* ============================================
   BREAKPOINT: 1178px
   Grid portafolio 3 items - centrar tercer elemento
   ============================================ */
@media (max-width: 1178px) {
  /* Portafolio Grid - Cambiar a 2 columnas fijas */
  .projects-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Centrar el tercer item (huérfano) */
  .project-featured-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* ============================================
   BREAKPOINT: 1033px
   Activar menú hamburger - navegación móvil
   ============================================ */
@media (max-width: 1033px) {
  /* Asegurar que logo y hamburguesa estén en las esquinas */
  .nav-container {
    max-width: 100% !important;
    width: 100%;
    margin: 0 !important;
    justify-content: space-between;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Mostrar botón hamburger */
  .nav-toggle {
    display: flex;
  }

  /* Menú móvil - desplegable desde arriba */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
    background: white;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    gap: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition:
      max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s 0.35s,
      opacity 0.35s ease;
    z-index: 10000;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
  }

  /* Mostrar menú cuando está activo */
  .nav-menu.active {
    max-height: 450px;
    padding: 1rem 0 1.5rem;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  /* Items del menú móvil */
  .nav-menu li {
    width: 90%;
    max-width: 320px;
    text-align: center;
    opacity: 0;
    transform: translateY(-15px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .nav-menu.active li {
    opacity: 1;
    transform: translateY(0);
  }

  .nav-menu.active li:nth-child(1) {
    transition-delay: 0.05s;
  }
  .nav-menu.active li:nth-child(2) {
    transition-delay: 0.08s;
  }
  .nav-menu.active li:nth-child(3) {
    transition-delay: 0.11s;
  }
  .nav-menu.active li:nth-child(4) {
    transition-delay: 0.14s;
  }
  .nav-menu.active li:nth-child(5) {
    transition-delay: 0.17s;
  }
  .nav-menu.active li:nth-child(6) {
    transition-delay: 0.2s;
  }

  .nav-link {
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    width: 100%;
    display: block;
    color: var(--color-dark);
    position: relative;
    border-radius: 8px;
    transition: all 0.25s ease;
  }

  .nav-link::before {
    display: none;
  }

  .nav-link:hover {
    color: var(--color-primary);
    background: rgba(227, 33, 31, 0.04);
  }

  /* CTA button en móvil */
  .nav-link.nav-cta {
    margin-top: 0.75rem;
    padding: 0.85rem 2rem;
    border-radius: 8px;
    width: auto;
    box-shadow: 0 3px 12px rgba(227, 33, 31, 0.2);
  }

  .nav-link.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(227, 33, 31, 0.3);
  }

  .nav-link.nav-cta::after {
    display: none;
  }

  /* Footer - Diseño 1-2-2-1 para tablet */
  .footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }

  /* Primera fila: Brand (1) - ocupa ambas columnas */
  .footer-brand {
    grid-column: 1 / -1;
    text-align: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-brand .footer-logo {
    margin: 0 auto 1.5rem;
  }

  /* Segunda fila: 2 columnas (columns 2 y 3) */
  .footer-column:nth-child(2) {
    grid-column: 1;
    text-align: center;
  }

  .footer-column:nth-child(3) {
    grid-column: 2;
    text-align: center;
  }

  /* Tercera fila: 2 columnas (columns 4 y 5) */
  .footer-column:nth-child(4) {
    grid-column: 1;
    text-align: center;
  }

  .footer-column:nth-child(5) {
    grid-column: 2;
    text-align: center;
  }

  .footer-column h4,
  .footer-title {
    font-size: 1.05rem;
    margin-bottom: 1rem;
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .footer-social {
    justify-content: center;
  }

  /* Cuarta fila: Copyright (1) - ocupa ambas columnas */
  .footer-bottom {
    grid-column: 1 / -1;
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  /* WhatsApp Widget - Reducir tamaño */
  .whatsapp-button {
    width: 56px;
    height: 56px;
  }

  .whatsapp-icon {
    width: 38px;
    height: 38px;
  }

  .whatsapp-message {
    right: 72px;
    padding: 0.75rem 1rem;
  }

  .whatsapp-message-text {
    font-size: 0.8rem;
  }
}

/* ============================================
   BREAKPOINT: 1134px
   Grid áreas especializadas (equipo) - centrar último elemento (Marketing)
   ============================================ */
@media (max-width: 1134px) {
  /* Team Grid (Áreas Especializadas) - Cambiar a 2 columnas fijas */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Centrar el último item (Marketing - huérfano) */
  .team-card:last-child {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* ============================================
   BREAKPOINT: 1118px
   Grid servicios 3 items - centrar tercer elemento
   Grid testimonios 3 items - centrar tercer elemento
   ============================================ */
@media (max-width: 1118px) {
  /* Servicios Grid - Cambiar a 2 columnas fijas */
  .services-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Centrar el tercer item (huérfano) */
  .service-featured-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
  }

  /* Testimonios Grid - Cambiar a 2 columnas fijas */
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Centrar el tercer item (huérfano) */
  .testimonial-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* ============================================
   RESPONSIVE: BREAKPOINT 900px
   ============================================
   Tablet Portrait & Mobile Landscape
   
   CAMBIOS PRINCIPALES:
   - Cursor personalizado desactivado
   - Efectos hover convertidos a estados estáticos
   - Grids cambian de 3→2 columnas
   - Mobile menu activado
   - Animaciones simplificadas para performance
   - Touch targets mínimos de 44px
   
   PÁGINAS AFECTADAS: Todas
   ============================================ */
@media (max-width: 900px) {
  /* ===== CURSOR & INTERACCIONES ===== */

  /* NOTA: Los !important aquí son NECESARIOS porque:
     1. El cursor personalizado usa !important en estilos base
     2. JavaScript también puede aplicar estilos inline
     3. Necesitamos override garantizado en dispositivos touch */

  /* Desactivar cursor personalizado (no funcional en touch) */
  .custom-cursor,
  .cursor-glow {
    display: none !important;
  }

  /* Restaurar cursor normal del sistema */
  * {
    cursor: auto !important;
  }

  /* Cursor pointer solo en elementos interactivos */
  a,
  button,
  .btn,
  input,
  select,
  textarea {
    cursor: pointer !important;
  }

  /* ===== HOVER EFFECTS DESACTIVADOS =====
     En dispositivos touch, los hovers no funcionan correctamente.
     Los elementos mantienen su estado normal con estilos optimizados.
     
     NOTA: transform:none !important es necesario porque los hover
     effects en los estilos base usan transform con transitions.
     Sin !important, el hover se activaría en el primer tap.
  */

  /* Cards y elementos principales */
  .service-card:hover,
  .service-360-card:hover,
  .service-featured-card:hover,
  .project-featured-card:hover,
  .testimonial-card:hover,
  .team-card:hover,
  .value-card:hover,
  .portfolio-item:hover,
  .portfolio-featured-card:hover,
  .contact-card:hover,
  .client-slide:hover,
  .about-image-wrapper:hover,
  .feature-item:hover,
  .benefit-item:hover {
    transform: none !important;
    box-shadow: inherit !important;
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    scale: none !important;
  }

  /* Botones y links */
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-large:hover,
  .nav-link:hover,
  .nav-cta:hover,
  .social-link:hover,
  .footer-links a:hover,
  .filter-btn:hover,
  .pagination-btn:hover,
  .carousel-nav:hover,
  .back-to-top:hover,
  .whatsapp-button:hover,
  .cookie-btn:hover,
  .legal-nav-link:hover,
  .legal-footer-link:hover {
    transform: none !important;
    box-shadow: inherit !important;
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
  }

  /* Imágenes y media */
  .portfolio-item:hover .portfolio-image img,
  .project-featured-card:hover .project-featured-image img,
  .team-card:hover .team-image img,
  .about-image-wrapper:hover img,
  .client-slide:hover img {
    transform: none !important;
    scale: none !important;
    filter: inherit !important;
    opacity: inherit !important;
  }

  /* Iconos */
  .service-card:hover .service-icon,
  .service-360-card:hover .service-360-icon,
  .service-featured-card:hover .service-featured-icon,
  .team-card:hover .team-icon,
  .value-card:hover .value-icon,
  .contact-card:hover .contact-card-icon,
  .social-link:hover .social-icon {
    transform: none !important;
    background: inherit !important;
    color: inherit !important;
  }

  /* Overlays y efectos de capas */
  .portfolio-item:hover .portfolio-overlay,
  .project-featured-card:hover .project-featured-overlay,
  .team-card:hover .team-overlay {
    opacity: inherit !important;
  }

  /* Títulos y textos */
  .service-card:hover .service-title,
  .portfolio-item:hover .portfolio-title,
  .team-card:hover .team-name,
  .value-card:hover .value-title {
    color: inherit !important;
    transform: none !important;
  }

  /* Tags y badges */
  .portfolio-item:hover .portfolio-tags .tag,
  .project-featured-card:hover .project-featured-tags .tag {
    transform: none !important;
    opacity: inherit !important;
  }

  /* Formularios */
  .cta-input:hover,
  .cta-textarea:hover,
  .form-input:hover,
  .contact-form .form-input:hover {
    border-color: inherit !important;
    box-shadow: inherit !important;
  }

  /* Hero pages */
  .services-hero:hover,
  .team-hero:hover,
  .portfolio-hero:hover,
  .contact-hero:hover {
    transform: none !important;
  }

  /* Desactivar pseudo-elementos hover */
  .btn:hover::before,
  .btn:hover::after,
  .service-card:hover::before,
  .portfolio-item:hover::before {
    opacity: inherit !important;
    transform: none !important;
  }

  /* Desactivar tilt 3D effects completamente */
  .service-360-card,
  .portfolio-item,
  .feature-item,
  .team-card,
  .value-card {
    transform: none !important;
    perspective: none !important;
  }

  /* Mantener efectos active/touch para feedback táctil */
  .btn:active,
  .nav-link:active,
  .filter-btn:active,
  .service-card:active,
  .portfolio-item:active,
  .team-card:active {
    transform: scale(0.98) !important;
    opacity: 0.9;
  }

  /* Botones principales de sección - Más grandes y táctiles */
  .services-featured .btn-primary,
  .projects-featured .btn-secondary,
  .projects-cta .btn {
    padding: 1.25rem 3.5rem !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    min-width: auto !important;
    border-width: 2px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .services-featured .btn-primary:active,
  .projects-featured .btn-secondary:active,
  .projects-cta .btn:active {
    transform: scale(0.96) translateY(3px) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
  }

  /* Container - Reducir padding lateral */
  .container {
    max-width: 680px;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Section Padding */
  :root {
    --section-padding: 60px;
  }

  /* Typography */
  .section-title {
    font-size: 2.2rem;
    line-height: 1.25;
  }

  .section-description {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  /* Hero Section - Aprovechar mejor el espacio en tablet */
  .hero {
    min-height: 90vh;
  }

  .hero-content {
    padding: 4rem 0;
    max-width: 100%;
  }

  .hero-badge {
    font-size: 0.85rem;
    padding: 0.5rem 1.25rem;
  }

  .hero-title {
    font-size: 3.5rem;
    line-height: 1.15;
    margin-bottom: 2rem;
  }

  .hero-description {
    font-size: 1.35rem;
    line-height: 1.6;
    max-width: 100%;
    margin-bottom: 2.5rem;
  }

  .hero-actions {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .hero-actions .btn {
    padding: 1.1rem 2.5rem;
    font-size: 1.05rem;
    flex: 0 0 auto;
  }

  .hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem 2.5rem;
    justify-content: center;
    margin-top: 4rem;
  }

  .stat-item {
    flex: 0 0 calc(50% - 1.25rem);
    min-width: 160px;
    text-align: center;
  }

  .stat-number {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .stat-label {
    font-size: 1rem;
  }

  /* About Section - Optimizado para tablet */
  .about {
    padding: var(--section-padding) 0;
  }

  .about-content {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
  }

  .about-image-wrapper {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }

  .about-text {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
  }

  .about-text h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
  }

  .about-text p {
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }

  .about-text .btn {
    margin-top: 1.5rem;
    padding: 1rem 2.5rem;
    font-size: 1.05rem;
  }

  /* Botones de cards - Aumentar tamaño */
  .service-featured-card .btn,
  .service-card .btn {
    padding: 1.1rem 2.75rem;
    font-size: 1.1rem;
  }

  /* Enlaces CTA en cards - Mejorados para tablets */
  .service-featured-link,
  .project-featured-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    margin-top: 1.5rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 12px rgba(227, 33, 31, 0.25);
  }

  .service-featured-link:active,
  .project-featured-cta:active {
    transform: scale(0.97) translateY(2px) !important;
    box-shadow: 0 2px 8px rgba(227, 33, 31, 0.3) !important;
    opacity: 0.9;
  }

  .about-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 100%;
    margin: 2.5rem 0 0;
  }

  .feature-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    text-align: left;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(227, 33, 31, 0.1);
    transition: all 0.3s ease;
  }

  .feature-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(227, 33, 31, 0.1), rgba(227, 33, 31, 0.05));
    border-radius: 14px;
  }

  .feature-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
  }

  .feature-content {
    flex: 1;
  }

  .feature-content h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-dark-1);
  }

  .feature-content p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-gray-600);
    margin: 0;
  }

  /* About Image Placeholder */
  .about-image,
  .image-placeholder {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    min-height: 350px;
  }

  .image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
  }

  .image-placeholder svg {
    width: 70px;
    height: 70px;
    margin-bottom: 1rem;
  }

  .image-placeholder p {
    font-size: 1.05rem;
    text-align: center;
  }

  /* Sección de servicios - Mantener container centrado */
  .services-featured {
    overflow: hidden;
  }

  /* Convertir grids específicos en carruseles horizontales - 1 card completa centrada */
  .services-featured-grid,
  .testimonials-grid,
  .team-grid,
  .values-grid {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    padding: 0.5rem 0 1.5rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }

  /* Ocultar scrollbar completamente */
  .services-featured-grid::-webkit-scrollbar,
  .testimonials-grid::-webkit-scrollbar,
  .team-grid::-webkit-scrollbar,
  .values-grid::-webkit-scrollbar {
    display: none;
  }

  /* Cards en carrusel - Ancho completo centrado */
  .service-featured-card,
  .testimonial-card,
  .team-card,
  .value-card {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
  }

  /* Normalizar tarjeta featured de Dirección General */
  .team-card.featured {
    grid-column: auto !important;
  }

  .team-card.featured .team-image {
    aspect-ratio: 1/1 !important;
  }

  /* Indicadores de carrusel (dots) */
  .carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding: 0.5rem;
  }

  .carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    position: relative;
  }

  .carousel-dot:active {
    transform: scale(0.9);
  }

  .carousel-dot.active {
    background: var(--color-primary);
    width: 32px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(227, 33, 31, 0.3);
  }

  .carousel-dot::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
  }

  /* Primera card sin gap a la izquierda */
  .service-featured-card:first-child,
  .testimonial-card:first-child,
  .team-card:first-child,
  .value-card:first-child {
    margin-left: 0;
  }

  /* Animación active mejorada - feedback táctil perfecto */
  .service-featured-card:active,
  .testimonial-card:active,
  .team-card:active,
  .value-card:active {
    transform: scale(0.97) translateY(2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    opacity: 0.92 !important;
    transition:
      transform 0.1s cubic-bezier(0.4, 0, 1, 1),
      box-shadow 0.1s cubic-bezier(0.4, 0, 1, 1),
      opacity 0.1s cubic-bezier(0.4, 0, 1, 1) !important;
  }

  /* Proyectos Destacados - Convertir a carrusel horizontal optimizado */
  .projects-featured-grid {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    padding: 0.5rem 0 1.5rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }

  .projects-featured-grid::-webkit-scrollbar {
    display: none;
  }

  .project-featured-card {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .project-featured-card:first-child {
    margin-left: 0;
  }

  /* Imagen más grande en portafolio */
  .project-featured-image {
    height: 300px;
  }

  /* Contenido del proyecto optimizado */
  .project-featured-content {
    padding: 2rem 1.75rem;
  }

  .project-featured-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
  }

  .project-featured-description {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }

  /* Badge de categoría más visible */
  .project-featured-category {
    font-size: 0.9rem;
    padding: 0.6rem 1.25rem;
    font-weight: 700;
  }

  /* Tags más grandes y táctiles */
  .project-featured-tags .tag {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }

  /* Animación active para feedback táctil */
  .project-featured-card:active {
    transform: scale(0.97) translateY(2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    opacity: 0.92 !important;
    transition:
      transform 0.1s cubic-bezier(0.4, 0, 1, 1),
      box-shadow 0.1s cubic-bezier(0.4, 0, 1, 1),
      opacity 0.1s cubic-bezier(0.4, 0, 1, 1) !important;
  }

  /* Grids convertidos a carrusel horizontal */
  .services-360-grid {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 0;
  }

  .services-360-grid::-webkit-scrollbar {
    display: none;
  }

  .service-360-card {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 2.5rem 2rem !important;
    text-align: center !important;
  }

  .service-360-card:active {
    transform: scale(0.97) translateY(2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  }

  /* Iconos de benefits más grandes */
  .service-360-icon {
    width: 90px !important;
    height: 90px !important;
    margin: 0 auto 1.5rem !important;
  }

  .service-360-icon svg {
    width: 44px !important;
    height: 44px !important;
  }

  /* Títulos de benefits más prominentes y centrados */
  .service-360-title {
    font-size: 1.65rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* Descripción más legible y centrada */
  .service-360-description {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    text-align: center !important;
  }

  /* Portfolio grid - 1 columna en tablet */
  .portfolio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .portfolio-item {
    width: 100%;
  }

  .portfolio-item:active {
    transform: scale(0.97) translateY(2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    opacity: 0.92 !important;
  }

  /* Contact info grid - 2 columnas arriba, 1 centrada abajo */
  .contact-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Última card centrada y con ancho limitado */
  .contact-card:last-child {
    grid-column: 1 / -1;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
  }

  /* Contact cards - Optimizadas para tablet */
  .contact-card {
    padding: 2.5rem 2rem !important;
  }

  .contact-card-icon {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 1.25rem !important;
  }

  .contact-card-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  .contact-card-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  .contact-card-text {
    font-size: 1rem !important;
    margin-bottom: 1.25rem !important;
  }

  .contact-card-link {
    font-size: 0.95rem !important;
    padding: 0.6rem 0 !important;
  }

  /* Sección Why Choose - Mejorada para tablet */
  .why-choose-content {
    padding: 2.5rem 2rem !important;
  }

  .why-choose-title {
    font-size: 2rem !important;
    margin-bottom: 2rem !important;
    font-weight: 700 !important;
  }

  .why-choose-item {
    padding: 1.25rem 0 !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
  }

  .why-choose-item svg {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
    margin-right: 1rem !important;
    stroke-width: 2.5 !important;
  }

  /* Social links - Botones más balanceados */
  .social-link {
    padding: 1rem 1.75rem !important;
    font-size: 1rem !important;
  }

  .social-link svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Resetear centrados anteriores */
  .project-featured-card:nth-child(3),
  .service-featured-card:nth-child(3),
  .testimonial-card:nth-child(3) {
    grid-column: auto;
    max-width: 100%;
  }

  .team-card:last-child,
  .value-card:nth-child(4) {
    grid-column: auto;
    max-width: 100%;
  }

  /* Cards - Ajustar padding interno */
  .service-card,
  .service-360-card,
  .project-featured-card,
  .portfolio-item,
  .contact-card {
    padding: 1.75rem;
  }

  /* Cards en carrusel - padding optimizado */
  .service-featured-card,
  .testimonial-card,
  .team-card,
  .value-card {
    padding: 2rem;
  }

  /* Value Cards - Mejorados para tablet */
  .value-card {
    padding: 3rem 2.5rem !important;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .value-icon {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto 2rem !important;
  }

  .value-icon svg {
    width: 50px !important;
    height: 50px !important;
    stroke-width: 2.5 !important;
  }

  .value-title {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
  }

  .value-description {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    max-width: 100%;
  }

  /* Títulos de cards más compactos */
  .service-title,
  .service-360-title,
  .service-featured-title,
  .project-featured-title,
  .team-name,
  .value-title,
  .portfolio-title,
  .contact-card-title {
    font-size: 1.25rem;
  }

  /* Descripciones de cards */
  .service-description,
  .service-360-description,
  .service-featured-description,
  .project-featured-description,
  .team-bio,
  .value-description,
  .portfolio-description,
  .contact-card-text {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Contact Form Section - Reordenar con display: contents */
  .contact-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  /* Sidebar pierde su display para que los hijos sean directos */
  .contact-info-sidebar {
    display: contents;
  }

  /* Forzar ancho completo en los info-box */
  .contact-info-sidebar .info-box {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* "¿Por qué elegirnos?" primero */
  .contact-info-sidebar .info-box:first-child {
    order: 1;
  }

  /* Formulario en medio */
  .contact-form-container {
    padding: 2.5rem 2rem;
    order: 2;
  }

  /* "Síguenos" al final */
  .contact-info-sidebar .info-box:last-child {
    order: 3;
  }

  /* CTA Form */
  .cta-form {
    padding: 2.5rem 2rem;
  }

  .cta-form-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .cta-input,
  .cta-textarea {
    padding: 0.9rem 1.1rem;
    font-size: 0.95rem;
  }

  /* Newsletter */
  .newsletter-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .newsletter-benefits {
    justify-content: center;
  }

  .newsletter-form {
    max-width: 100%;
  }

  /* Hero Pages (Servicios, Equipo, Portfolio, Contacto) */
  .services-hero,
  .team-hero,
  .portfolio-hero,
  .contact-hero {
    min-height: 60vh;
  }

  .services-hero-title,
  .team-hero-title,
  .portfolio-hero-title,
  .contact-hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .services-hero-subtitle,
  .team-hero-subtitle,
  .portfolio-hero-subtitle,
  .contact-hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Clientes Carousel - Optimizado para tablet */
  .clients-carousel-wrapper {
    padding: 2rem 0;
  }

  .clients-carousel-wrapper::before,
  .clients-carousel-wrapper::after {
    width: 100px;
  }

  .clients-track {
    gap: 4rem;
    animation-duration: 30s;
  }

  .client-slide {
    padding: 0.5rem;
  }

  .client-slide img {
    max-width: 150px;
    max-height: 75px;
  }

  /* Trust Bar */
  .trust-content {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .trust-title {
    font-size: 1.1rem;
  }

  .trust-subtitle {
    font-size: 0.9rem;
  }

  /* Portfolio Filter */
  .portfolio-filter {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .filter-btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
  }

  /* Buttons */
  .btn {
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
  }

  .btn-large {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
}

/* ============================================
   BREAKPOINT: 680px (Small Tablet)
   ============================================
   - Todas las grids → 1 columna
   - Hero text reducido para legibilidad
   - Navegación móvil activada
   - Cards apiladas verticalmente
   - Formularios stack vertical
   - Section padding reducido
   
   OPTIMIZACIONES:
   - Touch targets aumentados a 48px mínimo
   - Texto más legible (font-size ajustados)
   - Espaciado optimizado para pantallas pequeñas
   
   PÁGINAS AFECTADAS: Todas
   ============================================ */
@media (max-width: 680px) {
  /* ===== GLOBAL ===== */

  /* Container más compacto */
  .container {
    padding: 0 1.5rem;
  }

  /* Typography ajustada */
  .section-title {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }

  .section-subtitle {
    font-size: 1rem !important;
    margin-bottom: 2.5rem !important;
  }

  .section-badge {
    margin-top: 1.5rem !important;
  }

  /* ===== LEGAL PAGES & 404 ===== */

  .legal-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .legal-sidebar {
    position: static !important;
    max-height: 380px !important;
    order: -1 !important;
    margin-top: 0 !important;
    margin-bottom: 2.5rem !important;
    overflow: hidden !important;
  }

  .legal-document {
    order: 1 !important;
    padding: 2rem 2rem !important;
  }
  .legal-section {
    margin-bottom: 3rem !important;
    padding-bottom: 2rem !important;
  }

  .legal-section h2 {
    font-size: 1.65rem !important;
    margin-bottom: 1.25rem !important;
  }

  .legal-section h3 {
    font-size: 1.25rem !important;
    margin: 2rem 0 0.85rem !important;
  }

  .legal-section p,
  .legal-section li {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }

  .legal-nav {
    max-height: 380px !important;
  }

  .legal-nav h3 {
    padding: 1.5rem 1.75rem 1.25rem !important;
    font-size: 0.875rem !important;
  }

  .legal-nav ul {
    padding: 1rem 0.5rem 1rem !important;
  }

  .legal-hero {
    padding: 5rem 0 2.5rem !important;
  }

  .legal-title {
    font-size: 2.25rem !important;
  }

  .legal-content {
    padding: 2rem 0 4rem !important;
  }

  /* ===== HERO SECTION ===== */

  .hero {
    min-height: 500px !important;
    padding: 5rem 0 4rem !important;
  }

  .hero-title {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
  }

  /* ===== BUTTONS ===== */

  .btn {
    padding: 0.875rem 1.5rem !important;
    font-size: 0.95rem !important;
  }

  /* ===== CARDS ===== */

  /* Cards en carrusel - padding reducido */
  .service-featured-card,
  .testimonial-card,
  .team-card,
  .value-card {
    padding: 2rem 1.5rem !important;
  }

  /* Value cards ajustadas */
  .value-card {
    padding: 2.5rem 2rem !important;
    min-height: 280px !important;
  }

  .value-icon {
    width: 85px !important;
    height: 85px !important;
    margin-bottom: 1.5rem !important;
  }

  .value-icon svg {
    width: 42px !important;
    height: 42px !important;
  }

  .value-title {
    font-size: 1.35rem !important;
    margin-bottom: 0.875rem !important;
  }

  .value-description {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  /* Service featured cards */
  .service-featured-icon {
    width: 75px !important;
    height: 75px !important;
    margin-bottom: 1.25rem !important;
  }

  .service-featured-icon svg {
    width: 36px !important;
    height: 36px !important;
  }

  .service-featured-title {
    font-size: 1.35rem !important;
    margin-bottom: 0.75rem !important;
  }

  .service-featured-description {
    font-size: 0.95rem !important;
  }

  /* Testimonial cards */
  .testimonial-text {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
  }

  .testimonial-author-name {
    font-size: 1rem !important;
  }

  .testimonial-author-role {
    font-size: 0.875rem !important;
  }

  /* Team cards */
  .team-name {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  .team-role {
    font-size: 0.875rem !important;
  }

  /* ===== CTA SECTION ===== */

  .cta {
    padding: 4rem 0 !important;
  }

  .cta-title {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }

  .cta-description {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }

  /* ===== STATS - Layout 2 columnas para mejor espaciado ===== */

  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    padding: 2rem 1.5rem !important;
    margin-top: 3rem !important;
  }

  .stat-item {
    padding: 1.25rem 0.75rem !important;
    text-align: center !important;
  }

  .stat-item:nth-child(3) {
    grid-column: 1 / -1 !important;
    max-width: 250px !important;
    margin: 0 auto !important;
  }

  .stat-number {
    font-size: 2.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .stat-label {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
  }

  /* ===== CAROUSEL DOTS ===== */

  .carousel-dots {
    margin-top: 1.5rem !important;
    gap: 0.625rem !important;
  }

  .carousel-dot {
    width: 8px !important;
    height: 8px !important;
  }

  .carousel-dot.active {
    width: 28px !important;
  }

  /* ===== PÁGINAS ADICIONALES ===== */

  /* Servicios Page */
  .service-card {
    padding: 2rem 1.5rem !important;
  }

  .service-icon {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 1.25rem !important;
  }

  .service-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  .service-title {
    font-size: 1.35rem !important;
    margin-bottom: 0.75rem !important;
  }

  .service-description {
    font-size: 0.95rem !important;
  }

  /* Equipo Page */
  .team-card {
    padding: 1.75rem !important;
  }

  .team-name {
    font-size: 1.25rem !important;
  }

  .team-role {
    font-size: 0.875rem !important;
  }

  .team-description {
    font-size: 0.95rem !important;
  }

  /* Contact Page */
  .contact-card {
    padding: 2rem 1.5rem !important;
  }

  .contact-card-icon {
    width: 65px !important;
    height: 65px !important;
    margin-bottom: 1rem !important;
  }

  .contact-card-icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  .contact-card-title {
    font-size: 1.35rem !important;
    margin-bottom: 0.75rem !important;
  }

  .contact-card-text {
    font-size: 0.95rem !important;
  }

  .contact-info-sidebar .info-box {
    padding: 2rem 1.5rem !important;
  }

  .contact-info-sidebar .info-box-title {
    font-size: 1.75rem !important;
    margin-bottom: 1.5rem !important;
  }

  .contact-info-sidebar .info-item {
    padding: 1rem 0 !important;
    font-size: 1rem !important;
  }

  .contact-info-sidebar .info-item svg {
    width: 24px !important;
    height: 24px !important;
  }

  .contact-info-sidebar .social-link-item {
    padding: 0.875rem 1.25rem !important;
    font-size: 0.95rem !important;
  }

  .contact-info-sidebar .social-link-item svg {
    width: 20px !important;
    height: 20px !important;
  }

  .contact-form-container {
    padding: 2rem 1.5rem !important;
  }

  .contact-form-title {
    font-size: 1.75rem !important;
    margin-bottom: 0.875rem !important;
  }

  .contact-form-description {
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
  }

  .form-input,
  .form-label {
    font-size: 0.95rem !important;
  }

  .form-input {
    padding: 0.875rem 1rem !important;
  }

  /* Portafolio Page */
  .portfolio-item {
    padding: 0 !important;
  }

  .portfolio-item-title {
    font-size: 1.35rem !important;
    padding: 1.25rem 1.5rem 0.75rem !important;
  }

  .portfolio-item-category {
    font-size: 0.875rem !important;
    padding: 0 1.5rem 1.25rem !important;
  }

  /* Bolsa Trabajo - Benefits ya optimizados arriba */

  /* Footer */
  .footer {
    padding: 3rem 0 2rem !important;
  }

  .footer-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* Resetear estilos del breakpoint 900px */
  .footer-brand {
    grid-column: auto !important;
    text-align: center !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .footer-brand .footer-logo {
    height: 50px !important;
    margin: 0 auto 1.5rem !important;
  }

  .footer-column:nth-child(2),
  .footer-column:nth-child(3),
  .footer-column:nth-child(4),
  .footer-column:nth-child(5) {
    grid-column: auto !important;
    text-align: center !important;
  }

  .footer-title {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
  }

  .footer-link,
  .footer-text {
    font-size: 0.9rem !important;
  }

  .footer-links {
    align-items: center !important;
  }

  .footer-social {
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  .social-icon {
    width: 48px !important;
    height: 48px !important;
  }

  .social-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }

  /* ===== PÁGINAS LEGALES - Optimizadas para Mobile ===== */

  /* Reducir espacio entre título y contenido */
  .legal-content {
    padding-top: 0 !important;
  }

  /* Legal wrapper en columna normal */
  .legal-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  /* TOC móvil - Colapsable con diseño elegante */
  .legal-sidebar {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 252, 0.95) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(227, 33, 31, 0.08) !important;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.06),
      0 2px 8px rgba(227, 33, 31, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  .legal-document {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Resetear límite del 900px breakpoint */
  .legal-nav {
    max-height: none !important;
  }

  /* Header del TOC clickeable */
  .legal-nav h3 {
    position: relative !important;
    margin: 0 !important;
    padding: 1.125rem 3.5rem 1.125rem 1.625rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.75px !important;
    text-transform: uppercase !important;
    color: rgba(52, 58, 64, 0.75) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(227, 33, 31, 0.08) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .legal-nav h3:hover {
    background: linear-gradient(180deg, rgba(227, 33, 31, 0.02) 0%, rgba(227, 33, 31, 0.04) 100%) !important;
    color: var(--color-primary) !important;
    border-bottom-color: rgba(227, 33, 31, 0.12) !important;
  }

  .legal-nav h3:active {
    transform: scale(0.995) !important;
  }

  /* Indicador de colapso - Chevron pequeño y elegante */
  .legal-nav h3::after {
    content: "" !important;
    position: absolute !important;
    right: 1.5rem !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid var(--color-primary) !important;
    border-bottom: 2px solid var(--color-primary) !important;
    transform: translateY(-50%) rotate(45deg) !important;
    transition:
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease !important;
    opacity: 0.65 !important;
  }

  .legal-nav h3:hover::after {
    opacity: 1 !important;
    transform: translateY(-50%) rotate(45deg) scale(1.1) !important;
  }

  .legal-nav h3.collapsed::after {
    transform: translateY(-50%) rotate(-45deg) !important;
  }

  .legal-nav h3.collapsed:hover::after {
    transform: translateY(-50%) rotate(-45deg) scale(1.1) !important;
  }

  /* Lista de navegación con scroll limitado */
  .legal-nav ul {
    padding: 1rem 0.5rem 1.5rem !important;
    margin: 0 !important;
    list-style: none !important;
    max-height: 400px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    opacity: 1 !important;
    transition:
      max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease !important;
  }

  .legal-nav.collapsed ul {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .legal-nav.expanded ul {
    max-height: 400px !important;
    opacity: 1 !important;
  }

  /* Scrollbar minimalista para el UL */
  .legal-nav ul::-webkit-scrollbar {
    width: 4px !important;
  }

  .legal-nav ul::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .legal-nav ul::-webkit-scrollbar-thumb {
    background: rgba(227, 33, 31, 0.2) !important;
    border-radius: 10px !important;
  }

  .legal-nav ul::-webkit-scrollbar-thumb:hover {
    background: rgba(227, 33, 31, 0.4) !important;
  }

  .legal-nav ul {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(227, 33, 31, 0.25) transparent !important;
  }

  /* Links del TOC - Diseño pill */
  .legal-nav-link {
    padding: 0.75rem 1.25rem !important;
    margin: 0.25rem 0 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: rgba(52, 58, 64, 0.85) !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    position: relative !important;
  }

  .legal-nav-link:hover {
    background: rgba(227, 33, 31, 0.04) !important;
    color: rgba(52, 58, 64, 0.95) !important;
    transform: translateX(3px) !important;
  }

  /* Dot indicator */
  .legal-nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(227, 33, 31, 0.3) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
  }

  .legal-nav-link:hover {
    background: rgba(227, 33, 31, 0.05) !important;
    color: var(--color-primary) !important;
    padding-left: 1.5rem !important;
  }

  .legal-nav-link:hover::before {
    opacity: 1 !important;
    left: 1rem !important;
  }

  .legal-nav-link.active {
    background: linear-gradient(135deg, rgba(227, 33, 31, 0.08) 0%, rgba(227, 33, 31, 0.12) 100%) !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    padding-left: 1.5rem !important;
    box-shadow:
      0 2px 8px rgba(227, 33, 31, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  }

  .legal-nav-link.active::before {
    opacity: 1 !important;
    left: 1rem !important;
    width: 6px !important;
    height: 6px !important;
    background: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(227, 33, 31, 0.15) !important;
  }

  /* Contenido legal más compacto */
  .legal-document {
    padding: 0 1.75rem 2rem !important;
  }

  .legal-section {
    padding-bottom: 1.5rem !important;
    margin-bottom: 2rem !important;
  }

  .legal-section h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
  }

  .legal-section:first-child h2:first-of-type {
    margin-top: 0 !important;
  }

  .legal-section h2::after {
    width: 50px !important;
    height: 2.5px !important;
  }

  .legal-section h3 {
    font-size: 1.25rem !important;
    margin: 1.5rem 0 1rem !important;
  }

  .legal-section p {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
    margin-bottom: 1rem !important;
  }

  .legal-section ul,
  .legal-section ol {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
    padding-left: 1.5rem !important;
    margin: 1rem 0 !important;
  }

  .legal-section li {
    margin-bottom: 0.75rem !important;
  }

  .legal-table {
    border-radius: 14px !important;
  }

  .legal-table th,
  .legal-table td {
    padding: 1rem 1.25rem !important;
    font-size: 0.9rem !important;
  }

  /* Hero legal más compacto */
  .legal-hero {
    padding: 5rem 0 1.5rem !important;
    min-height: auto !important;
  }

  .legal-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
  }

  .legal-subtitle {
    font-size: 0.95rem !important;
  }

  .section-badge {
    font-size: 0.85rem !important;
    padding: 0.5rem 1rem !important;
    margin-top: 1rem !important;
  }
}

/* ============================================
   RESPONSIVE: BREAKPOINT 565px
   ============================================
   Mobile Medium (Smartphones)
   
   CAMBIOS PRINCIPALES:
   - Hero reducido a 420px altura
   - Botones verticales centrados (max-width 320px)
   - Paginación con flechas únicamente (texto oculto)
   - Contact cards → 1 columna (3 filas)
   - Cookie banner vertical con botones stack
   - Section padding mínimo
   
   OPTIMIZACIONES ESPECÍFICAS:
   - Hero actions: flex-column, max-width 320px, margin auto
   - Pagination: font-size 0, border-radius 50%, iconos centrados
   - Contact grid: grid-template-columns 1fr
   - Cookie banner: flex-column, text-align center
   - Vacancy cards: mejor legibilidad y spacing
   
   VERSIÓN: v16.0 - Optimizado y documentado
   PÁGINAS AFECTADAS: Todas
   ============================================ */
@media (max-width: 565px) {
  /* ===== GLOBAL ===== */

  .container {
    padding: 0 1rem;
  }

  .section-title {
    font-size: 1.65rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.2 !important;
  }

  .section-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  .section-badge {
    margin-top: 1.25rem !important;
  }

  /* ===== PÁGINAS LEGALES - Optimizadas para Mobile 565px ===== */

  /* Hero más compacto */
  .legal-hero {
    padding: 4rem 0 1.5rem !important;
  }

  .legal-title {
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
  }

  .legal-subtitle {
    font-size: 0.875rem !important;
  }

  /* Contenido compacto */
  .legal-content {
    padding-top: 0 !important;
  }

  /* TOC - Mantener diseño colapsable */
  .legal-sidebar {
    border-radius: 18px !important;
    margin-bottom: 1.5rem !important;
  }

  .legal-nav h3 {
    padding: 1rem 3rem 1rem 1.375rem !important;
    font-size: 0.825rem !important;
  }

  .legal-nav h3::after {
    right: 1.25rem !important;
    width: 7px !important;
    height: 7px !important;
  }

  .legal-nav ul {
    max-height: 350px !important;
  }

  .legal-nav.expanded ul {
    max-height: 350px !important;
  }

  .legal-nav-link {
    padding: 0.65rem 1.125rem !important;
    font-size: 0.875rem !important;
    border-radius: 10px !important;
  }

  /* Documento legal */
  .legal-document {
    padding: 0 1.5rem 1.75rem !important;
  }

  .legal-section {
    padding-bottom: 1.75rem !important;
    margin-bottom: 2.25rem !important;
  }

  .legal-section h2 {
    font-size: 1.45rem !important;
    margin-bottom: 0.875rem !important;
  }

  .legal-section h2::after {
    width: 45px !important;
  }

  .legal-section h3 {
    font-size: 1.15rem !important;
  }

  .legal-section p,
  .legal-section li {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }

  .legal-table th,
  .legal-table td {
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
  }

  /* ===== HERO SECTION ===== */

  .hero {
    min-height: 420px !important;
    padding: 4rem 0 3rem !important;
  }

  .hero-title {
    font-size: 2.15rem !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 2.5rem !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }

  .hero-actions .btn {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 50px !important;
  }

  .hero-actions .btn-primary {
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
  }

  .hero-actions .btn-secondary {
    font-weight: 500 !important;
    border-width: 2px !important;
  }

  /* Stats - Más compactos */
  .hero-stats {
    gap: 1rem !important;
    padding: 1.5rem 1rem !important;
    margin-top: 2rem !important;
  }

  .stat-item:nth-child(3) {
    max-width: 200px !important;
  }

  .stat-number {
    font-size: 1.85rem !important;
  }

  .stat-label {
    font-size: 0.8rem !important;
  }

  /* ===== BUTTONS ===== */

  .btn {
    padding: 0.75rem 1.125rem !important;
    font-size: 0.875rem !important;
  }

  .hero-buttons .btn {
    padding: 0.95rem 1.5rem !important;
    font-size: 1rem !important;
  }

  /* ===== WIDGETS FLOTANTES ===== */

  .whatsapp-widget {
    width: 50px !important;
    height: 50px !important;
    bottom: 100px !important;
  }

  .whatsapp-widget svg {
    width: 30px !important;
    height: 30px !important;
  }

  .back-to-top {
    width: 50px !important;
    height: 50px !important;
    bottom: 30px !important;
  }

  .back-to-top svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* ===== ABOUT SECTION ===== */

  .about-content .btn {
    width: 100% !important;
    max-width: 320px !important;
    margin: 2rem auto 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
  }

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

  .services-section .btn {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.95rem 1.75rem !important;
    font-size: 0.95rem !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
  }

  /* ===== PORTFOLIO SECTION ===== */

  .projects-cta .btn {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    border-radius: 50px !important;
    border-width: 2px !important;
  }

  /* ===== CONTACT SECTION ===== */

  .contact-form .btn-large {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
  }

  /* ===== CARDS ===== */

  .value-card,
  .service-card,
  .team-card,
  .testimonial-card,
  .service-featured-card {
    padding: 1.5rem 1rem !important;
    min-height: auto !important;
  }

  .value-icon,
  .service-icon {
    width: 70px !important;
    height: 70px !important;
  }

  .value-title,
  .service-title,
  .team-name {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  .value-description,
  .service-description,
  .team-role {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  /* ===== SERVICIOS PAGE ===== */

  .service-360-card {
    padding: 1.75rem 1.25rem !important;
    min-height: auto !important;
  }

  .service-360-icon {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 1.25rem !important;
  }

  .service-360-icon svg {
    width: 42px !important;
    height: 42px !important;
  }

  .service-360-title {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.875rem !important;
  }

  .service-360-description {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
  }

  .service-360-list {
    gap: 0.625rem !important;
  }

  .service-360-list li {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    padding-left: 1.5rem !important;
  }

  /* ===== BOLSA TRABAJO PAGE ===== */

  .vacancy-card .btn {
    width: 100% !important;
    max-width: 280px !important;
    margin: 2rem auto 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 1rem 1.75rem !important;
    font-size: 0.95rem !important;
    border-radius: 50px !important;
  }

  /* ===== EQUIPO PAGE ===== */

  .team-card {
    padding: 1.5rem 1rem !important;
  }

  .team-image {
    height: 200px !important;
  }

  .team-icon {
    width: 65px !important;
    height: 65px !important;
  }

  .team-icon svg {
    width: 50px !important;
    height: 50px !important;
  }

  .team-info {
    padding: 1.25rem 1rem !important;
  }

  .team-name {
    font-size: 1.3rem !important;
    margin-bottom: 0.5rem !important;
  }

  .team-role {
    font-size: 0.875rem !important;
    padding: 0.4rem 0.75rem !important;
  }

  .team-bio {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* ===== CONTACTO PAGE ===== */

  .contact-info-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    max-width: 100% !important;
  }

  .contact-card {
    padding: 2rem 1.5rem !important;
    max-width: 100% !important;
  }

  .contact-card-icon {
    width: 65px !important;
    height: 65px !important;
    margin-bottom: 1rem !important;
  }

  .contact-card-icon svg {
    width: 28px !important;
    height: 28px !important;
  }

  .contact-card-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  .contact-card-text {
    font-size: 0.95rem !important;
    margin-bottom: 1rem !important;
  }

  .contact-card-link {
    font-size: 0.9rem !important;
  }

  .contact-info-sidebar .info-box {
    padding: 1.5rem 1rem !important;
  }

  .contact-info-sidebar .info-box-title {
    font-size: 1.35rem !important;
  }

  .form-label {
    font-size: 0.875rem !important;
  }

  .form-input,
  .form-textarea {
    padding: 0.75rem 0.875rem !important;
    font-size: 0.875rem !important;
  }

  /* ===== PORTAFOLIO PAGE ===== */

  .portfolio-item-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  .portfolio-item-category {
    font-size: 0.8rem !important;
  }

  /* Paginación */
  .pagination-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .pagination-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  .pagination-number {
    width: 44px !important;
    height: 44px !important;
    font-size: 0.95rem !important;
  }

  .pagination-info {
    gap: 0.625rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.95rem !important;
  }

  .pagination-info span {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 0.625rem !important;
  }

  .pagination-numbers {
    gap: 0.5rem !important;
  }

  .pagination-ellipsis {
    width: 38px !important;
  }

  /* ===== FOOTER ===== */

  .footer {
    padding: 2.25rem 0 1.5rem !important;
  }

  .footer-content {
    gap: 1.75rem !important;
  }

  .footer-brand .footer-logo {
    height: 42px !important;
  }

  .footer-tagline {
    font-size: 0.875rem !important;
  }

  .footer-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.875rem !important;
  }

  .footer-link,
  .footer-text {
    font-size: 0.85rem !important;
  }

  .social-icon {
    width: 42px !important;
    height: 42px !important;
  }

  .social-icon svg {
    width: 17px !important;
    height: 17px !important;
    color: #fff !important;
  }

  .footer-bottom {
    font-size: 0.8rem !important;
    padding-top: 1.5rem !important;
  }

  /* ===== COOKIE BANNER ===== */

  .cookie-banner {
    bottom: 1rem !important;
    width: calc(100% - 2rem) !important;
    padding: 1.5rem !important;
    border-radius: 20px !important;
  }

  .cookie-content {
    flex-direction: column !important;
    gap: 1.25rem !important;
    text-align: center !important;
  }

  .cookie-icon {
    font-size: 3rem !important;
  }

  .cookie-text h4 {
    font-size: 1.2rem !important;
    margin-bottom: 0.5rem !important;
  }

  .cookie-text > p {
    font-size: 0.875rem !important;
    margin-bottom: 1rem !important;
  }

  .cookie-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .cookie-btn {
    width: 100% !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.9rem !important;
  }

  .cookie-btn-settings {
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
  }
}

/* ============================================
   RESPONSIVE: BREAKPOINT 480px
   ============================================
   Mobile Small - Móviles pequeños comunes
   
   CAMBIOS PRINCIPALES:
   - Hero height reducido a 380px
   - Tipografía más compacta (section-title 1.5rem)
   - Padding reducido en todas las secciones
   - Botones más pequeños pero táctiles (min 44px)
   - Cards con padding mínimo 1.5rem
   - Formularios optimizados para teclado móvil
   
   DISPOSITIVOS:
   - iPhone SE, Galaxy S8, Moto G4
   - Móviles Android pequeños
   
   PÁGINAS AFECTADAS: Todas
   ============================================ */
@media (max-width: 480px) {
  /* ===== GLOBAL ===== */

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body {
    position: relative !important;
  }

  * {
    max-width: 100% !important;
  }

  .container {
    padding: 0 0.875rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  section {
    padding: 3.5rem 0 !important;
    overflow-x: hidden !important;
  }

  .section-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.625rem !important;
    line-height: 1.15 !important;
  }

  .section-subtitle {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
    margin-bottom: 2rem !important;
  }

  .section-badge {
    margin-top: 1rem !important;
  }

  /* ===== PÁGINAS LEGALES - Optimizadas para Mobile 480px ===== */

  /* Hero ultra-compacto */
  .legal-hero {
    padding: 3.5rem 0 1.5rem !important;
  }

  .legal-title {
    font-size: 1.65rem !important;
    line-height: 1.15 !important;
  }

  .legal-subtitle {
    font-size: 0.825rem !important;
  }

  .section-badge {
    font-size: 0.8rem !important;
    padding: 0.45rem 0.875rem !important;
  }

  /* TOC ultra-compacto */
  .legal-sidebar {
    border-radius: 16px !important;
  }

  .legal-nav h3 {
    padding: 0.875rem 2.75rem 0.875rem 1.125rem !important;
    font-size: 0.775rem !important;
  }

  .legal-nav h3::after {
    right: 1rem !important;
    width: 6px !important;
    height: 6px !important;
  }

  .legal-nav ul {
    max-height: 300px !important;
    padding: 0.875rem 0.375rem 1.25rem !important;
  }

  .legal-nav.expanded ul {
    max-height: 300px !important;
  }

  .legal-nav-link {
    padding: 0.575rem 1rem !important;
    font-size: 0.825rem !important;
    border-radius: 8px !important;
    margin: 0.2rem 0 !important;
  }

  .legal-nav-link::before {
    width: 3px !important;
    height: 3px !important;
    left: 0.625rem !important;
  }

  .legal-nav-link:hover,
  .legal-nav-link.active {
    padding-left: 1.25rem !important;
  }

  .legal-nav-link:hover::before,
  .legal-nav-link.active::before {
    left: 0.875rem !important;
  }

  .legal-nav-link.active::before {
    width: 5px !important;
    height: 5px !important;
  }

  /* Documento legal ultra-compacto */
  .legal-document {
    padding: 0 1.125rem 1.5rem !important;
  }

  .legal-section {
    padding-bottom: 1.125rem !important;
    margin-bottom: 1.5rem !important;
  }

  .legal-section h2 {
    font-size: 1.35rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.625rem !important;
  }

  .legal-section h2::after {
    width: 40px !important;
    height: 2px !important;
  }

  .legal-section h3 {
    font-size: 1.05rem !important;
    margin: 0.875rem 0 0.65rem !important;
  }

  .legal-section p {
    font-size: 0.85rem !important;
    line-height: 1.65 !important;
    margin-bottom: 0.875rem !important;
  }

  .legal-section ul,
  .legal-section ol {
    font-size: 0.85rem !important;
    padding-left: 1.25rem !important;
    margin: 0.875rem 0 !important;
  }

  .legal-section li {
    margin-bottom: 0.625rem !important;
    line-height: 1.65 !important;
  }

  .legal-table {
    border-radius: 12px !important;
    font-size: 0.825rem !important;
  }

  .legal-table th,
  .legal-table td {
    padding: 0.75rem 0.875rem !important;
    font-size: 0.825rem !important;
  }

  /* ===== HEADER/NAVIGATION ===== */

  .nav {
    padding: 0.875rem 0 !important;
  }

  .nav.scrolled {
    padding: 0.625rem 0 !important;
  }

  .nav-container {
    padding: 0 1rem !important;
  }

  .nav-logo img {
    height: 36px !important;
  }

  .nav.scrolled .nav-logo img {
    height: 34px !important;
  }

  .nav-toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
  }

  .nav-toggle span {
    width: 22px !important;
    height: 2.5px !important;
  }

  .nav-menu {
    padding: 4rem 1.5rem 1.5rem !important;
    gap: 0 !important;
  }

  .nav-link {
    font-size: 1.15rem !important;
    padding: 0.75rem 0 !important;
  }

  .nav-link.nav-cta {
    margin-top: 1rem !important;
    padding: 0.75rem 1.75rem !important;
    font-size: 0.95rem !important;
  }

  /* ===== HERO SECTION ===== */

  .hero {
    min-height: 380px !important;
    padding: 90px 0 0 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .hero-video-layer {
    width: 100% !important;
    overflow: hidden !important;
  }

  .hero-content {
    padding: 1.5rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-title {
    font-size: 2rem !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
  }

  .hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.75rem !important;
  }

  .hero-actions {
    gap: 0.875rem !important;
    max-width: 300px !important;
  }

  .hero-actions .btn {
    padding: 0.875rem 1.75rem !important;
    font-size: 0.925rem !important;
    border-radius: 45px !important;
  }

  /* ===== STATS SECTION ===== */

  .stats-number {
    font-size: 2.25rem !important;
    margin-bottom: 0.35rem !important;
  }

  .stats-label {
    font-size: 0.8rem !important;
  }

  .stats-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .stats-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* ===== ABOUT SECTION ===== */

  .about-content p {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1rem !important;
  }

  .about-content .btn {
    max-width: 300px !important;
    padding: 0.875rem 1.75rem !important;
    font-size: 0.925rem !important;
  }

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

  .service-card,
  .service-360-card {
    padding: 2rem 1.5rem !important;
  }

  .service-icon,
  .service-360-icon {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 1.25rem !important;
  }

  .service-icon svg,
  .service-360-icon svg {
    width: 28px !important;
    height: 28px !important;
  }

  .service-title,
  .service-360-title {
    font-size: 1.15rem !important;
    margin-bottom: 0.75rem !important;
  }

  .service-description,
  .service-360-description {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }

  .services-section .btn {
    max-width: 260px !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.9rem !important;
  }

  /* ===== PORTFOLIO SECTION ===== */

  .project-featured-card {
    border-radius: 18px !important;
  }

  .project-featured-image {
    height: 220px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .project-featured-content {
    padding: 1.5rem 1.25rem !important;
  }

  .project-featured-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
  }

  .project-featured-description {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
  }

  .project-featured-category {
    font-size: 0.8rem !important;
    padding: 0.5rem 1rem !important;
  }

  .project-featured-tags .tag {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.85rem !important;
  }

  /* Portfolio Grid Page */
  .portfolio-grid {
    gap: 1.25rem !important;
  }

  .portfolio-card {
    border-radius: 18px !important;
  }

  .portfolio-image {
    height: 280px !important;
  }

  .portfolio-image img {
    object-fit: contain !important;
    background: #000 !important;
  }

  .portfolio-content {
    padding: 1.25rem !important;
  }

  .portfolio-title {
    font-size: 1.1rem !important;
  }

  .portfolio-category {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.85rem !important;
  }

  /* Carousel */
  .carousel-nav {
    width: 38px !important;
    height: 38px !important;
  }

  .carousel-nav svg {
    width: 18px !important;
    height: 18px !important;
  }

  .carousel-indicators {
    bottom: 0.75rem !important;
    gap: 0.4rem !important;
  }

  .carousel-indicator {
    width: 7px !important;
    height: 7px !important;
  }

  /* ===== CLIENTS CAROUSEL ===== */

  @keyframes scroll-clients-mobile-480 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .clients-track {
    animation-name: scroll-clients-mobile-480 !important;
    animation-duration: 10s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    gap: 3rem !important;
  }

  .clients-carousel-wrapper::before,
  .clients-carousel-wrapper::after {
    width: 60px !important;
  }

  .client-slide {
    padding: 0.25rem !important;
  }

  .client-slide img {
    max-width: 120px !important;
    max-height: 60px !important;
  }

  /* ===== TEAM SECTION ===== */

  .team-card {
    padding: 1.75rem 1.5rem !important;
    border-radius: 18px !important;
  }

  .team-photo {
    width: 90px !important;
    height: 90px !important;
    margin-bottom: 1rem !important;
  }

  .team-name {
    font-size: 1.15rem !important;
    margin-bottom: 0.35rem !important;
  }

  .team-role {
    font-size: 0.8rem !important;
    margin-bottom: 0.875rem !important;
  }

  .team-bio {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  /* ===== VALUES SECTION ===== */

  .value-card {
    padding: 2.5rem 2rem !important;
    min-height: 280px !important;
  }

  .value-icon {
    width: 85px !important;
    height: 85px !important;
    margin: 0 auto 1.5rem !important;
  }

  .value-icon svg {
    width: 42px !important;
    height: 42px !important;
  }

  .value-title {
    font-size: 1.3rem !important;
    margin-bottom: 0.875rem !important;
  }

  .value-description {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

  /* ===== CONTACT SECTION ===== */

  .contact-info-grid {
    gap: 1rem !important;
  }

  .contact-card {
    padding: 1.75rem 1.25rem !important;
    border-radius: 18px !important;
  }

  .contact-card-icon {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 0.875rem !important;
  }

  .contact-card-icon svg {
    width: 26px !important;
    height: 26px !important;
  }

  .contact-card-title {
    font-size: 1.15rem !important;
    margin-bottom: 0.5rem !important;
  }

  .contact-card-text {
    font-size: 0.9rem !important;
    margin-bottom: 0.875rem !important;
  }

  .contact-card-link {
    font-size: 0.85rem !important;
    padding: 0.65rem 1.25rem !important;
  }

  /* Contact Form */
  .form-group {
    margin-bottom: 1.25rem !important;
  }

  .form-label {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
  }

  .form-input,
  .form-textarea {
    padding: 0.75rem 0.875rem !important;
    font-size: 0.875rem !important;
    border-radius: 10px !important;
  }

  .form-textarea {
    min-height: 140px !important;
  }

  .btn-submit {
    padding: 0.875rem 2rem !important;
    font-size: 0.925rem !important;
  }

  /* ===== VACANCIES PAGE ===== */

  .service-360-card {
    padding: 1.75rem 1.25rem !important;
    border-radius: 18px !important;
  }

  .service-360-number {
    font-size: 2.5rem !important;
  }

  .service-360-title {
    font-size: 1.15rem !important;
  }

  .service-360-description {
    font-size: 0.875rem !important;
  }

  .service-360-list li {
    font-size: 0.85rem !important;
    padding-left: 1.5rem !important;
  }

  .service-360-card .btn {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
  }

  /* ===== PAGINATION ===== */

  .pagination {
    gap: 0.5rem !important;
  }

  .pagination-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .pagination-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .page-numbers {
    gap: 0.35rem !important;
  }

  .page-number {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.875rem !important;
  }

  /* ===== FOOTER ===== */

  .footer {
    padding: 2.5rem 0 1.5rem !important;
    overflow-x: hidden !important;
  }

  .footer-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .footer-brand {
    max-width: 100% !important;
  }

  .footer-logo img {
    height: 42px !important;
    margin-bottom: 1rem !important;
  }

  .footer-tagline {
    font-size: 0.85rem !important;
  }

  .footer-social {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    max-width: 280px !important;
    margin: 1.5rem auto 0 !important;
  }

  .social-link {
    justify-self: center !important;
  }

  .footer-description {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  .footer-title {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
  }

  .footer-links li {
    margin-bottom: 0.65rem !important;
  }

  .footer-link {
    font-size: 0.875rem !important;
  }

  .social-links {
    gap: 0.75rem !important;
  }

  .social-icon {
    width: 48px !important;
    height: 48px !important;
  }

  .social-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
  }

  .social-label {
    font-size: 0.7rem !important;
  }

  .footer-bottom {
    padding-top: 1.5rem !important;
    margin-top: 2rem !important;
  }

  .footer-bottom-text {
    font-size: 0.8rem !important;
  }

  /* ===== COOKIE BANNER ===== */

  .cookie-banner {
    bottom: 0.75rem !important;
    width: calc(100% - 1.5rem) !important;
    padding: 1.25rem !important;
    border-radius: 18px !important;
  }

  .cookie-text {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  .cookie-btn {
    padding: 0.8rem 1.15rem !important;
    font-size: 0.875rem !important;
  }

  .cookie-btn-settings {
    padding: 0.7rem 0.95rem !important;
    font-size: 0.8rem !important;
  }

  /* ===== WHATSAPP WIDGET ===== */

  .whatsapp-widget {
    bottom: 85px !important;
    right: 20px !important;
  }

  .whatsapp-button {
    width: 52px !important;
    height: 52px !important;
  }

  .whatsapp-button svg {
    width: 28px !important;
    height: 28px !important;
  }

  .back-to-top {
    width: 48px !important;
    height: 48px !important;
    bottom: 20px !important;
    right: 20px !important;
  }

  .back-to-top svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* ===== LEGAL PAGES & 404 ===== */

  .legal-hero {
    padding: 3.5rem 0 1.5rem !important;
  }

  .legal-title {
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
  }

  .legal-subtitle {
    font-size: 0.825rem !important;
  }

  .legal-content {
    padding: 2rem 0 3rem !important;
  }

  .legal-sidebar {
    padding: 1.25rem 1rem !important;
    border-radius: 12px !important;
  }

  .legal-nav-link {
    font-size: 0.8rem !important;
    padding: 0.55rem 0.75rem !important;
  }

  .legal-section {
    margin-bottom: 2.5rem !important;
  }

  .legal-section h2 {
    font-size: 1.35rem !important;
    margin-bottom: 1.25rem !important;
  }

  .legal-section h3 {
    font-size: 1.1rem !important;
    margin: 2rem 0 0.875rem !important;
  }

  .legal-section p,
  .legal-section li {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }

  .legal-section ul,
  .legal-section ol {
    padding-left: 1.5rem !important;
  }

  .legal-table {
    font-size: 0.8rem !important;
  }

  .legal-table th,
  .legal-table td {
    padding: 0.65rem 0.5rem !important;
  }
}

/* ============================================
   RESPONSIVE: BREAKPOINT 360px
   ============================================
   Mobile Extra Small - Móviles muy pequeños
   
   CAMBIOS PRINCIPALES:
   - Hero ultra compacto (340px height)
   - Tipografía mínima legible (1.35rem títulos)
   - Padding extremadamente reducido
   - Botones compactos manteniendo 44px táctil
   - Cards con padding mínimo 1.25rem
   - Grid spacing reducido a 0.875rem
   
   DISPOSITIVOS:
   - iPhone SE (1st gen), Galaxy Fold (cerrado)
   - Móviles Android extra pequeños
   - Pantallas < 375px
   
   PÁGINAS AFECTADAS: Todas
   ============================================ */
@media (max-width: 360px) {
  /* ===== GLOBAL ===== */

  /* Prevención agresiva de scroll horizontal */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body {
    position: relative !important;
  }

  * {
    max-width: 100% !important;
  }

  .container {
    padding: 0 0.75rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  section {
    overflow-x: hidden !important;
    padding: 3rem 0 !important;
  }

  .section-title {
    font-size: 1.35rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.15 !important;
  }

  .section-subtitle {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.75rem !important;
  }

  .section-badge {
    margin-top: 0.875rem !important;
  }

  /* ===== HEADER/NAVIGATION ===== */

  .nav {
    padding: 0.75rem 0 !important;
  }

  .nav.scrolled {
    padding: 0.625rem 0 !important;
  }

  .nav-container {
    padding: 0 0.875rem !important;
  }

  .nav-logo img {
    height: 34px !important;
  }

  .nav.scrolled .nav-logo img {
    height: 32px !important;
  }

  .nav-toggle {
    width: 38px !important;
    height: 38px !important;
    padding: 7px !important;
  }

  .nav-toggle span {
    width: 20px !important;
    height: 2.5px !important;
  }

  .nav-menu {
    padding: 3.75rem 1.25rem 1.25rem !important;
    gap: 0 !important;
  }

  .nav-link {
    font-size: 1.1rem !important;
    padding: 0.7rem 0 !important;
  }

  .nav-link.nav-cta {
    margin-top: 0.875rem !important;
    padding: 0.7rem 1.5rem !important;
    font-size: 0.9rem !important;
  }

  /* ===== HERO SECTION ===== */

  .hero {
    min-height: 340px !important;
    padding: 85px 0 0 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .hero-video-layer {
    width: 100% !important;
    overflow: hidden !important;
  }

  .hero-content {
    padding: 1.25rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-title {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.875rem !important;
  }

  .hero-subtitle {
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-actions {
    gap: 0.75rem !important;
    max-width: 280px !important;
  }

  .hero-actions .btn {
    padding: 0.8rem 1.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 40px !important;
  }

  /* Hero Stats - Layout de columna única */
  .hero-stats {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 1.5rem 1.25rem !important;
    margin-top: 2rem !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .stat-item {
    max-width: 100% !important;
    text-align: center !important;
  }

  .stat-number {
    font-size: 2rem !important;
    margin-bottom: 0.35rem !important;
  }

  .stat-label {
    font-size: 0.825rem !important;
    line-height: 1.3 !important;
  }

  /* ===== STATS SECTION ===== */

  .stats-number {
    font-size: 2rem !important;
    margin-bottom: 0.3rem !important;
  }

  .stats-label {
    font-size: 0.75rem !important;
  }

  .stats-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .stats-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* ===== ABOUT SECTION ===== */

  .about-content p {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.875rem !important;
  }

  .about-content .btn {
    max-width: 280px !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 0.875rem !important;
  }

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

  .service-card,
  .service-360-card {
    padding: 1.75rem 1.25rem !important;
  }

  .service-icon,
  .service-360-icon {
    width: 55px !important;
    height: 55px !important;
    margin-bottom: 1rem !important;
  }

  .service-icon svg,
  .service-360-icon svg {
    width: 26px !important;
    height: 26px !important;
  }

  .service-title,
  .service-360-title {
    font-size: 1.05rem !important;
    margin-bottom: 0.65rem !important;
  }

  .service-description,
  .service-360-description {
    font-size: 0.825rem !important;
    line-height: 1.55 !important;
  }

  .services-section .btn {
    max-width: 240px !important;
    padding: 0.8rem 1.35rem !important;
    font-size: 0.85rem !important;
  }

  /* ===== PORTFOLIO SECTION ===== */

  .project-featured-card {
    border-radius: 16px !important;
  }

  .project-featured-image {
    height: 200px !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .project-featured-content {
    padding: 1.25rem 1rem !important;
  }

  .project-featured-title {
    font-size: 1.15rem !important;
    margin-bottom: 0.65rem !important;
  }

  .project-featured-description {
    font-size: 0.825rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1rem !important;
  }

  .project-featured-category {
    font-size: 0.75rem !important;
    padding: 0.45rem 0.875rem !important;
  }

  .project-featured-tags .tag {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.75rem !important;
  }

  /* Portfolio Grid Page */
  .portfolio-grid {
    gap: 1rem !important;
  }

  .portfolio-card {
    border-radius: 16px !important;
  }

  .portfolio-image {
    height: 250px !important;
  }

  .portfolio-image img {
    object-fit: contain !important;
    background: #000 !important;
  }

  .portfolio-content {
    padding: 1rem !important;
  }

  .portfolio-title {
    font-size: 1rem !important;
  }

  .portfolio-category {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.75rem !important;
  }

  /* Carousel */
  .carousel-nav {
    width: 36px !important;
    height: 36px !important;
  }

  .carousel-nav svg {
    width: 16px !important;
    height: 16px !important;
  }

  .carousel-indicators {
    bottom: 0.65rem !important;
    gap: 0.35rem !important;
  }

  .carousel-indicator {
    width: 6px !important;
    height: 6px !important;
  }

  /* ===== CLIENTS CAROUSEL ===== */

  @keyframes scroll-clients-mobile-360 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .clients-track {
    animation-name: scroll-clients-mobile-360 !important;
    animation-duration: 8s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    gap: 2.5rem !important;
  }

  .clients-carousel-wrapper::before,
  .clients-carousel-wrapper::after {
    width: 40px !important;
  }

  .client-slide {
    padding: 0.25rem !important;
  }

  .client-slide img {
    max-width: 100px !important;
    max-height: 50px !important;
  }

  /* ===== TEAM SECTION ===== */

  .team-card {
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
  }

  .team-photo {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 0.875rem !important;
  }

  .team-name {
    font-size: 1.05rem !important;
    margin-bottom: 0.3rem !important;
  }

  .team-role {
    font-size: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  .team-bio {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  /* ===== VALUES SECTION ===== */

  .value-card {
    padding: 2.25rem 1.75rem !important;
    min-height: 260px !important;
  }

  .value-icon {
    width: 75px !important;
    height: 75px !important;
    margin: 0 auto 1.25rem !important;
  }

  .value-icon svg {
    width: 38px !important;
    height: 38px !important;
  }

  .value-title {
    font-size: 1.2rem !important;
    margin-bottom: 0.75rem !important;
  }

  .value-description {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }

  /* ===== CONTACT SECTION ===== */

  .contact-info-grid {
    gap: 0.875rem !important;
  }

  .contact-card {
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
  }

  .contact-card-icon {
    width: 55px !important;
    height: 55px !important;
    margin-bottom: 0.75rem !important;
  }

  .contact-card-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .contact-card-title {
    font-size: 1.05rem !important;
    margin-bottom: 0.45rem !important;
  }

  .contact-card-text {
    font-size: 0.85rem !important;
    margin-bottom: 0.75rem !important;
  }

  .contact-card-link {
    font-size: 0.8rem !important;
    padding: 0.6rem 1.1rem !important;
  }

  /* Contact Form */
  .form-group {
    margin-bottom: 1rem !important;
  }

  .form-label {
    font-size: 0.8rem !important;
    margin-bottom: 0.45rem !important;
  }

  .form-input,
  .form-textarea {
    padding: 0.7rem 0.8rem !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
  }

  .form-textarea {
    min-height: 120px !important;
  }

  .btn-submit {
    padding: 0.8rem 1.75rem !important;
    font-size: 0.875rem !important;
  }

  /* ===== VACANCIES PAGE ===== */

  .service-360-card {
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
  }

  .service-360-number {
    font-size: 2.25rem !important;
  }

  .service-360-title {
    font-size: 1.05rem !important;
  }

  .service-360-description {
    font-size: 0.825rem !important;
  }

  .service-360-list li {
    font-size: 0.8rem !important;
    padding-left: 1.35rem !important;
  }

  .service-360-card .btn {
    padding: 0.7rem 1.35rem !important;
    font-size: 0.825rem !important;
  }

  /* ===== PAGINATION ===== */

  .pagination {
    gap: 0.45rem !important;
  }

  .pagination-btn {
    width: 38px !important;
    height: 38px !important;
  }

  .pagination-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .page-numbers {
    gap: 0.3rem !important;
  }

  .page-number {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.825rem !important;
  }

  /* ===== FOOTER ===== */

  .footer {
    padding: 2.25rem 0 1.25rem !important;
    overflow-x: hidden !important;
  }

  .footer-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .footer-brand {
    max-width: 100% !important;
  }

  .footer-logo img {
    height: 38px !important;
    margin-bottom: 0.875rem !important;
  }

  .footer-tagline {
    font-size: 0.8rem !important;
  }

  .footer-social {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.875rem !important;
    max-width: 260px !important;
    margin: 1.25rem auto 0 !important;
  }

  .social-link {
    justify-self: center !important;
  }

  .footer-description {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  .footer-title {
    font-size: 1rem !important;
    margin-bottom: 0.875rem !important;
  }

  .footer-links li {
    margin-bottom: 0.6rem !important;
  }

  .footer-link {
    font-size: 0.825rem !important;
  }

  .social-links {
    gap: 0.65rem !important;
  }

  .social-icon {
    width: 46px !important;
    height: 46px !important;
  }

  .social-icon svg {
    width: 19px !important;
    height: 19px !important;
    color: #fff !important;
  }

  .social-label {
    font-size: 0.65rem !important;
  }

  .footer-bottom {
    padding-top: 1.25rem !important;
    margin-top: 1.75rem !important;
  }

  .footer-bottom-text {
    font-size: 0.75rem !important;
  }

  /* ===== COOKIE BANNER ===== */

  .cookie-banner {
    bottom: 0.625rem !important;
    width: calc(100% - 1.25rem) !important;
    padding: 1rem !important;
    border-radius: 16px !important;
  }

  .cookie-text {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }

  .cookie-btn {
    padding: 0.75rem 1rem !important;
    font-size: 0.825rem !important;
  }

  .cookie-btn-settings {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.75rem !important;
  }

  /* ===== WHATSAPP WIDGET ===== */

  .whatsapp-widget {
    bottom: 80px !important;
    right: 18px !important;
  }

  .whatsapp-button {
    width: 50px !important;
    height: 50px !important;
  }

  .whatsapp-button svg {
    width: 26px !important;
    height: 26px !important;
  }

  .back-to-top {
    width: 46px !important;
    height: 46px !important;
    bottom: 18px !important;
    right: 18px !important;
  }

  .back-to-top svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* ===== PÁGINAS LEGALES - Ultra Compactas 360px ===== */

  /* Hero minimalista */
  .legal-hero {
    padding: 3rem 0 1.25rem !important;
  }

  .legal-title {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
  }

  .legal-subtitle {
    font-size: 0.775rem !important;
  }

  .section-badge {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.75rem !important;
  }

  /* TOC minimalista */
  .legal-sidebar {
    border-radius: 14px !important;
  }

  .legal-nav h3 {
    padding: 0.75rem 2.5rem 0.75rem 1rem !important;
    font-size: 0.725rem !important;
    letter-spacing: 0.5px !important;
  }

  .legal-nav h3::after {
    right: 0.875rem !important;
    width: 5px !important;
    height: 5px !important;
    border-width: 1.5px !important;
  }

  .legal-nav ul {
    max-height: 260px !important;
    padding: 0.75rem 0.25rem 1rem !important;
  }

  .legal-nav.expanded ul {
    max-height: 260px !important;
  }

  .legal-nav-link {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.775rem !important;
    border-radius: 7px !important;
    margin: 0.15rem 0 !important;
  }

  .legal-nav-link::before {
    width: 2.5px !important;
    height: 2.5px !important;
    left: 0.5rem !important;
  }

  .legal-nav-link:hover,
  .legal-nav-link.active {
    padding-left: 1.125rem !important;
  }

  .legal-nav-link:hover::before,
  .legal-nav-link.active::before {
    left: 0.75rem !important;
  }

  .legal-nav-link.active::before {
    width: 4px !important;
    height: 4px !important;
  }

  /* Scrollbar minimalista */
  .legal-nav ul::-webkit-scrollbar {
    width: 3px !important;
  }

  /* Documento legal minimalista */
  .legal-document {
    padding: 0 1rem 1.25rem !important;
  }

  .legal-section {
    padding-bottom: 1rem !important;
    margin-bottom: 1.25rem !important;
  }

  .legal-section h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.65rem !important;
    padding-bottom: 0.5rem !important;
  }

  .legal-section h2::after {
    width: 35px !important;
    height: 1.5px !important;
  }

  .legal-section h3 {
    font-size: 0.975rem !important;
    margin: 0.75rem 0 0.5rem !important;
  }

  .legal-section p {
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.75rem !important;
  }

  .legal-section ul,
  .legal-section ol {
    font-size: 0.8rem !important;
    padding-left: 1.125rem !important;
    margin: 0.75rem 0 !important;
  }

  .legal-section li {
    margin-bottom: 0.5rem !important;
    line-height: 1.6 !important;
  }

  .legal-table {
    border-radius: 10px !important;
    font-size: 0.775rem !important;
  }

  .legal-table th,
  .legal-table td {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.775rem !important;
  }

  /* 404 Page */
  .error-code {
    font-size: 5rem !important;
  }

  .error-title {
    font-size: 1.5rem !important;
  }

  .error-description {
    font-size: 0.85rem !important;
  }
}

/* ============================================
   FIN DE MEDIA QUERIES - RESPONSIVE DESIGN COMPLETO
   ============================================
   
   VERSION: 21.0 - LEGAL PAGES FULLY RESPONSIVE
   FECHA: Diciembre 8, 2025
   ESTADO: Producción Ready ✅
   
   BREAKPOINTS COMPLETADOS:
   ✅ 900px  - Tablet (mobile menu, grids 2 cols, TOC max-height 380px)
   ✅ 680px  - Small Tablet (TOC colapsable glassmorphism, scroll 400px)
   ✅ 565px  - Large Mobile (TOC compacto, scroll 350px)
   ✅ 480px  - Mobile (TOC ultra-compacto, scroll 300px)
   ✅ 360px  - Small Mobile (TOC minimalista, scroll 260px)
   
   CARACTERÍSTICAS IMPLEMENTADAS:
   ✅ TOC colapsable con glassmorphism en todos los breakpoints móviles
   ✅ Scroll funcional con alturas adaptativas (400px → 260px)
   ✅ Override de 900px max-height conflict resuelto
   ✅ Chevron animado 8px → 5px según breakpoint
   ✅ Sistema de carousels con dots navigation
   ✅ MutationObserver para contenido dinámico
   ✅ Portfolio images con object-fit contain en móvil
   ✅ Footer con grid 2x2 en breakpoints móviles
   ✅ Hero stats en columna para 360px
   ✅ WhatsApp widget y back-to-top alineados
   ✅ Prevención de scroll horizontal en todos los breakpoints
   
   PÁGINAS COMPLETAMENTE RESPONSIVE:
   ✅ index.html (Homepage)
   ✅ servicios.html
   ✅ portafolio.html
   ✅ equipo.html
   ✅ contacto.html
   ✅ bolsa-trabajo.html
   ✅ cookies.html (TOC optimizado)
   ✅ terms.html (TOC optimizado)
   ✅ privacy.html (TOC optimizado)
   ✅ 404.html (responsive completo)
   
   PERFORMANCE:
   - Todos los breakpoints optimizados para móvil
   - GPU acceleration en animaciones críticas
   - Lazy loading implementado
   - Sin errores en consola
   - Sin scroll horizontal
   
   NOTAS DE MANTENIMIENTO:
   - Clients carousel: 40s (desktop), 20s (480px), 18s (360px)
   - Portfolio heights: 280px (480px), 250px (360px)
   - Footer icons: 48px (480px), 46px (360px)
   - Hero stats: flex-row (>360px), flex-column (360px)
   - Todos los carousels se auto-inicializan con MutationObserver
   
   ============================================ */