/**
 * RESPONSIVE - GOMALOR
 * Media queries adicionales y ajustes responsive globales
 */

/* ============================================
   BREAKPOINTS DE REFERENCIA
   ============================================
   
   Mobile:     < 768px
   Tablet:     768px - 1023px
   Desktop:    1024px - 1279px
   Large:      1280px+
   
   ============================================ */

/* ============================================
   EXTRA LARGE SCREENS (1536px+)
   ============================================ */

@media (min-width: 1536px) {
  /* Container más amplio */
  .container {
    max-width: 1400px;
  }
  
  /* Hero más impactante */
  .hero__slogan {
    font-size: var(--text-6xl);
  }
  
  .hero__subtitle {
    font-size: var(--text-3xl);
  }
  
  /* Secciones con más espacio */
  section {
    padding: var(--space-4xl) 0;
  }
  
  /* Grid de galería con 6 columnas */
  .gallery__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ============================================
   LARGE DESKTOP (1280px - 1535px)
   ============================================ */

@media (min-width: 1280px) and (max-width: 1535px) {
  .container {
    max-width: 1200px;
  }
  
  .section-title {
    font-size: var(--text-4xl);
  }
  
  .gallery__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ============================================
   DESKTOP (1024px - 1279px)
   ============================================ */

@media (min-width: 1024px) and (max-width: 1279px) {
  /* Header ajustado */
  .navbar__menu {
    gap: var(--space-md);
  }
  
  .nav-link {
    font-size: var(--text-sm);
    padding: var(--space-xs) var(--space-sm);
  }
  
  /* Hero optimizado */
  .hero__logo {
    max-width: 280px;
  }
  
  .hero__slogan {
    font-size: var(--text-4xl);
  }
  
  /* Productos en 3 columnas */
  .products__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Galería en 4 columnas */
  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Formulario de contacto */
  .contact__wrapper {
    grid-template-columns: 55fr 45fr;
  }
}

/* ============================================
   TABLET LANDSCAPE (1024px+)
   ============================================ */

@media (min-width: 1024px) {
  /* Parallax activo solo en desktop */
  .hero.parallax {
    overflow: visible;
  }
  
  /* Animaciones más elaboradas */
  .product-card:hover {
    transform: translateY(-10px) scale(1.02);
  }
  
  /* Stats en línea */
  .about__stats {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Footer expandido */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

/* ============================================
   TABLET (768px - 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Ajustes generales de espaciado */
  section {
    padding: var(--space-2xl) 0;
  }
  
  /* Header compacto */
  .header {
    height: 70px;
  }
  
  .logo-img {
    height: 45px;
  }
  
  /* Hero ajustado */
  .hero__logo {
    max-width: 240px;
  }
  
  .hero__slogan {
    font-size: var(--text-3xl);
  }
  
  .hero__subtitle {
    font-size: var(--text-xl);
  }
  
  .hero__cta {
    flex-direction: row;
  }
  
  .hero__cta .btn {
    min-width: 160px;
  }
  
  /* Productos en 2 columnas */
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  
  /* About en 2 columnas */
  .about__wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
  
  /* Stats en 2 columnas */
  .about__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Misión/Visión en 2 columnas */
  .mission-vision__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Galería en 3 columnas */
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Contacto en 2 columnas equilibradas */
  .contact__wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Footer en 2x2 */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer__col:first-child {
    grid-column: 1 / -1;
  }
}

/* ============================================
   TABLET PORTRAIT (768px - 899px)
   ============================================ */

@media (min-width: 768px) and (max-width: 899px) {
  .hero__cta .btn {
    font-size: var(--text-sm);
    padding: 0.75rem 1.25rem;
  }
  
  .section-title {
    font-size: var(--text-3xl);
  }
  
  .product-card__title {
    font-size: var(--text-xl);
  }
}

/* ============================================
   MOBILE LANDSCAPE (576px - 767px)
   ============================================ */

@media (min-width: 576px) and (max-width: 767px) {
  /* Hero optimizado para landscape */
  .hero__slider {
    height: 80vh;
    min-height: 450px;
  }
  
  .hero__logo {
    max-width: 220px;
  }
  
  .hero__slogan {
    font-size: var(--text-2xl);
  }
  
  .hero__subtitle {
    font-size: var(--text-base);
  }
  
  /* Productos en 2 columnas en landscape */
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  
  /* Galería en 3 columnas */
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   MOBILE (< 768px)
   ============================================ */

@media (max-width: 767px) {
  /* Tipografía reducida globalmente */
  html {
    font-size: 15px;
  }
  
  /* Espaciado reducido */
  section {
    padding: var(--space-2xl) 0;
  }
  
  .section-header {
    margin-bottom: var(--space-xl);
  }
  
  /* Header móvil */
  .header {
    height: var(--header-height-mobile);
  }
  
  /* Hero móvil optimizado */
  .hero {
    min-height: 100vh;
  }
  
  .hero__content {
    padding: var(--space-sm);
  }
  
  .hero__logo {
    max-width: 180px;
    margin-bottom: var(--space-md);
  }
  
  .hero__slogan {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
  }
  
  .hero__subtitle {
    font-size: var(--text-base);
    margin-bottom: var(--space-lg);
  }
  
  .hero__cta {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .hero__cta .btn {
    width: 100%;
    font-size: var(--text-base);
  }
  
  /* Productos stack vertical */
  .products__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  /* About stack vertical */
  .about__wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .about__media {
    order: -1;
  }
  
  .about__stats {
    grid-template-columns: 1fr;
  }
  
  /* Misión/Visión stack */
  .mission-vision__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  /* Galería en 2 columnas */
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }
  
  .gallery__filters {
    gap: 0.5rem;
  }
  
  /* Contacto stack */
  .contact__wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  /* Footer stack */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-xs);
  }
}

/* ============================================
   SMALL MOBILE (< 576px)
   ============================================ */

@media (max-width: 575px) {
  /* Reducir aún más el tamaño base */
  html {
    font-size: 14px;
  }
  
  /* Container con menos padding */
  .container {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  
  /* Hero ultra compacto */
  .hero__logo {
    max-width: 160px;
  }
  
  .hero__slogan {
    font-size: var(--text-xl);
  }
  
  .hero__subtitle {
    font-size: var(--text-sm);
  }
  
  /* Títulos de sección más pequeños */
  .section-title {
    font-size: var(--text-2xl);
  }
  
  .section-subtitle {
    font-size: var(--text-sm);
  }
  
  /* Botones más compactos */
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: var(--text-sm);
  }
  
  /* Cards de productos */
  .product-card__title {
    font-size: var(--text-lg);
  }
  
  .product-card__description {
    font-size: var(--text-sm);
  }
  
  /* Formulario */
  .form-label {
    font-size: var(--text-xs);
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    font-size: var(--text-sm);
    padding: 0.625rem 0.75rem;
  }
  
  /* Footer compacto */
  .footer {
    padding: var(--space-xl) 0 var(--space-sm);
  }
  
  .footer__logo {
    max-width: 150px;
  }
}

/* ============================================
   EXTRA SMALL MOBILE (< 375px)
   ============================================ */

@media (max-width: 374px) {
  html {
    font-size: 13px;
  }
  
  .container {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }
  
  .hero__logo {
    max-width: 140px;
  }
  
  .hero__slogan {
    font-size: var(--text-lg);
  }
  
  .section-title {
    font-size: var(--text-xl);
  }
  
  /* Galería en 1 columna en pantallas muy pequeñas */
  .gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   LANDSCAPE MÓVIL (orientación horizontal)
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
  /* Hero ajustado para landscape móvil */
  .hero__slider {
    height: auto;
    min-height: 100vh;
  }
  
  .hero__content {
    padding: var(--space-md);
  }
  
  .hero__logo {
    max-width: 120px;
    margin-bottom: var(--space-sm);
  }
  
  .hero__slogan {
    font-size: var(--text-xl);
    margin-bottom: var(--space-xs);
  }
  
  .hero__subtitle {
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
  }
  
  .hero__cta {
    flex-direction: row;
    gap: var(--space-sm);
  }
  
  .hero__cta .btn {
    min-width: auto;
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
  }
  
  /* Ocultar dots en landscape muy bajo */
  .hero__dots {
    display: none;
  }
  
  /* Secciones con menos padding vertical */
  section {
    padding: var(--space-xl) 0;
  }
}

/* ============================================
   PRINT RESPONSIVE
   ============================================ */

@media print {
  /* Forzar todo a una columna en print */
  .products__grid,
  .about__wrapper,
  .mission-vision__grid,
  .gallery__grid,
  .contact__wrapper,
  .footer__grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Ocultar elementos interactivos */
  .hero__controls,
  .hero__dots,
  .gallery__filters,
  .gallery__overlay,
  .lightbox,
  .scroll-to-top,
  .navbar__toggle {
    display: none !important;
  }
  
  /* Asegurar que las imágenes no se corten */
  img {
    page-break-inside: avoid;
  }
}

/* ============================================
   TOUCH DEVICES (dispositivos táctiles)
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Eliminar efectos hover que no funcionan en touch */
  .product-card:hover,
  .mv-card:hover,
  .stat-item:hover {
    transform: none;
  }
  
  /* Aumentar tamaño de elementos interactivos (mínimo 44x44px) */
  .btn,
  .filter-btn,
  .nav-link,
  .social-link {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Eliminar transiciones de hover */
  a:hover,
  button:hover {
    transition: none;
  }
}

/* ============================================
   HIGH DPI SCREENS (Retina)
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Usar imágenes de mayor resolución si están disponibles */
  /* Este selector se puede usar con JS para cargar @2x images */
  
  /* Mejorar renderizado de bordes */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ============================================
   PREFERENCIAS DE USUARIO
   ============================================ */

/* Reduced Motion - ya implementado en otros archivos, refuerzo aquí */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero__slide.active .hero__image {
    animation: none !important;
  }
}

/* Dark Mode (preparado para futuro) */
@media (prefers-color-scheme: dark) {
  /* Actualmente no implementado, pero preparado para el futuro */
  /* Se puede descomentar cuando se implemente tema oscuro */
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  /* Aumentar contraste de bordes y textos */
  .btn,
  .form-input,
  .form-select,
  .product-card {
    border-width: 3px;
  }
  
  .section-title::after {
    height: 6px;
  }
}

/* ============================================
   UTILIDADES RESPONSIVE
   ============================================ */

/* Mostrar/Ocultar en diferentes breakpoints */
@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-on-tablet {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hide-on-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .show-on-mobile-only {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .show-on-tablet-up {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .show-on-desktop-only {
    display: none !important;
  }
}