<!-- =======================================================================
     1. PESTAÑA CSS (COPIA Y PEGA TODO ESTE BLOQUE EN LA PESTAÑA CSS DE HUBSPOT)
     ======================================================================= -->
<style>
  @font-face {
    font-family: "Sharp-Bold";
    src: url("https://3416190.fs1.hubspotusercontent-na1.net/hubfs/3416190/fonts/SharpSlab-Bold.ttf");
  }
  @font-face {
    font-family: "Roboto";
    src: url("https://3416190.fs1.hubspotusercontent-na1.net/hubfs/3416190/fonts/Roboto-Regular.ttf");
  }
  @font-face {
    font-family: "Roboto-Bold";
    src: url("https://3416190.fs1.hubspotusercontent-na1.net/hubfs/3416190/fonts/Roboto-Bold.ttf");
  }

  .universitaria { 
    position: relative; 
    /* El color de fondo se quitó de aquí para que el selector de HubSpot funcione libremente */
  }

  /* Puntos decorativos de fondo (Dots) */
  .universitaria::before { 
    content: ''; 
    width: 360px; 
    height: 280px; 
    background-image: url('https://3416190.fs1.hubspotusercontent-na1.net/hubfs/3416190/website/institucional/landings/BIU/dot.svg'); 
    background-position: center; 
    background-repeat: no-repeat; 
    position: absolute;  
    right: 5%; 
    top: 5%; 
    z-index: 1;
  }

  /* Estilos para centrar el contenedor en cualquier monitor */
  .contenedor {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
  }

  /* Tamaños adaptables del contenedor de HubSpot */
  .contenedor.Small { max-width: 960px !important; }
  .contenedor.Medium { max-width: 1200px !important; }
  .contenedor.Large { max-width: 1440px !important; }

  .universitaria .box { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
  }

  /* Columna izquierda limpia para heredar estilos del tema global o formato inline */
  .universitaria .box1 { 
    width: 500px; 
  } 

  .universitaria .box2 { 
    width: calc(100% - 600px); 
  } 

  .universitaria .box2 .deslizador { 
    position: relative; 
  }

  .universitaria .box2 .deslizador .card { 
    position: relative; 
    width: calc(100% - 20px); 
    margin: 10px auto; 
    max-width: 420px; 
    min-height: 520px; 
    height: auto;
    background: #FFFFFF; 
    box-shadow: 0px 3px 8px rgba(135, 135, 135, 0.5); 
    border-radius: 37px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  } 

  /* Contenido interno de la tarjeta */
  .universitaria .box2 .deslizador .card .contenido { 
    padding: 50px 40px 20px; 
    text-align: center; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  /* Logos adaptables */
  .universitaria .box2 .deslizador .card .logo { 
    height: 140px; 
    margin: 0 auto 15px; 
    max-width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .universitaria .box2 .deslizador .card .logo img { 
    max-width: 90%; 
    max-height: 100%;
    margin: 0 auto; 
    object-fit: contain;
  }

  /* Estilos semánticos H5, H6 y P para textos internos de las tarjetas */
  .universitaria .box2 .deslizador .card h5 { 
    margin-top: 0;
    margin-bottom: 15px; 
    font-family: 'Sharp-SemiBold', serif !important; 
    font-size: 20px !important; 
    text-align: left; 
    color: #6F6F6F !important; 
    font-weight: 600 !important;
  }

  .universitaria .box2 .deslizador .card h6 { 
    margin-top: 0;
    margin-bottom: 10px; 
    font-family: 'Roboto-Bold', sans-serif !important; 
    font-size: 18px !important; 
    text-align: left; 
    color: #FF5900 !important; 
    font-weight: bold !important;
  }

  .universitaria .box2 .deslizador .card p { 
    margin-top: 0;
    margin-bottom: 30px; 
    font-family: 'Roboto', sans-serif !important; 
    font-size: 14px !important; 
    text-align: justify; 
    color: #6F6F6F !important; 
    line-height: 1.4 !important;
  }

  /* Footer de las tarjetas (Redes y Enlace plano) */
  .universitaria .box2 .deslizador .card .datos { 
    width: 100%; 
    margin-top: auto;
  }

  .universitaria .box2 .deslizador .card .datos .box-card-footer { 
    padding: 20px 40px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
  }

  .universitaria .box2 .deslizador .card .redes { 
    padding: 0; 
    list-style: none; 
    display: flex; 
    margin: 0;
  }

  .universitaria .box2 .deslizador .card .redes > li { 
    margin-right: 10px; 
    display: flex;
    align-items: center;
  }

  .universitaria .box2 .deslizador .card .redes > li img { 
    width: 30px; 
  }

  /* Enlace plano "Visitar Web" con flecha como en mockup original */
  .universitaria .box2 .deslizador .card .link { 
    font-family: 'Roboto-Bold', sans-serif; 
    font-size: 16px; 
    color: #FF5900; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none;
    transition: opacity 0.2s ease;
    margin-left: auto; /* Empuja el botón a la derecha si no hay redes */
  }

  .universitaria .box2 .deslizador .card .link:hover {
    opacity: 0.8;
  }

  .universitaria .box2 .deslizador .card .link img { 
    margin-left: 10px; 
  }

  /* Paginación de Swiper en color naranja */
  .universitaria .box2 .deslizador .swiper-pagination-bullets { 
    bottom: -26px; 
    left: 0; 
    right: 0; 
  }

  .universitaria .box2 .deslizador .swiper-pagination-bullet { 
    width: 12px; 
    height: 12px; 
  }

  .universitaria .box2 .deslizador .swiper-pagination-bullet:hover { 
    background: #FF5900; 
  }

  .universitaria .box2 .deslizador .swiper-pagination-bullet-active { 
    background: #FF5900; 
  }

  .universitaria .box2 .deslizador .swiper-pagination-clickable .swiper-pagination-bullet { 
    margin: 0 4px; 
  }

  @media screen and (max-width: 1399px) {
    .universitaria .box1 { width: 460px; }
    .universitaria .box2 { width: calc(100% - 460px); }
  }

  @media screen and (max-width: 1199px) {
    .universitaria .box2 .deslizador .card { min-height: 520px; }
  }

  @media screen and (max-width: 992px) {
    .universitaria::before { content: none; }
    .universitaria .box1 { width: 300px; }
    .universitaria .box2 { width: calc(100% - 320px); }
  }

  @media screen and (max-width: 767px) {
    .universitaria .box { flex-direction: column; }
    .universitaria .box1 { width: 100%; text-align: left; }
    .universitaria .box2 { width: 100%; margin-top: 40px; }
  }
</style>
