@import "reset.css";

/* COLORES */
:root {
  --white: #ffffff;
  --black: #000000;
  --blue: #00457c;
  --soft-blue: #79b7e8;
  --yellow: #ffd700;
}

/* FUENTES */
@font-face {
  font-family: "brand";
  src: url("/fonts/Neutra\ Text\ Bold.otf") format("opentype");
}

@font-face {
  font-family: "font-regular";
  src: url("/fonts/Product\ Sans\ Regular.ttf") format("truetype");
}

@font-face {
  font-family: "font-italic";
  src: url("/fonts/Product\ Sans\ Italic.ttf") format("truetype");
}

@font-face {
  font-family: "font-bold";
  src: url("/fonts/Product\ Sans\ Bold.ttf") format("truetype");
}

@font-face {
  font-family: "font-bold-italic";
  src: url("/fonts/Product\ Sans\ Bold\ Italic.ttf") format("truetype");
}

/* GLOBAL STYLES */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  font-family: "brand", sans-serif;
  font-size: 6vw;
  padding-bottom: 1.4vw;
}

h2 {
  font-size: 3vw;
  font-family: "Inter", sans-serif;
}

h3,
h4,
h5,
h6 {
  font-family: "font-bold", sans-serif;
  margin-bottom: 1.4rem;
  font-size: 3vw;
}

p {
  font-family: "font-regular", sans-serif;
  line-height: 1.5;
}

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

/* NAVBAR */
.header {
  background-color: var(--black);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 85px;
  padding: 5px 4%;
}

.header .logo {
  margin-right: auto;
}

.header .logo img {
  height: 62px;
  width: auto;
  padding: 10px;
}

.header .nav-links {
  list-style: none;
  font-family: "font-regular", sans-serif;
  font-size: 1.2vw;
}

.header .nav-links li {
  display: inline-block;
  padding: 0 20px;
}

.header .nav-links li:hover,
.overlay a:hover {
  transform: scale(1.1);
}

.header .nav-links a {
  font-size: 700;
  color: #eceff1;
}

.header .nav-links a:hover {
  color: var(--white);
}

.menu {
  display: none;
}

.header .btn button {
  margin-left: 20px;
  font-weight: 700;
  color: var(--blue);
  padding: 9px 25px;
  background: var(--soft-blue);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  font-size: 1.2vw;
}

.header .btn button:hover {
  background-color: var(--blue);
  color: var(--soft-blue);
}

.header .menu button {
  font-size: 38px;
  color: white;
  background: transparent;
  border: none;
}

/* nav mobile */
.header a {
  text-decoration: none;
}

.header .overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100000;
  left: 0;
  top: 0;
  background-color: #00447ce4;
  overflow: hidden;
  transition: all 0.3s ease 0s;
}

.header .overlay .overlay-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header .overlay a {
  padding: 15px;
  font-size: 36px;
  display: block;
  transition: all 0.3s ease 0s;
  font-weight: 700;
  color: var(--white);
}

.header .overlay a:hover,
.header .overlay a:focus {
  color: var(--soft-blue);
}

.header .overlay .close {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 65px;
}

/* HERO */
.square {
  height: 50vw;
  overflow: hidden;
  display: flex;
  position: relative;
}

#hero-logo {
  background-image: url(/img/isotipo.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

#hero-info {
  display: flex;
  flex-direction: column;
  padding: 6vw 4vw;
}

.iconos-rrss {
  display: flex;
  padding-top: 2vw;
}

.icono-rrss {
  font-size: 4vw;
  margin-right: 2vw;
  margin-top: 1.4vw;
  transition: transform 0.3s ease-in-out;
}

.icono-rrss:hover {
  transform: scale(1.2);
}

/* QUIEN SOY & SKILLS */
#skills-logos {
  background: var(--black);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  align-items: center;
  padding: 8% 8%;
}

.icono-skill {
  font-size: 4vw;
  color: #fff;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  position: relative;
}

.locked-icon::after {
  content: "\f023";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  font-size: 2.2vw;
  color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icono-skill.locked-icon {
  color: rgba(255, 255, 255, 0.349);
}

.icono-skill:hover {
  transform: scale(1.2);
}

.square-text {
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: 6vw 6vw;
}

.square-text .flip-card-container {
  padding-bottom: -6vw;
  margin-right: -6vw;
}

.square-text h2 {
  font-family: "font-regular";
}

.square-text p {
  margin-top: 2.2vw;
  font-size: 1.4vw;
}

#quien-soy a {
  color: var(--blue);
  transition: all 0.3s ease 0s;
}

#quien-soy a:hover {
  color: var(--soft-blue);
}

/* API PROJECTS */
#api-iso-soft {
  background-image: url(/img/isotipo-soft.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

.square img {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 22vw;
  transition: filter 0.3s ease-in-out;
  filter: grayscale(0%);
}

.square img:hover {
  filter: grayscale(100%);
}

/* WEB PROJECTS */
#web-iso-blue {
  background-image: url(/img/isotipo-blue.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

/* EXPERIENCIA */
#svgExperiencia {
  margin-top: 4.8vw;
}

.square-exp {
  height: 100%;
}

.btn-popup {
  padding: 1.4vw;
  border: solid 2px var(--black);
  background-color: white;
  color: var(--black);
  transition: transform 0.3s;
  margin-top: 1.4vw;
}

.btn-popup:hover {
  transform: scale(1.1);
}

circle {
  transition: fill 0.3s ease;
  cursor: pointer;
}

circle:hover {
  fill: var(--yellow);
}

#circuloPath,
#circuloPathMobile {
  transition: fill 0.3s ease;
  cursor: pointer;
}

#circuloPath:hover {
  fill: var(--yellow);
}

#circuloPathMobile:hover {
  fill: var(--yellow);
}

.exp-text {
  text-align: left;
  padding-right: 44vw;
  padding-top: 2.6vw;
}

#svgExperienciaMobile {
  display: none;
}

/* flip card */
.flip-card {
  background-color: transparent;
  width: 22vw;
  height: 22vw;
  perspective: 1000px;
  /* Propiedades removidas:
  position: absolute;
  bottom: 0;
  left: 0;
  */
  transition: filter 0.3s ease-in-out;
  z-index: 9999;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #151923;
  color: white;
  transform: rotateY(180deg);
}

.iconos-proyecto .icono-skill {
  margin-right: 1.6vw;
}

.flip-card-back {
  padding-top: 4vw;
}

.flip-card-back a {
  color: rgb(255, 255, 255);
  font-size: 1.2vw;
  text-decoration: underline;
  display: block;
  padding-top: 2.4vw;
}

.flip-card-container {
  display: flex;
  gap: 0vw;
  justify-content: flex-start;
  margin-top: 6.5vw;
  margin-left: -6vw;
}

.acordmanagers-back {
  background-color: #ff5b06;
}

.enz-back {
  background-color: black;
}

/* CONTACTO */
.square-contacto {
  height: 100%;
  background-color: black;
  text-align: center;
  color: white;
}

form {
  width: 48vw;
  margin: 3.4vw auto 2vw auto;
  font-family: "font-regular";
  font-size: 1.5vw;
}

.form-row {
  display: flex;
  justify-content: center;
  justify-content: space-between;
}

.form-cntrl {
  margin-bottom: 2vw;
}

.form-cntrl input,
textarea {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid white;
  padding-bottom: 1vw;
  color: white;
}

.form-row .form-cntrl {
  width: 48%;
}

.form-cntrl input:focus,
.form-cntrl textarea:focus {
  outline: none;
}

#mensaje {
  overflow: hidden;
}

.boton-estilo {
  padding: 18px 34px;
  background-color: var(--soft-blue);
  color: var(--blue);
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-family: "font-bold";
  margin-top: 3vw;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.boton-estilo:hover {
  background-color: var(--blue);
  color: var(--soft-blue);
}

#bannerExito {
  display: none;
  background-color: green;
  color: white;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
}

#bannerError {
  display: none;
  background-color: red;
  color: white;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
}

/* FOOTER */
.footer {
  height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "font-regular";
  font-size: 1.2vw;
}

.footer-child {
  flex: 1;
  display: flex;
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.iconos-rrss-footer {
  display: flex;
  margin-right: 2px;
}

.icono-rrss-footer {
  font-size: 32px;
  margin-left: 18px;
  margin-top: 1.4vw;
  transition: transform 0.3s ease-in-out;
}

.icono-rrss-footer:hover {
  transform: scale(1.2);
}

.list-container {
  justify-content: flex-start;
}

.list-container ul {
  list-style-type: none;
  margin-left: 2.4vw;
  margin-top: 2.5vw;
}

.list-container li {
  margin-bottom: 0.6vw;
}

/* MEDIA QUERIES */
@media (max-width: 992px) {
  h1 {
    font-size: 11vw;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 6vw;
  }

  .nav-links,
  .btn {
    display: none;
  }

  .menu {
    display: inherit;
  }

  .header {
    padding: 5px 6%;
  }

  .square {
    height: 100vw;
  }

  #hero-info {
    padding: 22vw 8vw;
  }

  .icono-rrss {
    font-size: 10vw;
    margin-right: 4.2vw;
  }

  #skills-logos {
    grid-template-columns: repeat(4, 1fr);
    padding: 9% 9%;
  }

  .icono-skill {
    font-size: 10vw;
  }

  .locked-icon::after {
    font-size: 4vw;
  }


  .square-text h2 {
    font-size: 8vw;
  }

  .square-text p {
    margin-top: 5vw;
    font-size: 4vw;
  }

  .square-text {
    padding: 11vw 6vw;
  }

  .square img {
    height: 48vw;
  }

  .exp-text {
    display: none;
  }

  #svgExperiencia {
    display: none;
  }

  #svgExperienciaMobile {
    display: block;
    width: 58px;
    margin: auto;
    margin: 12vw auto 1.4vw auto;
  }

  .square-exp {
    height: 100%;
  }

  .square-contacto {
    height: 100%;
  }

  .square img {
    height: 30vw;
  }

  .flip-card,
  .flip-card-front img {
    z-index: 0;
    width: 33vw;
    height: 33vw;
  }

  .flip-card-back {
    padding-top: inherit;
  }

  .flip-card-back p {
    font-size: 3vw;
  }

  .flip-card-back a {
    font-size: 3vw;
  }

  .flip-card-back i {
    font-size: 6.8vw;
  }

  #hero-info {
    order: 1;
  }

  #hero-logo {
    order: 2;
  }

  #quien-soy {
    order: 3;
  }

  #skills-logos {
    order: 4;
  }

  #web-iso-blue {
    display: none;
  }

  form {
    width: 74vw;
    margin: 4.4vw auto 2vw auto;
    font-family: "font-regular";
    font-size: 4vw;
  }

  .form-row {
    flex-direction: column;
    margin-top: 3.2vw;
  }

  .form-row .form-cntrl {
    width: 100%;
  }

  .form-cntrl {
    margin-bottom: 6vw;
  }

  .boton-estilo {
    margin-top: 6.6vw;
  }

  .footer {
    font-size: 3.8vw;
  }

  .image-container img {
    width: 38vw;
  }

  circle {
    font-size: 2em;
  }

  .lang-switcher {
    margin-right: 24px;
  }
}

/* ===== I18N language switcher ===== */
.lang-switcher {
  display: flex;
  gap: 10px;
  margin-left: 14px;
}

.lang-btn {
  font-family: "font-bold", sans-serif;
  font-size: 0.95rem;
  padding: 6px 14px;
  border: 2px solid var(--soft-blue);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: all .25s;
}

.lang-btn.active,
.lang-btn:hover {
  background: var(--soft-blue);
  color: var(--blue);
}

/* Mejora pop-up accesible en móvil */
@media (max-width: 992px) {
  .btn-popup {
    padding: 14px;
  }
}