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