/* =========================================================
   GEOPLOT WEB
   INVESTIGACION_CURSOS_FINAL_SUBPAGINA.CSS

   Sección final reutilizable para cursos asociados a páginas
   de investigación.

   Uso previsto:
   - Análisis censal y territorial
   - Riesgo operativo de evacuación
   - Evacuación ante tsunami
   - Geomorfología submarina
   - Geofísica marina

   Estructura:
   1. Sección de transferencia tecnológica
   2. Encabezado editorial
   3. Tarjeta horizontal del curso
   4. Imagen cuadrada
   5. Identidad GEOPLOT Campus
   6. Descripción y botones
   7. Adaptación responsiva
   ========================================================= */


/* =========================================================
   01. VARIABLES DE LA SECCIÓN
   ========================================================= */

:root {
  --research-course-max-width: 1440px;

  --research-course-dark: #020914;
  --research-course-dark-blue: #06172d;
  --research-course-deep-blue: #092746;

  --research-course-white: #ffffff;

  --research-course-orange: #ff7a00;
  --research-course-orange-hover: #ff9138;

  --research-course-blue: #28aaff;
  --research-course-blue-dark: #0b6fc2;
  --research-course-cyan: #24c6f5;

  --research-course-text-light:
    rgba(255, 255, 255, 0.94);

  --research-course-text-muted:
    rgba(230, 241, 250, 0.74);

  --research-course-border:
    rgba(255, 255, 255, 0.15);

  --research-course-card-radius: 28px;
  --research-course-image-radius: 20px;
  --research-course-button-radius: 13px;

  --research-course-title-size:
    clamp(2rem, 3vw, 3.35rem);

  --research-course-name-size:
    clamp(1.8rem, 2.4vw, 2.75rem);

  --research-course-text-size:
    clamp(1rem, 1.08vw, 1.15rem);

  --research-course-button-height: 54px;
}


/* =========================================================
   02. SECCIÓN GENERAL
   ========================================================= */

.research-course-section {
  position: relative;
  isolation: isolate;

  width: 100%;

  padding:
    clamp(78px, 8vw, 124px)
    0;

  overflow: hidden;

  color:
    var(--research-course-white);

  background:
    radial-gradient(
      circle at 87% 25%,
      rgba(40, 170, 255, 0.17),
      transparent 31rem
    ),
    radial-gradient(
      circle at 8% 90%,
      rgba(255, 122, 0, 0.08),
      transparent 25rem
    ),
    linear-gradient(
      135deg,
      var(--research-course-dark) 0%,
      var(--research-course-dark-blue) 58%,
      var(--research-course-deep-blue) 100%
    );

  border-top:
    1px solid rgba(40, 170, 255, 0.22);
}


/* Retícula geoespacial tenue */

.research-course-section::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  pointer-events: none;

  opacity: 0.12;

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

  background-size: 58px 58px;
}


/* Círculos decorativos */

.research-course-section::after {
  content: "";

  position: absolute;

  right: -18rem;
  bottom: -31rem;

  z-index: -1;

  width: 58rem;
  height: 58rem;

  pointer-events: none;

  border:
    1px solid rgba(40, 170, 255, 0.17);

  border-radius: 50%;

  box-shadow:
    0 0 0 100px rgba(40, 170, 255, 0.027),
    0 0 0 210px rgba(40, 170, 255, 0.014);
}


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

.research-course-container {
  position: relative;
  z-index: 2;

  width:
    min(
      88%,
      var(--research-course-max-width)
    );

  margin-inline: auto;
}


/* =========================================================
   04. ENCABEZADO
   ========================================================= */

.research-course-header {
  max-width: 900px;

  margin-bottom:
    clamp(38px, 5vw, 64px);
}


.research-course-eyebrow {
  margin: 0 0 16px;

  color:
    var(--research-course-orange);

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

  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.35;

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


.research-course-header h2 {
  max-width: 820px;

  margin: 0;

  color:
    var(--research-course-white);

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

  font-size:
    var(--research-course-title-size);

  font-weight: 850;
  line-height: 1.08;

  letter-spacing: -0.04em;
}


.research-course-introduction {
  max-width: 820px;

  margin: 22px 0 0;

  color:
    var(--research-course-text-muted);

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

  font-size:
    clamp(1rem, 1.12vw, 1.18rem);

  font-weight: 400;
  line-height: 1.65;
}


/* =========================================================
   05. TARJETA PRINCIPAL
   ========================================================= */

.research-course-card {
  position: relative;

  width: 100%;

  min-height: 420px;

  padding:
    clamp(24px, 3.2vw, 46px);

  display: grid;

  grid-template-columns:
    minmax(280px, 0.72fr)
    minmax(0, 1.28fr);

  align-items: center;

  gap:
    clamp(38px, 5vw, 76px);

  overflow: hidden;

  border:
    1px solid var(--research-course-border);

  border-radius:
    var(--research-course-card-radius);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.105),
      rgba(255, 255, 255, 0.038)
    );

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.3);

  backdrop-filter:
    blur(14px);
}


/* Brillo tenue de la tarjeta */

.research-course-card::before {
  content: "";

  position: absolute;

  top: -10rem;
  right: -7rem;

  width: 25rem;
  height: 25rem;

  pointer-events: none;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(40, 170, 255, 0.16),
      transparent 68%
    );
}


/* Línea decorativa superior */

.research-course-card::after {
  content: "";

  position: absolute;

  top: 0;
  left: 5%;

  width: 36%;
  height: 3px;

  pointer-events: none;

  border-radius:
    0 0 4px 4px;

  background:
    linear-gradient(
      90deg,
      var(--research-course-orange),
      var(--research-course-blue)
    );
}


/* =========================================================
   06. COLUMNA VISUAL
   ========================================================= */

.research-course-visual {
  position: relative;
  z-index: 2;

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

  justify-self: center;
}


.research-course-image {
  display: block;

  width: 100%;
  aspect-ratio: 1 / 1;

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

  border:
    1px solid rgba(255, 255, 255, 0.18);

  border-radius:
    var(--research-course-image-radius);

  background:
    rgba(255, 255, 255, 0.04);

  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.34);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.research-course-card:hover
.research-course-image {
  transform:
    translateY(-4px);

  box-shadow:
    0 30px 68px rgba(0, 0, 0, 0.4);
}


/* =========================================================
   07. COLUMNA DE CONTENIDO
   ========================================================= */

.research-course-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 760px;
}


/* =========================================================
   08. IDENTIDAD GEOPLOT CAMPUS
   ========================================================= */

.research-course-campus-brand {
  width: fit-content;
  max-width: 100%;

  margin-bottom: 25px;

  display: inline-flex;
  align-items: center;

  color:
    var(--research-course-white);

  text-decoration: none;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}


.research-course-campus-brand:hover,
.research-course-campus-brand:focus-visible {
  transform:
    translateY(-2px);

  opacity: 0.92;
}


/* Logo horizontal */

.research-course-campus-logo-horizontal {
  display: block;

  width: auto;
  max-width: 330px;
  height: 66px;

  object-fit: contain;
  object-position: left center;
}


/* Logo individual oculto en escritorio */

.research-course-campus-logo-symbol {
  display: none;

  width: 64px;
  height: 64px;

  object-fit: contain;
}


/* =========================================================
   09. ETIQUETA DEL CURSO
   ========================================================= */

.research-course-label {
  margin: 0 0 12px;

  color:
    var(--research-course-blue);

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

  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.35;

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


/* =========================================================
   10. TÍTULO DEL CURSO
   ========================================================= */

.research-course-content h3 {
  max-width: 720px;

  margin: 0;

  color:
    var(--research-course-white);

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

  font-size:
    var(--research-course-name-size);

  font-weight: 850;
  line-height: 1.1;

  letter-spacing: -0.038em;
}


/* =========================================================
   11. DESCRIPCIÓN
   ========================================================= */

.research-course-description {
  max-width: 720px;

  margin: 22px 0 0;

  color:
    var(--research-course-text-light);

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

  font-size:
    var(--research-course-text-size);

  font-weight: 400;
  line-height: 1.65;
}


/* =========================================================
   12. BOTONES
   ========================================================= */

.research-course-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 30px;
}


.research-course-button {
  min-height:
    var(--research-course-button-height);

  padding:
    0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  color:
    var(--research-course-white);

  text-decoration: none;

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

  font-size:
    clamp(0.96rem, 1vw, 1.06rem);

  font-weight: 750;
  line-height: 1;

  border:
    2px solid transparent;

  border-radius:
    var(--research-course-button-radius);

  transition:
    transform 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}


.research-course-button:hover,
.research-course-button:focus-visible {
  transform:
    translateY(-2px);
}


/* Botón principal */

.research-course-button-primary {
  border-color:
    var(--research-course-orange);

  background:
    var(--research-course-orange);

  box-shadow:
    0 12px 30px rgba(255, 122, 0, 0.24);
}


.research-course-button-primary:hover,
.research-course-button-primary:focus-visible {
  color:
    var(--research-course-white);

  border-color:
    var(--research-course-orange-hover);

  background:
    var(--research-course-orange-hover);

  box-shadow:
    0 16px 36px rgba(255, 122, 0, 0.32);
}


/* Botón secundario */

.research-course-button-secondary {
  color:
    var(--research-course-white);

  border-color:
    rgba(255, 255, 255, 0.88);

  background:
    rgba(0, 0, 0, 0.24);
}


.research-course-button-secondary:hover,
.research-course-button-secondary:focus-visible {
  color:
    var(--research-course-white);

  border-color:
    var(--research-course-blue);

  background:
    rgba(40, 170, 255, 0.14);
}


/* Flechas */

.research-course-button span:last-child {
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1;
}


/* =========================================================
   13. TABLET HORIZONTAL
   ========================================================= */

@media (max-width: 1050px) {

  .research-course-container {
    width:
      min(
        calc(100% - 40px),
        1000px
      );
  }


  .research-course-card {
    grid-template-columns:
      minmax(250px, 0.78fr)
      minmax(0, 1.22fr);

    gap: 38px;

    min-height: 390px;
  }


  .research-course-visual {
    max-width: 360px;
  }


  .research-course-campus-logo-horizontal {
    max-width: 285px;
    height: 58px;
  }

}


/* =========================================================
   14. TABLET VERTICAL
   ========================================================= */

@media (max-width: 820px) {

  .research-course-section {
    padding:
      72px 0;
  }


  .research-course-container {
    width:
      min(
        calc(100% - 30px),
        680px
      );
  }


  .research-course-header {
    max-width: 680px;

    margin-bottom: 38px;
  }


  .research-course-card {
    grid-template-columns: 1fr;

    gap: 34px;

    min-height: 0;

    padding:
      34px;
  }


  .research-course-visual {
    width: 100%;
    max-width: 440px;

    justify-self: start;
  }


  .research-course-content {
    max-width: none;
  }


  .research-course-campus-logo-horizontal {
    max-width: 300px;
    height: 60px;
  }


  .research-course-description {
    max-width: 650px;
  }

}


/* =========================================================
   15. CELULAR
   ========================================================= */

@media (max-width: 520px) {

  .research-course-section {
    padding:
      56px 0;
  }


  .research-course-container {
    width:
      min(
        calc(100% - 24px),
        500px
      );
  }


  .research-course-header {
    margin-bottom: 30px;
  }


  .research-course-header h2 {
    font-size:
      clamp(1.9rem, 9vw, 2.55rem);
  }


  .research-course-introduction {
    margin-top: 18px;

    font-size:
      clamp(0.98rem, 4.2vw, 1.08rem);

    line-height: 1.6;
  }


  .research-course-card {
    gap: 28px;

    padding:
      24px;

    border-radius: 22px;
  }


  .research-course-card::after {
    left: 8%;

    width: 54%;
  }


  .research-course-visual {
    max-width: none;
  }


  .research-course-image {
    border-radius: 17px;
  }


  /*
   * En celulares se oculta el logo horizontal y aparece
   * únicamente el símbolo de GEOPLOT Campus.
   */

  .research-course-campus-logo-horizontal {
    display: none;
  }


  .research-course-campus-logo-symbol {
    display: block;
  }


  .research-course-campus-brand {
    margin-bottom: 22px;
  }


  .research-course-content h3 {
    font-size:
      clamp(1.65rem, 8vw, 2.2rem);
  }


  .research-course-description {
    margin-top: 18px;

    font-size:
      clamp(0.98rem, 4.2vw, 1.08rem);

    line-height: 1.6;
  }


  .research-course-actions {
    align-items: stretch;
    flex-direction: column;

    gap: 12px;

    margin-top: 26px;
  }


  .research-course-button {
    width: 100%;
    min-height: 54px;
  }

}


/* =========================================================
   16. CELULARES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

  .research-course-card {
    padding:
      20px;
  }


  .research-course-campus-logo-symbol {
    width: 56px;
    height: 56px;
  }


  .research-course-button {
    padding:
      0 17px;

    font-size: 0.94rem;
  }

}


/* =========================================================
   17. PANTALLAS MUY ANCHAS
   ========================================================= */

@media (min-width: 1600px) {

  .research-course-container {
    width:
      min(
        88%,
        var(--research-course-max-width)
      );
  }


  .research-course-card {
    grid-template-columns:
      minmax(330px, 0.7fr)
      minmax(0, 1.3fr);
  }


  .research-course-visual {
    max-width: 450px;
  }

}


/* =========================================================
   18. ACCESIBILIDAD
   ========================================================= */

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

  .research-course-image,
  .research-course-campus-brand,
  .research-course-button {
    transition: none;
  }


  .research-course-card:hover
  .research-course-image {
    transform: none;
  }

}
/* =========================================================
   AJUSTE FINAL DE LA SECCIÓN DE CURSO
   - Título en una línea
   - Menor espacio antes de la tarjeta
   - Tarjeta e imagen ligeramente más grandes
   ========================================================= */

@media (min-width: 1060px) {

  /* Encabezado más ancho */

  .research-course-header {
    max-width: 1200px;

    /* Reduce la separación con la tarjeta */
    margin-bottom: 30px;
  }


  /* Título completo en una sola línea */

  .research-course-header h2 {
    width: 100%;
    max-width: none;

    font-size:
      clamp(2.4rem, 3vw, 3.25rem);

    white-space: nowrap;
  }


  /* Texto introductorio un poco más cercano al título */

  .research-course-introduction {
    max-width: 900px;

    margin-top: 18px;
  }


  /* Tarjeta más amplia y con mayor presencia */

  .research-course-card {
    min-height: 460px;

    grid-template-columns:
      minmax(340px, 0.82fr)
      minmax(0, 1.18fr);

    gap:
      clamp(44px, 5vw, 78px);

    padding:
      clamp(30px, 3.4vw, 50px);
  }


  /* Imagen más grande */

  .research-course-visual {
    max-width: 470px;
  }


  /* Contenido aprovecha mejor el espacio */

  .research-course-content {
    max-width: 800px;
  }


  .research-course-content h3,
  .research-course-description {
    max-width: 780px;
  }

}
/* =========================================================
   AJUSTE COMPACTO DE LA TARJETA DEL CURSO
   Escritorio
   ========================================================= */

@media (min-width: 1060px) {

  .research-course-card {
    min-height: 360px;

    padding:
      26px 42px;

    grid-template-columns:
      minmax(280px, 0.72fr)
      minmax(0, 1.28fr);

    gap:
      clamp(38px, 4vw, 64px);
  }


  .research-course-visual {
    max-width: 370px;
  }


  .research-course-campus-brand {
    margin-bottom: 17px;
  }


  .research-course-campus-logo-horizontal {
    height: 56px;
    max-width: 290px;
  }


  .research-course-label {
    margin-bottom: 8px;
  }


  .research-course-content h3 {
    font-size:
      clamp(1.75rem, 2.15vw, 2.45rem);
  }


  .research-course-description {
    margin-top: 16px;

    line-height: 1.55;
  }


  .research-course-actions {
    margin-top: 22px;
  }

}