/*===== Google Fonts =====*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/*===== Variables Css =====*/
:root {
  --header-height: 3rem;

  /*========== Colors ==========*/
  --title-color: #0B0A0A;
  --text-color: #403A3A;
  --text-color-light: #707070;
  --container-color: #FAFAFA;
  --container-color-alt: #F0EFEF;
  --body-color: #FCFCFC;

  /*========== Font And Typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .875rem;
  --smaller-font-size: .813rem;

  /*========== Font Weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margenes ==========*/
  --mb-1: .5rem;
  --mb-2: 1rem;
  --mb-3: 1.5rem;

  /*========== Z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;

  /*========== Social ==========*/
  --bd-color-linkedin: #0a66c2;
  --bd-color-facebook: #1877f2;
  --bd-color-youtube: #ff0000;
  --bd-color-github: #000;

  /*========== Colores contacto ==========*/
  --bd-color-location: #ff4757;
  --bd-color-mail: #1e90ff;
  --bd-color-phone: #2ed573;

  /*==========  Frontend ==========*/
  --bd-color-html: #E44D26;
  --bd-color-css: #2965F1;
  --bd-color-js: #F7DF1E;
  --bd-color-reac: #61DAFB;
  --bd-color-angular: #DD0031;

  /*==========  Backend ==========*/
  --bd-color-java-top: #E11D2E;
  /* rojo Java */
  --bd-color-java-bottom: #007396;
  /* azul Java */
  --bd-color-spring: #6DB33F;
  --bd-color-python: #FFD43B;

  /*==========  Databases ==========*/
  --bd-color-mysql: #00758F;
  --bd-color-mongo: #47A248;
  --bd-color-redis: #DC382D;

  /*========== Tools ==========*/
  --bd-color-git: #F05032;
  --bd-color-docker: #2496ED;

  /*========== Interests  ==========*/
--bd-color-music: #6366F1;
--bd-color-read: #3B82F6;
--bd-color-soccer: #22C55E;
--bd-color-travel: #F59E0B;
--bd-color-video_games: #0070D1;
--bd-color-math: #14B8A6;


}

/*========== Base ==========*/
*,
::before {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/*========== Variables Dark theme ==========*/
body.dark-theme {
  --title-color: #F2F2F2;
  --text-color: #BFBFBF;
  --container-color: #212121;
  --container-color-alt: #181616;
  --body-color: #2B2B2B;
}

/*========== Button Dark/Light ==========*/
.change-theme {
  position: absolute;
  right: 0;
  top: 2.2rem;
  display: flex;
  color: var(--text-color);
  font-size: 1.2rem;
  cursor: pointer;
}

.change-theme:hover {
  color: var(--title-color);

}

/*========== Font size variables to scale cv ==========*/
body.scale-cv {
  --h1-font-size: .938rem;
  --h2-font-size: .938rem;
  --h3-font-size: .875rem;
  --normal-font-size: .813rem;
  --small-font-size: .75rem;
  --smaller-font-size: .688rem;
}

/*========== Generate PDF button ==========*/
.generate-pdf {
  display: none;
  position: absolute;
  top: 2.2rem;
  left: 0;
  font-size: 1.2rem;
  color: var(--text-color);
  cursor: pointer;
}

.generate-pdf:hover {
  color: var(--title-color);
}

/*========== Classes modified to reduce size and print on A4 sheet ==========*/
.scale-cv .change-theme,
.scale-cv .generate-pdf {
  display: none;
}

.scale-cv .bd-container {
  max-width: 595px;
}

.scale-cv .section {
  padding: 1rem 0 .60rem;
}

.scale-cv .section-title {
  margin-bottom: .75rem;
}

.scale-cv .resume__left,
.scale-cv .resume__right {
  padding: 0 1rem;
}

.scale-cv .home__img {
  width: 90px;
  height: 90px;
}

.scale-cv .home__container {
  gap: 1.5rem;
}

.scale-cv .home__data {
  gap: .25rem;
}

.scale-cv .home__address,
.scale-cv .social__container {
  gap: .75rem;
}

.scale-cv .home__icon,
.scale-cv .social__icon,
.scale-cv .interests__icon {
  font-size: 1rem;
}

.scale-cv .education__container,
.scale-cv .experience__container,
.scale-cv .certificate__container {
  gap: 1rem;
}

.scale-cv .education__time,
.scale-cv .experience__time {
  padding-right: .5rem;
}

.scale-cv .education__rounder,
.scale-cv .experience__rounder {
  width: 11px;
  height: 11px;
  margin-top: .22rem;
}

.scale-cv .education__line {
  width: 1px;
  height: 110%;
  transform: translate(5px, 0);
}

.scale-cv .education__data,
.scale-cv .experience__data {
  gap: .25rem
}

.scale-cv .skills__name {
  margin-bottom: var(--mb-1);
}

.scale-cv .interests__container {
  column-gap: 2.5rem;
}

body {
  margin: 0 0 var(--header-height);
  padding: 0;
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}

h1,
h2,
h3,
ul,
p {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--title-color);
  font-weight: var(--font-medium);
}

ul {
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*========== Class Css ==========*/
.section {
  padding: 1rem 0;
}

.section-title {
  font-size: var(--h2-font-size);
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  text-transform: uppercase;
  letter-spacing: .35rem;
  text-align: center;
  margin-bottom: var(--mb-3);
}

/*========== Layout ==========*/
.bd-container {
  max-width: 968px;
  width: calc(100% - 3rem);
  margin-left: var(--mb-3);
  margin-right: var(--mb-3);
}

.bd-grid {
  display: grid;
  gap: 1rem;
}

.l-header {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--body-color);
  box-shadow: 0 -1px 4px rgba(0, 0, 0, .1);
  transition: .3s;
}

/*========== Nav ==========*/
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

p {
  text-align: justify;
  text-justify: inter-word;
}


@media screen and (max-width:968px) {
  .nav__menu {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    padding: 2rem 1.5rem;
    background-color: var(--body-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    z-index: var(--z-fixed);
    transition: .3s;
  }
}

.nav__logo,
.nav__toggle {
  color: var(--title-color);
  font-weight: var(--font-medium);
}

.nav__toggle {
  font-size: 1.2rem;
  cursor: pointer;
}

.nav__item {
  text-align: center;
}

.nav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.nav__link {
  display: flex;
  flex-direction: column;
  font-style: var(--smaller-font-size);
  color: var(--text-color-light);
  font-weight: var(--font-medium);
}

.nav__link:hover {
  color: var(--title-color);
}

.nav__icon {
  font-size: 1.2rem;
  margin-bottom: var(--mb-1);
}

/* Show menu */
.show-menu {
  bottom: var(--header-height);
}

/* Active menu link */
.active-link {
  color: var(--title-color);
}

/*========== HOME ==========*/
.home {
  position: relative;
}

.home__container {
  gap: 3rem;
}

.home__data {
  gap: .5rem;
  text-align: center;
}

.home__img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  justify-self: center;
  margin-bottom: var(--mb-1);
}

.home__title {
  font-size: var(--h1-font-size);
}

.home__profession {
  font-size: var(--normal-font-size);
  margin-bottom: var(--mb-1);
}

.home__address {
  gap: 1rem;
}

.home__information {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--small-font-size);
}

.phone {
  transition: transform .25s ease, color .25s ease;
}

.home__information:hover .phone {
  color: var(--bd-color-phone);
  transform: scale(1.2);
}

.home__location:hover .home__icon {
  color: var(--bd-color-location);
  transform: scale(1.2);
}

.home__mail:hover .home__icon {
  color: var(--bd-color-mail);
  transform: scale(1.2);
}

.mail {
  margin-right: .2rem;
}

.home__mail,
.home__location,
.home__phone {
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone:hover {
  transform: scale(1.2);
  transition: .2s ease;
}

.home__icon {
  font-size: 1.2rem;
  min-width: 20px;
  transition: transform .25s ease, color .25s ease;
}

.home__button-movil {
  display: inline-block;
  border: 2px solid var(--text-color);
  color: var(--title-color);
  padding: 1rem 2rem;
  border-radius: .25rem;
  transition: .3s;
  font-weight: var(--font-medium);
  margin-top: var(--mb-3);
}

.home__button-movil:hover {
  background-color: var(--text-color);
  color: var(--container-color);
}

/*========== SOCIAL ==========*/
.social__container {
  grid-template-columns: max-content;
  gap: 1rem;
}

.social__link {
  display: inline-flex;
  align-items: center;
  font-size: var(--small-font-size);
  color: var(--text-color);
}

.social__icon {
  font-size: 1.2rem;
  margin-right: .25rem;
}


.social__link:hover .linkedin {
  color: var(--bd-color-linkedin);
  transform: scale(1.2);
}

.social__link:hover .facebook {
  color: var(--bd-color-facebook);
  transform: scale(1.2);
}

.social__link:hover .youtube {
  color: var(--bd-color-youtube);
  transform: scale(1.2);
}

.social__link:hover .github {
  color: var(--bd-color-github);
  transform: scale(1.2);
}

/*========== PROFILE ==========*/
.profile__description {
  text-align: center;
}

/*========== EDUCATION AND EXPERIENCE ==========*/
.education__content,
.experience__content {
  display: flex;
}

.education__time,
.experience__time {
  padding-right: 1rem;
}

.education__rounder,
.experience__rounder {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--text-color-light);
  border-radius: 50%;
  margin-top: .25rem;
}

.education__line,
.experience__line {
  display: block;
  width: 2px;
  height: 110%;
  background-color: var(--text-color-light);
  transform: translate(7px, 0);
}

.education__data,
.experience__data {
  gap: .5rem;
}

.education__title,
.experience__title {
  font-size: var(--h3-font-size);
}

.education__studies,
.experience__company {
  font-size: var(--small-font-size);
  color: var(--title-color);
}

.education__year,
.experience__description {
  font-size: var(--small-font-size);
}

.education__status {
  display: inline-block;
  text-align: center;
  padding: .15rem .5rem;
  margin-bottom: .25rem;
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  border-radius: .25rem;
  border: 2px solid transparent;
  letter-spacing: .05rem;
  color: var(--title-color);
  align-items: center;
}

/* In Process / En proceso */
.education__status[data-status="process"] {
  background-color: var(--bd-color-python);
  color: var(--title-color);
}

/* Finish / Finalizado */
.education__status[data-status="finish"] {
  background-color: var(--bd-color-mongo);
  color: var(--title-color);

}

/* Terminar el estado educativo*/

/*========== SKILLS AND LANGUAGES ==========*/
.skills__content,
.languages__content {
  grid-template-columns: repeat(2, 1fr);
}

.skills__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

/*========== LANGUAGES – CLEAN PROGRESS ==========*/

/*========== LANGUAGES – COMPACT CV STYLE ==========*/

.languages__item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.languages__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.languages__label {
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  color: var(--title-color);
}

.languages__level {
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}

/* Barra tipo línea */
.languages__bar {
  width: 100%;
  height: 3px;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: var(--container-color-alt);
}

/* Progreso */
.languages__bar::-webkit-progress-value {
  background-color: var(--text-color);
}

.languages__bar::-webkit-progress-bar {
  background-color: var(--container-color-alt);
}

.languages__bar::-moz-progress-bar {
  background-color: var(--text-color);
}


.skills__name,
.languages__name {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-bottom: var(--mb-3);
  font-size: var(--small-font-size);
}

.skills__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
}

.skills__icon {
  font-size: 1.3rem;
  margin-right: .6rem;
  min-width: 24px;
  width: 24px;
  text-align: center;
  vertical-align: middle;
  text-align: center;
  background-color: transparent;
  transition: transform .25s ease, color .25s ease;
}

.skills__icon,
.social__icon,
.home__icon {
  will-change: transform;
}

/*======== Skills Hovers ========*/

.skills__name:hover .html {
  color: var(--bd-color-html);
}

.skills__name:hover .css {
  color: var(--bd-color-css);
}

.skills__name:hover .js {
  color: var(--bd-color-js);
}

.skills__name:hover .react {
  color: var(--bd-color-reac);
}

.skills__name:hover .angular {
  color: var(--bd-color-angular);
}

.skills__name:hover .java {
  background: linear-gradient(to bottom,
      var(--bd-color-java-top),
      var(--bd-color-java-bottom));
  background-clip: text;
  /* estándar */
  -webkit-background-clip: text;
  /* Chrome / Safari */
  color: transparent;
}

.skills__name:hover .spring {
  color: var(--bd-color-spring);
}

.skills__name:hover .python {
  color: var(--bd-color-python);
}

.skills__name:hover .mysql {
  color: var(--bd-color-mysql);
}

.skills__name:hover .mongo {
  color: var(--bd-color-mongo);
}

.skills__name:hover .redis {
  color: var(--bd-color-redis);
}

.skills__name:hover .git {
  color: var(--bd-color-git);
}

.skills__name:hover .docker {
  color: var(--bd-color-docker);
}

.skills__name:hover .skills__icon {
  transform: scale(1.25);
}

.skills__icon {
  color: var(--text-color-light);
}

/*========== CERTIFICATES ==========*/
.certificate__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
}

.certificate__description {
  font-size: var(--smaller-font-size);
  line-height: 1.4;
  color: var(--text-color);
}

.certificate__meta {
  display: block;
  margin-top: .35rem;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  font-weight: var(--font-medium);
}

/*========== REFERENCES ==========*/
.references__content {
  gap: .25rem;
}

.references__subtitle {
  color: var(--text-color-light);
}

.references__subtitle,
.references__contact {
  font-size: var(--smaller-font-size);
}

.references__title {
  font-size: var(--h3-font-size);
}

/*========== INTERESTS ==========*/
.interests__container {
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--mb-2);
}

.interests__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.interests__icon {
  font-size: 1.5rem;
  color: var(--text-color-light);
  margin-bottom: .25rem;
}

/* Transición solo para el icono */
.interests__icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover en TODO el bloque, pero SOLO afecta al icono */
.interests__content:hover .interests__icon {
  transform: scale(1.25);
}

/* Colores por interés (se activan aunque toques el texto) */
.interests__content:hover .music {
  color: var(--bd-color-music);
}

.interests__content:hover .read {
  color: var(--bd-color-read);
}

.interests__content:hover .soccer {
  color: var(--bd-color-soccer);
}

.interests__content:hover .travel {
  color: var(--bd-color-travel);
}

.interests__content:hover .video_games {
  color: var(--bd-color-video_games);
}

.interests__content:hover .math {
  color: var(--bd-color-math);
}

/* Scroll top */
.scrolltop {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .3rem;
  background-color: var(--container-color-alt);
  border-radius: .4rem;
  z-index: var(--z-tooltip);
  transition: .4s;
  visibility: hidden;
}

.scrolltop__icon {
  font-size: 1.2rem;
  color: var(--text-color);

}

.show-scroll {
  visibility: visible;
  bottom: 5rem;
}

/*========== MEDIA QUERIES ==========*/
/* For small devices, menu two columns */
@media screen and (max-width:320px) {

  .nav__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem .5rem
  }

}

/* Classes modified for large screen size */
@media screen and (min-width:968px) {

  body {
    margin: 3rem 0;
  }

  @page {
    size: A4;
    margin: 15mm;
  }

  /* Contenedor centrado */
  .bd-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 794px;
    /* A4 real */
  }

  /* Ocultar elementos no imprimibles */
  .l-header,
  .scrolltop {
    display: none;
  }

  .education__status {
    display: none;
  }

  /* Layout principal */
  .resume {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
    width: 794px;
    min-height: auto;
    /* 👈 IMPORTANTE */
    margin: 0 auto;
    background-color: var(--container-color);
    box-shadow: none;
  }


  .resume__left {
    background-color: var(--container-color-alt);
  }

  .resume__left,
  .resume__right {
    padding: 0 1.5rem;
  }

  /* Botón PDF solo en desktop */
  .generate-pdf {
    display: inline-block;
  }

  .section-title,
  .profile__description {
    text-align: initial;
  }

  .home__container {
    gap: 1.5rem;
  }

  .home__button-movil {
    display: none;
  }

  /* Ajustes grid */
  .references__contianer {
    grid-template-columns: repeat(2, 1fr);
  }

  .languages__container {
    grid-template-columns: repeat(3, max-content);
  }

  .interests__container {
    grid-template-columns: repeat(3, max-content);
    column-gap: 3.5rem;
  }

  /* ====== CLAVE PARA PDF (ANTI-CORTES) ====== */
  section,
  .education__content,
  .experience__content,
  .certificate__content,
  .skills__content,
  .references__content {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Texto más legible en PDF */
  p {
    line-height: 1.45;
  }

  /*========== EXPERIENCE CORRECCIÓN FINAL (igual a Education) ==========*/

  .experience__content {
    display: flex;
  }

  .experience__time {
    padding-right: 1rem;
  }

  .experience__rounder {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    background-color: var(--text-color-light);
    border-radius: 50%;
    margin-top: .25rem;
  }

  .experience__line {
    display: block;
    width: 2px;
    height: 110%;
    background-color: var(--text-color-light);
    transform: translate(7px, 0);
  }

  .scale-cv .education__container,
  .scale-cv .experience__container,
  .scale-cv .certificate__container {
    gap: .85rem;
  }

  .scale-cv .education__time,
  .scale-cv .experience__time {
    padding-right: .6rem;
  }

  .scale-cv .education__rounder,
  .scale-cv .experience__rounder {
    width: 10px;
    height: 10px;
    margin-top: .2rem;
  }

  .scale-cv .languages__bar {
    height: 2px;
  }

  .scale-cv .languages__row {
    margin-bottom: .1rem;
  }

  .experience__title {
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: .25rem;
  }

  .experience__company {
    font-size: .75rem;
    color: var(--text-color-light);
    margin-bottom: .4rem;
  }

  .experience__description {
    font-size: .78rem;
    line-height: 1.45;
  }

  .education__title {
    font-size: .9rem;
    font-weight: 600;
  }

  .education__studies {
    font-size: .78rem;
  }

  .education__year {
    font-size: .7rem;
    color: var(--text-color-light);
  }

  .scale-cv section {
    margin-bottom: .9rem;
  }

  .scale-cv .experience__rounder {
    width: 11px;
    height: 11px;
    margin-top: .22rem;
  }

  .scale-cv .experience__line {
    width: 1px;
    height: 110%;
    transform: translate(5px, 0);
  }

  p {
    text-align: justify;
    text-justify: inter-word;
  }

  @media print {

    .resume {
      max-height: 1122px;
      overflow: hidden;
    }

    section {
      break-inside: avoid;
      page-break-inside: avoid;
    }

  }

  .scale-cv .languages__item {
  margin-bottom: .5rem;
}

.scale-cv .interests__container {
  row-gap: .5rem;
}

.scale-cv .interests__icon {
  font-size: 1.2rem;
}

.scale-cv .section {
  padding: .6rem 0;
}

.scale-cv .section-title {
  margin-bottom: .5rem;
}

}