/* Tipografía */
/* Regular / Book */
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/gotham-book-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Regular / Book italic */
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/gotham-bookitalic-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Medium */
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/gotham-medium-webfont.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Medium italic */
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/gotham-mediumitalic-webfont.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/*  Bold */
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/gotham-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*  Bold italic */
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/gotham-bolditalic-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* Variables globales */
:root {
  /* Colores */
  --c-primary-100: rgba( 255, 255, 255, 1 );
  --c-primary-75: rgba( 255, 255, 255, .75 );
  --c-primary-50: rgba( 255, 255, 255, .5 );
  --c-primary-25: rgba( 255, 255, 255, .25 );
  --c-primary-10: rgba( 255, 255, 255, .1 );
  --c-secondary-100: rgba(0, 0, 0, 1);
  --c-secondary-75: rgba( 0, 0, 0, .75 );
  --c-secondary-50: rgba(0, 0, 0, .5);
  --c-secondary-25: rgba(0, 0, 0, .25);
  --c-secondary-10: rgba(0, 0, 0, .1);

  /* Font family */
  --ff-primary: "Gotham", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  
  /* Tamaño de fuentes */
  --fs-huge: clamp( 1.75em , 3.5vw , 3em );
  --fs-extrabig: 2em;
  --fs-big: clamp( 1.5em , 3.5vw , 2.5em);
  --fs-med: clamp( 1em , 3.5vw , 1.25em );
  --fs-regular: clamp( 1em , 3vw , 1.125em );
  --fs-small: .75em;

  /* Peso de fuentes */
  --fw-bold: 700;
  --fw-med: 500;
  --fw-regular: 400;

  /* Border Radius */
  --br-round: 50px;
  --br-square: 25px;

  /* Sombras */
    --bs-btn: inset 2px 2px 5px 0 var(--c-primary-25),
              2px 2px 4px 0 var(--c-secondary-25);
    --bs-btn-pressed: inset -2px -2px 5px 0 var(--c-primary-25),
                      inset 2px 2px 5px 0 var(--c-secondary-25),
                      0px 4px 4px 0px var(--c-secondary-25);
    --bs-box-small: -4px -4px 10px 0 var(--c-primary-10),
                    4px 4px 10px 0 var(--c-secondary-25);
    --bs-input: 0 0 0 50px var(--c-secondary-50) inset;
       
  font-size: 100%;
  scroll-behavior: smooth;

  /* Eliminar el scrollbar */
  ::-webkit-scrollbar{
  display: none;
  }
  /* Para elementos en focus */
  :focus{
    outline: 1px solid var(--c-primary-75);
    border-radius: var(--br-round);
  }

  textarea:focus{
    border-radius: var(--br-square);
  }  
}

body {
  color: var(--c-secondary-100);
  font-family: var(--ff-primary);
}

.u-h1{
    display: none;
}
/* Botón principal */
.u-primary{
  font-size: var(--fs-regular);
  font-weight: var(--fw-med);
  text-transform: uppercase;
  padding: .625rem 1.25rem;
  background-color: var(--c-primary-25);
  border: 4px solid var(--c-primary-25);
  color: var(--c-primary-100);
  border-radius: var(--br-round);
  backdrop-filter: blur(2px);
  box-shadow: var(--bs-btn);
  cursor: pointer;                  
  transition: backdrop-filter .6s ease , box-shadow .6s ease , border .6s ease , scale .6s ease;
}
.u-primary:hover{
  backdrop-filter: blur(5px);
  box-shadow: var(--bs-btn-pressed);
  border: 4px solid var(--c-primary-50);
  scale: 1.05;
}
/* Botón con flecha */
.u-secondary{
  max-width: fit-content;
  font-size: var(--fs-regular);
  font-weight: var(--fw-med);
  text-transform: uppercase;
  padding: .625rem 1.25rem .625rem 3.5rem;
  gap: 0.625rem;
  background-color: var(--c-secondary-10);
  border: 2px solid var(--c-primary-50);
  border-radius: var(--br-round);
  color: var(--c-primary-75);
  backdrop-filter: blur(2px);
  position: relative;
  line-height: 150%;
  cursor: pointer;
  transition: all .7s ease;
}
.u-secondary:hover{
  background-color: var(--c-secondary-25);
  padding: .625rem 3.5rem .625rem 1.25rem;
  box-shadow: var(--bs-btn);
  backdrop-filter: blur(5px);
}
/* Flecha del botón con flecha */
.u-secondary::before{
  content: ' → ';
  background-color: var(--c-primary-50);
  color: var(--c-secondary-75);
  padding: .25rem .6rem;
  border-radius: var(--br-round);
  font-family: var(--ff-primary);
  font-weight: var(--fw-bold);
  position: absolute;
  top: .375rem;
  left: .5rem;
  z-index: 2;
}
.u-secondary:hover:before{
  left: calc(100% - 2.75rem);
  animation: moveArrow 1s ease alternate;
}
.u-terciary{
  background-color: var(--c-secondary-25);
  padding: 7.5% 10%;
  border: 1px solid var(--c-primary-50);
  border-radius: var(--br-round);
  color: var(--c-primary-75);
  backdrop-filter: blur(5px);
}
.u-terciary--small{
  padding: 8% 12%;
}
.Wrapper{
  width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
    overflow: hidden;
  padding: 15vh 6vw;;
}

/* Estilo al seleccionar texto con el ratón */
::selection {
  background-color: transparent;
  color: var(--c-secondary-100);
}

/* Formularios y campos */
label{
    font-size: var(--fs-regular);
    font-weight: var(--fw-bold);
    color: var(--c-primary-50);
    text-transform: uppercase;
}
input , textarea{
    width: 100%;
    padding: .5rem 1rem;
    margin: .5rem 0 1rem 0;
    font-size: var(--fs-regular);
    font-weight: var(--fw-bold);
    color: var(--c-primary-100);
    border: 1px solid var(--c-primary-50);
    border-radius: var(--br-round);
}
textarea{
  border-radius: var(--br-square);
}
input:focus , textarea:focus{
    background-color: var(--c-secondary-25);
}
input::placeholder , textarea::placeholder{
  font-size: var(--fs-regular);
  font-weight: var(--fw-regular);
  color: var(--c-primary-75);
}
/* Cambia los colores del input al rellenarlo */
input:-webkit-autofill {
  -webkit-box-shadow: var(--bs-input);
    -webkit-text-fill-color: var(--c-primary-75);
}


@keyframes moveArrow{
  0%{
    left: 0px;
  }
  100%{
    left: calc(100% - 2.75rem);
  }
}

@keyframes fadeOut{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}

@keyframes fadeIn{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes fadeInUp{
  from{
    opacity: 0;
    transform: translateY(1rem);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.u-fade-in-up{
  animation-name: fadeInUp;
  opacity: 0;
  animation-timing-function: cubic-bezier( .22 , 1 , .36 , 1 );
  animation-duration: var(--a-fadeup-duration, .8s);
  animation-delay: var(--a-fadeup-delay, .7s);
  will-change: transform, opacity;
  animation-fill-mode: forwards;
}



/* Responsive Pantallas grandes */
@media  (min-width: 1600px){
  .Wrapper{
    padding: 16vh 16vw;

  }
}

@media (max-width: 1328px){
  .Wrapper{
    padding: 15vh 6vw;
  }
}

/* Responsive Portáil */
@media  (max-width: 1200px){
  .u-primary , .u-secondary{
    font-size: var(--fs-small);
    line-height: 200%;
  }
  .u-secondary::before{
    padding: .25rem .625rem;
  }
}


/* Responsive Tablet */
@media (max-width: 960px){
  .Wrapper{
      padding: 10vh 6vw;
  }
  .u-terciary{
    display: none;
  }
}

@media  (max-width: 786px){

}


/* Responsive Móvil */
@media (max-width: 480px){
    Wrapper{
      padding: 10vh 8vw;
  }
}