@charset "UTF-8";
/*!
Theme Name: THE10
Theme URI: http://underscores.me/
Author: Carlos Barreiro García
Author URI: https://barrei.ro
Description: Template for THE10
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: the10
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

THE10 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@font-face {
  font-family: "InterStatic";
  font-style: normal;
  font-weight: 800;
  src: url(https://cdn.jsdelivr.net/gh/rsms/inter@master/docs/font-files/InterDisplay-Bold.woff2) format("woff2");
}
@font-face {
  font-family: "InterStatic";
  font-style: normal;
  font-weight: 900;
  src: url(https://cdn.jsdelivr.net/gh/rsms/inter@master/docs/font-files/InterDisplay-Black.woff2) format("woff2");
}
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Inter", sans-serif;
  background-color: #000;
}

/* Canvas por encima, pero transparente */
canvas.webgl {
  position: fixed;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

canvas.canvas-interactive {
  pointer-events: auto;
  /* No necesitamos definir cursor aquí, lo haremos directamente en JS */
}

.content {
  position: relative;
  z-index: 2;
}

section.spacer {
  height: 1170vh; /* Altura para controlar el scroll */
}

.intro-words {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
}

.word {
  position: absolute;
  top: 50vh;
  font-size: 130px;
  font-weight: 900;
  color: white;
  transform-origin: center;
  transform-style: preserve-3d;
  perspective: 1000px;
  opacity: 0; /* Empiezan invisibles y GSAP los controla */
  left: 50%; /* Centrado horizontal */
  transform: translateY(100%);
  letter-spacing: 5px;
  will-change: transform, opacity;
}

/* Contenedor para el grupo "WE BELIEVE IN" */
.we-belive-in-wrapper {
  position: absolute;
  width: 100%;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -100%);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  z-index: 11;
  white-space: nowrap;
  transform-style: preserve-3d;
  perspective: 1200px;
}

.we-belive-in-wrapper .word {
  font-weight: 900;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  opacity: 1;
  margin: 0 20px; /* Espacio entre palabras */
}

.logo-initial-block {
  z-index: 20;
  top: 50vh;
  left: 50vw;
  position: fixed;
  width: 65vw;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 1200px;
}

.logo-initial-block img {
  width: 100%;
  transition: transform 0.1s ease-out;
  will-change: transform;
  transform-style: preserve-3d;
  perspective: 800px;
}

/* El resto de las palabras siguen siendo absolutas */
.word:not(.word-we):not(.word-believe):not(.word-in) {
  position: absolute;
  transform: translate(-50%, 0);
}

.video-elements {
  opacity: 1;
  position: relative;
  z-index: 20;
  will-change: transform;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0); /* semi-transparente */
  z-index: 51;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
  color: white;
  font-weight: bold;
  font-size: 1rem;
}

body.menu-open .fixed-header {
  transition: background 0s linear 1s; /* sin duración, pero con delay */
  background: #000;
}

.fixed-header .nav a {
  color: white;
  margin-left: 45px;
  text-decoration: none;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 24px;
}

.fixed-header .nav a:hover {
  text-decoration: underline;
}

.fixed-header .logo img {
  width: 200px;
}

.fixed-header .menu-button {
  position: relative;
  width: 35px;
  height: 40px;
  cursor: pointer;
  transition: transform 0.2s ease-out;
}

.fixed-header .menu-button:hover {
  transform: rotate(-90deg);
}

.fixed-header .menu-button .menu-line {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #FFF;
  width: 35px;
  height: 12px;
  transition: all 0.2s ease-out;
}

.fixed-header .menu-button .menu-line:nth-child(2) {
  top: 14px;
}

.fixed-header .menu-button .menu-line:nth-child(3) {
  top: 28px;
}

.fixed-header .menu-button .menu-line:nth-child(4) {
  width: 12px;
  height: 40px;
}

body.menu-open .fixed-header .menu-button .menu-line:nth-child(1) {
  transform: rotate(45deg);
  top: 14px;
}

body.menu-open .fixed-header .menu-button .menu-line:nth-child(2) {
  left: 100px;
}

body.menu-open .fixed-header .menu-button .menu-line:nth-child(3) {
  transform: rotate(-45deg);
  top: 14px;
}

body.menu-open .fixed-header .menu-button .menu-line:nth-child(4) {
  opacity: 0;
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: rgb(0, 0, 0);
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  font-size: 14px;
  color: white;
  font-weight: 300;
}

.fixed-footer .legal-links a {
  color: white;
  text-decoration: none;
  margin: 0 5px;
  font-size: 13px;
}

.fixed-footer .legal-links a:hover {
  text-decoration: underline;
}

.fixed-footer .social-icons img {
  width: 20px;
  height: 20px;
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.loader-logo {
  width: 300px;
  animation: pulse 1.5s infinite alternate;
}

.loader-progress {
  width: 300px;
  height: 4px;
  background-color: #333;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: white;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.loader-text {
  color: white;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 3px;
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
/* Añadir al final de tu CSS actual */
/* Clases para facilitar las animaciones de transición */
.word, .logo-initial-block {
  will-change: transform, opacity; /* Optimiza para animaciones */
  transition: transform 0.3s ease-out; /* Añade una transición suave base */
}

/* Asegura que todos los elementos de texto tengan una posición inicial estable */
.intro-words {
  transform-style: preserve-3d; /* Mejora la calidad de las animaciones 3D */
}

/* Ajusta la animación de float para que se vea mejor durante la transición */
@keyframes floatTransition {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -150vh, 0);
  }
}
.sound-button {
  position: fixed;
  bottom: 80px;
  right: 30px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.sound-button {
  flex-direction: row;
  gap: 10px;
  padding: 0 15px;
  width: auto;
  height: 54px;
  min-width: 150px;
}

.sound-label {
  font-size: 14px;
  color: white;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@keyframes pulse-muted {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.sound-button.muted {
  animation: pulse-muted 2s infinite;
}

.sound-button:hover {
  transform: scale(1.05);
}

.sound-icon {
  position: relative;
  width: 20px;
  height: 20px;
}

.speaker-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  filter: invert(1);
}

.sound-wave {
  position: absolute;
  width: 2px;
  height: 8px;
  border: 2px solid white;
  border-left: none; /* Abrimos por la izquierda */
  border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  left: 50%;
  top: 17%;
  opacity: 0;
  transform: scale(0.6);
  transition: transform 0.3s ease;
}

.sound-wave:nth-child(2) {
  left: 12px;
  transform: scale(0.8);
}

.sound-wave:nth-child(3) {
  left: 16px;
  transform: scale(1);
}

.sound-wave:nth-child(4) {
  left: 20px;
  transform: scale(1);
}

.sound-button:not(.muted) .sound-wave {
  opacity: 1;
  animation: pulse-ring 1.5s infinite ease-in-out;
}

.sound-button:not(.muted) .sound-wave:nth-child(2) {
  animation-delay: 0s;
}

.sound-button:not(.muted) .sound-wave:nth-child(3) {
  animation-delay: 0.2s;
}

.sound-button:not(.muted) .sound-wave:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes pulse-ring {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}
.sound-off-line {
  position: absolute;
  width: 13px;
  height: 2px;
  background-color: white;
  top: 50%;
  left: 95%;
  opacity: 1;
  transform-origin: center;
  transition: opacity 0.3s ease;
}

.sound-off-line.line1 {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sound-off-line.line2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.sound-button:not(.muted) .sound-off-line {
  opacity: 0;
}

@keyframes wavePulse {
  0%, 100% {
    height: 8px;
    transform: scaleY(0.8);
  }
  50% {
    height: 18px;
    transform: scaleY(1.4);
  }
}
/* Estilos para el menú desplegable */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000;
  z-index: 50;
  #transition: opacity 0.5s ease, visibility 0.5s;
  transition: transform 0.5s ease;
  overflow: auto;
  overflow-x: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  transform: translateX(100%);
}

.menu-overlay.active {
  transform: translateX(0);
}

.menu-content {
  width: 100%;
  height: 100%;
  padding: 80px 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.menu-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
}

.menu-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.menu-nav li {
  margin: 0;
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  transition-delay: calc(0.1s * var(--i, 0));
}

.menu-overlay.active .menu-nav li {
  transform: translateY(0);
  opacity: 1;
}

.menu-link {
  font-family: "Inter", sans-serif;
  font-size: 17.4vh;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  letter-spacing: 2px;
  position: relative;
  padding: 0 20px;
  transition: color 0.4s ease;
  text-align: left;
  padding-left: 0;
  line-height: 0.9;
  display: flex;
  overflow: hidden;
}

.menu-link .menu-link-video {
  width: 0;
  transition: width 0.4s ease;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.menu-link .menu-link-video video {
  width: 100%;
  height: 15vh;
  max-height: 169px;
  object-fit: cover;
  border-radius: 1.3vw;
  transition: width 0.5s ease-in-out;
  display: block;
}

.menu-link:hover .menu-link-video {
  width: 26.625vh;
}

.menu-link .menu-link-text {
  position: relative;
  white-space: nowrap;
}

.menu-link:hover {
  gap: 45px;
}

.menu-link .menu-link-text::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background-color: #fff;
  transition: width 0.4s ease;
}

.menu-link:hover {
  color: rgb(255, 255, 255);
}

.menu-link:hover .menu-link-text::before {
  width: 100%;
}

.menu-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.6s;
}

.menu-overlay.active .menu-footer {
  opacity: 1;
  transform: translateY(0);
}

.menu-social {
  display: flex;
  gap: 20px;
}

.menu-social a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.menu-social a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.menu-info {
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.menu-info p {
  margin: 5px 0;
}

/* Mejorar animación del botón de menú */
.fixed-header .menu-button {
  z-index: 1001; /* Asegura que esté por encima del overlay */
}

.fixed-header .menu-button .menu-line {
  transition: transform 0.4s ease, top 0.4s ease, opacity 0.4s ease;
}

.fixed-header .menu-button.open .menu-line:nth-child(1) {
  transform: rotate(45deg);
  top: 20px;
}

.fixed-header .menu-button.open .menu-line:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}

.fixed-header .menu-button.open .menu-line:nth-child(3) {
  transform: rotate(-45deg);
  top: 20px;
}

.fixed-header .menu-button.open .menu-line:nth-child(4) {
  opacity: 0;
}

/* Ajustes para asegurar visibilidad del logo incluso con el menú abierto */
.fixed-header .logo {
  position: relative;
  z-index: 1001;
}

/* Animación para el cambio de color del logo cuando el menú está abierto */
.fixed-header .logo img {
  transition: filter 0.3s ease;
}

.menu-open, .popup-open {
  overflow: hidden; /* Previene scroll cuando el menú está abierto */
}

/* Media queries para responsive */
@media (max-width: 768px) {
  .menu-link {
    font-size: 8vw;
  }
  .menu-nav li {
    margin: 2px 0;
  }
  .menu-footer {
    flex-direction: column;
    gap: 20px;
  }
  .menu-social {
    justify-content: center;
  }
  .menu-info {
    text-align: center;
  }
}
.essence-title {
  position: fixed;
  top: -150vh;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10vw;
  font-weight: 900;
  color: white;
  pointer-events: none;
  z-index: 30;
  text-shadow: -8px 8px 7px rgba(0, 0, 0, 0.5);
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  color: white;
  padding: 40px;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  border-radius: 10px;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  background: rgba(0, 0, 0, 0.5);
}

.popup.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.popup .popup-content {
  max-width: 875px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2.4vh;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: justify;
  margin: 0 auto;
  margin-top: 12vh;
}

.popup .popup-content p {
  text-align: justify;
}

.popup .popup-content p div {
  text-align: justify;
}

.popup-title {
  text-align: center;
  position: fixed;
  font-size: 8vh;
  opacity: 0;
  font-weight: 900;
  line-height: 0.5;
  margin-top: 10px;
  font-family: "InterStatic", sans-serif;
  color: transparent;
  -webkit-text-stroke: 2px white;
  paint-order: stroke fill;
  transform-origin: center;
  z-index: 1001;
  top: 80vh;
  text-shadow: 0px 0px 25px rgba(255, 255, 255, 0.7);
  left: 54vw;
  transform: translate(-50%, -50%) rotateX(-63deg) rotateY(2deg) rotateZ(-1deg);
}

.popup-close-button-wrapper {
  position: sticky;
  display: flex;
  top: 0;
  justify-content: flex-end;
  padding: 20px 45px;
}

.popup-close-button {
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 10;
  position: relative;
}

.popup-close-button .line1,
.popup-close-button .line2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35px;
  height: 14px;
  background-color: white;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.popup-close-button .line1 {
  transform: translate(-50%, -50%) rotate(45deg);
}

.popup-close-button .line2 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.popup-close-button:hover .line1 {
  transform: translate(-50%, -50%) rotate(135deg);
}

.popup-close-button:hover .line2 {
  transform: translate(-50%, -50%) rotate(-135deg);
}

.essence-elements {
  z-index: 20;
}

.believe-lateral {
  font-family: "InterStatic", sans-serif;
  position: fixed;
  top: -20px;
  left: 15vw;
  z-index: 10;
  font-size: 17vh;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px white;
  paint-order: stroke fill;
  transform-origin: center;
  transform: translate(-50%, -250%) rotate(-90deg);
}

.stars-wrapper {
  position: relative;
  width: 100%;
  height: 800vh; /* ajusta según la altura de tu imagen */
  z-index: 11;
  background-color: black;
  overflow: hidden;
}

.stars-bg {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 800vh;
  background-image: url("/resources/stars-bg3.webp");
  background-size: cover;
  background-repeat: repeat-x;
  background-position: top left;
  z-index: 0;
  pointer-events: none;
  background-attachment: fixed;
}

.stars-content {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  text-align: center;
  color: white;
  font-size: 2rem;
  padding: 0;
  width: 100vw;
}

.believe-lateral {
  display: none !important;
}

.popup-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  will-change: transform, opacity;
}

.webgl-stars {
  position: fixed;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  z-index: 3; /* Por encima del canvas principal (z-index: 2) */
  pointer-events: none;
  opacity: 0;
}

/* Cuando la sección stars está activa */
body.stars-ready .webgl-stars {
  pointer-events: auto;
}

/* Sección Legends */
.legends-wrapper {
  position: relative;
  width: 100%;
  min-height: 700vh; /* Altura para controlar el scroll */
  z-index: 11;
  overflow: hidden; /* Cambiar de visible a hidden para el video */
  color: #FFF;
}

.legends-container {
  z-index: 2;
  position: relative;
}

.legends-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  /* Inicialmente cortado completamente (no visible) */
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.1s linear; /* Transición muy suave para el scroll */
}

.legends-wrapper .legends-title-wrapper {
  top: 50vh;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50vw;
}

.legends-wrapper .legends-title-wrapper .legends-title {
  font-size: 15vh;
  font-weight: 900;
  margin: 0;
  text-align: center;
}

.legends-wrapper .legends-title-wrapper .legends-subtitle {
  width: 40vw;
  max-width: 645px;
  text-align: center;
  font-size: 3vh;
  font-weight: 500;
  margin: 0 auto 0;
}

.legends-wrapper .legends-gallery {
  position: absolute;
  top: 0;
  left: 50vw;
}

.legends-wrapper .legends-gallery {
  height: 70vh;
  top: 50vh;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  gap: 40px;
  overflow: visible;
}

.legends-wrapper .legends-gallery .legend-card {
  height: 100%;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

.legends-wrapper .legends-gallery .legend-card:nth-child(1) {
  position: absolute;
  top: -100vh;
  left: -100vw;
  scale: 0.8;
  z-index: 3;
  transform: rotate(-12deg);
}

.legends-wrapper .legends-gallery .legend-card:nth-child(2) {
  position: absolute;
  top: -100vh;
  left: 100vw;
  scale: 0.8;
  z-index: 4;
  transform: rotate(6deg);
}

.legends-wrapper .legends-gallery .legend-card:nth-child(3) {
  position: absolute;
  top: 100vh;
  left: -100vw;
  scale: 0.8;
  z-index: 1;
  transform: rotate(-3deg);
}

.legends-wrapper .legends-gallery .legend-card:nth-child(4) {
  position: absolute;
  top: 100vh;
  left: 100vw;
  scale: 0.8;
  z-index: 2;
  transform: rotate(-7deg);
}

/*
.legends-wrapper .legends-gallery .legend-card:nth-child(1) {
  position: absolute;
  top: -24vh;
  left: -13vw;
  scale: 0.8;
  z-index: 3;
  transform: rotate(-12deg);
}

.legends-wrapper .legends-gallery .legend-card:nth-child(2) {
  position: absolute;
  top: -21vh;
  left: 20vw;
  scale: 0.8;
  z-index: 4;
  transform: rotate(6deg);
}

.legends-wrapper .legends-gallery .legend-card:nth-child(3) {
  position: absolute;
  top: 32vh;
  left: -9vw;
  scale: 0.8;
  z-index: 1;
  transform: rotate(-3deg);
}


.legends-wrapper .legends-gallery .legend-card:nth-child(4) {
  position: absolute;
  top: 28vh;
  left: 20vw;
  scale: 0.8;
  z-index: 2;
  transform: rotate(-7deg);
}
*/
.legends-wrapper .legends-gallery .legend-card:nth-child(5) {
  margin-left: 422vh;
}

.legends-wrapper .legends-gallery .legend-card img {
  height: 100%;
}

.legends-wrapper .legends-gallery .legend-card .legend-info {
  position: absolute;
  top: 0;
  left: 55px;
  width: 44vh;
}

.legends-wrapper .legends-gallery .legend-card .legend-info h3 {
  font-size: 8vh;
  text-transform: uppercase;
  font-weight: 900;
  margin: 0;
  line-height: 0.95;
}

.legends-wrapper .legends-gallery .legend-card .legend-info p {
  font-size: 1.86vh;
}

body.legends-ready .legends-wrapper .legends-title-wrapper {
  position: fixed;
}

body.legends-ready .legends-wrapper .legends-gallery {
  position: fixed;
}

/* REEMPLAZAR la sección de efectos holográficos en style.css */
.legends-wrapper .legend-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.1s ease-out;
  border-radius: 1.3vw;
}

.legends-wrapper .legend-card img {
  position: relative;
  z-index: 1;
  border-radius: 1.3vw;
  transition: filter 0.3s ease;
}

/* Brillo sutil que sigue al mouse */
.legends-wrapper .legend-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1.3vw;
  background: radial-gradient(500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 80%);
  opacity: calc(var(--hover-opacity, 0) * 1);
  z-index: 2;
  transition: none; /* Controlado completamente por GSAP */
  pointer-events: none;
}

/* Gradiente holográfico muy sutil */
.legends-wrapper .legend-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1.3vw;
  background: linear-gradient(calc(var(--mouse-x, 50%) * 0.3deg + var(--mouse-y, 50%) * 0.3deg), rgba(255, 255, 255, 0.02) 0%, rgba(200, 255, 255, 0.04) 25%, rgba(255, 200, 255, 0.04) 50%, rgba(255, 255, 200, 0.04) 75%, rgba(255, 255, 255, 0.02) 100%);
  opacity: calc(var(--hover-opacity, 0) * 1);
  z-index: 3;
  transition: none; /* Controlado completamente por GSAP */
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Estados hover - usando variables CSS para control total */
.legends-wrapper .legend-card.card-hovering {
  --hover-opacity: 1;
  filter: brightness(1.05) contrast(1.05) saturate(1.1);
  transition: filter 0.3s ease;
}

.legends-wrapper .legend-card.card-hovering img {
  filter: brightness(1.02);
  transition: filter 0.3s ease;
}

/* Variables CSS para control dinámico */
.legends-wrapper .legend-card {
  --mouse-x: 50%;
  --mouse-y: 50%;
  --hover-opacity: 0;
}

/* Mejoras sutiles en la información */
.legends-wrapper .legend-info {
  z-index: 10;
  transition: all 0.3s ease;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.legends-wrapper .legend-card.card-hovering .legend-info {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0, 0, 0, 0.8);
}

.legends-wrapper .legend-info h3 {
  transition: all 0.3s ease;
}

.legends-wrapper .legend-card.card-hovering .legend-info h3 {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

/* Variables CSS para control dinámico */
.legends-wrapper .legend-card {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* Optimización móvil */
@media (max-width: 768px) {
  .legends-wrapper .legend-card::before,
  .legends-wrapper .legend-card::after {
    display: none;
  }
  .legends-wrapper .legend-card.card-hovering {
    filter: brightness(1.02) contrast(1.02);
    transform: scale(1.01) !important;
  }
}
/* Desactivar durante transiciones GSAP */
body:not(.legends-ready) .legends-wrapper .legend-card {
  pointer-events: none;
}

body.legends-ready .legends-wrapper .legend-card {
  pointer-events: auto;
}

#scrolldown {
  position: fixed;
  bottom: 10vh;
  left: 50vw;
  width: 50px;
  z-index: 100;
  transform: translate(-50%, -50%);
}

.menu-open #scrolldown {
  display: none;
}

#scrolldown img {
  width: 100%;
}

.stars-wrapper .stars-bg {
  display: none; /* Ocultamos el fondo HTML ya que ahora está integrado en el canvas */
}

/* Título STARS en HTML */
.stars-title {
  position: fixed;
  top: 56%;
  left: 49.8%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  font-weight: 900;
  color: white;
  font-family: "Inter", sans-serif;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em;
  will-change: transform, opacity;
}

/* Star Cards HTML Styles */
.star-cards-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.stars-ready .star-cards-container {
  opacity: 1;
  pointer-events: auto;
}

.star-card {
  position: absolute;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;
  /* Usar aspect-ratio para mantener proporciones */
  aspect-ratio: 1/1.454545; /* width / height */
  /* Tamaños dinámicos - serán controlados por JS */
  width: 15vw; /* Valor por defecto, será sobreescrito */
  min-width: 8vw;
  /* Altura automática basada en aspect-ratio */
  height: auto;
}

.star-card.flipped {
  position: fixed;
  top: 50vh !important;
  transform: translate(-50%, -50%) scale(1) rotate(-90deg) !important;
  left: 50vw !important;
  transition: all 1s ease;
  z-index: 100 !important;
}

/* Solución simple: usar viewport units para el contenedor rotado */
.star-card.flipped .video-container-back {
  transform: rotate(90deg);
  transform-origin: center;
  /* Usar dimensiones fijas basadas en viewport */
  width: auto;
  height: 40vw; /* Aproximadamente 16:9 */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -35.5vw;
  margin-top: -37.5vh;
  aspect-ratio: 16/9;
}

/* El wrapper mantiene las dimensiones del container */
.star-card.flipped .video-wrapper-back {
  width: 100%;
  height: 100%;
  position: relative;
}

.star-card.flipped .vimeo-player-back {
  width: 100%;
  height: 100%;
  border-radius: 1.5vw;
}

/* Botón de cerrar */
.star-card.flipped .video-close-button-back {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 21;
}

.star-card.animate-flip-back {
  transition: all 1s ease;
  z-index: 100 !important;
}

.star-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantener aspecto sin distorsión */
  display: block;
  border-radius: 1.5vw;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.star-card.left {
  transform: rotate(1deg) rotateX(-4deg) rotateY(-7deg);
}

/* Posiciones iniciales */
.star-card[data-index="0"] {
  z-index: 30;
}

.star-card[data-index="1"] {
  z-index: 29;
}

.star-card[data-index="2"] {
  z-index: 28;
}

.star-card[data-index="3"] {
  z-index: 27;
}

.star-card[data-index="4"] {
  z-index: 26;
}

.star-card[data-index="5"] {
  z-index: 25;
}

/* EFECTOS HOVER PARA STAR CARDS - Añadir al final de style.css */
.star-card .star-card-inner {
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.1s ease-out;
  border-radius: 1.5vw;
}

.star-card .star-card-inner img {
  position: relative;
  z-index: 1;
  border-radius: 1.5vw;
  transition: filter 0.3s ease;
}

/* Brillo sutil que sigue al mouse */
.star-card .star-card-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1.5vw;
  background: radial-gradient(500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 80%);
  opacity: calc(var(--hover-opacity, 0) * 1);
  z-index: 2;
  transition: none; /* Controlado completamente por GSAP */
  pointer-events: none;
}

/* Gradiente holográfico muy sutil */
.star-card .star-card-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1.5vw;
  background: linear-gradient(calc(var(--mouse-x, 50%) * 0.3deg + var(--mouse-y, 50%) * 0.3deg), rgba(255, 255, 255, 0.02) 0%, rgba(200, 255, 255, 0.04) 25%, rgba(255, 200, 255, 0.04) 50%, rgba(255, 255, 200, 0.04) 75%, rgba(255, 255, 255, 0.02) 100%);
  opacity: calc(var(--hover-opacity, 0) * 1);
  z-index: 3;
  transition: none; /* Controlado completamente por GSAP */
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Estados hover - usando variables CSS para control total */
.star-card .star-card-inner.card-hovering {
  --hover-opacity: 1;
  filter: brightness(1.05) contrast(1.05) saturate(1.1);
  transition: filter 0.3s ease;
}

.star-card .star-card-inner.card-hovering img {
  filter: brightness(1.02);
  transition: filter 0.3s ease;
}

/* Variables CSS para control dinámico */
.star-card .star-card-inner {
  --mouse-x: 50%;
  --mouse-y: 50%;
  --hover-opacity: 0;
}

/* Optimización móvil */
@media (max-width: 768px) {
  .star-card .star-card-inner::before,
  .star-card .star-card-inner::after {
    display: none;
  }
  .star-card .star-card-inner.card-hovering {
    filter: brightness(1.02) contrast(1.02);
    transform: scale(1.01) !important;
  }
}
/* Desactivar durante transiciones GSAP */
body:not(.stars-ready) .star-card .star-card-inner {
  pointer-events: none;
}

body.stars-ready .star-card .star-card-inner {
  pointer-events: auto;
}

.star-card-inner {
  perspective: 1200px;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.star-card-content {
  transition: transform 1.2s ease;
  transform-style: preserve-3d;
  position: relative;
  height: 100%;
  width: 100%;
}

.star-card-content.flipped {
  transform: rotateY(540deg);
}

.star-card .face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1.5vw;
}

.star-card .face.front {
  z-index: 2;
}

.star-card .face.front::after {
  position: absolute;
  display: block;
  z-index: 200;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
  opacity: 1;
  background: linear-gradient(90deg, rgba(0, 150, 255, 0.2) 0%, rgba(0, 200, 255, 0.6) 50%, rgba(0, 150, 255, 0.2) 100%);
}

/* Clase para quitar el efecto cuando la carta se anima */
.star-card.moving .face.front::after {
  opacity: 0;
}

.star-card .face.back {
  transform: rotateY(180deg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0; /* Quitar padding para que el video ocupe todo */
  box-sizing: border-box;
  color: white;
  position: relative;
}

.video-container-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5vw;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.9);
  display: none; /* Oculto por defecto */
  z-index: 10;
}

.video-wrapper-back {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.5vw;
  overflow: hidden;
}

.video-wrapper-back .vimeo-player-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 1.5vw;
  object-fit: cover;
}

/* Botón de cerrar dentro de la carta */
.video-close-button-back {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: all 0.3s ease;
  opacity: 0.8;
}

.video-close-button-back:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
  opacity: 1;
}

.video-close-button-back::before,
.video-close-button-back::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: white;
  border-radius: 1px;
}

.video-close-button-back::before {
  transform: rotate(45deg);
}

.video-close-button-back::after {
  transform: rotate(-45deg);
}

.card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2vw;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

/* Efecto de transición suave */
.video-container-back {
  transition: opacity 0.3s ease;
}

/* Estilos para el sistema de video - Formato TikTok */
.video-container {
  position: fixed;
  top: 50%;
  z-index: 35;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease, transform 0.4s ease;
  width: auto;
  height: 40vw;
  left: 50vw;
  aspect-ratio: 16/9; /* Proporción vertical típica de TikTok */
}

.video-container.active {
  opacity: 1;
  pointer-events: auto;
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%; /* Altura completa del contenedor */
  background: rgba(0, 0, 0, 0.9);
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

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

.video-close-button {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
}

.video-close-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.video-close-button::before,
.video-close-button::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: white;
  border-radius: 1px;
}

.video-close-button::before {
  transform: rotate(45deg);
}

.video-close-button::after {
  transform: rotate(-45deg);
}

.video-title {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  color: white;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  opacity: 0.9;
}

.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.video-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Z-indexes para mantener el orden correcto */
.video-overlay {
  z-index: 30;
}

.video-container {
  z-index: 135;
}

.star-cards-container {
  z-index: 40; /* Star cards siempre por encima */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .star-card.flipped .video-close-button-back {
    width: 25px;
    height: 25px;
    top: -10px;
    right: 6px;
  }
  .video-close-button-back::before,
  .video-close-button-back::after {
    width: 12px;
  }
}
/* Estilos adicionales para mejor integración visual */
@media (max-width: 480px) {
  .video-container {
    height: 70vh;
  }
}
.media-wrapper {
  position: relative; /* Asegúrate de que tenga position */
  z-index: 11; /* Incrementa el z-index */
  background-image: url("/resources/media-bg.webp");
  background-color: #000;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  padding: 70px 0;
  overflow: hidden;
}

.wpcf7-form .submit-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Tus estilos existentes */
}

/* Asegurar que cuando legends está activo, media-wrapper sigue por encima */
body.legends-ready ~ .media-wrapper,
.media-wrapper {
  z-index: 11 !important;
}

.media-wrapper .media-title {
  margin: 0px 0 50px;
  line-height: 1;
  color: white;
  font-size: 12vw;
  font-weight: 900;
  text-transform: uppercase;
  position: relative;
  font-family: "InterStatic", sans-serif;
  display: flex;
  gap: 50px;
  justify-content: center;
}

.media-wrapper .media-title .media {
  color: transparent;
  -webkit-text-stroke: 1px white;
  paint-order: stroke fill;
}

.media-wrapper .slick-slide iframe {
  transition: scale 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  max-width: 350px !important;
  margin: 0 auto !important;
  transform: translateX(15%); /* Por defecto a la derecha */
}

/* Slide actual */
.media-wrapper .slick-slide.slick-current iframe {
  transform: translateX(0);
}

/* Slide inmediatamente anterior al actual */
.media-wrapper .slick-slide.slick-current + .slick-slide iframe {
  transform: translateX(-25%);
}

/* Slide inmediatamente anterior al actual (si existe) */
.media-wrapper .slick-slide:has(+ .slick-current) iframe {
  transform: translateX(25%);
}

.media-wrapper .slick-slide:not(.slick-center) iframe {
  scale: 0.6;
}

.media-wrapper .slick-slide.slick-current.slick-active.slick-center iframe {
  scale: 0.8;
}

.slick-prev, .slick-next {
  width: 60px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.4s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

/* 👇 CAMBIO: Usar border en lugar de triángulos */
.slick-prev::after, .slick-next::after {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  background: transparent; /* 👈 CLAVE para evitar líneas */
}

.slick-next::after {
  transform: rotate(45deg);
  margin-left: -2px;
}

.slick-prev::after {
  transform: rotate(-135deg);
  margin-right: -2px;
}

.slick-prev:hover, .slick-next:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

.slick-prev {
  left: 4vw;
}

.slick-next {
  right: 4vw;
}

.social-buttons {
  display: flex;
  gap: 50px;
  margin-top: 50px;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
}

.social-buttons .social-button {
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 40px;
  font-weight: 100;
  border: 1px solid #FFF;
  border-radius: 50px;
  padding: 10px 20px;
  overflow: hidden;
}

.social-buttons .social-button:hover {
  transform: scale(0.95);
}

.social-buttons .social-button .social-button-content {
  color: #FFF;
  text-decoration: none;
  z-index: 2;
  position: relative;
}

.social-buttons .social-button .social-button-content .social-arrow {
  filter: invert(1);
  transition: filter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 30px;
  margin-left: 10px;
}

.social-buttons .social-button:hover .social-button-content .social-arrow {
  filter: invert(0);
}

.social-buttons .social-button .rounded-btn__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  left: 50%;
  background: #FFF;
  width: 31.25rem;
  height: 31.25rem;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 1;
}

.social-buttons .social-button:hover .rounded-btn__bg {
  transform: translateX(-50%) scale(1.75);
}

.social-buttons .social-button:hover .social-button-content {
  color: #000;
}

.contact-title-wrapper {
  line-height: 1;
  color: white;
  font-size: 15vw;
  font-weight: 900;
  text-transform: uppercase;
  position: relative;
  text-align: right;
  margin: 50px 50px 20px 0;
  transition: transform 0.4s ease;
  transform-origin: bottom;
}

.contact-title-wrapper .contact-title-line {
  content: "";
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 18vw;
  height: 1px;
  background: white;
  transition: all 0.4s ease;
}

.contact-title-wrapper:hover {
  transform: skewX(10deg);
}

.contact-title-wrapper:hover .contact-title-line {
  height: 20px;
  transform: skewX(-10deg) translateX(21px);
}

.contact-form-wrapper {
  margin: 0 auto;
  padding: 0 50px 100px;
}

.contact-form {
  background: rgb(255, 255, 255);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 10px 3vw;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
}

.contact-form .form-column {
  width: 47%;
}

.form-group {
  margin-bottom: 40px;
  position: relative;
}

.form-group.message-group {
  margin-bottom: 10px;
}

.form-label {
  display: block;
  font-size: 22px;
  text-transform: uppercase;
  margin-top: 15px;
  margin-bottom: 15px;
  color: #000;
  position: absolute;
  font-weight: 900;
}

.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid #000;
  font-size: 18px;
  color: #000;
  font-family: "Inter", sans-serif;
  transition: all 0.3s ease;
  outline: none;
  box-sizing: border-box;
  padding: 15px 0 15px 90px;
}

textarea.form-input {
  padding-top: 40px;
}

.form-input:focus {
  border-bottom-color: #000;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
}

.form-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  padding: 20px 0;
  line-height: 1.6;
}

.submit-button {
  /* background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); */
  /* border: 2px solid rgba(0, 0, 0, 0.3); */
  color: #000;
  font-size: 50px;
  font-weight: 900;
  text-transform: uppercase;
  /* letter-spacing: 3px; */
  padding: 20px 0;
  border: 0;
  background: unset;
  cursor: pointer;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Inter", sans-serif;
  position: relative;
  overflow: hidden;
  width: 100%;
  justify-content: space-between;
}

.submit-button:hover {
  background: none;
  transform: translateY(-2px);
}

.submit-arrow {
  width: 60px;
  height: 60px;
  transition: transform 0.3s ease;
}

.submit-button:hover .submit-arrow {
  transform: translateX(5px);
}

/* Selector de idioma en el footer */
.language-selector {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.lang-link {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.lang-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.lang-link.current-lang {
  font-weight: bold;
  opacity: 1;
}

.lang-link:not(.current-lang) {
  opacity: 0.7;
}

.lang-separator {
  margin: 0 8px;
  opacity: 0.5;
}

/* Asegurar que los elementos del footer se alineen correctamente */
.social-icons {
  display: flex;
  align-items: center;
}

#text-page {
  position: relative;
}
#text-page article {
  z-index: 1;
  position: relative;
  color: white;
  max-width: 800px;
  margin: 0 auto;
}

#text-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/resources/text-background.webp);
  background-attachment: fixed;
  background-size: cover;
  background-position: top center;
  filter: blur(5px) brightness(0.5);
  z-index: 0;
}

.popup-title-mobile {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  canvas.webgl {
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
    height: 100vh; /* Forzar altura completa */
    z-index: 2;
    pointer-events: none;
  }
  .contact-form-wrapper {
    flex-direction: column;
    padding: 0 25px 50px;
    gap: 40px;
  }
  .contact-form {
    padding: 40px 30px;
  }
  .word {
    font-size: 12vw;
    top: 45vh;
    letter-spacing: 1px;
  }
  .we-belive-in-wrapper {
    top: 45vh;
    display: block;
    max-width: 100vw;
    white-space: normal;
    text-align: center;
  }
  .we-belive-in-wrapper .word {
    margin: 0 1px;
  }
  .logo-initial-block {
    width: 100vw;
  }
  .fixed-header {
    padding: 0 20px 0 10px;
  }
  /* Footer responsive */
  .fixed-footer {
    height: 40px;
    padding: 0 15px;
    font-size: 12px;
  }
  .fixed-footer .legal-links a {
    font-size: 11px;
    margin: 0 3px;
  }
  .fixed-footer .social-icons img {
    width: 16px;
    height: 16px;
  }
  /* Botón de sonido */
  .sound-button {
    bottom: 60px;
    right: 20px;
    min-width: 120px;
    height: 45px;
    padding: 0 12px;
  }
  .sound-label {
    font-size: 12px;
  }
  .sound-icon {
    width: 16px;
    height: 16px;
  }
  .speaker-icon {
    width: 16px;
    height: 16px;
  }
  /* Scroll down indicator */
  #scrolldown {
    bottom: 10vh;
    width: 40px;
  }
  /* Popup responsive */
  .popup {
    padding: 20px;
    width: 100vw;
    height: 100lvh;
  }
  .popup .popup-content {
    font-size: 17px;
    margin-top: 0;
    padding: 0 20px;
  }
  .popup-title {
    font-size: 6vh;
    top: 58vh;
    left: 50vw;
    display: none;
  }
  .popup-title-mobile {
    display: block;
    font-size: 6vh;
    font-weight: 900;
    text-align: center;
    margin-top: 0;
  }
  .popup-close-button-wrapper {
    padding: 15px 20px;
  }
  .popup-close-button {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 45px;
  }
  .popup-close-button .line1,
  .popup-close-button .line2 {
    width: 20px;
    height: 2px;
  }
  /* Menú móvil */
  .menu-overlay {
    transform: translateX(100%);
  }
  .menu-content {
    padding: 60px 30px 30px;
  }
  .menu-link {
    font-size: 17vw; /* Más pequeño en móvil */
    line-height: 0.85;
    padding: 2px 0;
  }
  .menu-link .menu-link-text {
    white-space: unset;
  }
  .menu-link .menu-link-video {
    width: 0;
  }
  .menu-link:hover .menu-link-video {
    width: 120px;
    flex-shrink: 0;
  }
  .menu-link .menu-link-video video {
    height: 8vh;
    border-radius: 2vw;
  }
  .menu-link:hover {
    gap: 15px;
  }
  .menu-footer {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  .menu-social {
    justify-content: center;
    gap: 15px;
  }
  .menu-social a {
    font-size: 12px;
  }
  .menu-info {
    text-align: center;
    font-size: 12px;
  }
  /* Ajustes específicos del contenido de video */
  .video-elements {
    opacity: 1;
    position: relative;
    z-index: 20;
    will-change: transform;
  }
  /* Asegurar que el spacer funcione en móvil */
  section.spacer {
    height: 570vh; /* Mantener la misma altura para el scroll */
  }
  /* Optimizaciones de rendimiento para móvil */
  canvas.webgl {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
  }
  /* Reducir efectos visuales complejos en móvil */
  .word, .logo-initial-block {
    will-change: auto; /* Reducir will-change en móvil */
  }
  /* Asegurar que el video se vea bien */
  body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* Mejorar el rendimiento del scroll en móvil */
  .content {
    position: relative;
    z-index: 2;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .fixed-header .logo img {
    width: 120px;
  }
  .fixed-header .menu-button .menu-line {
    height: 8px;
  }
  .fixed-header .menu-button .menu-line:nth-child(2) {
    top: 11px;
  }
  .fixed-header .menu-button .menu-line:nth-child(3) {
    top: 22px;
  }
  .stars-bg {
    background-image: url("/resources/stars-mobile-bg3.webp");
  }
  .star-cards-container {
    height: 100lvh; /* En lugar de 100vh */
  }
  canvas.webgl, canvas.webgl-stars {
    height: 100lvh;
  }
  .star-card.flipped {
    transform: translate(-50%, -50%) scale(2) !important;
  }
  /* Solución simple: usar viewport units para el contenedor rotado */
  .star-card.flipped .video-container-back {
    transform: translate(-50%, -50%);
    margin-top: unset;
    margin-left: unset;
    height: 100%;
    width: 100%;
    overflow: visible;
  }
  .star-card.flipped .video-wrapper-back {
    overflow: visible;
  }
  .legends-wrapper .legends-gallery .legend-card:nth-child(1) {
    left: -200vh;
  }
  .legends-wrapper .legends-title-wrapper .legends-title {
    font-size: 16vw;
  }
  .legends-wrapper .legends-title-wrapper .legends-subtitle {
    width: 80vw;
  }
  .legends-wrapper .legends-gallery .legend-card {
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
  }
  .legends-wrapper .legends-gallery .legend-card .legend-info {
    width: 60vw;
    left: 30px;
  }
  .legends-wrapper .legends-gallery .legend-card .legend-info h3 {
    font-size: 8vw;
  }
  .legends-wrapper .legends-gallery .legend-card .legend-info p {
    font-size: 4vw;
  }
  .contact-form {
    display: block;
  }
  .contact-form .form-column {
    width: 100%;
  }
  .contact-title-wrapper .contact-title-line {
    display: none;
  }
  .contact-title-wrapper {
    text-align: center;
    margin-right: 0;
  }
  .media-wrapper .slick-slide iframe {
    max-width: 80% !important;
    min-width: 80% !important;
  }
  .media-wrapper {
    padding-top: 30px;
  }
  .media-wrapper .media-title {
    font-size: 13vw;
    display: block;
    text-align: center;
    margin-bottom: 20px;
  }
}
.Feedback {
  display: none !important;
}

/*# sourceMappingURL=style.css.map */