/* 🎨 SECTIONS.CSS - PARTE 1: HOME + SERVICES + DEBUG SYSTEM
   📝 SÚPER DOCUMENTADO PARA CAMBIOS RÁPIDOS Y PRECISOS
   🔍 BUSCAR POR TEXTO ESPECÍFICO PARA ENCONTRAR LO QUE NECESITAS
   ========================================================================= */

/* 🚨🚨🚨 SISTEMA DEBUG - ACTIVAR/DESACTIVAR BORDES DE SECCIONES 🚨🚨🚨
   📍 CAMBIAR: "none" por "3px solid COLOR" para VER BORDES
   🎯 BUSCAR: "DEBUG" para encontrar este sistema rápidamente
   ========================================================================= */

:root {
    /* 🔧 VARIABLES DEBUG - MODIFICAR AQUÍ PARA ACTIVAR/DESACTIVAR */
    --debug-home: 3px none;
    /* 🟡 CAMBIAR a: 3px solid yellow - antes none */
    --debug-services: none;
    /* 🔴 CAMBIAR a: 3px solid red */
    --debug-contact: none;
    /* 🔵 CAMBIAR a: 3px solid blue */
}

/* 🚨 APLICACIÓN DE BORDES DEBUG A CADA SECCIÓN */
#home {
    border: var(--debug-home) !important;
}

#services {
    border: var(--debug-services) !important;
}

#contact {
    border: var(--debug-contact) !important;
}

/* =========================================================================
   🏠🏠🏠 SECCIÓN HOME - COMPLETA Y DOCUMENTADA 🏠🏠🏠
   ========================================================================= */

/* 📍 CONTENEDOR PRINCIPAL HOME - Altura y centrado
   🎯 BUSCAR: "home-container" para modificar dimensiones generales */
.home-container {
    width: 100%;
    height: auto;
    min-height: 85vh;
    /* ← Un poco más de altura mínima */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 80px 20px;
    /* ← MUCHO MÁS PADDING ARRIBA */
    /* 🔧 150px arriba para separar bien del header */
}

/* 📍 WRAPPER DEL CONTENIDO HOME - Ancho máximo y animación inicial
   🎯 BUSCAR: "content-wrapper" para cambiar ancho o animación de entrada */
.content-wrapper {
    width: 100%;
    max-width: 1000px;
    /* 🔧 ANCHO MÁXIMO CONTENIDO HOME */
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.2s ease-out 1.2s forwards;
    /* 🔧 TIMING ANIMACIÓN */
}

/* 📍 TÍTULO PRINCIPAL: "Electronics and software developed for You"
   🎯 BUSCAR: "Electronics" para cambiar este título específicamente
   🎯 BUSCAR: "main-title" para modificaciones generales */
.main-title {
    font-size: 72px;
    /* 🔧 PC: TAMAÑO TÍTULO PRINCIPAL */
    font-weight: 700;
    /* 🔧 GROSOR FUENTE TÍTULO */
    color: #ffffff;
    /* 🔧 COLOR TÍTULO PRINCIPAL */
    line-height: 1.1;
    /* 🔧 ALTURA LÍNEA TÍTULO */
    margin-bottom: 40px;
    /* 🔧 ESPACIO DEBAJO TÍTULO */
}

/* 📍 SUBTÍTULO: "Featured products month ✓"
   🎯 BUSCAR: "Featured products" para cambiar este subtítulo
   🎯 BUSCAR: "subtitle" para modificaciones generales */
.subtitle {
    font-size: 28px;
    /* 🔧 PC: TAMAÑO SUBTÍTULO */
    color: #ffffff;
    /* 🔧 COLOR SUBTÍTULO */
    margin-bottom: 60px;
    /* 🔧 ESPACIO DEBAJO SUBTÍTULO */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    /* 🔧 SEPARACIÓN TEXTO-CHECKMARK */
}

/* 📍 CHECKMARK "✓" - El círculo naranja con el check
   🎯 BUSCAR: "checkmark" para modificar el círculo ✓ */
.checkmark {
    background: #ff6b35;
    /* 🔧 COLOR FONDO CHECKMARK */
    color: #ffffff;
    /* 🔧 COLOR SÍMBOLO ✓ */
    border-radius: 50%;
    width: 32px;
    /* 🔧 TAMAÑO CHECKMARK */
    height: 32px;
    /* 🔧 TAMAÑO CHECKMARK */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    /* 🔧 TAMAÑO SÍMBOLO ✓ */
    font-weight: bold;
}

/* =========================================================================
   🎥🎥🎥 SECCIÓN VIDEO HOME 🎥🎥🎥
   ========================================================================= */

/* 📍 CONTENEDOR SECCIÓN VIDEO - Espaciado general
   🎯 BUSCAR: "video-section" para modificar márgenes del video */
.video-section {
    margin: 50px 0;
    /* 🔧 ESPACIADO VERTICAL VIDEO */
}

/* 📍 CONTENEDOR DEL VIDEO - Tamaño y sombra
   🎯 BUSCAR: "video-container" para cambiar dimensiones del video */
.video-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    /* 🔧 PC: ANCHO MÁXIMO VIDEO */
    aspect-ratio: 16/9;
    /* 🎥 PROPORCIÓN 1280x720 (16:9 HD) */
    border-radius: 15px;
    /* 🔧 REDONDEO BORDES VIDEO */
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    /* 🔧 SOMBRA VIDEO */
}

/* 📍 VIDEO PRINCIPAL - El elemento video HTML
   🎯 BUSCAR: "hero-video" para propiedades del video */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

/* 📍 BOTÓN PLAY DEL VIDEO - El círculo blanco con triángulo
   🎯 BUSCAR: "play-button" para modificar botón de reproducir */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    /* 🔧 PC: TAMAÑO BOTÓN PLAY */
    height: 100px;
    /* 🔧 PC: TAMAÑO BOTÓN PLAY */
    background: rgba(255, 255, 255, 0.95);
    /* 🔧 COLOR BOTÓN PLAY */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

/* 📍 HOVER BOTÓN PLAY - Efecto al pasar mouse
   🎯 BUSCAR: "play-button:hover" para cambiar efecto hover */
.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    /* 🔧 ZOOM HOVER */
    background: rgba(255, 255, 255, 1);
    /* 🔧 COLOR HOVER */
}

/* 📍 TRIÁNGULO DEL BOTÓN PLAY - La flecha ▶
   🎯 BUSCAR: "play-button::after" para modificar la flecha */
.play-button::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 32px solid #333;
    /* 🔧 TAMAÑO Y COLOR FLECHA */
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    margin-left: 8px;
    /* 🔧 POSICIÓN FLECHA */
}

/* =========================================================================
   📝📝📝 SECCIÓN DESCRIPCIÓN HOME 📝📝📝
   ========================================================================= */

/* 📍 CONTENEDOR DESCRIPCIÓN - "New!! Nova_Guard..." 
   🎯 BUSCAR: "description-section" para modificar área de descripción */
.description-section {
    max-width: 800px;
    /* 🔧 ANCHO MÁXIMO DESCRIPCIÓN */
    margin: 60px auto 0;
    /* 🔧 ESPACIADO DESCRIPCIÓN */
    text-align: center;
}

/* 📍 TÍTULO DESCRIPCIÓN: "New!! Nova_Guard, perimeter alarm..."
   🎯 BUSCAR: "Nova_Guard" para cambiar este título específico
   🎯 BUSCAR: "description-title" para modificaciones generales */
.description-title {
    font-size: 36px;
    /* 🔧 PC: TAMAÑO TÍTULO DESCRIPCIÓN */
    color: #ff6b35;
    /* 🔧 COLOR TÍTULO DESCRIPCIÓN */
    margin-bottom: 30px;
    /* 🔧 ESPACIO DEBAJO TÍTULO */
    font-weight: 600;
    /* 🔧 GROSOR TÍTULO DESCRIPCIÓN */
}

/* 📍 TEXTO DESCRIPCIÓN: "Transform your electric fence..." / "An electronic supervisor..."
   🎯 BUSCAR: "Transform your" para encontrar primer párrafo
   🎯 BUSCAR: "electronic supervisor" para encontrar segundo párrafo
   🎯 BUSCAR: "description-text" para modificaciones generales */
.description-text {
    color: #cccccc;
    /* 🔧 COLOR TEXTO DESCRIPCIÓN */
    line-height: 1.6;
    /* 🔧 ALTURA LÍNEA DESCRIPCIÓN */
    margin-bottom: 25px;
    /* 🔧 ESPACIO ENTRE PÁRRAFOS */
    font-size: 20px;
    /* 🔧 PC: TAMAÑO TEXTO DESCRIPCIÓN */
}

.description-text:last-child {
    margin-bottom: 0;
    /* 🔧 ÚLTIMO PÁRRAFO SIN MARGEN */
}

/* =========================================================================
   ⚙️⚙️⚙️ SECCIÓN SERVICES - COMPLETA Y DOCUMENTADA ⚙️⚙️⚙️
   ========================================================================= */

/* 📍 CONTENEDOR PRINCIPAL SERVICES - Fondo gris y centrado
   🎯 BUSCAR: "services-section" para modificar la sección completa */
.services-section {
    width: 100%;
    background-color: #1e2328;
    /* 🔧 COLOR FONDO SERVICES */
    padding: 80px 20px;
    /* 🔧 PC: ESPACIADO SERVICES */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 📍 WRAPPER INTERNO SERVICES - Ancho máximo del contenido
   🎯 BUSCAR: "services-container" para modificar ancho services */
.services-container {
    width: 100%;
    max-width: 1200px;
    /* 🔧 ANCHO MÁXIMO SERVICES */
    margin: 0 auto;
    text-align: center;
}

/* 📍 TÍTULO PRINCIPAL SERVICES: "20 years of electronic and software..."
   🎯 BUSCAR: "20 years" para cambiar este título principal
   🎯 BUSCAR: "services-main-title" para modificaciones generales */
.services-main-title {
    font-size: 56px;
    /* 🔧 PC: TAMAÑO TÍTULO PRINCIPAL SERVICES */
    color: #F5DD27;
    /* 🔧 COLOR TÍTULO PRINCIPAL (amarillo) */
    margin-bottom: 20px;
    /* 🔧 ESPACIO DEBAJO TÍTULO PRINCIPAL */
    font-weight: 600;
    /* 🔧 GROSOR TÍTULO PRINCIPAL */
    text-align: center;
    line-height: 1.2;
    /* 🔧 ALTURA LÍNEA TÍTULO */
}

/* 📍 SUBTÍTULO SERVICES: "Some of our services ✓"
   🎯 BUSCAR: "Some of our services" para cambiar este subtítulo
   🎯 BUSCAR: "services-subtitle" para modificaciones generales */
.services-subtitle {
    font-size: 28px;
    /* 🔧 PC: TAMAÑO SUBTÍTULO SERVICES */
    color: #ffffff;
    /* 🔧 COLOR SUBTÍTULO SERVICES */
    margin-bottom: 40px;
    /* 🔧 ESPACIO DEBAJO SUBTÍTULO */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    /* 🔧 SEPARACIÓN TEXTO-CHECKMARK */
}

/* 📍 TÍTULO SERVICES: "Algunos de nuestros servicios"
   🎯 BUSCAR: "Algunos de nuestros" para cambiar este título
   🎯 BUSCAR: "services-title" para modificaciones generales */
.services-title {
    font-size: 56px;
    /* 🔧 PC: TAMAÑO TÍTULO SERVICES */
    color: #ffffff;
    /* 🔧 COLOR TÍTULO SERVICES (amarillo) */
    margin-bottom: 30px;
    /* 🔧 ESPACIO DEBAJO TÍTULO */
    font-weight: 600;
    /* 🔧 GROSOR TÍTULO SERVICES */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}


/* 📍 TÍTULO SERVICES ANIMADO - Clase que se agrega por JavaScript
   🎯 BUSCAR: "services-title.animate" para modificar animación */
.services-title.animate {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================================
   🎠🎠🎠 CARRUSEL SERVICES 🎠🎠🎠
   ========================================================================= */

/* 📍 WRAPPER CARRUSEL - Contenedor con botones y carrusel
   🎯 BUSCAR: "services-carousel-wrapper" para modificar layout carrusel */
.services-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    /* 🔧 SEPARACIÓN BOTONES-CARRUSEL */
    margin-bottom: 40px;
    /* 🔧 ESPACIO DEBAJO CARRUSEL */
}

/* 📍 CARRUSEL PRINCIPAL - Container de las tarjetas
   🎯 BUSCAR: "services-carousel" para modificar carrusel */
.services-carousel {
    flex: 1;
    overflow: hidden;
    border-radius: 15px;
    /* 🔧 REDONDEO CARRUSEL */
}

/* 📍 TRACK DEL CARRUSEL - El que se mueve con las tarjetas
   🎯 BUSCAR: "services-track" para modificar movimiento */
.services-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* 🔧 VELOCIDAD TRANSICIÓN */
    will-change: transform;
}

/* 📍 TARJETA INDIVIDUAL - Cada card del carrusel
   🎯 BUSCAR: "service-card" para modificar tarjetas individuales */
.service-card {
    flex: 0 0 calc(50% - 10px);
    /* 🔧 PC: 2 TARJETAS VISIBLES */
    background: rgba(255, 255, 255, 0.05);
    /* 🔧 FONDO TARJETAS */
    border-radius: 15px;
    /* 🔧 REDONDEO TARJETAS */
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 🔧 BORDE TARJETAS */
    margin-right: 20px;
    /* 🔧 SEPARACIÓN TARJETAS */
}

/* 📍 HOVER TARJETA - Efecto al pasar mouse sobre tarjeta
   🎯 BUSCAR: "service-card:hover" para modificar efecto hover tarjetas */
.service-card:hover {
    transform: translateY(-10px);
    /* 🔧 ELEVACIÓN HOVER */
    background: rgba(255, 255, 255, 0.08);
    /* 🔧 FONDO HOVER */
    border-color: #F5DD27;
    /* 🔧 BORDE HOVER */
    box-shadow: 0 20px 40px rgba(245, 221, 39, 0.1);
    /* 🔧 SOMBRA HOVER */
}

/* 📍 IMAGEN TARJETA - Container de imágenes services
   🎯 BUSCAR: "service-image" para modificar área de imágenes */
.service-image {
    width: 100%;
    height: 424px;
    /* 🔧 PC: ALTURA IMÁGENES SERVICES */
    overflow: hidden;
    position: relative;
}

/* 📍 IMG DENTRO DE TARJETA - Las imágenes reales
   🎯 BUSCAR: "service-image img" para modificar imágenes */
.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* 📍 HOVER IMAGEN - Efecto zoom en imágenes al hover
   🎯 BUSCAR: "service-image img hover" para modificar zoom imagen */
.service-card:hover .service-image img {
    transform: scale(1.05);
    /* 🔧 ZOOM IMAGEN HOVER */
}

/* 📍 CONTENIDO TARJETA - Área de texto debajo de imagen
   🎯 BUSCAR: "service-content" para modificar área de texto */
.service-content {
    padding: 30px 25px;
    /* 🔧 PC: ESPACIADO INTERNO TEXTO */
}

/* 📍 TÍTULO TARJETA: "Desarrollo de Software" / "Electrónica propia" / "Apoyo en proyectos"
   🎯 BUSCAR: "Desarrollo de Software" para primera tarjeta
   🎯 BUSCAR: "Electrónica propia" para segunda tarjeta  
   🎯 BUSCAR: "Apoyo en proyectos" para tercera tarjeta
   🎯 BUSCAR: "service-card-title" para modificaciones generales */
.service-card-title {
    font-size: 24px;
    /* 🔧 PC: TAMAÑO TÍTULOS TARJETAS */
    color: #F5DD27;
    /* 🔧 COLOR TÍTULOS TARJETAS */
    margin-bottom: 15px;
    /* 🔧 ESPACIO DEBAJO TÍTULOS */
    font-weight: 600;
    /* 🔧 GROSOR TÍTULOS TARJETAS */
}

/* 📍 TEXTO TARJETA: Descripciones de cada servicio
   🎯 BUSCAR: "todos nuestros productos" para texto primera tarjeta
   🎯 BUSCAR: "Con garantía a largo" para texto segunda tarjeta
   🎯 BUSCAR: "Comparta con nosotros" para texto tercera tarjeta
   🎯 BUSCAR: "service-card-text" para modificaciones generales */
.service-card-text {
    color: #cccccc;
    /* 🔧 COLOR TEXTO TARJETAS */
    line-height: 1.5;
    /* 🔧 ALTURA LÍNEA TEXTO */
    font-size: 16px;
    /* 🔧 PC: TAMAÑO TEXTO TARJETAS */
}

/* =========================================================================
   🔘🔘🔘 CONTROLES CARRUSEL 🔘🔘🔘
   ========================================================================= */

/* 📍 BOTONES CARRUSEL - Los botones < y >
   🎯 BUSCAR: "carousel-btn" para modificar botones navegación */
.carousel-btn {
    background: rgba(245, 221, 39, 0.2);
    /* 🔧 FONDO BOTONES */
    border: 2px solid #F5DD27;
    /* 🔧 BORDE BOTONES */
    border-radius: 50%;
    width: 50px;
    /* 🔧 PC: TAMAÑO BOTONES */
    height: 50px;
    /* 🔧 PC: TAMAÑO BOTONES */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #F5DD27;
    /* 🔧 COLOR ICONOS BOTONES */
}

/* 📍 HOVER BOTONES CARRUSEL - Efecto al pasar mouse
   🎯 BUSCAR: "carousel-btn:hover" para modificar hover botones */
.carousel-btn:hover {
    background: #F5DD27;
    /* 🔧 FONDO HOVER BOTONES */
    color: #000000;
    /* 🔧 COLOR HOVER BOTONES */
    transform: scale(1.1);
    /* 🔧 ZOOM HOVER BOTONES */
}

/* 📍 CLICK BOTONES - Efecto al hacer click
   🎯 BUSCAR: "carousel-btn:active" para modificar click botones */
.carousel-btn:active {
    transform: scale(0.95);
    /* 🔧 EFECTO CLICK BOTONES */
}

/* 📍 INDICADORES CARRUSEL - Los puntitos debajo
   🎯 BUSCAR: "carousel-indicators" para modificar area indicadores */
.carousel-indicators {
    display: flex;
    gap: 10px;
    /* 🔧 SEPARACIÓN INDICADORES */
    justify-content: center;
    margin-top: 30px;
    /* 🔧 ESPACIO ARRIBA INDICADORES */
}

/* 📍 INDICADOR INDIVIDUAL - Cada puntito
   🎯 BUSCAR: "indicator" para modificar puntitos individuales */
.indicator {
    width: 12px;
    /* 🔧 TAMAÑO INDICADORES */
    height: 12px;
    /* 🔧 TAMAÑO INDICADORES */
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    /* 🔧 COLOR INDICADORES */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 📍 INDICADOR ACTIVO - El puntito de la slide actual
   🎯 BUSCAR: "indicator.active" para modificar indicador activo */
.indicator.active {
    background: #F5DD27;
    /* 🔧 COLOR INDICADOR ACTIVO */
    transform: scale(1.2);
    /* 🔧 ZOOM INDICADOR ACTIVO */
}

/* 📍 HOVER INDICADORES - Efecto al pasar mouse sobre puntitos
   🎯 BUSCAR: "indicator:hover" para modificar hover indicadores */
.indicator:hover {
    background: rgba(245, 221, 39, 0.7);
    /* 🔧 COLOR HOVER INDICADORES */
}

/* =========================================================================
   📱📱📱 RESPONSIVE HOME Y SERVICES - PC GRANDES 📱📱📱
   ========================================================================= */

/* 📍 NOTEBOOKS GRANDES Y MONITORES ≤1440px
   🎯 BUSCAR: "1440px" para encontrar este breakpoint específico */
@media (max-width: 1440px) {

    /* 📍 TÍTULO PRINCIPAL PC GRANDE: "Electronics and software..."
       🎯 BUSCAR: "Electronics 1440" para cambiar en pantallas grandes */
    .main-title {
        font-size: 60px;
        /* 🔧 1440px: TAMAÑO TÍTULO PRINCIPAL */
    }

    .subtitle {
        font-size: 28px;
        /* 🔧 1440px: TAMAÑO SUBTÍTULO */
    }

    .video-container {
        max-width: 650px;
        /* 🔧 1440px: ANCHO VIDEO */
        height: 390px;
        /* 🔧 1440px: ALTURA VIDEO */
    }

    /* 📍 TÍTULO DESCRIPCIÓN 1440px: "Nova_Guard..."
       🎯 BUSCAR: "Nova_Guard 1440" para cambiar en pantallas grandes */
    .description-title {
        font-size: 34px;
        /* 🔧 1440px: TAMAÑO TÍTULO DESCRIPCIÓN */
    }

    .description-text {
        font-size: 19px;
        /* 🔧 1440px: TAMAÑO TEXTO DESCRIPCIÓN */
    }

    /* 📍 TÍTULO SERVICES 1440px: "Algunos de nuestros..."
       🎯 BUSCAR: "services 1440" para cambiar título services */
    .services-title {
        font-size: 50px;
        color: #ffffff;
        /* 🔧 COLOR TÍTULO SERVICES (amarillo) */
        margin-bottom: 30px;
        /* 🔧 1440px: TAMAÑO TÍTULO SERVICES */
    }
}

/* 📍 TABLETS Y PANTALLAS MEDIANAS ≤1200px  
   🎯 BUSCAR: "1200px" para encontrar este breakpoint específico */
@media (max-width: 1200px) {

    /* 📍 TÍTULO PRINCIPAL TABLET: "Electronics and software..."
       🎯 BUSCAR: "Electronics 1200" para cambiar en tablets */
    .main-title {
        font-size: 50px;
        color: #ffffff;
        /* 🔧 1200px: TAMAÑO TÍTULO PRINCIPAL */
    }

    .subtitle {
        font-size: 28px;
        /* 🔧 1200px: TAMAÑO SUBTÍTULO */
    }

    .video-container {
        max-width: 600px;
        /* 🔧 1200px: ANCHO VIDEO */
        height: 360px;
        /* 🔧 1200px: ALTURA VIDEO */
    }

    /* 📍 TÍTULO DESCRIPCIÓN 1200px: "Nova_Guard..."
       🎯 BUSCAR: "Nova_Guard 1200" para cambiar en tablets */
    .description-title {
        font-size: 32px;
        /* 🔧 1200px: TAMAÑO TÍTULO DESCRIPCIÓN */
    }

    .description-text {
        font-size: 18px;
        /* 🔧 1200px: TAMAÑO TEXTO DESCRIPCIÓN */
    }

    /* 📍 TÍTULO SERVICES 1200px: "Algunos de nuestros..."
       🎯 BUSCAR: "services 1200" para cambiar título services */
    .services-title {
        font-size: 48px;
        /* 🔧 1200px: TAMAÑO TÍTULO SERVICES */
    }
}

/* =========================================================================
   📱📱📱 RESPONSIVE MÓVIL Y TABLET ≤768px 📱📱📱
   ========================================================================= */

@media (max-width: 768px) {

    /* 📍 CONTENEDOR HOME MÓVIL - Ajustes generales
       🎯 BUSCAR: "home móvil" para cambios móvil HOME */
    .home-container {
        padding: 20px 15px;
        /* 🔧 MÓVIL: ESPACIADO HOME */
    }

    /* 📍 TÍTULO PRINCIPAL MÓVIL: "Electronics and software..."
       🎯 BUSCAR: "Electronics móvil" para cambiar en móviles */
    .main-title {
        font-size: 42px;
        /* 🔧 MÓVIL: TAMAÑO TÍTULO PRINCIPAL */
    }

    .subtitle {
        font-size: 20px;
        /* 🔧 MÓVIL: TAMAÑO SUBTÍTULO */
        margin-bottom: 40px;
        /* 🔧 MÓVIL: ESPACIO SUBTÍTULO */
    }

    /* 📍 VIDEO MÓVIL - Ajustes para pantallas pequeñas
       🎯 BUSCAR: "video móvil" para cambios video móvil */
    .video-container {
        max-width: 100%;
        /* 🔧 MÓVIL: VIDEO ANCHO COMPLETO */
        height: 300px;
        /* 🔧 MÓVIL: ALTURA VIDEO */
    }

    .play-button {
        width: 80px;
        /* 🔧 MÓVIL: TAMAÑO BOTÓN PLAY */
        height: 80px;
        /* 🔧 MÓVIL: TAMAÑO BOTÓN PLAY */
    }

    .play-button::after {
        border-left: 24px solid #333;
        /* 🔧 MÓVIL: TAMAÑO FLECHA */
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
    }

    /* 📍 DESCRIPCIÓN MÓVIL: "Nova_Guard..."
       🎯 BUSCAR: "Nova_Guard móvil" para cambios descripción móvil */
    .description-title {
        font-size: 26px;
        /* 🔧 MÓVIL: TAMAÑO TÍTULO DESCRIPCIÓN */
    }

    .description-text {
        font-size: 16px;
        /* 🔧 MÓVIL: TAMAÑO TEXTO DESCRIPCIÓN */
    }

    /* 📍 SERVICES MÓVIL - Ajustes sección services
       🎯 BUSCAR: "services móvil" para cambios services móvil */
    .services-section {
        padding: 40px 15px;

        /* 🔧 MÓVIL: ESPACIADO SERVICES */
    }

    .services-title {
        font-size: 36px;
        color: #ffffff;
        /* 🔧 MÓVIL: TAMAÑO TÍTULO SERVICES */
        margin-bottom: 20px;
        /* 🔧 MÓVIL: ESPACIO TÍTULO */
    }

    /* 📍 CARRUSEL MÓVIL - Cambios importantes para móvil
       🎯 BUSCAR: "carrusel móvil" para ajustes carrusel móvil */
    .services-carousel-wrapper {
        gap: 15px;
        /* 🔧 MÓVIL: SEPARACIÓN BOTONES */
    }

    .service-card {
        flex: 0 0 100%;
        /* 🔧 MÓVIL: 1 TARJETA VISIBLE */
        margin-right: 0;
        /* 🔧 MÓVIL: SIN MARGEN DERECHA */
    }

    .service-image {
        height: 300px;
        /* 🔧 MÓVIL: ALTURA IMAGEN SERVICES */
    }

    .service-content {
        padding: 25px 20px;
        /* 🔧 MÓVIL: ESPACIADO TEXTO */
    }

    .carousel-btn {
        width: 40px;
        /* 🔧 MÓVIL: TAMAÑO BOTONES CARRUSEL */
        height: 40px;
        /* 🔧 MÓVIL: TAMAÑO BOTONES CARRUSEL */
    }
}

/* =========================================================================
   📱📱📱 RESPONSIVE MÓVIL PEQUEÑO ≤480px 📱📱📱
   ========================================================================= */

@media (max-width: 480px) {

    /* 📍 HOME MÓVIL PEQUEÑO - Ajustes para móviles pequeños
       🎯 BUSCAR: "home 480" para cambios móvil pequeño */
    .home-container {
        padding: 10px 15px 30px;
        /* 🔧 480px: ESPACIADO HOME PEQUEÑO */
    }

    /* 📍 TÍTULO PRINCIPAL MÓVIL PEQUEÑO: "Electronics and software..."
       🎯 BUSCAR: "Electronics 480" para cambiar en móviles pequeños */
    .main-title {
        font-size: 32px;
        /* 🔧 480px: TAMAÑO TÍTULO PRINCIPAL */
        line-height: 1.2;
        /* 🔧 480px: ALTURA LÍNEA TÍTULO */
    }

    .subtitle {
        font-size: 18px;
        /* 🔧 480px: TAMAÑO SUBTÍTULO */
    }

    /* 📍 VIDEO MÓVIL PEQUEÑO - Ajustes video para móviles pequeños
       🎯 BUSCAR: "video 480" para cambios video móvil pequeño */
    .video-container {
        height: 250px;
        /* 🔧 480px: ALTURA VIDEO */
    }

    .play-button {
        width: 70px;
        /* 🔧 480px: TAMAÑO BOTÓN PLAY */
        height: 70px;
        /* 🔧 480px: TAMAÑO BOTÓN PLAY */
    }

    .play-button::after {
        border-left: 20px solid #333;
        /* 🔧 480px: TAMAÑO FLECHA */
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
    }

    /* 📍 DESCRIPCIÓN MÓVIL PEQUEÑO: "Nova_Guard..."
       🎯 BUSCAR: "Nova_Guard 480" para cambios descripción móvil pequeño */
    .description-title {
        font-size: 22px;
        /* 🔧 480px: TAMAÑO TÍTULO DESCRIPCIÓN */
    }

    .description-text {
        font-size: 15px;
        /* 🔧 480px: TAMAÑO TEXTO DESCRIPCIÓN */
    }

    /* 📍 CHECKMARK MÓVIL PEQUEÑO - El círculo ✓ en móviles pequeños
       🎯 BUSCAR: "checkmark 480" para cambiar checkmark móvil pequeño */
    .checkmark {
        width: 26px;
        /* 🔧 480px: TAMAÑO CHECKMARK */
        height: 26px;
        /* 🔧 480px: TAMAÑO CHECKMARK */
        font-size: 14px;
        /* 🔧 480px: TAMAÑO SÍMBOLO ✓ */
    }

    /* 📍 SERVICES MÓVIL PEQUEÑO - Ajustes services para móviles pequeños
       🎯 BUSCAR: "services 480" para cambios services móvil pequeño */
    .services-section {
        padding: 30px 15px;
        /* 🔧 480px: ESPACIADO SERVICES */
    }

    .services-title {
        font-size: 28px;
        /* 🔧 480px: TAMAÑO TÍTULO SERVICES */
        margin-bottom: 20px;
        /* 🔧 480px: ESPACIO TÍTULO SERVICES */
    }

    /* 📍 TARJETAS MÓVIL PEQUEÑO - Ajustes tarjetas carrusel
       🎯 BUSCAR: "tarjetas 480" para cambios tarjetas móvil pequeño */
    .service-card-title {
        font-size: 20px;
        /* 🔧 480px: TAMAÑO TÍTULOS TARJETAS */
    }

    .service-card-text {
        font-size: 14px;
        /* 🔧 480px: TAMAÑO TEXTO TARJETAS */
    }

    .service-content {
        padding: 20px 15px;
        /* 🔧 480px: ESPACIADO TEXTO TARJETAS */
    }

    .service-image {
        height: 250px;
        /* 🔧 480px: ALTURA IMAGEN SERVICES */
    }
}

/* =========================================================================
   ✨✨✨ ANIMACIONES GLOBALES ✨✨✨
   🎯 BUSCAR: "fadeInUp" para encontrar animación principal
   ========================================================================= */

/* 📍 ANIMACIÓN ENTRADA DESDE IZQUIERDA - Logo y menú
   🎯 BUSCAR: "slideInFromLeft" para modificar animación lateral */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 📍 ANIMACIÓN ENTRADA DESDE ABAJO - Contenido principal
   🎯 BUSCAR: "fadeInUp" para modificar animación vertical */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 📍 ANIMACIÓN EXPANSIÓN ANCHO - Para líneas y barras
   🎯 BUSCAR: "expandWidth" para modificar animación ancho */
@keyframes expandWidth {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* =========================================================================
   🔚🔚🔚 FIN PARTE 1 - HOME + SERVICES + DEBUG 🔚🔚🔚
   
   📋 PRÓXIMA PARTE 2 INCLUIRÁ:
   - 📞 Sección CONTACT completa y documentada
   - 📱 Responsive adicional y media queries
   - 🎨 Indicadores de responsive
   - 🔄 Orientación y optimizaciones móvil
   ========================================================================= */

/* 🎨 SECTIONS.CSS - PARTE 2: CONTACT + RESPONSIVE + INDICADORES
   📝 SÚPER DOCUMENTADO PARA CAMBIOS RÁPIDOS Y PRECISOS
   🔍 BUSCAR POR TEXTO ESPECÍFICO PARA ENCONTRAR LO QUE NECESITAS
   ========================================================================= */

/* =========================================================================
   📞📞📞 SECCIÓN CONTACT - COMPLETA Y DOCUMENTADA 📞📞📞
   ========================================================================= */

/* 📍 CONTENEDOR PRINCIPAL CONTACT - Fondo negro y centrado
   🎯 BUSCAR: "contact-section" para modificar la sección completa */
.contact-section {
    width: 100%;
    background-color: #000000;
    /* 🔧 COLOR FONDO CONTACT */
    padding: 80px 20px;
    /* 🔧 PC: ESPACIADO CONTACT */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 📍 WRAPPER INTERNO CONTACT - Ancho máximo del contenido
   🎯 BUSCAR: "contact-container" para modificar ancho contact */
.contact-container {
    width: 100%;
    max-width: 1200px;
    /* 🔧 ANCHO MÁXIMO CONTACT */
    margin: 0 auto;
}

/* 📍 HEADER CONTACT - Área de títulos principales
   🎯 BUSCAR: "contact-header" para modificar área títulos */
.contact-header {
    text-align: center;
    margin-bottom: 40px;
    /* 🔧 ESPACIO DEBAJO TÍTULOS */
}

/* 📍 TÍTULO PRINCIPAL CONTACT: "Let's work together!!!" / "Trabajemos juntos!!!"
   🎯 BUSCAR: "work together" para cambiar este título específico
   🎯 BUSCAR: "Trabajemos juntos" para versión español
   🎯 BUSCAR: "contact-title" para modificaciones generales */
.contact-title {
    font-size: 56px;
    /* 🔧 PC: TAMAÑO TÍTULO CONTACT */
    color: #F5DD27;
    /* 🔧 COLOR TÍTULO CONTACT (amarillo) */
    margin-bottom: 20px;
    /* 🔧 ESPACIO DEBAJO TÍTULO */
    font-weight: 600;
    /* 🔧 GROSOR TÍTULO CONTACT */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

/* 📍 TÍTULO CONTACT ANIMADO - Clase que se agrega por JavaScript
   🎯 BUSCAR: "contact-title.animate" para modificar animación título */
.contact-title.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 📍 SUBTÍTULO CONTACT: "get in touch with us." / "tome contacto con nosotros."
   🎯 BUSCAR: "get in touch" para cambiar este subtítulo inglés
   🎯 BUSCAR: "tome contacto" para versión español  
   🎯 BUSCAR: "contact-subtitle" para modificaciones generales */
.contact-subtitle {
    font-size: 24px;
    /* 🔧 PC: TAMAÑO SUBTÍTULO CONTACT */
    color: #ffffff;
    /* 🔧 COLOR SUBTÍTULO CONTACT */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease 0.2s;
}

/* 📍 SUBTÍTULO CONTACT ANIMADO - Clase que se agrega por JavaScript
   🎯 BUSCAR: "contact-subtitle.animate" para modificar animación subtítulo */
.contact-subtitle.animate {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================================
   📋📋📋 CONTENIDO PRINCIPAL CONTACT 📋📋📋
   ========================================================================= */

/* 📍 GRID PRINCIPAL CONTACT - Layout dos columnas
   🎯 BUSCAR: "contact-content" para modificar layout principal */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 🔧 PC: LAYOUT 50%-50% */
    gap: 80px;
    /* 🔧 PC: SEPARACIÓN COLUMNAS */
    align-items: center;
}

/* 📍 COLUMNA IZQUIERDA - Información de contacto
   🎯 BUSCAR: "contact-info" para modificar columna información */
.contact-info {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease 0.4s;
}

/* 📍 INFO CONTACT ANIMADA - Clase que se agrega por JavaScript
   🎯 BUSCAR: "contact-info.animate" para modificar animación info */
.contact-info.animate {
    opacity: 1;
    transform: translateX(0);
}

/* 📍 ITEM INDIVIDUAL CONTACT - Cada bloque de información
   🎯 BUSCAR: "contact-item" para modificar bloques individuales */
.contact-item {
    margin-bottom: 40px;
    /* 🔧 SEPARACIÓN ENTRE ITEMS */
}

.contact-item:last-child {
    margin-bottom: 0;
    /* 🔧 ÚLTIMO ITEM SIN MARGEN */
}

/* 📍 TÍTULOS DE ITEMS: "Mobile Whatsapp" / "Email"
   🎯 BUSCAR: "Mobile Whatsapp" para cambiar título teléfono
   🎯 BUSCAR: "Email" para cambiar título email
   🎯 BUSCAR: "contact-item-title" para modificaciones generales */
.contact-item-title {
    font-size: 24px;
    /* 🔧 PC: TAMAÑO TÍTULOS ITEMS */
    color: #F5DD27;
    /* 🔧 COLOR TÍTULOS ITEMS (amarillo) */
    margin-bottom: 10px;
    /* 🔧 ESPACIO DEBAJO TÍTULOS */
    font-weight: 600;
    /* 🔧 GROSOR TÍTULOS ITEMS */
}

/* 📍 TEXTO DE ITEMS: Números de teléfono y emails
   🎯 BUSCAR: "(54)011-2253-6833" para cambiar número WhatsApp
   🎯 BUSCAR: "info@nova-argentina" para cambiar email principal
   🎯 BUSCAR: "rbarros@nova-argentina" para cambiar email secundario
   🎯 BUSCAR: "contact-item-text" para modificaciones generales */
.contact-item-text {
    font-size: 20px;
    /* 🔧 PC: TAMAÑO TEXTO ITEMS */
    color: #ffffff;
    /* 🔧 COLOR TEXTO ITEMS */
    font-weight: 700;
    /* 🔧 GROSOR TEXTO ITEMS */
    margin-bottom: 5px;
    /* 🔧 ESPACIO ENTRE LÍNEAS */
    line-height: 1.4;
    /* 🔧 ALTURA LÍNEA TEXTO */
}

/* =========================================================================
   📱📱📱 WHATSAPP ESPECÍFICO 📱📱📱
   ========================================================================= */

/* 📍 CONTENEDOR WHATSAPP - Teléfono + icono
   🎯 BUSCAR: "contact-whatsapp" para modificar área WhatsApp */
.contact-whatsapp {
    display: flex;
    align-items: center;
    gap: 15px;
    /* 🔧 SEPARACIÓN NÚMERO-ICONO */
}

/* 📍 LINK WHATSAPP - El enlace al chat
   🎯 BUSCAR: "whatsapp-link" para modificar enlace WhatsApp */
.whatsapp-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* 📍 HOVER LINK WHATSAPP - Efecto al pasar mouse
   🎯 BUSCAR: "whatsapp-link:hover" para modificar hover WhatsApp */
.whatsapp-link:hover {
    transform: scale(1.1);
    /* 🔧 ZOOM HOVER WHATSAPP */
}

/* 📍 ICONO WHATSAPP - La imagen del logo WhatsApp
   🎯 BUSCAR: "whatsapp-icon" para modificar icono WhatsApp */
.whatsapp-icon {
    width: 32px;
    /* 🔧 TAMAÑO ICONO WHATSAPP */
    height: 32px;
    /* 🔧 TAMAÑO ICONO WHATSAPP */
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 📍 HOVER ICONO WHATSAPP - Efecto glow verde
   🎯 BUSCAR: "whatsapp-icon:hover" para modificar glow WhatsApp */
.whatsapp-icon:hover {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    /* 🔧 GLOW VERDE */
}

/* 📍 WEBSITE CONTACT: "www.NOVA-ARGENTINA.com.ar"
   🎯 BUSCAR: "NOVA-ARGENTINA.com.ar" para cambiar website
   🎯 BUSCAR: "contact-website" para modificaciones generales */
.contact-website {
    font-size: 18px;
    /* 🔧 PC: TAMAÑO TEXTO WEBSITE */
    color: #F5DD27;
    /* 🔧 COLOR TEXTO WEBSITE */
    font-weight: 700;
    /* 🔧 GROSOR TEXTO WEBSITE */
    text-transform: uppercase;
    /* 🔧 MAYÚSCULAS WEBSITE */
    letter-spacing: 0.1em;
    /* 🔧 ESPACIADO LETRAS */
}

/* =========================================================================
   🖼️🖼️🖼️ IMAGEN CONTACT 🖼️🖼️🖼️
   ========================================================================= */

/* 📍 COLUMNA DERECHA - Imagen del técnico
   🎯 BUSCAR: "contact-image" para modificar columna imagen */
.contact-image {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease 0.6s;
    border-radius: 15px;
    /* 🔧 REDONDEO IMAGEN CONTACT */
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    /* 🔧 SOMBRA IMAGEN */
}

/* 📍 IMAGEN CONTACT ANIMADA - Clase que se agrega por JavaScript
   🎯 BUSCAR: "contact-image.animate" para modificar animación imagen */
.contact-image.animate {
    opacity: 1;
    transform: translateX(0);
}

/* 📍 IMG TÉCNICO - La imagen real del técnico
   🎯 BUSCAR: "contact-image img" para modificar imagen técnico */
.contact-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* 📍 HOVER IMAGEN TÉCNICO - Efecto zoom sutil
   🎯 BUSCAR: "contact-image:hover" para modificar hover imagen */
.contact-image:hover img {
    transform: scale(1.02);
    /* 🔧 ZOOM SUTIL IMAGEN */
}

/* =========================================================================
   📱📱📱 RESPONSIVE CONTACT - NOTEBOOKS Y MONITORES 📱📱📱
   ========================================================================= */

/* 📍 NOTEBOOKS GRANDES Y MONITORES ≤1440px
   🎯 BUSCAR: "contact 1440" para encontrar ajustes contact 1440px */

@media (max-width: 1440px) {
    .home-container {
        padding: 20px 15px 60px 15px;
        /* ← CAMBIAR ESTE */
        /* En lugar de: padding: 20px 15px; */
    }

    /* 📍 TÍTULO CONTACT 1440px: "Let's work together!!!"
       🎯 BUSCAR: "work together 1440" para cambiar título contact 1440 */
    .contact-title {
        font-size: 52px;
        /* 🔧 1440px: TAMAÑO TÍTULO CONTACT */
    }

    .contact-subtitle {
        font-size: 22px;
        /* 🔧 1440px: TAMAÑO SUBTÍTULO CONTACT */
    }

    .contact-item-title {
        font-size: 22px;
        /* 🔧 1440px: TAMAÑO TÍTULOS ITEMS */
    }

    .contact-item-text {
        font-size: 19px;
        /* 🔧 1440px: TAMAÑO TEXTO ITEMS */
    }
}

/* 📍 TABLETS Y PANTALLAS MEDIANAS ≤1200px
   🎯 BUSCAR: "contact 1200" para encontrar ajustes contact 1200px */
@media (max-width: 1200px) {

    /* 📍 TÍTULO CONTACT 1200px: "Let's work together!!!"
       🎯 BUSCAR: "work together 1200" para cambiar título contact 1200 */
    .home-container {
        padding: 20px 15px 60px 15px;
        /* ← CAMBIAR ESTE */
        /* En lugar de: padding: 20px 15px; */
    }

    .contact-title {
        font-size: 48px;
        /* 🔧 1200px: TAMAÑO TÍTULO CONTACT */
    }

    .contact-subtitle {
        font-size: 20px;
        /* 🔧 1200px: TAMAÑO SUBTÍTULO CONTACT */
    }
}

/* =========================================================================
   📱📱📱 RESPONSIVE CONTACT - MÓVIL Y TABLET ≤768px 📱📱📱
   ========================================================================= */

@media (max-width: 768px) {

    /* 📍 CONTACT MÓVIL - Ajustes generales contact móvil
       🎯 BUSCAR: "contact móvil" para cambios contact móvil */
    .contact-section {
        padding: 40px 20px;
        /* 🔧 MÓVIL: ESPACIADO CONTACT */
    }

    /* 📍 TÍTULO CONTACT MÓVIL: "Let's work together!!!"
       🎯 BUSCAR: "work together móvil" para cambiar título contact móvil */
    .contact-title {
        font-size: 36px;
        /* 🔧 MÓVIL: TAMAÑO TÍTULO CONTACT */
    }

    .contact-subtitle {
        font-size: 18px;
        /* 🔧 MÓVIL: TAMAÑO SUBTÍTULO CONTACT */
    }

    /* 📍 LAYOUT MÓVIL - Cambio a una columna
       🎯 BUSCAR: "contact layout móvil" para cambios layout móvil */
    .contact-content {
        grid-template-columns: 1fr;
        /* 🔧 MÓVIL: LAYOUT 1 COLUMNA */
        gap: 50px;
        /* 🔧 MÓVIL: SEPARACIÓN ELEMENTOS */
    }

    .contact-item-title {
        font-size: 20px;
        /* 🔧 MÓVIL: TAMAÑO TÍTULOS ITEMS */
    }

    .contact-item-text {
        font-size: 18px;
        /* 🔧 MÓVIL: TAMAÑO TEXTO ITEMS */
    }

    .contact-website {
        font-size: 16px;
        /* 🔧 MÓVIL: TAMAÑO TEXTO WEBSITE */
    }

    /* 📍 ANIMACIONES MÓVIL - Cambio de animaciones laterales a verticales
       🎯 BUSCAR: "animaciones móvil" para cambios animaciones móvil */
    .contact-info,
    .contact-image {
        transform: translateY(30px);
    }

    .contact-info.animate,
    .contact-image.animate {
        transform: translateY(0);
    }
}

/* =========================================================================
   📱📱📱 RESPONSIVE CONTACT - MÓVIL PEQUEÑO ≤480px 📱📱📱
   ========================================================================= */

@media (max-width: 480px) {

    /* 📍 CONTACT MÓVIL PEQUEÑO - Ajustes para móviles pequeños
       🎯 BUSCAR: "contact 480" para cambios contact móvil pequeño */
    .contact-section {
        padding: 30px 20px;
        /* 🔧 480px: ESPACIADO CONTACT */
    }

    /* 📍 TÍTULO CONTACT MÓVIL PEQUEÑO: "Let's work together!!!"
       🎯 BUSCAR: "work together 480" para cambiar título contact 480 */
    .contact-title {
        font-size: 28px;
        /* 🔧 480px: TAMAÑO TÍTULO CONTACT */
    }

    .contact-subtitle {
        font-size: 16px;
        /* 🔧 480px: TAMAÑO SUBTÍTULO CONTACT */
    }

    .contact-item-title {
        font-size: 18px;
        /* 🔧 480px: TAMAÑO TÍTULOS ITEMS */
    }

    .contact-item-text {
        font-size: 16px;
        /* 🔧 480px: TAMAÑO TEXTO ITEMS */
    }

    .contact-website {
        font-size: 14px;
        /* 🔧 480px: TAMAÑO TEXTO WEBSITE */
    }
}

/* =========================================================================
   🎯🎯🎯 INDICADOR VISUAL DE RESPONSIVE 🎯🎯🎯
   🎯 BUSCAR: "indicador responsive" para encontrar sistema indicadores
   ========================================================================= */

/* 📍 INDICADOR BASE - Muestra el breakpoint actual
   🎯 BUSCAR: "body::after" para modificar indicador principal */

body::after {
    content: 'PC';
    /* 🔧 TEXTO INDICADOR PC */
    position: fixed;
    top: 5px;
    /* 🔧 POSICIÓN VERTICAL INDICADOR */
    right: 5px;
    /* 🔧 POSICIÓN HORIZONTAL INDICADOR */
    background: rgba(255, 0, 0, 0.8);
    /* 🔧 COLOR FONDO PC (rojo) */
    color: white;
    /* 🔧 COLOR TEXTO INDICADOR */
    padding: 4px 8px;
    /* 🔧 ESPACIADO INTERNO INDICADOR */
    border-radius: 4px;
    /* 🔧 REDONDEO INDICADOR */
    z-index: 9999;
    /* 🔧 NIVEL Z INDICADOR */
    font-size: 12px;
    /* 🔧 TAMAÑO TEXTO INDICADOR */
    font-family: 'Courier New', monospace;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 📍 INDICADOR 1440px - Para notebooks grandes
   🎯 BUSCAR: "≤1440px" para cambiar indicador 1440 */
@media (max-width: 1440px) {
    body::after {
        content: '≤1440px';
        /* 🔧 TEXTO INDICADOR 1440 */
        background: rgba(128, 0, 128, 0.8);
        /* 🔧 COLOR 1440 (púrpura) */
    }
}

/* 📍 INDICADOR 1200px - Para tablets grandes
   🎯 BUSCAR: "≤1200px" para cambiar indicador 1200 */
@media (max-width: 1200px) {
    body::after {
        content: '≤1200px';
        /* 🔧 TEXTO INDICADOR 1200 */
        background: rgba(255, 165, 0, 0.8);
        /* 🔧 COLOR 1200 (naranja) */
    }
}

/* 📍 INDICADOR 768px - Para tablets y móviles
   🎯 BUSCAR: "≤768px" para cambiar indicador 768 */
@media (max-width: 768px) {
    body::after {
        content: '≤768px';
        /* 🔧 TEXTO INDICADOR 768 */
        background: rgba(255, 255, 0, 0.8);
        /* 🔧 COLOR 768 (amarillo) */
        color: black;
        /* 🔧 TEXTO NEGRO PARA AMARILLO */
    }
}

/* 📍 INDICADOR 480px - Para móviles pequeños
   🎯 BUSCAR: "≤480px" para cambiar indicador 480 */
@media (max-width: 480px) {
    body::after {
        content: '≤480px';
        /* 🔧 TEXTO INDICADOR 480 */
        background: rgba(0, 128, 0, 0.8);
        /* 🔧 COLOR 480 (verde) */
    }
}

/* =========================================================================
   📱📱📱 ORIENTACIÓN VERTICAL FORZADA 📱📱📱
   🎯 BUSCAR: "orientación vertical" para encontrar sistema orientación
   ========================================================================= */

/* 📍 OVERLAY ORIENTACIÓN - Pantalla que aparece en landscape móvil
   🎯 BUSCAR: "orientation-overlay" para modificar overlay orientación */
.orientation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #000000 0%, #1e2328 100%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    /* 🔧 Z-INDEX OVERLAY ORIENTACIÓN */
    text-align: center;
    padding: 20px;
    /* 🔧 ESPACIADO OVERLAY */
}

/* 📍 MENSAJE ORIENTACIÓN - Texto "Rotate your device"
   🎯 BUSCAR: "orientation-message" para cambiar mensaje orientación */
.orientation-message {
    color: #F5DD27;
    /* 🔧 COLOR MENSAJE ORIENTACIÓN */
    font-size: 24px;
    /* 🔧 TAMAÑO MENSAJE ORIENTACIÓN */
    font-weight: 600;
    /* 🔧 GROSOR MENSAJE ORIENTACIÓN */
    margin-bottom: 20px;
    /* 🔧 ESPACIO DEBAJO MENSAJE */
    line-height: 1.4;
    /* 🔧 ALTURA LÍNEA MENSAJE */
}

/* 📍 ICONO ORIENTACIÓN - Icono del teléfono rotando
   🎯 BUSCAR: "orientation-icon" para modificar icono orientación */
.orientation-icon {
    font-size: 60px;
    /* 🔧 TAMAÑO ICONO ORIENTACIÓN */
    color: #F5DD27;
    /* 🔧 COLOR ICONO ORIENTACIÓN */
    margin-bottom: 30px;
    /* 🔧 ESPACIO DEBAJO ICONO */
    animation: rotatePhone 2s ease-in-out infinite;
}

/* 📍 ANIMACIÓN ROTAR TELÉFONO - El icono que gira
   🎯 BUSCAR: "rotatePhone" para modificar animación rotación */
@keyframes rotatePhone {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(90deg);
    }
}

/* 📍 MOSTRAR OVERLAY EN LANDSCAPE - Solo para móviles y tablets
   🎯 BUSCAR: "landscape móvil" para modificar detección landscape */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .orientation-overlay {
        display: flex;
        /* 🔧 MOSTRAR OVERLAY EN LANDSCAPE */
    }

    /* 📍 OCULTAR CONTENIDO EN LANDSCAPE - Todo excepto overlay
       🎯 BUSCAR: "ocultar landscape" para modificar ocultación contenido */
    body>*:not(.orientation-overlay) {
        display: none !important;
    }
}

/* =========================================================================
   📱📱📱 OPTIMIZACIÓN VISTA VERTICAL 📱📱📱
   🎯 BUSCAR: "optimización vertical" para encontrar optimizaciones móvil
   ========================================================================= */

/* 📍 OPTIMIZACIÓN PORTRAIT - Solo en vista vertical móvil
   🎯 BUSCAR: "portrait móvil" para optimizaciones portrait */
@media screen and (max-width: 768px) and (orientation: portrait) {

    /* 📍 PREVENIR SCROLL HORIZONTAL - Evitar scroll lateral accidental
       🎯 BUSCAR: "overflow-x" para control scroll horizontal */
    body {
        overflow-x: hidden;
        /* 🔧 SIN SCROLL HORIZONTAL */
    }

    /* 📍 PREVENIR ZOOM ACCIDENTAL - Evitar zoom al rotar o tocar
       🎯 BUSCAR: "text-size-adjust" para control zoom automático */
    html {
        -webkit-text-size-adjust: 100%;
        /* 🔧 SIN ZOOM AUTOMÁTICO iOS */
        -ms-text-size-adjust: 100%;
        /* 🔧 SIN ZOOM AUTOMÁTICO IE */
    }
}

/* =========================================================================
   📏📏📏 RESPONSIVE ADICIONAL - BREAKPOINTS INTERMEDIOS 📏📏📏
   🎯 BUSCAR: "breakpoints intermedios" para encontrar puntos adicionales
   ========================================================================= */

/* 📍 TABLETS MEDIANOS 1024px - iPad landscape
   🎯 BUSCAR: "1024px" para encontrar tablet medio */
@media (max-width: 1024px) {
    .main-title {
        font-size: 58px;
        /* 🔧 1024px: TAMAÑO TÍTULO PRINCIPAL */
    }

    .services-title {
        font-size: 46px;
        /* 🔧 1024px: TAMAÑO TÍTULO SERVICES */
    }

    .contact-title {
        font-size: 46px;
        /* 🔧 1024px: TAMAÑO TÍTULO CONTACT */
    }
}

/* 📍 TABLETS VERTICALES 834px - iPad portrait
   🎯 BUSCAR: "834px" para encontrar tablet vertical */
@media (max-width: 834px) {
    .main-title {
        font-size: 50px;
        /* 🔧 834px: TAMAÑO TÍTULO PRINCIPAL */
    }

    .services-title {
        font-size: 42px;
        /* 🔧 834px: TAMAÑO TÍTULO SERVICES */
    }

    .contact-title {
        font-size: 42px;
        /* 🔧 834px: TAMAÑO TÍTULO CONTACT */
    }

    /* 📍 CONTACT LAYOUT 834px - Cambiar a una columna antes
       🎯 BUSCAR: "contact 834" para layout contact tablet */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

/* 🚫 OCULTAR INDICADOR RESPONSIVE */
body::after {
    display: none !important;
}

/* =========================================================================
   🔚🔚🔚 FIN PARTE 2 - CONTACT + RESPONSIVE + INDICADORES 🔚🔚🔚
   
   ✅ ARCHIVOS COMPLETOS:
   - PARTE 1: HOME + SERVICES + DEBUG
   - PARTE 2: CONTACT + RESPONSIVE + INDICADORES
   
   📋 PARA USAR:
   1. Reemplazar sections.css con PARTE 1 + PARTE 2 combinadas
   2. Activar DEBUG cambiando "none" por "3px solid color" en :root
   3. Buscar texto específico para encontrar elementos rápidamente
   ========================================================================= */