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

@font-face {
  font-family: 'suisse-light';
  src: url('./fonts/SuisseIntl-Light.woff2') format('woff2'),
       url('./fonts/SuisseIntl-Light.woff') format('woff'),
       url('./fonts/SuisseIntl-Light.otf') format('opentype'),
       url('./fonts/SuisseIntl-Light.eot') format('embedded-opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'suisse-semibold';
  src: url('./fonts/SuisseIntl-SemiBold.woff2') format('woff2'),
       url('./fonts/SuisseIntl-SemiBold.woff') format('woff'),
       url('./fonts/SuisseIntl-SemiBold.otf') format('opentype'),
       url('./fonts/SuisseIntl-SemiBold.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

html {
    font-size:16px;
}
a, button {
  cursor: pointer; /* Cambia el cursor al pasar sobre el enlace */
}

strong {
  font-family: 'suisse-semibold', serif;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  font-family: 'suisse-semibold', serif;
  overflow: hidden; /* Oculta el scroll horizontal y vertical */
}

.contenedor  a{
  text-decoration: none!important;
}


.split-container {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;
}

.text-container {
    z-index:999!important;
  width: 50%; /* Ocupa la mitad izquierda */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4%;
}

.animation-container {
  /*z-index: 999;*/
  width: 50%; /* Ocupa la mitad derecha */
  position: relative;
  overflow: visible;
}

.canvas-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.contenedor a {
  display: flex; /* Flexbox para alinear los elementos en línea */
  align-items: center; /* Centra verticalmente la imagen y el botón */
  gap: 25px; /* Espacio entre la imagen y el botón */
  transition: 0.3s ease-in-out; /* Transición suave */
}

/* Imagen */
.imagen {
  width: auto; /* Ajusta el tamaño de la imagen */
  height: 3em; /* Mantén las proporciones de la imagen */
  display: block; /* Asegura que no haya espacio en línea alrededor de la imagen */
  flex-shrink: 0; /* Evita que el SVG se reduzca */
  transition: 0.3s ease-in-out; /* Transición suave */
  color: #FA5800;
  transform: rotateY(0deg); /* Posición inicial sin rotar */
  transform-origin: center; /* Asegura que la rotación se haga desde el centro */
}

/* Cambiar a 180 grados en hover */
.contenedor:hover .imagen {
  transform: rotateY(180deg); /* Gira completamente sobre el eje Y */
}

.empezar {
    z-index: 999!important;
  font-size: 60px;
  font-family: 'suisse-semibold', serif;
  border: none;
  background: none;
  text-align: left;
  color: #FA5800;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  display: flex; /* Asegura que el botón se comporte como un elemento flexible */
  align-items: center; /* Centra el texto dentro del botón */
  margin-top: 2px;
  transition: 0.3s ease-in-out; /* Transición suave */
}

.contenedor a:hover .empezar, 
.contenedor a:hover .imagen {
  color: blue;
  transition: 0.3s ease-in-out; /* Transición suave */
}

.canvas-container {
  overflow: visible; /* Asegura que las formas no se corten */
}

.intro {
  font-size: .8em;
  margin-bottom: 10px;
  display: block;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.titulo {
  font-size: 5rem;
  margin-bottom: 30px;
  text-transform: uppercase;
  font-family: 'suisse-semibold', serif;
  line-height: 1;
}

.texto {
  font-size: 1.5rem;
  line-height: 1.6;
  font-family: 'suisse-light', serif;
  margin-bottom: 20px;
}



@media (max-width: 768px) {

  body {
    background-color: #fc2743;
  }

  .animated-shape {
    width: 120px;
    height: 120px;
  }
 
  .text-container {

    width: 100%;
    height: 50vh;
  }
  .animation-container  {
    width: 100%;
    height:100vh;
    position: absolute;
    top: 0;
    right: 0;
  }

  .intro {
    margin-bottom: 10px;
    font-size: 1em;
  }
  
  .titulo {
    margin-bottom: 10px;
    line-height: 1.1;
    font-size: 2.5rem;
  }
  
  .texto {
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 1rem;
  }

  .imagen {
    height: 2em; /* Mantén las proporciones de la imagen */
  }
  
  .empezar {
    font-size: 35px;
    color: white;
  }

  .imagen {color: white;}
  
}