/* =====================================================
   VARIABLES GENERALES
===================================================== */

:root {
  --verde-sena: #57c514;
  --verde-claro: #74dd26;

  --azul-oscuro: #03132f;
  --azul-footer: #061a3b;

  --morado: #4620a8;
  --morado-claro: #7247dc;

  --gris-fondo: #f5f5f4;

  --blanco: #ffffff;
  --texto: #111111;
  --texto-suave: #555555;
}


/* =====================================================
   GENERAL
===================================================== */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  background: var(--gris-fondo);
  color: var(--texto);
}

img {
  max-width: 100%;
}

.section-padding {
  padding: 45px 0 25px;
}

.section-title {
  color: var(--morado);

  font-size: 1.55rem;
  font-weight: 800;
}

.text-purple {
  color: var(--morado);
}

.text-green {
  color: var(--verde-sena);
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar-senaverso {
  min-height: 80px;
  background: #020e26;
}

.logo-sena {
  width: 55px;
  height: 55px;

  object-fit: contain;
}

.brand-title {
  display: block;

  color: white;

  font-size: 1.4rem;
  font-weight: 800;
}

.brand-subtitle {
  color: rgba(255, 255, 255, 0.85);

  font-size: 0.72rem;
}

.navbar-senaverso .nav-link {
  color: rgba(255, 255, 255, 0.9);

  padding: 27px 11px 20px;

  font-size: 0.8rem;
  font-weight: 700;

  border-bottom: 4px solid transparent;

  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.navbar-senaverso .nav-link:hover {
  color: white;
}

.navbar-senaverso .nav-link.active {
  color: white;

  border-bottom-color: var(--verde-sena);
}


/* =====================================================
   BOTONES GENERALES
===================================================== */

.btn-verde {
  color: white;

  background:
    linear-gradient(
      135deg,
      var(--verde-claro),
      var(--verde-sena)
    );

  border: none;
  border-radius: 8px;

  font-weight: 700;

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

.btn-verde:hover {
  color: white;

  background:
    linear-gradient(
      135deg,
      #69d51e,
      #45a90b
    );

  transform: translateY(-2px);
}

.btn-purple {
  color: white;

  background:
    linear-gradient(
      135deg,
      #7550d9,
      #5420b5
    );

  border: none;
  border-radius: 7px;

  font-weight: 700;

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

.btn-purple:hover {
  color: white;

  background: #48209a;

  transform: translateY(-2px);
}


/* =====================================================
   HERO PRINCIPAL
===================================================== */

.hero-section {
  position: relative;

  min-height: 450px;

  background-image:
    linear-gradient(
      90deg,
      rgba(2, 14, 38, 0.93) 0%,
      rgba(2, 14, 38, 0.66) 38%,
      rgba(2, 14, 38, 0.15) 70%
    ),
    url("../assets/hero-senaverso.jpg");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-row {
  min-height: 450px;
}

.hero-title {
  margin-bottom: 0;

  color: white;

  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 900;

  line-height: 1.05;
}

.hero-title span {
  color: var(--verde-claro);
}

.hero-text {
  max-width: 560px;

  color: white;

  font-size: 1.05rem;

  line-height: 1.5;
}

.historia-link {
  color: white;

  text-decoration: none;

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

.historia-link:hover {
  color: var(--verde-claro);
}

.historia-link i {
  font-size: 1.35rem;
}


/* =====================================================
   BENEFICIOS
===================================================== */

.beneficios-wrapper {
  position: relative;

  z-index: 10;

  margin-top: -25px;
}

.beneficios-bar {
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      #242075,
      #272b8f
    );

  border-radius: 14px;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.16);
}

.beneficio {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 15px;

  min-height: 75px;

  padding: 14px 20px;

  border-right:
    1px solid rgba(255, 255, 255, 0.22);
}

.beneficio i {
  color: var(--verde-claro);

  font-size: 1.9rem;
}

.beneficio strong {
  display: block;

  font-size: 0.9rem;
}

.beneficio small {
  display: block;

  font-size: 0.78rem;
}


/* =====================================================
   HISTORIA DE LIAN
===================================================== */

.story-panel {
  padding: 25px 30px;

  background: #fffdf9;

  border-radius: 24px;

  box-shadow:
    0 5px 25px rgba(0, 0, 0, 0.05);
}

.story-panel p {
  font-size: 0.9rem;

  line-height: 1.4;
}

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

.story-card img {
  display: block;

  width: 100%;
  height: 220px;

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

  border-radius: 20px;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.13);
}

.story-card p {
  margin-top: 8px;
  margin-bottom: 0;

  font-size: 0.82rem;
  font-weight: 700;

  line-height: 1.2;
}


/* =====================================================
   PROGRAMAS DE LA PÁGINA PRINCIPAL
===================================================== */

.programas-section {
  padding: 10px 0 45px;

  background: #f9f8f5;
}

.program-card {
  display: flex;

  flex-direction: column;

  height: 100%;

  overflow: hidden;

  background: white;

  border-radius: 15px;

  box-shadow:
    0 5px 18px rgba(0, 0, 0, 0.08);

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

.program-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.14);
}

.program-card img {
  display: block;

  width: 100%;
  height: 165px;

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

.program-content {
  display: flex;

  flex: 1;

  flex-direction: column;
  align-items: center;

  padding: 13px;

  text-align: center;
}

.program-content h5 {
  min-height: 42px;

  margin-bottom: 8px;

  font-size: 0.85rem;
  font-weight: 800;

  line-height: 1.1;
}

.program-content p {
  flex: 1;

  margin-bottom: 12px;

  color: #333;

  font-size: 0.76rem;

  line-height: 1.35;
}

.program-content .btn {
  min-width: 95px;

  font-size: 0.75rem;
}

.program-blue {
  color: #0755b2;
}

.program-purple {
  color: #5224ba;
}

.program-teal {
  color: #008e8c;
}

.program-orange {
  color: #d87500;
}

.program-green {
  color: #27871d;
}

.program-pink {
  color: #ba2d66;
}


/* =====================================================
   CTA DOBLE
===================================================== */

.cta-section {
  padding: 20px 0;
}

.cta-card {
  display: flex;

  flex-direction: column;

  justify-content: center;

  min-height: 270px;

  padding: 30px;

  overflow: hidden;

  border-radius: 20px;
}
/* =====================================================
   CTA - ¿TODAVÍA NO SABES QUÉ QUIERES HACER?
   Mostrar la imagen sin degradado
===================================================== */

.cta-path {
  position: relative;

  color: white;

  background-image:
    url("../assets/cta-camino.jpg");

  background-size: cover;

  background-position: 70% center;

  background-repeat: no-repeat;

  overflow: hidden;
}

/* Controla el bloque interno de texto */

.cta-path > div {
  max-width: 58%;

  margin-left: 0;
  margin-right: auto;

  padding-left: 0;
}

.cta-path h2 {
  font-weight: 800;
}

.cta-path span {
  color: var(--verde-claro);
}

.cta-path p {
  max-width: 390px;

  font-size: 0.9rem;
}

.institution-card {
  color: #222;

  background: white;

  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.06);
}

.institution-card h2 {
  color: var(--morado);

  font-weight: 800;
}

.institution-card i {
  display: block;

  margin-bottom: 7px;

  color: var(--morado-claro);

  font-size: 1.8rem;
}

.institution-card small {
  display: block;

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


/* =====================================================
   BANNER FINAL
===================================================== */

.final-section {
  padding: 5px 0 30px;
}
/* =====================================================
   BANNER FINAL
   Mostrar la imagen sin degradado
===================================================== */

.final-banner {
  position: relative;

   padding: 28px 20px 28px 100px;

  color: white;

  background-image:
    url("../assets/banner-final.jpg");

  background-size: cover;

  background-position: 62% center;

  background-repeat: no-repeat;

  border-radius: 20px;

  overflow: hidden;
}

/* Control del contenido interno */

.final-banner p,
.final-banner h2,
.final-banner a {
  margin-left: 0;
}


/* Opcional: limita el ancho del texto */

.final-banner p,
.final-banner h2 {
  max-width: 520px;
}

/* =====================================================
   FOOTER
===================================================== */

.footer {
  color: white;

  background: var(--azul-footer);
}

.footer-logo {
  width: 70px;
}

.footer h6 {
  margin-bottom: 12px;

  font-size: 0.76rem;
  font-weight: 800;
}

.footer a {
  display: block;

  margin-bottom: 5px;

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

  text-decoration: none;

  font-size: 0.75rem;
}

.footer a:hover {
  color: var(--verde-claro);
}

.footer p {
  font-size: 0.8rem;
}

.social-icons {
  display: flex;

  gap: 12px;
}

.social-icons a {
  margin: 0;

  color: white;

  font-size: 1.25rem;
}


/* =====================================================
   CATÁLOGO GENERAL DE PROGRAMAS
   programas.html
===================================================== */


/* -----------------------------------------------------
   CABECERA DEL CATÁLOGO
----------------------------------------------------- */

.catalogo-hero {
  padding: 65px 20px 55px;

  color: white;

  background:
    radial-gradient(
      circle at 70% 30%,
      #243d8d 0%,
      #081d48 40%,
      #020e26 100%
    );
}

.catalogo-tag {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--verde-claro);

  font-size: 0.85rem;
  font-weight: 800;

  letter-spacing: 1.5px;
}

.catalogo-title {
  margin: 0;

  color: white;

  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;

  line-height: 1.05;
}

.catalogo-title span {
  color: var(--verde-claro);
}

.catalogo-intro {
  max-width: 650px;

  margin: 20px auto 0;

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

  font-size: 1rem;
}


/* -----------------------------------------------------
   CONTENEDOR DEL CATÁLOGO
----------------------------------------------------- */

.catalogo-programas {
  padding: 50px 0 70px;

  background: #f7f7f5;
}


/* =====================================================
   FILTROS DE PROGRAMAS
===================================================== */

.filtros-programas {
  display: flex;

  justify-content: center;
  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

  width: fit-content;
  max-width: 100%;

  margin: 0 auto 40px;

  padding: 13px 16px;

  background: white;

  border: 1px solid #ececf3;
  border-radius: 18px;

  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.08);
}

.filtro-btn {
  padding: 10px 19px;

  color: #29283f;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f4f4f8
    );

  border: 1px solid #dedee9;
  border-radius: 50px;

  font-size: 0.84rem;
  font-weight: 700;

  cursor: pointer;

  white-space: nowrap;

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

.filtro-btn:hover {
  color: white;

  background:
    linear-gradient(
      135deg,
      var(--morado-claro),
      var(--morado)
    );

  border-color: transparent;

  transform: translateY(-2px);

  box-shadow:
    0 6px 15px rgba(70, 32, 168, 0.22);
}

.filtro-btn.active {
  color: white;

  background:
    linear-gradient(
      135deg,
      var(--morado-claro),
      var(--morado)
    );

  border-color: transparent;

  box-shadow:
    0 6px 16px rgba(70, 32, 168, 0.3);
}


/* =====================================================
   MOSTRAR / OCULTAR PROGRAMAS
===================================================== */

.programa-item {
  display: block;
}

.programa-item.oculto {
  display: none;
}


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

.catalogo-card {
  display: flex;

  flex-direction: column;

  height: 100%;

  overflow: hidden;

  background: white;

  border: 1px solid rgba(0, 0, 0, 0.035);
  border-radius: 18px;

  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.08);

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

.catalogo-card:hover {
  transform: translateY(-7px);

  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.14);
}


/* =====================================================
   IMAGEN VERTICAL DE CADA PROGRAMA
===================================================== */

.catalogo-imagen {
  width: 100%;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #ececf2,
      #ddddE7
    );
}

.catalogo-imagen img {
  display: block;

  width: 100%;
  height: 100%;

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

  transition:
    transform 0.3s ease;
}

.catalogo-card:hover .catalogo-imagen img {
  transform: scale(1.035);
}


/* =====================================================
   INFORMACIÓN DE LAS TARJETAS
===================================================== */

.catalogo-contenido {
  display: flex;

  flex: 1;

  flex-direction: column;

  padding: 17px;

  text-align: center;
}

.catalogo-contenido h3 {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 50px;

  margin-top: 0;
  margin-bottom: 8px;

  font-size: 0.98rem;
  font-weight: 800;

  line-height: 1.15;
}

/* =====================================================
   COLORES IDENTIFICATIVOS DE LOS PROGRAMAS
===================================================== */

/* INDUSTRIA */

.titulo-carpinteria {
  color: #476B7A;
}

.titulo-vehiculos {
  color: #C44720;
}

.titulo-electricidad {
  color: #A87500;
}

/* Color definido para Modelado 3D */
.titulo-modelado3d {
  color: #5224ba;
}

.titulo-arquitectura {
  color: #3F5F88;
}


/* =====================================================
   TECAI - TECNOLOGÍA Y ÁREAS RELACIONADAS
===================================================== */

/* Color definido para Integración de Contenidos Digitales */
.titulo-contenidos {
  color: #ba2d66;
}

.titulo-programacion {
  color: #2563B8;
}

.titulo-seguridad {
  color: #006B67;
}

.titulo-teleinformatica {
  color: #087B96;
}

.titulo-logistica {
  color: #9A6500;
}

.titulo-microbiologia {
  color: #687D26;
}


/* =====================================================
   MEDIO AMBIENTE
===================================================== */

.titulo-conservacion {
  color: #287A38;
}

.titulo-promotoria {
  color: #55931A;
}

.titulo-monitoreo {
  color: #00796B;
}


/* =====================================================
   COMERCIO, ADMINISTRACIÓN Y SERVICIOS
===================================================== */

.titulo-retail {
  color: #B84C16;
}

.titulo-administrativa {
  color: #2459A6;
}

.titulo-inteligencia {
  color: #6D35B5;
}

.titulo-recreacion {
  color: #D72B62;
}

.titulo-deportes {
  color: #B92D2D;
}

.titulo-contabilizacion {
  color: #08788C;
}

.titulo-turismo {
  color: #A96C09;
}

.titulo-recursos-humanos {
  color: #9B3D89;
}

.titulo-emprendimiento {
  color: #26813A;
}

.catalogo-contenido p {
  min-height: 35px;

  margin-top: 0;
  margin-bottom: 14px;

  color: var(--texto-suave);

  font-size: 0.79rem;

  line-height: 1.3;
}


/* =====================================================
   BOTÓN OPCIONAL "EXPLORAR"
===================================================== */

.catalogo-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  align-self: center;

  margin-top: auto;

  padding: 7px 18px;

  color: white;

  background: var(--morado);

  border-radius: 7px;

  text-decoration: none;

  font-size: 0.78rem;
  font-weight: 700;

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

.catalogo-btn:hover {
  color: white;

  background: var(--verde-sena);

  transform: translateY(-2px);
}


/* =====================================================
   ÁREA OFICIAL DEL PROGRAMA
===================================================== */

.area-programa {
  display: inline-block;

  align-self: center;

  margin-top: auto;

  padding: 6px 14px;

  border-radius: 30px;

  font-size: 0.68rem;
  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.4px;
}


/* INDUSTRIA */

.area-industria {
  color: #005995;

  background: #e3f2ff;

  border:
    1px solid #bfdef4;
}


/* TECAI */

.area-tecai {
  color: #047c71;

  background: #dcf7f3;

  border:
    1px solid #bceae4;
}


/* COMERCIO Y SERVICIOS */

.area-comercio {
  color: #9a4c05;

  background: #fff0d9;

  border:
    1px solid #f2d4a9;
}


/* =====================================================
   CIERRE DE LA PÁGINA DE PROGRAMAS
===================================================== */

.catalogo-final {
  padding: 50px 20px;

  color: white;

  background:
    linear-gradient(
      135deg,
      #25146d,
      #071a48
    );
}

.catalogo-final h2 {
  margin-bottom: 12px;

  color: var(--verde-claro);

  font-weight: 900;
}

.catalogo-final p {
  margin-bottom: 25px;

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


/* =====================================================
   RESPONSIVE - TABLET Y PANTALLA MEDIANA
===================================================== */

@media (max-width: 1199px) {

  .program-card img {
    height: 190px;
  }

}


/* =====================================================
   RESPONSIVE - TABLET
===================================================== */

@media (max-width: 991px) {

  .navbar-senaverso {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .navbar-senaverso .nav-link {
    padding: 9px 0;

    border-bottom: none;
  }

  .navbar-senaverso .nav-link.active {
    color: var(--verde-claro);

    border-bottom: none;
  }

  .navbar-collapse {
    padding-bottom: 15px;
  }

  .hero-section {
    background-position: 65% center;
  }

  .hero-row {
    min-height: 500px;
  }

  .beneficios-wrapper {
    margin-top: 0;
  }

  .story-panel {
    padding: 25px;
  }

}


/* =====================================================
   RESPONSIVE - MÓVIL / TABLET PEQUEÑA
===================================================== */

@media (max-width: 767px) {

  .hero-section {
    background-position: 62% center;
  }

  .hero-section::before {
    position: absolute;

    inset: 0;

    content: "";

    background:
      rgba(2, 14, 38, 0.3);
  }

  .hero-section .container-fluid {
    position: relative;

    z-index: 2;
  }

  .hero-title {
    font-size: 2.35rem;
  }

  .story-card img {
    height: 190px;
  }

  .beneficio {
    border-bottom:
      1px solid rgba(255, 255, 255, 0.15);
  }

  .cta-card {
    min-height: 280px;
  }


  /* CATÁLOGO */

  .catalogo-hero {
    padding: 45px 20px;
  }

  .catalogo-programas {
    padding: 35px 0 50px;
  }

  .filtros-programas {
    margin-bottom: 30px;
  }

}


/* =====================================================
   RESPONSIVE - CELULAR
===================================================== */

@media (max-width: 575px) {

  .brand-title {
    font-size: 1.1rem;
  }

  .brand-subtitle {
    font-size: 0.62rem;
  }

  .logo-sena {
    width: 45px;
    height: 45px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-text {
    font-size: 0.95rem;
  }

  .story-panel {
    padding: 20px;
  }

  .story-card img {
    height: 180px;
  }

  .beneficio {
    justify-content: flex-start;

    padding-left: 25px;

    border-right: none;
  }

  .cta-card {
    padding: 24px;
  }

  .final-banner h2 {
    font-size: 1.6rem;
  }


  /* FILTROS */

  .filtros-programas {
    width: 100%;

    padding: 12px;

    gap: 7px;

    border-radius: 14px;
  }

  .filtro-btn {
    padding: 8px 13px;

    font-size: 0.76rem;
  }


  /* CATÁLOGO */

  .catalogo-title {
    font-size: 2rem;
  }

  .catalogo-contenido {
    padding: 16px;
  }

  .catalogo-contenido h3 {
    min-height: auto;

    font-size: 1rem;
  }

  .catalogo-contenido p {
    min-height: auto;
  }

}