@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

:root{
  --ink:#111111;
  --placeholder:#d9d9d9;
  --border:#111111;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  background:#fbfafa;
  color:var(--ink);
  font-family:'Oswald', sans-serif;
  font-weight:400;
}

a{ color:inherit; text-decoration:none; }

/* El lienzo mantiene SIEMPRE la proporción 1440 x alto de la mesa de trabajo */
.canvas{
  position:relative;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  container-type:inline-size;
  overflow:hidden;
}
.canvas-900{ aspect-ratio:1440/900; }
.canvas-2162{ aspect-ratio:1440/2162; }

.el{ position:absolute; }

.placeholder{
  background:var(--placeholder);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-transform:uppercase;
  color:#333;
  font-size:1.1cqw;
}

/* ---------- Marca / título pequeño (Repositorio, Talleres, Sobre mí) ---------- */

.brand-link{
  font-size:1.667cqw;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* ---------- INICIO ---------- */

.inicio-title{
  font-size:6.667cqw;
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
}

.inicio-subtitle{
  font-size:2.361cqw;
  font-weight:400;
}

.nav-link{
  font-size:1.389cqw;
  font-weight:500;
  white-space:nowrap;
}


.carousel-box{
  display:flex;
  align-items:center;
  justify-content:center;
}

.carousel-stage{ position:relative; text-align:center; }

.carousel-word{
  display:none;
  font-size:3.333cqw;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.carousel-word.active{ display:inline-block; }
.carousel-word:hover{ text-decoration:underline; }

.carousel-arrow{
  position:absolute;
  bottom:4%;
  right:4%;
  width:7%;
  aspect-ratio:1/1;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  font-size:1.5cqw;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.carousel-arrow:hover{ background:#eee; }

/* ---------- Título de página (REPOSITORIO / TALLERES Y PROYECTOS / SOBRE MÍ) ---------- */

.page-title{
  font-size:5cqw;
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  width:100%;
}

/* ---------- REPOSITORIO ---------- */

.repo-box{
  font-size:1.25cqw;
  font-weight:500;
}
a.repo-box{ cursor:pointer; }
a.repo-box:hover{ background:#c8c8c8; }

.course-caption{
  font-size:1.25cqw;
  text-align:center;
  width:100%;
}

/* ---------- TALLERES Y PROYECTOS ---------- */

.gallery-caption{
  font-size:1.25cqw;
  font-weight:500;
  text-align:center;
  width:100%;
}

/* ---------- SOBRE MÍ ---------- */

.bio-text p{
  font-size:1.319cqw;
  line-height:1.6;
  margin:0 0 1.8cqw;
}

/* ---------- Pie de contacto (Talleres y Sobre mí) ---------- */

.contact-footer a{
  font-size:1.389cqw;
}

/* ---------- Transición al entrar / salir de una página ---------- */

@keyframes page-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

body.page-enter{ animation:page-fade-in .5s ease; }

body.page-leaving{
  opacity:0;
  transition:opacity .3s ease;
}

/* ---------- Efecto "se levanta" al pasar el mouse (todo excepto la marca superior izquierda) ---------- */

.nav-link,
.repo-box,
.gallery-item,
.contact-footer a{
  display:inline-block;
  transition:transform .25s ease;
}

.nav-link:hover,
.repo-box:hover,
.gallery-item:hover,
.contact-footer a:hover{
  transform:translateY(-6px);
}

.gallery-item .placeholder{ transition:none; }

.lift{ transition:transform .25s ease; }
.lift:hover{ transform:translateY(-6px); }

/* ---------- Marco de paneo vertical lento (Imagen 1, Talleres y Proyectos) ---------- */

.pan-frame{
  position:relative;
  overflow:hidden;
}

.pan-frame img{
  position:absolute;
  top:0;
  left:50%;
  width:160%;
  height:auto;
  display:block;
  animation:pan-vertical 24s ease-in-out infinite alternate;
}

.pan-wide img{ width:100%; }

@keyframes pan-vertical{
  from{ transform:translateX(-50%) translateY(0); }
  to{ transform:translateX(-50%) translateY(calc(-1 * var(--pan-distance, 0px))); }
}

@media (prefers-reduced-motion: reduce){
  body.page-enter{ animation:none; }
  .pan-frame img{ animation:none; }
}

@media (max-width:720px){
  .canvas{ container-type:normal; }
  .canvas-1100, .canvas-2200, .canvas-2000{ aspect-ratio:auto; height:auto; min-height:100vh; }
  .el{ position:static; display:block; width:100% !important; margin:0 auto 16px; }
  .inicio-title{ font-size:2.6rem; }
  .inicio-subtitle{ font-size:1.2rem; }
  .page-title{ font-size:1.8rem; margin:20px 0; }
  .brand-link{ font-size:1rem; }
  .repo-box{ height:120px; font-size:1rem; }
  .carousel-word{ font-size:1.6rem; }
  .placeholder{ font-size:.9rem; min-height:160px; }
  .bio-text p{ font-size:1rem; }
  .contact-footer{ display:flex; flex-direction:column; gap:10px; }
  .contact-footer a{ font-size:1rem; }
}