/* Efecto de escala en hover para los botones de banderas de idioma */
.lang-toggle .lang-flag {
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-toggle:hover .lang-flag {
  transform: scale(1.18);
  box-shadow:
    0 4px 18px 0 rgba(30, 60, 90, 0.18),
    0 1.5px 6px 0 rgba(30, 60, 90, 0.12);
}
@media screen and (max-width: 767px) {
  .lang-flag {
    height: 20px !important;
    width: 20px !important;
  }
}
/* ------ Importing fonts ----- */
@font-face {
  font-family: "Satoshi-Variable";
  src:
    url("../fonts/Satoshi-Variable.woff2") format("woff2"),
    url("../fonts/Satoshi-Variable.woff") format("woff"),
    url("../fonts/Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi-VariableItalic";
  src:
    url("../fonts/Satoshi-VariableItalic.woff2") format("woff2"),
    url("../fonts/Satoshi-VariableItalic.woff") format("woff"),
    url("../fonts/Satoshi-VariableItalic.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Magilio";
  src:
    url("../fonts/Magilio.woff2") format("woff2"),
    url("../fonts/Magilio.woff") format("woff"),
    url("../fonts/Magilio.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Magilio-slant";
  src:
    url("../fonts/Magilio-slant.woff2") format("woff2"),
    url("../fonts/Magilio-slant.woff") format("woff"),
    url("../fonts/Magilio-slant.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ------ Text Selection color ------ */
::selection {
  background-color: #17784f;
  color: #e7e7e7;
}

::-moz-selection {
  background-color: #17784f;
  color: #e7e7e7;
}

::-webkit-selection {
  background-color: #17784f;
  color: #e7e7e7;
}

/* ------ Font Classes ----- */
.fw-400 {
  font-weight: 400;
}

.fw-300 {
  font-weight: 300;
}

.fw-200 {
  font-weight: 200;
}

.fw-100 {
  font-weight: 100;
}

.fw-600 {
  font-weight: 600;
}

.fs-small {
  font-size: 14px;
}

.fs-medium {
  font-size: 16px;
}

.fs-big {
  font-size: 18px;
}

.magilio-heading {
  font-family: "Magilio", sans-serif;
  font-size: 65px;
}

.magilio-heading-small {
  font-family: "Magilio", sans-serif;
  font-size: 35px;
}

/* ------ Colors ----- */
.white {
  color: #e7e7e7;
}

.darker-white {
  color: #a5a5a5;
}

.black {
  color: #121212;
}

.grey {
  color: #333333;
}

.blue {
  color: #354052;
}

.green {
  color: #17784f;
}

.aqua {
  color: #9bc1bc;
}

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

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Satoshi-Variable", sans-serif;
  background: #e7e7e7;
  color: #121212;
}

a.black:hover,
a.blue:hover,
a.green:hover {
  color: #17784f;
  transition: 0.3s;
}

.vh-80 {
  min-height: 80vh;
}

.header-background {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask2168%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%26quot%3b%23SvgjsRadialGradient2169%26quot%3b)'%3e%3c/rect%3e%3cpath d='M187.16 419.03 a102.22 102.22 0 1 0 204.44 0 a102.22 102.22 0 1 0 -204.44 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1070.58 68.83 a122.44 122.44 0 1 0 244.88 0 a122.44 122.44 0 1 0 -244.88 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M272.15 301.31 a150.53 150.53 0 1 0 301.06 0 a150.53 150.53 0 1 0 -301.06 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-81.67 532.98 a106.69 106.69 0 1 0 213.38 0 a106.69 106.69 0 1 0 -213.38 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask2168'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='0%25' cy='50%25' r='1466.97' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient2169'%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(231%2c 231%2c 231%2c 1)' offset='0.78'%3e%3c/stop%3e%3c/radialGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-35px%2c -25px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s ease-in-out infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-28px%2c -28px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s ease-in-out infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(22px%2c -32px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s ease-in-out infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  animation: backgroundPulse 10s ease-in-out infinite;
}

@keyframes backgroundPulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.05);
  }
}

.body-background {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1500' height='1300' preserveAspectRatio='none' viewBox='0 0 1500 1300'%3e%3cg mask='url(%26quot%3b%23SvgjsMask2958%26quot%3b)' fill='none'%3e%3crect width='1500' height='1300' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient2959%26quot%3b)'%3e%3c/rect%3e%3cpath d='M557.27 1099.6 a231.84 231.84 0 1 0 463.68 0 a231.84 231.84 0 1 0 -463.68 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M-229.04 1242 a335.74 335.74 0 1 0 671.48 0 a335.74 335.74 0 1 0 -671.48 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M393.33 420.97 a332.02 332.02 0 1 0 664.04 0 a332.02 332.02 0 1 0 -664.04 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M678.37 867.29 a324.46 324.46 0 1 0 648.92 0 a324.46 324.46 0 1 0 -648.92 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask2958'%3e%3crect width='1500' height='1300' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='96.67%25' y1='103.85%25' x2='3.33%25' y2='-3.85%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient2959'%3e%3cstop stop-color='rgba(15%2c 80%2c 53%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0.99'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-35px%2c -25px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s ease-in-out infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-28px%2c -28px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s ease-in-out infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(22px%2c -32px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s ease-in-out infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
}

.projects-background {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1500' height='1300' preserveAspectRatio='none' viewBox='0 0 1500 1300'%3e%3cg mask='url(%26quot%3b%23SvgjsMask2958%26quot%3b)' fill='none'%3e%3crect width='1500' height='1300' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient2959%26quot%3b)'%3e%3c/rect%3e%3cpath d='M557.27 1099.6 a231.84 231.84 0 1 0 463.68 0 a231.84 231.84 0 1 0 -463.68 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M-229.04 1242 a335.74 335.74 0 1 0 671.48 0 a335.74 335.74 0 1 0 -671.48 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M393.33 420.97 a332.02 332.02 0 1 0 664.04 0 a332.02 332.02 0 1 0 -664.04 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M678.37 867.29 a324.46 324.46 0 1 0 648.92 0 a324.46 324.46 0 1 0 -648.92 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask2958'%3e%3crect width='1500' height='1300' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='96.67%25' y1='103.85%25' x2='3.33%25' y2='-3.85%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient2959'%3e%3cstop stop-color='rgba(30%2c 95%2c 140%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0.99'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-35px%2c -25px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s ease-in-out infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-28px%2c -28px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s ease-in-out infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(22px%2c -32px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s ease-in-out infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
}

a.logo {
  cursor: pointer;
  font-size: 23px;
  font-weight: 600;
  transition: 0.2s;
}
a.logo:hover {
  color: #9bc1bc;
}

.nav-button {
  background-color: transparent;
}
.nav-button:hover {
  color: #17784f;
}

.fa-bars:hover {
  color: #17784f;
}

.dd-menu {
  height: 0px;
  overflow: hidden;
  border: none;
  background-color: transparent;
  transition: 0.3s ease-in-out;
}

.dd-menu.active {
  height: 130px;
}

.active-link {
  position: relative;
}

.active-dot {
  position: absolute;
  bottom: 8px;
}

.subrayado {
  position: relative;
}

.subrayado::after {
  content: "";
  position: absolute;
  width: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-bottom: 1px solid transparent;
  transition: width 0.2s ease-in-out;
}

.subrayado:hover::after {
  width: 100%;
  border-bottom: 2px solid #9bc1bc;
  animation: fadeInRight 0.1s;
}

.iph-link {
  background-color: #9bc1bc;
  color: #333333;
  padding: 5px 14px;
  border-radius: 20px;
  display: inline-block;
  font-size: 0.75rem;
  font-family: "Satoshi-Variable", sans-serif;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.iph-link:hover {
  background-color: #17784f;
  color: #e7e7e7;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.iph-logo {
  max-width: 120px;
}

@media (min-width: 768px) {
  .iph-logo {
    max-width: 160px;
  }
}

.presentation-description {
  font-family: "Satoshi-Variable", sans-serif;
  font-size: 18px;
}

.s-behind {
  position: relative;
  z-index: 1;
}

.s-front {
  position: absolute;
  z-index: 2;
  left: 3px;
  top: -6px;
}

.scroll {
  font-size: 20px;
}

.scroll-button {
  color: #e7e7e7;
  background: #17784f;
  width: 40px;
  height: 40px;
  box-shadow: 3px 4px 12px 2px rgba(51, 51, 51, 0.2509803922);
  transition: 0.2s;
}
.scroll-button:hover {
  background: #9bc1bc;
  color: #333333;
  box-shadow: 3px 4px 12px 2px rgba(51, 51, 51, 0.2509803922);
}

.fa-arrow-down {
  margin-top: 9px;
}

.text-banner-container {
  width: 100%;
  background-color: #04160f;
  color: #e7e7e7;
  overflow: hidden;
  height: 37px;
  position: relative;
}

.text-banner {
  background-color: #04160f;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
  position: absolute;
}

.skills-background {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1600' height='600' preserveAspectRatio='none' viewBox='0 0 1600 600'%3e%3cg mask='url(%26quot%3b%23SvgjsMask2516%26quot%3b)' fill='none'%3e%3crect width='1600' height='600' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient2517%26quot%3b)'%3e%3c/rect%3e%3cpath d='M-109.6 242.25 a186.53 186.53 0 1 0 373.06 0 a186.53 186.53 0 1 0 -373.06 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M409.12 578.03 a151.16 151.16 0 1 0 302.32 0 a151.16 151.16 0 1 0 -302.32 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M147.42 298.94 a137.78 137.78 0 1 0 275.56 0 a137.78 137.78 0 1 0 -275.56 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1263.38 209.36 a185.62 185.62 0 1 0 371.24 0 a185.62 185.62 0 1 0 -371.24 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask2516'%3e%3crect width='1600' height='600' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='50%25' y1='100%25' x2='50%25' y2='0%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient2517'%3e%3cstop stop-color='rgba(213%2c 226%2c 225%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(233%2c 233%2c 233%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
}

.scroll-button-skills {
  background: #354052;
  width: 40px;
  height: 40px;
  transition: 0.2s;
}
.scroll-button-skills:hover {
  background: #226348;
}

.contact-button {
  background-color: #17784f;
  color: #e7e7e7;
  width: 40px;
  height: 40px;
  transition: 0.2s;
}
.contact-button:hover {
  background-color: #9bc1bc;
  color: #333333;
}

.footer-background {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1600' height='400' preserveAspectRatio='none' viewBox='0 0 1600 400'%3e%3cg mask='url(%26quot%3b%23SvgjsMask2638%26quot%3b)' fill='none'%3e%3crect width='1600' height='400' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient2639%26quot%3b)'%3e%3c/rect%3e%3cpath d='M1132.5 126.28 a124.44 124.44 0 1 0 248.88 0 a124.44 124.44 0 1 0 -248.88 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M799.82 255.92 a88.75 88.75 0 1 0 177.5 0 a88.75 88.75 0 1 0 -177.5 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1155.59 70.47 a104.86 104.86 0 1 0 209.72 0 a104.86 104.86 0 1 0 -209.72 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M909.71 48.83 a87.23 87.23 0 1 0 174.46 0 a87.23 87.23 0 1 0 -174.46 0z' fill='rgba(155%2c 193%2c 188%2c 0.09)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask2638'%3e%3crect width='1600' height='400' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='50%25' y1='100%25' x2='50%25' y2='0%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient2639'%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 48%2c 23%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
}

.footer-link {
  font-size: 30px;
  transition: 0.2s;
}
.footer-link:hover {
  color: #17784f;
}

.works-background {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1600' height='1000' preserveAspectRatio='none' viewBox='0 0 1600 1000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1236%26quot%3b)' fill='none'%3e%3crect width='1600' height='1000' x='0' y='0' fill='url(%26quot%3b%23SvgjsRadialGradient1237%26quot%3b)'%3e%3c/rect%3e%3cpath d='M266.94 996.42 a223.62 223.62 0 1 0 447.24 0 a223.62 223.62 0 1 0 -447.24 0z' fill='rgba(155%2c 193%2c 188%2c 0.12)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M-124.66 663.93 a192.1 192.1 0 1 0 384.2 0 a192.1 192.1 0 1 0 -384.2 0z' fill='rgba(155%2c 193%2c 188%2c 0.12)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M47.09 579.79 a226.94 226.94 0 1 0 453.88 0 a226.94 226.94 0 1 0 -453.88 0z' fill='rgba(155%2c 193%2c 188%2c 0.12)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M738 454.54 a234.47 234.47 0 1 0 468.94 0 a234.47 234.47 0 1 0 -468.94 0z' fill='rgba(155%2c 193%2c 188%2c 0.12)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1236'%3e%3crect width='1600' height='1000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='50%25' cy='50%25' r='943.4' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1237'%3e%3cstop stop-color='rgba(0%2c 48%2c 23%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0.92'%3e%3c/stop%3e%3c/radialGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0) rotate(0deg)%7d 33%25%7btransform: translate(-15px%2c -10px) rotate(3deg)%7d 66%25%7btransform: translate(10px%2c -15px) rotate(-3deg)%7d 100%25%7btransform: translate(0%2c 0) rotate(0deg)%7d %7d .triangle-float1 %7b animation: float1 12s ease-in-out infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0) rotate(0deg)%7d 33%25%7btransform: translate(-12px%2c 15px) rotate(-4deg)%7d 66%25%7btransform: translate(15px%2c 10px) rotate(4deg)%7d 100%25%7btransform: translate(0%2c 0) rotate(0deg)%7d %7d .triangle-float2 %7b animation: float2 10s ease-in-out infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0) rotate(0deg) scale(1)%7d 33%25%7btransform: translate(12px%2c -18px) rotate(5deg) scale(1.02)%7d 66%25%7btransform: translate(-10px%2c 12px) rotate(-5deg) scale(0.98)%7d 100%25%7btransform: translate(0%2c 0) rotate(0deg) scale(1)%7d %7d .triangle-float3 %7b animation: float3 14s ease-in-out infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  min-height: 100vh;
}

.works-header-link:hover {
  color: #9bc1bc;
  transition: 0.3s;
}

.subrayado-works {
  position: relative;
}

.subrayado-works::after {
  content: "";
  position: absolute;
  width: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-bottom: 1px solid transparent;
  transition: width 0.2s ease-in-out;
}

/* Language toggle styles */
.lang-toggle {
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

.lang-toggle:focus {
  outline: none;
}

.active-lang {
  background: rgba(155, 193, 188, 0.12);
  border-radius: 50%;
  box-shadow: none;
}

.lang-wrapper {
  /* Banderas de idioma en header desktop */
  .lang-flag {
    height: 32px;
    width: 32px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    box-shadow: none;
  }
  .lang-flag:hover {
    border: none;
  }
  display: flex;
  gap: 6px;
  align-items: center;
}

.subrayado-works:hover::after {
  width: 100%;
  border-bottom: 2px solid #17784f;
  animation: fadeInRight 0.1s;
}

.works-overflow {
  background-color: rgba(18, 18, 18, 0.5019607843);
  position: relative;
  height: 80vh;
  overflow: auto;
  box-shadow: inset 0px 0px 20px 0px rgba(155, 193, 188, 0.5019607843);
}

.works-overflow::-webkit-scrollbar {
  display: none;
}

.works-button {
  font-size: 12px;
  background-color: #17784f;
  color: #e7e7e7;
  transition: 0.2s;
}
.works-button:hover {
  background-color: #9bc1bc;
  color: #333333;
}

.experience-background {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1600' height='1000' preserveAspectRatio='none' viewBox='0 0 1600 1000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1236%26quot%3b)' fill='none'%3e%3crect width='1600' height='1000' x='0' y='0' fill='url(%26quot%3b%23SvgjsRadialGradient1237%26quot%3b)'%3e%3c/rect%3e%3cpath d='M266.94 996.42 a223.62 223.62 0 1 0 447.24 0 a223.62 223.62 0 1 0 -447.24 0z' fill='rgba(155%2c 193%2c 188%2c 0.12)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M-124.66 663.93 a192.1 192.1 0 1 0 384.2 0 a192.1 192.1 0 1 0 -384.2 0z' fill='rgba(155%2c 193%2c 188%2c 0.12)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M47.09 579.79 a226.94 226.94 0 1 0 453.88 0 a226.94 226.94 0 1 0 -453.88 0z' fill='rgba(155%2c 193%2c 188%2c 0.12)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M738 454.54 a234.47 234.47 0 1 0 468.94 0 a234.47 234.47 0 1 0 -468.94 0z' fill='rgba(155%2c 193%2c 188%2c 0.12)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1236'%3e%3crect width='1600' height='1000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='50%25' cy='50%25' r='943.4' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1237'%3e%3cstop stop-color='rgba(30%2c 95%2c 140%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0.92'%3e%3c/stop%3e%3c/radialGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0) rotate(0deg)%7d 33%25%7btransform: translate(-15px%2c -10px) rotate(3deg)%7d 66%25%7btransform: translate(10px%2c -15px) rotate(-3deg)%7d 100%25%7btransform: translate(0%2c 0) rotate(0deg)%7d %7d .triangle-float1 %7b animation: float1 12s ease-in-out infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0) rotate(0deg)%7d 33%25%7btransform: translate(-12px%2c 15px) rotate(-4deg)%7d 66%25%7btransform: translate(15px%2c 10px) rotate(4deg)%7d 100%25%7btransform: translate(0%2c 0) rotate(0deg)%7d %7d .triangle-float2 %7b animation: float2 10s ease-in-out infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0) rotate(0deg) scale(1)%7d 33%25%7btransform: translate(12px%2c -18px) rotate(5deg) scale(1.02)%7d 66%25%7btransform: translate(-10px%2c 12px) rotate(-5deg) scale(0.98)%7d 100%25%7btransform: translate(0%2c 0) rotate(0deg) scale(1)%7d %7d .triangle-float3 %7b animation: float3 14s ease-in-out infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  min-height: 100vh;
}

.experience-header-link:hover {
  color: #9bc1bc;
  transition: 0.3s;
}

.subrayado-experience {
  position: relative;
}

.subrayado-experience::after {
  content: "";
  position: absolute;
  width: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-bottom: 1px solid transparent;
  transition: width 0.2s ease-in-out;
}

.subrayado-experience:hover::after {
  width: 100%;
  border-bottom: 2px solid #17784f;
  animation: fadeInRight 0.1s;
}

.experience-overflow {
  background-color: rgba(18, 18, 18, 0.5019607843);
  position: relative;
  height: 80vh;
  overflow: auto;
  box-shadow: inset 0px 0px 20px 0px rgba(155, 193, 188, 0.5019607843);
}

.experience-overflow::-webkit-scrollbar {
  display: none;
}

.contact-logo {
  color: #354052;
  cursor: pointer;
  font-size: 23px;
  font-weight: 600;
  transition: 0.2s;
}
.contact-logo:hover {
  color: #e7e7e7;
}

.contact-background {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='1000' preserveAspectRatio='none' viewBox='0 0 1440 1000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1463%26quot%3b)' fill='none'%3e%3crect width='1440' height='1000' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1464%26quot%3b)'%3e%3c/rect%3e%3cpath d='M-283.03 735.54 a324.63 324.63 0 1 0 649.26 0 a324.63 324.63 0 1 0 -649.26 0z' fill='rgba(23%2c 120%2c 79%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M960.99 41.65 a275.89 275.89 0 1 0 551.78 0 a275.89 275.89 0 1 0 -551.78 0z' fill='rgba(23%2c 120%2c 79%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M675.21 641.07 a227.93 227.93 0 1 0 455.86 0 a227.93 227.93 0 1 0 -455.86 0z' fill='rgba(23%2c 120%2c 79%2c 0.05)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M898.38 840.96 a297.59 297.59 0 1 0 595.18 0 a297.59 297.59 0 1 0 -595.18 0z' fill='rgba(23%2c 120%2c 79%2c 0.05)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1463'%3e%3crect width='1440' height='1000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='92.36%25' y1='-11%25' x2='7.64%25' y2='111%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1464'%3e%3cstop stop-color='rgba(227%2c 234%2c 232%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(155%2c 193%2c 188%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-35px%2c -25px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s ease-in-out infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-28px%2c -28px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s ease-in-out infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(22px%2c -32px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s ease-in-out infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  min-height: 100vh;
}

.heading-contact {
  font-size: 22px;
  font-weight: 800;
}

.contact-profile {
  background-color: rgba(23, 120, 79, 0.4);
  box-shadow: inset 0px 0px 15px 0px #354052;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.contact-profile:hover {
  transform: scale(1.1);
}

.magilio-contact {
  font-family: "Magilio", sans-serif;
  font-size: 40px;
}

.contact-link {
  background-color: rgba(23, 120, 80, 0.2117647059);
  font-size: 18px;
  padding: 14px 19px;
  box-shadow: inset 0px 0px 10px 0px rgba(53, 64, 82, 0.5882352941);
  transition: 0.2s;
}
.contact-link:hover {
  font-size: 22px;
  padding: 15px 20px;
  color: #354052;
}

.contact-link2 {
  background-color: rgba(23, 120, 80, 0.6470588235);
  font-size: 16px;
  padding: 15px 15px;
  box-shadow: inset 0px 0px 10px 0px rgba(53, 64, 82, 0.5882352941);
  transition: 0.2s;
}
.contact-link2:hover {
  font-size: 20px;
  padding: 16px 16px;
  color: #354052;
}

@media screen and (min-width: 468px) {
  .magilio-heading {
    font-size: 75px;
  }
  .magilio-heading-small {
    font-size: 40px;
  }
  .s-front {
    left: 4px;
    top: -7px;
  }
  .magilio-contact {
    font-size: 60px;
  }
}
@media screen and (min-width: 576px) {
  .fs-small {
    font-size: 15px;
  }
  .fs-medium {
    font-size: 17px;
  }
  .fs-big {
    font-size: 19px;
  }
  a.logo,
  .contact-logo {
    font-size: 28px;
  }
  .magilio-heading {
    font-size: 90px;
  }
  .magilio-heading-small {
    font-size: 50px;
  }
  .s-front {
    left: 4px;
    top: -9px;
  }
  .heading-contact {
    font-size: 32px;
  }
  .magilio-contact {
    font-size: 70px;
  }
  .contact-link {
    font-size: 25px;
    padding: 14px 21px;
  }
  .contact-link:hover {
    font-size: 30px;
    padding: 15px 23px;
  }
  .contact-link2 {
    font-size: 23px;
    padding: 16px 16px;
  }
  .contact-link2:hover {
    font-size: 28px;
    padding: 18px 18px;
  }
}
@media screen and (min-width: 768px) {
  .fs-small {
    font-size: 16px;
  }
  .fs-medium {
    font-size: 18px;
  }
  .fs-big {
    font-size: 20px;
  }
  a.logo,
  .contact-logo {
    font-size: 30px;
  }
  .magilio-heading {
    font-size: 100px;
  }
  .magilio-heading-small {
    font-size: 60px;
  }
  .s-front {
    left: 5px;
    top: -9px;
  }
  .text-banner-container {
    height: 53px;
  }
  .grayscale-on-hover {
    filter: grayscale(100%);
    transition: filter 0.2s ease-in-out;
  }
  .grayscale-on-hover:hover {
    filter: grayscale(0%);
  }
  .grayscale-on-hover:hover {
    filter: grayscale(0%);
  }
  .magilio-contact {
    font-size: 85px;
  }
  .contact-link {
    font-size: 25px;
    padding: 14px 21px;
  }
  .contact-link:hover {
    font-size: 30px;
    padding: 15px 23px;
  }
  .contact-link2 {
    font-size: 23px;
    padding: 16px 16px;
  }
  .contact-link2:hover {
    font-size: 28px;
    padding: 18px 18px;
  }
}
@media screen and (min-width: 992px) {
  .fs-small {
    font-size: 16px;
  }
  .fs-medium {
    font-size: 19px;
  }
  .fs-big {
    font-size: 21px;
  }
  a.logo,
  .contact-logo {
    font-size: 33px;
  }
  .magilio-heading {
    font-size: 120px;
  }
  .magilio-heading-small {
    font-size: 65px;
  }
  .s-front {
    left: 6px;
    top: -12px;
  }
  .magilio-contact {
    font-size: 90px;
  }
  .heading-contact {
    font-size: 38px;
  }
  .contact-link {
    font-size: 25px;
    padding: 15px 21px;
  }
  .contact-link:hover {
    font-size: 30px;
    padding: 15px 23px;
  }
  .contact-link2 {
    font-size: 23px;
    padding: 16px 16px;
  }
  .contact-link2:hover {
    font-size: 28px;
    padding: 18px 18px;
  }
}
@media screen and (min-width: 1200px) {
  .fs-small {
    font-size: 16px;
  }
  .fs-medium {
    font-size: 19px;
  }
  .fs-big {
    font-size: 22px;
  }
  a.logo,
  .contact-logo {
    font-size: 35px;
  }
  .magilio-heading {
    font-size: 140px;
  }
  .magilio-heading-small {
    font-size: 70px;
  }
  .s-front {
    left: 7px;
    top: -16px;
  }
  .text-banner-container {
    height: 56px;
  }
  .magilio-contact {
    font-size: 100px;
  }
  .heading-contact {
    font-size: 40px;
  }
  .contact-link {
    font-size: 28px;
    padding: 20px 28px;
  }
  .contact-link:hover {
    font-size: 48px;
    padding: 20px 33px;
  }
  .contact-link2 {
    font-size: 25px;
    padding: 22px 22px;
  }
  .contact-link2:hover {
    font-size: 38px;
    padding: 24px 24px;
  }
}
@media screen and (min-width: 1400px) {
  .fs-medium {
    font-size: 20px;
  }
  .fs-big {
    font-size: 23px;
  }
  a.logo,
  .contact-logo {
    font-size: 40px;
  }
  .magilio-heading {
    font-size: 160px;
  }
  .magilio-heading-small {
    font-size: 80px;
  }
  .s-front {
    left: 8px;
    top: -19px;
  }
  .heading-works {
    font-size: 50px;
  }
  .magilio-contact {
    font-size: 120px;
  }
  .heading-contact {
    font-size: 50px;
  }
}

/* Projects title mobile adjustments */
@media screen and (max-width: 767px) {
  .projects-title {
    font-size: 55px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .projects-title {
    font-size: 75px !important;
  }
}

/* Divider Banner: igual fondo que text-banner, altura 15px */
.divider-banner {
  background-color: #04160f;
  height: 2px;
  width: 100%;
}