/*
Theme Name: FINAL Portfolio Theme
Theme URI: https://example.com
Author: Albert
Description: Functional version with direct PHP and clean asset loading
Version: 3.0
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body{
    cursor: none;
  }
  
  html, body {
    overflow-x: none;
    width: 100%;
  }
  
  /*HEADER*/

  .navbar{
    display: flex;
    grid-template-columns: 1fr 1fr;
    width: 90%;    /* ocupa todo el ancho */
    height: 110px;
    justify-content: space-between;
    padding: 0px 0px;
    margin: 0% 5% 0% 5%;
    position: fixed;
    top: 0;         /* posición desde arriba */
    left: 0;
    align-items: center;
    z-index: 1;
  }



  .menu{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px;

  }


  .menu2{
    display: grid;
    grid-template-rows: 1fr 1fr;
    padding: 20px;

  }




  /*Cubo setion*/

.cube-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: auto;
  width: auto;
  margin: 0% 4% 3% 8%;
  justify-content: center;
  margin-top: 8%;
  overflow: visible; /* <- AÑADIDO */
  position: relative; /* <- AÑADIDO por seguridad si hay z-index */
}




.hero-section {
  height: 550px;
  overflow: visible; /* <- AÑADIDO */
  display: flex;
  align-items: center;
  background-color:none;
  justify-content: center;
  background-color;none:
}

  a {
    text-decoration: none; /* quita el subrayado */
    color: inherit;         /* hereda el color del texto padre */
  }
  .left-text{

    display: grid;
    grid-template-columns: 1fr;
    height: 200px;
    margin-top: -22%;
    align-self: center;
   
  }

  .left-text .list-text{display: grid;grid-template-columns: 1fr 1fr 1fr;width: 100%;color: #111;font-family: "Instrument Sans";font-size: 20px;font-style: normal;font-weight: 400;line-height: normal;}


  .left-text h1{

    height: fit-content ;
  }


  /*PORTFOLIO*/

  .portfolio-section{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    width: auto;
    margin: 0% 5% 5% 5%;
    gap: 32px;
  }

  .project{
    max-width: 1200px;
    margin-bottom: 12%;

  }



.superior-text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 16px 0 8px;
  width: 100%;        /* ocupa el 100% del padre */
  max-width: 100%;    /* sin pasarse */
}


.project img {
  width: 100%;
  height: auto;
}
/* 3) Permite que los hijos (celdas) se reduzcan por debajo de su contenido “auto” */
.superior-text > * {
  min-width: 0;
  overflow-wrap: break-word;  /* rompe palabras largas */
}

  .tags{
    display: flex;
    gap: 12px;
    margin-left: auto;
  }

  .tag1{
    border: 1px solid #111;
    width: fit-content;
    height: fit-content;
    padding: 4px 12px;
    /* margin-left: auto; */
  }

  .tag2{
    border: 1px solid #111;
    width: fit-content;
    height: fit-content;
    padding: 4px 12px;
    border-radius: 100px;
  }


  .superior-text .slogan p{
    font-family: "Instrument Sans";
    font-size: 18px;
  }

  

/*ABOUT ME*/

.about-me{
    display: flex;
    justify-content: center;
    margin: 3% 20% 0% 20%;
    gap: 15%;
    margin-bottom: -15%!important;
}

.about-me   .presentacion-text{
    width: 55%;
    margin-top: 8;
    gap: 10%;
}

.parrafo-text{
    color: #333333;
    font-family: "Instrument Sans";
    font-size: 20px;
    font-weight: 200;
    font-style: normal;
    line-height: 175%;
}

video{
    border-radius:  50px;
    width:  260.4px;
    height: 462px;
}


#play-button {
    position: absolute;
    top: 30%;
    left: 52%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.289);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  #play-button::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 30px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    margin-left: 8px;
  }

  #video-container {
    position: relative;
    
    height: 100vh;}

/* NUEVO: asegura que spline-viewer tenga espacio */
.spline-wrapper {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* NUEVO: forzamos dimensiones correctas del cubo */
spline-viewer {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: none;
  display: block;
}

/*FOOTER*/

    footer > div {
        display: flex;
        grid-template-columns: 1fr 1fr;
        width: 90%;    /* ocupa todo el ancho */
        height: 90px;
        padding: 40px 0px;
        margin: 0% 5% 0% 5%;
        margin-top:40px;
        align-items: center;
        }
    
    footer h3 {
        margin-bottom: 10px;
        font-size: 16px;
        letter-spacing: 1px;
    }
    
    .menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .menu2{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .menu li {
        margin-bottom: 5px;
    }

    .menu2 li{
        margin-bottom: 5px;

    }
    
    .menu a {
        text-decoration: none;
        transition: opacity 0.2s;
        border: 1px solid;
        padding: 12px 20px;
        border-radius: 100px;
        margin-left: 12px;
        color: #111;
        font-family: "Instrument Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
    }
    .menu a:hover {
        opacity: 0.7;
    }
    
    .FOLLOW img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }
    

    footer{
        margin-bottom: 5%;
        margin-top: -10%;
    }
    footer > img {
        display: block;
        margin: 40px 5% 0;
    }

    .CONTACT, .FOLLOW {
        flex-direction: column;
        gap: 10px;
        color: #111;
        font-family: "Instrument Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
      

    .CONTACT{
        margin-right: 5%;
    }
      .social-icons {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }


      .imagen-inferior{
        width: 400px;
    
      }


      .menu3{
        height: auto;
      }



/* FOOTER poner popr encima los links */
    .circulo5 {
      /* ensure it doesn’t block clicks */
      pointer-events: none;

      /* if you still need it behind the footer, force it back: */
      position: absolute;
      z-index: 0;
    }

    .footer-container,
    .imagen-inferior {
      /* bring these containers forward */
      position: relative;
      z-index: 1;
    }


/**/
/* Gallery grid */
#other-projects {
  padding: 2rem 4.5rem;
  margin-bottom: 12rem;
}
#other-projects h2 {
  text-align: left;
  margin-bottom: 1rem;
  color: #111;
    font-family: "Instrument Sans";
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 24px;
}
#other-projects .gallery {
  width: 100%;
  height:100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* o auto-fit para responsive */
  gap: 1rem;
  justify-items: center; /* centra el contenido en horizontal */
  align-items: center;   /* centra el contenido en vertical */
}





#other-projects .gallery img {
  max-width: 100%;
  cursor: pointer;
  border-radius: 20px;
  transition: transform .2s;

}
#other-projects .gallery img:hover {
  transform: scale(1.05);
}

/* Lightbox overlay */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
}
#lightbox.lightbox-visible {
  opacity: 1;
  visibility: visible;
}
#lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
}
#lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  user-select: none;
}


/* FOOTER estructura general alineada con el header */
.footer-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 90%;
  margin: 0 auto;
  padding: 40px 0;
  gap: 32px; /* antes 60px */
}



/* Imagen SVG inferior alineada al contenido */
.imagen-inferior {
  width: 90%;
  margin: 40px auto 0;
}

.imagen-inferior img {
  width: 100%;
  max-width: 400px;
  display: block;
}




      h1{
        color: #111;
        font-family: "Instrument Sans";
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
      }


      h2{
        color: #111;
        font-family: "Instrument Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%; /* 28px */
        width: 70%;
      }



      p{
        color: #111;

        font-family: "Instrument Sans";
        font-size: 18px;
        font-style: italic;
        font-weight: 400;
        line-height: normal;
      }
      .especial-h2{
        color: #111;
        font-family: "Instrument Sans";
        font-size: 40px;
        font-style: italic;
        font-weight: 400;
        line-height: normal;
        margin-bottom: 12px;
        width: auto;
      }

/*FIGURAS*/

      .rectangle img {
        margin-bottom: 8%;
        width: 100%;
    }

    .rectangle2 {
        position: absolute;
        margin-top: -10%;
        display:none;
        z-index:-100;
    }

    .rectangle3{
        position: absolute;
        margin-left: 75%;
        margin-top: 0%;
    }

    
    .rectangle4{

        position: relative;
        margin-bottom:-10% ;
        z-index: -1;
    }



    .circulo3{
        width: 389px;
        height: 389px;
        flex-shrink: 0;
        border-radius: 389px;
        opacity: 0.5;
        background: rgba(3, 71, 198, 0.70);
        filter: blur(221.4174041748047px);
        position: absolute;
        margin-left: 80%;
        margin-top: -80%;
        z-index: -1;
    }


    .circulo2{
        position: absolute;
        width: 300.918px;
        height: 250.918px;  
        flex-shrink: 0;
        border-radius: 340.918px;
        background: rgba(136, 3, 198, 0.70);
        filter: blur(135.66297912597656px);
        z-index: -1;


    }

    .circulo1{
        position: absolute;
        width: 290.918px;
        height: 290.918px;
        flex-shrink: 0;
        border-radius: 340.918px;
        background: rgba(3, 91, 198, 0.7);
        filter: blur(135.66297912597656px);
        z-index: -1;
        margin-top: -50%;
        margin-left: 80%;
    }

    .circulo5{
            position: absolute;
            border-radius: 389px;
            opacity: 1;
            background: rgba(3, 191, 198, 0.7);
            filter: blur(155.66297912597656px);
            width: 389px;
            height: 389px;
            margin-left: -20px;
            margin-top: -50px;
            z-index: -1;
        flex-shrink: 0;
    }



    .project img:hover {
        transform: scale(1.03); /* 1.05 = 105% del tamaño original */
        transition: transform 0.4s ease;
      }




      .fade-in-section {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        will-change: opacity, transform;
      }
      
      .fade-in-section.visible {
        opacity: 1;
        transform: translateY(0);
      }


 /* === footer añadi === */

      .footer-container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        width: 90%;
        margin: 0 auto;
        padding: 40px 0;
        gap: 32px;
      }
      
      .imagen-inferior {
        width: 90%;
        margin: 40px auto 0 auto;
        padding: 0;
        z-index: 0;
        position: relative;
      }
      
      .imagen-inferior img {
        width: 100%;
        max-width: 400px;
        display: block;
      }


/* Cursor personalizado: borde gris, fondo transparente */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background-color: #333333;
  border: 1px solid transparent;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%) scale(1);
  transition:
    transform 0.3s cubic-bezier(0.25, 1.5, 0.5, 1),
    background-color 0.3s ease,
    border-color 0.4s ease;
}
      
      
      
      @media (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }
}
      

    @media (max-width: 768px) {
        /* === NAVBAR === */
        .navbar {   
          align-items: center;
          padding: 0px;
          gap: 12px;
        }
      
        .menu {
          flex-direction: column;
          align-items: center;
          gap: 10px;
          padding: 0;
          margin: 0;
        }
      
      
      .rectangle3{
        
         
          display:none;
          
          
      }
        .menu li {
          list-style: none;
        }
      
        /* === CUBE SECTION === */
        .cube-section { display: grid
            ;
                grid-template-columns: 1fr;
                height: auto;
                width: auto;
                margin: 0% 5% 3% 5%;
                justify-content: center;
                margin-top: 25%;
        }
        
        .left-text .list-text {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            width: 100%;
            font-size: 16px;
        }
    
      
        .left-text h1 {
          font-size: 2rem;
          text-align: center;
        
        }
      
        .list-text {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          padding: 0;
        }
      
        .hero-section {
          width: 95vw!important;
          height: 75vh!important;
          margin-bottom:-72px!important;
        
        }
      
        spline-viewer {
          width: 100% !important;
          height: 300px !important;
        }
      
      #play-button {
    position: absolute;
    top: 50%}

        .left-text .list-text {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            width: 100%;

        }
        /* === PROJECTS === */
        .portfolio-section {
          flex-direction: column;
          grid-template-columns: 1fr;
          padding: 0px;
        }
      
        .project img {
          width: 100% !important;
          height: auto !important;
        }
      
        .superior-text {
          flex-direction: column;
          gap: 8px;
        }
      
        .tags {
          flex-wrap: wrap;
          gap: 8px;

        }


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

      #other-projects {
        margin-bottom: 1.5rem;
        padding: 1rem 1.5rem;
      
      }


#other-projects .gallery img {
    height:205px!important;
    width:325px!important;
}


      
        /* === ABOUT ME === */




      

        .about-me {
          flex-direction: column;
          gap: 20px;
          padding: 5%;
          margin: 0% 0% 0% 0%;
            gap: 15%;
        }
       
        .parrafo-text {
          text-align: left;
          font-size: 16px;
          margin-bottom: 0%;
        }
        .especial-h2 {
            
            font-size: 2rem;}
        
        .about-me .presentacion-text{
            width: 100%;


        }
        #video-container {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 20px; /* ⬅ levantamos para evitar solapamiento */
          position: relative;
          z-index: 1;
        }
      
        video {
          width: 80%;
          height: auto;
        }
      
        /* === FOOTER === */
        footer {
          text-align: left;
          padding: 24px 16px;
        }
        
       

        .footer-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
          width: 90%;
          margin: 0 auto 64px;
          align-items: flex-start;
        }


        .menu2, .menu3 {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 6px;
          padding: 0;
          margin: 0;
        }
        
        .CONTACT, .FOLLOW {
          margin: 0;
          padding: 0;
        }
        
        
       
        
        .imagen-inferior {
          width: 90%;
          margin: 32px auto 0;
        }






        


      
        /* Oculta decoraciones si ocupan espacio */
       
        .circulo1,
        .circulo2,
        .circulo5 {
          display: none;
        }
        h2 {
            color: #111;
            font-family: "Instrument Sans";
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            line-height: 140%;
            width: 100%;
            
        }

        
      }