/*
Theme Name: Ale Estrello
Description: Shows de magia para empresas
Author: Saul Chávez (Programación) Víctor Martínez (Diseño Gráfico)
Author URI: https://verticeasociados.com/
Version: 1.0
Tested up to: 6.8
Requires at least: 3.0
Requires PHP: 5.2.4
Tags: blog, two-columns, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu, flexible-header, featured-images, footer-widgets, featured-image-header, block-patterns
Text Domain: aleestrello

-------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&family=Oswald:wght@200..700&family=Space+Grotesk:wght@300..700&display=swap');

/*********************
 * PALETA DE COLORES *
 ********************/
:root{
    --fondo: #f1f1ee;
    --rojo: #c60936;
    --azul: #3f4267;
    --crema: #faf2e8;
    --verde: #cce0d9;
    --degradado: radial-gradient(circle, rgba(107, 60, 187, 1) 0%, rgba(43, 24, 74, 1) 73%);
    --space: "Space Grotesk", sans-serif;
    --geologica: "Geologica", sans-serif;
    --oswald: "Oswald", sans-serif;
}

/*********************
 * ESTILOS GENERALES *
 ********************/
.top{
    width: 100%;
    height: 120px;
    background-color: var(--fondo);
}
*{
    box-sizing: border-box;
    position: relative;
    margin: 0px;
}
body{
    margin: 0 auto;
    font-weight: 400;
    font-family: var(--space);
    -webkit-font-smoothing:antialiased;
    background-color: var(--fondo);
}
section{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 3vw;
    padding-bottom: 3vw;
    padding-left: 7%;
    padding-right: 7%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*section > *{
    padding-left: 2%;
    padding-right: 2%;
}*/
h1{
    font-size: 2vw;
    font-weight: 400;
    line-height: .75;
    text-align: center;
    font-weight: 800;
    font-family: var(--geologica);
}
h2{
    font-size: 1.5vw;
    line-height: 1.1;
}
h3{
    font-size: 1.3vw;
    line-height: 1.1;  
}
p{
    font-size: .95vw;
    font-weight: 500;
    line-height: 1.2;
}

/*********************
 *      HEADER       *
 ********************/
header{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 16;
}
header > a{
    width: 11%;
    height: 100%;
    background-position: center center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url(images/logo.png);
}

/*********************
 *    BOTON MENU     *
 ********************/
input[type="checkbox"], .logo-movil{
    display:none;
}
label{
    display: flex;
    flex-direction: column;
    width: 45px;
    cursor: pointer;
    right: 5%;
    position:fixed;
    z-index: 17;
    top: 3vw;
    right: 1%;
    box-sizing: content-box;
    padding: 10px;
    display: none;
}
label span{
    background: #FFF;
    height:6px;
    margin: 3px 0;
    transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
label span:nth-of-type(1){
    width:50%;
}
label span:nth-of-type(2){
    width:100%;
}
label span:nth-of-type(3){
    width:75%;
}    
input[type="checkbox"]:checked ~ span:nth-of-type(1){
    transform-origin:bottom;
    transform:rotatez(45deg) translate(3px,0px)
}
input[type="checkbox"]:checked ~ span:nth-of-type(2){
    transform-origin:top;
    transform:rotatez(-45deg)
}
input[type="checkbox"]:checked ~ span:nth-of-type(3){ 
    transform-origin:bottom;
    width:50%;
    transform: translate(30px,-11px) rotatez(45deg);
    transform: translate(21px, -4px) rotatez(45deg);
}
.abierto{
    background-color: #000;
}


/*********************
 *        MENU       *
 *********************/
nav{
  position: relative;
  top: 0px;
  width: 89%;
  height: 100%;
  /*padding-top: 45px;*/
  /*background-color: var(--fondo);*/
  /*z-index: 3;*/
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  
}
nav > a, nav > div{
    width: fit-content;
}
nav > div{
    height: 100%;
}
nav > div > a{
    width: 200px;
}
nav > a, nav > div > a{
    color: #FFF;
    font-family: var(--geologica);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .1vw;
    margin-left: 2%;
    margin-right: 2%;
   /* animation-name: junta;
    animation-duration: .3s;
    animation-fill-mode: forwards;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

nav > div > ul{
    position: absolute;
    padding: 0px;
    margin: 0px;
    width: 220px;
    /*list-style: none;*/
    display: none;
    top: 99%;
    background: var(--degradado);
}
nav > div > ul > li{
    color: #FFF;
    font-family: var(--geologica);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: .1vw;
    margin-left: 2%;
    margin-right: 2%;
    text-transform: uppercase;
    /*text-align: center;*/
    line-height: 3;
    padding-left: 10px;
}
nav > a:hover, nav > div li:hover{
    opacity: .7;
}
nav > div:hover > ul{
    display: flex;
    flex-direction: column;
}
@keyframes separa{
    from{letter-spacing: 0vw; color: var(--verde-oscuro);}
    to{letter-spacing: .5vw; color: var(--cafe)}
}
@keyframes junta{
    from{letter-spacing: .5vw; color: var(--cafe)}
    to{letter-spacing: 0vw; color: var(--verde-oscuro);}
}

/*********************
 *      CARGADOR     *
 *********************/
.cargador{
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--degradado);
    z-index: 17;
    /*display: none;*/
}
svg {
  width: 40px;
  margin-top: 20px;
  height: 40px;
  display: inline-block;
}

/*********************
 *       INICIO      *
 *********************/
.inicio{
  padding: 0px;
  height: 48vw;
  background-image: url(images/banner-foto1.png);
  background-size: cover;
  background-position: left center;
  display: block;
  /*display: flex;
  justify-content: flex-end;
  align-items: flex-end;*/
}
.cartas{
    position: absolute;
    right: 0px;
  width: 100%;
  overflow: hidden;
  height: 100%;
  z-index: 2;
  /*background-color: rgba(255,255,255,.3);*/
 /* display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;*/

 /* transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: movement 20s ease-in-out infinite both;*/
}
.cartas .layer{
    width: 100%;
}
.cartas .layer > img{
  width: 7vw;
  background-position: center center;
  background-repeat: no-repeat;
}
.cartas .layer:nth-child(1){ z-index: 15;}
.cartas .layer:nth-child(2){ z-index: 13}
.cartas .layer:nth-child(3){ z-index: 12}
.cartas .layer:nth-child(4){ z-index: 12}
.cartas .layer:nth-child(5){ z-index: 11}
.cartas .layer:nth-child(6){ z-index: 10}
.cartas .layer:nth-child(7){ z-index: 9}
.cartas .layer:nth-child(8){ z-index: 8}
.cartas .layer:nth-child(9){ z-index: 7}
.cartas .layer:nth-child(10){ z-index: 6}
.cartas .layer:nth-child(11){ z-index: 5}
.cartas .layer:nth-child(12){ z-index: 4}
.cartas .layer:nth-child(13){ z-index: 3}
.cartas .layer:nth-child(14){ z-index: 2}
.cartas .layer:nth-child(15){ z-index: 1}

.cartas .layer:nth-child(1) > img{
    left: 74%;
    top: 1vw;
    width: 6vw;
}
.cartas .layer:nth-child(2) > img{
    left: 81%;
    top: 6vw;
    width: 6vw;
    z-index: 3;
}
.cartas .layer:nth-child(3) > img{
    left: 73%;
    top: 10vw;
    width: 8vw;
    z-index: 4;
}
.cartas .layer:nth-child(4) > img{
    left: 78%;
    top: 16.5vw;
    width: 6vw;
    z-index: 5;
}
.cartas .layer:nth-child(5) > img{
    left: 94%;
    top: 17vw;
    width: 2vw;
    z-index: 6;
}
.cartas .layer:nth-child(6) > img{
    left: 80%;
    top: 21.5vw;
    width: 8vw;
    z-index: 7;
}
.cartas .layer:nth-child(7) > img{
    left: 76%;
    top: 24vw;
    z-index: 8;
}
.cartas .layer:nth-child(8) > img{
    left: 65%;
    top: 22vw;
    width: 4vw;
    z-index: 9;
}
.cartas .layer:nth-child(9) > img{;
    left: 70%;
    top: 29.5vw;
    width: 6vw;
    z-index: 10;
}
.cartas .layer:nth-child(10) > img{
    left: 79%;
    top: 32vw;
    width: 5.5vw;
    z-index: 11;
}
.cartas .layer:nth-child(11) > img{
    left: 70%;
    top: 37vw;
    width: 5vw;
    z-index: 12;
}
.cartas .layer:nth-child(12) > img{
    left: 60%;
    top: 36.5vw;
    z-index: 13;
}
.cartas .layer:nth-child(13) > img{
    left: 66%;
    top: 41.5vw;
    width: 8vw;
    z-index: 14;
}
.cartas .layer:nth-child(14) > img{
    left: 69%;
    top: 44vw;
    z-index: 15;
}
.cartas .layer:nth-child(15) > img{
    width: 90%;
    /*right: 5%;*/
    left: 10%;
    bottom: -1vw;
    z-index: 1;
}
.inicio > aside{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 5%;
    height: 100%;
    width: fit-content;
    z-index: 10;
    /*background-color: #FA0;*/
}
.inicio h2{
    font-family: var(--geologica);
    font-weight: 800;
    font-size: 8vw;
    text-align: center;
    color: #FFF;
    line-height: .75;

    /*transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: movement 3.5s ease-in-out infinite both;*/
}
/*.inicio h2:nth-child(2){
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: movement 4.5s ease-in-out infinite both;
}*/
/*.inicio h3{
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: movement 2.5s ease-in-out infinite both;
}*/

.inicio span{
    font-weight: 200;
    /*font-family: var(--oswald);*/
}
.inicio h3{
    font-family: var(--geologica);
    font-weight: 400;
    font-size: 2vw;
    color: #FFF;
}

/*********************
 *      EVENTOS      *
 *********************/
.eventos > h1{
    margin-bottom: 6vw;
}
.eventos > aside{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.eventos article{
    width: 42%;
    height: 11vw;
    padding-right: 12%;
    background-image: url(images/ticket.png);
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.eventos article:nth-child(1){
    margin-right: 3%;
}
.eventos article:nth-child(2){
    margin-left: 3%;
}
.eventos article > h2{
    font-weight: 800;
    text-align: right;
    font-family: var(--geologica);
    color: #666;
}
.eventos article > h1{
    font-weight: 700;
    font-size: 3vw;
    text-align: right;
    padding-top: .5vw;
    padding-bottom: .5vw;
    color: var(--azul);
    font-family: var(--space);
}
.eventos article > h3{
    font-weight: 400;
    color: var(--rojo);
    text-align: right;
}


/*********************
 *      DESCUBRE      *
 *********************/
.descubre{
    padding-top: 8vw;
    padding-bottom: 6vw;
}
.descubre > div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.descubre aside{
    width: 20%;
    height: 15vw;
    margin-top: 22vw;
    margin-left: 8%;
}
.descubre aside > img{
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: transform 5s ease-in-out infinite both alternate, movement 5s ease-in-out infinite both;
}
@keyframes transform {
    0%,
  100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
   14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
   28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
   42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
   56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
   70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
   84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
@keyframes movement {
    0%,
  100% { transform: none; }
   50% { transform: translateY(20%) rotateY(10deg); }
}
@keyframes movement-2 {
    0%,
  100% { transform: none; }
   50% { transform: translateY(-20%) rotateY(-10deg); }
}
@keyframes movement-3 {
    0%,
  100% { transform: none; }
   50% { transform: translateY(-5%) rotateY(-3deg); }
}
.descubre h2{
    font-family: var(--space);
    font-weight: 400;
    font-size: 7vw;
    line-height: .8;
    text-align: center;
    width: 61%;
    margin-left: -8%;
}
.descubre h2 > span{
    font-weight: 800;
}
.descubre article{
    width: 24%;
    margin-left: -4%;
    padding-bottom: 5vw;
}
.descubre article > img{
    width: 100%;
    margin-bottom: 5vw;

    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: transform 4s ease-in-out infinite both alternate, movement-2 5s ease-in-out infinite both;
}
.descubre p{
    /*text-align: justify;*/
    font-weight: 400;
    font-size: 1.2vw;
}
.descubre h3{
    font-weight: 300;
    font-size: 2.8vw;
    color: var(--rojo);
    padding-left: 22%;
    padding-right: 25%;
    padding-top: 3vw;
    padding-bottom: 2vw;
}


/*********************
 *      RESULTADOS   *
 *********************/
.resultados{
    background-image: url(images/bkgd.png);
    background-position: center center;
    background-size: cover;
    padding-bottom: 17vw;
    padding-top: 5vw;
}
.resultados > div{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 5vw;
}
.resultados article{
    width: 25%;
    margin: 2vw;
    text-align: center;
}
.resultados article h2{
    font-size: 10vw;
    color: var(--azul);
}
.resultados article p{
    color: var(--rojo);
    font-family: var(--geologica);
    font-weight: 800;
    font-size: 1.4vw;
}

/*********************
 *       ACERCA      *
 *********************/
.acerca{
    background-color: #000;
    color: #FFF;
    flex-direction: row;
    padding-top: 10vw;
}
.acerca article{
    width: 50%;
}
.acerca h1{
    font-family: var(--space);
    font-size: 1.5vw;
    text-align: left;
    line-height: 1.2;
}
.acerca h1 > span{
    color: var(--rojo);
    font-family: var(--geologica);
    font-weight: 800;
    font-size: 3.2vw;
}
.acerca p{
    font-size: 1.3vw;
    /*text-align: justify;*/
    width: 100%;
    /*padding-left: 7%;*/
    padding-top: 1vw;
    font-weight: 400;
}
.acerca p > span{
    font-weight: 800;
}
.acerca aside{
    width: 50%;
    height: 20vw;
}
.acerca > aside > .layer{
    position: absolute;
}
.acerca > aside > .layer:nth-child(1){
    z-index: 3;
}
.acerca > aside > .layer:nth-child(2){
    z-index: 1;
}
.acerca > aside > .layer:nth-child(3){
    z-index: 2;
}
.acerca > aside > .layer:nth-child(1) > img{
    width: 30vw;
    left: 4vw;
    top: -6vw;
}
.acerca > aside > .layer:nth-child(2) > img{
    width: 50vw;
    top: -17.5vw;
    left: -1.3vw;
}
.acerca > aside > .layer:nth-child(3) > img{
    width: 43vw;
    top: -22vw;
    left: 11vw;
}

/*********************
 *       TIPOS       *
 *********************/
.tipos{
    padding-top: 7vw;
    padding-bottom: 7vw;
    background: var(--degradado);
    color: #FFF;
}
.tipos > div{
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-top: 7vw;
    align-items: center;
}
.tipos ul{
    width: 60%;
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.tipos li{
    font-size: 7vw;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.4vw;
    cursor: pointer;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: movement 3.5s ease-in-out infinite both;
}
.tipos li:nth-child(2){
    animation: movement 4s ease-in-out infinite both;
}
.tipos li:nth-child(3){
    font-size: 3vw;
    letter-spacing: -.1vw;
    line-height: 1;
    margin-top: 1vw;
    margin-bottom: 1vw;
    animation: movement 3s ease-in-out infinite both;
}
.tipos li:nth-child(4){
    animation: movement 4.5s ease-in-out infinite both;
}

@keyframes abre{
    from{letter-spacing: 0vw}
    to{letter-spacing: .3vw}
}
@keyframes cierra{
    from{letter-spacing: .3vw}
    to{letter-spacing: 0vw;}
}
.tipos > div > article{
    width: 60%;
    display: none;
}
.tipos > div > article:nth-child(2){
    display: block;
}
.tipos > div > article > div{
    width: 55%;
    height: 12vw;
    margin-bottom: 1vw;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #FA0;
    display: none;
}
.tipos > div > article > h1{
    text-align: left;
    font-family: var(--space);
    padding-left: 25%;
}
.tipos > div > article > p{
    padding-bottom: 1.5vw;
    padding-top: 1.5vw;
    padding-left: 25%;
}
.tipos > div > article > h3{
    padding-left: 25%;
}
/*********************
 *     CLIENTES      *
 *********************/
.clientes{
    background-color: var(--crema);
    padding-top: 8vw;
    padding-bottom: 8vw;
}
.clientes h1{
    font-family: var(--space);
    font-weight: 400;
    font-size: 6.5vw;
    line-height: .8;
    text-align: left;
    width: 100%;
    padding-bottom: 2vw;
}
.clientes h1 > span{
    font-weight: 800;
}
.clientes > div{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.clientes > div > p{
    width: 35%;
    padding: 3vw;
    font-size: 1.7vw;
    font-weight: 400;
    border-radius: 1vw;
    background-color: var(--verde);
    height: fit-content;
}
.clientes > div > aside{
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin-left: 2.5%;

    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-left: 0%;
    padding-left: 10%;
    padding-right: 10%;
}
.clientes > div > aside > article{
    width: 25%;
    height: 8vw;
    margin-bottom: .5vw;
    margin-top: 2vw;
    margin-right: 2vw;
    border: solid 1px #000;
    border-radius: 1vw;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 70%;
    background-color: #FFF;

    margin-left: 2vw;
}

/*********************
 *    TESTIMONIOS    *
 *********************/
.testimonios{
    padding-top: 7vw;
    padding-bottom: 5vw;
}
.testimonios > aside{
    display: flex;
    flex-direction: row;
    margin-top: 5vw;
}
.testimonios > aside > video{
    width: 20%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-bottom: 2vw;
}

/*********************
 *   REQUERIMIENTOS  *
 *********************/
.requerimientos{
    background: radial-gradient(circle,rgba(110, 63, 193, 1) 0%, rgba(114, 56, 200, 1) 6%, rgba(15, 8, 25, 1) 66%);
    color: #FFF;
    padding-top: 5vw;
    padding-bottom: 10vw;
}
.requerimientos > h1{
    font-size: 2.5vw;
    font-weight: 300;
    font-family: var(--space);
    padding-bottom: 10vw;
}
.requerimientos > h1 > span{
    font-weight: 800;
    font-size: 4vw;
}
.requerimientos > div{
    display: flex;
}   
.requerimientos > div p{
    font-size: 1.1vw;
    font-weight: 300;
    width: 95%;
}
.requerimientos > div h2{
    font-size: 2vw;
}
.requerimientos > div > article:nth-child(2){
    text-align: right;
}
.requerimientos > div > article:nth-child(1) p{
    padding-left: 5%;
}
.requerimientos h3{
    font-size: 1vw;
    font-weight: 300;
    width: 30%;
    margin-top: 10vw;
}
.requerimientos > h4{
    position: absolute;
    font-size: 18vw;
    line-height: .85;
    font-family: var(--oswald);
    font-weight: 900;
    letter-spacing: -1.2vw;
    margin: 0px;
    padding: 0px;
    left: 0px;
    color: rgba(112, 55, 197, .05);
    text-shadow: 0px 0px 2px rgba(255,255,255,0.03);
}

/*********************
 *      SECCION       *
 *********************/
.seccion{
    padding-top: 5vw;
    padding-bottom: 5vw;
    background: var(--degradado);
}
.seccion *{
    color: #FFF;
}
.seccion > aside{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4vw;
}
.seccion h1{
    text-transform: uppercase;
    text-align: left;
    width: 50%;
    padding-right: 15%;
    line-height: .8;
    font-size: 3vw;
}
.seccion h1 > span{
    font-weight: 300;
    font-size: 2vw;
}
.seccion > h2{
    font-size: 1.8vw;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}
.seccion > aside > p{
    width: 50%;
    font-size: 1.2vw;
    font-weight: 400;
}
.seccion > aside > p > span{
    font-weight: 900;
}
.seccion > aside > p > span{
    font-weight: 900;
}
.seccion > div{
    width: 100%;
    display: flex;
    margin-top: 3vw;
    margin-bottom: 3vw;
    justify-content: center;
    align-items: flex-start;
}
.seccion > div > article{
    width: 25%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    padding-top: 2vw;
}
#magia-de-cambiar-la-mente{
    background: none;
}
#magia-de-cambiar-la-mente *{
    color: #333;
}
#magia-de-cambiar-la-mente > div > article{
    width: 33%;
}
.seccion > div > article > h3{
    text-transform: uppercase;
    font-family: var(--geologica);
    font-size: 1.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seccion > div > article > h3 > span{
    padding-left: 1vw;
}
.seccion > div > article > p{
    font-size: 1.2vw;
    padding-top: 1vw;
}
.fa-solid{
    font-size: 2vw;
}

.seccion > p{
    font-size: 1.2vw;
    width: 100%;
    font-weight: 400;
    margin-top: 1vw;
    margin-bottom: 2vw;
    text-align: center;
}
.seccion > p > span{
    font-weight: 900;
}
.seccion > article{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.seccion > article > p{
    font-size: 1.2vw;
    width: 100%;
    font-weight: 400;
    margin-top: 1vw;
    margin-bottom: 2vw;
    text-align: center;
    width: 40%;
    padding-right: 10%;
    text-align: left;
}
.seccion > article > p > span{
    font-weight: 900;
}
.seccion > article > h2{
    width: 60%;
    font-size: 1.8vw;
    text-align: center;
    text-align: right;
    text-transform: uppercase;
}

/*********************
 *       FOOTER      *
 *********************/
footer{
    display: flex;
    flex-direction: row;
    background-color: #000;
    padding-top: 5vw;
    padding-bottom: 5vw;
}
footer ul{
    width: 10%;
    padding: 0px;
    margin: 0px;
    color: #FFF;
    font-size: .8vw;
    font-family: var(--geologica);
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: flex-start;;
    justify-content: center;
    list-style: none;
    margin-left: 10%;
}
footer li{
    line-height: 3;
}
footer li a{
    
    text-transform: uppercase;
}
footer > div{
    width: 25%;
    margin-left: 7%;
    margin-right: 10%;
    background-image: url(images/logo2.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80%;
}
footer form{
    width: 30%;
    color: #FFF;
}
footer input{
    font-size: .8vw;
    line-height: 4;
    width: 100%;
    border-radius: .5vw;
    margin-top: 1vw;
    border: 0px;
}
footer input[type=submit]{
    background-color: var(--rojo);
    color: #FFF;
    line-height: 1.2;
    height: 3vw;
    text-transform: uppercase;
    width: 25%;
    font-size: 1vw;
    font-weight: 700;
}
footer form > h2{
    font-weight: 400;
    padding-top: 2vw;
    font-size: 1.2vw;
}
footer form > div{
    display: flex;
    flex-direction: row;
}
footer form > div > a{
    font-size: 1.5vw;
    width: 15%;
    padding-top: 1vw;
}
.gracias{
	position: relative;
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    padding-top: 10vw;
    padding-bottom: 18vw;
}
.gracias h1{
	font-size: 4vw;
	margin-bottom: 2vw;
	color: var(--azul-oscuro);
}
.gracias h2{
	font-size: 1.5vw;
	color: var(--azul);
}
@media (max-width: 480px){
    h1, .eventos article > h1, .acerca h1, .acerca h1 > span, .requerimientos > h1, footer form > div > a{font-size: 5vw}
    h2{font-size: 3.5vw}
    h3{font-size: 4vw}
    p, .acerca p, .clientes > div > p, .requerimientos > div p, .requerimientos h3, footer input, footer input[type=submit], footer form > h2{font-size: 4vw}
    section{padding-top: 10vw; padding-bottom: 10vw}

    label{display: flex;}

    header{justify-content: flex-start;}
    header > a{width: 20%; z-index: 2; background-size: 95%}

    nav{position: fixed; width: 100%; height: 100vh; background-color: #000; z-index: 1; flex-direction: column; justify-content: center; align-items: center; display: none;}
    nav > a{font-size: 5vw; line-height: 2; width: 100%; height: 15vw;}
    nav > div{width: 100%; height: auto;}
    nav > div > a{font-size: 5vw; width: 100%; height: auto;}
    nav > div > ul{display: flex; flex-direction: column; list-style: none; background: none; width: 100%; position: relative; top: 0px}
    nav > div > ul > li{font-size: 4vw; line-height: 1; margin-top: 4vw; text-align: center;}

    .inicio{height: 150vw}
    .inicio h2{font-size: 8vw; text-align: left;}
    .inicio h3{font-size: 4vw}
    .inicio > aside{justify-content: flex-start; padding-top: 35vw}

    .cartas .layer:nth-child(15) > img{bottom: 0px;position: absolute;width: 170%;left: -65%;}
    .cartas .layer:nth-child(15) { z-index: 1; position: absolute !important; bottom: 0px;}
    .cartas .layer > img{width: 14vw}
    .cartas .layer:nth-child(1) > img{ top: 35vw; width: 12vw;}
    .cartas .layer:nth-child(2) > img{ top: 48vw; width: 12vw;}
    .cartas .layer:nth-child(3) > img{ top: 60vw; width: 16vw;}
    .cartas .layer:nth-child(4) > img{ top: 66vw; width: 12vw;}
    .cartas .layer:nth-child(5) > img{ top: 68vw; width: 4vw;}
    .cartas .layer:nth-child(6) > img{ top: 86vw; width: 16vw;}
    .cartas .layer:nth-child(7) > img{ top: 96vw;}
    .cartas .layer:nth-child(8) > img{ top: 88vw; width: 8vw;}
    .cartas .layer:nth-child(9) > img{ top: 120vw; width: 12vw;}
    .cartas .layer:nth-child(10) > img{ top: 128vw; width: 11vw;}
    .cartas .layer:nth-child(11) > img{ top: 140vw; width: 10vw;}
    .cartas .layer:nth-child(12) > img{ top: 144vw;}
    .cartas .layer:nth-child(13) > img{ top: 150vw; width: 16vw;}
    .cartas .layer:nth-child(14) > img{ top: 130vw;}
    .cartas .layer:nth-child(1){ z-index: 15;animation: movement-3 1s ease-in-out infinite both;}
    .cartas .layer:nth-child(2){ z-index: 13;animation: movement-3 2s ease-in-out infinite both;}
    .cartas .layer:nth-child(3){ z-index: 12;animation: movement-3 1.5s ease-in-out infinite both;}
    .cartas .layer:nth-child(4){ z-index: 12;animation: movement-3 2.5s ease-in-out infinite both;}
    .cartas .layer:nth-child(5){ z-index: 11;animation: movement-3 1s ease-in-out infinite both;}
    .cartas .layer:nth-child(6){ z-index: 10;animation: movement-3 2s ease-in-out infinite both;}
    .cartas .layer:nth-child(7){ z-index: 9;animation: movement-3 1.5s ease-in-out infinite both;}
    .cartas .layer:nth-child(8){ z-index: 8;animation: movement-3 2.5s ease-in-out infinite both;}
    .cartas .layer:nth-child(9){ z-index: 7;animation: movement-3 1s ease-in-out infinite both;}
    .cartas .layer:nth-child(10){ z-index: 6;animation: movement-3 2s ease-in-out infinite both;}
    .cartas .layer:nth-child(11){ z-index: 5;animation: movement-3 1.5s ease-in-out infinite both;}
    .cartas .layer:nth-child(12){ z-index: 4;animation: movement-3 2.5s ease-in-out infinite both;}
    .cartas .layer:nth-child(13){ z-index: 3;animation: movement-3 1s ease-in-out infinite both;}
    .cartas .layer:nth-child(14){ z-index: 2;animation: movement-3 1s ease-in-out infinite both;}
    .cartas .layer:nth-child(15){ z-index: 1;animation: movement-3 20s ease-in-out infinite both;}

    .eventos > aside{flex-direction: column;}
    .eventos article{width: 84%; height: 23vw; padding-right: 24%;}
    .eventos article:nth-child(2){margin-left: 0px}
    .eventos article:nth-child(1){margin-right: 0px}

    .descubre > div{flex-direction: column;}
    .descubre h2{font-size: 10vw;width: 100%; margin-left: 0%;}
    .descubre aside { width: 80%; height: auto; margin-top: 0px; margin-left: 10%; margin-bottom: 10vw;}
    .descubre article { width: 80%; margin-left: 0%; padding-top: 10vw;}
    .descubre h3 { font-size: 4vw; padding-left: 10%; padding-right: 10%; padding-top: 6vw; padding-bottom: 6vw; }

    .resultados{padding-top: 17vw}
    .resultados > div{flex-direction: column;}
    .resultados article{width: 100%}
    .resultados article h2{font-size: 20vw}
    .resultados article p{font-size: 4vw}

    .acerca{padding-top: 10vw; padding-bottom: 10vw}
    .acerca article{width: 100%}
    .acerca aside{display: none;}
    .acerca h1{text-align: center; padding-bottom: 3vw}
    .acerca p{padding: 0px; text-align: center;}

    .tipos > div{flex-direction: column;}
    .tipos ul{width: 100%}
    .tipos li{font-size: 11vw}
    .tipos li:nth-child(3){font: 6vw}
    .tipos > div > article{width: 100%; margin-top: 10vw}
    .tipos > div > article > div{height: 30vw}
    .tipos > div > article > h1{padding-left: 0px;}
    .tipos > div > article > p{padding-left: 0px;}
    .tipos > div > article > h3{padding-left: 0px;}

    .clientes{padding-top: 10vw; padding-bottom: 10vw}
    .clientes h1{text-align: center; padding-bottom: 5vw}
    .clientes > div{flex-direction: column;}
    .clientes > div > aside{width: 100%; justify-content: center}
    .clientes > div > aside > article{width: 44%; height: 25vw; background-size: 90%}
    .clientes > div > p{width: 100%; margin-top: 5vw}

    .testimonios > aside{flex-direction: column;}
    .testimonios > aside > video{width: 95%}


    .requerimientos{padding-top: 10vw; padding-bottom: 10vw}
    .requerimientos > h1 > span{font-size: 6vw}
    .requerimientos > div{flex-direction: column;}
    .requerimientos > div h2{font-size: 4vw}
    .requerimientos > div article{width: 100%; padding-bottom: 10vw;}
    .requerimientos > div p{width: 100%}
    .requerimientos > div > article:nth-child(1) p{padding: 0px}
    .requerimientos > div > article:nth-child(2) p{padding: 0px}
    .requerimientos h3{width: 100%}

    .seccion{padding-top: 10vw; padding-bottom: 10vw}
    .seccion > aside{flex-direction: column;}
    .seccion h1{width: 100%; padding: 0px; font-size: 6vw; margin-bottom: 6vw}
    .seccion h1 > span{font-size: 4vw}
    .seccion > aside > p{width: 100%; font-size: 3.5vw}
    .seccion > h2{font-size: 5vw}
    .seccion > div{flex-wrap: wrap; margin-bottom: 5vw}
    .seccion > div > article{width: 50%; margin-top: 3vw}
    .seccion > div > article > h3{font-size: 4vw}
    .fa-solid{font-size: 6vw}
    .seccion > div > article > p{font-size: 3.5vw}
    .seccion > p{font-size: 3.5vw; margin-bottom: 5vw}
    #magia-de-cambiar-la-mente > div{margin-bottom: 7vw}
    #magia-de-cambiar-la-mente > div > article{width: 100%}
    .seccion > article{flex-direction: column;}
    .seccion > article > p{width: 100%; font-size: 3.5vw; text-align: center;}
    .seccion > article > h2{width: 100%; font-size: 5vw; text-align: center; margin-top: 4vw}

    footer{flex-direction: column;}
    footer ul{display: none;}
    footer > div{height: 25vw; margin-left: 37.5%}
    footer form{width: 100%; padding-left: 10%; padding-right: 10%;display: flex; flex-direction: column; justify-content: center; align-items: center;}
    footer input{line-height: 1.5; margin-top: 3vw}
    footer input[type=submit]{height: auto;}
    footer form > p{text-align: center;}
    footer form > h2{margin-top: 5vw; padding-bottom: 5vw; text-align: center;}
    footer form > div{justify-content: center; width: 100%}
}




#primary, #secondary, #footer-widget-area{
    display:none;
}

a{
    text-decoration: none;
    color: inherit;
}