@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
  font-family: 'Futura';
  src: url('./Futura.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}


    /* Color palette (user provided) */
    :root{
      --c1: #ffc325;
      --c2: #f58832;
      --c3: #ed225f;
      --c4: #9c3082;
      --c5: #0080c5;
      --c6: #039c4a;
      --c7: #0b0933; /* azul oscuro para textos */
      --white: #ffffff;
      --muted: #6c6c73;
      --max-width: 1200px;
    }

    /* Base */
    html,body{
      height:100%;
      background: var(--white);
      color: var(--c7);
      font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      margin:0;
      padding:0;
    }

    /* Headings: try to use Futura Extra Bold if available, otherwise heavy Montserrat fallback */
    h1,h2,h3,h4{
      font-family: "Futura", "Montserrat", "Helvetica", Arial;
      font-weight: 700 !important;
      letter-spacing: -0.02em;
      color: var(--c7);
    }

    /* Hero */
    .hero{
      position: relative;
      overflow: hidden;
      padding: 1rem 0;
      background: var(--white);
    }
    .hero .svg-bg{
      position: absolute;
      inset: 0;
      height: 100%;
      width: 100%;
      pointer-events: none;
      z-index: 0;
    }
    .hero .container{
      position: relative;
      z-index: 2;
    }

    .logo-placeholder{
      width: 200px;
      height: 100px;
      display:flex;
      align-items:center;
    
    }

    /* Nav */
    .top-nav{
      padding: 1rem 0;
      background: transparent;
    }

    /* Cards look */
    .card-news{
      border: none;
      border-radius: .85rem;
      box-shadow: 0 10px 30px rgba(11,9,51,0.06);
      overflow: hidden;
    }
    .card-news .card-img-top{
      height: 160px;
      object-fit: cover;
      width:100%;
    }

    .tag{
      display:inline-block;
      font-size:.75rem;
      font-weight:700;
      color:var(--white);
      padding: .25rem .6rem;
      border-radius: 999px;
      text-transform:uppercase;
      letter-spacing:.06em;
    }

    /* Sidebar */
    .aside-card{
      border-radius: .6rem;
      border:1px solid rgba(11,9,51,0.06);
      padding: 1rem;
      background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
    }

    /* Footer */
    footer{
      padding: 2.5rem 0;
      border-top: 1px solid rgba(11,9,51,0.05);
      margin-top: 3rem;
    }

   

   .btn-accent {
  background: linear-gradient(90deg, var(--c5), var(--c4));
  color: white;
  border: none;
  border-radius: 0.4rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 12px rgba(0, 128, 197, 0.25);
}

.btn-accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.5s ease;
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 128, 197, 0.35);
  color: white;
}

.btn-accent:hover::before {
  left: 100%;
}

.btn-accent:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 128, 197, 0.25);
}

/* ==== BOTÓN ACCENT ==== */
.btn-accent {
  background: linear-gradient(90deg, var(--c5), var(--c4));
  color: white;
  border: none;
  border-radius: 0.4rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 12px rgba(0, 128, 197, 0.25);
}

.btn-accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.5s ease;
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 128, 197, 0.35);
  color: white;
}

.btn-accent:hover::before {
  left: 100%;
}

.btn-accent:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 128, 197, 0.25);
}

/* ==== BOTÓN OUTLINE DARK ==== */
.btn-outline-dark {
  border: 2px solid var(--c7) !important;
  color: var(--c7) !important;
  background: transparent !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 0.65rem 1.6rem !important;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  z-index: 1;
}

.btn-outline-dark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--c7);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
  z-index: -1;
}

.btn-outline-dark * {
  position: relative;
  z-index: 2;
}

.btn-outline-dark:hover {
  color: white !important;
  border-color: var(--c7) !important;
  transform: translateY(-2px);
}

.btn-outline-dark:hover::before {
  width: 300%;
  height: 300%;
}

.btn-outline-dark:active {
  transform: translateY(0);
}


    /* ==== NAVBAR HOVER GRADIENT UNDERLINE ==== */
.nav-link {
  position: relative;
  color: var(--c7);
  font-weight: 600;
  transition: color 0.25s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px; /* distancia de la línea respecto al texto */
  left: 0;
  width: 0%;
  height: 3px;
  border-radius: 2px;
  color: #0b0933 !important;
  background: linear-gradient(90deg, var(--c5), var(--c4), var(--c3), var(--c1));
  transition: width 0.35s ease;
  opacity: 0.9;
}

.nav-link:hover {
  color: var(--c7);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active {
  color: var(--c7);
}

.nav-link.active::after {
  width: 100%;
}


/* ==== BOTÓN GRADIENTE (transición suave y moderna) ==== */
.btn-gradient {
  position: relative;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, var(--c5), var(--c4), var(--c3), var(--c1));
  color: white;
  padding: 0.65rem 1.6rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 128, 197, 0.3);
}

/* Efecto de brillo que se mueve */
.btn-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

/* Hover: elevación y brillo */
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 128, 197, 0.4);
  color: white;
}

.btn-gradient:hover::before {
  left: 100%;
}

.btn-gradient:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 128, 197, 0.3);
}




    /* Small helpers */
    .muted { color: var(--muted); }
    .mono-date { font-weight:700; color: var(--c7); font-size:.9rem; }
   .featured {
    width: 200px;
    height: 50px;
    background: linear-gradient(135deg, #ed225f, #9c3082);
    transform: skewX(-20deg);

    margin-bottom: 20px;
   
  }
.featured-content {
    transform: skewX(20deg);
    color: white;

    font-style: italic;
    font-weight: 300;
    text-align: center;
    font-size: 2em;
  }

  .card-trans
  {
    height: 230px !important;
  }

  .logo-uned
  {
    height: 200px;
    padding-bottom: 50px;

  }
/* Ajuste general del footer */
.footer-custom {
  background-color: #0b0933 !important;
  padding: 2.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Logos */
.footer-logo {
  height: 70px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
  .footer-logo {
    height: 45px;
  }
}

/* Redes sociales */
.social-links {
  display: flex;
  gap: 14px;
}

.social-links img {
  width: 28px;
  height: auto;
  filter: brightness(0) invert(1); /* para mantener el estilo blanco */
  transition: transform 0.3s ease;
}

.social-links img:hover {
  transform: scale(1.15);
}

/* CINTILLO SUPERIOR UNED */
.uned-strip {
  background-color: #0b0933;
  padding: 0.4rem 0;
  color: white;
  font-size: 0.9rem;
}

.uned-cintillo-logo {
  height: 35px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.uned-cintillo-text {
  font-size: 0.85rem;
  color: #ffffff;
  opacity: 0.9;
  max-width: 500px;
  line-height: 1.2;
}

/* Responsivo */
@media (max-width: 768px) {
  .uned-cintillo-logo {
    height: 28px;
  }

  .uned-cintillo-text {
    font-size: 0.75rem;
    max-width: 260px;
  }
}