/*
Theme Name: franwp
Theme URI: https://www.franciscovaliente.com/
Author: Tu Nombre
Author URI: https://www.franciscovaliente.com/
Description: Tema personalizado para Francisco Valiente
Version: 1.0
*/

            /* Reset y base */




.language-selector {
position: fixed; /* Fija el elemento en la pantalla */
top: 42px; /* Distancia desde la parte superior */
right: 10px; /* Distancia desde el borde izquierdo */
z-index: 9999; /* Asegura que el selector esté por encima de otros elementos */

padding: 5px 20px; /* Espaciado interno */
border-radius: 5px; /* Bordes redondeados */

display: flex;
align-items: center;
justify-content: center;
font-size: 14px;


  mix-blend-mode: difference; 


}

.lang-btn {
  color: white;
  text-decoration: none;
  font-weight: normal;
  margin: 0 0px;

  mix-blend-mode: difference; 


  transition: color 0.3s ease; /* Transición suave para el cambio de color */
}


.lang-btn:hover {
  font-weight: bold;
}



.lang-btn.active {
    font-weight: bold;
}


.language-selector span {

  margin: 0 5px;

  mix-blend-mode: difference; 
-ms-mix-blend-mode: difference; /* Compatibilidad con IE */
}




            .hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -1 !important;
  user-select: none !important;
  transition: none !important; /* Por si hay animaciones */
}

.visible {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: auto !important;
  user-select: auto !important;
}


p {
  margin-bottom: 20px;
}

            * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
           
       
             
            }
            
            
            @font-face {
              font-family: 'Awesome Regular';
              src: url('https://www.franciscovaliente.com/assets/type/AwesomeSerif-LightRegular.otf');
            
            }
            
            
            @font-face {
              font-family: 'Awesome Italic';
              src: url('https://www.franciscovaliente.com/assets/type/AwesomeSerifItalic-LightReg.otf');
            
            }
            
            
            h1, h2, h3, h4, h5, h6 {
              margin: 0;
              padding: 0;
              font-size: inherit;
              font-weight: inherit;
              line-height: inherit;
            }
            
            
            body {
              font-family: 'Arial', sans-serif;
              color: #f9f9f9;
              opacity: 0;
              transition: opacity 1s ease;
               
            }
            
            body.loaded {
              opacity: 1;
            }
            
            
            
            body {
              background-color: white;
              transition: background-color 1s ease;
            }
            
            body.dark-mode {
              background-color: black;
            }
            
            
            
            
            
            
            
            
            /* Contenedor principal */
            .home {background-color: black;
              position: relative;
              min-height: 100vh;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding: 40px;
              overflow: hidden;
              color: white;
            
            }
            
            /* Capas de fondo */
            .bg-layer {
              position: absolute;
              top: 0; left: 0;
              width: 100%;
              height: 100%;
              background-size: cover;
              background-position: center center;
              will-change: transform;
              z-index: 0;
              transition: opacity 1s ease-in-out;
              pointer-events: none;
            
            }
            
            .bg-1, .bg-2 {
              z-index: 0;
            }
            
            .bg-1 {
              opacity: 1;
            }
            
            .bg-2 {
              opacity: 0;
            }
            
            
            .bg-1, .bg-2 {
              will-change: transform;
            }
            
            .bg-darken {
              will-change: opacity;
            }
            
            .fototitulo .foto {
              will-change: transform;
            }
            
            
            .bg-darken {
              position: absolute;
              top: 0; left: 0;
              width: 100%;
              height: 100%;
              background-color: black;
              opacity: 0;
              z-index: 1;
              pointer-events: none;
            }
            
            
            .hero-text {
              position: absolute;
              max-width: 800px;
              font-size: 24px;
              font-weight: 300;
              line-height: 1.4;
              text-align: left;
              color: white;
              bottom: 70px;
              z-index: 0;
              overflow: hidden;
              left: 80px;
               
            }
            /* Animación de líneas */
       .lines {
  overflow: hidden;
}

.lines span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0; /* Añadido para que empiece invisible */
  animation: slideUp 0.6s ease forwards;
  animation-delay: var(--delay);
}

.lines p {
  margin-bottom: 0;
}

@keyframes slideUp {
  to {
    transform: translateY(0);
    opacity: 1;  /* Termina visible */
  }
}
            
            .scroll-down
{
    position: absolute;
    bottom: 100px;
    right: 100px;
    transform: translate(-50%,-50%);
}
.scroll-down span:nth-child(2)
{
    animation-delay: -0.2s;
}
.scroll-down span:nth-child(3)
{
    animation-delay: -0.4s;
}
.scroll-down span
{
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
@keyframes animate
{
    0%
  {
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%
  {
        opacity: 1;
    }
    100%
  {
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}



            
            
            
            
            
            .navbar {
              
             z-index: 100;
        
              position: fixed;
            
            
            top: 0;
            right: 0;
              padding: 20px 100px;
                margin-right: 50px;


            
            
            
            }
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: black;
    transition: transform 0.3s ease;
    margin-left: auto;
    position: fixed;
    right: 100px;
    top: 25px;
    background-color: rgba(255, 255, 255, 0.2); /* Fondo más visible */
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Sombra suave */

    z-index: 9999;
    border: none;
}
            
            .line {
                width: 30px;
                height: 5px;
                background-color: grey;
            
                margin: 4px 0; /* espacio entre líneas */
                transition: transform 0.3s ease, opacity 0.3s ease;
                    
            
            }
            
            /* Transformación para la X */
            .hamburger.show .line:nth-child(1) {
              transform: translateY(7px) rotate(45deg); 
            }
            
            .hamburger.show .line:nth-child(2) {
               transform: translateY(-6px) rotate(-45deg);
            }
            
            .info {
                position: fixed;
                top: 0;
                right: 0;
                min-height: 100vh;
                min-width: 25vw;
            
                background-color: rgba(0, 0, 0, 0.15);
                backdrop-filter: blur(20px) saturate(180%);
                -webkit-backdrop-filter: blur(20px) saturate(180%);
                z-index: 99;
            
                padding: 20px;
                box-shadow: -4px 0 30px rgba(0, 0, 0, 0.1);
                border-left: 1px solid rgba(255, 255, 255, 0.3);
                border-top-left-radius: 16px;
                border-bottom-left-radius: 16px;
            
                color: white;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
            
                /* 👇 Oculto por defecto con transición */
                opacity: 0;
                transform: translateX(20px);
                pointer-events: none;
                transition: opacity 0.3s ease, transform 0.3s ease;
            }
            
            .info.show {
                opacity: 1;
                transform: translateX(0);
                pointer-events: auto;
            }
            
            
            /* Estilo del menú */
            .menu {
              display: flex;
              flex-direction: column;
              gap: 20px;
              padding-top: 100px;
            }
            
            /* Estilo de cada enlace */
            .menu a {
              text-decoration: none;
              font-size: 1.5rem;
              color: white;
             
              text-align: center;
              transition: color 0.2s ease;
                mix-blend-mode: difference;
            }
            
            .menu a:hover {
              color: white; /* o cualquier color que vaya con tu estilo */
            }
            
            

    .logo-home {
  position: absolute;
  top: 30px;
  left: 80px;
  width: 200px; /* Fija el ancho a 200px */
  height: auto; /* Ajusta la altura proporcionalmente */
  z-index: 999;
}

    .logo {
  position: absolute;
  top: 30px;
  left: 80px;
  width: 200px; /* Fija el ancho a 200px */
  height: auto; /* Ajusta la altura proporcionalmente */
  z-index: 999;
}
            
            
            
            
         


            
            
            
            
            
            
            
            
            
            
            .word-regular {
              font-family: 'Awesome Regular';
                line-height: 0.8;
            }
            
            .word-italic {
              font-family: 'Awesome Italic';
                line-height: 0.8;
            }
            
            .about-section {
              margin-top: 100px;
              margin-bottom: 550px;
            }
            
            /* Título: BHARATANATYAM / DANCER */
            .about-title {
              min-width: 60vw;
              max-width: 60vw;
              font-size: 8vw;
              white-space: nowrap;
              color: black;
              margin-left: 80px;
              line-height: 0.8;
            
            }
            
            /* Contenedor de foto y nombre */
            .about-hero {
              min-width: 65vw;
              max-width: 65vw;
              font-size: 8vw;
              color: black;
              float: right;
              margin-top: -50px;
            
              display: flex;
              align-items: flex-start;
            
            }
            
            /* Imagen */
            .about-hero .photo {
              width: 20vw;
              height: 15vw;
              background-image: url("https://franciscovaliente.com/assets/img/about.jpg");
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
            }
            
            /* Nombre: Francisco Valiente */
            .name-title {
              width: 38vw;
                line-height: 0.8;
              margin-left: 50px;
            }
            
            /* Texto biográfico */
            .about-text {
              min-width: 65vw;
              max-width: 65vw;
              float: right;
              margin-bottom: 100px;
              margin-top: 40px;
            }
            
            .bio {
              min-width: 35vw;
              max-width: 35vw;
              margin-top: 10px;
              color: black;
              float: left;
              font-size: 20px;
                line-height:1.4;
            }
            
            
            
            
            
            
            
            .about-section-movil {display: none;}
            
            
            
            
            
            .works-tittle{
              min-width: 60vw;
              max-width: 60vw;
              font-size: 8vw;
              white-space: nowrap;
              color: black;
              margin-left: 80px;
              line-height: 0.8;
            
            
            }
            
            .scroll-spacer {
              flex: 0 0 40px; /* mismo valor que el margin-right que quieres mantener */
            }
            
            
            
            .works-section {
              padding-top: 0px;
              margin-bottom: 100px;
              clear: both;
            
            }
            
            .scroll-container {
              overflow-x: auto;
              overflow-y: hidden;
              scroll-behavior: smooth;
              padding-bottom: 1rem;
              margin-top: 100px;
            }
            
            .scroll-track {
              display: flex;
              gap: 1rem;
            }
            
            /* Envoltorio clicable */
            .project-link {
              text-decoration: none;
              color: inherit;
              display: flex;
              flex-direction: column;
              align-items: center;
              flex: 0 0 calc((100vw - 5rem) / 3.5); /* 4 visibles aprox */
            }
            
            /* Imagen destacada como fondo */
            .project {
              width: 100%;
              height: 400px;
             
              background-size: cover;
              background-position: center;
              user-select: none;
              cursor: pointer;
              transition: transform 0.3s ease;
              background-color: grey;
            }
            
            .project:hover {
            
            }
            
            /* Título debajo */
            .project-title {
            
              font-weight: bold;
              font-size: 18px;
              text-align: left;
              color: black;
              
              margin-top: 10px;
            
            
              z-index: 98;
              width: 100%;
              color: black;
            }
            



                    .project-title a {
            
            
              font-size: 18px;
              color: white;
              text-decoration: none;
           
            }



            /* Márgenes de primeros/últimos */
            .project-link:first-child {
              margin-left: 100px;
            }
            
            .project-link:last-child {
              margin-right: 40px;
            }
            
            .scroll-buttons  {
              display: flex;
              justify-content: right;
              gap: 1rem;
              margin-top: -50px;
              margin-right: 100px;
              color: black;
              text-decoration: none;
            
            
            }
            
            .contact-btn {
              background-color: white;
              color: black;
              padding: 10px 20px;
              text-decoration: none;
              border-radius: 30px;
              font-weight: bold;
              font-size: 14px;
              border: 1px solid black;
              margin-right: 10px;
            }
            
            
            .contact-btn:hover {
              background-color: black;
              color: white;
              padding: 10px 20px;
              text-decoration: none;
              border-radius: 30px;
              font-weight: bold;
              font-size: 14px;
              border: 1px solid black;
              transition: 0.5s;
            }
            
            
            
            
            
            
            
            
            
            .awards {
             width: calc(100% - 200px);
              margin: 0 auto;
              padding: 0rem 0rem;
              color: #111;
            }
            
            .awards h2 {
               font-size: 8vw;
              font-family: 'Awesome Italic';
                line-height: 0.8;
              text-align: center;
              margin-bottom: 100px;
            
            
            
            
            }

            .awards table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  color: #333;
  table-layout: fixed; /* distribuye el ancho según porcentaje */
}

.awards td,
.awards th {
  padding: 1rem 0;
  border-top: 1px solid #eee;
  vertical-align: middle;
}

/* Distribución de columnas */
.left-cell {
  width: 20%;
  text-align: left;
}

.center-cell {
  width: 60%;
  text-align: center;
  white-space: nowrap; /* evita salto de línea */
}

.right-cell {
  width: 20%;
  text-align: right;
}

/* Enlaces dentro del centro */
.center-cell a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.center-cell a:focus,
.center-cell a:hover {
  text-decoration: underline;
  color: #666;
}

/* Iconos a la derecha */
.right-cell i {
  font-size: 1rem;
  color: inherit;
}

/* Efecto hover por fila */
.awards tbody tr:hover {
  background-color: #000;  /* fondo negro */
  color: #fff;             /* texto blanco para contraste */
  cursor: pointer;         /* para indicar que es clicable */
}

.awards tbody tr:hover a {
  color: #ccc;
}

/* Asegurar contraste para span oculto (opcional) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

            
            
            
            
            
            .services-section {
              margin: 60px 100px;
              margin-top: 150px;
              padding-bottom: 0px;
            
            }
            
            .services-header {
              text-align: right;
              margin-bottom: 0px;
               
            }
            
            
            
            
            
            
            
            
            
            .onlineclass {
            
            width: 100%;
              display: flex;
            
            }
            
            .onlineclass .foto {
              width: 40vw;
              min-height: 500px;
                background-image: url("https://www.franciscovaliente.com/assets/img/imgclasses.webp");
              background-repeat: no-repeat;
               background-size: cover;
              background-position: center;
              margin-top: 0px;
            }
            
            .onlineclass .texto {
              width: 35vw;
              margin-left: 100px ;
              height: 100px;
              font-size: 20px;
              float: right;
              line-height: 1.2;
              color: black;

            }
            
            .onlineclass .contact-btn{
            border: 1px solid white;
            
            }
            
            
            .textservices {
              font-size: 9vw;
            font-family: 'Awesome Italic';
              line-height: 0.8;
              text-align: left;
              margin-bottom: 50px;
        
            }
            
            
            
            
            
            
            
            
            
            body.dark-mode .hero-text,
            body.dark-mode .services-section,
            body.dark-mode p,
            body.dark-mode h1,
            body.dark-mode h2,
            body.dark-mode td,
            body.dark-mode .textservices,
            body.dark-mode .texto{
              color: white;
            }
            
            
            
            
            
            
.footer-name {
  cursor: pointer;
  max-width: 400px;
  margin-bottom:50px;
}

.footer-name-logo {
  width: 100%; /* Asegura que la imagen ocupe todo el espacio disponible */
  max-width: 400px; /* Fija el ancho máximo a 200px */
  max-height: 400px; /* Limita la altura a 200px */

  height: auto; /* Mantiene la proporción */
  object-fit: contain; /* Ajusta la imagen dentro del contenedor sin distorsionarla */
}

            
            .footer {
              background-color: black;
              color: white;
              display: flex;
              justify-content: space-between;
              padding: 100px 100px;
              padding-bottom: 50px;
              font-family:  sans-serif;
              flex-wrap: wrap;
            }
            
            .footer-left {
              display: flex;
              flex-direction: column;
            }
            
 
            
            .footer-email {
              font-size: 1.1rem;
              color: white;
            }
            
            .footer-right {
              display: flex;
              gap: 40px;
              align-items: flex-end;
              font-size: 1.1rem;
            }
            
            .footer a {
              color: white;
              text-decoration: none;
            }
            
            .footer a:hover {
              text-decoration: underline;
            }

























.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  column-gap: 40px;   /* espacio entre columnas (horizontal) */
  row-gap: 0px;      /* espacio entre filas (vertical) */
  width: calc(100vw - 200px);
  margin: 0 auto;
}

.project-item {
  
  background: white;
  padding-bottom: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-thumbnail img {
  width: 100%;
  min-height: 400px;
  max-height: 400px; /* fija un máximo si hay imágenes muy largas */
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.project-thumbnail img:hover {
  transform: scale(1.03);
}

.project-item h2 {
  margin-top: 0rem;
  font-weight: normal;
  font-size: 18px;
  text-align: left;
  color: black;
  
}



.page-wrapper{
  margin: 0;
  padding: 0;
}


.top-bar {
  text-align: center;
  margin-bottom: 100px;
  margin-top: 100px;
}

.section-title h1 {
  font-size: 8vw;
  font-family: 'Awesome Italic', serif; /* Asegúrate de tener esa fuente cargada */
  line-height: 0.8;
  margin: 0;
  padding: 0;
  color: black; /* opcional, si quieres blanco */
}





























.main-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: calc(100vw - 160px);
    margin: 0 auto;
    margin-top: 120px;
}



.visual-block img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.visual-block {
    flex: 1.5;
     
 
}

.text-block {
	color:black;
    flex: 1;
    font-size: 18px;
    line-height: 1.6;
    position: sticky;
    top: 100px;  /* Se fija cuando faltan 40px para llegar al top */
    height: fit-content;

}

.text-block a {
	color:grey

}

.text-block .page-counter {
    margin-bottom: 20px;
    font-weight: bold;
}





.more-projects {
    
    color: #fff;
    padding: 4em 100px;
    width: 100vw;
    margin-top: 100px;


    background-color: black;
}


.more-projects h2 {
    
  font-size: 4vw;
  font-family: 'Awesome Italic', serif;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  color: white;
  margin-bottom: 60px;
}





.projects-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2em;
    flex-direction: row; /* ¡Muy importante para escritorio! */
}

.project-card {
    flex: 1;
    min-width: 0;
    max-width: calc(33.333% - 1.33em); /* 3 columnas menos el gap */
}

.project-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 8px;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-titlee a {

    text-decoration: none;
    
    color: white;
}




.section-titlee h1 {
  font-size: 4vw;
  font-family: 'Awesome Italic', serif;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  color: black;
  margin-bottom: 60px;
}


























































































/* RESPONSIVE IPAD */
@media (max-width: 1400px) {





  .home {background-color: black;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 50px;
overflow: hidden;
  color: white;

}


    .logo-home {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 200px; /* Fija el ancho a 200px */
  height: auto; /* Ajusta la altura proporcionalmente */
  z-index: 999;
}

    .logo {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 200px; /* Fija el ancho a 200px */
  height: auto; /* Ajusta la altura proporcionalmente */
  z-index: 999;
}
       


.language-selector {
position: fixed; /* Fija el elemento en la pantalla */
top: 42px; /* Distancia desde la parte superior */
right: 110px; /* Distancia desde el borde izquierdo */
z-index: 9999; /* Asegura que el selector esté por encima de otros elementos */

padding: 5px 20px; /* Espaciado interno */
border-radius: 5px; /* Bordes redondeados */

display: flex;
align-items: center;
justify-content: center;
font-size: 14px;


  mix-blend-mode: difference; 
-ms-mix-blend-mode: difference; /* Compatibilidad con IE */

}




         .hamburger {

                z-index: 9999;
                   position: fixed;
                   right: 50px;
             top: 25px;
            }

    #loading-text.move-to-corner {
              position: absolute;
              top: 30px;
              left: 50px;
              font-size: 1.5rem; /* Reducir el tamaño del texto */
            
            }
            



    .hero-text {
              position: absolute;
              max-width: 800px;
              font-size: 24px;
              font-weight: 300;
              line-height: 1.4;
              text-align: left;
              color: white;
              bottom: 70px;
              z-index: 0;
              overflow: hidden;
              left: 50px;
               
            }

    .about-section {
              margin-top: 100px;
              margin-bottom: 0px;
            }

/* Título: BHARATANATYAM / DANCER */
            .about-title {
              min-width: 60vw;
              max-width: 60vw;
              font-size: 9vw;
              white-space: nowrap;
              color: black;
              margin-left: 50px;
              line-height: 0.8;
            
            }
            
            /* Contenedor de foto y nombre */
            .about-hero {
              min-width: 65vw;
              max-width: 65vw;
              font-size: 9vw;
              color: black;
              float: right;
              margin-top: -50px;
            
              display: flex;
              align-items: flex-start;
            
            }
            
            /* Imagen */
            .about-hero .photo {
              width: 20vw;
              height: 20vw;
              background-image: url("https://franciscovaliente.com/assets/img/about.jpg");
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
            }
            
            /* Nombre: Francisco Valiente */
            .name-title {
              width: 38vw;
                line-height: 0.8;
              margin-left: 50px;
            }
            
            /* Texto biográfico */
            .about-text {
              min-width: 65vw;
              max-width: 65vw;
              float: right;
              margin-bottom: 0;
            }
            
            .bio {
              min-width: 50vw;
              max-width: 50vw;
              margin-top: 40px;
              color: black;
              float: left;
              font-size: 20px;
                line-height:1.4;
                margin-bottom: 10px;
            }
            



            
              .works-section {
              padding-top: 150px;
              margin-bottom: 100px;
              clear: both;

            
            }
            
            .works-tittle{
              min-width: 60vw;
              max-width: 60vw;
              font-size: 9vw;
              white-space: nowrap;
              color: black;
              margin-left: 50px;
              line-height: 0.8;
              margin-top: -50px;
            
            
            }


.project-link:first-child {
  margin-left: 50px;
}


     .scroll-buttons  {
              display: flex;
              justify-content: right;
              gap: 1rem;
              margin-top: -50px;
              margin-right: 50px;
              color: black;
              text-decoration: none;
            
            
            }
.project-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 calc((100vw - 5rem) / 2.5); /* 4 visibles aprox */
}







.awards {
 width: calc(100% - 100px);
  margin: 0 auto;
  padding: 0rem 0rem;
  color: #111;

}

.awards h2 {
   font-size: 9vw;
   font-weight: medium;

  text-align: center;
  margin-bottom: 70px;
  margin-top: 0px;





}






.services-section {
min-width: calc(100% - 100px);
margin: 0;
padding-left: 50px;
padding-right: 50px;
margin-top: 150px;
margin-bottom: 100px;

}

.services-header {
  text-align: right;

   
}








.onlineclass {


  display: flex;

}

.onlineclass .foto {
  width: 35vw;
  min-height: 500px;
  background-color: blue;

}

.onlineclass .texto {
  width: 45vw;
  margin-left: 50px ;
  height: 100px;
  font-size: 20px;
  float: right;
  line-height: 1.4;

}

.onlineclass .contact-btn{
border: 1px solid white;

}


.textservices {
  font-size:9vw;
  white-space: nowrap;
  color: black;
  font-weight: normal;
  line-height: 0.9;
  font-family: 'Awesome Italic';
   
     
}

   .footer {
              background-color: black;
              color: white;
              display: flex;
              justify-content: space-between;
              padding: 50px 50px;
              padding-bottom: 50px;
              font-family:  sans-serif;
              flex-wrap: wrap;
            }
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  column-gap: 40px;   /* espacio entre columnas (horizontal) */
  row-gap: 0px;      /* espacio entre filas (vertical) */
  width: calc(100vw - 100px);
  margin: 0 auto;
}


































.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  column-gap: 40px;   /* espacio entre columnas (horizontal) */
  row-gap: 0px;      /* espacio entre filas (vertical) */
  width: calc(100vw - 50px);
  margin: 0 auto;
}



.visual-block {
    flex: 1;
 
 
}

.text-block {
    flex: 1;
    font-size: 18px;
    line-height: 1.4;
    position: sticky;
    top: 70px;  /* Se fija cuando faltan 40px para llegar al top */
    height: fit-content;

}





.project-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 8px;
}



.main-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: calc(100vw - 100px);
    margin: 0 auto;
    margin-top: 120px;
}


.more-projects {
    
    color: #fff;
    padding: 4em 40px;
    width: 100vw;
    margin-top: 100px;


    background-color: black;
}


.more-projects h2 {
    
  font-size: 5vw;
  font-family: 'Awesome Italic', serif;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  color: white;
  margin-bottom: 60px;
}

.section-titlee h1 {
  font-size: 5vw;
  font-family: 'Awesome Italic', serif;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  color: black;
  margin-bottom: 60px;
}

}






















































































/* RESPONSIVE iphone */
@media (max-width: 800px) {



.logo-home {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Esto mueve el logo exactamente al centro */
  
  width: 150px; /* Fija el ancho a 200px */
  height: auto; /* Ajusta la altura proporcionalmente */
  z-index: 999;
}


    .logo {
  position: absolute;
  top: 25px;
  left: 15px;
  width: 150px; /* Fija el ancho a 200px */
  height: auto; /* Ajusta la altura proporcionalmente */
  z-index: 999;
}
       



.language-selector {
position: fixed; /* Fija el elemento en la pantalla */
top: 35px; /* Distancia desde la parte superior */
right: 70px; /* Distancia desde el borde izquierdo */
z-index: 9999; /* Asegura que el selector esté por encima de otros elementos */

padding: 5px 20px; /* Espaciado interno */
border-radius: 5px; /* Bordes redondeados */

display: flex;
align-items: right;
justify-content: right;
font-size: 14px;


  mix-blend-mode: difference; 
-ms-mix-blend-mode: difference; /* Compatibilidad con IE */

}



       #loading-text.move-to-corner {
         position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 60px; /* Reducir el tamaño del texto */
            
            }


                    .home {background-color: black;
              position: relative;
              min-height: 60vh;
              max-height: 60vh;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding: 40px;
              overflow: hidden;
              color: white;
            
            }

          

           .scroll-down
{
    position: absolute;
    bottom: 150px;
    right: 50%;
    transform: translate(-50%,-50%);
}




      .hamburger {

                   position: fixed;
                   right: 15px;
             top: 15px;
            }


nav ul {
  display: none
}

.contact .contact-btn {
display: none;
}




.about-section{display: none;}

.about-section-movil {
  display: block; /* Cambié inline-block por block para facilitar el centrado */
  padding: 0vw;
  color: black;
  margin-top: 50px;
  margin-bottom: 35px;
  min-width: calc(100% - 30px);
  max-width: calc(100% - 30px);
  margin-left: auto;
  margin-right: auto; /* Esto centra el bloque horizontalmente */
}
.about-section-movil .titutlo{

  font-size:15vw;
  line-height: 1; 
  
   margin-bottom: 35px;
   text-align: left;
   
}

.about-section-movil .foto {

display: none;
  margin: 0 auto;

}

.about-section-movil .texto {
    font-size:18px;
 

   margin: 0 auto;
 line-height: 1.3;
} 



     .works-tittle{
              min-width: 100vw;
              max-width:100vw;
              font-size: 15vw;
              white-space: nowrap;
              color: black;
              margin-left: 0px;
              line-height: 0.8;
              margin-top: 0px;
              text-align: left;
              padding-left: 15px;
              margin-bottom: -50px;
            
            
            }




.works-section {
  padding-top: 50px;
  margin-bottom: 40px;
  clear: both;  text-align: center;

}

     .project {
              width: 100%;
              height: 400px;
             border-radius: 5px;
              background-size: cover;
              background-position: center;
              user-select: none;
              cursor: pointer;
              transition: transform 0.3s ease;
              background-color: grey;
            }
            
            .project:hover {
            
            }
            
            /* Título debajo */
            .project-title {
            
              font-weight: bold;
              font-size: 18px;
              text-align: left;
              color: black;
              
              margin-top: 10px;
            margin-bottom: 15px;
            
              z-index: 98;
              width: 100%;
              color: black;
            }


.project-link {
  margin-bottom: 50px;
}

.project-link:first-child {
  margin-left: 5vw;
}
.scroll-buttons {
  display: none
}

.scroll-buttons-movil {display: block; margin-left: 5vw; text-align: center; margin-top: 10px}


.right-cell {
  display: none;
}

.left-cell {
  display: none;
}
.awards {
 width: calc(100% - 30px);
  margin: 0 auto;
  padding: 0rem 0rem;
  color: #111;
}


.awards h2 {
   font-size: 15vw;
   font-weight: medium;

  text-align: left;
  margin-bottom: 2rem;




}


.home {background-color: black;
  position: relative;
  min-height:100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 
overflow: hidden;
  color: white;

}


.hero-text {
display: none;
   
}

.services-section {
  
padding-bottom: 200px}








     .scroll-buttons  {
              display: flex;
              justify-content: right;
              gap: 1rem;
              margin-top: -50px;
              margin-right: 20px;
              color: black;
              text-decoration: none;
              display:none;
            
            
            }


.services-section {
min-width: calc(100vw - 30px);
margin: 0;
padding-left: 0px;
padding-right: 0px;
margin-top: 30px;
clear: both;
margin-bottom: 250px;

}

.services-header {
  text-align: right;
  margin-bottom: 25px;
   
}








.onlineclass {
  max-width: 100vw;

  
  /* Esta línea asegura apilamiento vertical */
  display: flex;
  flex-direction: column;
}

.onlineclass .foto {
 width: calc(100vw - 10vw);
  height: 400px;
  background-color: blue;
  margin-top: 10px;
  margin-left: 5vw;
  display: none;

}

.onlineclass .texto {
 width: calc(100vw - 30px);
  font-size: 18px;
  line-height: 1.4;
  margin-left: 15px;
   margin-top: 35px;

}




.textservices {

  white-space: nowrap;
  color: black;
  font-weight: normal;
  line-height: 0.9;
  font-size: 15vw;
    width: 100%;
    text-align: left;
     
}







.info {
    position: fixed;
    top: 0;
    right: 0;
    min-height: 40vh;
    min-width: 100vw;

    background-color: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: 99;

    padding: 20px;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.1);
       border-left: 0px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;

    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);

    /* 👇 Oculto por defecto con transición */
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .menu {
              display: flex;
              flex-direction: column;
              gap: 20px;
              padding-top: 60px;
            }


.info.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

  .scroll-container {
    overflow: visible;
  }

  .scroll-track {
    display: block;
  }

  .project-link {
    width: calc(100vw - 30px);
    margin: 1rem auto;
  }

  .project {
    height: auto;
    aspect-ratio: 4/3;
  }

  .scroll-buttons {
    display: none;
  }

  .project-link:first-child,
  .project-link:last-child {
    margin-left: auto;
    margin-right: auto;
  }


             .footer {
              background-color: black;
              color: white;
              display: flex;
              justify-content: space-between;
              padding: 20px 20px;
              padding-bottom: 50px;
              font-family:  sans-serif;
              flex-wrap: wrap;
            }
            
            .footer-left {
              display: flex;
              flex-direction: column;
            }
            
            .footer-name {
  cursor: pointer;
  max-width: 200px;
  margin-bottom:50px;
}

.footer-name-logo {
  width: 100%; /* Asegura que la imagen ocupe todo el espacio disponible */
  max-width: 200px; /* Fija el ancho máximo a 200px */
  max-height: 200px; /* Limita la altura a 200px */

  height: auto; /* Mantiene la proporción */
  object-fit: contain; /* Ajusta la imagen dentro del contenedor sin distorsionarla */
}

  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    gap: 30px; /* Espacio general entre secciones */
  }

  .footer-left {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .footer-name {
    font-size: 8vw;
    margin-bottom: 45px; /* Mayor espacio debajo del nombre */
  }

  .footer-email {
    font-size: 14px;
    margin-bottom: -20px; /* Menor espacio antes de las redes */
  }

  .footer-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    font-size: 14px;
  }

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 15px;
  row-gap: 15px;
  width: calc(100% - 30px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.project-item {
  background: white;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;       /* Eliminamos márgenes extra */
  padding: 0;      /* Opcional, por si no usás padding */
}

.project-thumbnail img {
  width: 100%;
  min-height: 250px;
  max-height: 400px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.project-thumbnail img:hover {
  transform: scale(1.03);
}

.project-item h2 {
  margin: 0;       /* Elimina márgenes arriba y abajo */
  font-weight: normal;
  font-size: 18px;
  text-align: left;
  color: black;
}

.page-wrapper {
  margin: 0;
  padding: 0;
}

.top-bar {
  text-align: center;
  margin-bottom: 60px;
  margin-top: 60px;
}

.section-title h1 {
  font-size: 15vw;
  font-family: 'Awesome Italic', serif;
  line-height: 0.8;
  margin: 0;
  padding: 0;
  color: black;
}






















    .main-content {
        flex-direction: column;
        width: calc(100vw - 30px); /* menos margen horizontal para móviles */
        margin-top: 60px;
    }

    .text-block {
        position: static; /* quita el sticky en móviles */
        top: auto;
            order: -1;
    }


      .projects-grid {
    flex-direction: column; /* fuerza el apilado */
    gap: 1.5em;
  }

  .project-card {
    max-width: 100% !important; /* fuerza 1 por fila */
    flex: none;                 /* evita que crezcan/encojen */
  }

  .more-projects h2 {
    
  font-size: 8vw;
  font-family: 'Awesome Italic', serif;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  color: white;
  margin-bottom: 60px;
}

.section-titlee h1 {
  font-size: 8vw;
  font-family: 'Awesome Italic', serif;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  margin-top: 60px;
  color: black;
  margin-bottom: 40px;
}
.contact-btn {
  text-align: center;
  margin-top: 10px;
  font-weight: normal;  /* "regular" no es un valor válido en CSS, usa "normal" */
  width: 100%;
  display: block; /* Asegura que el botón sea un bloque y ocupe el 100% */
}

}