/* ============================================================
   SECCIÓN NUEVA — header oscuro, al estilo del de sceu.frba.utn.edu.ar/cursos
   Barra granate muy oscura, logo en blanco, "Explorar" a la izquierda y
   tres acciones a la derecha: link plano · píldora con borde · píldora blanca.
   Se carga después de site.css para pisar el header claro.
   ============================================================ */
:root { --hdr-alto: 64px }

.hdr {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(90deg, #1d0f13 0%, #2a141b 52%, #3d1823 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: none;
}
/* el mismo brillo tenue que tiene el original hacia la derecha */
.hdr::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 200% at 82% 50%, rgba(163, 18, 53, .38), transparent 70%);
}
.hdr .in {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1.6rem;
  min-height: var(--hdr-alto); padding: 0;
}

/* --- logo: el archivo es artwork oscuro, se pasa a blanco --- */
.hdr .hdr-logo { display: flex; align-items: center; flex: none }
.hdr .hdr-logo img {
  height: 34px; width: auto; display: block;
  filter: brightness(0) invert(1);
}

/* el ::after con '▾' de site.css queda como un puntito suelto */
.hdr .drop > a::after { content: none }

/* --- links planos --- */
.hdr .hdr-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #fff; font-size: .92rem; font-weight: 500;
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  transition: color .18s;
}
.hdr .hdr-link:hover { color: rgba(255, 255, 255, .72) }
.hdr .hdr-link .chev {
  width: 11px; height: 11px; flex: none;
  transition: transform .2s;
}
.hdr .drop:hover .chev, .hdr .drop:focus-within .chev,
.hdr .drop.abierto .chev { transform: rotate(180deg) }

/* --- acciones de la derecha --- */
.hdr .hdr-acciones {
  margin-left: auto; display: none; align-items: center; gap: .8rem;
}
@media (min-width: 940px) { .hdr .hdr-acciones { display: flex } }

.hdr .btn-linea {
  border: 1px solid rgba(255, 255, 255, .32); color: #fff;
  background: none; border-radius: 999px; padding: .55rem 1.1rem;
  font-size: .89rem; font-weight: 500;
}
.hdr .btn-linea:hover { border-color: #fff; background: rgba(255, 255, 255, .08) }

.hdr .btn-blanco {
  background: #fff; color: var(--bordo); border: 0;
  border-radius: 999px; padding: .58rem 1.25rem;
  font-size: .89rem; font-weight: 700;
}
.hdr .btn-blanco:hover { background: #FFE9EE; color: var(--bordo-800) }

/* --- desplegable de idiomas: se mantiene claro para que se lea --- */
.hdr .drop { position: relative; flex: none }
.hdr .menu {
  position: absolute; top: calc(100% + .55rem); left: 0; transform: translateY(-6px);
  background: #fff; border: 1px solid var(--linea); border-radius: 14px;
  padding: .5rem; min-width: 250px; box-shadow: 0 22px 50px -18px rgba(20, 16, 17, .55);
  opacity: 0; visibility: hidden; transition: .18s; display: grid; gap: 2px; z-index: 5;
}
/* `.abierto` la pone assets/header.js: en pantallas táctiles no hay hover
   y el menú quedaba inalcanzable. */
.hdr .drop:hover .menu, .hdr .drop:focus-within .menu, .hdr .drop.abierto .menu {
  opacity: 1; visibility: visible; transform: none;
}
.hdr .menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 9px; font-size: .89rem; color: var(--tinta);
}
.hdr .menu a:hover { background: var(--bordo-050); color: var(--bordo) }
.hdr .menu img {
  width: 22px; height: 16px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(20, 16, 17, .12); filter: none;
}

/* --- mobile: sólo logo y el CTA --- */
@media (max-width: 939px) {
  .hdr .in { gap: .9rem }
  .hdr .drop { margin-left: auto }
  /* anclado a la izquierda, el desplegable de 250 px se salía de pantalla y
     hacía desbordar la página aun estando oculto */
  .hdr .menu {
    left: auto; right: 0;
    min-width: 0; width: min(250px, calc(100vw - 2rem));
  }
  .hdr .cta-mobile {
    display: inline-flex; background: #fff; color: var(--bordo);
    border-radius: 999px; padding: .52rem 1rem; font-size: .85rem; font-weight: 700;
  }
}
@media (min-width: 940px) { .hdr .cta-mobile { display: none } }
@media (max-width: 520px) {
  .hdr .hdr-logo img { height: 28px }
  .hdr .hdr-link { font-size: .86rem }
  .hdr .cta-mobile { padding: .48rem .85rem; font-size: .8rem }
}