/*--------------------------------------------------------------
>>> STELUM - RESPONSIVE CSS
----------------------------------------------------------------
# Breakpoints principales:
  - 1400px: Desktop grande
  - 1200px: Desktop estándar
  - 992px: Tablets landscape
  - 768px: Tablets portrait
  - 700px: Punto crítico para circle-container
  - 576px: Móviles grandes
  - 480px: Móviles estándar
  - 320px: Móviles pequeños
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Desktop Grande (1400px y superior)
--------------------------------------------------------------*/
@media (min-width: 1400px) {
  .contenedor {
    max-width: 1320px;
  }
  
  .section-content {
    max-width: 700px;
  }
}

/*--------------------------------------------------------------
# Desktop Estándar (1200px - 1399px)
--------------------------------------------------------------*/
@media (max-width: 1399px) {
  .contenedor {
    max-width: 1140px;
  }
}

/*--------------------------------------------------------------
# Tablets Landscape (992px - 1199px)
--------------------------------------------------------------*/
@media (max-width: 1199px) {
  /* Contenedores */
  .contenedor {
    max-width: 960px;
  }
  
  /* Navegación */
  .navbar {
    padding: 0 var(--espaciado-lg);
  }
  
  .nav-menu {
    gap: var(--espaciado-lg);
  }
  
  /* Secciones principales */
  .section-content {
    max-width: 550px;
    width: 45%;
  }
  
  /* Proyectos */
  .proyecto-titulo {
    font-size: 3rem;
  }
  
  .proyecto-descripcion {
    font-size: 1.1rem;
  }
  
  /* Vehículos */
  .vehiculos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espaciado-lg);
  }
  
  /* Galería */
  .galeria-grid-avanzada {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 280px);
    gap: 15px;
  }
}

/*--------------------------------------------------------------
# Tablets Portrait (768px - 991px)
--------------------------------------------------------------*/
@media (max-width: 991px) {
  /* Contenedores */
  .contenedor {
    max-width: 720px;
    padding: 0 var(--espaciado-md);
  }
  
  /* Navegación - Activar menú móvil */
  .nav-menu {
    display: none;
  }
  
  .btn-movil {
    display: flex;
  }
  
  /* Circle Container - Reducir tamaño */
  .circle-container {
    width: 400px !important;
    height: 400px !important;
  }
  
  /* Secciones principales */
  .section-content {
    width: 50%;
    margin-left: 5%;
  }
  
  /* Proyectos */
  .proyecto-titulo {
    font-size: 2.5rem;
  }
  
  .proyecto-descripcion {
    font-size: 1rem;
    max-width: 400px;
  }
  
  .proyecto-impacto {
    gap: var(--espaciado-lg);
  }
  
  .impacto-item .numero {
    font-size: 2rem;
  }
  
  /* Galería */
  .galeria-grid-avanzada {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 20px;
  }
  
  .galeria-card-premium {
    height: 300px;
  }
  
  /* Footer */
  .footer-contenido {
    grid-template-columns: 1fr;
    gap: var(--espaciado-xl);
  }
}

/*--------------------------------------------------------------
# PUNTO CRÍTICO: 700px - Ocultar Circle Container
--------------------------------------------------------------*/
@media (max-width: 700px) {
  /* CRÍTICO: Ocultar completamente el circle container */
  .circle-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Desactivar el scroll personalizado en móviles */
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; /* Scroll nativo iOS */
  }
  
  /* Cambiar el comportamiento del container principal */
  .container {
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Las secciones ya no necesitan altura fija */
  .content-section {
    position: relative !important;
    height: auto !important;
    min-height: 100vh;
    padding: 80px 0 40px 0;
    opacity: 1 !important;
    transform: none !important;
    display: flex;
    align-items: center;
  }
  
  /* Ajustar contenido de secciones para ocupar más espacio */
  .section-content {
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--espaciado-md);
  }
  
  /* Ajustar secciones con imagen de fondo */
  .seccion-imagen-fullscreen {
    min-height: 100vh;
    position: relative;
  }
  
  .seccion-imagen-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .imagen-overlay {
    background: linear-gradient(
      135deg, 
      rgba(var(--color-primario-rgb), 0.9) 0%, 
      rgba(var(--color-primario-rgb), 0.7) 100%
    );
  }
}

/*--------------------------------------------------------------
# Móviles Grandes (576px - 699px)
--------------------------------------------------------------*/
@media (max-width: 699px) {
  /* Navegación */
  .navbar {
    height: 70px;
    padding: 0 var(--espaciado-md);
  }
  
  .logo img {
    height: 40px;
  }
  
  /* Ajustes para secciones con imagen de fondo */
  .seccion-imagen-fullscreen {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .seccion-imagen-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  .seccion-imagen-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* Overlay ajustado para mejor legibilidad en móvil */
  .imagen-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      135deg, 
      rgba(var(--color-primario-rgb), 0.9) 0%, 
      rgba(var(--color-primario-rgb), 0.7) 50%,
      rgba(var(--color-primario-rgb), 0.8) 100%
    );
    z-index: 2;
  }
  
  /* Asegurar que el contenido esté sobre el overlay */
  .seccion-imagen-fullscreen .section-content {
    position: relative;
    z-index: 3;
    color: var(--texto-claro);
    text-align: center;
    padding: var(--espaciado-xl) var(--espaciado-md);
  }
  
  /* Proyectos - Vista móvil completa */
  .proyecto-item {
    height: 100vh;
    min-height: 600px;
    position: relative;
  }
  
  /* Ajustes específicos para imagen de fondo en proyectos */
  .proyecto-imagen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  .proyecto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* Overlay más oscuro para proyectos en móvil */
  .proyecto-imagen::after {
    background: linear-gradient(
      135deg, 
      rgba(var(--color-primario-rgb), 0.9) 0%, 
      rgba(var(--color-primario-rgb), 0.6) 50%,
      rgba(var(--color-primario-rgb), 0.8) 100%
    );
  }
  
  .proyecto-contenido {
    padding: var(--espaciado-xl) var(--espaciado-lg);
    max-width: 100%;
    position: relative;
    z-index: 3;
  }
  
  .proyecto-izquierda .proyecto-contenido,
  .proyecto-derecha .proyecto-contenido {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  
  .proyecto-titulo {
    font-size: 2rem;
  }
  
  .proyecto-descripcion {
    font-size: 0.95rem;
  }
  
  .proyecto-derecha .proyecto-impacto {
    justify-content: flex-start;
  }
  
  .proyecto-derecha .proyecto-descripcion {
    margin-left: 0;
  }
  
  .impacto-item {
    padding: var(--espaciado-md);
  }
  
  .impacto-item .numero {
    font-size: 1.8rem;
  }
  
  /* Vehículos */
  .vehiculos-grid {
    grid-template-columns: 1fr;
    gap: var(--espaciado-md);
  }
  
  .vehiculo-card {
    max-width: 500px;
    margin: 0 auto;
  }
  
  /* Galería */
  .galeria-grid-avanzada {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .galeria-card-premium {
    height: 350px;
  }
  
  /* CTA */
  .cta-contenido {
    flex-direction: column;
    text-align: center;
  }
  
  .cta-acciones {
    width: 100%;
    align-items: center;
  }
  
  .cta-texto h3 {
    font-size: 1.8rem;
  }
  
  /* Footer */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-legal {
    flex-direction: column;
    gap: var(--espaciado-sm);
  }
  
  .separador {
    display: none;
  }
  
  /* Botones flotantes */
  .utils-buttons {
    bottom: 1rem;
    left: 1rem;
  }
  
  .social-buttons {
    bottom: 1rem;
    right: 1rem;
  }
  
  .btn-scroll-top {
    right: 60px;
    width: 45px;
    height: 45px;
  }
}

/*--------------------------------------------------------------
# Móviles Estándar (480px - 575px)
--------------------------------------------------------------*/
@media (max-width: 575px) {
  /* Variables ajustadas */
  :root {
    --espaciado-xxl: 3rem;
    --espaciado-xl: 2rem;
  }
  
  /* Navegación */
  .navbar {
    height: 60px;
  }
  
  .menu-movil__contenido {
    width: 280px;
  }
  
  /* Scroll Indicator */
  .scroll-indicator {
    bottom: 2rem;
  }
  
  /* Proyectos */
  .proyecto-contenido {
    padding: var(--espaciado-lg) var(--espaciado-md);
  }
  
  .proyecto-titulo {
    font-size: 1.8rem;
    margin-bottom: var(--espaciado-md);
  }
  
  .titulo-destacado {
    display: inline;
  }
  
  .proyecto-impacto {
    flex-direction: column;
    gap: var(--espaciado-md);
  }
  
  .impacto-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--espaciado-md);
  }
  
  .impacto-item .numero {
    font-size: 1.5rem;
  }
  
  .impacto-item .texto {
    text-align: right;
  }
  
  /* Vehículos */
  .vehiculo-imagen {
    height: 200px;
  }
  
  .vehiculo-titulo {
    font-size: 1.2rem;
  }
  
  .vehiculos-cta h3 {
    font-size: 1.5rem;
  }
  
  /* Galería */
  .galeria-card-premium {
    height: 300px;
  }
  
  .card-titulo-premium {
    font-size: 1.1rem;
  }
  
  /* Botones CTA */
  .btn-primario-grande {
    padding: 14px 24px;
    font-size: 16px;
  }
  
  /* Footer */
  .footer-contacto {
    gap: var(--espaciado-sm);
  }
  
  .contacto-icono {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  
  /* Utilidades */
  .util-btn {
    width: 32px;
    height: 32px;
  }
  
  .social-btn {
    width: 28px;
    height: 28px;
  }
}

/*--------------------------------------------------------------
# Móviles Pequeños (320px - 479px)
--------------------------------------------------------------*/
@media (max-width: 479px) {
  /* Títulos y párrafos principales con tamaños finales */
  .section-title {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    line-height: 1.15;
    margin-bottom: var(--espaciado-sm);
  }
  
  .section-paragraph {
    font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
    line-height: 1.5;
    max-width: 100%;
  }
  
  /* Hero / Sección 1 */
  #section1 .section-title {
    font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
  }
  
  #section1 .section-paragraph {
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
  }
  
  /* Secciones con fondo (2, 3-5, 5) */
  #section2 .section-title,
  #section3-5 .section-title,
  #section5 .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  
  #section2 .section-paragraph,
  #section3-5 .section-paragraph,
  #section5 .section-paragraph {
    font-size: clamp(0.875rem, 3.5vw, 1.125rem) !important;
  }
  
  /* Secciones blancas (3, 4) */
  #section3 .section-title,
  #section4 .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  
  #section3 .section-paragraph,
  #section4 .section-paragraph {
    font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
  }
  
  /* Navegación móvil completa */
  .menu-movil__contenido {
    width: 100%;
    max-width: 280px;
  }
  
  /* Títulos de sección */
  .titulo-principal {
    font-size: 1.75rem;
  }
  
  .descripcion-seccion {
    font-size: 0.95rem;
  }
  
  /* Proyectos móvil */
  .proyecto-titulo {
    font-size: 1.5rem;
  }
  
  .proyecto-descripcion {
    font-size: 0.875rem;
  }
  
  .btn-proyecto {
    padding: var(--espaciado-sm) var(--espaciado-md);
    font-size: 0.95rem;
  }
  
  /* Vehículos móvil */
  .vehiculo-card {
    border-radius: var(--radio-borde);
  }
  
  .vehiculo-titulo {
    font-size: 1.1rem;
  }
  
  .vehiculo-descripcion {
    font-size: 0.875rem;
  }
  
  /* Galería móvil */
  .galeria-card-premium {
    height: 250px;
    border-radius: var(--radio-borde);
  }
  
  .card-categoria-premium {
    font-size: 0.65rem;
  }
  
  .card-titulo-premium {
    font-size: 1rem;
  }
  
  .card-descripcion-premium {
    font-size: 0.8rem;
  }
  
  /* Footer móvil */
  .footer-logo img {
    height: 40px;
  }
  
  .footer-descripcion {
    font-size: 0.95rem;
  }
  
  .footer-titulo h3 {
    font-size: 1.25rem;
  }
  
  /* Botones pequeños */
  .btn {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  /* Ocultar botones menos importantes en móviles muy pequeños */
  .utils-buttons {
    gap: 0.5rem;
  }
  
  .social-buttons {
    display: none;
  }
  
  .btn-scroll-top {
    right: 15px;
    bottom: 15px;
  }
}

/*--------------------------------------------------------------
# Ajustes especiales para iPhone SE y similares (375px)
--------------------------------------------------------------*/
@media (max-width: 375px) {
  /* Contenedor principal */
  .contenedor {
    padding: 0 12px;
  }
  
  /* Secciones */
  .content-section {
    padding: 60px 0 30px 0;
  }
  
  /* Proyectos */
  .proyecto-item {
    min-height: 568px;
  }
  
  .proyecto-contenido {
    padding: var(--espaciado-md);
  }
  
  /* Optimizaciones finales */
  .titulo-seccion-centrado {
    margin-bottom: var(--espaciado-lg);
  }
  
  .etiqueta-seccion {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/*--------------------------------------------------------------
# Orientación Landscape para móviles
--------------------------------------------------------------*/
@media (max-height: 500px) and (orientation: landscape) {
  /* Ajustar alturas para landscape */
  .content-section {
    min-height: auto;
    padding: 40px 0;
  }
  
  .proyecto-item {
    height: auto;
    min-height: 100vh;
  }
  
  /* Ocultar elementos no esenciales */
  .scroll-indicator {
    display: none;
  }
  
  /* Navegación más compacta */
  .navbar {
    height: 50px;
  }
  
  .logo img {
    height: 30px;
  }
}

/*--------------------------------------------------------------
# Ajustes de impresión
--------------------------------------------------------------*/
@media print {
  /* Ocultar elementos interactivos */
  .navbar,
  .circle-container,
  .scroll-indicator,
  .utils-buttons,
  .social-buttons,
  .btn-scroll-top,
  .video-btn,
  .btn-movil,
  .menu-movil {
    display: none !important;
  }
  
  /* Mostrar todo el contenido */
  .content-section {
    position: relative !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
    page-break-inside: avoid;
  }
  
  /* Ajustar contenedores */
  .container {
    height: auto !important;
    min-height: auto !important;
  }
  
  /* Proyectos en impresión */
  .proyecto-item {
    height: auto !important;
    page-break-inside: avoid;
  }
  
  /* Colores de impresión */
  .seccion-imagen-fullscreen {
    background: white !important;
    color: black !important;
  }
  
  .section-title,
  .section-paragraph {
    color: black !important;
    text-shadow: none !important;
  }
}

/*--------------------------------------------------------------
# Reglas Finales - Alta Prioridad (Mantener al final)
--------------------------------------------------------------*/

/* Ajustes generales para títulos y párrafos de sección */
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--espaciado-md);
}

.section-paragraph {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  line-height: 1.6;
  color: var(--texto-gris);
  max-width: 600px;
}

/* Hero / Sección 1 */
#section1 .section-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
}

#section1 .section-paragraph {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
}

/* Quiénes Somos / Sección 2 (con fondo) */
#section2 .section-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  color: var(--texto-claro);
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

#section2 .section-paragraph {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--texto-claro);
}

/* Servicio Full Service / Sección 3 */
#section3 .section-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
}

#section3 .section-paragraph {
  font-size: clamp(0.95rem, 2vw, 1.125rem);
}

/* Soporte 24/7 / Sección 3-5 (con fondo) */
#section3-5 .section-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  color: var(--texto-claro);
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

#section3-5 .section-paragraph {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--texto-claro);
}

/* Monitoreo GPS / Sección 4 */
#section4 .section-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
}

#section4 .section-paragraph {
  font-size: clamp(0.95rem, 2vw, 1.125rem);
}

/* Vehículos Especializados / Sección 5 (con fondo) */
#section5 .section-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  color: var(--texto-claro);
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

#section5 .section-paragraph {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--texto-claro);
}

/* Adaptación final para móviles */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .section-paragraph {
    font-size: clamp(0.875rem, 4vw, 1rem);
  }
}

/* Clase para resaltar en naranja con línea */
.resalta {
  position: relative;
  color: #BF4000;
  font-weight: 700;
}

.resalta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  background: #BF4000;
  border-radius: 2px;
}

/*--------------------------------------------------------------
# Desactivar animaciones complejas en móviles para mejor rendimiento
--------------------------------------------------------------*/
@media (max-width: 700px) {
  /* Desactivar animaciones del círculo */
  .progress-ring,
  .progress-segment,
  .circle-content {
    display: none !important;
  }
  
  /* Simplificar transiciones */
  * {
    animation-duration: 0.3s !important;
  }
  
  /* Desactivar parallax en móviles */
  .proyecto-item {
    background-attachment: scroll !important;
  }
}

/*--------------------------------------------------------------
# FIN DEL ARCHIVO RESPONSIVE
--------------------------------------------------------------*/