/* ========================================================
   ARCHIVO RESPONSIVE - AJUSTES PARA DISPOSITIVOS MÓVILES
   ======================================================== */

/* ==================== TABLETAS (768px - 1024px) ==================== */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Navegación en tableta */
    .neon-nav {
        padding: 18px 40px;
    }
    
    .neon-nav ul {
        gap: 25px;
    }
    
    /* Hero en tableta */
    .nike-hero {
        padding: 50px 40px;
    }
    
    .hero-content {
        padding: 50px 50px;
    }
    
    .hero-content h1 {
        font-size: 4.5rem;
    }
    
    /* Botones más grandes en tableta */
    .nike-capsule,
    .nike-btn-secondary {
        padding: 16px 40px;
        font-size: 0.95rem;
    }
}

/* ==================== MÓVILES Y TABLETAS PEQUEÑAS (hasta 768px) ==================== */
@media (max-width: 768px) {
    /* Ocultar elementos en móvil */
    .hide-mobile {
        display: none !important;
    }
    
    /* Texto optimizado para móvil */
    body {
        font-size: 15px;
        line-height: 1.6;
        overflow-x: hidden;
    }
    
    /* Espaciado reducido */
    section {
        padding: 40px 20px !important;
        margin-top: 20px !important;
        border-radius: 20px !important;
    }
    
    /* Navegación móvil mejorada */
    .neon-nav {
        padding: 12px 15px;
        gap: 12px;
    }
    
    .neon-nav .logo {
        font-size: 1rem;
    }
    
    .neon-nav ul {
        gap: 6px;
        overflow-x: auto;
    }
    
    .neon-nav a {
        padding: 7px 12px;
        font-size: 0.75rem;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
    }
    
    /* Hero optimizado para móvil */
    .nike-hero {
        min-height: 70vh;
        padding: 30px 15px;
    }
    
    .hero-content {
        padding: 35px 25px;
        border-radius: 20px;
    }
    
    .hero-content h4 {
        font-size: 0.75rem;
        letter-spacing: 2px;
        margin-bottom: 12px;
    }
    
    .hero-content h1 {
        font-size: 2.8rem;
        line-height: 1.15;
        margin-bottom: 18px;
    }
    
    .hero-content p {
        font-size: 0.95rem;
        line-height: 1.65;
        margin-bottom: 30px;
    }
    
    .hero-btns {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    
    .hero-btns button {
        width: 100%;
        padding: 16px 32px;
        font-size: 0.95rem;
    }
    
    /* Secciones de valores */
    .company-values {
        padding: 50px 20px;
        margin-top: 30px;
        border-radius: 20px;
    }
    
    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .value-card {
        padding: 30px 25px;
        border-radius: 16px;
    }
    
    .value-icon {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .value-card h3 {
        font-size: 1.3rem;
    }
    
    /* Controles y formularios */
    .controls-bar {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .select-box {
        width: 100%;
    }
    
    .select-box select {
        width: 100%;
    }
    
    .btn-group {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .btn-group button {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        font-size: 0.8rem;
        padding: 10px 12px;
    }
    
    /* Tablas responsive */
    .schedule-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 15px;
        border-radius: 12px;
    }
    
    table {
        font-size: 0.75rem;
        min-width: 600px;
    }
    
    th, td {
        padding: 10px 6px;
        font-size: 0.7rem;
    }
    
    .subject-block {
        font-size: 0.7rem;
        padding: 6px;
    }
    
    /* Modal en móvil */
    .modal-overlay .login-card {
        width: 90%;
        max-width: 350px;
        padding: 30px 25px;
    }
    
    /* Grids responsive */
    .values-grid,
    .stats-grid,
    .quick-stats > div,
    .project-info-section > div,
    .dev-card {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Tarjetas de contacto */
    .contact-card {
        padding: 30px 20px !important;
    }
    
    /* Portafolio developer */
    #contact > div > div {
        grid-template-columns: 1fr !important;
        padding: 30px 20px !important;
        gap: 30px !important;
    }
    
    /* Títulos más pequeños */
    h2 {
        font-size: 2rem !important;
    }
    
    h3 {
        font-size: 1.4rem !important;
    }
    
    h4 {
        font-size: 1.2rem !important;
    }
    
    /* Iconos flotantes más pequeños */
    .floating-icon {
        font-size: 2rem !important;
        opacity: 0.2 !important;
    }
    
    /* Elementos decorativos más pequeños */
    .floating-particles,
    .hero-particles {
        display: none;
    }
    
    /* Chat container */
    .chat-container {
        height: 400px;
        max-height: 50vh;
    }
    
    .chat-messages {
        padding: 15px;
    }
    
    .chat-input-container {
        padding: 12px;
    }
    
    .chat-input-container input {
        font-size: 0.9rem;
        padding: 12px;
    }
    
    /* Badges y chips */
    .tech-badge,
    .status-badge {
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }
    
    .chip {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    /* Estadísticas */
    .stat-number {
        font-size: 2.5rem !important;
    }
    
    .stat-label {
        font-size: 0.9rem !important;
    }
    
    /* Login screen */
    .login-container {
        padding: 20px;
    }
    
    .login-card {
        padding: 35px 25px !important;
        width: 90% !important;
        max-width: 400px !important;
    }
    
    .animated-logo {
        width: 100px !important;
        height: 100px !important;
    }
    
    .logo-letter {
        font-size: 1.6rem !important;
    }
    
    .login-card h2 {
        font-size: 2rem !important;
    }
    
    .login-subtitle {
        font-size: 0.8rem !important;
    }
    
    /* Proceso de desarrollo */
    .dev-step {
        padding: 20px 25px !important;
    }
    
    /* Horario de atención */
    #contacto div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 25px !important;
    }
}

/* ==================== MÓVILES PEQUEÑOS (hasta 480px) ==================== */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    section {
        padding: 30px 15px !important;
        border-radius: 16px !important;
    }
    
    /* Navegación compacta */
    .neon-nav {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .neon-nav .logo {
        font-size: 0.9rem;
    }
    
    .neon-nav .logo i {
        margin-right: 4px;
        font-size: 0.9rem;
    }
    
    .neon-nav ul {
        gap: 5px;
    }
    
    .neon-nav a {
        padding: 6px 10px;
        font-size: 0.7rem;
    }
    
    /* Hero compacto */
    .nike-hero {
        min-height: 65vh;
        padding: 25px 12px;
    }
    
    .hero-content {
        padding: 25px 18px !important;
        border-radius: 16px;
    }
    
    .hero-content h4 {
        font-size: 0.65rem !important;
        letter-spacing: 1.5px;
    }
    
    .hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    
    .hero-content p {
        font-size: 0.85rem !important;
        line-height: 1.6;
        margin-bottom: 25px;
    }
    
    .hero-btns button {
        padding: 14px 24px !important;
        font-size: 0.85rem !important;
    }
    
    /* Valores compactos */
    .company-values {
        padding: 35px 15px !important;
        border-radius: 16px;
    }
    
    .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 25px !important;
    }
    
    .value-card {
        padding: 25px 18px !important;
    }
    
    .value-icon {
        font-size: 1.6rem !important;
        width: 60px !important;
        height: 60px !important;
    }
    
    .value-card h3 {
        font-size: 1.1rem !important;
    }
    
    .value-preview {
        font-size: 0.85rem !important;
    }
    
    /* Botones en columna */
    .btn-group {
        gap: 8px !important;
    }
    
    .btn-group button {
        flex: 1 1 100%;
        font-size: 0.7rem !important;
        padding: 10px 14px !important;
    }
    
    /* Tablas más compactas */
    table {
        font-size: 0.65rem;
        min-width: 500px;
    }
    
    th, td {
        padding: 8px 4px;
        font-size: 0.65rem;
    }
    
    td {
        height: 55px;
    }
    
    .subject-block {
        font-size: 0.65rem;
        padding: 4px;
    }
    
    /* Modal compacto */
    .modal-overlay .login-card {
        width: 95%;
        padding: 25px 18px;
    }
    
    /* Títulos aún más pequeños */
    h2 {
        font-size: 1.6rem !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
    }
    
    h4 {
        font-size: 1rem !important;
    }
    
    /* Tarjetas de contacto */
    .contact-card {
        padding: 25px 18px !important;
    }
    
    .contact-card h3 {
        font-size: 1.3rem !important;
    }
    
    .contact-card a {
        font-size: 1rem !important;
        padding: 12px 20px !important;
    }
    
    /* Portafolio developer */
    .photo-placeholder {
        width: 150px !important;
        height: 150px !important;
    }
    
    .photo-placeholder i {
        font-size: 3.5rem !important;
    }
    
    .social-links a {
        width: 45px !important;
        height: 45px !important;
    }
    
    /* Stats */
    .stat-number {
        font-size: 2rem !important;
    }
    
    .stat-label {
        font-size: 0.8rem !important;
    }
    
    /* Login */
    .login-card {
        padding: 30px 20px !important;
    }
    
    .animated-logo {
        width: 90px !important;
        height: 90px !important;
    }
    
    .logo-letter {
        font-size: 1.4rem !important;
    }
    
    .login-card h2 {
        font-size: 1.8rem !important;
    }
    
    .input-wrapper input {
        font-size: 0.95rem !important;
        padding: 14px 18px !important;
    }
    
    /* Chat */
    .chat-container {
        height: 350px;
    }
    
    .message-content {
        font-size: 0.85rem !important;
    }
    
    /* Decorative line */
    .decorative-line {
        height: 3px !important;
        margin: 15px auto !important;
    }
    
    /* Feature items */
    .feature-item {
        padding: 18px !important;
    }
    
    .feature-item i {
        font-size: 1.6rem !important;
    }
    
    .feature-item h5 {
        font-size: 0.95rem !important;
    }
    
    .feature-item p {
        font-size: 0.8rem !important;
    }
}

/* ==================== ORIENTACIÓN LANDSCAPE EN MÓVILES ==================== */
@media (orientation: landscape) and (max-height: 500px) {
    .nike-hero {
        min-height: 90vh;
        padding: 30px 20px;
    }
    
    .hero-content {
        padding: 30px 40px;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }
    
    .hero-content p {
        margin-bottom: 20px;
    }
    
    .hero-btns {
        flex-direction: row;
        gap: 10px;
    }
    
    .hero-btns button {
        width: auto;
        padding: 12px 24px;
    }
    
    .chat-container {
        height: 350px;
    }
    
    .company-values {
        padding: 40px 20px;
    }
}

/* ==================== TOUCH OPTIMIZATIONS ==================== */
@media (hover: none) and (pointer: coarse) {
    /* Aumentar áreas táctiles */
    button,
    a,
    .chip,
    .value-card {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Eliminar efectos hover en touch */
    .btn-grow:hover {
        transform: none;
    }
    
    /* Feedback táctil */
    button:active,
    a:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
    
    /* Desactivar gota de agua en touch */
    .water-drop {
        display: none !important;
    }
    
    /* Desactivar efectos de paralaje en móvil */
    .parallax-element {
        transform: none !important;
    }
    
    /* Simplificar animaciones en touch */
    .tilt-3d:hover {
        transform: none !important;
    }
    
    .card-light-effect::before {
        display: none;
    }
}

/* ==================== IPHONE ESPECÍFICO ==================== */
/* iPhone X, XS, 11 Pro, 12 mini, 13 mini */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) {
    
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .neon-nav {
        padding-top: calc(12px + env(safe-area-inset-top));
    }
    
    section {
        margin-bottom: 20px;
    }
}

/* iPhone XR, 11, 12, 12 Pro, 13, 13 Pro, 14 */
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) {
    
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .neon-nav {
        padding-top: calc(12px + env(safe-area-inset-top));
    }
}

/* iPhone 12 Pro Max, 13 Pro Max, 14 Plus, 14 Pro Max */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) {
    
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .neon-nav {
        padding-top: calc(12px + env(safe-area-inset-top));
    }
}

/* iPhone SE (2020, 2022) */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 667px) 
    and (-webkit-device-pixel-ratio: 2) {
    
    .hero-content h1 {
        font-size: 2.2rem !important;
    }
    
    .nike-hero {
        min-height: 70vh;
    }
}

/* ==================== SAFARI iOS FIXES ==================== */
@supports (-webkit-touch-callout: none) {
    /* Fix para altura en iOS Safari */
    .nike-hero {
        min-height: -webkit-fill-available;
    }
    
    /* Fix para scroll suave en iOS */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix para inputs en iOS */
    input,
    select,
    textarea {
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    /* Fix para botones en iOS */
    button {
        -webkit-appearance: none;
    }
    
    /* Prevenir zoom en inputs */
    input[type="text"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
    
    /* Fix para sticky en iOS */
    .neon-nav {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* ==================== MODO OSCURO RESPONSIVE ==================== */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .hero-content {
        background: rgba(26, 26, 26, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
}

/* ==================== OPTIMIZACIONES DE RENDIMIENTO MÓVIL ==================== */
@media (max-width: 768px) {
    /* Reducir animaciones en móvil para mejor rendimiento */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Simplificar sombras */
    .info-card,
    .value-card,
    .contact-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Reducir blur para mejor rendimiento */
    .hero-content,
    .login-card {
        backdrop-filter: blur(5px) !important;
    }
    
    /* Desactivar transformaciones complejas */
    .floating-icon {
        animation: none !important;
    }
}

/* ==================== LANDSCAPE MÓVIL MEJORADO ==================== */
@media (max-width: 768px) and (orientation: landscape) {
    .nike-hero {
        min-height: 100vh;
        padding: 20px 15px;
    }
    
    .hero-content {
        padding: 25px 30px !important;
    }
    
    .hero-content h1 {
        font-size: 2rem !important;
        margin-bottom: 10px;
    }
    
    .hero-content p {
        margin-bottom: 15px;
        font-size: 0.85rem !important;
    }
    
    .hero-btns {
        flex-direction: row !important;
        gap: 10px;
    }
    
    .hero-btns button {
        width: auto !important;
        padding: 12px 24px !important;
        font-size: 0.85rem !important;
    }
    
    .company-values {
        padding: 30px 20px !important;
    }
    
    .value-card {
        padding: 20px !important;
    }
    
    .chat-container {
        height: 300px;
    }
}

/* ==================== ACCESIBILIDAD MÓVIL ==================== */
@media (max-width: 768px) {
    /* Mejorar contraste en móvil */
    .neon-nav a {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    /* Mejorar legibilidad */
    p, li, span {
        line-height: 1.7;
    }
    
    /* Espaciado entre elementos interactivos */
    button + button,
    a + a {
        margin-left: 8px;
    }
}

/* ==================== FIX PARA NOTCH EN IPHONE ==================== */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .neon-nav {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
    
    section {
        padding-left: max(20px, env(safe-area-inset-left)) !important;
        padding-right: max(20px, env(safe-area-inset-right)) !important;
    }
}