/*==================================================
    CASIANET PROMOCIÓN
    STYLE.CSS
    PARTE 1
===================================================*/

/*=========================
RESET
=========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Montserrat';
    background:#eef3fb;
    color:#fff;
    overflow-x:hidden;

}

/*=========================
VARIABLES
=========================*/

:root{

    --rojo:#e52529;
    --azul:#082d7a;
    --azul2:#123e9a;
    --azul3:#0f2558;
    --blanco:#ffffff;
    --gris:#f5f6fa;
    --texto:#222;

}

/*=========================
SECCIÓN
=========================*/

.promo{

    position:relative;
    width:100%;
    min-height:100vh;

    background:url("/img/fondo.jpg") center center;
    background-size:cover;
    background-repeat:no-repeat;

    overflow:hidden;

}

/* Capa blanca */

.overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(

        rgba(255,255,255,.75),
        rgba(255,255,255,.30)

    );

    z-index:1;

}

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

.container{

    position:relative;
    z-index:5;

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

    margin:auto;

    padding:40px 40px 0;

}

/*=========================
HEADER
=========================*/

.header{

    display:flex;
    justify-content:flex-start;
    align-items:center;

    margin-bottom:30px;

}

.logo{

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

    display:block;

    animation:logo 1s ease;

}

@keyframes logo{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*=========================
CONTENIDO
=========================*/

.content{

    display:grid;
    grid-template-columns:48% 52%;
    align-items:center;

    gap:40px;

}

/*=========================
COLUMNAS
=========================*/

.left{

    position:relative;
    z-index:3;

}

.right{

    position:relative;
    min-height:760px;

}

/*=========================
TARJETA ROJA
=========================*/

.title-card{

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

    background:linear-gradient(

        90deg,
        var(--rojo),
        #cf1115

    );

    padding:25px 45px;

    border-radius:0 70px 70px 0;

    box-shadow:

    0 18px 40px rgba(0,0,0,.20);

    margin-bottom:0;

}

.title-card span{

    color:#fff;

    font-size:32px;

    font-weight:900;

    font-style:italic;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*=========================
SUBTÍTULO
=========================*/

.subtitle{

    width:90%;
    max-width:520px;

    background:linear-gradient(

        180deg,
        #0b2f87,
        #061f59

    );

    padding:40px;

    border-radius:0 0 35px 35px;

    box-shadow:

    0 20px 40px rgba(0,0,0,.18);

    font-size:40px;

    font-weight:400;

    line-height:1.15;

    margin-bottom:45px;
    font-family:'Montserrat';


}

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

@media(max-width:1100px){

.content{

grid-template-columns:1fr;

}

.right{

min-height:550px;

margin-top:40px;

}

.title-card{

max-width:100%;

}

.subtitle{

max-width:100%;

font-size:42px;

}

.logo{

width:340px;

}

.container{

padding:30px;

}

}

@media(max-width:768px){

.container{

padding:20px;

}

.header{

justify-content:center;

}

.logo{

width:280px;

}

.title-card{

padding:18px 25px;
border-radius:18px;

}

.title-card span{

font-size:42px;

}

.subtitle{

font-size:32px;
padding:28px;

border-radius:0 0 25px 25px;

}

.content{

gap:25px;

}

}



/*==================================================
    STYLE.CSS
    PARTE 2
===================================================*/


/*=========================
TARJETA BLANCA
=========================*/

.shipping-card{

    position:relative;

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

    background:#ffffff;

    border-radius:45px;

    padding:45px 45px 55px;

    box-shadow:0 25px 60px rgba(13, 177, 62, 0.15);

    overflow:hidden;

    z-index:5;

}

.shipping-card::before{

    content:"";

    position:absolute;

    width:520px;
    height:410px;

    left:-180px;
    bottom:-180px;

    background:var(--azul);

    border-radius:50%;

}

.shipping-card::after{

    content:"";

    position:absolute;

    width:170px;
    height:170px;

    right:-90px;
    top:-90px;

    background:#edf4ff;

    border-radius:50%;

}

/*=========================
ICONO SUPERIOR
=========================*/

.shipping-icon{

    width:95px;
    height:95px;

    border:4px solid var(--azul);

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:auto auto 10px;

    color:var(--azul);

    font-size:42px;

    background:#ffffff;

    position:relative;

    z-index:2;

}

.shipping-card h2{

    position:relative;

    z-index:2;

    color:#1d2853;

    font-size:34px;

    line-height:1.18;

    font-weight:700;

    margin-bottom:10px;

}

.shipping-card h3{

    position:relative;

    z-index:2;

    color:var(--rojo);

    font-size:34px;

    line-height:1.05;

    font-weight:600;

    margin-bottom:35px;

}

.shipping-card h1{

    position:relative;

    z-index:2;

    color:var(--rojo);

    font-size:44px;

    font-weight:900;

    letter-spacing:1px;

    margin-bottom:20px;

}

.guatex{

    position:relative;

    z-index:2;

    width:260px;

    display:block;

}

/*=========================
MOTORISTA
=========================*/

.motorista{

    position:absolute;

    right:0;
    bottom:0;

    width:95%;
    max-width:700px;

    animation:moto 1s ease;

}

@keyframes moto{

    from{

        opacity:0;
        transform:translateX(80px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

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

.benefits{

    position:absolute;

    right:0;
    bottom:25px;

    width:360px;

    background:linear-gradient(
        180deg,
        #0b3aa5,
        #041d58
    );

    padding:35px;

    border-radius:35px 0 0 35px;

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

    z-index:15;

}

.item{

    display:flex;

    align-items:center;

    gap:18px;

}

.item+.item{

    margin-top:30px;

}

.icon{

    width:72px;
    height:72px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.8);

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;

    font-size:28px;

    flex-shrink:0;

}

.item h4{

    font-size:28px;

    color:#fff;

    font-weight:700;

    line-height:1.1;

}

.item p{

    color:#fff;

    font-size:24px;

    font-weight:500;

    line-height:1.15;

}

/*=========================
MASCOTA
=========================*/

.mascota{

    position:absolute;

    left:44%;

    bottom:120px;

    width:320px;

    z-index:30;

    animation:mascota 2s infinite ease-in-out;

}

@keyframes mascota{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/*=========================
EFECTOS
=========================*/

.shipping-card,
.benefits,
.title-card{

transition:.35s;

}

.gua{
    display: none;
}

.shipping-card:hover{

transform:translateY(-8px);

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

}

.benefits:hover{

transform:translateX(-8px);

}

.title-card:hover{

transform:scale(1.02);

}

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

@media(max-width:1100px){

.motorista{

display: none;

}

.benefits{

position:relative;

width:100%;

margin-top:25px;

border-radius:30px;

}

.mascota{

display: none;

}

.shipping-card{

max-width:100%;

}

.gua{
    display: block;
}

}

@media(max-width:768px){

.shipping-card{

padding:30px;

border-radius:30px;

}

.shipping-card h2{

font-size:34px;

}

.shipping-card h3{

font-size:40px;

}

.shipping-card h1{

font-size:48px;

}

.guatex{

width:200px;

}

.benefits{

padding:25px;

}

.icon{

width:60px;
height:60px;
font-size:22px;

}

.item h4{

font-size:22px;

}

.item p{

font-size:18px;

}

}