/* =====================================================================
   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: 1840px;
  --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;
  /* Red de seguridad: sólo parte una palabra si no cabe ni ocupando una línea
     entera (correos o URLs muy largos). Una palabra que sí cabe pasa entera al
     renglón siguiente, que es el comportamiento buscado. */
  overflow-wrap: break-word;
}

.custom-header {
  margin-top: -12px !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;
}

/* -------------------------------------------------------------- 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;
}

.banner__radio {
  position: absolute !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(4, 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;
}

.form__aside {
  border-left: 1px solid var(--negro);
  padding-left: clamp(30px, 5vw, 100px);
  display: flex;
  align-items: center;
}

.form__box {
  background: var(--gris-bg);
  padding: clamp(34px, 4vw, 70px);
  width: 100%;
}

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

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

/* --------------------------------------------------------------- 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: rgba(0, 0, 0, .92);
    padding: 20px var(--pad) 30px;
  }

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

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

  /* El desplegable tiene fondo oscuro, así que sus enlaces van en blanco
     aunque el header esté en estado "scrolled" (si no, negro sobre negro). */
  .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: #fff !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, 80px) 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) #wrapper header.hdr:not(.hdr--scrolled),
body:has(.abt-hero, .cat-hero) #wrapper header.hdr:not(.hdr--scrolled) .nav a,
body:has(.abt-hero, .cat-hero) #wrapper header.hdr:not(.hdr--scrolled) .hdr__login,
body:has(.abt-hero, .cat-hero) #wrapper header.hdr:not(.hdr--scrolled) .hdr__login *,
body:has(.abt-hero, .cat-hero) #wrapper header.hdr:not(.hdr--scrolled) .nav__burger,
body:has(.abt-hero, .cat-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) #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;
}

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

/* 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;
  }
}