*, *::before, *::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

/* ── Navbar hamburguesa ───────────────────────────────────── */
.vy-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 5px;
}

    .vy-nav-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: #C9C0DA;
        border-radius: 2px;
        transition: all 0.25s;
    }

.vy-nav-menu {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

/* ── Clases utilitarias de grid responsive ────────────────── */
.vy-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.vy-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.vy-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vy-grid-footer {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
}

/* ── Mockup hero: ocultar en móvil ───────────────────────── */
.vy-hero-mockup {
    position: relative;
    min-width: 300px;
    animation: vyfloat 7s ease-in-out infinite;
}

/* ============================================================
   TABLET — max 860px
   ============================================================ */
@media (max-width: 860px) {

    /* Navbar */
    .vy-nav-toggle {
        display: flex;
    }

    .vy-nav-menu {
        display: none;
        position: absolute;
        top: 85px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: rgba(11,8,16,0.97);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding: 16px 28px 24px;
        z-index: 100;
    }

        .vy-nav-menu.open {
            display: flex;
        }

        .vy-nav-menu a,
        .vy-nav-menu div {
            width: 100%;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        /* Botón ES/EN — no que ocupe todo el ancho */
        .vy-nav-menu #vy-lang {
            width: auto !important;
            border-bottom: none !important;
            padding: 12px 0 !important;
        }
        /* Botón Comenzar */
        .vy-nav-menu a:last-child {
            border-bottom: none;
            margin-top: 8px;
            text-align: center;
            display: block;
            width: 100% !important;
        }

    /* Grids → 1 columna */
    .vy-grid-3 {
        grid-template-columns: 1fr;
    }

    .vy-grid-2 {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .vy-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .vy-grid-footer {
        grid-template-columns: 1fr 1fr;
    }

    /* Hero mockup: ocultar en tablet/móvil */
    .vy-hero-mockup {
        display: none;
    }

    /* Secciones: menos padding lateral */
    section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Precios: forzar 1 columna */
    [data-panel] {
        grid-template-columns: 1fr !important;
    }

    /* Contacto */
    .vy-contacto-grid {
        grid-template-columns: 1fr !important;
    }

    /* Nosotros */
    .vy-nosotros-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* ============================================================
   MÓVIL — max 480px
   ============================================================ */
@media (max-width: 480px) {

    /* Grids que estaban en 2 cols → 1 col */
    .vy-grid-4 {
        grid-template-columns: 1fr;
    }

    .vy-grid-footer {
        grid-template-columns: 1fr;
    }

    /* Padding general */
    section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .vy-section-pad {
        padding: 48px 16px !important;
    }

    /* Botones hero */
    .vy-hero-btns {
        flex-direction: column;
    }

        .vy-hero-btns a {
            text-align: center;
        }

    /* Stats del hero */
    .vy-hero-stats {
        gap: 18px !important;
    }

    /* Tabs de precios */
    .vy-tabs-wrap {
        gap: 8px !important;
    }

    .vy-tab {
        font-size: 14px !important;
        padding: 10px 16px !important;
    }

    /* Footer simple */
    .vy-footer-simple {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* CTA card padding */
    .vy-cta-card {
        padding: 32px 20px !important;
    }

    /* Proceso (4 pasos) en LandingPage */
    .vy-proceso-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   FIXES — Forzar responsive con !important para ganar
   sobre estilos inline
   ============================================================ */

/* Evitar overflow horizontal global */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

#top {
    overflow-x: hidden;
}

@media (max-width: 860px) {

    /* Navbar logo */
    header img {
        width: 120px !important;
        height: auto !important;
        transform: none !important;
    }

    /* Todos los grids de 2 y 3 columnas → 1 columna */
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns:1.05fr"],
    [style*="grid-template-columns:1fr 1fr;"],
    [style*="grid-template-columns:1.4fr"],
    .vy-grid-2, .vy-grid-3, .vy-grid-footer, .vy-nosotros-grid, .vy-contacto-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Grid de 4 columnas (proceso) → 2 columnas */
    [style*="grid-template-columns:repeat(4"],
    .vy-grid-4 {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    /* Padding de secciones */
    [style*="padding:96px 28px"],
    [style*="padding:90px 28px"],
    [style*="padding:70px 28px"],
    [style*="padding:60px 28px"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* Ocultar mockup hero */
    .vy-hero-mockup {
        display: none !important;
    }

    /* Contacto card padding */
    [style*="padding:56px"] {
        padding: 28px 20px !important;
    }

    /* Texto que se corta */
    p, div, span, h1, h2 {
        max-width: 100%;
        word-break: break-word;
    }

    /* min-width que fuerza overflow */
    [style*="min-width:300px"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    [style*="min-width:280px"] {
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {

    /* Grid de 4 → 1 columna en móvil chico */
    [style*="grid-template-columns:repeat(4"],
    .vy-grid-4 {
        grid-template-columns: 1fr !important;
    }

    /* Títulos grandes */
    h1 {
        font-size: clamp(28px, 8vw, 42px) !important;
    }

    h2 {
        font-size: clamp(22px, 6vw, 32px) !important;
    }

    /* Botones hero apilados */
    .vy-hero-btns {
        flex-direction: column !important;
    }

        .vy-hero-btns a {
            text-align: center !important;
        }

    /* Navbar logo más chico */
    header img {
        width: 100px !important;
    }
}