/* Estilos responsive para diferentes dispositivos */

/* Mobile First - Estilos base para móviles */
@media (max-width: 576px) {
    .container {
        margin: 10px;
        padding: 20px 15px;
    }

    .logo {
        font-size: 2em;
    }

    .subtitle {
        font-size: 1em;
    }

    .description {
        font-size: 1em;
    }

    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .header .container {
        padding: 0 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .nav {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-link {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* Tablets */
@media (min-width: 577px) and (max-width: 768px) {
    .container {
        margin: 15px;
        padding: 30px 20px;
    }

    .logo {
        font-size: 2.5em;
    }

    .subtitle {
        font-size: 1.1em;
    }

    .btn {
        padding: 13px 25px;
    }

    .header .container {
        padding: 0 1.5rem;
    }

    .nav {
        gap: 1.5rem;
    }
}

/* Desktop pequeño */
@media (min-width: 769px) and (max-width: 992px) {
    .container {
        max-width: 500px;
        padding: 35px;
    }

    .logo {
        font-size: 2.8em;
    }
}

/* Desktop mediano */
@media (min-width: 993px) and (max-width: 1200px) {
    .container {
        max-width: 600px;
    }
}

/* Desktop grande */
@media (min-width: 1201px) {
    .container {
        max-width: 700px;
        padding: 50px;
    }

    .logo {
        font-size: 3.5em;
    }

    .subtitle {
        font-size: 1.3em;
    }

    .description {
        font-size: 1.2em;
    }
}

/* Orientación landscape en móviles */
@media (max-width: 768px) and (orientation: landscape) {
    body {
        padding: 10px 0;
        align-items: flex-start;
    }

    .container {
        margin: 10px auto;
        min-height: auto;
    }

    .logo {
        font-size: 2em;
        margin-bottom: 10px;
    }

    .subtitle {
        margin-bottom: 15px;
    }

    .description {
        margin-bottom: 20px;
    }

    .links {
        gap: 10px;
    }
}

/* Utilidades responsive */
.hidden-mobile {
    display: block;
}

.visible-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hidden-mobile {
        display: none;
    }

    .visible-mobile {
        display: block;
    }
}

/* Grid responsive para futuras extensiones */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col {
    flex: 1;
    padding: 0 15px;
}

.col-12 { flex: 0 0 100%; }
.col-6 { flex: 0 0 50%; }
.col-4 { flex: 0 0 33.333333%; }
.col-3 { flex: 0 0 25%; }

@media (max-width: 768px) {
    .col-6,
    .col-4,
    .col-3 {
        flex: 0 0 100%;
    }
}

/* Animaciones responsivas */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Alto contraste para accesibilidad */
@media (prefers-contrast: high) {
    :root {
        --shadow-main: 0 0 0 2px #000;
        --border-color: #000;
    }

    .btn {
        border: 2px solid;
    }
}