/* =========================
   BLOG APPICE
========================= */

.blog-page {
  padding-top: 96px;
}

.article-container {
  width: min(1180px, 92%);
  margin: 0 auto;
}



body {
    min-height: 100vh;
    overflow-x: hidden;

    font-family: "Outfit", sans-serif;
    color: var(--white);

    background-attachment: fixed;
}

/* HERO */

.article-hero {
  min-height: 72vh;

  display: flex;
  align-items: center;

  padding: 120px 4% 80px;
}

.article-hero .article-container {
  margin-left: auto;
  margin-right: auto;
}

.article-category {
  display: inline-block;

  margin-bottom: 22px;

  color: #89e589;

  font-family: "Quicksand", sans-serif;
  font-size: 13px;
  font-weight: 700;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-hero h1 {
  max-width: 980px;

  margin-bottom: 30px;

  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.96;
}

.article-introduction {
  max-width: 720px;

  margin-bottom: 34px;

  font-family: "Quicksand", sans-serif;
  font-size: 19px;
  line-height: 1.75;

  color: rgba(255, 255, 255, 0.75);
}

.article-information {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;

  color: rgba(255, 255, 255, 0.55);

  font-family: "Quicksand", sans-serif;
  font-size: 14px;
}

.article-information span {
  position: relative;
}

.article-information span:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 50%;
  right: -16px;

  width: 4px;
  height: 4px;

  border-radius: 50%;
  background: #89e589;

  transform: translateY(-50%);
}

/* IMAGEN PRINCIPAL */

.article-cover-section {
  padding: 0 4% 110px;
}

.article-cover {
  width: 78%;
  margin: 0;

  border: 2px solid #89E589;
  border-radius: 36px;

  overflow: hidden;

  box-shadow:
    0 0 18px rgba(137, 229, 137, 0.35),
    inset 0 0 12px rgba(137, 229, 137, 0.08);
}

.article-cover img {
  width: 100%;
  height: auto;
  display: block;
}


/* CONTENIDO DEL ARTÍCULO */


.article-video {
  width: 100%;
  margin: 35px 0 45px;

  overflow: hidden;

  border: 2px solid #89E589;
  border-radius: 28px;

  box-shadow: 0 0 20px rgba(137, 229, 137, 0.20);
}

.article-video video {
  width: 100%;
  height: auto;

  display: block;
} 

.article-content {
  padding: 20px 4% 120px;
}

.article-text {
    width: min(980px, 100%);
    margin: 0;

    margin-left: calc((100% - min(1180px, 92%)) / 2);
}

.article-text h2 {
  margin-top: 70px;
  margin-bottom: 26px;

  color: #b3c4e2;

  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
}

.article-text p {
  margin-bottom: 26px;

  font-family: "Quicksand", sans-serif;
  font-size: 18px;
  line-height: 1.9;
  text-align: justify;

  color: rgba(255, 255, 255, 0.76);
}

.article-text .article-lead {
  font-size: 22px;
  line-height: 1.75;

  color: rgba(255, 255, 255, 0.9);
}

.article-highlight {
  margin: 60px 0;
  padding: 38px 42px;

  border: 1px solid #89e589;
  border-radius: 28px;

  background: rgba(137, 229, 137, 0.05);
}

.article-highlight p {
  margin: 0;

  color: #ffffff;

  font-size: 21px;
  line-height: 1.7;
}

/* CTA */

.article-cta {
  padding: 40px 4% 120px;
}

.article-cta-content {
  width: min(1180px, 92%);
  margin: 0 auto;
  padding: 54px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;

  border: 1px solid rgba(137, 229, 137, 0.55);
  border-radius: 36px;

  background:
    linear-gradient(
      135deg,
      rgba(128, 125, 254, 0.18),
      rgba(137, 229, 137, 0.09)
    );

  backdrop-filter: blur(12px);
}

.article-cta h2 {
  max-width: 700px;
  margin-bottom: 18px;

  color: #b3c4e2;
}

.article-cta p {
  font-family: "Quicksand", sans-serif;
  font-size: 17px;
}




/* FONDO FIJO EXCLUSIVO DE BLOG */

body::before {
  content: "";
  position: fixed;
  inset: 0;

  background:
    linear-gradient(
      rgba(6, 11, 53, 0.35),
      rgba(6, 11, 53, 0.35)
    ),
    url("../assets/img/fondo_blog.png")
    center center / cover
    no-repeat;

  z-index: -2;
}