/* ============================================
   OPTIMIZACIONES ESPECÍFICAS POR DISPOSITIVO
   Chrome DevTools - Todos los dispositivos
   ============================================ */

/* ===== 1. IPHONE SE (320px) ===== */
@media (min-width: 320px) and (max-width: 359px) {

    h1,
    .hero h1 {
        font-size: clamp(1.5rem, 8vw, 1.75rem) !important;
        line-height: 1.2 !important;
    }

    h2,
    .section-title {
        font-size: clamp(1.25rem, 7vw, 1.5rem) !important;
    }

    .logo-text {
        font-size: 1.1rem !important;
    }

    .btn {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        min-height: 44px !important;
    }

    .section-padding {
        padding: 2.5rem 0.75rem !important;
    }

    .navbar {
        padding: 12px 0 !important;
        min-height: 56px !important;
    }
}

/* ===== 2. ANDROID PEQUEÑO / IPHONE XR (360px-374px) ===== */
@media (min-width: 360px) and (max-width: 374px) {

    h1,
    .hero h1 {
        font-size: clamp(1.6rem, 7vw, 2rem) !important;
    }

    .section-padding {
        padding: 3rem 1rem !important;
    }
}

/* ===== 3. IPHONE ESTÁNDAR (375px-389px) ===== */
@media (min-width: 375px) and (max-width: 389px) {

    h1,
    .hero h1 {
        font-size: clamp(1.75rem, 6.5vw, 2.25rem) !important;
    }

    .hero {
        padding-top: 5rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ===== 4. IPHONE PRO (390px-411px) ===== */
@media (min-width: 390px) and (max-width: 411px) {

    h1,
    .hero h1 {
        font-size: clamp(1.85rem, 6vw, 2.5rem) !important;
    }

    .section-padding {
        padding: 3.5rem 1.25rem !important;
    }
}

/* ===== 5. PIXEL / GALAXY (412px-429px) ===== */
@media (min-width: 412px) and (max-width: 429px) {

    h1,
    .hero h1 {
        font-size: clamp(2rem, 5.5vw, 2.75rem) !important;
    }

    .section-padding {
        padding: 3.5rem 1.5rem !important;
    }
}

/* ===== 6. IPHONE PRO MAX (430px-539px) ===== */
@media (min-width: 430px) and (max-width: 539px) {

    h1,
    .hero h1 {
        font-size: clamp(2.1rem, 5vw, 3rem) !important;
    }

    .section-padding {
        padding: 4rem 1.5rem !important;
    }
}

/* ===== 7. SURFACE DUO / FOLDABLES PORTRAIT (540px-599px) ===== */
@media (min-width: 540px) and (max-width: 599px) {

    /* Foldables: pantallas estrechas pero altas */
    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    .process-steps,
    .deliverables-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    h1,
    .hero h1 {
        font-size: clamp(2.25rem, 4.5vw, 3rem) !important;
    }

    .section-padding {
        padding: 4rem 1.5rem !important;
    }

    /* Evitar layouts apretados - Una sola columna */
    .pricing-grid,
    .pricing-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* ===== REGLA GENERAL MÓVILES: Pricing siempre en una columna ===== */
@media (max-width: 599px) {

    .pricing-grid,
    .pricing-grid-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .pricing-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pricing-card.featured {
        transform: none !important;
        margin: 0 !important;
    }
}

/* ===== 8. SMALL TABLETS (600px-767px) ===== */
@media (min-width: 600px) and (max-width: 767px) {
    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }

    .process-steps,
    .deliverables-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    .section-padding {
        padding: 4rem 2rem !important;
    }
}

/* ===== 9. IPAD MINI PORTRAIT (768px-819px) ===== */
@media (min-width: 768px) and (max-width: 819px) {
    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 3.5rem !important;
    }

    .process-steps,
    .deliverables-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    .section-padding {
        padding: 4.5rem 2rem !important;
    }

    .navbar {
        padding: 16px 0 !important;
        min-height: 68px !important;
    }
}

/* ===== 10. IPAD AIR LANDSCAPE (820px-1023px) ===== */
@media (min-width: 820px) and (max-width: 1023px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 4rem !important;
    }

    .process-steps,
    .deliverables-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }

    .section-padding {
        padding: 5rem 2.5rem !important;
    }

    h1,
    .hero h1 {
        font-size: clamp(2.5rem, 4vw, 3rem) !important;
    }
}

/* ===== 11. IPAD PRO / TABLETS GRANDES (1024px-1279px) ===== */
@media (min-width: 1024px) and (max-width: 1279px) {
    .grid-2 {
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 4rem !important;
    }

    .process-steps,
    .deliverables-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }

    .section-padding {
        padding: 5rem 2rem !important;
    }

    h1,
    .hero h1 {
        font-size: 2.5rem !important;
    }

    h2,
    .section-title {
        font-size: 2rem !important;
    }
}

/* ===== 12. DESKTOP ESTÁNDAR (1280px-1439px) ===== */
@media (min-width: 1280px) and (max-width: 1439px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 5rem !important;
    }

    .process-steps,
    .deliverables-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem !important;
    }

    .section-padding {
        padding: 5rem 2.5rem !important;
    }

    h1,
    .hero h1 {
        font-size: 3rem !important;
    }

    h2,
    .section-title {
        font-size: 2.25rem !important;
    }
}

/* ===== 13. DESKTOP WIDE (1440px-1919px) ===== */
@media (min-width: 1440px) and (max-width: 1919px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 5rem !important;
    }

    .process-steps,
    .deliverables-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem !important;
    }

    .pricing-grid-4 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
    }

    .section-padding {
        padding: 6rem 3rem !important;
    }

    h1,
    .hero h1 {
        font-size: 3.25rem !important;
    }

    h2,
    .section-title {
        font-size: 2.5rem !important;
    }
}

/* ===== 14. ULTRAWIDE / 4K (1920px-2559px) ===== */
@media (min-width: 1920px) and (max-width: 2559px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 6rem !important;
    }

    .process-steps,
    .deliverables-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3rem !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3rem !important;
    }

    .pricing-grid-4 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2.5rem !important;
    }

    .section-padding {
        padding: 7rem 4rem !important;
    }

    h1,
    .hero h1 {
        font-size: 3.5rem !important;
    }

    h2,
    .section-title {
        font-size: 2.75rem !important;
    }
}

/* ===== 15. SUPER ULTRAWIDE (2560px+) ===== */
@media (min-width: 2560px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 7rem !important;
    }

    .section-padding {
        padding: 8rem 5rem !important;
    }

    h1,
    .hero h1 {
        font-size: 4rem !important;
    }

    h2,
    .section-title {
        font-size: 3rem !important;
    }
}

/* ===== 16. FIXES ESPECÍFICOS PARA FOLDABLES ===== */
/* Galaxy Z Fold 5 / Asus Zenbook Fold - Pantalla estrecha */
@media (min-width: 280px) and (max-width: 540px) and (min-height: 600px) {

    /* Evitar layouts de 2 columnas en pantallas estrechas */
    .grid-2 {
        grid-template-columns: 1fr !important;
    }

    .process-steps,
    .deliverables-grid,
    .pricing-grid {
        grid-template-columns: 1fr !important;
    }

    /* Asegurar que los textos no se corten */
    h1,
    .hero h1 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Cards más compactas */
    .step-card,
    .deliverable-card,
    .pricing-card {
        padding: 1.25rem !important;
    }
}

/* ===== 17. FIXES PARA SMART DISPLAYS ===== */
/* Nest Hub (1024x600) - Pantalla horizontal compacta */
@media (min-width: 1024px) and (max-width: 1280px) and (max-height: 800px) {
    .hero {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
        min-height: auto !important;
    }

    .section-padding {
        padding: 3rem 2rem !important;
    }

    h1,
    .hero h1 {
        font-size: 2.25rem !important;
    }

    /* Evitar bloques excesivamente altos */
    .hero-content {
        max-width: 800px !important;
    }
}

/* Nest Hub Max (1280x800) */
@media (min-width: 1280px) and (max-width: 1440px) and (max-height: 900px) {
    .hero {
        padding-top: 4rem !important;
        padding-bottom: 3rem !important;
        min-height: auto !important;
    }

    .section-padding {
        padding: 4rem 2.5rem !important;
    }
}

/* ===== 18. PREVENIR OVERFLOW HORIZONTAL ===== */
/* Asegurar que NADA cause scroll horizontal */
* {
    max-width: 100% !important;
}

html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

img,
video,
iframe,
svg,
canvas {
    max-width: 100% !important;
    height: auto !important;
}

table {
    width: 100% !important;
    table-layout: auto !important;
    word-wrap: break-word !important;
}

/* Prevenir que textos largos rompan el layout - SIN GUIONES, AJUSTE NATURAL */
p,
span,
a,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6,
div {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    white-space: normal !important;
}

/* Solo para palabras extremadamente largas (URLs, etc.) */
a[href^="http"],
a[href^="mailto"],
code,
pre {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Prevenir que inputs causen overflow */
input,
select,
textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ===== 19. MOBILE-FIRST REAL ===== */
/* Botones mínimo 44px en móvil */
@media (max-width: 767px) {

    .btn,
    button,
    a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
        font-size: 1rem !important;
    }

    /* Formularios al 100% en móvil */
    input,
    select,
    textarea {
        width: 100% !important;
        font-size: 16px !important;
        /* Evitar zoom en iOS */
    }

    /* Spacing cómodo para dedo */
    .nav-links>a:not(.btn) {
        padding: 12px 0 !important;
        min-height: 44px !important;
    }
}

/* ===== 20. AJUSTES ESPECÍFICOS POR ELEMENTO ===== */
/* Navbar - nunca debe romperse */
.navbar {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

.navbar .container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Cards - nunca deben romperse */
.step-card,
.deliverable-card,
.pricing-card,
.review-card,
.portfolio-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
}

/* Secciones - sin altura fija */
.section-padding {
    min-height: auto !important;
}

/* Grids - adaptativos sin overflow */
.process-steps,
.deliverables-grid,
.pricing-grid,
.portfolio-grid,
.reviews-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ============================================
   21. PRICING GRID - MOBILE & DESKTOP OPTIMIZATION
   FINAL OVERRIDE - Máxima prioridad
   ============================================ */

/* MÓVILES: Una sola columna (hasta 767px) */
@media (max-width: 767px) {

    .pricing-grid,
    .pricing-grid-4,
    .pricing .pricing-grid,
    .pricing .pricing-grid-4,
    section.pricing .pricing-grid-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .pricing-card,
    .pricing .pricing-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .pricing-card.featured,
    .pricing .pricing-card.featured {
        transform: none !important;
        scale: 1 !important;
        margin: 0 !important;
        order: -1 !important;
        /* Featured card primero */
    }
}

/* TABLETS: Dos columnas (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {

    .pricing-grid,
    .pricing-grid-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
        max-width: 900px !important;
        margin: 0 auto !important;
    }

    .pricing-card.featured {
        transform: none !important;
    }
}

/* DESKTOP: Cuatro columnas optimizadas (1024px+) */
@media (min-width: 1024px) {
    .pricing-grid-4 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: clamp(1rem, 2vw, 2rem) !important;
        max-width: 1400px !important;
        margin: 0 auto 60px !important;
        padding: 20px !important;
    }

    .pricing-card {
        padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px) !important;
    }

    .pricing-card.featured {
        transform: scale(1.03) !important;
        z-index: 2 !important;
    }

    .pricing-card.featured:hover {
        transform: scale(1.03) translateY(-6px) !important;
    }

    /* Mejoras tipográficas para 4 columnas */
    .pricing-card .card-header h3 {
        font-size: clamp(1rem, 1.3vw, 1.25rem) !important;
        line-height: 1.3 !important;
    }

    .pricing-card .price .amount {
        font-size: clamp(2rem, 3vw, 2.75rem) !important;
    }

    .pricing-card .desc,
    .pricing-card .plan-result {
        font-size: clamp(0.75rem, 1vw, 0.9rem) !important;
    }

    .pricing-card .card-body ul li {
        font-size: clamp(0.8rem, 1vw, 0.9rem) !important;
        padding-left: 24px !important;
    }

    .pricing-card .card-footer .btn {
        padding: 12px 16px !important;
        font-size: clamp(0.85rem, 1vw, 0.95rem) !important;
    }
}

/* DESKTOP WIDE: Más espacio (1280px+) */
@media (min-width: 1280px) {
    .pricing-grid-4 {
        gap: 2rem !important;
        padding: 40px 20px !important;
    }

    .pricing-card {
        padding: 36px 28px !important;
    }
}

/* DESKTOP ULTRAWIDE (1440px+) */
@media (min-width: 1440px) {
    .pricing-grid-4 {
        gap: 2.5rem !important;
        max-width: 1500px !important;
    }

    .pricing-card {
        padding: 40px 32px !important;
    }

    .pricing-card .card-header h3 {
        font-size: 1.3rem !important;
    }

    .pricing-card .price .amount {
        font-size: 2.75rem !important;
    }
}

/* ============================================
   22. UI VISUAL OPTIMIZATIONS (FIX "QUALITY VILLAPEL" BADGE)
   ============================================ */

.visual-right.glass-card {
    position: relative !important;
    padding: 90px 30px 30px 30px !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

.ui-mockup {
    width: 100% !important;
    background: var(--color-surface) !important;
    /* Fondo más oscuro para contraste */
    border-radius: 16px !important;
    padding: 24px !important;
    border: 1px solid var(--color-border) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2) !important;
}

/* Header del mockup (puntos) */
.ui-header {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.ui-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
}

.ui-dot:nth-child(1) {
    background: #FF5F56 !important;
}

.ui-dot:nth-child(2) {
    background: #FFBD2E !important;
}

.ui-dot:nth-child(3) {
    background: #27C93F !important;
}

/* Cuerpo del mockup */
.ui-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.ui-block {
    background: var(--color-surface-elevated) !important;
    border-radius: 6px !important;
}

.title-block {
    height: 14px !important;
    width: 60% !important;
    background: var(--color-text-secondary) !important;
    opacity: 0.3 !important;
}

.img-block {
    height: 140px !important;
    width: 100% !important;
    background: linear-gradient(135deg, var(--color-surface-elevated) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
    border: 1px dashed var(--color-border) !important;
    border-radius: 8px !important;
}

.ui-row {
    display: flex !important;
    gap: 12px !important;
}

.ui-col {
    flex: 1 !important;
    height: 70px !important;
    background: var(--color-surface-elevated) !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-border) !important;
}

.ui-btn {
    height: 40px !important;
    width: 100% !important;
    background: var(--color-primary) !important;
    border-radius: 8px !important;
    margin-top: 8px !important;
    opacity: 0.8 !important;
}

/* Badge Flotante "Calidad Villapel" */
.ui-badge {
    position: absolute !important;
    top: -18px !important;
    right: 30px !important;
    background: #1a1a2e !important;
    /* Fondo oscuro sólido premium */
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 20px !important;
    border-radius: 100px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    z-index: 20 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transform: translateY(0) !important;
    transition: transform 0.3s ease !important;
}

.ui-badge:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .visual-right.glass-card {
        margin-top: 40px !important;
        padding: 20px !important;
    }

    .ui-badge {
        right: 50% !important;
        transform: translateX(50%) !important;
        top: -15px !important;
    }

    .ui-badge:hover {
        transform: translateX(50%) translateY(-2px) !important;
    }
}