/* Responsive Design - Adaptabilidad Total */

/* Variables responsive */
:root {
  --container-padding: var(--spacing-md);
  --section-padding: var(--spacing-4xl);
}

/* Extra Large Screens (1400px+) */
@media screen and (min-width: 1400px) {
  :root {
    --container-padding: var(--spacing-lg);
    --section-padding: var(--spacing-6xl);
  }
  
  .container {
    max-width: 1320px;
  }
}

/* Large Screens (1200px - 1399px) */
@media screen and (max-width: 1399px) {
  .container {
    max-width: 1140px;
  }
}

/* Medium Large Screens (992px - 1199px) */
@media screen and (max-width: 1199px) {
  :root {
    --section-padding: var(--spacing-3xl);
  }
  
  .container {
    max-width: 960px;
  }
  
  /* Ajustes de tipografía */
  h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
  }
  
  h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  }
}

/* Medium Screens (768px - 991px) */
@media screen and (max-width: 991px) {
  :root {
    --section-padding: var(--spacing-2xl);
  }
  
  .container {
    max-width: 720px;
  }
  
  /* Grids responsive */
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Botones */
  .btn--large {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
  }
}

/* Small Medium Screens (576px - 767px) */
@media screen and (max-width: 767px) {
  :root {
    --container-padding: var(--spacing-sm);
    --section-padding: var(--spacing-xl);
  }
  
  .container {
    max-width: 540px;
  }
  
  /* Tipografía móvil */
  h1 {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    line-height: 1.3;
  }
  
  h2 {
    font-size: clamp(1.25rem, 5vw, 2rem);
  }
  
  h3 {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
  }
  
  /* Grids móvil */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  /* Espaciado móvil */
  .section {
    padding: var(--spacing-2xl) 0;
  }
  
  .section--large {
    padding: var(--spacing-3xl) 0;
  }
  
  /* Cards móvil */
  .card {
    padding: var(--spacing-md);
  }
  
  /* Botones móvil */
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
  
  .btn--large {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    width: 100%;
  }
}

/* Extra Small Screens (menos de 576px) */
@media screen and (max-width: 575px) {
  :root {
    --container-padding: var(--spacing-xs);
    --section-padding: var(--spacing-lg);
  }
  
  .container {
    max-width: 100%;
    padding: 0 var(--spacing-sm);
  }
  
  /* Tipografía extra pequeña */
  h1 {
    font-size: clamp(1.25rem, 8vw, 2rem);
  }
  
  h2 {
    font-size: clamp(1.125rem, 6vw, 1.75rem);
  }
  
  /* Espaciado mínimo */
  .section {
    padding: var(--spacing-xl) 0;
  }
  
  /* Cards extra pequeñas */
  .card {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
  }
  
  /* Botones extra pequeños */
  .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
  
  .btn--large {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
}

/* Orientación landscape en móviles */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .section {
    padding: var(--spacing-lg) 0;
  }
  
  .hero {
    min-height: 100vh;
    padding: var(--spacing-md) 0;
  }
}

/* Dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  .nav__link {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  
  /* Eliminar efectos hover en táctiles */
  .hover-lift:hover,
  .hover-glow:hover,
  .hover-scale:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Alto contraste */
@media (prefers-contrast: high) {
  :root {
    --gray-400: #666666;
    --gray-500: #555555;
    --gray-600: #444444;
  }
  
  .btn {
    border-width: 2px;
  }
  
  .card {
    border-width: 2px;
  }
}

/* Modo oscuro del sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --white: #1a1a1a;
    --gray-50: #2a2a2a;
    --gray-100: #3a3a3a;
    --gray-900: #f5f5f5;
    --gray-800: #e5e5e5;
    --gray-700: #d5d5d5;
  }
}

/* Impresión */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  .header,
  .footer,
  .btn,
  .nav {
    display: none !important;
  }
  
  .section {
    page-break-inside: avoid;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
  }
}

/* Utilidades responsive */
.hide-mobile {
  display: block;
}

.show-mobile {
  display: none;
}

@media screen and (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
  
  .show-mobile {
    display: block;
  }
}

.hide-tablet {
  display: block;
}

.show-tablet {
  display: none;
}

@media screen and (max-width: 991px) {
  .hide-tablet {
    display: none;
  }
  
  .show-tablet {
    display: block;
  }
}

/* Contenedores fluidos */
.container-fluid {
  width: 100%;
  padding: 0 var(--container-padding);
}

/* Texto responsive */
.text-responsive {
  font-size: clamp(0.875rem, 2.5vw, 1.125rem);
}

/* Espaciado responsive */
.spacing-responsive {
  margin: clamp(1rem, 4vw, 2rem) 0;
}