* {
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      }

      body {
          background: #ffffff;
          min-height: 100vh;
          overflow-x: hidden;
      }

      /* Eliminar margen del navbar en catálogo */
      .navbar.mb-4 {
          margin-bottom: 0 !important;
      }

      /* ========================================
         HERO SLIDER - FUTURESIGHT STYLE
         ======================================== */
      .hero-slider-section {
          width: 100%;
          margin: 0;
          padding: 0;
          position: relative;
          overflow: hidden;
      }

      .heroSwiper {
          width: 100%;
          height: 65vh;
          min-height: 450px;
          max-height: 700px;
      }

      /* ========================================
         LINKS DE INTERÉS POR FACULTADES (DYNAMIC CARDS)
         ======================================== */
      .faculties-links-section {
          padding: 100px 0 150px;
          background: #fdfdfd;
          position: relative;
      }

      .faculties-header-alt {
          max-width: 900px;
          margin-bottom: 70px;
          text-align: left;
          /* Alineado a la izquierda */
      }

      .section-badge {
          display: inline-block;
          padding: 8px 18px;
          background: rgba(1, 131, 57, 0.08);
          color: #018339;
          font-weight: 800;
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 2px;
          border-radius: 100px;
          margin-bottom: 25px;
      }

      .faculties-title-alt {
          font-size: 2.5rem;
          font-weight: 900;
          color: #111;
          letter-spacing: -2px;
          line-height: 1;
          margin-bottom: 25px;
      }

      .faculties-subtitle-alt {
          font-size: 1.25rem;
          color: #555;
          line-height: 1.6;
          max-width: 700px;
      }

      /* Card Grid */
      .faculties-cards-container {
          position: relative;
          z-index: 5;
          align-items: flex-start;
          /* Evita que todas las tarjetas se estiren a la altura de la más grande */
      }

      .faculty-expand-card {
          background: #ffffff;
          border-radius: 30px;
          padding: 40px;
          height: auto;
          min-height: 300px;
          /* Altura uniforme mientras están colapsadas */
          border: 1px solid #f0f0f0;
          box-shadow: 0 15px 45px rgba(0, 0, 0, 0.04);
          transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
          display: flex;
          flex-direction: column;
          position: relative;
      }

      .faculty-expand-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
          border-color: #e0e0e0;
      }

      .card-top {
          margin-bottom: 30px;
      }

      .icon-wrapper {
          width: 75px;
          height: 75px;
          border-radius: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2rem;
          margin-bottom: 30px;
          transition: all 0.4s ease;
      }

      .card-faculty-name {
          font-size: 1.75rem;
          font-weight: 900;
          color: #111;
          line-height: 1.2;
          margin: 0;
          letter-spacing: -0.5px;
      }

      /* Toggle Button */
      .card-bottom {
          margin-top: auto;
      }

      .expand-toggle-btn {
          width: 100%;
          padding: 16px 24px;
          border: 1px solid #f0f0f0;
          background: #fbfbfb;
          border-radius: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 800;
          color: #333;
          transition: all 0.3s ease;
          cursor: pointer;
      }

      .expand-toggle-btn:hover {
          background: #111;
          color: #fff;
          border-color: #111;
      }

      .expand-toggle-btn i {
          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      .expand-toggle-btn:not(.collapsed) i {
          transform: rotate(180deg);
      }

      /* Collapse Links */
      .card-links-collapse {
          width: 100%;
      }

      .collapse-inner {
          padding-top: 30px;
          margin-top: 20px;
          border-top: 1px dashed #eee;
      }

      .link-subgroup {
          margin-bottom: 25px;
      }

      .subgroup-label {
          font-size: 0.7rem;
          font-weight: 900;
          color: #bbb;
          text-transform: uppercase;
          letter-spacing: 2px;
          margin-bottom: 15px;
          display: block;
      }

      .subgroup-links {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .subgroup-links li {
          margin-bottom: 12px;
      }

      .subgroup-links li a {
          text-decoration: none;
          color: #444;
          font-weight: 700;
          font-size: 1rem;
          display: flex;
          align-items: center;
          gap: 10px;
          transition: all 0.2s ease;
      }

      .subgroup-links li a::before {
          content: '';
          width: 6px;
          height: 6px;
          background: currentColor;
          border-radius: 50%;
          opacity: 0.3;
          transition: all 0.2s ease;
      }

      .subgroup-links li a:hover {
          color: #018339;
          transform: translateX(5px);
      }

      .subgroup-links li a:hover::before {
          opacity: 1;
          transform: scale(1.5);
      }

      /* Theme Colors */
      .health-border .icon-wrapper {
          background: rgba(1, 131, 57, 0.1);
          color: #018339;
      }

      .health-border .subgroup-links li a:hover {
          color: #018339;
      }

      .law-border .icon-wrapper {
          background: rgba(155, 89, 182, 0.1);
          color: #9b59b6;
      }

      .law-border .subgroup-links li a:hover {
          color: #9b59b6;
      }

      .business-border .icon-wrapper {
          background: rgba(52, 152, 219, 0.1);
          color: #3498db;
      }

      .business-border .subgroup-links li a:hover {
          color: #3498db;
      }

      .humanities-border .icon-wrapper {
          background: rgba(241, 196, 15, 0.1);
          color: #f39c12;
      }

      .humanities-border .subgroup-links li a:hover {
          color: #f39c12;
      }

      @media (max-width: 991px) {
          .faculties-title-alt {
              font-size: 2.8rem;
          }

          .faculties-header-alt {
              margin-bottom: 50px;
          }
      }

      @media (max-width: 767px) {
          .faculties-title-alt {
              font-size: 2.2rem;
          }

          .container-fluid.px-5 {
              padding-left: 1.5rem !important;
              padding-right: 1.5rem !important;
          }
      }

      .swiper-slide {
          position: relative;
          overflow: hidden;
      }

      .slide-content {
          position: relative;
          width: 100%;
          height: 100%;
      }

      /* Animated Background */
      .slide-bg-animated {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
          background: linear-gradient(135deg, #018339 0%, #018339 50%, #0B2FE6 100%);
      }

      /* Wave Animation */
      .wave-animation {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
          opacity: 0.3;
          background:
              radial-gradient(ellipse at 20% 50%, rgba(1, 131, 57, 0.4) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 50%, rgba(11, 47, 230, 0.4) 0%, transparent 50%);
          animation: waveMove 15s ease-in-out infinite;
      }

      .wave-animation.wave-2 {
          background:
              radial-gradient(ellipse at 30% 60%, rgba(102, 126, 234, 0.4) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 40%, rgba(118, 75, 162, 0.4) 0%, transparent 50%);
          animation: waveMove 18s ease-in-out infinite reverse;
      }

      .wave-animation.wave-3 {
          background:
              radial-gradient(ellipse at 40% 45%, rgba(1, 131, 57, 0.4) 0%, transparent 50%),
              radial-gradient(ellipse at 60% 55%, rgba(11, 47, 230, 0.4) 0%, transparent 50%);
          animation: waveMove 20s ease-in-out infinite;
      }

      @keyframes waveMove {

          0%,
          100% {
              transform: translateY(0) scale(1);
          }

          50% {
              transform: translateY(-30px) scale(1.05);
          }
      }

      /* Gradient Overlay */
      .slide-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg,
                  rgba(1, 131, 57, 0.7) 0%,
                  rgba(11, 47, 230, 0.6) 100%);
          z-index: 3;
          mix-blend-mode: multiply;
      }

      /* Two Column Layout */
      .container.h-100 {
          height: 100%;
          position: relative;
          z-index: 4;
      }

      /* Left Column - Text Content */
      .slide-text-content {
          color: white;
          padding-right: 40px;
      }

      .slide-badge {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 10px 24px;
          background: rgba(255, 255, 255, 0.15);
          backdrop-filter: blur(15px);
          border: 1px solid rgba(255, 255, 255, 0.25);
          border-radius: 50px;
          font-size: 0.85rem;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 2px;
          margin-bottom: 30px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      }

      .slide-badge i {
          font-size: 1rem;
      }

      /* Main Title */
      .slide-main-title {
          font-size: 4rem;
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 15px;
          color: white;
      }

      .gradient-text {
          background: linear-gradient(135deg, #ffffff 0%, #a8edea 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          display: inline-block;
      }

      /* Subtitle */
      .slide-subtitle {
          font-size: 1.15rem;
          line-height: 1.7;
          margin-bottom: 35px;
          opacity: 0.9;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.95);
          padding-right: 3rem;
      }

      /* CTA Buttons Group */
      .slide-cta-group {
          display: flex;
          gap: 15px;
          margin-bottom: 50px;
          flex-wrap: wrap;
      }

      .cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          padding: 16px 32px;
          text-decoration: none;
          border-radius: 50px;
          font-weight: 700;
          font-size: 0.95rem;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          position: relative;
          overflow: hidden;
          white-space: nowrap;
      }

      /* Primary CTA - Navbar Style Match */
      .cta-primary {
          background: #ffffff;
          color: #0B2FE6;
          box-shadow: 0 3px 8px #ffffff;
          border: none;
      }

      .cta-primary::before {
          display: none;
      }

      .cta-primary:hover {
          background: #0B2FE6;
          box-shadow: 0 4px 12px #0B2FE6;
          transform: translateY(-2px);
          color: #ffffff;
      }

      /* Outline CTA - Navbar Style Match (Secondary variant) */
      .cta-outline {
          background: #6c757d;
          color: white;
          border: none;
          box-shadow: 0 3px 8px rgba(108, 117, 125, 0.5);
      }

      .cta-outline:hover {
          background: rgb(59, 64, 68);
          box-shadow: 0 4px 12px rgb(59, 64, 68);
          transform: translateY(-2px);
          color: white;
          border: none;
      }

      /* Stats Section */
      .slide-stats {
          display: flex;
          gap: 40px;
          flex-wrap: wrap;
      }

      .stat-item {
          text-align: left;
      }

      .stat-number {
          font-size: 2.5rem;
          font-weight: 900;
          color: white;
          line-height: 1;
          margin-bottom: 8px;
          background: linear-gradient(135deg, #ffffff 0%, #a8edea 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      .stat-label {
          font-size: 0.85rem;
          font-weight: 600;
          color: rgba(255, 255, 255, 0.7);
          text-transform: uppercase;
          letter-spacing: 1.5px;
      }

      /* Right Column - Multiple Visual Elements */
      .slide-visual-multi {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          padding: 40px 0;
      }

      /* Main Image */
      .visual-main {
          position: relative;
          z-index: 3;
          max-width: 320px;
          width: 100%;
          top: 90px;
      }

      .img-main {
          width: 100%;
          height: auto;
          border-radius: 20px;
          box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
          animation: floatMain 6s ease-in-out infinite;
      }

      @keyframes floatMain {

          0%,
          100% {
              transform: translateY(0) rotate(0deg);
          }

          50% {
              transform: translateY(-15px) rotate(1deg);
          }
      }

      /* Floating Images */
      .visual-float {
          position: absolute;
          z-index: 2;
          border-radius: 15px;
          overflow: hidden;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      }

      .img-float {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }

      /* Float 1 - Top Right */
      .visual-float-1 {
          top: 20px;
          right: 20px;
          width: 150px;
          height: 205px;
          animation: float1 7s ease-in-out infinite;
      }

      @keyframes float1 {

          0%,
          100% {
              transform: translate(0, 0) rotate(0deg);
          }

          50% {
              transform: translate(-10px, -20px) rotate(-5deg);
          }
      }

      /* Float 2 - Bottom Left */
      .visual-float-2 {
          bottom: -20px;
          left: -20px;
          width: 220px;
          height: 250px;
          animation: float2 8s ease-in-out infinite;
      }

      @keyframes float2 {

          0%,
          100% {
              transform: translate(0, 0) rotate(0deg);
          }

          50% {
              transform: translate(15px, 15px) rotate(5deg);
          }
      }

      /* Float 3 - Middle Right */
      .visual-float-3 {
          top: 75%;
          right: -20px;
          width: 260px;
          height: 250px;
          transform: translateY(-50%);
          animation: float3 9s ease-in-out infinite;
      }

      @keyframes float3 {

          0%,
          100% {
              transform: translateY(-50%) rotate(0deg);
          }

          50% {
              transform: translateY(calc(-50% + 20px)) rotate(-3deg);
          }
      }

      /* Decorative Circles */
      .visual-decoration-circle {
          position: absolute;
          border-radius: 50%;
          z-index: 1;
          opacity: 0.15;
      }

      .circle-1 {
          top: -110px;
          left: -50px;
          width: 200px;
          height: 200px;
          background: linear-gradient(135deg, rgba(230, 190, 67) 0%, rgba(230, 190, 67) 100%);
          animation: rotateCircle 20s linear infinite;
      }

      .circle-2 {
          bottom: -30px;
          right: -140px;
          width: 200px;
          height: 200px;
          background: linear-gradient(135deg, rgba(230, 190, 67) 0%, rgba(230, 190, 67) 100%);
          animation: rotateCircle 25s linear infinite reverse;
      }

      @keyframes rotateCircle {
          0% {
              transform: rotate(0deg) scale(1);
          }

          50% {
              transform: rotate(180deg) scale(1.1);
          }

          100% {
              transform: rotate(360deg) scale(1);
          }
      }

      /* Modern Navigation Controls */
      .slider-controls {
          position: absolute;
          bottom: 40px;
          left: 0;
          right: 0;
          z-index: 10;
      }

      .controls-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 30px;
      }

      .swiper-button-next,
      .swiper-button-prev {
          position: static;
          width: 55px;
          height: 55px;
          margin: 0;
          background: rgba(255, 255, 255, 0.12);
          backdrop-filter: blur(15px);
          border: 2px solid rgba(255, 255, 255, 0.25);
          border-radius: 50%;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .swiper-button-next:after,
      .swiper-button-prev:after {
          content: '';
          display: none;
      }

      .swiper-button-next i,
      .swiper-button-prev i {
          font-size: 18px;
          color: white;
          font-weight: 900;
      }

      .swiper-button-next:hover,
      .swiper-button-prev:hover {
          background: rgba(255, 255, 255, 0.25);
          border-color: rgba(255, 255, 255, 0.4);
          transform: scale(1.15);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      }

      /* Swiper Pagination */
      .swiper-pagination {
          position: static;
          display: flex;
          gap: 10px;
          align-items: center;
      }

      .swiper-pagination-bullet {
          width: 10px;
          height: 10px;
          background: rgba(255, 255, 255, 0.4);
          opacity: 1;
          margin: 0 !important;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          border: 2px solid transparent;
          position: relative;
      }

      .swiper-pagination-bullet-active {
          width: 45px;
          border-radius: 5px;
          background: white;
          border-color: rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
      }

      .swiper-pagination-bullet-active .bullet-inner {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 5px;
          height: 5px;
          background: #018339;
          border-radius: 50%;
      }

      /* Responsive Design */
      @media (max-width: 1400px) {
          .slide-main-title {
              font-size: 3.5rem;
          }

          .slide-subtitle {
              font-size: 1.1rem;
          }

          .stat-number {
              font-size: 2.2rem;
          }
      }

      @media (max-width: 1200px) {
          .heroSwiper {
              height: auto;
              min-height: 650px;
              padding-bottom: 50px;
          }

          .slide-content {
              display: flex;
              align-items: center;
          }

          .slide-main-title {
              font-size: 3.2rem;
          }

          .slide-subtitle {
              font-size: 1.05rem;
          }

          .visual-main {
              max-width: 280px;
          }

          .visual-float-1 {
              width: 120px;
              height: 120px;
          }

          .visual-float-2 {
              width: 105px;
              height: 105px;
          }

          .visual-float-3 {
              width: 115px;
              height: 115px;
          }
      }

      @media (max-width: 992px) {
          .heroSwiper {
              height: auto;
              min-height: 100vh;
              padding-top: 60px;
              padding-bottom: 60px;
          }

          .slide-text-content {
              padding-right: 0;
              /* margin-bottom: 50px;*/
              text-align: center;
              display: flex;
              flex-direction: column;
              align-items: center;
          }

          .slide-main-title {
              font-size: 3rem;
          }

          .slide-subtitle {
              font-size: 1.1rem;
              max-width: 600px;
              margin-left: auto;
              margin-right: auto;
          }

          .slide-visual-multi {
              padding: 20px 0;
              height: auto;
              min-height: 350px;
          }

          .visual-main {
              max-width: 260px;
          }

          .visual-float-1,
          .visual-float-2,
          .visual-float-3 {
              width: 100px;
              height: 100px;
          }

          .visual-float-1 {
              right: 10%;
              top: 0;
          }

          .visual-float-2 {
              left: 10%;
              bottom: 0;
          }

          .visual-float-3 {
              right: 10%;
              top: 0;
          }

          .slide-stats {
              justify-content: center;
              gap: 30px;
          }

          .stat-number {
              font-size: 2rem;
          }

          .slide-cta-group {
              justify-content: center;
          }
      }

      @media (max-width: 768px) {
          .heroSwiper {
              min-height: auto;
              padding-top: 40px;
              padding-bottom: 60px;
          }

          .slide-text-content {
              padding: 20px 15px 0 15px;
              /* margin-bottom: 40px; */
          }

          .slide-main-title {
              font-size: 2.5rem;
          }

          .slide-subtitle {
              font-size: 1rem;
              line-height: 1.6;
          }

          .slide-badge {
              font-size: 0.75rem;
              padding: 8px 18px;
          }

          .slide-cta-group {
              flex-direction: column;
              width: 100%;
              max-width: 320px;
              gap: 15px;
          }

          .cta-btn {
              width: 100%;
              justify-content: center;
              padding: 14px 28px;
              font-size: 0.95rem;
          }

          .slide-stats {
              gap: 25px;
          }

          .stat-item {
              text-align: center;
          }

          .stat-number {
              font-size: 1.8rem;
          }

          .visual-main {
              max-width: 220px;
          }

          .visual-float-1,
          .visual-float-2,
          .visual-float-3 {
              width: 140px;
              height: 160px;
          }

          .visual-float-1 {
              right: 10%;
              top: 10%;
          }

          .visual-float-2 {
              left: 10%;
              bottom: 0;
          }

          .visual-float-3 {
              right: 10%;
              top: 80%;
          }

          .visual-decoration-circle {
              opacity: 0.1;
          }

          .swiper-button-next,
          .swiper-button-prev {
              width: 45px;
              height: 45px;
          }

          .swiper-button-next i,
          .swiper-button-prev i {
              font-size: 16px;
          }

          .controls-wrapper {
              gap: 20px;
          }

          .slider-controls {
              bottom: 20px;
          }
      }

      @media (max-width: 576px) {
          .heroSwiper {
              padding-top: 0;
          }

          .slide-main-title {
              font-size: 2.1rem;
              margin-bottom: 20px;
          }

          .slide-subtitle {
              font-size: 0.95rem;
              margin-bottom: 30px;
          }

          .stat-number {
              font-size: 1.6rem;
          }

          .stat-label {
              font-size: 0.75rem;
          }

          .swiper-pagination-bullet-active {
              width: 35px;
          }

          .visual-main {
              max-width: 180px;
          }

          .slide-visual-multi {
              min-height: 250px;
          }
      }

      /* ========================================
         SEARCH BAR SECTION - BELOW SLIDER
         ======================================== */

      .search-bar-section {
          background: linear-gradient(180deg, #ccc 0%, #ccc 100%);
          padding: 60px 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }

      .search-bar-container {
          max-width: 900px;
          margin: 0 auto;
      }

      .search-bar-content {
          text-align: center;
      }

      .search-bar-title {
          font-size: 2.2rem;
          font-weight: 800;
          color: #1e293b;
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 15px;
      }

      .search-bar-title i {
          color: #018339;
          font-size: 2rem;
      }

      .search-bar-subtitle {
          font-size: 1.1rem;
          color: #64748b;
          margin-bottom: 35px;
          font-weight: 400;
      }

      .search-form-bar {
          margin: 0 auto;
      }

      .search-input-container {
          display: flex;
          align-items: center;
          background: white;
          border-radius: 60px;
          padding: 0px 2px 0px 18px;
          box-shadow:
              0 10px 40px rgba(0, 0, 0, 0.08),
              0 0 0 1px rgba(0, 0, 0, 0.05);
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          max-width: 800px;
          margin: 0 auto;
      }

      .search-input-container:focus-within {
          box-shadow:
              0 15px 50px rgba(1, 131, 57, 0.15),
              0 0 0 3px rgba(1, 131, 57, 0.1);
          transform: translateY(-2px);
      }

      .search-icon-input {
          color: #94a3b8;
          font-size: 1.2rem;
          margin-right: 15px;
          transition: color 0.3s ease;
      }

      .search-input-container:focus-within .search-icon-input {
          color: #018339;
      }

      .search-input-bar {
          flex: 1;
          border: none;
          outline: none;
          padding: 18px 10px;
          font-size: 1.05rem;
          color: #1e293b;
          background: transparent;
          font-weight: 500;
      }

      .search-input-bar::placeholder {
          color: #94a3b8;
          font-weight: 400;
      }

      .search-btn-bar {
          background: #0B2FE6;
          color: white;
          border: none;
          border-radius: 50px;
          padding: 16px 35px;
          font-size: 1rem;
          font-weight: 700;
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          box-shadow: 0 3px 8px #0B2FE6;
          white-space: nowrap;
          position: relative;
          overflow: hidden;
      }

      .search-btn-bar::before {
          display: none;
      }

      .search-btn-bar:hover {
          background: rgb(25, 135, 84);
          box-shadow: 0 4px 12px rgb(25, 135, 84);
          transform: translateY(-2px);
      }

      .search-btn-bar:active {
          transform: translateY(-1px) scale(0.98);
          box-shadow: 0 3px 8px rgba(11, 47, 230, 0.2);
      }

      /* Responsive Search Bar */
      @media (max-width: 768px) {
          .search-bar-section {
              padding: 40px 0;
          }

          .search-bar-title {
              font-size: 1.8rem;
              flex-direction: column;
              gap: 10px;
          }

          .search-bar-subtitle {
              font-size: 1rem;
              margin-bottom: 25px;
          }

          .search-input-container {
              flex-direction: column;
              padding: 15px;
              border-radius: 20px;
          }

          .search-icon-input {
              display: none;
          }

          .search-input-bar {
              width: 100%;
              padding: 12px;
              text-align: center;
          }

          .search-btn-bar {
              width: 100%;
              justify-content: center;
              margin-top: 10px;
          }
      }

      @media (max-width: 576px) {
          .search-bar-title {
              font-size: 1.5rem;
          }

          .search-bar-title i {
              font-size: 1.5rem;
          }

          .search-bar-subtitle {
              font-size: 0.95rem;
          }
      }

      /* ========================================
         INSTANT SEARCH RESULTS
         ======================================== */

      .search-input-container {
          position: relative;
      }

      .instant-search-results {
          position: absolute;
          top: calc(100% + 10px);
          left: 0;
          right: 0;
          background: white;
          border-radius: 20px;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
          max-height: 500px;
          overflow: hidden;
          z-index: 1000;
          animation: slideDown 0.3s ease;
      }

      @keyframes slideDown {
          from {
              opacity: 0;
              transform: translateY(-10px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .instant-search-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 20px;
          border-bottom: 2px solid #f1f5f9;
          background: #f8fafc;
      }

      .search-count {
          font-size: 0.85rem;
          color: #64748b;
          font-weight: 600;
      }

      .search-more {
          font-size: 0.85rem;
          color: #018339;
          font-weight: 700;
          cursor: pointer;
          transition: all 0.3s ease;
      }

      .search-more:hover {
          color: #0B2FE6;
          transform: translateX(3px);
      }

      .instant-search-list {
          max-height: 420px;
          overflow-y: auto;
          padding: 8px;
      }

      .instant-search-list::-webkit-scrollbar {
          width: 8px;
      }

      .instant-search-list::-webkit-scrollbar-track {
          background: #f1f5f9;
          border-radius: 10px;
      }

      .instant-search-list::-webkit-scrollbar-thumb {
          background: #cbd5e1;
          border-radius: 10px;
      }

      .instant-search-list::-webkit-scrollbar-thumb:hover {
          background: #94a3b8;
      }

      .instant-search-item {
          display: flex;
          align-items: center;
          gap: 15px;
          padding: 12px;
          border-radius: 12px;
          text-decoration: none;
          color: inherit;
          transition: all 0.3s ease;
          margin-bottom: 4px;
      }

      .instant-search-item:hover,
      .instant-search-item.selected {
          background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
          transform: translateX(5px);
          box-shadow: 0 4px 12px rgba(1, 131, 57, 0.1);
      }

      .search-item-image {
          position: relative;
          width: 60px;
          height: 80px;
          flex-shrink: 0;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .search-item-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .search-item-badge {
          position: absolute;
          top: 4px;
          right: 4px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.65rem;
          color: white;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      }

      .search-item-badge.available {
          background: #4caf50;
      }

      .search-item-badge.unavailable {
          background: #f44336;
      }

      .search-item-content {
          flex: 1;
          min-width: 0;
      }

      .search-item-title {
          font-size: 0.95rem;
          font-weight: 700;
          color: #1e293b;
          margin: 0 0 6px 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: 1.3;
      }

      .search-item-author {
          font-size: 0.8rem;
          color: #64748b;
          margin: 0 0 6px 0;
          display: flex;
          align-items: center;
          gap: 5px;
      }

      .search-item-author i {
          color: #018339;
          font-size: 0.75rem;
      }

      .search-item-category {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 4px 10px;
          background: #E6BE43;
          color: #1e293b;
          border-radius: 6px;
          font-size: 0.7rem;
          font-weight: 600;
      }

      .search-item-category i {
          font-size: 0.65rem;
      }

      .search-item-arrow {
          color: #cbd5e1;
          font-size: 0.9rem;
          transition: all 0.3s ease;
      }

      .instant-search-item:hover .search-item-arrow,
      .instant-search-item.selected .search-item-arrow {
          color: #018339;
          transform: translateX(3px);
      }

      .instant-search-empty {
          text-align: center;
          padding: 40px 20px;
          color: #64748b;
      }

      .instant-search-empty i {
          font-size: 3rem;
          color: #cbd5e1;
          margin-bottom: 15px;
      }

      .instant-search-empty p {
          font-size: 0.95rem;
          margin: 0;
      }

      .instant-search-empty strong {
          color: #1e293b;
      }

      /* Responsive Instant Search */
      @media (max-width: 768px) {
          .instant-search-results {
              max-height: 400px;
              border-radius: 15px;
          }

          .instant-search-list {
              max-height: 320px;
          }

          .search-item-image {
              width: 50px;
              height: 70px;
          }

          .search-item-title {
              font-size: 0.9rem;
          }

          .search-item-author {
              font-size: 0.75rem;
          }
      }

      @media (max-width: 576px) {
          .instant-search-results {
              max-height: 350px;
          }

          .instant-search-list {
              max-height: 270px;
          }

          .instant-search-item {
              gap: 10px;
              padding: 10px;
          }

          .search-item-image {
              width: 45px;
              height: 60px;
          }
      }

      .results-header {
          margin: 40px 0 30px;
      }

      .results-header h2 {
          font-size: 2rem;
          font-weight: 700;
          color: #2c3e50;
          display: inline-block;
          padding-bottom: 10px;
          border-bottom: 4px solid #018339;
      }

      /* ========================================
         CATALOG CONTENT WRAPPER - WHITE BACKGROUND
         ======================================== */

      .catalog-content-wrapper {
          background: white;
          border-radius: 0;
          padding: 0px 80px 30px 80px;
          box-shadow: none;
          border: none;
      }

      @media (max-width: 768px) {
          .catalog-content-wrapper {
              padding: 20px 0;
          }
      }

      /* Estilos del Grid de Recomendaciones */
      .recomendaciones-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 16px;
          margin-bottom: 40px;
      }

      /* Material Card */
      .material-card {
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          position: relative;
      }

      .material-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
      }

      .card-image {
          position: relative;
          width: 100%;
          height: 260px;
          overflow: hidden;
          background: #f1f5f9;
      }

      .card-image img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          transition: transform 0.4s ease;
          background-color: #f8f9fa;
      }

      .material-card:hover .card-image img {
          transform: scale(1.05);
      }

      .card-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
          display: flex;
          align-items: flex-end;
          justify-content: center;
          padding: 20px;
          opacity: 0;
          transition: opacity 0.3s ease;
      }

      .material-card:hover .card-overlay {
          opacity: 1;
      }

      .btn-view-details {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 12px 24px;
          background: white;
          color: #018339;
          text-decoration: none;
          border-radius: 50px;
          font-weight: 600;
          transition: all 0.3s ease;
          transform: translateY(20px);
      }

      .material-card:hover .btn-view-details {
          transform: translateY(0);
      }

      .btn-view-details:hover {
          background: #018339;
          color: white;
      }

      .availability-badge {
          position: absolute;
          top: 12px;
          right: 12px;
          padding: 8px 14px;
          border-radius: 50px;
          font-size: 0.8rem;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 6px;
          z-index: 2;
          backdrop-filter: blur(10px);
      }

      .availability-badge.available {
          background: rgba(76, 175, 80, 0.9);
          color: white;
      }

      .availability-badge.unavailable {
          background: rgba(244, 67, 54, 0.9);
          color: white;
      }

      .card-content {
          padding: 20px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          min-height: 140px;
      }

      .card-category {
          display: inline-flex;
          align-items: center;
          align-self: flex-start;
          gap: 6px;
          padding: 6px 12px;
          background: #E6BE43;
          /* Default color */
          color: #1e293b;
          border-radius: 8px;
          font-size: 0.75rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          margin: 0;
      }

      /* Category Colors */
      .card-category.cat-libro {
          background: #0B2FE6;
          color: white;
      }

      .card-category.cat-revista {
          background: #0ea5e9;
          color: white;
      }

      .card-category.cat-tfg {
          background: #018339;
          /* Verde UMA */
          color: white;
      }

      .card-category.cat-tfpg {
          background: #4f46e5;
          /* Índigo/Morado para Postgrado */
          color: white;
      }

      .card-category.cat-monografia {
          background: #0d9488;
          /* Teal para Monografías */
          color: white;
      }

      .card-category.cat-otros {
          background: #E6BE43;
          color: #1e293b;
      }

      .card-title {
          font-size: 1.15rem;
          font-weight: 700;
          color: #1e293b;
          margin: 0;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          min-height: 3.2rem;
          flex-grow: 1;
      }

      .card-author {
          font-size: 0.9rem;
          color: #64748b;
          margin: 0;
          padding-top: 8px;
          border-top: 1px solid #f1f5f9;
          display: flex;
          align-items: center;
          gap: 8px;
          font-weight: 500;
      }

      .card-author i {
          color: #018339;
          font-size: 0.85rem;
      }

      .empty-icon {
          font-size: 5rem;
          color: #018339;
          margin-bottom: 24px;
          opacity: 0.7;
      }

      .empty-state {
          background: white;
          border-radius: 20px;
          padding: 80px 40px;
          text-align: center;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
          margin: 60px 0;
      }

      .empty-state h3 {
          font-size: 1.8rem;
          color: #333;
          margin-bottom: 12px;
      }

      .empty-state p {
          font-size: 1.1rem;
          color: #666;
          margin-bottom: 32px;
      }

      .btn-primary {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 14px 32px;
          background: #0B2FE6;
          color: white;
          text-decoration: none;
          border-radius: 50px;
          font-weight: 600;
          font-size: 1rem;
          transition: all 0.3s ease;
          box-shadow: 0 4px 15px #0B2FE6;
          border: none;
      }

      .btn-primary:hover {
          background: #018339;
          transform: translateY(-2px);
          box-shadow: 0 6px 20px #018339;
          color: white;
      }

      /* Empty State Styles */
      .recomendaciones-grid .col-12 {
          grid-column: 1 / -1;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .empty-state {
          text-align: center;
          padding: 60px 20px;
          max-width: 600px;
          margin: 0 auto;
          width: 100%;
      }

      .empty-icon {
          font-size: 4rem;
          color: #cbd5e1;
          margin-bottom: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .empty-icon i {
          display: block;
      }

      .empty-state h3 {
          color: #1e293b;
          font-size: 1.5rem;
          font-weight: 700;
          margin-bottom: 12px;
          text-align: center;
      }

      .empty-state p {
          color: #64748b;
          font-size: 1rem;
          margin-bottom: 24px;
          line-height: 1.6;
          text-align: center;
      }

      .empty-state .btn-primary {
          margin: 0 auto;
          display: inline-flex;
      }

      footer {
          background: #1A1A1A;
          color: white;

      }

      /* Responsive */
      @media (max-width: 1400px) {
          .recomendaciones-grid {
              grid-template-columns: repeat(4, 1fr);
              gap: 14px;
          }
      }

      @media (max-width: 1200px) {
          .recomendaciones-grid {
              grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
              gap: 18px;
          }
      }

      @media (max-width: 768px) {
          .recomendaciones-grid {
              grid-template-columns: 1fr;
              gap: 20px;
          }

          .card-image {
              height: 280px;
          }

          .hero-section h1 {
              font-size: 2.5rem;
          }

          .hero-section p {
              font-size: 1rem;
          }
      }

      @media (max-width: 480px) {
          .card-title {
              font-size: 1.1rem;
          }

          .availability-badge {
              font-size: 0.75rem;
              padding: 6px 10px;
          }
      }

      .amarillo {
          color: #E6BE43 !important;
      }

      /* ========================================
         CATALOG TITLE SECTION
         ======================================== */

      .catalog-title-section {
          text-align: center;
          padding: 0 20px 30px 20px;
          margin-bottom: 25px;
          /*border-bottom: 3px solid #f1f5f9;*/
      }

      .catalog-main-title {
          font-size: 2.5rem;
          font-weight: 800;
          color: #1e293b;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 15px;
      }

      .catalog-main-title i {
          color: #018339;
          font-size: 2.2rem;
      }

      .catalog-subtitle {
          font-size: 1.1rem;
          color: #64748b;
          font-weight: 400;
          margin: 0;
      }

      /* ========================================
         FILTERS BAR - IMPROVED HORIZONTAL DESIGN
         ======================================== */

      .filters-bar {
          background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
          border-radius: 12px;
          padding: 16px 20px;
          margin-bottom: 30px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          border: 1px solid #e2e8f0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          flex-wrap: wrap;
      }

      .filters-left {
          display: flex;
          align-items: center;
          gap: 20px;
          flex-wrap: wrap;
          flex: 1;
      }

      .filters-right {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-left: auto;
      }

      .filter-group-compact {
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .filter-label-compact {
          font-size: 0.9rem;
          font-weight: 600;
          color: #334155;
          display: flex;
          align-items: center;
          gap: 6px;
          white-space: nowrap;
          margin: 0;
      }

      .filter-label-compact i {
          color: #018339;
          font-size: 0.9rem;
      }

      .filter-select {
          min-width: 180px;
          padding: 10px 14px;
          border: 2px solid #cbd5e1;
          border-radius: 50px;
          font-size: 0.9rem;
          font-weight: 500;
          color: #1e293b;
          background: white;
          cursor: pointer;
          transition: all 0.3s ease;
          outline: none;
      }

      .filter-select:hover {
          border-color: #018339;
      }

      .filter-select:focus {
          border-color: #018339;
          box-shadow: 0 0 0 3px rgba(1, 131, 57, 0.1);
      }

      /* Search Input in Filters */
      .filter-search-group {
          flex: 0 1 auto;
          min-width: 200px;
          max-width: 250px;
      }

      .filter-search-input {
          width: 100%;
          padding: 10px 14px;
          border: 2px solid #cbd5e1;
          border-radius: 50px;
          font-size: 0.9rem;
          font-weight: 500;
          color: #1e293b;
          background: white;
          transition: all 0.3s ease;
          outline: none;
      }

      .filter-search-input::placeholder {
          color: #94a3b8;
      }

      .filter-search-input:hover {
          border-color: #018339;
      }

      .filter-search-input:focus {
          border-color: #018339;
          box-shadow: 0 0 0 3px rgba(1, 131, 57, 0.1);
          background-color: #ffffff;
      }

      .btn-reset-filters {
          background: linear-gradient(135deg, #64748b 0%, #475569 100%);
          color: white;
          border: none;
          border-radius: 50px;
          padding: 10px 20px;
          font-size: 0.9rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          box-shadow: 0 2px 8px rgba(100, 116, 139, 0.25);
      }

      .btn-reset-filters:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
          background: linear-gradient(135deg, #475569 0%, #334155 100%);
      }

      .btn-reset-filters:active {
          transform: translateY(0);
      }

      .results-badge {
          background: #018339;
          color: white;
          padding: 10px 20px;
          border-radius: 50px;
          font-weight: 700;
          font-size: 0.95rem;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          box-shadow: 0 4px 15px #018339;
      }

      .results-label {
          font-size: 0.9rem;
          font-weight: 600;
          opacity: 0.95;
      }

      .results-count {
          font-size: .88rem;
          font-weight: 800;
          background: rgba(255, 255, 255, 0.2);
          padding: 2px 12px;
          border-radius: 50px;
      }

      /* ========================================
         PAGINATION STYLES
         ======================================== */

      .pagination-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 40px;
          padding: 25px 0;
          border-top: 2px solid #f1f5f9;
          flex-wrap: wrap;
          gap: 20px;
      }

      .pagination-info {
          font-size: 0.95rem;
          color: #64748b;
          font-weight: 500;
      }

      .pagination-nav {
          flex: 1;
          display: flex;
          justify-content: center;
      }

      .pagination {
          display: flex;
          list-style: none;
          padding: 0;
          margin: 0;
          gap: 8px;
          align-items: center;
      }

      .page-item {
          list-style: none;
      }

      .page-link {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          min-width: 42px;
          height: 42px;
          padding: 8px 14px;
          background: white;
          border: 2px solid #e2e8f0;
          border-radius: 10px;
          color: #475569;
          font-weight: 600;
          font-size: 0.9rem;
          text-decoration: none;
          transition: all 0.3s ease;
          cursor: pointer;
      }

      .page-link:hover {
          background: #f8fafc;
          border-color: #018339;
          color: #018339;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(1, 131, 57, 0.15);
      }

      .page-item.active .page-link {
          background: linear-gradient(135deg, #018339 0%, #0B2FE6 100%);
          border-color: #018339;
          color: white;
          box-shadow: 0 4px 15px rgba(1, 131, 57, 0.3);
      }

      .page-item.active .page-link:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(1, 131, 57, 0.4);
      }

      .page-item.disabled .page-link {
          background: #f8fafc;
          border-color: #e2e8f0;
          color: #cbd5e1;
          cursor: not-allowed;
          opacity: 0.6;
      }

      .page-item.disabled .page-link:hover {
          transform: none;
          box-shadow: none;
          background: #f8fafc;
          border-color: #e2e8f0;
      }

      /* Responsive Pagination */
      @media (max-width: 768px) {
          .pagination-container {
              flex-direction: column;
              align-items: center;
              gap: 15px;
          }

          .pagination-info {
              order: 2;
              text-align: center;
          }

          .pagination-nav {
              order: 1;
          }

          .pagination {
              gap: 6px;
          }

          .page-link {
              min-width: 38px;
              height: 38px;
              padding: 6px 10px;
              font-size: 0.85rem;
          }
      }

      @media (max-width: 576px) {
          .page-link {
              min-width: 36px;
              height: 36px;
              padding: 5px 8px;
              font-size: 0.8rem;
          }

          .pagination {
              gap: 4px;
          }
      }

      /* ========================================
         RESPONSIVE FILTERS
         ======================================== */

      /* Responsive Filters */
      @media (max-width: 992px) {
          .catalog-main-title {
              font-size: 2rem;
          }

          .catalog-main-title i {
              font-size: 1.8rem;
          }

          .catalog-subtitle {
              font-size: 1rem;
          }

          .filters-bar {
              flex-direction: column;
              align-items: stretch;
              gap: 15px;
              padding: 20px;
          }

          .filters-left {
              flex-direction: column;
              align-items: stretch;
              gap: 15px;
          }

          .filters-right {
              flex-direction: column;
              align-items: stretch;
              gap: 12px;
              margin-left: 0;
          }

          .filter-group-compact {
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              width: 100%;
          }

          .filter-select {
              min-width: 200px;
          }

          .btn-reset-filters {
              justify-content: center;
          }

          .results-badge {
              justify-content: center;
          }
      }

      @media (max-width: 576px) {
          .catalog-main-title {
              font-size: 1.6rem;
              flex-direction: column;
              gap: 10px;
          }

          .catalog-main-title i {
              font-size: 1.5rem;
          }

          .catalog-subtitle {
              font-size: 0.95rem;
          }

          .filter-group-compact {
              flex-direction: column;
              align-items: flex-start;
          }

          .filter-select {
              width: 100%;
              min-width: unset;
          }
      }

      /* ========================================
         BACK TO TOP BUTTON
         ======================================== */
      .back-to-top {
          position: fixed;
          bottom: 30px;
          right: 30px;
          width: 55px;
          height: 55px;
          background: #0B2FE6;
          color: white;
          border: none;
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.2rem;
          box-shadow: 0 8px 25px rgba(11, 47, 230, 0.4);
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transform: translateY(20px) scale(0.8);
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      .back-to-top.show {
          opacity: 1;
          visibility: visible;
          transform: translateY(0) scale(1);
      }

      .back-to-top:hover {
          background: #018339;
          box-shadow: 0 12px 35px rgba(1, 131, 57, 0.5);
          transform: translateY(-5px) scale(1.1);
      }

      .back-to-top:active {
          transform: translateY(-2px) scale(1.05);
      }

      .back-to-top i {
          animation: arrowBounce 2s ease-in-out infinite;
      }

      @keyframes arrowBounce {

          0%,
          100% {
              transform: translateY(0);
          }

          50% {
              transform: translateY(-5px);
          }
      }

      /* Responsive adjustments for back-to-top button */
      @media (max-width: 768px) {
          .back-to-top {
              width: 50px;
              height: 50px;
              bottom: 20px;
              right: 20px;
              font-size: 1.1rem;
          }
      }

      @media (max-width: 576px) {
          .back-to-top {
              width: 45px;
              height: 45px;
              bottom: 15px;
              right: 15px;
              font-size: 1rem;
          }
      }

      /* ========================================
         MODERN FOOTER WITH SOCIAL MEDIA
         ======================================== */
      .modern-footer {
          background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
          color: #e2e8f0;
          padding: 60px 0 0;
          margin-top: 80px;
          position: relative;
          overflow: hidden;
      }

      .modern-footer::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(90deg, #018339 0%, #0B2FE6 50%, #018339 100%);
          background-size: 200% 100%;
          animation: gradientShift 3s ease infinite;
      }

      @keyframes gradientShift {

          0%,
          100% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }
      }

      .footer-content {
          position: relative;
          z-index: 1;
      }

      .footer-top {
          padding-bottom: 40px;
          border-bottom: 1px solid rgba(226, 232, 240, 0.1);
      }

      .footer-title {
          color: #ffffff;
          font-size: 1.2rem;
          font-weight: 700;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .footer-title i {
          color: #0B2FE6;
          font-size: 1.3rem;
      }

      .footer-description {
          color: #cbd5e1;
          font-size: 0.95rem;
          line-height: 1.7;
          margin-bottom: 25px;
      }

      /* Social Media Links */
      .social-links {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
      }

      .social-link {
          width: 45px;
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: white;
          font-size: 1.1rem;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          position: relative;
          overflow: hidden;
          text-decoration: none;
      }

      .social-link::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 50%;
          transform: scale(0);
          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      .social-link:hover::before {
          transform: scale(1);
      }

      .social-link:hover {
          transform: translateY(-5px) scale(1.1);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      }

      /* Individual Social Media Colors */
      .social-link.facebook {
          background: linear-gradient(135deg, #1877f2 0%, #0d5dbf 100%);
      }

      .social-link.twitter {
          background: linear-gradient(135deg, #1da1f2 0%, #0c85d0 100%);
      }

      .social-link.instagram {
          background: linear-gradient(135deg, #e4405f 0%, #c13584 50%, #833ab4 100%);
      }

      .social-link.linkedin {
          background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
      }

      .social-link.youtube {
          background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
      }

      /* Footer Links */
      .footer-links {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .footer-links li {
          margin-bottom: 12px;
      }

      .footer-links a {
          color: #cbd5e1;
          text-decoration: none;
          font-size: 0.95rem;
          display: flex;
          align-items: center;
          gap: 8px;
          transition: all 0.3s ease;
      }

      .footer-links a i {
          font-size: 0.7rem;
          color: #0B2FE6;
          transition: transform 0.3s ease;
      }

      .footer-links a:hover {
          color: #ffffff;
          padding-left: 8px;
      }

      .footer-links a:hover i {
          transform: translateX(5px);
          color: #018339;
      }

      /* Footer Contact */
      .footer-contact {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .footer-contact li {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 15px;
          color: #cbd5e1;
          font-size: 0.95rem;
      }

      .footer-contact i {
          color: #0B2FE6;
          font-size: 1.1rem;
          margin-top: 3px;
          min-width: 20px;
      }

      .footer-contact span {
          line-height: 1.6;
      }

      /* Footer Bottom */
      .footer-bottom {
          padding: 25px 30px;
          margin-top: 40px;
          background: rgba(0, 0, 0, 0.2);
      }

      .footer-bottom p {
          color: #94a3b8;
          font-size: 0.9rem;
      }

      .footer-bottom .text-danger {
          color: #ef4444 !important;
          animation: heartbeat 1.5s ease-in-out infinite;
      }

      @keyframes heartbeat {

          0%,
          100% {
              transform: scale(1);
          }

          10%,
          30% {
              transform: scale(1.1);
          }

          20%,
          40% {
              transform: scale(1);
          }
      }

      /* Responsive Footer */
      @media (max-width: 992px) {
          .modern-footer {
              padding: 50px 0 0;
              margin-top: 60px;
          }

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

          .footer-top {
              padding-bottom: 30px;
          }
      }

      @media (max-width: 768px) {
          .modern-footer {
              padding: 40px 0 0;
              margin-top: 50px;
          }

          .footer-title {
              font-size: 1rem;
              margin-bottom: 15px;
          }

          .footer-description {
              font-size: 0.9rem;
              margin-bottom: 20px;
          }

          .social-links {
              justify-content: center;
              margin-bottom: 20px;
          }

          .social-link {
              width: 42px;
              height: 42px;
              font-size: 1rem;
          }

          .footer-links,
          .footer-contact {
              text-align: center;
          }

          .footer-links a,
          .footer-contact li {
              justify-content: center;
          }

          .footer-bottom {
              padding: 20px 0;
              margin-top: 30px;
          }

          .footer-bottom p {
              font-size: 0.85rem;
          }
      }

      @media (max-width: 576px) {
          .modern-footer {
              padding: 30px 0 0;
          }

          .social-link {
              width: 40px;
              height: 40px;
              font-size: 0.95rem;
          }

          .footer-links a,
          .footer-contact li {
              font-size: 0.9rem;
          }
      }

      /* ========================================
   BIBLIOTECAS Y RECURSOS DIGITALES
   ======================================== */
      .bibliotecas-section {
          background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
          padding: 120px 80px 160px 80px;
          margin-top: 60px;
      }

      .bibliotecas-header {
          text-align: center;
          margin-bottom: 50px;
      }

      .bibliotecas-title {
          font-size: 2.5rem;
          font-weight: 800;
          color: #1e293b;
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 15px;
      }

      .bibliotecas-title i {
          color: #018339;
          font-size: 2.2rem;
      }

      .bibliotecas-subtitle {
          font-size: 1.1rem;
          color: #64748b;
          font-weight: 400;
          margin: 0;
      }

      .bibliotecas-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 30px;
          max-width: 1100px;
          margin: 0 auto;
      }

      .biblioteca-card {
          position: relative;
          background: white;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          text-decoration: none;
          display: block;
          aspect-ratio: 16 / 9;
      }

      .biblioteca-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 40px rgba(1, 131, 57, 0.2);
      }

      .biblioteca-image-wrapper {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
      }

      .biblioteca-image {
          width: 100%;
          height: 100%;
          object-fit: contain;
          padding: 20px;
          transition: transform 0.4s ease;
      }

      .biblioteca-card:hover .biblioteca-image {
          transform: scale(1.05);
      }

      .biblioteca-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(to top, rgba(1, 131, 57, 0.95) 0%, rgba(1, 131, 57, 0.8) 100%);
          color: white;
          padding: 15px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          transform: translateY(100%);
          transition: transform 0.3s ease;
      }

      .biblioteca-card:hover .biblioteca-overlay {
          transform: translateY(0);
      }

      .biblioteca-name {
          font-size: 1rem;
          font-weight: 700;
          letter-spacing: 0.5px;
      }

      .biblioteca-overlay i {
          font-size: 1.2rem;
          opacity: 0.9;
      }

      /* Responsive para bibliotecas */
      @media (max-width: 1200px) {
          .bibliotecas-grid {
              grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
              gap: 25px;
          }
      }

      @media (max-width: 768px) {
          .bibliotecas-section {
              padding: 40px 0;
              margin-top: 40px;
          }

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

          .bibliotecas-subtitle {
              font-size: 1rem;
          }

          .bibliotecas-grid {
              grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
              gap: 20px;
          }

          .biblioteca-image {
              padding: 15px;
          }

          .biblioteca-name {
              font-size: 0.9rem;
          }
      }

      @media (max-width: 576px) {
          .bibliotecas-grid {
              grid-template-columns: repeat(2, 1fr);
              gap: 15px;
          }

          .biblioteca-card {
              aspect-ratio: 1 / 1;
          }
      }



      /* ========================================
   HORARIOS Y FAQ SECTIONS
   ======================================== */

      .info-sections-container {
          padding-bottom: 80px;
          background: #ffffff;
      }

      .box-section {
          background: white;
          border-radius: 20px;
          padding: 40px;
          height: 100%;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
          border: 1px solid rgba(0, 0, 0, 0.03);
          /*transition: all 0.3s ease;*/
      }

      .box-section:hover {
          box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
          /*transform: translateY(-5px);*/
      }

      .section-header-left {
          margin-bottom: 30px;
          border-bottom: 2px solid #f1f5f9;
          padding-bottom: 20px;
      }

      .section-title {
          font-size: 1.8rem;
          font-weight: 800;
          color: #1e293b;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          gap: 12px;
      }

      .section-title i {
          color: #018339;
          font-size: 1.6rem;
      }

      .section-subtitle {
          font-size: 1rem;
          color: #64748b;
          margin: 0;
      }

      /* Horarios Styles */
      .horarios-card {
          display: flex;
          flex-direction: column;
          gap: 20px;
      }

      .horario-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px;
          background: #f8fafc;
          border-radius: 12px;
          transition: all 0.3s ease;
      }

      .horario-item:hover {
          background: #f1f5f9;
          transform: translateX(5px);
      }

      .horario-item.current-day {
          background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
          border: 1px solid #bbf7d0;
      }

      .day-info {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .day-name {
          font-weight: 700;
          color: #1e293b;
          font-size: 1.1rem;
      }

      .status-badge {
          display: inline-flex;
          align-items: center;
          padding: 4px 10px;
          border-radius: 50px;
          font-size: 0.75rem;
          font-weight: 700;
          text-transform: uppercase;
      }

      .status-badge.open {
          background: #dcfce7;
          color: #166534;
      }

      .status-badge.partial {
          background: #fff7ed;
          color: #9a3412;
      }

      .time-info {
          font-weight: 700;
          color: #334155;
          font-size: 1.2rem;
          background: white;
          padding: 8px 16px;
          border-radius: 8px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      }

      .horario-note {
          display: flex;
          gap: 12px;
          background: #fff1f2;
          padding: 15px;
          border-radius: 12px;
          border: 1px solid #ffe4e6;
          color: #9f1239;
      }

      .horario-note i {
          font-size: 1.2rem;
          margin-top: 2px;
      }

      .horario-note p {
          margin: 0;
          font-size: 0.95rem;
          line-height: 1.5;
      }

      /* FAQ Styles (Accordion) */
      .custom-accordion .accordion-item {
          border: none;
          background: transparent;
          margin-bottom: 15px;
          border-radius: 12px;
          overflow: hidden;
      }

      .custom-accordion .accordion-header {
          margin: 0;
      }

      .custom-accordion .accordion-button {
          background: #f8fafc;
          color: #334155;
          font-weight: 600;
          padding: 18px 25px;
          border-radius: 12px;
          box-shadow: none;
          transition: all 0.3s ease;
          border: 1px solid transparent;
      }

      .custom-accordion .accordion-button:not(.collapsed) {
          background: #f0fdf4;
          color: #018339;
          box-shadow: 0 4px 15px rgba(1, 131, 57, 0.05);
          border-color: #dcfce7;
      }

      .custom-accordion .accordion-button:focus {
          box-shadow: none;
          border-color: #018339;
      }

      .custom-accordion .accordion-button::after {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
          transition: transform 0.3s ease;
      }

      .custom-accordion .accordion-button:not(.collapsed)::after {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23018339'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      }

      .custom-accordion .accordion-body {
          padding: 20px 25px;
          background: white;
          color: #64748b;
          line-height: 1.6;
          border-top: none;
          font-size: 0.95rem;
      }

      @media (max-width: 768px) {
          .box-section {
              padding: 25px;
          }

          .section-title {
              font-size: 1.5rem;
          }

          .horario-item {
              flex-direction: column;
              align-items: flex-start;
              gap: 10px;
          }

          .time-info {
              width: 100%;
              text-align: center;
          }
      }

      /* ========================================
   MODERN UX/UI ENHANCEMENTS
   ======================================== */

      /* 1. Glassmorphism Stats Bar */
      .stats-bar-section {
          margin-top: -50px;
          position: relative;
          z-index: 10;
          padding-bottom: 40px;
      }

      .stats-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
          gap: 20px;
          max-width: 1400px;
          margin: 0 auto;
      }

      .stat-card-glass {
          background: rgba(255, 255, 255, 0.85);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border: 1px solid rgba(255, 255, 255, 0.4);
          border-radius: 24px;
          padding: 25px;
          display: flex;
          align-items: center;
          gap: 20px;
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      .stat-card-glass:hover {
          transform: translateY(-10px);
          background: rgba(255, 255, 255, 0.95);
          box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
      }

      .stat-icon-wrapper {
          width: 60px;
          height: 60px;
          border-radius: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
          color: white;
      }

      .stat-icon-wrapper.books {
          background: linear-gradient(135deg, #018339, #02b64f);
      }

      .stat-icon-wrapper.users {
          background: linear-gradient(135deg, #0B2FE6, #4865f3);
      }

      .stat-icon-wrapper.loans {
          background: linear-gradient(135deg, #f39c12, #f1c40f);
      }

      .stat-icon-wrapper.stars {
          background: linear-gradient(135deg, #e74c3c, #fb5c4c);
      }

      .stat-info {
          display: flex;
          flex-direction: column;
      }

      .stat-value {
          font-size: 1.8rem;
          font-weight: 800;
          color: #1a1a1a;
          line-height: 1;
      }

      .stat-label-text {
          font-size: 0.85rem;
          color: #666;
          font-weight: 500;
          margin-top: 5px;
      }

      /* 2. Visual Categories Grid */
      .categories-section {
          padding: 80px 0;
          background: #fcfcfc;
      }

      .section-header-centered {
          text-align: center;
          margin-bottom: 50px;
      }

      .section-tag {
          display: inline-block;
          padding: 6px 16px;
          background: rgba(1, 131, 57, 0.1);
          color: #018339;
          font-weight: 700;
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 2px;
          border-radius: 50px;
          margin-bottom: 15px;
      }

      .category-grid-visual {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 25px;
          max-width: 1400px;
          margin: 0 auto;
      }

      .category-card-visual {
          background: white;
          border-radius: 20px;
          padding: 35px 25px;
          text-align: center;
          border: 1px solid #eee;
          transition: all 0.4s ease;
          cursor: pointer;
          text-decoration: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          overflow: hidden;
      }

      .category-card-visual::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 4px;
          background: var(--category-color, #018339);
          transform: scaleX(0);
          transition: transform 0.4s ease;
      }

      .category-card-visual:hover {
          transform: translateY(-8px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
          border-color: transparent;
      }

      .category-card-visual:hover::after {
          transform: scaleX(1);
      }

      .category-card-visual.active {
          background: var(--category-color, #018339);
          border-color: transparent;
      }

      .category-card-visual.active i,
      .category-card-visual.active .cat-name,
      .category-card-visual.active .cat-count {
          color: white !important;
      }

      .category-icon-bg {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          background: #f8f9fa;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
          font-size: 1.8rem;
          color: var(--category-color, #018339);
          transition: all 0.4s ease;
      }

      .category-card-visual:hover .category-icon-bg {
          background: var(--category-color, #018339);
          color: white;
          transform: rotate(360deg);
      }

      .cat-name {
          font-weight: 700;
          font-size: 1.1rem;
          color: #333;
          margin-bottom: 5px;
      }

      .cat-count {
          font-size: 0.85rem;
          color: #888;
      }

      /* 3. New Arrivals Swiper */
      .new-arrivals-section {
          padding: 80px 0;
          background: white;
      }

      .arrivals-swiper {
          padding: 40px 10px !important;
      }

      .new-badge-animated {
          position: absolute;
          top: 15px;
          right: 15px;
          background: #e74c3c;
          color: white;
          padding: 5px 12px;
          border-radius: 50px;
          font-size: 0.7rem;
          font-weight: 800;
          z-index: 5;
          animation: pulseRed 2s infinite;
      }

      @keyframes pulseRed {
          0% {
              box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
          }

          70% {
              box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
          }

          100% {
              box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
          }
      }

      /* 4. Micro-interactions & Special Effects */

      /* Availability Pulse Green */
      .pulse-green {
          width: 8px;
          height: 8px;
          background: #018339;
          border-radius: 50%;
          display: inline-block;
          margin-right: 8px;
          box-shadow: 0 0 0 rgba(1, 131, 57, 0.4);
          animation: pulseGreen 2s infinite;
      }

      @keyframes pulseGreen {
          0% {
              transform: scale(0.95);
              box-shadow: 0 0 0 0 rgba(1, 131, 57, 0.7);
          }

          70% {
              transform: scale(1);
              box-shadow: 0 0 0 6px rgba(1, 131, 57, 0);
          }

          100% {
              transform: scale(0.95);
              box-shadow: 0 0 0 0 rgba(1, 131, 57, 0);
          }
      }

      /* Skeleton Loading */
      .skeleton-loading .material-card {
          pointer-events: none;
      }

      .shimmer {
          background: #f6f7f8;
          background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
          background-repeat: no-repeat;
          background-size: 800px 100%;
          display: inline-block;
          position: relative;
          animation: shimmer 1.5s infinite linear;
      }

      @keyframes shimmer {
          0% {
              background-position: -468px 0;
          }

          100% {
              background-position: 468px 0;
          }
      }

      .skeleton-img {
          width: 100%;
          height: 350px;
          border-radius: 12px;
      }

      .skeleton-text {
          width: 80%;
          height: 20px;
          margin-top: 15px;
          border-radius: 4px;
      }

      .skeleton-text-sm {
          width: 50%;
          height: 15px;
          margin-top: 10px;
          border-radius: 4px;
      }




      /* ========================================
   SIMPLE FOOTER WITH SOCIAL MEDIA
   ======================================== */
      .simple-footer {
          background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
          border-top: 3px solid transparent;
          border-image: linear-gradient(90deg, #018339 0%, #0B2FE6 100%);
          border-image-slice: 1;
          padding: 0 90px;
      }

      .simple-footer p {
          color: #e2e8f0;
          font-size: 0.95rem;
      }

      /* Social Media Links */
      .social-links {
          display: flex;
          gap: 12px;
          justify-content: flex-end;
          flex-wrap: wrap;
      }

      .social-link {
          width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: white;
          font-size: 0.78rem;
          background: #018339;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          position: relative;
          overflow: hidden;
          text-decoration: none;
          box-shadow: 0 4px 15px rgba(1, 131, 57, 0.3);
      }

      .social-link::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, #0B2FE6 0%, #018339 100%);
          border-radius: 50%;
          opacity: 0;
          transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      .social-link:hover::before {
          opacity: 1;
      }

      .social-link:hover {
          transform: translateY(-5px) scale(1.1);
          box-shadow: 0 8px 25px rgba(11, 47, 230, 0.5);
      }

      .social-link i {
          position: relative;
          z-index: 1;
      }