/*====================================================

PLAYERAS DTF
Autor: ChatGPT
Fuente: Saira

====================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Saira',sans-serif;
    overflow:hidden;
    background:#111;
    color:#FFF;

}

/*==========================
SLIDER
===========================*/

.slider{

    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;

}

.slide{

    position:absolute;
    width:100%;
    height:100%;
    inset:0;

    opacity:0;
    visibility:hidden;

    transition:
    opacity .7s ease,
    transform .8s ease;

}

.slide.active{

    opacity:1;
    visibility:visible;
    z-index:5;

}

/*==========================
FONDO
===========================*/

.background{

    position:absolute;
    inset:0;

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

    z-index:-2;

}

.background::after{

    content:"";

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.20);

}

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

.contenido{

    width:min(1800px,94%);
    height:100%;

    margin:auto;

    display:grid;
    grid-template-columns:
    420px
    1fr
    220px;

    align-items:center;

}

/*==========================
COLUMNA IZQUIERDA
===========================*/

.izquierda{

    display:flex;
    flex-direction:column;
    gap:5px;

}

/*==========================
TITULO
===========================*/

.titulo{

    line-height:.9;

}

.txt-playeras{

    display:block;

    font-size:clamp(28px,2.2vw,62px);

    font-weight:300;

    letter-spacing:2px;

}

.titulo h1{

    color:#b10036;

    font-size:clamp(90px,9vw,180px);

    font-weight:900;

    line-height:.8;

}

/*==========================
LAVADO
===========================*/

.lavado img{

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

}

/*==========================
TABLAS
===========================*/

.medidas{

    display:flex;
    align-items:flex-start;
    gap:35px;

}

.playera-icono img{

    width:125px;

}

.tabla{

    display:flex;
    flex-direction:column;
    gap:30px;

}

.columnas{

    display:flex;
    gap:45px;

}

.tabla h2{

    font-size:30px;
    margin-bottom:10px;
    font-weight:700;

}

.tabla h3{

    font-size:18px;
    margin-bottom:10px;
    color:#DDD;
    font-weight:500;

}

.tabla p{

    font-size:14px;
    line-height:1.45;

    color:#E9E9E9;

}

/*==========================
CENTRO
===========================*/

.centro{

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

    height:100%;

    position:relative;

}

/*==========================
MODELO
===========================*/

.modelo{

    height:94vh;
    max-height:1100px;

    object-fit:contain;

    user-select:none;
    pointer-events:none;

    animation:entrada .8s ease;

}

/*==========================
ANIMACION
===========================*/

@keyframes entrada{

    from{

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

    }

    to{

        opacity:1;
        transform:
        translateX(0);

    }

}

/*==========================
DERECHA
===========================*/

.derecha{

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

    height:100%;

    padding-bottom:70px;

}

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

.btn-next,
.btn-prev{

    background:none;
    border:none;

    cursor:pointer;

    display:flex;
    align-items:center;
    gap:18px;

    color:#FFF;

    transition:.35s;

}

.btn-next:hover,
.btn-prev:hover{

    transform:translateX(10px);

}

.numero{

    font-size:clamp(90px,10vw,170px);

    font-weight:600;

    color:#E5E5E5;

    line-height:1;
	
    font-family: 'Saira', sans-serif;


}

.flecha{

    font-size:70px;
    font-weight:300;

}

/*==========================
WHATSAPP
===========================*/

.whatsapp{

    position:fixed;

    top:30px;
    right:30px;

    z-index:999;

    transition:.35s;

}

.whatsapp img{

    width:72px;

}

.whatsapp:hover{

    transform:scale(1.12);

}

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

.modelo,
.btn-next,
.btn-prev,
.whatsapp img{

    transition:.35s;

}

.btn-next:hover .numero,
.btn-prev:hover .numero{

    color:#FFFFFF;

}

.btn-next:hover .flecha,
.btn-prev:hover .flecha{

    transform:translateX(10px);

}

.flecha{

    transition:.35s;
}

/*==========================
SELECCION
===========================*/

::selection{

    background:#b10036;
    color:#FFF;

}