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

body{
font-family:'Inter',sans-serif;
background:#07081a;
color:white;
}

/* TIMELINE */

.timeline{

position:relative;
height:100vh;

display:flex;
justify-content:space-around;
align-items:stretch;

padding:0 5%;

}

/* LINEA */

.line{

position:absolute;

top:70%;
left:5%;

width:90%;
height:2px;

background:white;

}

/* EVENT */

.event{

position:relative;
flex:1;

display:flex;
justify-content:center;

}

/* DOT */

.dot{

position:absolute;

top:70%;
transform:translateY(-50%);

width:16px;
height:16px;

border-radius:50%;
background:white;

transition:.3s;
cursor:pointer;

z-index:2;

}

/* DOT HOVER */

.event:hover .dot{

transform:translateY(-50%) scale(2);

background:#ff4d88;

box-shadow:0 0 15px rgba(255,77,136,.7);

}

/* CARD */

.card{

position:absolute;

bottom:35%;

width:280px;

background:rgba(25,25,45,.9);

backdrop-filter:blur(10px);

padding:18px;

border-radius:12px;

opacity:0;

transform:translateY(20px);

transition:.4s;

}

/* SHOW CARD */

.event:hover .card{

opacity:1;
transform:translateY(0);

}

/* IMAGE */

.card img{

width:100%;
height:180px;

object-fit:cover;

border-radius:8px;

margin:10px 0;

}

/* DATE */

.date{

font-size:12px;
opacity:.6;

}

/* TITLE */

.card h3{

font-size:18px;
margin-bottom:6px;

}

/* TEXT */

.card p{

font-size:14px;
opacity:.8;
line-height:1.4;

}

/* ANIMACION SCROLL */

.event{

opacity:0;
transform:translateY(40px);
transition:0.6s;

}

.event.show{

opacity:1;
transform:translateY(0);

}

/* MOBILE */

@media (max-width:768px){

/* TIMELINE MODO HISTORIA */

.timeline{

display:block;
height:100vh;

overflow-y:scroll;

scroll-snap-type:y mandatory;

}

/* QUITAMOS LA LINEA Y LOS PUNTOS */

.line,
.dot{
display:none;
}

/* CADA HITO OCUPA UNA PANTALLA */

.event{

height:100vh;

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

scroll-snap-align:start;

padding:40px 20px;

opacity:1;
transform:none;

}

/* TARJETA */

.card{

position:relative;

bottom:auto;
top:auto;
left:auto;

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

opacity:1;
transform:none;

padding:24px;

}

/* IMAGEN */

.card img{

width:100%;
height:260px;

object-fit:cover;

border-radius:12px;

margin:12px 0;

}

/* FECHA */

.date{

display:block;

font-size:14px;

margin-bottom:8px;

opacity:.7;

}

/* TITULO */

.card h3{

font-size:22px;

margin-bottom:10px;

}

/* TEXTO */

.card p{

font-size:16px;

line-height:1.6;

}

}