/* ==========================================================
   VITIS LUMEN
   responsive.css
========================================================== */

/* ----------------------------------------------------------
   Pantallas muy grandes (2K / 4K)
----------------------------------------------------------- */

@media (min-width: 1600px){

    .hero-content{
        max-width:1200px;
    }

    .hero h1{
        font-size:7rem;
    }

    .hero h2{
        font-size:3rem;
    }

    .subtitle{
        font-size:1.35rem;
    }

    main{
        max-width:1500px;
    }

    .gallery-grid{
        grid-template-columns:repeat(4,1fr);
    }

}

/* ----------------------------------------------------------
   Portátiles
----------------------------------------------------------- */

@media (max-width:1200px){

    .hero h1{
        font-size:5rem;
    }

    .hero h2{
        font-size:2rem;
    }

    .cards{
        grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    }

}

/* ----------------------------------------------------------
   Tablets
----------------------------------------------------------- */

@media (max-width:992px){

    .column{
        display:none;
    }

    .hero{
        padding:100px 25px;
        min-height:90vh;
    }

    .hero h1{
        font-size:4rem;
        letter-spacing:5px;
    }

    .hero h2{
        font-size:1.8rem;
    }

    .subtitle{
        font-size:1.05rem;
        max-width:600px;
    }

    #countdown{

        gap:18px;

    }

    #countdown div{

        min-width:90px;
        padding:18px;

    }

    #countdown span{

        font-size:2rem;

    }

    .cards{

        gap:25px;

    }

    .info-card{

        padding:30px;

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .location iframe{

        height:420px;

    }

}

/* ----------------------------------------------------------
   Móviles grandes
----------------------------------------------------------- */

@media (max-width:768px){

    body{

        background-attachment:scroll;

    }

    .hero{

        padding:90px 20px;

    }

    .hero h1{

        font-size:3rem;
        letter-spacing:3px;

    }

    .hero h2{

        font-size:1.5rem;

    }

    .subtitle{

        font-size:1rem;

    }

    .separator{

        width:140px;

    }

    .hero-buttons{

        flex-direction:column;
        align-items:center;
        gap:15px;

    }

    .btn{

        width:100%;
        max-width:320px;

        text-align:center;

    }

    #countdown{

        display:grid;
        grid-template-columns:repeat(2,1fr);

        width:100%;

    }

    #countdown div{

        min-width:auto;

    }

    main{

        padding:60px 18px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .info-card h3{

        font-size:1.5rem;

    }

    .gallery h2,
    .location h2{

        font-size:2.2rem;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid img{

        height:240px;

    }

    .location iframe{

        height:350px;

    }

    footer{

        padding:50px 20px;

    }

}

/* ----------------------------------------------------------
   Móviles pequeños
----------------------------------------------------------- */

@media (max-width:480px){

    .hero{

        min-height:100vh;

        padding:70px 15px;

    }

    .hero h1{

        font-size:2.4rem;

        letter-spacing:2px;

    }

    .hero h2{

        font-size:1.2rem;

    }

    .subtitle{

        font-size:.95rem;

    }

    #countdown{

        grid-template-columns:1fr 1fr;

        gap:12px;

    }

    #countdown div{

        padding:15px;

    }

    #countdown span{

        font-size:1.7rem;

    }

    .info-card{

        padding:22px;

    }

    .info-card h3{

        font-size:1.35rem;

    }

    .gallery-grid img{

        height:210px;

    }

    .location iframe{

        height:300px;

    }

}

/* ----------------------------------------------------------
   Modo horizontal en móviles
----------------------------------------------------------- */

@media (max-height:500px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding:60px 20px;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .subtitle{

        display:none;

    }

    #countdown{

        margin:30px 0;

    }

}

/* ----------------------------------------------------------
   Impresión
----------------------------------------------------------- */

@media print{

    .hero-buttons,
    #countdown,
    iframe,
    .gallery{

        display:none !important;

    }

    body{

        background:white;

    }

    .info-card{

        box-shadow:none;

        border:1px solid #999;

    }

    footer{

        background:white;

        color:black;

    }

}