/*
Gold - #FAD52E
Alice Blue - #E3F2FD
Imperial red - #f2404c 
Rojo - #DD0426
Persian Indigo - #340068




TitulosNoH1
.ubuntu-medium {
  font-family: "Ubuntu", serif;
  Weight: 300 – 900;
  font-style: normal;
}

noTitulo
.lato-thin {
  font-family: "Lato", serif;
  font-weight: 100 - 900;
  font-style: normal;
}

*/

.cv {
  width: 1520px; /* corregido */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FAD52E;
}

html{
  height: 100%;
  margin: 0;
  padding: 0;
}

body{
  height: 100%;
  margin: 0;
  padding: 0;
}


/* Slide */

.carrusel-horizontal {
  display: flex;
  overflow-x: auto;
  
  height: 100vh;
  width: 100vw;
  gap: 20px;

  scroll-behavior: smooth;
  transition: transform 0.5s ease;

  overflow-y: hidden; /* 🔒 evita el scroll vertical */
  overscroll-behavior-y: contain; /* evita rebotes o arrastres verticales */
    overflow-x: auto;


  touch-action: pan-x; /* solo permite desplazamiento horizontal */
  scrollbar-width: none; /* Oculta la barra de scroll en Firefox */
  -ms-overflow-style: none; /* Oculta la barra de scroll en Internet Explorer y Edge */

  
}

.carrusel-horizontal::-webkit-scrollbar {
  display: none; /* Oculta la barra de scroll */
}

.slide {
  flex-shrink: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
 
  padding: 0;
  overflow: hidden;
    
}

/* Porfolio */

/* Viro */
.ViroApp {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

}


    .Vimg{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    }



  .MockUp_Viro {
  position: absolute;
    

  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%) scale(0.6);

  filter: drop-shadow(0 0 0.75rem #340068);
  z-index: 2;
}

.MockUp_Viro:hover {
  filter: none;
}


.logoViro {
  position: absolute;
  top: 5%;
  right: 3%;
  width: 80px;
  z-index: 1;

  scale: 1.2;

}

.textoVIRO {
  position: absolute;
  top: 60%;
  width:80%;
  height:50%;
}


.hastag {
  position: absolute;

  top: 20%;
  left: 25.3%;

  scale: 1.1;

  width:45%;
  height:55%;
  z-index: 3;
}
 

/* Espectador Nomada  */
.EspectadorN{

  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  
  position: relative;
  overflow: hidden;

}

.ENimg{
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.MockUp_movilEN{
  position: absolute;

  top: 32%;
  left: 25%;
  transform: translate(-50%, -50%);
  z-index: 2;

  scale: 0.6;
  filter: drop-shadow(0 0 0.75rem #340068);
}
.MockUp_movilEN:hover {
filter:none;}


.MockUp_ordenadorEN{
  position: absolute;

  top: 25%;
  left: 33%;
  transform: translate(-50%, -50%);
  z-index: 1;

  scale: 0.6;
  filter: drop-shadow(0 0 0.75rem #340068);
}
.MockUp_ordenadorEN:hover {
filter:none;}


.logoEN{
  position: absolute;
  top: 5%;
  right: 4%;
  width: 80px;
  z-index: 1;

  scale: 1.2;
  

}



.letraN{
  position: absolute;
  top: 60%;
  right: 3%;

  width:15%;
  height:40%;
}


.letraE{
  position: absolute;

  width:15%;
  height:40%;
} 


/* Prestashop  */

.Prestashop {

  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  
  position: relative;
  overflow: hidden;

}

.PSimg {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;   
}

.tituloPS{
  position: absolute;
  
  width:80%;
  height:25%;

  overflow: none;   

}


.MockUp_ordenadorPS{
  position: absolute;

  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  
  scale:0.6;
  filter: drop-shadow(0 0 0.75rem #340068);
}

.MockUp_ordenadorPS:hover {
  filter: none;
}


.pantallaPS{
  position: absolute;
  width: 55%;
  height: 99%;
  top: 4%;
  left: 41%;

  scale:0.7;
}


.pantallaPS-container {
  position: absolute;
  top: 4%;        /* Ajusta a la posición exacta de la pantalla dentro del mockup */
  left: 41%;
  width: 55%;
  height: 66%;     /* Define el alto visible de la pantalla del mockup */
  overflow-y: scroll; /* ⬅️ Esto activa el scroll interno */
  z-index: 2;
  mask-image: url('/img/prestashop/MockupPC.png'); /* opcional para recorte más limpio */
  -webkit-mask-image: url('/img/prestashop/MockupPC.png'); /* soporte Safari */
}


.Ecomerce{
  position: absolute;
  top: 30%;
  left: 30%;
  width:20%;
  height:10%;

  scale:0.7;
}

.textosPS {
  position: absolute;
  top: 80%;
  width:30%;
  height:10%;
}


/* Invitación */
.mensaje-final {
  background-color: #DD0426 ;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.mensaje-final.visible {
  opacity: 1;
  transform: scale(1);
}


.mensaje-final h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.mensaje-final p {
  font-size: 1.2rem;
}

.firma {
  text-decoration: none;
  font-style: italic;
  font-size: 1rem;
  color: #FAD52E;
}

.firma:hover {
  color: #340068;
}