/* DRY = don't repeat yourself (no te repitas)*/
/*! Custom Properties (Propiedades personalizadas)*/
:root {
  --first-color: #293540; /* Ocupa un 60% de la página */
  --opacity-first-color: rgba(40, 53, 63, 0.75);
  --second-color: #d9a362; /* Ocupa un 30% de la página */
  --opacity-second-color: rgba(216, 163, 97, 0.75);
  --third-color: #a65f46; /* Ocupa un 10% de la página */
  --opacity-third-color: rgba(165, 95, 69, 0.75);
  --gray-light-color: #f3f3f3;
  --gray-color: #ccc;
  --gray-dark-color: #666;
  --opacity-black-color: rgba(0, 0, 0, 0.5);
  --link-color: #509ee3;
  --title-color: #a65f46;
  --subtitle-color: #bf7950;
  --text-color: #d9985f;
  --font: "Raleway", sans-serif;
  --max-width: 1200px;
  --header-height: 4rem; /* 1rem = 16px */
  /* Este sitio */
  --image: url("assets/home-image.jpg");
  --home-image-adjunta: fixed;
}

/*! Reset (Resetear)*/
html {
  box-sizing: border-box;
  font-family: var(--font);
  font-size: 16px;
  scroll-behavior: smooth; /* Transición de los botones de barra de navegación  */
}

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

body {
  margin: 0;
  overflow-x: hidden; /* Esa propiedad seria... "¿Que pasa con los que desborda?, en este caso lo ocutamos(hidden)" */
  color: var(--text-color);
  background-color: var(--first-color);
}

a {
  color: var(--link-color);
  transition: all 0.5s ease-out;
}

a:hover {
  opacity: 0.75;
}

h1 {
  margin: 0;
  font-size: 2rem;
}

h2 {
  margin: 0;
  font-size: 1.5rem;
}

h3 {
  margin: 0;
  font-size: 1.25rem;
}

h4 {
  margin: 0;
  font-size: 1rem;
}

h5 {
  margin: 0;
  font-size: 0.85rem;
}

h6 {
  margin: 0;
  font-size: 0.7rem;
}

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

p {
  line-height: 1.6; /* Este seria el interliniado de las letras en los parrafos */
}

/*! Components (Componentes)*/

/* ********** Contact Form ********** */

.contact-form {
  margin: 2rem auto;
  padding: 1rem;
  max-width: 800px;
  background-color: var(--gray-light-color);
}

.contact-form > * {
  padding: 0.5rem;
  margin: 1rem auto;
  display: block;
  width: 100%;
}

.contact-form input {
  font-size: 0.85rem;
  font-family: var(--font);
  border: 0;
  padding-left: 0;
  border-bottom: thin solid var(--opacity-second-color);
  background-color: var(--gray-light-color);
}

.contact-form textarea {
  font-size: 0.85rem;
  font-family: var(--font);
  border: thin solid var(--opacity-second-color);
  resize: none; /* No puede modificarse el tamaño del formulario */
  background-color: var(--gray-light-color);
}

.contact-form input[type="submit"] {
  margin-top: 0;
  cursor: pointer;
  transition: all 0.5s ease-out;
}

.contact-form input[type="submit"]:hover {
  opacity: 0.75;
}

.contact-form *::placeholder {
  color: var(--gray-dark-color);
}

.contact-form-response {
  /* Cartel de gracias */
  padding: 1rem;
  width: 400px;
  text-align: center;
  background-color: var(--gray-dark-color);
  color: var(--opacity-second-color);
}

.contact-form-response svg {
  margin-top: 2rem;
  width: 4rem;
  height: 4rem;
  fill: var(--opacity-second-color);
}

.modal#gracias:target {
  opacity: 1;
  pointer-events: auto;
}

@media screen and (min-width: 1024px) {
  .contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem; /* Espacio entre las dos columnas */
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1rem;
  }

  .contact-form textarea,
  .contact-form-loader {
    grid-column: span 2;
  }

  .contact-form input[type="submit"] {
    margin-left: 0;
  }
}

/* ********** HomeImage ********** */
.home-image {
  background-image: var(--image);
  background-repeat: no-repeat;
  background-size: cover; /* La imagen se adapte a la altura de manera proporcional del contenedor */
  background-position: center;
  background-attachment: var(--home-image-adjunta);
}

.home-image-opacity {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--opacity-black-color);
}

.home-image-title {
  font-size: 6vw;
  color: var(--gray-light-color);
}

/* ********** Menu ********** */
.menu-btn {
  outline: thin solid var(--first-color);
  border: 0;
  cursor: pointer; /* Para que aparezca la manito cuando pasamos el cursor sobre el boton */
  background-color: var(--second-color);
}

.menu-btn svg {
  fill: var(--first-color); /* Le estamos aplicando color a los svg */
}

.menu {
  position: fixed;
  left: 0;
  bottom: var(--header-height);
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--first-color);
  opacity: 0; /* El menu de navegagacion por default va a empezar con una opacidad en 0 */
  pointer-events: none;
  transition: opacity 0.5s ease; /* Para que cuando presionemos el boton el cambio no lo haga súbitamente sino que lo haga con una pequeña transición */
}

.menu.is-active {
  /* Esta clase me va a permitir cambiarle la opacidad a 1 y regresarle la propiedad pointer automatico */
  opacity: 1;
  pointer-events: auto;
}

.menu a {
  padding: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: var(--second-color);
}

.menu a:hover {
  color: var(--gray-light-color);
  background-color: var(--second-color);
}

@media screen and (min-width: 1024px) {
  .menu-btn {
    display: none;
  }

  .menu {
    position: static;
    width: auto;
    flex-direction: row;
    opacity: 1;
    pointer-events: auto;
  }

  .menu a {
    padding: 0 1rem;
  }

  .menu a:hover {
    background-color: transparent;
  }
}

/* ********** Modal ********** */

.modal {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--opacity-black-color);
  opacity: 0;
  pointer-events: none;
  transition: all 1s;
}

.modal-content {
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.modal-close svg {
  width: 3rem;
  height: 3rem;
  fill: var(--first-color);
}

.modal[id|="trabajo"]:target {
  /*Selector avanzado: Los corchetes en css, funcionas como selectores de atributos */
  opacity: 1;
  pointer-events: auto;
}

/*! Utilities (Utilidades)*/
.box-shadow-1 {
  box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.25);
}

.btn,
#btn-form {
  border-radius: 0.5rem;
  padding: 1rem;
  display: inline-block;
  width: 200px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: var(--first-color);
  background-color: var(--second-color);
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width);
}

.none {
  display: none;
}

.section {
  padding: 2rem 1rem;
}

.section-title {
  border-top: thin solid var(--second-color);
  border-bottom: thin solid var(--second-color);
  margin: 2rem auto;
  padding: 0.5rem 1rem;
  width: 250px;
  text-align: center;
  color: var(--title-color);
}

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

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

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

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

@media screen and (min-width: 1024px) {
  .full-lg-screen {
    width: 100%;
    min-height: 100vh;
  }

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

  .text-lg-left {
    text-align: left;
  }

  .text-lg-right {
    text-align: right;
  }
}

/*! Site Styles (Estilos particulares de sitio)*/
#acerca {
  padding: 0;
}
.aboutMe > article {
  margin-bottom: 2rem;
  padding: 2rem 1rem;
}
.aboutMe > .box-image {
  margin-bottom: 0rem;
  padding: 0rem;
}
.aboutMe h1 {
  color: var(--title-color);
}
.aboutMe h3 {
  color: var(--subtitle-color);
}

.contact-card {
  margin: 1rem auto;
  padding: 1rem;
  width: 100%;
  height: 144px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: var(--gray-light-color);
}

.contact-card > svg {
  width: 2rem;
  height: 2rem;
  fill: var(--third-color);
}

.contact-card > small {
  margin-top: -1rem;
}

.footer > small > a {
  color: var(--gray-light-color);
}

.footer {
  margin-bottom: var(--header-height);
  padding: 0.5rem;
  text-align: center;
  color: var(--gray-light-color);
  background-color: var(--third-color);
}

.header {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999; /* Para evitar que cualquier contenido que este sobre ella le aparezca encima, es decir que la cabecera sea siempre lo ultimo que se vea en cuestion de profundidad le aplicamos un numero muy alto */
  padding: 1rem;
  width: 100%;
  height: var(--header-height);
  background-color: var(--first-color);
}

.header > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo a {
  color: var(--third-color);
  font-weight: bold; /* negrita al texto */
  font-size: 2rem;
  text-decoration: none;
}

.portfolio-card {
  position: relative;
  width: 100%;
  height: 500px;
  margin: 0 auto;
  display: block;
}

.portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Con esta propiedad impedimos que las imagenes se deformen, es decir, que no pierdan su proporción */
}

.portfolio-card-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-color: var(--opacity-first-color);
  color: var(--gray-light-color);
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease-in-out;
}

.portfolio-card:hover .portfolio-card-info {
  opacity: 1;
  pointer-events: auto;
}

.portfolio-card-info > div {
  padding: 1rem;
  border: thin solid var(--gray-light-color);
  width: 100%;
  height: 100%;
}

.portfolio-modal {
  padding: 1rem;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  background-color: var(--gray-light-color);
}

.portfolio-modal h3 {
  border-bottom: medium solid var(--first-color);
  margin: 1rem auto;
  padding: 0.5rem 0;
  color: var(--title-color);
}

.portfolio-modal img {
  width: 20rem;
  height: 20rem;
  object-fit: cover;
  padding: 1rem;
}

.portfolio-details {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-auto-rows: 2rem;
}

.portfolio-details b {
  color: var(--first-color);
}

.social-media a {
  padding: 0 0.4rem;
  text-decoration: none;
}

.social-media svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--third-color);
}

@media screen and (min-width: 768px) {
  .contact-cards {
    display: grid;
    grid-template-columns: repeat(2, 48%);
    justify-content: space-between;
  }

  .portfolio > .container {
    display: grid;
    grid-template-columns: repeat(2, 50%);
  }

  .portfolio .section-title {
    grid-column: span 2;
  }

  .portfolio-modal {
    max-width: 800px;
    flex-direction: row;
  }

  .portfolio-info {
    margin-left: 1rem;
    align-self: center;
  }
}

@media screen and (min-width: 1024px) {
  .aboutMe {
    display: grid;
    grid-template-columns: repeat(2, 45%);
    justify-content: space-between;
    align-content: center;
  }

  .contact-cards {
    grid-template-columns: repeat(4, 24%);
  }

  .footer {
    margin-bottom: 0;
  }

  .header {
    position: sticky; /* El posicionamiento sticky es una mezcla entre el posicionamiento relativo y el fijo, la diferencia es que se va a comportar como elemento fijo cuando llegue a la altura que se le defina sin tapar los demas elementos */
    top: 0;
    padding: 0.5rem;
    height: calc(
      var(--header-height) - 0.5rem
    ); /* A esta función calc le estamos diciendo que reste ese 0.5rem que le quitamos al padding */
  }

  .portfolio > .container {
    grid-template-columns: repeat(
      3,
      1fr
    ); /* Propiedad fracción es para pedirle que reparta el decimal que sobra para todos por igual */
  }

  .portfolio .section-title {
    grid-column: span 3;
  }
}