/* ==========================================================
   MIBOLETTO
   EVENTO.CSS
   DETALLE DEL EVENTO
==========================================================*/


/*==========================================================
  CONTENEDOR PRINCIPAL
==========================================================*/

.contenido-evento{

    width:min(96%,1440px);

    margin:45px auto 80px;

}


/*==========================================================
  HERO
==========================================================*/

.hero-evento{

    width:100%;

    height:520px;

    overflow:hidden;

    position:relative;

    border-radius:0 0 28px 28px;

    background:#081845;

    box-shadow:
        0 20px 45px rgba(0,0,0,.22);

}


.hero-imagen{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:transform .8s ease;

}


.hero-evento:hover .hero-imagen{

    transform:scale(1.04);

}


.hero-evento::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.45),
            rgba(0,0,0,.10),
            transparent
        );

}


/*==========================================================
  CABECERA
==========================================================*/

.cabecera-evento{

    margin:50px 0;

}


.cabecera-evento h1{

    color:#041138;

    font-size:48px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:20px;

}


.descripcion-corta{

    max-width:900px;

    font-size:21px;

    line-height:1.8;

    color:#5b6472;

}


/*==========================================================
  GRID
==========================================================*/

.evento-grid{

    display:grid;

    grid-template-columns:2fr 420px;

    gap:40px;

    align-items:start;

    margin-top:10px;

}

.evento-compra{

    align-self:start;

}

.compra-beneficios{

    margin:28px 0;

}

.beneficio{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:16px 0;

    border-top:1px solid rgba(255,255,255,.12);

}

.beneficio:first-child{

    border-top:none;

}

.beneficio i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.10);

    color:#D4AF37;

    flex-shrink:0;

}

.beneficio strong{

    display:block;

    color:#fff;

    margin-bottom:4px;

    font-size:15px;

}

.beneficio span{

    color:#cfd8e6;

    font-size:13px;

    line-height:1.5;

}


/*==========================================================
  INFORMACION
==========================================================*/

.info-card{

    background:#ffffff;

    border-radius:22px;

    padding:38px;
    
    margin-top:0;

    box-shadow:
        0 12px 32px rgba(0,0,0,.08);

}


.info-card h2{

    font-size:30px;

    color:#041138;

    margin-bottom:30px;

    font-weight:700;

    padding-bottom:16px;

    border-bottom:2px solid #eef2f7;

}


.info-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:18px 0;

    border-bottom:1px solid #eef2f7;

}


.info-item:last-child{

    border-bottom:none;

}


.info-item i{

    width:52px;

    height:52px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#D4AF37;

    color:#041138;

    font-size:20px;

    flex-shrink:0;

}


.info-item strong{

    display:block;

    color:#041138;

    font-size:17px;

    margin-bottom:6px;

}


.info-item span{

    color:#6b7280;

    line-height:1.7;

}


/*==========================================================
  PANEL COMPRA
==========================================================*/

.evento-compra{

    position:relative;

}


.compra-card{

    position:sticky;

    top:105px;
    
    margin-top:0;

    background:#041138;

    color:#ffffff;

    border-radius:24px;

    padding:36px;

    overflow:hidden;

    box-shadow:
        0 18px 40px rgba(0,0,0,.18);

}


.compra-card::before{

    content:"";

    position:absolute;

    top:-70px;

    right:-70px;

    width:170px;

    height:170px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}


.compra-label{

    display:inline-block;

    background:#D4AF37;

    color:#041138;

    padding:8px 18px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

    text-transform:uppercase;

    letter-spacing:.6px;

}


.compra-card h3{

    font-size:34px;

    margin-bottom:18px;

    font-weight:800;

}


.compra-texto{

    color:#d7dce7;

    line-height:1.8;

    margin-bottom:30px;

}


/*==========================================================
  BENEFICIOS
==========================================================*/

.compra-card ul{

    list-style:none;

    margin:0 0 30px;

    padding:0;

}


.compra-card li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    color:#ffffff;

}


.compra-card li i{

    color:#D4AF37;

}


/*==========================================================
  BOTON
==========================================================*/

.btn-comprar{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    width:100%;

    padding:18px;

    border-radius:14px;

    background:#D4AF37;

    color:#041138;

    font-size:18px;

    font-weight:800;

    transition:.30s;

}


.btn-comprar:hover{

    transform:translateY(-3px);

    box-shadow:
        0 14px 30px rgba(212,175,55,.30);

}

/*==========================================================
  DESCRIPCION
==========================================================*/

.evento-descripcion{

    margin-top:55px;

}


.descripcion-card{

    background:#ffffff;

    border-radius:22px;

    padding:42px;

    box-shadow:
        0 12px 32px rgba(0,0,0,.08);

}


.descripcion-card h2{

    display:flex;

    align-items:center;

    gap:14px;

    color:#041138;

    font-size:30px;

    margin-bottom:30px;

    padding-bottom:18px;

    border-bottom:2px solid #eef2f7;

}


.descripcion-card h2 i{

    color:#D4AF37;

}


.descripcion-contenido{

    color:#4b5563;

    font-size:17px;

    line-height:1.9;

}


.descripcion-contenido p{

    margin-bottom:18px;

}


.descripcion-contenido ul,
.descripcion-contenido ol{

    margin:18px 0 18px 30px;

}


.descripcion-contenido img{

    max-width:100%;

    border-radius:16px;

    margin:25px auto;

}


/*==========================================================
  RECOMENDACIONES
==========================================================*/

.evento-recomendaciones{

    margin-top:40px;

}


.recomendaciones-card{

    background:#fffdf4;

    border:2px solid rgba(212,175,55,.20);

    border-radius:22px;

    padding:40px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.05);

}


.recomendaciones-card h2{

    display:flex;

    align-items:center;

    gap:14px;

    color:#041138;

    font-size:28px;

    margin-bottom:25px;

}


.recomendaciones-card h2 i{

    color:#D4AF37;

}


.recomendaciones-contenido{

    color:#5b6472;

    line-height:1.9;

}


.recomendaciones-contenido p{

    margin-bottom:16px;

}


.recomendaciones-contenido ul{

    margin:20px 0 20px 30px;

}


/*==========================================================
  RELACIONADOS
==========================================================*/

.proximamente-relacionados{

    margin-top:45px;

}


.relacionados-card{

    background:#041138;

    color:#ffffff;

    border-radius:22px;

    padding:40px;

    text-align:center;

    box-shadow:
        0 12px 30px rgba(0,0,0,.15);

}


.relacionados-card i{

    font-size:42px;

    color:#D4AF37;

    margin-bottom:20px;

}


.relacionados-card h2{

    font-size:30px;

    margin-bottom:18px;

}


.relacionados-card p{

    max-width:760px;

    margin:auto;

    color:#d9e0ea;

    line-height:1.9;

}


/*==========================================================
  ANIMACIONES
==========================================================*/

.info-card,
.compra-card,
.descripcion-card,
.recomendaciones-card,
.relacionados-card{

    transition:
        transform .30s ease,
        box-shadow .30s ease;

}


.info-card:hover,
.descripcion-card:hover,
.recomendaciones-card:hover,
.relacionados-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.12);

}


/*==========================================================
  RESPONSIVE
==========================================================*/

@media (max-width:1200px){

    .evento-grid{

        grid-template-columns:1fr 360px;

    }

}


@media (max-width:992px){

    .hero-evento{

        height:420px;

    }

    .cabecera-evento h1{

        font-size:40px;

    }

    .evento-grid{

        grid-template-columns:1fr;

    }

    .compra-card{

        position:relative;

        top:auto;

    }

}


@media (max-width:768px){

    .hero-evento{

        height:300px;

        border-radius:0 0 20px 20px;

    }

    .contenido-evento{

        width:94%;

        margin:35px auto 60px;

    }

    .cabecera-evento{

        margin:35px 0;

    }

    .cabecera-evento h1{

        font-size:32px;

    }

    .descripcion-corta{

        font-size:17px;

    }

    .info-card,
    .compra-card,
    .descripcion-card,
    .recomendaciones-card,
    .relacionados-card{

        padding:28px;

    }

    .info-card h2,
    .descripcion-card h2,
    .recomendaciones-card h2{

        font-size:24px;

    }

}


@media (max-width:576px){

    .hero-evento{

        height:220px;

    }

    .cabecera-evento h1{

        font-size:28px;

    }

    .descripcion-corta{

        font-size:16px;

    }

    .info-item{

        gap:14px;

    }

    .info-item i{

        width:44px;

        height:44px;

        font-size:16px;

    }

    .compra-card h3{

        font-size:28px;

    }

    .btn-comprar{

        font-size:16px;

        padding:16px;

    }

}