:root {
  --dark: #292724;
  --light: #C9BCA8;
  --light-low: rgba(201, 188, 168, 0.4);
  --orange: #EB5535;
  --orange-dirt: #C78268;
  --ancho-menu: 250px;
  --ancho-responsive: 480px;
}

@font-face {
  font-family: "Dystopian";
  src: url("../fonts/Dystopian-Ligth.woff2") format("woff2"), url("../fonts/Dystopian-Ligth.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dystopian";
  src: url("../fonts/Dystopian-Regular.woff2") format("woff2"), url("../fonts/Dystopian-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dystopian";
  src: url("../fonts/Dystopian-Bold.woff2") format("woff2"), url("../fonts/Dystopian-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dystopian";
  src: url("../fonts/Dystopian-Black.woff2") format("woff2"), url("../fonts/Dystopian-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
main {
  display: flex;
  flex-direction: row;
}

.menu-lateral {
  width: var(--ancho-menu);
  height: 100vh;
  background-color: var(--dark);
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contenido-principal {
  margin-left: var(--ancho-menu);
  width: calc(100vw - var(--ancho-menu));
  height: 100vh;
}

.ficha {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  min-height: 100vh;
}

@media screen and (max-width: 480px) {
  .menu-lateral {
    display: none !important;
  }
  .contenido-principal {
    width: 100%;
    margin-left: 0;
  }
  .ficha {
    height: auto;
  }
}
html {
  scroll-behavior: smooth !important;
}

* {
  color: var(--dark);
  font-family: "Dystopian";
  font-weight: normal;
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::-moz-selection { /* Code for Firefox */
  color: var(--light);
  background: var(--orange-dirt);
}

::selection {
  color: var(--light);
  background: var(--orange-dirt);
}

body {
  background-color: var(--light);
}

b {
  font-weight: bold;
}

h1 {
  font-size: 4rem;
  font-weight: bold;
}

h2 {
  font-size: 2.4rem;
  font-weight: bold;
}

h3 {
  text-transform: uppercase;
  font-size: 1.8rem;
  font-weight: bold;
}

h4 {
  font-size: 1.2rem;
  font-weight: bold;
}

p {
  font-size: clamp(0.9rem, 1.3125rem - 1.8333vw, 0.075rem);
  font-weight: normal;
}

small {
  font-size: 0.8rem;
  font-weight: normal;
}

.gigante {
  width: 100%;
  background-color: var(--light);
}
.gigante h2 {
  font-size: 17.2vw;
}

.p-20 {
  padding-right: 20px;
  padding-left: 20px;
}

.pr-20 {
  padding-right: 20px;
}

.pl-20 {
  padding-left: 20px;
}

.naranja {
  color: var(--orange) !important;
}

.only-mobile {
  display: none;
}

.only-desktop {
  display: initial;
}

@media screen and (max-width: 480px) {
  .only-mobile {
    display: initial !important;
  }
  .only-desktop {
    display: none !important;
  }
}
button,
a.button {
  font-size: 0.8rem;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background-color: var(--orange);
  color: var(--dark);
  padding: 0.2rem 1rem 0.4rem;
  border-radius: 4px;
  transition: all 0.4s ease-out;
}
button:hover,
a.button:hover {
  background-color: var(--dark);
  color: var(--light);
  text-decoration: none;
}
button--invert,
a.button--invert {
  background-color: var(--light);
  color: var(--dark) !important;
}
button--invert:hover,
a.button--invert:hover {
  background-color: var(--orange) !important;
  color: var(--dark) !important;
  text-decoration: none;
}

.menu-lateral .menu-item {
  text-align: center;
  color: var(--light);
  list-style: none;
  font-size: 0.9rem;
  font-weight: normal;
  margin-top: 0.2rem;
  cursor: pointer;
  filter: blur(1.8px);
  transition: filter 0.25s ease-out;
}
.menu-lateral .menu-item.active {
  filter: blur(0px);
}
.menu-lateral .menu-item:hover {
  filter: blur(0px);
}
.menu-lateral .open-to-work-tag {
  position: absolute;
  top: 10vh;
  left: 0;
  width: 120px;
}

.flecha-abajo-menu {
  max-width: 100px;
  margin-bottom: 2rem;
}

.ficha-pablo {
  background-color: var(--light);
  justify-content: center;
  position: relative;
}
@media screen and (max-width: 480px) {
  .ficha-pablo {
    min-height: auto;
    padding-bottom: 4rem;
  }
}
.ficha-pablo h1, .ficha-pablo h2, .ficha-pablo p, .ficha-pablo a {
  color: var(--dark);
  margin-bottom: 0.5rem;
}
.ficha-pablo .mensaje-inicio {
  padding: 1rem;
  background-color: var(--dark);
  border-radius: 8px;
  max-width: 500px;
}
.ficha-pablo .mensaje-inicio p, .ficha-pablo .mensaje-inicio b {
  color: var(--light);
}
.ficha-pablo .mensaje-inicio p.destacado {
  margin-bottom: 1rem;
}
.ficha-pablo .mensaje-inicio .button:hover {
  background-color: var(--light);
  color: var(--dark);
}
.ficha-pablo .img-scroll {
  --img-scroll-width: 32px;
  position: absolute;
  width: var(--img-scroll-width);
  height: auto;
  bottom: 2rem;
  left: calc(50% - 16px);
  animation: botar 3s infinite;
}
@keyframes botar {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@media screen and (max-width: 480px) {
  .ficha-pablo {
    padding-top: 20vh;
  }
  .ficha-pablo p.destacado b {
    color: var(--light);
  }
  .ficha-pablo p.destacado span {
    color: var(--orange);
  }
  .ficha-pablo .img-scroll {
    position: relative;
    margin: 2rem auto;
    bottom: auto;
    left: auto;
  }
}

.ficha-sobre-mi {
  background-color: var(--orange);
  justify-content: space-between;
}
.ficha-sobre-mi .gigante {
  background-color: var(--light);
}
@media screen and (max-width: 480px) {
  .ficha-sobre-mi .gigante h2 {
    font-size: 26vw !important;
  }
}
.ficha-sobre-mi .content-sobre-mi {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 2rem;
}
.ficha-sobre-mi .content-sobre-mi .nombre {
  font-size: clamp(2.5rem, 1.75rem + 3.3333vw, 4rem);
  font-weight: bold;
  margin-bottom: 0.8rem;
}
@media screen and (max-width: 480px) {
  .ficha-sobre-mi .content-sobre-mi .nombre {
    margin-top: 4rem;
  }
}
.ficha-sobre-mi .content-sobre-mi .descripcion {
  font-size: clamp(2.5rem, 1.75rem + 3.3333vw, 4rem);
  font-weight: normal;
  line-height: 0.9;
  margin-bottom: 1.5rem;
}
.ficha-sobre-mi .content-sobre-mi .contenedor-fichas-sobre-mi .las-tarjetas {
  margin-top: 2rem;
}
.ficha-sobre-mi * {
  color: var(--dark);
}
.ficha-sobre-mi .swiper-content h2, .ficha-sobre-mi .swiper-content h3, .ficha-sobre-mi .swiper-content h4, .ficha-sobre-mi .swiper-content p {
  text-wrap: balance;
  margin-bottom: 1rem;
}

.swiper {
  width: 100%;
  height: 100%;
  background-color: var(--dark);
  border-radius: 8px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}
.swiper-slide * {
  color: var(--light);
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.swiper-button-next, .swiper-button-prev {
  color: var(--orange);
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 1rem;
}

.ficha-skills {
  padding: 1rem;
}
.ficha-skills .skills-tags {
  display: flex;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
  overflow-x: scroll;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ficha-skills .skills-tags::-webkit-scrollbar {
  display: none;
}
.ficha-skills .skills-tags__tag {
  display: inline-flex;
  background-color: var(--dark);
  padding: 0.3rem 1.6rem;
  border-radius: 999px;
  margin-right: 0.4rem;
  cursor: pointer;
}
.ficha-skills .skills-tags__tag span {
  font-size: 0.75rem;
  color: var(--orange);
  transform: translateY(-2px);
}
.ficha-skills .skills-tags__tag.active {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.ficha-skills .skills-tags__tag.active span {
  color: var(--light);
}
@media screen and (max-width: 480px) {
  .ficha-skills .skills-tags {
    margin-left: -1rem;
    width: 100vw;
    padding: 0 0.7rem 0 1rem;
  }
}
.ficha-skills .ficha-grande {
  background-color: var(--dark);
  border-radius: 8px;
  width: 100%;
  height: 100%;
}
.ficha-skills .ficha-grande .ficha-skill {
  padding: 1.5rem;
  padding-bottom: 2rem;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  display: none;
}
.ficha-skills .ficha-grande .ficha-skill.active {
  display: flex;
}
.ficha-skills .ficha-grande .ficha-skill .parte-superior {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.ficha-skills .ficha-grande .ficha-skill__titulo h2 {
  color: var(--light);
  margin-bottom: 0.5rem;
}
.ficha-skills .ficha-grande .ficha-skill__texto p {
  color: var(--light);
  margin-bottom: 0.5rem;
}
.ficha-skills .ficha-grande .iconos {
  display: flex;
  flex-direction: column;
}
.ficha-skills .ficha-grande .iconos .titulo p {
  color: var(--orange);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.ficha-skills .ficha-grande .iconos-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
}
.ficha-skills .ficha-grande .iconos-container .icono {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.ficha-skills .ficha-grande .iconos-container .icono .imagen img {
  height: 48px;
  widht: auto;
}
.ficha-skills .ficha-grande .iconos-container .icono .etiqueta {
  padding: 0 0.8rem;
  border-radius: 50px;
  background-color: var(--light-low);
}
.ficha-skills .ficha-grande .iconos-container .icono .etiqueta span {
  text-align: center;
  font-size: 0.7rem;
  color: var(--light);
  display: inline-flex;
  transform: translateY(-4px);
}
@media screen and (max-width: 480px) {
  .ficha-skills .ficha-grande .iconos-container {
    gap: 1rem;
    justify-content: center;
  }
  .ficha-skills .ficha-grande .iconos-container .icono {
    gap: 0.5rem;
  }
  .ficha-skills .ficha-grande .iconos-container .icono .etiqueta span {
    font-size: 0.6rem;
  }
}
.ficha-skills .ficha-grande .mini-iconos-container h3 {
  color: var(--light);
  margin-top: 2rem;
  font-size: 1.2rem;
}
.ficha-skills .ficha-grande .mini-iconos-container .mini-iconos {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}
.ficha-skills .ficha-grande .mini-iconos-container .mini-iconos .mini-etiqueta {
  padding: 0.1rem 0.8rem 0.2rem;
  background-color: var(--light-low);
  color: var(--light);
  font-size: 0.6rem;
  border-radius: 50px;
}
@media screen and (max-width: 480px) {
  .ficha-skills {
    padding-top: 4rem;
  }
}

@media screen and (max-width: 480px) {
  .ficha-portfolio {
    margin-top: 6rem;
  }
}
.ficha-portfolio .titulo-proyectos-mobile {
  padding: 0 1rem;
}
.ficha-portfolio .proyectos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  height: 100%;
  justify-content: stretch;
  padding: 2rem;
}
.ficha-portfolio .proyectos .box {
  width: calc(50% - 0.5rem);
  padding: 1rem;
  padding-bottom: 1.8rem;
  border-radius: 0.5rem;
  background-color: var(--dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ficha-portfolio .proyectos .box__title {
  color: var(--light);
  font-size: clamp(1.5rem, 1.1rem + 1.3333vw, 2rem);
  font-weight: bold;
  margin-bottom: 0.2rem;
  line-height: 1;
}
.ficha-portfolio .proyectos .box__tags {
  font-weight: normal;
  color: var(--orange);
  margin-bottom: 1rem;
}
.ficha-portfolio .proyectos .box__tags span {
  font-size: 0.7rem;
  margin-right: 0.5rem;
  color: var(--orange);
}
.ficha-portfolio .proyectos .box__scerpt {
  color: var(--light);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.ficha-portfolio .proyectos .box .button:hover {
  background-color: var(--light);
  color: var(--dark);
}
.ficha-portfolio .proyectos .box--invert {
  background-color: var(--orange);
}
.ficha-portfolio .proyectos .box--invert .box__title {
  color: var(--dark);
}
.ficha-portfolio .proyectos .box--invert .box__tags span {
  color: var(--dark);
}
.ficha-portfolio .proyectos .box--invert .box__scerpt {
  color: var(--dark);
}
.ficha-portfolio .proyectos .box--invert .button {
  background-color: var(--dark);
  color: var(--light);
}
.ficha-portfolio .proyectos .box--invert .button:hover {
  background-color: var(--light);
  color: var(--dark);
}
@media screen and (max-width: 480px) {
  .ficha-portfolio .proyectos {
    padding: 1rem;
  }
  .ficha-portfolio .proyectos .box {
    width: 100% !important;
  }
}

.ficha-contacto {
  background-color: var(--orange-dirt);
}
.ficha-contacto .gigante {
  background-color: var(--light);
}
.ficha-contacto .gigante h2 {
  color: var(--dark);
  font-size: 14vw;
}
@media screen and (max-width: 480px) {
  .ficha-contacto .gigante h2 {
    font-size: 20vw !important;
    margin-top: 4rem;
  }
}
.ficha-contacto .contenido-contacto {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 10vh 40px;
  margin: auto 0;
}
@media screen and (max-width: 480px) {
  .ficha-contacto .contenido-contacto {
    padding: 0 1rem;
  }
}
.ficha-contacto .contenido-contacto .the-contacto-content h2 {
  margin-bottom: 0.5rem;
}
.ficha-contacto .contenido-contacto .the-contacto-content .mensaje {
  padding: 1rem;
  background-color: var(--dark);
  border-radius: 8px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ficha-contacto .contenido-contacto .the-contacto-content .mensaje p, .ficha-contacto .contenido-contacto .the-contacto-content .mensaje b, .ficha-contacto .contenido-contacto .the-contacto-content .mensaje a {
  color: var(--light);
  text-decoration: none;
}
.ficha-contacto .contenido-contacto .the-contacto-content .mensaje p.destacado {
  margin-bottom: 1rem;
}
.ficha-contacto .contenido-contacto .the-contacto-content .mensaje .button {
  display: inline-block;
}
.ficha-contacto .contenido-contacto .the-contacto-content .mensaje .button.secundario {
  background-color: transparent;
  border: solid 2px var(--light);
  transition: all 0.4s ease-out;
}
.ficha-contacto .contenido-contacto .the-contacto-content .mensaje .button.secundario:hover {
  color: var(--dark);
}
.ficha-contacto .contenido-contacto .the-contacto-content .mensaje .button:hover {
  background-color: var(--light);
  color: var(--dark);
}
.ficha-contacto .contenido-contacto .the-contacto-content .mensaje a {
  transition: color 0.2s ease-out;
}
.ficha-contacto .contenido-contacto .the-contacto-content .mensaje a:hover {
  color: var(--orange);
}
.ficha-contacto .contenido-contacto .the-contacto-content .botones-contacto {
  margin-bottom: 0.6rem;
}

#titulo {
  --titulo-font-size: 8vw;
  font-size: var(--titulo-font-size);
  line-height: 1.3em;
  color: #292724;
  font-family: "Dystopian", Arial, Helvetica, sans-serif;
  font-weight: bold;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.char {
  font-size: var(--titulo-font-size);
  font-weight: bold;
  transform: translateY(calc(var(--titulo-font-size) * 1.1));
  transition: transform 0.5s;
}

@media screen and (max-width: 480px) {
  #titulo, .char {
    --titulo-font-size: 14vw !important;
  }
}/*# sourceMappingURL=main.css.map */