/* ------------------- */
/* Custom properties   */
/* ------------------- */

:root {
  /* colors */
  --clr-white: hsl(0, 0%, 100%);
  --clr-grey2: hsl(210, 2%, 42%);
  --clr-grey: hsl(211, 25%, 18%);
  --clr-dark: hsl(212, 23%, 11%);
  --clr-darkblue: hsl(209, 61%, 50%);
  --clr-lightblue: hsl(202, 97%, 64%);
  --clr-important: hsl(60, 100%, 50%);

  /* font-sizes */

  /* @link https://utopia.fyi/type/calculator?c=320,16,1.25,1100,22,1.333,5,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* Step -2: 10.24px → 12.3812px */
  --fs-p3: clamp(0.64rem, 0.5851rem + 0.2745vi, 0.7738rem);
  /* Step -1: 12.8px → 16.5041px */
  --fs-p2: clamp(0.8rem, 0.705rem + 0.4749vi, 1.0315rem);
  /* Step 0: 16px → 22px */
  --fs-p1: clamp(1rem, 0.8462rem + 0.7692vi, 1.375rem);
  /* Step 1: 20px → 29.326px */
  --fs-p: clamp(1.25rem, 1.0109rem + 1.1956vi, 1.8329rem);
  /* Step 2: 25px → 39.0916px */
  --fs-4: clamp(1.5625rem, 1.2012rem + 1.8066vi, 2.4432rem);
  /* Step 3: 31.25px → 52.109px */
  --fs-3: clamp(1.9531rem, 1.4183rem + 2.6742vi, 3.2568rem);
  /* Step 4: 39.0625px → 69.4614px */
  --fs-2: clamp(2.4414rem, 1.6619rem + 3.8973vi, 4.3413rem);
  /* Step 5: 48.8281px → 92.592px */
  --fs-1: clamp(3.0518rem, 1.9296rem + 5.6108vi, 5.787rem);

  /* gap space */

  --gap: 1rem;

  /* box shadow */

  --bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, 0.25),
    0.125em 0.125em 0.25em rgba(0, 0, 0, 0.15);
  --bs-trayectoria: 0.25em 0.25em 0.75em rgba(255, 255, 255, 0.25),
  0.125em 0.125em 0.25em rgba(255, 255, 255, 0.15);

  /* font-families */

  --ff-logo: "Radio Canada", sans-serif;
  --ff-title: "Anton", sans-serif;
  --ff-text: "Roboto", sans-serif;

  --fw-700: 700;
  --fw-500: 500;
  --fw-300: 300;
}

/* ------------------- */
/* Reset               */
/* ------------------- */

/* https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reset margins */

body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture,
blockquote {
  margin: 0;
}

h1 {
  font-family: var(--ff-title);
}

h2,
h3,
h4 {
  font-family: var(--ff-text);
  text-wrap: balance;
}

html {
  /* color-scheme: light dark; */
  text-rendering: optimizeSpeed;
  scroll-behavior: smooth;
}

/* set up the body */

body {
  font-family: var(--ff-text);
  font-size: var(--fs-p);
  color: var(--clr-white);
  background-color: var(--clr-white);
  line-height: 1.6; /* for better visualization on screen */
  min-height: 100vh;
}

/* make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* make form elements easier to work with */
input,
button,
textarea,
select {
  font: inherit;
}

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

a {
  text-decoration: none;
  color: var(--clr-lightblue);
}

::marker {
  color: var(--clr-lightblue);
}

/* remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------- */
/* Utility classes     */
/* ------------------- */

.flex {
  display: flex;
  gap: var(--gap, 0.5rem);
}

.grid {
  display: grid;
  gap: var(--gap, 0.5rem);
}

.container {
  padding-inline: 2em;
  margin-inline: auto;
  max-width: 68rem;
  width: min(100% - 2rem, 65ch);
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

section,
blockquote {
  padding: 4.5rem 0;
}

footer {
  padding: 3rem 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* colors */

/* background-colors */

.bg-white {
  background-color: var(--clr-white);
}
.bg-grey {
  background-color: var(--clr-grey);
}
.bg-dark {
  background-color: var(--clr-dark);
}
.bg-darkblue {
  background-color: var(--clr-darkblue);
}
.bg-lightblue {
  background-color: var(--clr-lightblue);
}

/* text-color */

.text-white {
  color: var(--clr-white);
}
.text-grey {
  color: var(--clr-grey);
}
.text-dark {
  color: var(--clr-dark);
}
.text-darkblue {
  color: var(--clr-darkblue);
}
.text-lightblue {
  color: var(--clr-lightblue);
}
.text-important {
  color: var(--clr-important);
}
.text-cursive {
  font-style: italic;
}

/* typography */

.ff-title {
  font-family: var(--ff-title);
}
.ff-logo {
  font-family: var(--ff-logo);
}
.ff-text {
  font-family: var(--ff-text);
}

/* letter-spacing */

.letter-spacing-1 {
  letter-spacing: 4.75px;
}
.letter-spacing-2 {
  letter-spacing: 2.7px;
}
.letter-spacing-3 {
  letter-spacing: 2.35px;
}

.uppercase {
  text-transform: uppercase;
}

/* font-size */

.fs-1 {
  font-size: var(--fs-1);
}
.fs-2 {
  font-size: var(--fs-2);
}
.fs-3 {
  font-size: var(--fs-3);
}
.fs-4 {
  font-size: var(--fs-4);
}
.fs-p {
  font-size: var(--fs-p);
}
.fs-p1 {
  font-size: var(--fs-p1);
}
.fs-p2 {
  font-size: var(--fs-p2);
}
.fs-p3 {
  font-size: var(--fs-p3);
}

.fs-1,
.fs-2,
.fs-3,
.fs-4 {
  line-height: 1.3;
}

/* font weights */

.fw-700 {
  font-weight: var(--fw-700);
}

.fw-500 {
  font-weight: var(--fw-500);
}

.fw-300 {
  font-weight: var(--fw-300);
}

/* ------------------- */
/* Compontents         */
/* ------------------- */

/* Cookies */

/* .aviso-cookies {
  display: none;
  flex-direction: column;
  background-color: var(--clr-white);
  padding: 1.5rem;
  width: calc(100% - 40px);
  max-width: 250px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  padding-top: 40px;
  box-shadow: var(--bs);
  text-align: center;
}

.aviso-cookies.activo {
  display: block;
}

.aviso-cookies .galleta {
  max-width: 100px;
  position: absolute;
  top: -50px;
  left: calc(50% - 50px);
}


.aviso-cookies .titulo,
.aviso-cookies .parrafo {
  margin: 1rem 0;
}

.aviso-cookies .boton {
  width: 100%;
  background: var(--clr-darkblue);
  text-align: center;
  padding: 1rem 1.4rem;
  cursor: pointer;
  transition: .3s ease all;
  -webkit-transition: .3s ease all;
  -moz-transition: .3s ease all;
  -ms-transition: .3s ease all;
  -o-transition: .3s ease all;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  margin-bottom: 1rem;
}

.aviso-cookies .boton:hover {
  background: var(--clr-lightblue);
}

.aviso-cookies .enlace:hover {
  text-decoration: underline;
}

.fondo-aviso-cookies {
	display: none;
	background: rgba(0,0,0,.70);
	position: fixed;
	z-index: 99;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
}

.fondo-aviso-cookies.activo {
	display: block;
} */

/* header */

.header {
  display: flex;
  height: 5rem;
  position: fixed;
  z-index: 9999;
  width: 100%;
  justify-content: space-between;
  padding: 1em;
  background-color: var(--clr-darkblue);
  box-shadow: var(--bs);
}

.logo {
  display: flex;
  align-items: center;
  transition: color 2s;
  -webkit-transition: color 2s;
  -moz-transition: color 2s;
  -ms-transition: color 2s;
  -o-transition: color 2s;
}

.nav {
  position: fixed;
  background-color: var(--clr-dark);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 250ms cubic-bezier(0.5, 0, 0.5, 1);
}

.nav__list {
  list-style: none;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: 0;
  padding: 0;
}

.active {
  background-color: var(--clr-dark);
  color: var(--clr-white);
  margin-left: 0.5rem;
}

.nav__link {
  color: var(--clr-white);
  font-family: var(--ff-text);
  font-size: var(--fs-3);
  text-transform: uppercase;
}

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

.nav-toggle {
  padding: 0.5em;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: absolute;
  right: 1em;
  top: 1.5rem;
  z-index: 1000;
}

.nav-open .nav {
  transform: translateX(0);
}

.nav-open .nav-toggle {
  position: fixed;
}

.nav-open .hamburger {
  transform: rotate(0.625turn);
}

.nav-open .hamburger::before {
  transform: rotate(90deg) translateX(-6px);
}

.nav-open .hamburger::after {
  opacity: 0;
}

.hamburger {
  display: block;
  position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  background: var(--clr-white);
  width: 2em;
  height: 3px;
  border-radius: 1em;
  transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

.hamburger::before {
  top: 6px;
}

.hamburger::after {
  bottom: 6px;
}

.title-section {
  text-align: center;
  margin-bottom: 2rem;
}

/* 404 & EN CONSTRUCCION */

.missing-page,
.en_construccion {
  height: 100vh;
  align-items: center;
}

.missing-page,
.missing-page.container,
.en_construccion,
.en_construccion.container {
  background-color: var(--clr-darkblue);
}

.missing-page > .flex,
.en_construccion > .flex {
  flex-direction: column;
  align-items: center;
}

.missing-page__img,
.en_construccion__img {
  max-height: 300px;
  min-width: 300px;
  margin: 1.5rem 0;
}

/* BLOG */
.blog-section {
  padding-top: 6rem;
}

.blog-section > .grid {
  grid-template-columns: repeat( auto-fill, minmax(270px, 1fr)); 
}

.post-model {
  box-shadow: var(--bs);
  padding: .5rem;
}

.post-model__text {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.post-model__img {
  width: 100%;
  margin-bottom: 1rem;
}

.post-model__date {
  margin-bottom: 1.1rem;
}

.post-model__btn {
  display: flex;
  justify-content: center;
  align-self: flex-end;
  width: fit-content;
  padding: 0.3rem 1.3rem;
  margin-top: 2rem;
  border: 1px solid var(--clr-darkblue);
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

.post-model__btn:focus,
.post-model__btn:hover {
  border: 1px solid var(--clr-darkblue);
  background-color: var(--clr-darkblue);
}

.post-model__btn:focus p,
.post-model__btn:hover p {
  color: var(--clr-white);
}


/*  Hero content */

.hero .container {
  margin-top: 2.5rem;
}

.hero__img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
      to bottom,
      rgba(22, 28, 35, .6),
      rgba(22, 28, 35, .6)
    ),
    url("../img/me_new.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--clr-dark);
}

/* sobre mi */

.sobremi__img {
  margin: 1rem 2rem 5rem 0;
  float: left;
  min-width: 300px;
  width: 100%;
}

/* habilidades */

.habilidades-main {
  flex-wrap: wrap;
  margin-top: 3rem;
}

.habilidades-card {
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 250px;
  padding: 2rem .5rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--clr-lightblue);
  color: var(--clr-white);
  border-radius: .32rem;
  -webkit-border-radius: .32rem;
  -moz-border-radius: .32rem;
  -ms-border-radius: .32rem;
  -o-border-radius: .32rem;
}

.habilidades-icon {
  width: 80px;
  color: var(--clr-white);
}

/* trayectoria */

.career-container {
  flex-wrap: wrap;
  margin-top: 3rem ;
  gap: calc(var(--gap) + 1rem);
}

.career-card {
  flex-direction: column;
  flex: 1 1 18rem;
  padding: 1.5rem;
  max-width: fit-content;
  min-width: 18rem;
  justify-content: center;
  border-radius: .32rem;
  -webkit-border-radius: .32rem;
  -moz-border-radius: .32rem;
  -ms-border-radius: .32rem;
  -o-border-radius: .32rem;
  text-align: center;
  color: var(--clr-dark);
}


/* VALORES Y AFICIONES */

.valores-main {
  flex-direction: column;
  margin: 3rem 0;
}

.valores-module {
  padding: 2rem 1rem;
  margin-bottom: 4rem;
  border-radius: .32rem;
  -webkit-border-radius: .32rem;
  -moz-border-radius: .32rem;
  -ms-border-radius: .32rem;
  -o-border-radius: .32rem;
  flex-grow: 1 1 356px;
}

.valores-list,
.aficiones-list {
  list-style-type: square;
  padding: .5rem 2rem;
}

.valores-item::marker,
.aficiones-item::marker {
  color: var(--clr-lightblue);
}

/*  CONTACTO */

.footer .container {
  flex-direction: column;
}

.footer > * {
  justify-content: center;
  align-items: center;
}

.footer__icon {
  width: 1.2rem;
  height: 1.2rem;
  display: inline;
}

.footer__declaration {
  flex-direction: row;
}

.footer__rrss {
  align-items: center;
}




@media (min-width:650px) {
    /*  valores y aficiones */

  .valores-main {
    flex-direction: row;
  }

  .valores-module {
    flex: 1 1 300px;
    padding: 2rem;
  }
    
}

@media (min-width: 756px) {
  header .container {
    width: 100%;
  }

  .nav-toggle {
    display: none;
  }

  .logo:hover {
    color: var(--clr-dark);
  }

  .nav {
    position: relative;
    width: 75%;
    transform: none;
    transition: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    background-color: transparent;
  }

  .nav__list {
    flex-direction: row;
    justify-content: flex-end;
  }

  .nav__link {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: var(--fs-p3);
    color: var(--clr-white);
  }

  .nav__link:hover,
  .nav__link:focus {
    background-color: var(--clr-dark);
    color: var(--clr-white);
  }

  /* sobre mi section */

  .sobremi__img {
    margin: .5rem 2rem 2rem 0;
    width: 300px;
  }



}

@media (min-width: 870px) {
  .nav__link {
    font-size: var(--fs-p2);
  }

}

@media (min-width: 1076px) {
  .career-card {
    justify-content: space-between;
  }

  .career-years h3 {
    font-size: var(--fs-4);
  }
  
  .career-department p {
    font-size: var(--fs-p);
  }
  
  .career-functions p {
    font-size: var(--fs-p);
  }

  .post-model__img {
    max-height: 400px;
    object-fit: cover;
  }

  .post-model__title {
    font-size: 2.2rem;
  }


}