/* =====================================================================
   SKF College — hoja de estilo del rediseño
   Tipografías: SKF Sans / SKF Display desde el CDN oficial fonts.skf.com.
   Los titulares NO dependen de ninguna fuente: van como SVG con los
   trazados ya convertidos dentro del HTML.
   ===================================================================== */

@font-face {
  font-family: "SKF Sans";
  src: url("https://fonts.skf.com/SKFSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SKF Sans";
  src: url("https://fonts.skf.com/SKFSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SKF Sans";
  src: url("https://fonts.skf.com/SKFSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --azul: #0C00FF;
  --azul-osc: #0900C4;
  --negro: #000;
  --gris-txt: #3d3d3d;
  --gris-bg: #f5f5f5;
  --gris-lin: #d8d8d8;
  --pizarra: #2f3a42;
  --wrap: 1580px;
  --pad: clamp(20px, 3.2vw, 60px);
  --sans: "SKF Sans", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans) !important;
  font-size: clamp(16px, 1.05vw, 20px) !important;
  line-height: 1.55 !important;
  color: var(--negro) !important;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  font-family: inherit !important;
}

label {
  width: 100% !important;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* La plataforma define `.wrap {word-break: break-word; hyphens: auto}` en
   default-styles.css y `.wrap` es también el contenedor de este diseño: de ahí
   que los textos salieran con guiones y palabras partidas. `hyphens` y
   `word-break` se heredan, así que basta reponerlos en los contenedores de
   nivel alto para que alcance a todo el contenido. */
.wrap,
.wrap--abt,
.hdr,
.hero,
.banner,
.abt-hero,
.ft {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word;
}

.custom-header {
  margin-top: -12px !important;
}

#contentBody {
  padding: 0 !important;
}

body.evo footer {
  padding: 0 !important;
}

/* Texto sólo para lectores de pantalla / buscadores ------------------- */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--azul);
  color: #fff;
  padding: 12px 20px;
}

.skip:focus {
  left: 0;
}

/* ---------------------------------------------- titulares vectoriales */
.ttl {
  margin: 0;
  font-weight: 400;
}

.t {
  display: block;
  width: 100%;
  height: auto;
}

.t--hero {
  max-width: 1707.3px;
}

.t--hero_mob {
  max-width: 1029.9px;
  display: none;
}

.t--capacitacion {
  max-width: 404.6px;
}

.t--queescollege {
  max-width: 488.7px;
  margin-inline: auto;
}

.t--card1 {
  max-width: 190.9px;
}

.t--card2 {
  max-width: 242.4px;
}

.t--card3 {
  max-width: 274.3px;
}

.t--cursosonline {
  max-width: 343.7px;
}

.t--catalogo {
  /* la maqueta lo da a 377px de ancho sobre lienzo de 2560 */
  max-width: 379.3px;
}

.t--diplomado {
  max-width: 481.2px;
}

.t--cta {
  max-width: 873.0px;
  margin-inline: auto;
}

.t--form {
  max-width: 413.1px;
}

.t--interes {
  max-width: 554.7px;
}

.t--f_college {
  max-width: 274.7px;
}

.t--f_informes {
  max-width: 200.5px;
}

.t--f_acerca {
  max-width: 228.2px;
}

.t--f_factura {
  max-width: 173.2px;
}

.eyebrow {
  margin: 0 0 18px;
  font-size: .95em !important;
  color: var(--gris-txt) !important;
  font-family: var(--sans) !important;
}

/* ------------------------------------------------------------ botones */
.skf-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: var(--azul) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border: 2px solid var(--azul) !important;
  border-radius: 3px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: .95em !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.skf-btn:hover,
.skf-btn:focus-visible {
  background: var(--azul-osc) !important;
  border-color: var(--azul-osc) !important;
  color: #fff !important;
}

.skf-btn .arw {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.skf-btn--ghost {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
  border-radius: 3px !important;
}

.skf-btn--ghost:hover,
.skf-btn--ghost:focus-visible {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--negro) !important;
}

.lnk {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  color: var(--azul) !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: .92em !important;
  text-decoration: none !important;
}

.lnk .arw {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  transition: transform .18s ease;
}

.lnk:hover .arw,
.lnk:focus-visible .arw {
  transform: translateX(4px);
}

.lnk:hover span,
.lnk:focus-visible span {
  text-decoration: underline !important;
}

.lnk--cat {
  margin-top: 50px;
}

/* ---------------------------------------------------------- cabecera */
/* Se mantiene fija y pasa de transparente a fondo sólido al hacer scroll,
   igual que el header original de la plataforma (umbral de 20px).
   Los selectores llevan el prefijo de la plataforma (body.evo #wrapper)
   porque su CSS ataca `header` por etiqueta y gana en especificidad:
   `body.evo #wrapper header` = (0,1,1,2) frente a `.hdr` = (0,0,1,0). */
.hdr,
body.evo #wrapper header.hdr,
body.evo.portal #wrapper header.hdr,
.portal header.hdr {
  /* `display:block` es imprescindible: la plataforma aplica
     `.portal header {display:flex}`, lo que convierte a .hdr__in en flex-item
     y lo encoge a su contenido (se ve todo apelmazado al centro). */
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  /* la plataforma impone min-width:980px, que desborda en móvil */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  z-index: 60 !important;
  /* el blur sólo se activa en el estado "scrolled", por eso también se anima */
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* La plataforma pinta un ::before con blur detrás del header. Lo anulamos
   porque el desenfoque lo aplicamos directamente sobre el <header>. */
.hdr::before,
body.evo #wrapper header.hdr::before {
  display: none !important;
}

/* Estado "scrolled": vidrio esmerilado (translúcido + desenfoque del fondo)
   en lugar de un blanco sólido. */
.hdr.hdr--scrolled,
body.evo #wrapper header.hdr.hdr--scrolled,
body.evo.portal #wrapper header.hdr.hdr--scrolled {
  background: rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  color: var(--negro) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08) !important;
}

/* Sin soporte de backdrop-filter el fondo se opaca para no perder contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  .hdr.hdr--scrolled,
  body.evo #wrapper header.hdr.hdr--scrolled,
  body.evo.portal #wrapper header.hdr.hdr--scrolled {
    background: rgba(255, 255, 255, .96) !important;
  }
}

/* El contenido del portal se desplaza 79px hacia abajo porque el <body> NO
   lleva la clase `transparent_header` (styles.css:
   `.portal:not(.transparent_header).portal_home #contentWrap > :first-child`).
   Como nuestro header es fijo y transparente, ese hueco dejaba ver la franja
   gris del fondo de página. Se limita a portal_home, es decir, sólo a esta
   portada, así que no afecta al resto de páginas del portal. */
.portal.portal_home #contentWrap> :first-child {
  margin-top: 0 !important;
}

/* Colores del contenido en cada estado.
   IMPRESCINDIBLE incluir los descendientes (`*`): la plataforma aplica
   `body.evo #wrapper header :not(.newAlert) {color: var(--main-text-color)}`,
   que pinta CADA hijo del header por separado. Colorear sólo el <a> no basta,
   porque el <span> interior recibe color directo y un valor directo siempre
   gana a la herencia del padre (el SVG lo arrastra vía currentColor). */
.hdr .nav a,
.hdr .hdr__login,
.hdr .nav__burger,
.hdr .nav a *,
.hdr .hdr__login *,
.hdr .nav__burger *,
body.evo #wrapper header.hdr .nav a,
body.evo #wrapper header.hdr .hdr__login,
body.evo #wrapper header.hdr .nav__burger,
body.evo #wrapper header.hdr .nav a *,
body.evo #wrapper header.hdr .hdr__login *,
body.evo #wrapper header.hdr .nav__burger * {
  color: #fff !important;
}

.hdr--scrolled .nav a,
.hdr--scrolled .hdr__login,
.hdr--scrolled .nav__burger,
.hdr--scrolled .nav a *,
.hdr--scrolled .hdr__login *,
.hdr--scrolled .nav__burger *,
body.evo #wrapper header.hdr.hdr--scrolled .nav a,
body.evo #wrapper header.hdr.hdr--scrolled .hdr__login,
body.evo #wrapper header.hdr.hdr--scrolled .nav__burger,
body.evo #wrapper header.hdr.hdr--scrolled .nav a *,
body.evo #wrapper header.hdr.hdr--scrolled .hdr__login *,
body.evo #wrapper header.hdr.hdr--scrolled .nav__burger * {
  color: var(--negro) !important;
}

/* El logo es un PNG negro: se invierte a blanco sobre la foto y
   vuelve a su color original cuando el fondo ya es blanco. */
.hdr--scrolled .hdr__logo img {
  filter: none !important;
}

/* `.portal header > * {display:flex}` (styles.css, min-width:980px) machaca
   este grid, por eso va con !important y con el prefijo de la plataforma. */
.hdr__in,
.portal header.hdr>.hdr__in,
body.evo #wrapper header.hdr>.hdr__in {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
  /* max-width: var(--wrap) !important; */
  margin-inline: auto !important;
  padding: 26px var(--pad) !important;
  gap: 20px;
  box-sizing: border-box;
  transition: padding .25s ease;
}

/* Al hacer scroll la barra se compacta */
.hdr--scrolled .hdr__in,
.portal header.hdr.hdr--scrolled>.hdr__in,
body.evo #wrapper header.hdr.hdr--scrolled>.hdr__in {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.hdr__logo {
  justify-self: center;
}

.hdr__logo img {
  width: 160px;
  filter: brightness(0) invert(1);
  transition: filter .25s ease;
}

.hdr__login {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  font-family: var(--sans) !important;
  font-size: .9em !important;
  color: #fff !important;
}

.hdr__login svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.hdr__login:hover span,
.hdr__login:focus-visible span {
  text-decoration: underline !important;
}

.nav ul {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none !important;
  font-family: var(--sans) !important;
  font-size: .9em !important;
  color: #fff !important;
}

.nav a:hover,
.nav a:focus-visible {
  text-decoration: underline !important;
}

.nav__toggle,
.nav__burger {
  display: none;
}

/* `default-styles.css` de la plataforma pinta una casilla falsa de 16px con
   `input[type="checkbox"] + label:before`, y el burger es justo un <label>
   pegado al checkbox del menú: de ahí el recuadro blanco. Aquí sobra, las
   tres barras ya son el icono. */
.nav__burger::before,
.nav__burger::after,
body.evo #wrapper header.hdr .nav__burger::before,
body.evo #wrapper header.hdr .nav__burger::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* ------------------------------------------------- fondo de secciones */
/* Cada sección pinta su propio fondo, en vez de forzarlo desde `#contentWrap`
   o `body.evo footer`: esas reglas son de nivel superior y acababan pintando
   zonas de la plataforma que no debían tocarse. */

/* Secciones sobre blanco (home, about y catálogo) */
.cap,
.que,
.acred,
.cta,
.form,
.ft,
.abt-sec,
.cat-hero {
  background-color: #fff !important;
}

/* Secciones grises de la maqueta: se blindan para que ni la plataforma ni
   nada de arriba las ponga en blanco. */
.cursos,
.abt-hero {
  background-color: var(--gris-bg) !important;
}

/* La variante clara del catálogo tiene que ganar a `.cursos`: por eso lleva
   las dos clases (0,2,0), que supera a la regla gris (0,1,0). */
.cursos.cursos--claro {
  background-color: #fff !important;
}

/* Las dos secciones con foto llevan un fondo oscuro de reserva: si una imagen
   del CDN no cargara, el texto blanco seguiría legible en vez de quedar sobre
   el color que ponga la plataforma. */
.hero,
.banner {
  background-color: var(--pizarra) !important;
}

/* -------------------------------------------------------------- hero */
.hero {
  position: relative;
  color: #fff;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* background:
    linear-gradient(100deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .18) 78%),
    linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .1) 42%, transparent 62%); */
}

/* Primera pantalla completa. `dvh` va después de `vh` como mejora
   progresiva: en móvil evita el salto al ocultarse la barra del navegador
   (los navegadores que no lo soportan se quedan con vh). */
.hero__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(150px, 15vw, 230px) var(--pad) clamp(50px, 5vw, 80px);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.hero__ttl {
  margin: 0 0 auto;
}

.hero__aside {
  margin-left: auto;
  max-width: 430px;
  text-align: left;
}

.hero__aside p {
  margin: 0 0 26px;
  font-size: .95em !important;
  color: #fff !important;
  font-family: var(--sans) !important;
}

/* ------------------------------------------------------ capacitación */
.cap {
  padding: clamp(70px, 8vw, 150px) 0;
}

.cap__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}

.cap__txt {
  max-width: 620px;
  margin-left: auto;
}

.cap__txt .ttl {
  margin-bottom: 34px;
}

.cap__txt p {
  margin: 0 0 34px;
  color: var(--negro) !important;
  font-family: var(--sans) !important;
  font-size: 1em !important;
}

.cap__img img {
  width: 100%;
  max-width: 675px;
}

/* --------------------------------------------------- qué es college */
.que {
  padding: 0 0 clamp(70px, 8vw, 140px);
  text-align: center;
}

.que>.wrap>.ttl {
  margin-bottom: clamp(50px, 6vw, 100px);
}

.que__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 4vw, 70px);
  text-align: left;
  max-width: 1600px;
  margin-inline: auto;
}

.que__col {
  display: flex;
  flex-direction: column;
}

.que__col .ttl {
  margin-bottom: 20px;
}

.que__col p {
  margin: 0 0 28px;
  font-size: .92em !important;
  color: var(--negro) !important;
  font-family: var(--sans) !important;
}

.que__col .lnk {
  margin-top: auto;
  align-self: flex-start;
}

/* ----------------------------------------------------- cursos online */
.cursos {
  background: var(--gris-bg);
  padding: clamp(60px, 7vw, 120px) 0 clamp(70px, 8vw, 140px);
}

.cursos>.wrap>.ttl {
  margin-bottom: clamp(40px, 4vw, 70px);
}

.cursos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.6vw, 48px) clamp(20px, 2.4vw, 35px);
}

.curso {
  display: flex;
  flex-direction: column;
  padding: 0px 10px;
}

.curso__media {
  position: relative;
}

.curso__media img {
  width: 100%;
  aspect-ratio: 394 / 203;
  object-fit: cover;
}

.curso__precio {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: var(--azul) !important;
  color: #fff !important;
  padding: 4px 12px 4px 6px !important;
  border-radius: 3px;
  font-family: var(--sans) !important;
  font-size: .72em !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

.ico-precio {
  font-weight: 700 !important;
}

.curso__modalidad {
  margin: 16px 0 10px;
  font-size: .72em !important;
  color: var(--gris-txt) !important;
  font-family: var(--sans) !important;
}

.curso__titulo {
  margin: 0 0 14px;
  font-size: 1.1em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--negro) !important;
  font-family: var(--sans) !important;
}

.curso__desc {
  margin: 0 0 22px;
  font-size: .8em !important;
  color: var(--gris-txt) !important;
  font-family: var(--sans) !important;
}

.curso .lnk {
  margin-top: auto;
}

/* ------------------------------------------------------------ banner */
.banner {
  position: relative;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.banner__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Las 4 fotos van apiladas: sólo la de la diapositiva activa queda visible.
   El zoom lento (Ken Burns) replica el de skf.com/mx/services. */
.banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}

@keyframes bannerKen {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 14, 18, .55) 0%, rgba(10, 14, 18, .15) 55%, rgba(10, 14, 18, .35) 100%);
}

.banner__in {
  padding: clamp(70px, 8vw, 150px) 0 clamp(40px, 4vw, 70px);
}

.banner__slides {
  display: grid;
}

.banner__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}

.banner__box {
  max-width: 640px;
  background: rgba(47, 58, 66, .78);
  padding: clamp(30px, 3vw, 55px);
}

.banner__ttl {
  margin-bottom: 22px;
}

.banner__ttl--txt {
  font-size: clamp(30px, 2.8vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #fff !important;
  font-family: var(--sans) !important;
}

.banner__box p {
  margin: 0 0 30px;
  font-size: .88em !important;
  color: #fff !important;
  font-family: var(--sans) !important;
}

/* `fixed` y no `absolute`: al pulsar una pestaña el navegador enfoca su radio y
   desplaza la página hasta él. En `absolute` sin coordenadas el radio se queda
   al principio de la sección, así que en pantallas donde el banner es más alto
   que el viewport el scroll saltaba por encima del banner. Anclado al viewport
   ya está siempre a la vista y no hay nada que desplazar. */
.banner__radio {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}

/* La plataforma inserta por JS un <label> vacío detrás de cada radio para
   dibujar un control redondo con ::before (default-styles.css:
   `input[type="radio"] + label:before {content:''; border-radius:50%}`).
   Eso pintaba 4 puntos sueltos en la esquina del banner.
   El slider ya tiene sus propias pestañas (.banner__tab), que viven dentro
   de .banner__tabs y NO son hermanas adyacentes del radio: por eso este
   selector sólo alcanza a los labels generados y no a las pestañas. */
.banner .banner__radio+label,
.banner label[for^="bn"]:empty {
  display: none !important;
}

#bn1:checked~.banner__in .banner__slide:nth-child(1),
#bn2:checked~.banner__in .banner__slide:nth-child(2),
#bn3:checked~.banner__in .banner__slide:nth-child(3),
#bn4:checked~.banner__in .banner__slide:nth-child(4) {
  opacity: 1;
  visibility: visible;
}

/* foto de la diapositiva activa */
#bn1:checked~.banner__media .banner__img:nth-child(1),
#bn2:checked~.banner__media .banner__img:nth-child(2),
#bn3:checked~.banner__media .banner__img:nth-child(3),
#bn4:checked~.banner__media .banner__img:nth-child(4) {
  opacity: 1;
  animation: bannerKen 40s ease forwards;
}

.banner__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 60px);
  margin-top: clamp(60px, 8vw, 150px);
}

/* La pista va como box-shadow interior en vez de border-top: un borde no se
   puede animar en anchura parcial, y encima de él corre la barra. */
.banner__tab {
  position: relative;
  border-top: 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45);
  padding-top: 16px;
  text-align: center;
  font-family: var(--sans) !important;
  font-size: .8em !important;
  color: rgba(255, 255, 255, .8) !important;
  cursor: pointer;
  transition: color .2s ease, box-shadow .2s ease;
}

.banner__tab:hover {
  color: #fff !important;
}

.banner__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: #fff;
}

#bn1:checked~.banner__in .banner__tab:nth-child(1),
#bn2:checked~.banner__in .banner__tab:nth-child(2),
#bn3:checked~.banner__in .banner__tab:nth-child(3),
#bn4:checked~.banner__in .banner__tab:nth-child(4) {
  color: #fff !important;
}

/* Sin JS no existe `.banner--auto`: no hay barra ni avance, pero la pestaña
   activa se sigue marcando con esta pista sólida. */
.banner:not(.banner--auto) #bn1:checked~.banner__in .banner__tab:nth-child(1),
.banner:not(.banner--auto) #bn2:checked~.banner__in .banner__tab:nth-child(2),
.banner:not(.banner--auto) #bn3:checked~.banner__in .banner__tab:nth-child(3),
.banner:not(.banner--auto) #bn4:checked~.banner__in .banner__tab:nth-child(4) {
  box-shadow: inset 0 2px 0 #fff;
}

/* 5s por diapositiva, igual que la referencia (border-anim 5s linear forwards).
   La animación NO se asigna por selector :checked: hecho así, a partir de la 2ª
   diapositiva queda pendiente (startTime = null) y la barra no se mueve. El
   script la aplica en línea y fuerza un reflow en cada salto, de modo que
   siempre arranca de cero. La pausa (WCAG 2.2.2) también la pone el script con
   animationPlayState, junto con la del temporizador. */
@keyframes bannerProgress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.banner__radio:focus-visible~.banner__in .banner__tabs {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

/* ---------------------------------------------------- acreditaciones */
.acred {
  padding: clamp(60px, 7vw, 110px) 0;
}

.acred__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px clamp(30px, 4vw, 70px);
}

.acred__item {
  border-top: 1px solid var(--gris-lin);
  padding-top: 18px;
  font-size: .85em !important;
  font-family: var(--sans) !important;
}

.acred__t {
  display: block;
  font-weight: 700 !important;
  color: var(--negro) !important;
}

.acred__s {
  display: block;
  color: var(--gris-txt) !important;
}

/* --------------------------------------------------------------- CTA */
.cta {
  padding: clamp(50px, 6vw, 110px) 0 clamp(40px, 5vw, 90px);
  text-align: center;
}

.cta p {
  max-width: 780px;
  margin: 34px auto 0;
  font-size: .88em !important;
  color: var(--negro) !important;
  font-family: var(--sans) !important;
}

/* --------------------------------------------------------- formulario */
.form {
  padding: clamp(50px, 6vw, 110px) 0 clamp(70px, 8vw, 140px);
}

.form__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 110px);
}

.form__col {
  max-width: 700px;
}

.form__col>.ttl {
  margin-bottom: 34px;
}

.form__f {
  display: flex;
  flex-direction: column;
}

.form__f label {
  font-family: var(--sans) !important;
  font-size: .8em !important;
  color: var(--negro) !important;
  margin-bottom: 8px;
}

.form__f input[type="text"],
.form__f input[type="email"],
.form__f input[type="tel"],
.form__f textarea {
  font-family: var(--sans) !important;
  font-size: .9em !important;
  color: var(--negro) !important;
  border: 1px solid #9b9b9b !important;
  background: #fff !important;
  border-radius: 2px;
  padding: 10px 14px;
  margin-bottom: 24px;
  width: 100%;
}

.form__f textarea {
  resize: vertical;
}

.form__f input:focus-visible,
.form__f textarea:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
}

.form__captcha {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #d3d3d3;
  background: #f9f9f9;
  border-radius: 3px;
  padding: 16px 20px;
  margin-bottom: 26px;
  width: max-content;
  font-family: var(--sans) !important;
  font-size: .8em !important;
  color: var(--negro) !important;
}

.form__captchabox {
  width: 26px;
  height: 26px;
  border: 2px solid #b7b7b7;
  background: #fff;
  border-radius: 2px;
}

.form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 30px;
  font-family: var(--sans) !important;
  font-size: .8em !important;
  color: var(--negro) !important;
}

.form__check input {
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  flex: none;
  accent-color: var(--azul);
}

.form__check a {
  color: var(--azul) !important;
  text-decoration: none !important;
}

.form__check a:hover,
.form__check a:focus-visible {
  text-decoration: underline !important;
}

.form__f .skf-btn {
  align-self: flex-start;
}

/* SIN USO desde que se retiró el formulario. Se conserva, junto con el
   resto de reglas .form__col/.form__f/.form__check de arriba, por si
   hubiera que reponerlo. */
.form__aside {
  border-left: 1px solid var(--negro);
  padding-left: clamp(30px, 5vw, 100px);
  display: flex;
  align-items: center;
}

/* Sin formulario, la caja ocupa la fila entera: el texto se queda a la
   izquierda y el botón se va a la derecha, en vez de apilarse dejando
   medio ancho vacío. Con `flex-wrap` se apilan solos en pantallas
   estrechas, sin necesidad de media query. */
.form__box {
  background: var(--gris-bg);
  padding: clamp(28px, 3.4vw, 60px);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 60px);
}

.form__boxtxt {
  max-width: 820px;
}

.form__boxtxt>.ttl {
  margin-bottom: 20px;
}

.form__box p {
  margin: 0;
  font-size: .85em !important;
  color: var(--negro) !important;
  font-family: var(--sans) !important;
}

.form__box .skf-btn {
  flex: none;
}

/* --------------------------------------------------------------- pie */
.ft {
  padding: clamp(50px, 6vw, 90px) 0 40px;
  border-top: 1px solid var(--negro);
}

.ft__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(30px, 4vw, 70px);
}

.ft__col>.ttl {
  margin-bottom: 26px;
}

.ft__col p {
  margin: 0 0 18px;
  font-size: .72em !important;
  color: var(--gris-txt) !important;
  font-family: var(--sans) !important;
  max-width: 40ch;
}

.ft__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans) !important;
  font-size: .8em !important;
  color: var(--negro) !important;
}

.ft__list li {
  margin-bottom: 14px;
}

.ft__list a {
  text-decoration: none !important;
  color: inherit !important;
}

.ft__list a:hover,
.ft__list a:focus-visible {
  text-decoration: underline !important;
}

.ft__logo {
  margin: clamp(50px, 6vw, 90px) 0 30px;
}

.ft__logo img {
  width: 160px;
}

.ft__legal {
  border-top: 1px solid var(--negro);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 34px;
  align-items: center;
  justify-content: space-between;
}

.ft__legalnav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  font-family: var(--sans) !important;
  font-size: .62em !important;
  color: var(--negro) !important;
}

.ft__legalnav a {
  text-decoration: none !important;
  color: inherit !important;
}

.ft__legalnav a:hover,
.ft__legalnav a:focus-visible {
  text-decoration: underline !important;
}

.ft__social {
  display: flex;
  gap: 22px;
  align-items: center;
}

/* fill fijo en negro: con `currentColor` heredaban el azul de enlace que
   impone el tema de la plataforma (a {color:#1f70c1}) */
.ft__social svg,
body.evo #wrapper .ft__social svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
  fill: #000 !important;
  transition: opacity .18s ease;
}

.ft__social a {
  display: inline-flex;
  line-height: 0;
}

.ft__social a:hover svg,
.ft__social a:focus-visible svg {
  opacity: .6;
}

.ft__copy {
  margin: 26px 0 0;
  font-size: .62em !important;
  color: var(--gris-txt) !important;
  font-family: var(--sans) !important;
}

/* ==================================================================== */
/*  RESPONSIVE                                                          */
/* ==================================================================== */
@media (max-width: 1200px) {
  .cursos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ft__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .nav__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }

  .nav__burger span {
    display: block;
    height: 2px;
    background: currentColor;
  }

  .nav {
    position: absolute;
    inset: 100% 0 auto;
    display: none;
    background: #fff !important;
    border-top: 1px solid var(--gris-lin);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
    padding: 20px var(--pad) 30px;
  }

  .nav ul {
    flex-direction: column;
    gap: 18px;
  }

  .nav__toggle:checked~.nav {
    display: block;
  }

  /* El desplegable es blanco, así que sus enlaces van en negro pase lo que
     pase con el estado del header (arriba el texto de la barra es blanco). */
  .hdr .nav a,
  .hdr .nav a *,
  .hdr--scrolled .nav a,
  .hdr--scrolled .nav a *,
  body.evo #wrapper header.hdr .nav a,
  body.evo #wrapper header.hdr .nav a *,
  body.evo #wrapper header.hdr.hdr--scrolled .nav a,
  body.evo #wrapper header.hdr.hdr--scrolled .nav a * {
    color: var(--negro) !important;
  }

  /* lleva !important porque la regla base también lo lleva */
  .hdr__in,
  .portal header.hdr>.hdr__in,
  body.evo #wrapper header.hdr>.hdr__in {
    grid-template-columns: auto 1fr auto !important;
  }

  .hdr__login span {
    display: none;
  }

  .t--hero {
    display: none;
  }

  .t--hero_mob {
    display: block;
  }

  /* también a pantalla completa en móvil */
  .hero__in {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: clamp(120px, 26vw, 200px);
  }

  .hero__ttl {
    margin-bottom: 50px;
  }

  .hero__aside {
    margin-left: 0;
    max-width: none;
  }

  .cap__in {
    grid-template-columns: 1fr;
  }

  .cap__txt {
    max-width: none;
    margin-left: 0;
    order: 2;
  }

  .cap__img {
    order: 1;
  }

  .cap__img img {
    max-width: none;
  }

  .que__grid {
    grid-template-columns: 1fr;
  }

  .acred__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .banner__tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .banner__box {
    max-width: none;
  }

  .form__in {
    grid-template-columns: 1fr;
  }

  .form__aside {
    border-left: 0;
    border-top: 1px solid var(--negro);
    padding-left: 0;
    padding-top: 50px;
  }
}

@media (max-width: 620px) {
  .cursos__grid {
    grid-template-columns: 1fr;
  }

  .acred__list {
    grid-template-columns: 1fr;
  }

  .ft__grid {
    grid-template-columns: 1fr;
  }

  .ft__legal {
    flex-direction: column;
    align-items: flex-start;
  }

  .form__captcha {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }

  /* Sin zoom ni avance automático: el script sale antes de añadir
     `banner--auto`, así que no llega a crear la animación de la barra.
     La pestaña activa se marca con la pista sólida, no con la barra. */
  .banner__img {
    animation: none !important;
  }
}

/* ====================================================================== */
/*  ABOUT                                                                 */
/*  Comparte hoja con la portada, así que TODO lleva prefijo `abt-` para   */
/*  no chocar con las clases de la home (.hero, .cap, .que, .cursos…).     */
/*  Donde hace falta distinguir la página se usa `:has(.abt-hero)`, que    */
/*  condiciona por presencia del marcado y no por URL.                     */
/* ====================================================================== */

#contentHeader {
  display: none !important;
}

:root {
  /* La maqueta sitúa el contenido entre x=575 y x=1985 de un lienzo de 2560,
     es decir 1410px. Sumando el padding lateral (60px a cada lado) salen
     1530. Con 880 la columna quedaba muy estrecha y todo se veía apretado. */
  --wrap-abt: 1530px;
  /* grises temporales de los huecos de imagen (se van al poner las fotos) */
  --abt-ph: #dcdcdc;
  --abt-ph-alt: #c7c7c7;
}

.wrap--abt {
  max-width: var(--wrap-abt);
}

/* Contenedor de imagen pendiente: mantiene la proporción del hueco */
.abt-ph {
  background: var(--abt-ph);
  display: block;
  width: 100%;
  overflow: hidden;
}

/* Al sustituir el gris por la foto basta con meter un <img> dentro del
   mismo div: rellena el hueco y recorta por el centro sin deformarse. */
.abt-ph>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abt-h2 {
  margin: 0 0 26px;
  font-family: var(--sans) !important;
  font-size: clamp(26px, 2.6vw, 40px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--negro) !important;
}

.abt-h3 {
  margin: 0 0 18px;
  font-family: var(--sans) !important;
  font-size: clamp(19px, 1.5vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--negro) !important;
}

.abt-h4 {
  margin: 0 0 10px;
  font-family: var(--sans) !important;
  font-size: clamp(17px, 1.2vw, 20px) !important;
  font-weight: 700 !important;
  color: var(--negro) !important;
}

.abt p {
  font-family: var(--sans) !important;
  color: var(--negro) !important;
}

.abt-sec {
  padding: clamp(40px, 5vw, 50px) 0;
}

/* -------------------------------------------------------------- hero */
/* El hero se apoya en gris claro y llega hasta el borde superior: la
   cabecera fija flota encima, por eso el padding-top la despeja. */
.abt-hero {
  position: relative;
  display: grid;
  /* 58,6% / 41,4%: el borde de la imagen grande cae donde la maqueta */
  grid-template-columns: 1.415fr 1fr;
  align-items: stretch;
  background: var(--gris-bg);
  padding-top: clamp(70px, 5.4vw, 140px);
  /* la maqueta da 1440px de alto sobre un lienzo de 2560 = 56vw */
  min-height: clamp(420px, 56vw, 1200px);
}

.abt-hero__txt {
  display: flex;
  flex-direction: column;
  padding: clamp(46px, 7vw, 120px) clamp(20px, 3vw, 50px) clamp(28px, 3vw, 48px) var(--pad);
}

/* En la maqueta el titular arranca hacia el 39% del alto del hero, no pegado
   arriba. Con `margin-top:auto` tanto en el antetítulo como en el pie, el
   espacio sobrante se reparte entre ambos: el bloque de texto baja y el pie
   sigue anclado abajo. */
.abt-hero__txt>.eyebrow {
  margin-top: auto;
}

.abt-hero__ttl {
  margin: 0;
  font-family: var(--sans) !important;
  font-size: clamp(30px, 3.2vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  color: var(--negro) !important;
  /* se corta en 3 líneas y deja libre la zona de la imagen superpuesta */
  max-width: 10em;
}

/* El pie queda anclado abajo del bloque de texto, como en la maqueta */
.abt-hero__pie {
  margin: auto 0 0;
  padding-top: 40px;
  font-size: .8em !important;
  color: var(--gris-txt) !important;
}

.abt-hero__media {
  position: relative;
  min-height: clamp(340px, 46vw, 700px);
}

.abt-hero__grande {
  position: absolute;
  inset: 0;
}

/* Imagen menor superpuesta, montada sobre el límite de las dos columnas */
/* Montada a caballo entre el texto y la imagen grande, como en la maqueta.
   Lleva un gris algo más oscuro sólo para que se distinga del hueco grande
   mientras no haya fotos reales. */
.abt-hero__chica {
  background: var(--abt-ph-alt);
  position: absolute;
  left: 42%;
  width: 23.5%;
  top: 33%;
  aspect-ratio: 319 / 328;
}

/* ------------------------------------------------------------- intro */
.abt-intro {
  display: grid;
  /* maqueta: titular 380px y texto 932px -> 1 : 2.45 */
  grid-template-columns: 1fr 2.45fr;
  gap: clamp(28px, 4vw, 97px);
  align-items: start;
}

.abt-intro__txt p {
  margin: 0 0 16px;
  font-size: .82em !important;
  line-height: 1.6 !important;
}

.abt-intro__txt p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------- vídeo + tarjeta */
.abt-medios {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(14px, 1.6vw, 30px);
  align-items: stretch;
}

.abt-medios__video {
  position: relative;
  aspect-ratio: 16 / 9;
  /* sin esto el grid lo estira a la altura de la fila y, al mandar la
     proporción, el ancho se dispara y desborda el contenedor */
  align-self: start;
  min-width: 0;
}

.abt-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(38px, 3.4vw, 52px);
  height: clamp(38px, 3.4vw, 52px);
  color: var(--azul);
}

.abt-play svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------- tarjetas */
.abt-card {
  background: var(--gris-bg);
  padding: clamp(20px, 2vw, 30px);
  display: flex;
  flex-direction: column;
}

.abt-card p {
  margin: 0 0 18px;
  font-size: .74em !important;
  line-height: 1.6 !important;
}

.abt-card .lnk {
  margin-top: auto;
  align-self: flex-start;
}

.abt-card--duda p {
  font-size: .78em !important;
}

.abt-card--duda .skf-btn {
  align-self: flex-start;
  margin-top: 6px;
}

/* -------------------------------------------------------- texto largo */
.abt-texto {
  max-width: 64%;
}

.abt-texto p {
  margin: 0 0 16px;
  font-size: .72em !important;
  line-height: 1.65 !important;
}

/* ------------------------------------------------- filas imagen+ficha */
.abt-split {
  display: grid;
  /* maqueta: ficha 451px e imagen 930px */
  grid-template-columns: 1fr 2.06fr;
  gap: clamp(14px, 1.6vw, 30px);
  align-items: stretch;
}

/* Variante con la imagen a la izquierda (diplomado) */
.abt-split--inv {
  grid-template-columns: 2fr 1fr;
}

/* Proporción fija 16:9 y `align-self:start`. Sin ello el grid la estiraba a
   la altura de la fila (que marca el texto de la ficha) y, al derivarse el
   ancho de esa altura, la imagen se salía del contenedor y además pasaba a
   formato vertical en pantallas grandes. Con la proporción fija el encuadre
   es siempre el mismo y se puede pedir la foto a medida. */
.abt-split__img {
  min-width: 0;
  aspect-ratio: 16 / 9;
  align-self: start;
}

/* ---------------------------------------------------------------- FAQ */
.abt-faq__ttl {
  margin-bottom: clamp(34px, 4vw, 60px);
}

.abt-faq__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.abt-faq__col p {
  font-size: .74em !important;
  line-height: 1.65 !important;
}

.abt-faq__destacado {
  margin: 0 0 14px;
  font-weight: 700 !important;
}

.abt-acc {
  margin-top: clamp(40px, 5vw, 80px);
}

.abt-acc__item {
  border-bottom: 1px solid var(--gris-lin);
}

.abt-acc__item>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans) !important;
  font-size: .74em !important;
  color: var(--azul) !important;
}

/* quita el triángulo nativo */
.abt-acc__item>summary::-webkit-details-marker {
  display: none;
}

.abt-acc__item>summary::marker {
  content: '';
}

/* +/− dibujado con el pseudo-elemento, sin iconos externos */
.abt-acc__item>summary::after {
  content: '+';
  flex: none;
  font-size: 1.5em;
  line-height: 1;
  color: var(--azul);
}

.abt-acc__item[open]>summary::after {
  content: '\2212';
}

.abt-acc__cuerpo {
  padding: 0 0 18px;
}

.abt-acc__cuerpo p {
  margin: 0;
}

/* ====== cabecera sobre los heros claros (About y Catálogo) ============ */
/* La portada tiene el hero oscuro y la cabecera va en blanco; en estas dos
   vistas el fondo es claro, así que su contenido debe ir en oscuro. Se
   necesita el `#wrapper` para superar a `body.evo #wrapper header.hdr`,
   que aporta un id y ganaría por especificidad.
   `:has()` admite lista de selectores, así que las dos vistas comparten
   regla en lugar de duplicarla. */
body:has(.abt-hero, .cat-hero, .cur-hero) #wrapper header.hdr:not(.hdr--scrolled),
body:has(.abt-hero, .cat-hero, .cur-hero) #wrapper header.hdr:not(.hdr--scrolled) .nav a,
body:has(.abt-hero, .cat-hero, .cur-hero) #wrapper header.hdr:not(.hdr--scrolled) .hdr__login,
body:has(.abt-hero, .cat-hero, .cur-hero) #wrapper header.hdr:not(.hdr--scrolled) .hdr__login *,
body:has(.abt-hero, .cat-hero, .cur-hero) #wrapper header.hdr:not(.hdr--scrolled) .nav__burger,
body:has(.abt-hero, .cat-hero, .cur-hero) #wrapper header.hdr:not(.hdr--scrolled) .nav__burger * {
  color: var(--negro) !important;
}

/* El botón de menú es un <label>, así que le llegaba el
   `label {width:100% !important}` de más arriba. Dentro de una columna
   `auto` del grid ese 100% se resuelve como 0 y el icono desaparecía.
   Afecta a las dos páginas, no sólo a About. */
.hdr .nav__burger {
  width: 40px !important;
  flex: none;
}

.hdr .nav__burger span {
  width: 100%;
}

body:has(.abt-hero, .cat-hero, .cur-hero) #wrapper header.hdr:not(.hdr--scrolled) .hdr__logo img {
  filter: none !important;
}

/* El portal desplaza el contenido hacia abajo; el hero debe llegar al tope */
body:has(.abt-hero) #contentWrap>:first-child {
  margin-top: 0 !important;
}

/* ==================================================================== */
/*  ABOUT — RESPONSIVE                                                  */
/* ==================================================================== */
@media (max-width: 900px) {
  .abt-hero {
    grid-template-columns: 1fr;
  }

  .abt-hero__txt {
    max-width: none;
    margin-left: 0;
    padding-inline: var(--pad);
  }

  .abt-hero__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  /* En columna pasa a flujo normal: en absoluto se salía del hero e
     invadía la sección siguiente. El margen negativo mantiene el solape. */
  .abt-hero__chica {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 55%;
    margin: -18% 0 0 var(--pad);
  }

  .abt-hero__pie {
    padding-top: 26px;
  }

  .abt-intro,
  .abt-medios,
  .abt-split,
  .abt-split--inv,
  .abt-faq__grid {
    grid-template-columns: 1fr;
  }

  /* en columna, la ficha va siempre debajo de su imagen */
  .abt-split .abt-card {
    order: 2;
  }

  .abt-split__img {
    order: 1;
  }

  .abt-texto {
    max-width: none;
  }

  .abt-medios__video {
    align-self: stretch;
  }
}

/* ====================================================================== */
/*  CATÁLOGO                                                              */
/*  Comparte hoja con la portada y el About, así que lo propio de esta     */
/*  vista lleva prefijo `cat-`. La rejilla de cursos NO se duplica: se     */
/*  reutiliza `.cursos` de la portada con el modificador `.cursos--claro`. */
/* ====================================================================== */

/* El hero es blanco y la cabecera va fija por encima: este padding la
   despeja, igual que hace `.abt-hero` en el About. */
.cat-hero {
  background: #fff;
  padding-top: clamp(110px, 11vw, 190px);
}

/* La línea divisoria de la maqueta, a todo el ancho del contenedor */
.cat-hero>.wrap {
  padding-bottom: clamp(34px, 4vw, 60px);
  border-bottom: 1px solid var(--gris-lin);
}

/* La maqueta sangra el bloque 95px respecto al borde del contenedor y da
   580px al párrafo. El límite de ancho va en el párrafo y no en la columna,
   para que las pestañas dispongan de todo el espacio: con el límite en la
   columna se partían en dos líneas. */
.cat-hero__txt {
  margin-left: clamp(0px, 3.7vw, 95px);
}

.cat-hero__txt p {
  max-width: 580px;
}

.cat-hero__txt>.ttl {
  margin-bottom: 26px;
}

.cat-hero__txt p {
  margin: 0 0 34px;
  font-size: .82em !important;
  line-height: 1.6 !important;
  color: var(--negro) !important;
  font-family: var(--sans) !important;
}

.wrap-footer {
  width: 100%;
  padding: 20px;
}

/* --------------------------------------------- pestañas de categoría */
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

/* Mismo lenguaje que `.skf-btn`, en variante contorno. Lleva !important
   por el mismo motivo que los botones: el CSS del portal pisa color,
   tipografía y fondo de cualquier <button>. */
.cat-tab {
  display: inline-flex !important;
  align-items: center;
  background: #fff !important;
  color: var(--azul) !important;
  padding: 10px 20px !important;
  border: 2px solid var(--azul) !important;
  border-radius: 3px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: .95em !important;
  line-height: 1.3 !important;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.cat-tab:hover,
.cat-tab:focus-visible {
  background: var(--azul) !important;
  color: #fff !important;
}

.cat-tab.is-activa {
  background: var(--azul) !important;
  color: #fff !important;
}

/* ------------------------------------------------ rejilla de cursos */
/* La portada pinta `.cursos` sobre gris; aquí la maqueta la quiere en
   blanco. Modificador, para no tocar la home. */
.cursos--claro {
  background: #fff;
}

@media (max-width: 900px) {
  .cat-hero {
    padding-top: clamp(90px, 22vw, 150px);
  }

  .cat-hero__txt {
    max-width: none;
  }
}

/* =====================================================================
   DETALLE DE CURSO  (curso.html)
   ===================================================================== */

/* ------------------------------------------------- cabecera del curso */
.cur-hero {
  background-color: #fff !important;
  padding-top: clamp(110px, 11vw, 190px);
}

.cur-hero>.wrap {
  padding-bottom: clamp(30px, 3.5vw, 52px);
  border-bottom: 1px solid var(--gris-lin);
}

.cur-hero__ttl {
  margin: 0 0 clamp(24px, 2.6vw, 40px);
  max-width: 30ch;
  font-family: var(--sans) !important;
  font-size: clamp(30px, 3.2vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  color: var(--negro) !important;
}

/* Ficha de datos.
   Se estila por CLASE y no por etiqueta (`dt`/`dd`): el editor del LMS
   sustituye esos elementos por <div> al guardar y los selectores por
   etiqueta dejaban de coincidir. Se dejan `dt`/`dd` como respaldo por si
   el marcado sobrevive intacto en otro contexto. */
.cur-datos {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(22px, 3vw, 54px) !important;
  margin: 0 0 clamp(26px, 3vw, 42px) !important;
  padding: 0 !important;
}

.cur-dato {
  margin: 0 !important;
  padding: 0 !important;
}

.cur-dato__k,
.cur-dato dt {
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-family: var(--sans) !important;
  font-size: .68em !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris-txt) !important;
}

.cur-dato__v,
.cur-dato dd {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--sans) !important;
  font-size: .92em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--negro) !important;
}

/* --------------------------------------------------------- pestañas */
.cur-sec {
  background-color: #fff !important;
  padding: clamp(34px, 4vw, 56px) 0 clamp(50px, 6vw, 90px);
}

/* Los radios sólo son el interruptor: nunca deben verse.
   Van con !important porque `default-styles.css` de la plataforma ataca
   `input[type="radio"]` (0,1,1), que gana a `.cur-radio` (0,1,0). */
.cur-radio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* La plataforma dibuja un radio falso con `input[type="radio"] + label:before`
   (un círculo de 16px). Aquí sobra: la pestaña ya es el indicador. */
.cur-radio+label::before,
.cur-radio+.cur-tabs label::before {
  display: none !important;
  content: none !important;
}

.cur-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(30px, 3.5vw, 50px);
}

/* Reaprovecha el aspecto de `.cat-tab`; sólo cambia que aquí es un
   <label> de un radio y no un <button>, para funcionar sin JavaScript. */
.cur-tab {
  cursor: pointer;
  width: auto !important;
  /* la plataforma fuerza `label {width:100%}` */
}

.cur-paneles {
  display: grid;
}

.cur-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#ct1:checked~.cur-paneles .cur-panel:nth-child(1),
#ct2:checked~.cur-paneles .cur-panel:nth-child(2),
#ct3:checked~.cur-paneles .cur-panel:nth-child(3),
#ct4:checked~.cur-paneles .cur-panel:nth-child(4) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#ct1:checked~.cur-tabs .cur-tab:nth-child(1),
#ct2:checked~.cur-tabs .cur-tab:nth-child(2),
#ct3:checked~.cur-tabs .cur-tab:nth-child(3),
#ct4:checked~.cur-tabs .cur-tab:nth-child(4) {
  background: var(--azul) !important;
  color: #fff !important;
}

.cur-radio:focus-visible~.cur-tabs {
  outline: 2px solid var(--azul);
  outline-offset: 6px;
}

/* --------------------------------------------------- cuerpo del panel */
.cur-bloque {
  margin-bottom: clamp(30px, 3.4vw, 50px);
  max-width: 80ch;
}

.cur-bloque:last-child {
  margin-bottom: 0;
}

.cur-bloque p {
  margin: 0 0 14px;
  font-size: .8em !important;
  line-height: 1.65 !important;
  color: var(--negro) !important;
  font-family: var(--sans) !important;
}

.cur-lista {
  margin: 0 0 18px;
  padding-left: 1.1em;
  list-style: disc;
}

.cur-lista li {
  margin-bottom: 8px;
  font-size: .8em !important;
  line-height: 1.65 !important;
  color: var(--negro) !important;
}

.cur-nota {
  color: var(--gris-txt) !important;
}

.cur-nota a {
  color: var(--azul) !important;
  text-decoration: none !important;
}

.cur-nota a:hover,
.cur-nota a:focus-visible {
  text-decoration: underline !important;
}

/* El temario encadena varios h4 con su lista: se aprieta el espaciado */
.cur-bloque .abt-h4 {
  margin-top: 26px;
}

.cur-bloque .abt-h3+.abt-h4 {
  margin-top: 0;
}

/* ------------------------------------------------ lecciones / módulos */
.cur-lecciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.cur-leccion img {
  width: 100%;
  aspect-ratio: 394 / 203;
  object-fit: cover;
  margin-bottom: 14px;
}

.cur-leccion__ttl {
  margin: 0 0 6px !important;
  font-size: .84em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.cur-leccion__desc {
  margin: 0 !important;
  font-size: .74em !important;
  color: var(--gris-txt) !important;
}

/* Las rejillas de lecciones no deben heredar el ancho de lectura */
.cur-bloque:has(.cur-lecciones) {
  max-width: none;
}

/* ------------------------------------------- ¿te interesó este curso? */
.cur-compra {
  background-color: var(--gris-bg) !important;
  padding: clamp(40px, 5vw, 70px) 0;
  text-align: center;
}

.cur-compra .abt-h2 {
  margin-bottom: 24px;
}

/* ------------------------------------------------------------ whatsapp */
.cur-wa {
  background-color: #fff !important;
  padding: 0 0 clamp(50px, 6vw, 90px);
}

.cur-wa .form__box {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.cur-wa .form__box .skf-btn {
  margin-inline: auto;
}

@media (max-width: 900px) {
  .cur-hero {
    padding-top: clamp(90px, 22vw, 150px);
  }

  .cur-hero__ttl {
    max-width: none;
  }

  .cur-datos {
    gap: 18px 30px;
  }
}
/* =====================================================================
   REGISTRO  (/join_no_access_code)
   La vista la genera la plataforma y su marcado no se puede tocar, así
   que todo cuelga de la clase que el LMS pone en el <body>
   (`ctr_join_no_access_code`) y de los ids/clases que emite el propio
   formulario (#portal_signup_form, .textInput, .button1…).

   Algunas reglas llevan el prefijo largo `body.evo.portal.ctr_join…`:
   `evo.css` ataca esos mismos elementos con `body.evo.portal #contentBody p`
   (0,3,2) y !important, y con `body.ctr_join_no_access_code` (0,2,2) se
   perdía el desempate. Sólo se alarga el selector donde hace falta.

   Para llevar el mismo tratamiento a la variante con código de acceso
   basta con añadir su clase de <body> a los selectores de esta sección.
   ===================================================================== */

body.ctr_join_no_access_code {
  /* Columna estrecha: es una vista de formulario, no de contenido ancho */
  --jn-col: 900px;
  /* La plataforma dibuja las casillas con estas dos variables suyas
     (`input[type="checkbox"]:checked + label::before`). Reapuntándolas al
     azul de marca se recolorean sin rehacer el control ni recalcular el
     sprite del palomeo. */
  --form-highlight: var(--azul);
  --form-highlight-border: var(--azul-osc);
  background: #fff !important;
}

/* El portal pinta el fondo en gris azulado (`--body-bg-color`) y lo repite
   en #wrapper; aquí la maqueta es blanca de borde a borde. */
body.ctr_join_no_access_code #wrapper,
body.ctr_join_no_access_code #contentHeader,
body.ctr_join_no_access_code #contentWrap {
  background-color: #fff !important;
}

/* El título de la página vive en #contentHeader, que esta hoja oculta para
   todo el portal (ver bloque ABOUT). En esta vista SÍ interesa: es el <h1>
   real y no hay hero que lo sustituya, así que se repone.
   El `padding-top` hace el hueco de la cabecera fija: esta vista no es
   `portal_home`, así que la plataforma no lo reserva por su cuenta —y de
   hecho pone su propio `padding-top: calc(90px) !important`, que se queda
   corto para nuestro header. */
body.ctr_join_no_access_code #contentHeader {
  display: block !important;
}

body.evo.portal.ctr_join_no_access_code #contentHeader {
  padding: clamp(135px, 11vw, 180px) var(--pad) 0 !important;
}

/* La caja va a todo el ancho (si no, el gris de #wrapper asomaría por los
   lados) y es el <h1> el que se centra dentro de la columna. */
body.ctr_join_no_access_code #contentHeader h1 {
  max-width: calc(var(--jn-col) - var(--pad) * 2);
  margin: 0 auto !important;
  font-family: var(--sans) !important;
  font-size: clamp(30px, 3.2vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  color: var(--negro) !important;
}

/* `#contentBody {padding:0 !important}` de más arriba es global: este
   selector lo supera en especificidad para poder recentrar la columna. */
body.ctr_join_no_access_code #contentBody {
  max-width: var(--jn-col);
  margin-inline: auto !important;
  padding: 0 var(--pad) clamp(60px, 7vw, 110px) !important;
}

/* Entradilla ("Para finalizar la participación…") */
body.ctr_join_no_access_code #contentBody>p {
  margin: 16px 0 0 !important;
  max-width: 62ch;
  font-family: var(--sans) !important;
  font-size: .9em !important;
  line-height: 1.55 !important;
}

body.evo.portal.ctr_join_no_access_code #contentBody>p {
  color: var(--gris-txt) !important;
}

/* ------------------------------------------------ rejilla del formulario */
/* Los campos llegan como una secuencia plana de <p>: se convierten en
   celdas de una rejilla de dos columnas para que Nombre/Apellido y
   Correo/Confirmar queden emparejados sin tocar el HTML. Los <input
   type="hidden"> y los <script> no generan caja, así que no ocupan celda. */
body.ctr_join_no_access_code #portal_signup_form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2.6vw, 40px);
  margin: clamp(26px, 3vw, 44px) 0 0 !important;
  padding: 0 !important;
}

body.ctr_join_no_access_code #portal_signup_form>p {
  margin: 0 0 20px !important;
}

/* `evo.css` baja los <p> del portal a .85rem. Aquí romperían la escala:
   las etiquetas y los campos se miden en `em` respecto a su contenedor,
   igual que en el formulario de la portada. */
body.evo.portal.ctr_join_no_access_code #contentBody #portal_signup_form>p {
  font-size: 1em !important;
}

/* Encabezados de grupo, casillas, captcha y botón ocupan la fila entera */
body.ctr_join_no_access_code #portal_signup_form>h2,
body.ctr_join_no_access_code #portal_signup_form>p:has(input[type="checkbox"]),
body.ctr_join_no_access_code #portal_signup_form>.captcha_div,
body.ctr_join_no_access_code #portal_signup_form>button {
  grid-column: 1 / -1;
}

/* ------------------------------------------------- encabezados de grupo */
body.ctr_join_no_access_code #portal_signup_form>h2 {
  margin: clamp(18px, 2vw, 30px) 0 22px !important;
  padding-top: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--gris-lin);
  font-family: var(--sans) !important;
  font-size: clamp(19px, 1.5vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

body.evo.portal.ctr_join_no_access_code #contentBody #portal_signup_form>h2 {
  color: var(--negro) !important;
}

/* El primero va pegado a la entradilla: ni línea ni hueco extra */
body.ctr_join_no_access_code #portal_signup_form>h2:first-of-type {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: 0;
}

/* --------------------------------------------------- etiquetas y campos */
body.ctr_join_no_access_code #portal_signup_form label {
  display: block;
  margin: 0 0 8px !important;
  font-family: var(--sans) !important;
  font-size: .8em !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--negro) !important;
}

/* El <br> entre etiqueta y campo sobra: la etiqueta ya es de bloque y
   dejaba una línea en blanco de más. */
body.ctr_join_no_access_code #portal_signup_form label+br {
  display: none;
}

/* Mismo lenguaje que `.form__f` de la portada. `formAutoWidths` de la
   plataforma pone `width:auto` en los campos y `evo.css` les repinta el
   borde con !important: de ahí los !important de aquí. */
body.ctr_join_no_access_code #portal_signup_form input[type="text"],
body.ctr_join_no_access_code #portal_signup_form input[type="password"],
body.ctr_join_no_access_code #portal_signup_form input[type="email"],
body.ctr_join_no_access_code #portal_signup_form input[type="tel"],
body.ctr_join_no_access_code #portal_signup_form input[type="number"],
body.ctr_join_no_access_code #portal_signup_form select,
body.ctr_join_no_access_code #portal_signup_form textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid #9b9b9b !important;
  border-radius: 2px !important;
  background-color: #fff !important;
  box-shadow: none !important;
  font-family: var(--sans) !important;
  font-size: .9em !important;
  line-height: 1.4 !important;
  color: var(--negro) !important;
}

body.ctr_join_no_access_code #portal_signup_form input:focus-visible,
body.ctr_join_no_access_code #portal_signup_form select:focus-visible,
body.ctr_join_no_access_code #portal_signup_form textarea:focus-visible {
  border-color: var(--azul) !important;
  outline: 2px solid var(--azul);
  outline-offset: 1px;
  box-shadow: none !important;
}

/* El desplegable pierde la flecha nativa y monta la suya, para que no
   cambie de aspecto de un navegador a otro. */
body.ctr_join_no_access_code #portal_signup_form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px auto;
  cursor: pointer;
}

/* El aviso de requisitos de la contraseña va como <span> dentro del
   <label>; sin esto heredaba el `display:block` y saltaba de línea. */
body.ctr_join_no_access_code #portal_signup_form .btn_tooltip {
  display: inline-block;
  vertical-align: middle;
}

/* ------------------------------------------------------------ casillas */
/* La plataforma esconde el <input> y dibuja la casilla con
   `input[type="checkbox"] + label::before`. Se conserva ese mecanismo
   (incluido el palomeo, que es un sprite dimensionado para 16px) y sólo se
   reajusta el aspecto. La etiqueta pasa a `flex` para que el texto largo
   no se meta debajo del recuadro al saltar de línea. */
body.ctr_join_no_access_code #portal_signup_form>p:has(input[type="checkbox"]) {
  margin: 0 0 14px !important;
}

body.ctr_join_no_access_code #portal_signup_form input[type="checkbox"]+label {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  width: 100% !important;
  margin: 0 !important;
  font-size: .8em !important;
  color: var(--negro) !important;
  cursor: pointer;
}

body.ctr_join_no_access_code #portal_signup_form input[type="checkbox"]+label::before {
  flex: none;
  top: 1px !important;
  margin: 0 !important;
  border: 1px solid #9b9b9b !important;
  border-radius: 2px !important;
}

/* El relleno azul lo pone la plataforma con `--form-highlight`; el borde
   lo fija la regla de arriba con !important y hay que reponerlo. */
body.ctr_join_no_access_code #portal_signup_form input[type="checkbox"]:checked+label::before {
  border-color: var(--azul) !important;
}

body.ctr_join_no_access_code #portal_signup_form input[type="checkbox"]+label a {
  color: var(--azul) !important;
  text-decoration: none !important;
}

body.ctr_join_no_access_code #portal_signup_form input[type="checkbox"]+label a:hover,
body.ctr_join_no_access_code #portal_signup_form input[type="checkbox"]+label a:focus-visible {
  text-decoration: underline !important;
}

/* ------------------------------------------------------------- enviar */
/* Mismo botón que `.skf-btn`. No se puede reutilizar la clase porque el
   marcado lo emite la plataforma con `.button1`, que además llega desde
   `body.evo button.button1` (píldora azul de 50px de radio). */
body.ctr_join_no_access_code #portal_signup_form button.button1 {
  justify-self: start;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: clamp(14px, 1.8vw, 24px) 0 0 !important;
  padding: 10px 24px !important;
  background: var(--azul) !important;
  color: #fff !important;
  border: 2px solid var(--azul) !important;
  border-radius: 3px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: .95em !important;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

body.ctr_join_no_access_code #portal_signup_form button.button1:hover:not(:disabled),
body.ctr_join_no_access_code #portal_signup_form button.button1:focus-visible:not(:disabled) {
  background: var(--azul-osc) !important;
  border-color: var(--azul-osc) !important;
}

/* Hasta que no se aceptan las tres políticas el botón va deshabilitado.
   La plataforma lo resuelve con `opacity:.5`, que deja un azul lavado y no
   se lee como "apagado": mejor un gris plano. */
body.ctr_join_no_access_code #portal_signup_form button.button1:disabled {
  background: #c9c9c9 !important;
  border-color: #c9c9c9 !important;
  color: #fff !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* ------------------------------------------------------------- avisos */
body.ctr_join_no_access_code #alerts,
body.ctr_join_no_access_code #contentBody>.alert_block {
  margin: 20px 0 0 !important;
}

body.ctr_join_no_access_code .alert_block p,
body.ctr_join_no_access_code .alert_block a {
  font-family: var(--sans) !important;
  font-size: .85em !important;
}

/* ------------------------------------------- políticas (aviso emergente) */
/* Al entrar, la plataforma apila sobre la vista un aviso por cada política
   pendiente (`.popover-stack.policy`). Es lo primero que se ve de la
   página, así que se le pone el mismo lenguaje: sólo el marco y el botón;
   el cuerpo lo redacta el administrador con estilos en línea propios y no
   se toca. */
body.ctr_join_no_access_code .popover-stack .popover {
  background: rgba(47, 58, 66, .92) !important;
  border-radius: 3px !important;
}

body.ctr_join_no_access_code .popover-stack .popover-header h2 {
  font-family: var(--sans) !important;
  font-size: clamp(18px, 1.4vw, 22px) !important;
  font-weight: 500 !important;
  color: #fff !important;
}

body.ctr_join_no_access_code .popover-stack .popover-content {
  border: 0 !important;
  border-radius: 2px !important;
  background: #fff !important;
}

body.ctr_join_no_access_code .popover-stack .policy-consent-accept {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 24px !important;
  background: var(--azul) !important;
  color: #fff !important;
  border: 2px solid var(--azul) !important;
  border-radius: 3px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: .95em !important;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

body.ctr_join_no_access_code .popover-stack .policy-consent-accept:hover,
body.ctr_join_no_access_code .popover-stack .policy-consent-accept:focus-visible {
  background: var(--azul-osc) !important;
  border-color: var(--azul-osc) !important;
}

/* ====== cabecera sobre el fondo claro de esta vista =================== */
/* Mismo caso que About/Catálogo/Curso, pero aquí no hay hero propio del
   que tirar con `:has()`: se condiciona por la clase del <body>. */
body.ctr_join_no_access_code #wrapper header.hdr:not(.hdr--scrolled),
body.ctr_join_no_access_code #wrapper header.hdr:not(.hdr--scrolled) .nav a,
body.ctr_join_no_access_code #wrapper header.hdr:not(.hdr--scrolled) .hdr__login,
body.ctr_join_no_access_code #wrapper header.hdr:not(.hdr--scrolled) .hdr__login *,
body.ctr_join_no_access_code #wrapper header.hdr:not(.hdr--scrolled) .nav__burger,
body.ctr_join_no_access_code #wrapper header.hdr:not(.hdr--scrolled) .nav__burger * {
  color: var(--negro) !important;
}

body.ctr_join_no_access_code #wrapper header.hdr:not(.hdr--scrolled) .hdr__logo img {
  filter: none !important;
}

/* ==================================================================== */
/*  REGISTRO — RESPONSIVE                                               */
/* ==================================================================== */
@media (max-width: 760px) {
  body.ctr_join_no_access_code #portal_signup_form {
    grid-template-columns: 1fr;
  }
}