@import "reset.css";
@import "fonts.css";
@import "utilidades.css";

/*--------------------------------------------*\
estilos globlaes
\*--------------------------------------------*/
body {
  background: url(../assets/img/concrete-wall.png) repeat;
  background-color: var(--color-grey-100);
  background-size: auto auto;
  border-bottom: 8px solid #041835;
  color: var(--color-grey-800);
  font-family: "Noto Sans", sans-serif;
  margin: 0;
  min-height: 500px;
  padding: 0;
}

header nav {
  align-items: center;
  background-color: #0c1241;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  color: var(--color-white);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  position: relative;
}

nav a {
  color: var(--color-white);
  text-decoration: none;
}

.site-header {
  background: url(../assets/img/concrete-wall.png) repeat,
    linear-gradient(0deg, rgba(241, 245, 249, 1) 0%, rgba(203, 213, 225, 1) 100%);
  background-size: auto auto;
  border-bottom: solid 1px var(--color-grey-300);
}

.site-title {
  color: #2544ab;
  font-family: "Patria", sans-serif;
  font-size: 6rem;
  margin: 0;
}

.site-title span {
  /* display: block; */
}

.section-title {
  color: #2544ab;
  font-family: "Patria", sans-serif;
  font-size: var(--text-xxl);
  margin-bottom: var(--space-lg);
}

.main-container {
  border-bottom: 1px solid var(--color-grey-300);
}

.title-container {
  margin: 0 auto;
  max-width: 1320px;
  padding: var(--space-xxxxl) 0 var(--space-xxxxl) 0;
}

.content-grid {
  display: grid;
  gap: var(--space-xxl);
  grid-template-columns: 1fr 300px;
  margin: 0 auto;
  max-width: 1320px;
}

@media only screen and (max-width: 920px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

.curso-section {
  padding-bottom: var(--space-xxxl);
  padding-top: var(--space-xxl);
}

.curso-box {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr 1fr;
}

@media only screen and (max-width: 920px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 520px) {
  .title-container {
    font-size: 4.8rem;
    padding: var(--space-xxxl) var(--space-xl) var(--space-xxxl);
  }

  .site-title {
    font-size: 4.8rem;
  }

  .curso-box {
    grid-template-columns: 1fr;
  }

  .main-content {
    padding-inline: var(--space-xl);
  }

  .anuncio-section {
    border-left-color: transparent;
    padding: 0;
  }
}

.curso-item {
  border-radius: 12px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  overflow: hidden;
  position: relative;
}

.curso-item img {
  width: 100%;
}

.curso-item:hover .overlay {
  border-radius: 12px;
  cursor: pointer;
  opacity: 1;
  transform: scale(1);
}

.overlay {
  background-color: rgba(12, 18, 65, 0.75);
  border-radius: 12px;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: scale(1.3);
  transition: transform 0.4s ease 0s;
  width: 100%;
}

.overlay span {
  border-radius: 12px;
  color: #fff;
  font-family: "Patria", "Noto Sans", sans-serif;
  font-size: 3rem;
  font-weight: bold;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.curso-item img {
  border-radius: 12px;
  transition: transform 0.8s ease;
}

.curso-item:hover img {
  border-radius: 12px;
  transform: scale(1.1);
}

.anuncio-section {
  border-left: 1px solid var(--color-grey-300);
  padding-bottom: var(--space-xxl);
  padding-left: var(--space-xxl);
  padding-top: var(--space-xxl);
}

.anuncio-item {
  margin-bottom: var(--space-xl);
}

.anuncio-fecha,
.anuncio-contenido {
  display: block;
}

.anuncio-fecha {
  color: var(--color-grey-700);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0;
}

@media only screen and (max-width: 520px) {
  .main-content {
    padding-inline: var(--space-xl);
  }

  .anuncio-section {
    border-left-color: transparent;
    padding: 0;
  }
}

footer {
  align-items: center;
  background: url(../assets/img/bg_footer_pattern.svg) bottom left repeat-x, url(../assets/img/concrete-wall.png) repeat;
  background-color: var(--color-grey-100);
  background-color: var(--color-grey-100);
  background-size: auto, auto;
  background-size: 100%, auto;
  display: flex;
  justify-content: center;
  min-height: 500px;
}

footer div {
  margin-bottom: var(--space-xxl);
}

footer h3 {
  font-family: "Patria", "Noto Sans", sans-serif;
  font-size: var(--text-xxl);
  margin: 0 0 var(--space-sm);
}

footer p {
  margin-bottom: var(--space-xs);
  margin-top: 0;
}

footer div p:last-of-type {
  margin-bottom: var(--space-xl);
}

.btn-login {
  background: linear-gradient(to right, #2544ab, #2544ab, #0284c7, #0284c7);
  color: var(--color-grey-100);
  font-weight: 400;
  padding: var(--space-md) var(--space-sm);
  transition: all ease 0.2s;
}

.btn-login:hover {
  padding-right: var(--space-lg);
}

.logo-spf {
  padding-inline: var(--space-sm);
}

.text-gradient-white {
  background: linear-gradient(to right, #0284c7, #2544ab, #0284c7, #2544ab);
  background-clip: border-box;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}