@charset "UTF-8";
/*
Theme Name: The three axis
Theme URI: https://www.thethreeaxis.com
Author: The three axis
Author URI: https://www.thethreeaxis.com
Requires PHP: 8
Version: 1.0
Text Domain: 3axis
*/
@import url(libs/fonts/style.css);
* {
  box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /*overflow-x: hidden;*/ }

body {
  font-family: 'Century Gothic', sans-serif;
  font-weight: 300;
  color: #241F21; }
  body b, body strong {
    font-weight: 500; }

#contenedorCanvas {
  position: relative;
  width: 100%;
  height: 55vw;
  max-height: 90vh;
  display: block;
  overflow: hidden; }
  #contenedorCanvas img {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 150px;
    height: auto;
    z-index: 3; }
  #contenedorCanvas #loadingCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #241F21;
    z-index: 2; }
  #contenedorCanvas #unity-canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 55vw;
    border: none;
    margin: 0;
    padding: 0;
    /*display: none;*/ }

/*.loaderListados{
    background-color: rgba(255,255,255,.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    display: none;
    transition: $transition;
}*/
.cssload-container {
  display: block;
  width: 55px;
  height: 25px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto; }

.cssload-loading i {
  width: 27px;
  height: 27px;
  display: inline-block;
  background: white;
  border-radius: 50%; }

.cssload-loading i:nth-child(1) {
  background: var(--color-principal);
  animation: cssload-loading-ani1 1.15s ease-in-out infinite;
  -o-animation: cssload-loading-ani1 1.15s ease-in-out infinite;
  -ms-animation: cssload-loading-ani1 1.15s ease-in-out infinite;
  -webkit-animation: cssload-loading-ani1 1.15s ease-in-out infinite;
  -moz-animation: cssload-loading-ani1 1.15s ease-in-out infinite; }

.cssload-loading i:nth-child(2) {
  background: #e6e6e6;
  margin-left: -5px;
  animation: cssload-loading-ani1 1.15s ease-in-out 0.58s infinite;
  -o-animation: cssload-loading-ani1 1.15s ease-in-out 0.58s infinite;
  -ms-animation: cssload-loading-ani1 1.15s ease-in-out 0.58s infinite;
  -webkit-animation: cssload-loading-ani1 1.15s ease-in-out 0.58s infinite;
  -moz-animation: cssload-loading-ani1 1.15s ease-in-out 0.58s infinite; }

@keyframes cssload-loading-ani1 {
  70% {
    transform: scale(0.5); } }
@-o-keyframes cssload-loading-ani1 {
  70% {
    -o-transform: scale(0.5); } }
@-ms-keyframes cssload-loading-ani1 {
  70% {
    -ms-transform: scale(0.5); } }
@-webkit-keyframes cssload-loading-ani1 {
  70% {
    -webkit-transform: scale(0.5); } }
@-moz-keyframes cssload-loading-ani1 {
  70% {
    -moz-transform: scale(0.5); } }
.btn-primary {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
  color: white; }
  .btn-primary:hover {
    background-color: var(--color-principal-dark);
    border-color: var(--color-principal-dark); }

.contador {
  text-align: center;
  font-weight: bold;
  color: var(--color-principal);
  /* Color del texto */ }

/* Contenedor del círculo */
.circle-container {
  position: relative;
  width: 180px;
  height: auto;
  margin: 0 auto;
  position: relative; }
  .circle-container .icono {
    width: 60px;
    height: auto;
    position: absolute;
    top: 21px;
    left: 0;
    right: 0;
    margin: 0 auto; }
    .circle-container .icono svg {
      width: 100%;
      height: 100%; }
      .circle-container .icono svg .cls-1 {
        fill: var(--color-principal); }

/* Estilos del SVG */
svg.circuloContador {
  transform: rotate(-90deg);
  width: 100px;
  height: 100px; }

/* Línea de fondo */
.circle-bg {
  fill: none;
  stroke: #e0e0e0;
  /* Color de fondo del círculo */
  stroke-width: 8; }

/* Línea de progreso */
.circle-progress {
  fill: none;
  stroke: var(--color-principal);
  /* Color del círculo animado */
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 377;
  /* Circunferencia del círculo (2 * pi * radio) */
  stroke-dashoffset: 377;
  /* Inicialmente oculto */
  transition: stroke-dashoffset 2s ease-out; }

/* Animación cuando el círculo es visible */
.circle-container.visible .circle-progress {
  stroke-dashoffset: 0; }

/* Estilos del número */
.numero {
  font-size: 2rem;
  margin-top: 10px;
  letter-spacing: -2px; }

.texto {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: -2px; }
  .texto .big {
    font-size: 3rem;
    line-height: 100%; }

#glosarioSect {
  background-color: #e6e6e6;
  padding: 100px 0; }
  #glosarioSect .seccionLetras {
    position: relative;
    padding: 0 50px; }
    #glosarioSect .seccionLetras .letra {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 500px;
      line-height: 250px;
      font-weight: bold;
      color: #e6e6e6;
      -webkit-text-stroke: 2px #b3b3b2;
      /*display: none;*/ }
    #glosarioSect .seccionLetras article {
      display: block;
      width: 100%;
      max-width: 500px;
      height: auto;
      margin: 15px auto;
      background-color: white;
      padding: 20px;
      position: relative;
      z-index: 2;
      transform-origin: center;
      transition: transform 0.3s ease-in-out; }
      #glosarioSect .seccionLetras article .imagen {
        background-size: cover;
        background-position: center center; }
      #glosarioSect .seccionLetras article.hover-scale {
        cursor: pointer;
        transform: scale(1.1) !important;
        /* Mantener el scale incluso cuando se actualiza la rotación */ }
    #glosarioSect .seccionLetras:nth-last-of-type(2n+1) .letra {
      right: 0;
      left: auto; }

.modalGlosario .modal-xl .modal-content {
  background-size: cover;
  background-position: center center; }
.modalGlosario .modal-xl .modal-title {
  font-size: 7.5rem;
  line-height: 8rem;
  font-weight: 300;
  color: white; }
  .modalGlosario .modal-xl .modal-title span {
    font-size: 9rem;
    letter-spacing: -5px; }
.modalGlosario .modal-xl hr {
  margin: 0 0 .5rem 0;
  height: 2px;
  background-color: #241F21; }

@media screen and (max-width: 1200px) {
  #glosarioSect .seccionLetras .letra {
    font-size: 400px; }
  #glosarioSect .seccionLetras article {
    max-width: 450px; }

  .modalGlosario .modal-xl {
    max-width: calc(100% - 80px); } }
@media screen and (max-width: 992px) {
  #glosarioSect .seccionLetras {
    text-align: right; }
    #glosarioSect .seccionLetras .letra {
      left: 0 !important;
      right: auto !important; }
    #glosarioSect .seccionLetras article {
      display: inline-block;
      margin: 15px 0; }

  .modalGlosario .modal-xl .modal-title {
    font-size: 5.5rem;
    line-height: 6rem; }
    .modalGlosario .modal-xl .modal-title span {
      font-size: 6rem; } }
@media screen and (max-width: 768px) {
  #glosarioSect .seccionLetras {
    text-align: left; }
    #glosarioSect .seccionLetras .letra {
      position: relative;
      font-size: 250px; }
    #glosarioSect .seccionLetras article {
      display: block;
      margin: 0 auto; }

  .modalGlosario .modal-xl {
    max-width: calc(100% - 50px); }
    .modalGlosario .modal-xl .modal-title {
      font-size: 3.5rem;
      line-height: 4rem; }
      .modalGlosario .modal-xl .modal-title span {
        font-size: 4rem; } }
@media screen and (max-width: 576px) {
  .modalGlosario .modal-xl {
    max-width: calc(100% - 30px);
    margin: .5rem auto; } }
section {
  padding: 90px 0; }
  section h1 {
    font-size: 4.5rem;
    line-height: 4.1rem;
    font-weight: 500;
    letter-spacing: -7px; }
  section .numerosSeccion {
    font-size: 500px;
    line-height: 420px;
    margin-bottom: 30px;
    font-weight: bold;
    color: #e6e6e6;
    -webkit-text-stroke: 2px #b3b3b2;
    letter-spacing: -30px; }
  section.bgColorPrincipal {
    background-color: var(--color-principal); }
    section.bgColorPrincipal .numerosSeccion {
      color: var(--color-principal);
      -webkit-text-stroke: 2px white; }

@media screen and (max-width: 1400px) {
  section .numerosSeccion {
    font-size: 400px;
    letter-spacing: -25px; } }
@media screen and (max-width: 1200px) {
  section .numerosSeccion {
    font-size: 350px; } }
@media screen and (max-width: 992px) {
  section .numerosSeccion {
    line-height: 250px;
    margin-bottom: 30px; } }
@media screen and (max-width: 576px) {
  section .numerosSeccion {
    font-size: 290px;
    line-height: 200px; }
  section h1 {
    font-size: 3.5rem;
    line-height: 3.3rem; } }

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