/* ---------------- RESET ---------------- */

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

    body{
      background:#0b0814;
      color:#f3f3f3;
      font-family:monospace;
      min-height:100vh;
      overflow-x:hidden;

      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

      background-size:40px 40px;
    }

/* ---------------- HEADER ---------------- */

.topbar{

  position:fixed;

  top:16px;

  left:50%;

  transform:translateX(-50%);

  width:max-content;

  z-index:1000;

  display:flex;

  justify-content:center;
}

/* NAV */

.topnav{

  display:flex;

  gap:14px;

  padding:10px 18px;

  background:#161022;

  border:3px solid #b266ff;

  box-shadow:6px 6px 0px #ff4fd8;
}

/* BOTONES */

.topnav a{

  color:#ffe45e;

  text-decoration:none;

  font-size:13px;

  letter-spacing:1px;

  padding:8px 14px;

  border:2px solid #ff4fd8;

  background:#221533;

  transition:.2s;
}

.topnav a:hover{

  transform:translate(-2px,-2px);

  box-shadow:4px 4px 0px #b266ff;

  color:white;
}

    /* ---------------- CONTAINER ---------------- */

    .container{

  width:90%;

  max-width:1300px;

  margin:auto;

  padding:120px 0 50px 0;
}

    /* ---------------- HERO ---------------- */

    .hero{
      display:grid;
      grid-template-columns:1.3fr 0.7fr;
      gap:40px;
      align-items:center;
      margin-bottom:40px;
    }

    .hero-left{
      border:4px solid #b266ff;
      padding:35px;
      background:#161022;
      box-shadow:10px 10px 0px #ff4fd8;
      position:relative;
    }

    .hero-left::before{
      content:"FICHA_DE_ESTUDIANTE.exe";

      position:absolute;
      top:-14px;
      left:20px;

      background:#0b0814;
      padding:0 10px;

      color:#b266ff;
      font-size:14px;
      letter-spacing:1px;
    }

    .hero h1{
      font-size:64px;
      line-height:1;

      margin-bottom:20px;

      color:#c792ff;

      text-shadow:4px 4px 0px #ff4fd8;
    }

    /* ---------------- SUBTITLE ---------------- */

    .subtitle{
      font-size:18px;
      color:#c792ff;

      margin-bottom:14px;

      letter-spacing:1px;
      font-weight:bold;
    }

    .description{
      color:#d8d8d8;
      line-height:1.8;
      font-size:15px;
    }
/* ---------------- BOTONES HERO ---------------- */

.hero-buttons{

  display:flex;

  gap:16px;

  margin-top:28px;

  flex-wrap:wrap;
}

.retro-button{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:12px 22px;

  border:3px solid #ffe45e;

  background:#221533;

  color:#ffe45e;

  text-decoration:none;

  font-size:14px;

  letter-spacing:1px;

  font-weight:bold;

  transition:.2s;

  box-shadow:6px 6px 0px #b266ff;
}

.retro-button:hover{

  transform:translate(-4px,-4px);

  background:#ff4fd8;

  color:#ffffff;

  box-shadow:10px 10px 0px #ffe45e;
}

/* ---------------- SCROLL SUAVE ---------------- */

html{
  scroll-behavior:smooth;
}
    /* ---------------- AVATAR ---------------- */

    .avatar-box{
      background:#161022;

      border:4px solid #ffe45e;

      padding:20px;

      text-align:center;

      box-shadow:10px 10px 0px #b266ff;
    }

    .avatar-box img{
      width:100%;
      max-width:260px;

      image-rendering:pixelated;

      border:4px solid #b266ff;
    }

    /* ---------------- SOCIALS ---------------- */

    .socials{
      margin-top:20px;

      display:flex;
      justify-content:center;
      gap:18px;
    }

    .socials a{
      width:52px;
      height:52px;

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

      border:3px solid #b266ff;
      background:#221533;

      transition:.2s;
    }

    .socials a:hover{
      transform:translate(-3px,-3px);

      box-shadow:4px 4px 0px #ff4fd8;
    }

    .socials img{
      width:24px;
      height:24px;
      object-fit:contain;
    }

    /* ---------------- SECTION ---------------- */

    .section{
      background:#161022;

      border:4px solid white;

      padding:30px;
      margin-bottom:35px;

      box-shadow:10px 10px 0px #b266ff;

      position:relative;
    }

    .section-title{
      position:absolute;

      top:-16px;
      left:20px;

      background:#0b0814;

      padding:0 12px;

      font-size:22px;
      letter-spacing:2px;

      color:#ffe45e;
    }

    .section p{
      margin-top:10px;

      line-height:1.9;

      color:#d6d6d6;
    }

    /* ---------------- EXPANDING YEARS ---------------- */

    .subjects-grid{

      display:flex;

      gap:20px;

      margin-top:20px;

      align-items:flex-start;
    }

    /* ---------------- YEAR CARD ---------------- */

    .year-card{

      flex:1;

      min-width:120px;

      min-height:160px;

      border:3px solid #ff4fd8;

      padding:20px;

      background:#221533;

      overflow:hidden;

      transition:
        flex .45s ease,
        transform .35s ease,
        box-shadow .35s ease;

      position:relative;

      z-index:1;
    }

/* ---------------- LINKS ---------------- */

.member-link{

  color:#ffe45e;

  text-decoration:none;

  transition:.2s;
}

.member-link:hover{

  color:#ffffff;
}
    /* EXPANSIÓN */

    .year-card:hover{

      flex:5;

      transform:translateY(-10px);

      box-shadow:
        0 0 0 4px #ffe45e,
        14px 14px 0px #b266ff;

      z-index:50;
    }

    .year-card h3{
      margin-bottom:20px;

      color:#c792ff;

      font-size:32px;
    }

    .year-card ul{
      list-style:none;
      padding-left:0;
    }

    /* ---------------- SUBJECTS ---------------- */

    .subject{
      position:relative;

      margin-bottom:16px;

      min-height:24px;

      cursor:pointer;
    }

    .subject span{
      display:block;

      transition:.25s;
    }

    .subject .front{
      opacity:1;
    }

    .subject .back{
      position:absolute;

      top:0;
      left:0;

      opacity:0;

      color:#ffe45e;
    }

    .subject:hover .front{
      opacity:0;
    }

    .subject:hover .back{
      opacity:1;
    }

    /* ---------------- PROJECTS ---------------- */

    .projects{

      margin-top:25px;

      display:grid;

      grid-template-columns:
      repeat(3, 1fr);

      gap:14px;

      max-height:0;

      opacity:0;

      overflow:hidden;

      transform:translateY(10px);

      transition:
        max-height .45s ease,
        opacity .35s ease,
        transform .35s ease;
    }

  /* ---------------- FOOTER ---------------- */

    .footer{

      margin-top:80px;

      padding:40px 0 20px 0;

      border-top:2px solid #1f1f1f;

      color:#f5f5f5;

      font-family:monospace;
    }

    .footer-grid{

      display:grid;

      grid-template-columns:repeat(3, 1fr);

      gap:80px;

      margin-bottom:35px;
    }

    .footer-column p{

      font-size:12px;

      line-height:1.8;

      margin-bottom:2px;

      text-align:left;
    }

    .footer-column strong{

      color:#67ff6b;

      font-weight:bold;
    }

    .footer-bottom{

      border-top:1px solid #222;

      padding-top:18px;

      margin-top:20px;

      width:100%;

      display:flex;

      justify-content:center;
    }

    .footer-bottom p{

      width:100%;

      max-width:1000px;

      font-size:10px;

      line-height:1.8;

      color:#d8d8d8;

      text-align:left;
    }







    /* APARECEN */

    .year-card:hover .projects{

      max-height:1200px;

      opacity:1;

      transform:translateY(0px);
    }

    /* ---------------- IMÁGENES ---------------- */

    .projects img{

      width:100%;

      aspect-ratio:1/1;

      object-fit:cover;

      border:3px solid #b266ff;

      image-rendering:pixelated;

      transition:.25s;

      cursor:pointer;
    }

    .projects img:hover{

      transform:scale(1.04);

      border-color:#ffe45e;
    }

    /* ---------------- IMAGE PREVIEW ---------------- */

    .image-preview{

      position:fixed;

      inset:0;

      background:rgba(0,0,0,0.9);

      display:flex;

      justify-content:center;

      align-items:center;

      opacity:0;

      pointer-events:none;

      transition:.3s;

      z-index:999;
    }

    /* ACTIVO */

    .image-preview.active{

      opacity:1;

      pointer-events:auto;
    }

    /* IMAGEN GRANDE */

   .image-preview img{

  width:auto;

  max-width:85vw;

  max-height:85vh;

  object-fit:contain;

  display:block;

  border:6px solid #b266ff;

  box-shadow:
    0 0 0 4px #ffe45e,
    20px 20px 0px #ff4fd8;

  image-rendering:pixelated;
}

    /* BOTÓN CERRAR */

    .close-preview{

      position:absolute;

      top:30px;

      right:40px;

      width:55px;

      height:55px;

      border:4px solid #ffe45e;

      background:#221533;

      color:white;

      font-size:28px;

      cursor:pointer;

      display:flex;

      justify-content:center;

      align-items:center;

      transition:.2s;
    }

    .close-preview:hover{

      transform:scale(1.08);

      background:#ff4fd8;
    }

    /* ---------------- FOOTER ---------------- */

    .footer{
      text-align:center;

      margin-top:40px;

      color:#888;

      font-size:14px;
    }

/* ---------------- BOTÓN VOLVER ARRIBA ---------------- */

#backToTop{

  position:fixed;

  bottom:30px;

  right:30px;

  width:58px;

  height:58px;

  border:3px solid #ffe45e;

  background:#221533;

  color:#ffe45e;

  font-size:26px;

  font-weight:bold;

  cursor:pointer;

  display:flex;

  justify-content:center;

  align-items:center;

  box-shadow:6px 6px 0px #b266ff;

  opacity:0;

  pointer-events:none;

  transform:translateY(20px);

  transition:.25s;

  z-index:999;
}

/* CUANDO APARECE */

#backToTop.show{

  opacity:1;

  pointer-events:auto;

  transform:translateY(0);
}

/* HOVER */

#backToTop:hover{

  background:#ff4fd8;

  color:white;

  transform:translate(-3px,-3px);

  box-shadow:10px 10px 0px #ffe45e;
}



    /* ---------------- RESPONSIVE ---------------- */

    /* TABLET */
    @media(max-width:1000px){

      .subjects-grid{
        flex-direction:column;
      }

      .year-card{
        width:100%;
        min-height:auto;
      }

      .year-card:hover{
        flex:1;
        transform:translateY(-4px);
      }

      .projects{
        grid-template-columns:repeat(2, 1fr);
      }

      .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:30px;
      }

    }

    /* MOBILE GRANDE */
    @media(max-width:900px){

      .hero{
        grid-template-columns:1fr;
      }

      .hero h1{
        font-size:48px;
      }

      .avatar-box{
        max-width:350px;
        margin:auto;
      }

      .portfolio-display img{
        height:340px;
      }

    }

    /* MOBILE */
    @media(max-width:768px){

      /* NAV */
      .topbar{
        top:0;
        left:0;
        right:0;
        transform:none;
        width:100%;
        padding:0;
      }

      .topnav{
        width:100%;
        justify-content:center;
        flex-wrap:wrap;
        gap:8px;
        padding:10px 12px;
        border-left:none;
        border-right:none;
        border-top:none;
        box-shadow:0 4px 0px #ff4fd8;
      }

      .topnav a{
        font-size:11px;
        padding:6px 10px;
      }

      /* CONTAINER */
      .container{
        width:95%;
        padding-top:100px;
      }

      /* HERO */
      .hero-left{
        padding:25px 20px;
      }

      .hero h1{
        font-size:38px;
      }

      .subtitle{
        font-size:15px;
      }

      .hero-buttons{
        gap:10px;
      }

      .retro-button{
        font-size:12px;
        padding:10px 16px;
      }

      /* SECTIONS */
      .section{
        padding:28px 18px 22px 18px;
      }

      .section-title{
        font-size:16px;
        top:-13px;
        letter-spacing:1px;
      }

      /* YEAR CARDS */
      .year-card h3{
        font-size:24px;
      }

      .projects{
        grid-template-columns:repeat(2, 1fr);
      }

      /* PORTFOLIO */
      .portfolio-slider{
        gap:10px;
      }

      .portfolio-display img{
        height:260px;
      }

      .slider-btn{
        padding:10px 14px;
        font-size:20px;
        border:3px solid #b266ff;
        background:#221533;
        color:#ffe45e;
        cursor:pointer;
      }

      /* FOOTER */
      .footer-grid{
        grid-template-columns:1fr;
        gap:24px;
      }

      /* BACK TO TOP */
      #backToTop{
        bottom:20px;
        right:16px;
        width:48px;
        height:48px;
        font-size:20px;
      }

    }

    /* MOBILE PEQUEÑO */
    @media(max-width:480px){

      .hero h1{
        font-size:30px;
      }

      .hero-left::before{
        font-size:10px;
        top:-11px;
      }

      .section-title{
        font-size:13px;
      }

      .topnav a{
        font-size:10px;
        padding:5px 8px;
      }

      .portfolio-display img{
        height:200px;
      }

      .projects{
        grid-template-columns:1fr;
      }

      .year-card h3{
        font-size:20px;
      }

      .footer-grid{
        gap:20px;
      }
    }

/* ---------------- PORTFOLIO ---------------- */

.portfolio-slider{

  width:100%;

  max-width:100%;

  overflow:hidden;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:20px;
}

/* CONTENEDOR IMAGEN */

.portfolio-display{

  width:100%;

  max-width:900px;

  overflow:hidden;
} 

/* IMAGEN */

.portfolio-display img{

  width:100%;

  max-width:100%;

  height:500px;

  object-fit:cover;

  display:block;

  border:4px solid #b266ff;
}

/* BOTONES */

.slider-btn{

  flex-shrink:0;
}