/* ==========================================================
   GEOPLOT CAMPUS — PÁGINA GENERAL DE CURSOS
   Archivo:
   assets/css/campus_cursos.css

   Esta hoja se carga después de:
   - style.css
   - responsive.css
   - heroes.css
   - campus_header.css

   Su función es adaptar la landing general de cursos
   al lenguaje visual institucional de GEOPLOT Campus.
========================================================== */


/* ==========================================================
   01. VARIABLES GENERALES
========================================================== */

body[data-page="campus-cursos"] {
  --campus-cursos-white: #ffffff;

  --campus-cursos-bg: #f7f9fc;
  --campus-cursos-bg-soft: #f1f6fa;
  --campus-cursos-bg-blue: #edf7fc;

  --campus-cursos-title: #071725;
  --campus-cursos-text: #34495c;
  --campus-cursos-text-soft: #617487;
  --campus-cursos-text-light: #7d8d9a;

  --campus-cursos-blue: #078dbd;
  --campus-cursos-blue-light: #36b7e5;
  --campus-cursos-blue-dark: #055e82;
  --campus-cursos-blue-deep: #062c42;

  --campus-cursos-navy: #071725;
  --campus-cursos-navy-soft: #0d2a40;
  --campus-cursos-navy-card: #103852;

  --campus-cursos-orange: #ff7a00;
  --campus-cursos-orange-dark: #dd6700;

  --campus-cursos-border: #dce6ed;
  --campus-cursos-border-dark: #c7d6df;

  --campus-cursos-shadow-small:
    0 7px 22px rgba(7, 35, 53, 0.07);

  --campus-cursos-shadow:
    0 18px 44px rgba(7, 35, 53, 0.11);

  --campus-cursos-shadow-large:
    0 28px 70px rgba(7, 35, 53, 0.14);

  --campus-cursos-radius-small: 10px;
  --campus-cursos-radius: 18px;
  --campus-cursos-radius-large: 28px;
  --campus-cursos-radius-extra: 36px;

  --campus-cursos-container: 1240px;
  --campus-cursos-transition: 180ms ease;
}


/* ==========================================================
   02. BASE GENERAL
========================================================== */

body[data-page="campus-cursos"] {
  min-width: 320px;
  margin: 0;

  color: var(--campus-cursos-text);
  background: var(--campus-cursos-bg);

  font-family:
    "Inter",
    Arial,
    sans-serif;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;

  overflow-x: hidden;
}

body[data-page="campus-cursos"] *,
body[data-page="campus-cursos"] *::before,
body[data-page="campus-cursos"] *::after {
  box-sizing: border-box;
}

body[data-page="campus-cursos"] main {
  display: block;
  width: 100%;

  background: var(--campus-cursos-bg);
}

body[data-page="campus-cursos"] img {
  display: block;
  max-width: 100%;
}

body[data-page="campus-cursos"] button,
body[data-page="campus-cursos"] input,
body[data-page="campus-cursos"] select,
body[data-page="campus-cursos"] textarea {
  font: inherit;
}

body[data-page="campus-cursos"] a {
  color: inherit;
}

body[data-page="campus-cursos"] section {
  scroll-margin-top: 150px;
}


/* ==========================================================
   03. CONTENEDOR GENERAL
========================================================== */

body[data-page="campus-cursos"] .container {
  width: min(
    calc(100% - 48px),
    var(--campus-cursos-container)
  );

  margin-inline: auto;
}


/* ==========================================================
   04. TIPOGRAFÍA MAESTRA
========================================================== */

body[data-page="campus-cursos"] h1,
body[data-page="campus-cursos"] h2,
body[data-page="campus-cursos"] h3,
body[data-page="campus-cursos"] p {
  overflow-wrap: break-word;
}

body[data-page="campus-cursos"] h2 {
  margin: 0;

  color: var(--campus-cursos-title);

  font-size: clamp(1.65rem, 2.55vw, 2.35rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.042em;
}

body[data-page="campus-cursos"] h3 {
  margin: 0;

  color: var(--campus-cursos-title);

  font-weight: 850;
  line-height: 1.32;
  letter-spacing: -0.018em;
}

body[data-page="campus-cursos"] p {
  color: var(--campus-cursos-text-soft);
}

body[data-page="campus-cursos"] .section-kicker,
body[data-page="campus-cursos"] .campus-platform-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin: 0 0 15px;

  color: var(--campus-cursos-blue);

  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="campus-cursos"] .section-kicker::before,
body[data-page="campus-cursos"] .campus-platform-eyebrow::before {
  width: 26px;
  height: 3px;

  flex: 0 0 auto;

  background: var(--campus-cursos-blue-light);
  border-radius: 999px;

  content: "";
}


/* ==========================================================
   05. BOTONES GENERALES
========================================================== */

body[data-page="campus-cursos"] .button {
  display: inline-flex;
  min-height: 50px;

  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 13px 24px;

  border: 1px solid transparent;
  border-radius: 8px;

  font-family:
    "Inter",
    Arial,
    sans-serif;

  font-size: 0.91rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;

  cursor: pointer;

  transition:
    transform var(--campus-cursos-transition),
    box-shadow var(--campus-cursos-transition),
    background var(--campus-cursos-transition),
    color var(--campus-cursos-transition),
    border-color var(--campus-cursos-transition);
}

body[data-page="campus-cursos"] .button:hover {
  transform: translateY(-2px);
}

body[data-page="campus-cursos"] .button:focus-visible {
  outline: 3px solid rgba(54, 183, 229, 0.36);
  outline-offset: 4px;
}

body[data-page="campus-cursos"] .button-primary {
  color: var(--campus-cursos-white);
  background: var(--campus-cursos-blue);
  border-color: var(--campus-cursos-blue);

  box-shadow:
    0 11px 26px rgba(7, 141, 189, 0.21);
}

body[data-page="campus-cursos"] .button-primary:hover {
  color: var(--campus-cursos-white);
  background: var(--campus-cursos-blue-dark);
  border-color: var(--campus-cursos-blue-dark);

  box-shadow:
    0 15px 32px rgba(7, 141, 189, 0.28);
}

body[data-page="campus-cursos"] .button-secondary {
  color: var(--campus-cursos-blue-dark);
  background: var(--campus-cursos-white);
  border-color: var(--campus-cursos-border-dark);
}

body[data-page="campus-cursos"] .button-secondary:hover {
  color: var(--campus-cursos-blue-deep);
  background: var(--campus-cursos-bg-blue);
  border-color: var(--campus-cursos-blue-light);
}


/* ==========================================================
   06. HERO CLARO DE CURSOS
========================================================== */

body[data-page="campus-cursos"] .courses-catalog-hero {
  position: relative;

  min-height: 680px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 82% 22%,
      rgba(54, 183, 229, 0.15),
      transparent 25%
    ),
    radial-gradient(
      circle at 4% 90%,
      rgba(7, 141, 189, 0.08),
      transparent 28%
    ),
    linear-gradient(
      115deg,
      #ffffff 0%,
      #f8fbfd 54%,
      #edf7fc 100%
    );

  border-bottom: 1px solid var(--campus-cursos-border);
}

body[data-page="campus-cursos"] .courses-catalog-hero::before {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(7, 141, 189, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7, 141, 189, 0.035) 1px,
      transparent 1px
    );

  background-size: 42px 42px;

  pointer-events: none;
  content: "";
}

body[data-page="campus-cursos"]
.courses-catalog-hero-container {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(430px, 0.82fr);

  align-items: center;
  gap: 76px;

  min-height: 680px;
  padding-block: 56px;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-content {
  max-width: 680px;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-title {
  max-width: 680px;
  margin: 0;

  color: var(--campus-cursos-title);

  font-family:
    "Inter",
    Arial,
    sans-serif;

  font-size: clamp(2.2rem, 3.4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.052em;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-title span {
  display: block;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-title span:nth-child(2),
body[data-page="campus-cursos"]
.courses-catalog-hero-title span:nth-child(3) {
  color: var(--campus-cursos-blue);
}

body[data-page="campus-cursos"]
.courses-catalog-hero-description {
  max-width: 670px;
  margin: 24px 0 0;

  color: var(--campus-cursos-text-soft);

  font-size: 1.03rem;
  font-weight: 400;
  line-height: 1.72;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;

  margin-top: 28px;
}


/* ==========================================================
   07. PANEL AZUL DE OCHO CURSOS
========================================================== */

body[data-page="campus-cursos"]
.courses-catalog-hero-panel {
  position: relative;

  width: 100%;
  max-width: 480px;

  justify-self: end;

  padding: 16px;

  color: var(--campus-cursos-white);
  background:
    linear-gradient(
      155deg,
      #0d3a57,
      #071d2d
    );

  border: 1px solid rgba(54, 183, 229, 0.34);
  border-radius: 24px;

  box-shadow:
    0 26px 60px rgba(7, 35, 53, 0.22);
}

body[data-page="campus-cursos"]
.courses-catalog-hero-panel::before {
  position: absolute;
  inset: -18px;
  z-index: -1;

  background:
    radial-gradient(
      circle,
      rgba(54, 183, 229, 0.22),
      transparent 66%
    );

  pointer-events: none;
  content: "";
}

body[data-page="campus-cursos"]
.courses-catalog-hero-number {
  display: flex;
  min-height: 104px;

  align-items: center;
  gap: 20px;

  padding: 22px 24px;
  margin-bottom: 10px;

  color: var(--campus-cursos-white);
  background:
    linear-gradient(
      135deg,
      #076aa0,
      #07314d
    );

  border: 1px solid rgba(101, 210, 239, 0.15);
  border-radius: 16px;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-number strong {
  color: var(--campus-cursos-white);

  font-family:
    "Inter",
    Arial,
    sans-serif;

  font-size: clamp(2.7rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-number span {
  max-width: 120px;

  color: #e5f7ff;

  font-size: 0.77rem;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-course {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);

  align-items: center;
  gap: 13px;

  min-height: 56px;
  margin-top: 8px;
  padding: 10px 15px;

  color: #eaf7fc;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(142, 208, 232, 0.17);
  border-radius: 11px;

  text-decoration: none;

  transition:
    transform var(--campus-cursos-transition),
    background var(--campus-cursos-transition),
    border-color var(--campus-cursos-transition);
}

body[data-page="campus-cursos"]
.courses-catalog-hero-course:hover {
  transform: translateX(4px);

  background: rgba(54, 183, 229, 0.15);
  border-color: rgba(101, 210, 239, 0.45);
}

body[data-page="campus-cursos"]
.courses-catalog-hero-course > span {
  display: grid;
  width: 31px;
  height: 31px;

  place-items: center;

  color: var(--campus-cursos-blue-light);
  background: rgba(7, 141, 189, 0.12);
  border: 1px solid rgba(54, 183, 229, 0.45);
  border-radius: 50%;

  font-size: 0.68rem;
  font-weight: 850;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-course p {
  margin: 0;

  color: #edf8fc;

  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}


/* ==========================================================
   08. PRESENTACIÓN DEL CATÁLOGO
========================================================== */

body[data-page="campus-cursos"]
.courses-catalog-intro {
  padding-block: 88px 56px;

  background: var(--campus-cursos-white);
}

body[data-page="campus-cursos"]
.courses-catalog-intro-container {
  display: grid;
  grid-template-columns:
    minmax(260px, 0.7fr)
    minmax(0, 1.3fr);

  align-items: end;
  gap: 70px;
}

body[data-page="campus-cursos"]
.courses-catalog-intro-heading h2 {
  font-size: clamp(1.65rem, 2.55vw, 2.35rem);
}

body[data-page="campus-cursos"]
.courses-catalog-intro-text p {
  max-width: 700px;
  margin: 0;

  color: var(--campus-cursos-text-soft);

  font-size: 1.05rem;
  line-height: 1.72;
}


/* ==========================================================
   09. CATÁLOGO Y FILTROS
========================================================== */

body[data-page="campus-cursos"]
.courses-catalog-section {
  padding-block: 54px 108px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      var(--campus-cursos-bg)
    );
}

body[data-page="campus-cursos"]
.courses-catalog-toolbar {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: space-between;
  gap: 28px;

  margin-bottom: 38px;
}

body[data-page="campus-cursos"]
.courses-catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

body[data-page="campus-cursos"]
.courses-filter-button {
  min-height: 42px;
  padding: 9px 17px;

  color: var(--campus-cursos-text);
  background: var(--campus-cursos-white);
  border: 1px solid var(--campus-cursos-border-dark);
  border-radius: 999px;

  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1;

  cursor: pointer;

  transition:
    color var(--campus-cursos-transition),
    background var(--campus-cursos-transition),
    border-color var(--campus-cursos-transition),
    transform var(--campus-cursos-transition);
}

body[data-page="campus-cursos"]
.courses-filter-button:hover {
  color: var(--campus-cursos-blue-dark);
  border-color: var(--campus-cursos-blue-light);

  transform: translateY(-1px);
}

body[data-page="campus-cursos"]
.courses-filter-button.is-active,
body[data-page="campus-cursos"]
.courses-filter-button[aria-pressed="true"] {
  color: var(--campus-cursos-white);
  background: var(--campus-cursos-blue);
  border-color: var(--campus-cursos-blue);
}


/* ==========================================================
   10. TARJETAS DEL CATÁLOGO
========================================================== */

body[data-page="campus-cursos"]
.courses-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

body[data-page="campus-cursos"]
.courses-catalog-card {
  min-width: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: var(--campus-cursos-white);
  border: 1px solid var(--campus-cursos-border);
  border-radius: var(--campus-cursos-radius-large);

  box-shadow: var(--campus-cursos-shadow-small);

  transition:
    transform var(--campus-cursos-transition),
    box-shadow var(--campus-cursos-transition),
    border-color var(--campus-cursos-transition);
}

body[data-page="campus-cursos"]
.courses-catalog-card:hover {
  transform: translateY(-5px);

  border-color: rgba(54, 183, 229, 0.55);
  box-shadow: var(--campus-cursos-shadow);
}

body[data-page="campus-cursos"]
.courses-catalog-card[hidden] {
  display: none !important;
}

body[data-page="campus-cursos"]
.courses-catalog-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: var(--campus-cursos-bg-soft);
  border-bottom: 1px solid var(--campus-cursos-border);
}

body[data-page="campus-cursos"]
.courses-catalog-card-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;

  object-fit: cover;
  object-position: center;

  transition: transform 280ms ease;
}

body[data-page="campus-cursos"]
.courses-catalog-card:hover
.courses-catalog-card-image img {
  transform: scale(1.025);
}

body[data-page="campus-cursos"]
.courses-catalog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;

  padding: 30px;
}

body[data-page="campus-cursos"]
.courses-catalog-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

body[data-page="campus-cursos"]
.courses-catalog-card-category {
  margin: 0;

  color: var(--campus-cursos-blue);

  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

body[data-page="campus-cursos"]
.courses-catalog-card-number {
  display: grid;
  width: 36px;
  height: 36px;

  flex: 0 0 auto;
  place-items: center;

  color: var(--campus-cursos-blue);
  background: var(--campus-cursos-bg-blue);
  border-radius: 50%;

  font-size: 0.7rem;
  font-weight: 850;
}

body[data-page="campus-cursos"]
.courses-catalog-card-title {
  margin: 19px 0 0;

  font-size: 1.24rem;
  font-weight: 900;
  line-height: 1.28;
}

body[data-page="campus-cursos"]
.courses-catalog-card-title a {
  color: var(--campus-cursos-title);
  text-decoration: none;
}

body[data-page="campus-cursos"]
.courses-catalog-card-title a:hover {
  color: var(--campus-cursos-blue-dark);
}

body[data-page="campus-cursos"]
.courses-catalog-card-description {
  margin: 15px 0 0;

  color: var(--campus-cursos-text-soft);

  font-size: 0.95rem;
  line-height: 1.68;
}

body[data-page="campus-cursos"]
.courses-catalog-card-features {
  display: grid;
  gap: 10px;

  margin: 22px 0 0;
  padding: 0;

  list-style: none;
}

body[data-page="campus-cursos"]
.courses-catalog-card-features li {
  position: relative;

  padding-left: 27px;

  color: var(--campus-cursos-text);

  font-size: 0.88rem;
  line-height: 1.5;
}

body[data-page="campus-cursos"]
.courses-catalog-card-features li::before {
  position: absolute;
  top: 0.04em;
  left: 0;

  display: grid;
  width: 19px;
  height: 19px;

  place-items: center;

  color: var(--campus-cursos-blue);
  background: rgba(54, 183, 229, 0.15);
  border-radius: 50%;

  font-size: 0.64rem;
  font-weight: 900;

  content: "✓";
}
/* ==========================================================
   11. PIE DE TARJETAS
========================================================== */

body[data-page="campus-cursos"]
.courses-catalog-card-footer {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: space-between;
  gap: 18px;

  margin-top: auto;
  padding-top: 28px;
}

body[data-page="campus-cursos"]
.courses-catalog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body[data-page="campus-cursos"]
.courses-catalog-card-tags span {
  padding: 7px 10px;

  color: var(--campus-cursos-blue-dark);
  background: var(--campus-cursos-bg-blue);
  border-radius: 999px;

  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1;
}

body[data-page="campus-cursos"]
.courses-catalog-card-button {
  min-height: 42px;
  padding: 11px 16px;

  font-size: 0.8rem;
}


/* ==========================================================
   12. METODOLOGÍA
========================================================== */

body[data-page="campus-cursos"]
.courses-method-section {
  padding-block: 108px;

  background:
    linear-gradient(
      180deg,
      var(--campus-cursos-bg-blue),
      #f8fcfd
    );

  border-top: 1px solid var(--campus-cursos-border);
  border-bottom: 1px solid var(--campus-cursos-border);
}

body[data-page="campus-cursos"]
.courses-method-heading {
  max-width: 790px;
  margin: 0 auto 52px;

  text-align: center;
}

body[data-page="campus-cursos"]
.courses-method-heading .section-kicker {
  justify-content: center;
}

body[data-page="campus-cursos"]
.courses-method-heading h2 {
  font-size: clamp(1.65rem, 2.55vw, 2.35rem);
}

body[data-page="campus-cursos"]
.courses-method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

body[data-page="campus-cursos"]
.courses-method-card {
  position: relative;

  min-height: 270px;
  padding: 31px 25px;

  background: var(--campus-cursos-white);
  border: 1px solid var(--campus-cursos-border);
  border-radius: var(--campus-cursos-radius-large);

  box-shadow: var(--campus-cursos-shadow-small);

  transition:
    transform var(--campus-cursos-transition),
    box-shadow var(--campus-cursos-transition),
    border-color var(--campus-cursos-transition);
}

body[data-page="campus-cursos"]
.courses-method-card:hover {
  transform: translateY(-5px);

  border-color: rgba(54, 183, 229, 0.5);
  box-shadow: var(--campus-cursos-shadow);
}

body[data-page="campus-cursos"]
.courses-method-number {
  display: grid;
  width: 42px;
  height: 42px;

  place-items: center;

  color: var(--campus-cursos-blue);
  background: var(--campus-cursos-bg-blue);
  border-radius: 50%;

  font-size: 0.72rem;
  font-weight: 850;
}

body[data-page="campus-cursos"]
.courses-method-card h3 {
  margin-top: 25px;

  font-size: 1.06rem;
  font-weight: 900;
  line-height: 1.3;
}

body[data-page="campus-cursos"]
.courses-method-card p {
  margin: 14px 0 0;

  color: var(--campus-cursos-text-soft);

  font-size: 0.9rem;
  line-height: 1.64;
}


/* ==========================================================
   13. SECCIÓN GEOPLOT CAMPUS + MOODLE
========================================================== */

body[data-page="campus-cursos"]
.campus-platform-section {
  position: relative;

  padding-block: 108px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 84% 15%,
      rgba(54, 183, 229, 0.16),
      transparent 25%
    ),
    linear-gradient(
      150deg,
      #ffffff,
      #eff8fc
    );
}

body[data-page="campus-cursos"]
.campus-platform-background {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(7, 141, 189, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7, 141, 189, 0.03) 1px,
      transparent 1px
    );

  background-size: 44px 44px;

  pointer-events: none;
}

body[data-page="campus-cursos"]
.campus-platform-container {
  position: relative;
  z-index: 1;
}

body[data-page="campus-cursos"]
.campus-platform-header {
  max-width: 800px;
  margin: 0 auto 52px;

  text-align: center;
}

body[data-page="campus-cursos"]
.campus-platform-header
.campus-platform-eyebrow {
  justify-content: center;
}

body[data-page="campus-cursos"]
.campus-platform-header > p:last-child {
  max-width: 700px;
  margin: 20px auto 0;

  color: var(--campus-cursos-text-soft);

  font-size: 1.05rem;
  line-height: 1.72;
}

body[data-page="campus-cursos"]
.campus-platform-main-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

body[data-page="campus-cursos"]
.campus-platform-card {
  position: relative;

  min-height: 510px;
  overflow: hidden;

  padding: 38px;

  border-radius: var(--campus-cursos-radius-large);
  box-shadow: var(--campus-cursos-shadow);
}

body[data-page="campus-cursos"]
.campus-platform-card-geoplot {
  color: var(--campus-cursos-white);

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(54, 183, 229, 0.2),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #071725,
      #0b3854
    );

  border: 1px solid rgba(54, 183, 229, 0.28);
}

body[data-page="campus-cursos"]
.campus-platform-card-moodle {
  color: var(--campus-cursos-text);

  background: var(--campus-cursos-white);
  border: 1px solid var(--campus-cursos-border);
}

body[data-page="campus-cursos"]
.campus-platform-card-glow {
  position: absolute;
  inset: auto -20% -35% 20%;

  height: 320px;

  background:
    radial-gradient(
      circle,
      rgba(54, 183, 229, 0.23),
      transparent 67%
    );

  pointer-events: none;
}

body[data-page="campus-cursos"]
.campus-platform-geoplot-brand {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 15px;

  margin-bottom: 30px;
}

body[data-page="campus-cursos"]
.campus-platform-geoplot-brand img {
  width: 64px;
  height: 64px;

  object-fit: contain;
}

body[data-page="campus-cursos"]
.campus-platform-geoplot-brand strong {
  display: block;

  color: var(--campus-cursos-white);

  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.15;
}

body[data-page="campus-cursos"]
.campus-platform-geoplot-brand strong span {
  color: var(--campus-cursos-blue-light);
}

body[data-page="campus-cursos"]
.campus-platform-geoplot-brand small {
  display: block;
  margin-top: 5px;

  color: #c6dce8;

  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="campus-cursos"]
.campus-platform-moodle-logo-box {
  display: flex;
  min-height: 72px;

  align-items: center;

  margin-bottom: 30px;
}

body[data-page="campus-cursos"]
.campus-platform-moodle-logo-box img {
  width: auto;
  max-width: 250px;
  max-height: 68px;

  object-fit: contain;
}

body[data-page="campus-cursos"]
.campus-platform-card-content {
  position: relative;
  z-index: 1;
}

body[data-page="campus-cursos"]
.campus-platform-card-label {
  margin: 0 0 11px;

  color: var(--campus-cursos-blue-light);

  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="campus-cursos"]
.campus-platform-card h3 {
  font-size: 1.3rem;
  font-weight: 900;
}

body[data-page="campus-cursos"]
.campus-platform-card-geoplot h3 {
  color: var(--campus-cursos-white);
}

body[data-page="campus-cursos"]
.campus-platform-card-description {
  margin: 17px 0 0;

  color: var(--campus-cursos-text-soft);

  font-size: 0.94rem;
  line-height: 1.68;
}

body[data-page="campus-cursos"]
.campus-platform-card-geoplot
.campus-platform-card-description {
  color: #c7dce7;
}

body[data-page="campus-cursos"]
.campus-platform-feature-list {
  display: grid;
  gap: 10px;

  margin: 25px 0 0;
  padding: 0;

  list-style: none;
}

body[data-page="campus-cursos"]
.campus-platform-feature-list li {
  position: relative;

  padding-left: 27px;

  color: #edf8fc;

  font-size: 0.9rem;
  line-height: 1.5;
}

body[data-page="campus-cursos"]
.campus-platform-feature-list li::before {
  position: absolute;
  left: 0;

  color: var(--campus-cursos-blue-light);

  font-weight: 900;

  content: "✓";
}

body[data-page="campus-cursos"]
.campus-platform-moodle-access {
  display: flex;
  align-items: center;
  gap: 15px;

  margin-top: 26px;
  padding: 16px;

  background: var(--campus-cursos-bg);
  border: 1px solid var(--campus-cursos-border);
  border-radius: var(--campus-cursos-radius-small);
}

body[data-page="campus-cursos"]
.campus-platform-moodle-access img {
  width: 42px;
  height: 42px;

  object-fit: contain;
}

body[data-page="campus-cursos"]
.campus-platform-moodle-access strong {
  display: block;

  color: var(--campus-cursos-title);

  font-size: 0.9rem;
  font-weight: 850;
}

body[data-page="campus-cursos"]
.campus-platform-moodle-access span {
  display: block;
  margin-top: 4px;

  color: var(--campus-cursos-text-soft);

  font-size: 0.76rem;
  line-height: 1.4;
}

body[data-page="campus-cursos"]
.campus-platform-button {
  display: inline-flex;
  min-height: 48px;

  align-items: center;
  justify-content: center;
  gap: 10px;

  margin-top: 28px;
  padding: 13px 20px;

  border-radius: 8px;

  font-size: 0.87rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;

  transition:
    transform var(--campus-cursos-transition),
    background var(--campus-cursos-transition),
    box-shadow var(--campus-cursos-transition);
}

body[data-page="campus-cursos"]
.campus-platform-button:hover {
  transform: translateY(-2px);
}

body[data-page="campus-cursos"]
.campus-platform-button-orange {
  color: var(--campus-cursos-white);
  background: var(--campus-cursos-orange);

  box-shadow:
    0 10px 25px rgba(255, 122, 0, 0.22);
}

body[data-page="campus-cursos"]
.campus-platform-button-orange:hover {
  color: var(--campus-cursos-white);
  background: var(--campus-cursos-orange-dark);
}

body[data-page="campus-cursos"]
.campus-platform-button-blue {
  color: var(--campus-cursos-white);
  background: var(--campus-cursos-blue);

  box-shadow:
    0 10px 25px rgba(7, 141, 189, 0.22);
}

body[data-page="campus-cursos"]
.campus-platform-button-blue:hover {
  color: var(--campus-cursos-white);
  background: var(--campus-cursos-blue-dark);
}

body[data-page="campus-cursos"]
.campus-platform-button img {
  width: 24px;
  height: 24px;
}


/* ==========================================================
   14. BENEFICIOS DE LA PLATAFORMA
========================================================== */

body[data-page="campus-cursos"]
.campus-platform-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;

  margin-top: 28px;
}

body[data-page="campus-cursos"]
.campus-platform-benefit {
  display: flex;
  align-items: flex-start;
  gap: 15px;

  padding: 23px;

  background: var(--campus-cursos-white);
  border: 1px solid var(--campus-cursos-border);
  border-radius: var(--campus-cursos-radius);

  box-shadow: var(--campus-cursos-shadow-small);
}

body[data-page="campus-cursos"]
.campus-platform-benefit-number {
  display: grid;
  width: 38px;
  height: 38px;

  flex: 0 0 auto;
  place-items: center;

  color: var(--campus-cursos-blue);
  background: var(--campus-cursos-bg-blue);
  border-radius: 50%;

  font-size: 0.68rem;
  font-weight: 850;
}

body[data-page="campus-cursos"]
.campus-platform-benefit h3 {
  font-size: 0.98rem;
  font-weight: 900;
}

body[data-page="campus-cursos"]
.campus-platform-benefit p {
  margin: 7px 0 0;

  color: var(--campus-cursos-text-soft);

  font-size: 0.82rem;
  line-height: 1.52;
}


/* ==========================================================
   15. CTA FINAL
========================================================== */

body[data-page="campus-cursos"]
.courses-final-cta {
  padding-block: 92px;

  background:
    linear-gradient(
      135deg,
      #f3fbfe,
      #ffffff
    );

  border-top: 1px solid var(--campus-cursos-border);
}

body[data-page="campus-cursos"]
.courses-final-cta-container {
  display: flex;

  align-items: center;
  justify-content: space-between;
  gap: 52px;

  padding: 52px;

  background: var(--campus-cursos-white);
  border: 1px solid var(--campus-cursos-border);
  border-radius: var(--campus-cursos-radius-extra);

  box-shadow: var(--campus-cursos-shadow-large);
}

body[data-page="campus-cursos"]
.courses-final-cta-container > div {
  max-width: 760px;
}

body[data-page="campus-cursos"]
.courses-final-cta h2 {
  font-size: clamp(1.65rem, 2.55vw, 2.35rem);
}

body[data-page="campus-cursos"]
.courses-final-cta p:not(.section-kicker) {
  max-width: 700px;
  margin: 18px 0 0;

  color: var(--campus-cursos-text-soft);

  font-size: 1rem;
  line-height: 1.68;
}


/* ==========================================================
   16. ACCESIBILIDAD
========================================================== */

body[data-page="campus-cursos"] :focus-visible {
  outline: 3px solid rgba(54, 183, 229, 0.38);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

  body[data-page="campus-cursos"] *,
  body[data-page="campus-cursos"] *::before,
  body[data-page="campus-cursos"] *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}


/* ==========================================================
   17. RESPONSIVE — 1120 PX
========================================================== */

@media (max-width: 1120px) {

  body[data-page="campus-cursos"]
  .courses-catalog-hero-container {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(380px, 0.85fr);

    gap: 46px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-title {
    font-size: clamp(2.1rem, 4.5vw, 3.25rem);
  }

  body[data-page="campus-cursos"]
  .courses-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* ==========================================================
   18. RESPONSIVE — 920 PX
========================================================== */

@media (max-width: 920px) {

  body[data-page="campus-cursos"]
  .courses-catalog-hero {
    min-height: auto;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-container {
    grid-template-columns: 1fr;
    gap: 48px;

    min-height: auto;
    padding-block: 72px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-content {
    max-width: 760px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-panel {
    max-width: 620px;
    justify-self: center;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-intro-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-card {
    max-width: 700px;
    margin-inline: auto;
  }

  body[data-page="campus-cursos"]
  .campus-platform-main-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="campus-cursos"]
  .campus-platform-benefits {
    grid-template-columns: 1fr;
  }

  body[data-page="campus-cursos"]
  .courses-final-cta-container {
    flex-direction: column;
    align-items: flex-start;
  }

}


/* ==========================================================
   19. RESPONSIVE — 680 PX
========================================================== */

@media (max-width: 680px) {

  body[data-page="campus-cursos"] .container {
    width: min(
      calc(100% - 32px),
      var(--campus-cursos-container)
    );
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-container {
    padding-block: 58px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-title {
    font-size: clamp(1.95rem, 8vw, 2.55rem);
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-description {
    font-size: 0.98rem;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-actions,
  body[data-page="campus-cursos"]
  .courses-catalog-hero-actions .button {
    width: 100%;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-intro {
    padding-block: 72px 40px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-section,
  body[data-page="campus-cursos"]
  .courses-method-section,
  body[data-page="campus-cursos"]
  .campus-platform-section {
    padding-block: 72px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-toolbar {
    align-items: flex-start;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-filters {
    width: 100%;
  }

  body[data-page="campus-cursos"]
  .courses-filter-button {
    flex: 1 1 auto;
  }

  body[data-page="campus-cursos"]
  .courses-method-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="campus-cursos"]
  .campus-platform-card {
    min-height: auto;
    padding: 30px 24px;
  }

  body[data-page="campus-cursos"]
  .courses-final-cta {
    padding-block: 72px;
  }

  body[data-page="campus-cursos"]
  .courses-final-cta-container {
    padding: 38px 25px;

    border-radius: var(--campus-cursos-radius-large);
  }

}


/* ==========================================================
   20. RESPONSIVE — 520 PX
========================================================== */

@media (max-width: 520px) {

  body[data-page="campus-cursos"]
  .courses-catalog-hero-panel {
    padding: 11px;

    border-radius: 18px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-number {
    min-height: 90px;
    padding: 18px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-number strong {
    font-size: 2.8rem;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-course {
    grid-template-columns: 31px minmax(0, 1fr);

    min-height: 52px;
    padding: 9px 11px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-course p {
    font-size: 0.72rem;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-card-body {
    padding: 24px 21px;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-card-button {
    width: 100%;
  }

  body[data-page="campus-cursos"]
  .courses-final-cta-container .button {
    width: 100%;
  }

}
/* ==========================================================
   CORRECCIÓN FINAL — HERO CLARO DE CURSOS
========================================================== */

body[data-page="campus-cursos"] .courses-catalog-hero {
  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(54, 183, 229, 0.16),
      transparent 28%
    ),
    linear-gradient(
      115deg,
      #ffffff 0%,
      #f8fbfd 55%,
      #edf7fc 100%
    ) !important;

  border-bottom: 1px solid #dce6ed;
}

/* Retícula suave sobre el fondo claro */

body[data-page="campus-cursos"] .courses-catalog-hero::before {
  background-image:
    linear-gradient(
      rgba(7, 141, 189, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7, 141, 189, 0.035) 1px,
      transparent 1px
    ) !important;

  background-size: 42px 42px;
}

/* Primera línea del título */

body[data-page="campus-cursos"]
.courses-catalog-hero-title,
body[data-page="campus-cursos"]
.courses-catalog-hero-title span:first-child {
  color: #071725 !important;
}

/* Parte azul del título */

body[data-page="campus-cursos"]
.courses-catalog-hero-title span:nth-child(2),
body[data-page="campus-cursos"]
.courses-catalog-hero-title span:nth-child(3) {
  color: #078dbd !important;
}

/* Descripción */

body[data-page="campus-cursos"]
.courses-catalog-hero-description {
  color: #34495c !important;
}

/* Botón principal */

body[data-page="campus-cursos"]
.courses-catalog-hero-actions .button-primary {
  color: #ffffff !important;
  background: #078dbd !important;
  border-color: #078dbd !important;

  box-shadow:
    0 10px 25px rgba(7, 141, 189, 0.22);
}

body[data-page="campus-cursos"]
.courses-catalog-hero-actions .button-primary:hover {
  background: #055e82 !important;
  border-color: #055e82 !important;
}

/* Botón secundario */

body[data-page="campus-cursos"]
.courses-catalog-hero-actions .button-secondary {
  color: #055e82 !important;
  background: #ffffff !important;
  border-color: #b9ccd8 !important;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-actions .button-secondary:hover {
  color: #071725 !important;
  background: #edf7fc !important;
  border-color: #36b7e5 !important;
}

/* Mantener el panel derecho azul */

body[data-page="campus-cursos"]
.courses-catalog-hero-panel {
  color: #ffffff !important;

  background:
    linear-gradient(
      155deg,
      #0d3a57,
      #071d2d
    ) !important;

  border: 1px solid rgba(54, 183, 229, 0.35);
}

/* Cabecera del panel */

body[data-page="campus-cursos"]
.courses-catalog-hero-number {
  background:
    linear-gradient(
      135deg,
      #076a9f,
      #07314d
    ) !important;
}

/* Textos del panel */

body[data-page="campus-cursos"]
.courses-catalog-hero-number strong,
body[data-page="campus-cursos"]
.courses-catalog-hero-number span,
body[data-page="campus-cursos"]
.courses-catalog-hero-course p {
  color: #ffffff !important;
}

/* Filas de cada curso */

body[data-page="campus-cursos"]
.courses-catalog-hero-course {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(142, 208, 232, 0.22) !important;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-course:hover {
  background: rgba(54, 183, 229, 0.17) !important;
  border-color: rgba(101, 210, 239, 0.48) !important;
}
/* ==========================================================
   HERO CURSOS — PANEL COMPLETO CON LOS 8 CURSOS
========================================================== */

/* El hero usa el espacio visible restante bajo el header */

body[data-page="campus-cursos"]
.courses-catalog-hero {
  min-height: calc(100vh - 138px) !important;
  overflow: hidden !important;
}

/* Distribución principal */

body[data-page="campus-cursos"]
.courses-catalog-hero-container {
  min-height: calc(100vh - 138px) !important;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(390px, 440px) !important;

  align-items: center !important;
  gap: 64px !important;

  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* ==========================================================
   PANEL DERECHO COMPACTO
========================================================== */

body[data-page="campus-cursos"]
.courses-catalog-hero-panel {
  width: 100%;
  max-width: 440px !important;

  justify-self: end;
  align-self: center;

  padding: 10px !important;

  border-radius: 20px !important;
}

/* Cabecera 08 cursos */

body[data-page="campus-cursos"]
.courses-catalog-hero-number {
  min-height: 74px !important;

  display: flex;
  align-items: center;
  gap: 14px;

  margin: 0 0 5px !important;
  padding: 13px 18px !important;

  border-radius: 13px !important;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-number strong {
  font-size: 3rem !important;
  line-height: 0.9 !important;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-number span {
  max-width: 110px;

  font-size: 0.68rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0.09em !important;
}

/* ==========================================================
   FILAS DE LOS OCHO CURSOS
========================================================== */

body[data-page="campus-cursos"]
.courses-catalog-hero-course {
  grid-template-columns: 28px minmax(0, 1fr) !important;

  min-height: 43px !important;

  align-items: center;
  gap: 10px !important;

  margin-top: 5px !important;
  padding: 6px 10px !important;

  border-radius: 9px !important;
}

/* Círculos numéricos */

body[data-page="campus-cursos"]
.courses-catalog-hero-course > span {
  width: 25px !important;
  height: 25px !important;

  font-size: 0.59rem !important;
}

/* Nombres de los cursos */

body[data-page="campus-cursos"]
.courses-catalog-hero-course p {
  margin: 0 !important;

  font-size: 0.67rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

/* ==========================================================
   COLUMNA IZQUIERDA
========================================================== */

body[data-page="campus-cursos"]
.courses-catalog-hero-content {
  max-width: 650px;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-title {
  font-size: clamp(2.15rem, 3.2vw, 3.35rem) !important;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-description {
  margin-top: 20px !important;

  font-size: 0.98rem !important;
  line-height: 1.65 !important;
}

body[data-page="campus-cursos"]
.courses-catalog-hero-actions {
  margin-top: 24px !important;
}

/* ==========================================================
   PANTALLAS DE MENOR ALTURA
========================================================== */

@media (min-width: 921px) and (max-height: 850px) {

  body[data-page="campus-cursos"]
  .courses-catalog-hero-container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-panel {
    max-width: 420px !important;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-number {
    min-height: 68px !important;
    padding: 11px 16px !important;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-number strong {
    font-size: 2.7rem !important;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-course {
    min-height: 39px !important;

    margin-top: 4px !important;
    padding: 5px 9px !important;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-course > span {
    width: 23px !important;
    height: 23px !important;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-course p {
    font-size: 0.63rem !important;
  }

}

/* ==========================================================
   TABLET Y MÓVIL
========================================================== */

@media (max-width: 920px) {

  body[data-page="campus-cursos"]
  .courses-catalog-hero,
  body[data-page="campus-cursos"]
  .courses-catalog-hero-container {
    min-height: auto !important;
    overflow: visible !important;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-container {
    grid-template-columns: 1fr !important;
    gap: 46px !important;

    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-panel {
    width: 100%;
    max-width: 560px !important;

    justify-self: center;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-course {
    min-height: 48px !important;
  }

  body[data-page="campus-cursos"]
  .courses-catalog-hero-course p {
    font-size: 0.72rem !important;
  }

}