@import url('https://fonts.googleapis.com/css2?family=Gasoek+One&family=Poppins:wght@400;600;700;800;900&display=swap');

:root{
  --teal:#025E73; --navy:#022840; --bg:#cfd2d4;
  --nav-h:72px; --line:#025E73;
  --stem:100px; --year-gap:12px;
  --stem-cross: 12px;
  --dot-size: 18px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,'Helvetica Neue',sans-serif;
  overflow:hidden;} /* sin barras del documento */

/* NAVBAR */
.navbar{position:relative;z-index:5;width:100%;min-height:var(--nav-h);
  background:rgba(232,239,243,.95);border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:space-between;padding:14px 20px;flex-wrap:wrap;}
.brand{font-family:'Gasoek One',cursive;letter-spacing:0.11em;color:var(--teal);
  font-size:clamp(22px,2.6vw,36px);white-space:nowrap;text-decoration:none;}
.navlinks{display:flex;gap:28px;align-items:center;justify-content:flex-end;flex:1;flex-wrap:wrap;}
.navbtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border:0;border-radius:999px;padding:12px 22px;font-weight:900;letter-spacing:.06em;
  background:#f4f7f9;color:var(--teal);box-shadow:0 6px 16px rgba(0,0,0,.10),inset 0 0 0 3px rgba(2,40,64,.15);}
.navbtn.is-active{background:var(--teal);color:#e9f3f6;box-shadow:0 8px 20px rgba(2,94,115,.35);}
@media (max-width:900px){
  .navlinks{gap:14px}
  .navbtn{padding:10px 16px;font-size:.9rem}
}

/* TIMELINE */
.timeline{height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;overflow:hidden;}
.track{position:relative;flex:1;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  padding:80px 0 180px;
  -ms-overflow-style:none; scrollbar-width:none; overscroll-behavior:contain;}
.track::-webkit-scrollbar{display:none;}
.items{position:relative;display:flex;align-items:center;gap:clamp(470px, 19vw, 700px);padding:0 90px;height:100%;}

/* Baseline (sin caps) */
.baseline{position:absolute; height:6px; background:var(--line); border-radius:2px;
  box-shadow:0 2px 0 rgba(0,0,0,.08) inset; z-index:0;}
.cap{display:none; position:absolute; width:14px; height:14px; border:4px solid var(--line); border-radius:60%; background:transparent; z-index:1; transform:translate(-50%,-50%);} /* ocultos */

/* Ítems comunes */
.item{position:relative; width:320px; height:100%; scroll-snap-align:center; z-index:2;
  --slotX:0px; --cardW:360px; --clearY:84px;}
.year{position:absolute; left:50%; transform:translateX(-50%); font-weight:900; letter-spacing:.12em; color:var(--navy); font-size:28px; text-align:center;white-space: nowrap;}

/* DOT (oculto por defecto) */
.dot{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; background:#0a8aa1; border:4px solid #013a47;
  border-radius:50%; z-index:3; top:var(--midY);
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}

/* STEM (oculto por defecto) */
.stem{
  position:absolute; left:50%; width:6px; background:var(--line);
  transform:translateX(-50%); z-index:1; border-radius:999px;
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}

/* Video ARRIBA (pos-bottom): el stem sube y cruza la línea */
.item.pos-bottom .stem{
  top: calc((var(--midY) - (var(--dot-size)/2)) - (var(--stem) + var(--stem-cross)));
  height: calc(var(--stem) + var(--stem-cross));
}

/* Video ABAJO (pos-top): el stem baja y cruza la línea */
.item.pos-top .stem{
  top: calc(var(--midY) + (var(--dot-size)/2));
  height: calc(var(--stem) + var(--stem-cross));
}

/* Posiciones de año */
.item.pos-bottom .year{ top:calc(var(--midY) + var(--stem) + var(--year-gap) - 60px); }
.item.pos-top .year{ top:calc(var(--midY) - var(--stem) - var(--year-gap) + 60px); transform:translate(-40%,-100%); }

/* --- POPUP VIDEO (sin fondo) --- */
.item.pos-bottom .card{ 
  position:absolute; left:50%; bottom:calc(100% - var(--midY) + var(--clearY)); top:auto; 
  transform:translate(calc(-50% + var(--slotX)),-18px);
  max-height:var(--cardMaxBottom, 40vh); overflow:visible; scrollbar-width:none;
}
.item.pos-top .card{ 
  position:absolute; left:50%; top:calc(var(--midY) + var(--clearY)); bottom:auto; 
  transform:translate(calc(-50% + var(--slotX)),18px);
  max-height:var(--cardMaxTop, 40vh); overflow:visible; scrollbar-width:none;
}
.card{
  width:var(--cardW);
  max-width:min(480px, 240vw);
  background:transparent; border:none; box-shadow:none; padding:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, transform .18s ease;
  z-index:5;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0;
}
/* Contenedor de video con recuadro y 16:9 */
.card .media{
  width:min(100%, 640px);
  max-width:calc(100% - 0px);
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
  border-radius:12px;
  border:2px solid rgba(2,40,64,.20);
  display:grid; place-items:center; margin:0 auto;
}
.card .media > video,
.card .media > img{
  width:100%; height:100%; object-fit:contain; display:block;
}
/* Audio variant (compact, no fixed aspect ratio) */
.card .media.is-audio{
  aspect-ratio:auto; background:transparent; border:none; display:block;
}
.card .media.is-audio > audio{ width:100%; display:block; }

/* --- BLOQUE DE TEXTO OPUESTO --- */
.item.pos-bottom .text-block{
  position:absolute; left:50%; top:calc(var(--midY) + var(--clearY));
  transform:translate(calc(-50% + var(--slotX)),18px);
  max-height:var(--cardMaxTop, 40vh);
}
.item.pos-top .text-block{
  position:absolute; left:50%; bottom:calc(100% - var(--midY) + var(--clearY));
  transform:translate(calc(-50% + var(--slotX)),-18px);
  max-height:var(--cardMaxBottom, 40vh);
}
.text-block{
  width:var(--cardW); max-width:min(520px, 60vw);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease;
  z-index:4; text-align:center; color:var(--teal);
}
.text-block h4{margin:0 0 8px; font-size:clamp(18px,1.6vw,20px); font-weight:800;}
.text-block p{margin:0; font-size:clamp(14px,1.2vw,16px); line-height:1.45;}

/* --- MARCADORES INICIO/FIN (círculos abiertos) --- */
.item.marker{ width:120px; }
.item.marker .ring{
  position:absolute; left:50%; top:var(--midY); transform:translate(-50%,-50%);
  width:32px; height:32px; border-radius:50%;
  border:5px solid var(--line); background:transparent; box-shadow:none;
  z-index:3;
}

/* Estado abierto: muestra video, texto, stem y dot */
.item.revealed .card,
.item.revealed .text-block,
.item.revealed .stem,
.item.revealed .dot{
  opacity:1; visibility:visible; pointer-events:auto;
}
.item.revealed .year{color:var(--teal);}

@media (max-width:980px){
  .items{gap:clamp(360px,22vw,560px);}
  .item{--cardW:520px; --clearY:76px;}
  .track{padding:130px 0 110px;}
  .year{font-size:22px}
}
@media (max-width:640px){
  .items{gap:clamp(300px,26vw,460px);}
  .item{width:260px; --cardW:460px; --clearY:70px;}
  .track{padding:120px 0 100px;}
  .year{font-size:20px}
}
@media (max-width:620px){
  .navbar{row-gap:10px;justify-content:center}
  .navlinks{order:2;width:100%;justify-content:center;flex-wrap:wrap}
  .navbtn{padding:8px 14px;font-size:.85rem}
  .brand{order:1;width:100%;text-align:left}
}