/*
 * Capa de basecore sobre el tema Edurock (Techboot).
 *
 * style.css es la hoja del tema tal cual (con los dos cambios mecánicos de
 * su cabecera). Todo lo que basecore necesita encima va aquí, para que
 * actualizar el tema sea reemplazar style.css sin perder nada:
 *
 *   1. Texto sobre la marca por luminancia: el tema escribe blanco
 *      (--whiteColor) sobre el morado (--primaryColor) y el rosa
 *      (--secondaryColor); con una marca clara sería ilegible.
 *   2. Densidad: el tema separa los bloques con utilidades fijas
 *      (sp_top_100…); las maquetas usan .edurock-py, que toma el
 *      espaciado de la identidad visual (--section-py). Los heros no lo
 *      llevan: su alto es parte del diseño del tema.
 *   3. El contrato del panel de Apariencia: --section-text.
 *   4. Markup que basecore genera distinto al del tema (redes del pie,
 *      texto del editor con <p>, legales, idiomas, sin carrito ni login).
 *   5. Maquetas de basecore sin bloque en el tema (prose) y piezas que el
 *      tema no cubre (tarjeta de noticia sin foto, listado vacío).
 *
 * Todo contra clases: los ids de sección los pone el motor (anchor) y
 * pueden ir numerados si un tipo se repite.
 */

/* ---- 1. Texto sobre la marca ------------------------------------------- */

/* Las reglas del tema que pintan --whiteColor sobre --primaryColor, sacadas
   de style.css (las del panel de alumno, la tienda y el carrito no se usan
   y no se listan). --on-primary lo calcula PageService por luminancia. */
#scrollUp:hover i,
.default__button,
.default__button.default__button--3:hover,
.headerarea__button a,
.aboutarea__list__2 ul li:hover i,
.aboutarea__para__3 .aboutarea__icon__3 i,
.testimonial__slider__active__3 .slick-arrow:hover,
.single__team .teamarea__img .teamarea__icon ul li i:hover,
.single__expart__teacher .teacher__icon ul li a:hover,
.blogarea__content__wraper .blogarea__img .blogarea__date,
.blogarae__img__2 .blogarea__date__2,
.main__pagination__wrapper ul li a.active,
.main__pagination__wrapper ul li a:hover,
.course__button a,
.scc__wrap .question,
.course__tap__wrap li:hover button,
.course__tap__wrap li button.active,
.foter__bottom__text .footer__bottom__icon i,
.footerarea__icon__2 a:hover,
.edurock-on-primary {
    color: var(--on-primary);
}

/* Y sobre el rosa (--secondaryColor, el "acento" de la identidad). */
.default__button.default__button--4:hover,
.hreobannerarea__button__2 .hreobannerarea__button__3,
.herobannerarea__price span,
.populerarea__content__wraper__2 .populerarea__button__2 .default__button,
.best__categories__item:hover .best__categories__link,
.gridarea__wraper .gridarea__img .gridarea__small__button .grid__badge,
.pricingarea__content__wraper .pricingarea__list ul li i,
.registerarea__video a,
.aboutarea__3__button a {
    color: var(--on-accent);
}

/* ---- 2. Densidad ------------------------------------------------------- */

/* El espaciado vertical de cada bloque sale de la identidad (64/96/128px o
   el 100px del manifiesto). Una maqueta que en el tema tenía otro arriba y
   abajo lo ajusta con los modificadores. */
.edurock-sec {
    position: relative;
}

.edurock-py {
    padding-top: var(--section-py, 100px);
    padding-bottom: var(--section-py, 100px);
}

.edurock-py--sin-arriba {
    padding-top: 0;
}

.edurock-py--sin-abajo {
    padding-bottom: 0;
}

.edurock-py--media-arriba {
    padding-top: calc(var(--section-py, 100px) / 2);
}

.edurock-py--media-abajo {
    padding-bottom: calc(var(--section-py, 100px) / 2);
}

/* ---- 3. Panel de Apariencia -------------------------------------------- */

/* Toda sección de Edurock lleva .edurock-sec; el color configurable entra
   por ahí a títulos, párrafos y listas sin tocar los botones. Las cajas
   blancas dentro de un bloque (tarjetas, planes) llevan .edurock-claro y
   se quedan con su texto: un color pensado para el fondo del bloque las
   dejaría ilegibles.
   El color del panel es un ajuste explícito de quien edita: gana a las
   reglas del tema, que a veces pesan más (`.a.b h2`), con !important. */
.edurock-sec[style*="--section-text"] :where(h1, h2, h3, h4, h5, h6, p, li):not(.edurock-claro *) {
    color: var(--section-text) !important;
}

/* ---- 4. Markup de basecore --------------------------------------------- */

/* Accesibilidad: el texto de ayuda para lectores de pantalla. */
.edurock-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Barra superior: en el tema son <li> con el texto suelto; aquí enlaces. */
.topbararea .topbar__left ul li a,
.topbararea .topbar__text a {
    color: inherit;
}

.topbararea .topbar__left ul li + li::before {
    content: "·";
    margin-right: 8px;
}

/* Redes: el partial del motor pinta <a> sueltos, no <ul><li>. Mismo dibujo
   que .topbar__list, .footerarea__icon__2 y .mobile-social-wrap del tema. */
.edurock-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.edurock-social:empty {
    display: none;
}

.topbararea .edurock-social a {
    color: var(--whiteColor);
    font-size: 14px;
}

.footerarea__icon__2 .edurock-social {
    justify-content: flex-end;
}

.footerarea__icon__2 .edurock-social a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    border-radius: 100%;
    color: var(--whiteColor);
    background: rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.footerarea__icon__2 .edurock-social a:hover {
    background: var(--primaryColor);
}

.mobile-social-wrap.edurock-social a {
    font-size: 16px;
    color: var(--headingColor);
    margin-right: 0;
}

/* Logo: el tema lo pintaba a su tamaño natural; aquí cualquier logo. */
.headerarea__left__logo img,
.mobile-logo img {
    max-height: 56px;
    width: auto;
}

.copyright__logo img {
    max-height: 60px;
    width: auto;
}

/* La altura de la cabecera la daba el relleno de los enlaces del menú; en
   una página sin menú (o una landing sin secciones en el pie) se quedaba en
   una línea. */
.headerarea .desktop__menu__wrapper > .row {
    min-height: 100px;
}

@media (max-width: 1499px) {
    .headerarea .desktop__menu__wrapper > .row {
        min-height: 80px;
    }
}

/* Sin carrito ni login: el botón queda solo a la derecha. */
.headerarea__right {
    justify-content: flex-end;
}

/* Hamburguesa y cierre del panel móvil: en el tema eran <a>; aquí son
   <button> (accesibles con teclado) y no deben llevar el botón del navegador. */
.mobile-aside-button,
.mobile-aside-close {
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
}

/* Idiomas en el menú: el código corto, en mayúsculas. */
.headerarea__main__menu .edurock-lang a,
.mobile-menu .edurock-lang a {
    text-transform: uppercase;
}

/* Menú móvil: el tema lo abre sin capa (busca un .wrapper que no existe);
   edurock.js lo cierra con Escape y al pulsar un enlace de la misma página. */
.mobile-off-canvas-active .mobile-menu li a[aria-current="page"],
.headerarea__main__menu ul li a[aria-current="page"] {
    color: var(--primaryColor);
}

/* Pie: el texto bajo "Sobre nosotros" y el horario vienen del editor. */
.footerarea__content p:last-child,
.footer__bottom__content p:last-child {
    margin-bottom: 0;
}

.footer__bottom__content,
.footer__bottom__content p {
    color: var(--whiteColor);
    opacity: 0.75;
}

.footerarea__contact__list li {
    color: var(--whiteColor);
    opacity: 0.75;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
}

.footerarea__contact__list li i {
    color: var(--primaryColor);
    margin-top: 4px;
}

.footerarea__contact__list a {
    color: inherit;
}

/* El año del copyright: el tema lo pinta con la marca, que sobre el pie
   oscuro no tiene contraste (ni con el morado de Edurock sobre su azul
   noche). Hereda el color del texto, en negrita. */
.footerarea__copyright__wrapper .footerarea__copyright__content p span {
    color: inherit;
    font-weight: 600;
}

.footerarea__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: center;
    margin-top: 10px;
}

.footerarea__legal a {
    color: var(--whiteColor);
    opacity: 0.75;
    font-size: 14px;
}

.footerarea__legal a:hover {
    opacity: 1;
}

/* Sin el bloque de boletín del tema, la rejilla del pie arranca arriba. */
.footerarea .footerarea__wrapper {
    padding-top: var(--section-py, 100px);
}

/* Banda de las páginas sin hero: el título es el <h1> de la página. */
.breadcrumbarea .breadcrumb__title :where(h1, p) {
    margin: 0;
}

/* ---- 5. Maquetas de basecore sin bloque en el tema ---------------------- */

/* Texto (prose): ancho, alineación, tamaño y columnas configurables, con la
   tipografía del detalle de blog del tema. */
.prose-sec .prose-block {
    max-width: var(--prose-width, 820px);
    margin: 0 auto;
    text-align: var(--prose-align, left);
}

.prose-sec .prose-body {
    font-size: var(--prose-size, 16px);
    column-count: var(--prose-cols, 1);
    column-gap: 40px;
    color: var(--contentColor);
}

.prose-sec .prose-body :where(h2, h3, h4, h5) {
    color: var(--headingColor);
    margin: 30px 0 15px;
}

.prose-sec .prose-body ul,
.prose-sec .prose-body ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.prose-sec .prose-body ul {
    list-style: disc;
}

.prose-sec .prose-body ol {
    list-style: decimal;
}

.prose-sec .prose-body a {
    color: var(--primaryColor);
    text-decoration: underline;
}

/* Tarjeta de noticia sin foto: la caja conserva su proporción. */
.single__blog__img--sin-foto,
.blogarae__img__2--sin-foto {
    background: var(--lightGrey10);
    aspect-ratio: 16 / 10;
    border-radius: var(--borderRadius3);
}

.blogarae__img__2 img,
.single__blog__img img {
    width: 100%;
    object-fit: cover;
}

/* Detalle de noticia. */
.article-sec .blog__details__img img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--borderRadius3);
}

.article-sec .article-meta {
    color: var(--contentColor);
    margin: 25px 0 10px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.article-sec .article-meta i {
    color: var(--primaryColor);
}

.article-sec .blog__details__content h1 {
    font-size: 40px;
    line-height: 1.25;
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .article-sec .blog__details__content h1 {
        font-size: 30px;
    }
}

.article-sec .blog__details__content :where(p, li) {
    color: var(--contentColor);
}

.article-sec .article-back {
    margin-top: 40px;
}

.blog-empty {
    color: var(--contentColor);
}

/* ---- 6. Piezas de las maquetas que el tema no cubre --------------------- */

/* Hero "dividida": dos botones donde el tema tenía el campo de email. */
.educationarea__bottom__button.edurock-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Estrellas de valoración: las vacías, en gris. */
.edurock-estrella-vacia {
    opacity: 0.3;
}

/* Fotos de los heros: el tema las pinta a su tamaño natural (recortes de
   unos 450px). Una foto subida puede ser de cualquier tamaño: se limita a la
   caja del tema y se recorta con object-fit. */
.edurock-hero-portada .aboutarea__img .aboutimg__2 {
    max-width: 100%;
    height: auto;
}

.edurock-hero-dividida .educationarea__img .education__img__1 {
    width: 380px;
    max-width: 100%;
    aspect-ratio: 380 / 450;
    object-fit: cover;
}

.edurock-hero-dividida .educationarea__img .education__img__2 {
    width: 244px;
    max-width: 60%;
    aspect-ratio: 244 / 319;
    object-fit: cover;
}

.edurock-hero-dividida .educationarea__small__img img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--whiteColor);
}

.edurock-hero-dividida .educationarea__small__img img + img {
    margin-left: -35px;
}

.edurock-hero-dividida .educationarea__small__img__2 img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 50%;
}

/* About: los puntos de la lista vienen del editor con <p>; el tema los
   tenía como texto suelto junto a la marca. Con una línea larga, el texto
   pasaba por debajo de la marca: cada punto es una fila con la marca fija. */
.aboutarea__list__2 ul li,
.edurock-about-descubre .aboutarea__list ul li {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.aboutarea__list__2 ul li i,
.edurock-about-descubre .aboutarea__list ul li i {
    flex-shrink: 0;
}

.edurock-punto,
.edurock-punto p {
    display: inline;
    margin: 0;
}

.aboutarea__list__2 ul li i[class*="fa-"],
.aboutarea__list ul li i[class*="fa-"] {
    margin-right: 6px;
    color: var(--primaryColor);
}

.edurock-entradilla {
    font-weight: 500;
}

/* About "pestanas": el texto de cada pestaña viene del editor; sus títulos
   toman el aire de .aboutarea__tap__heading del tema. */
.edurock-pestana :where(h2, h3, h4) {
    font-size: 20px;
    margin: 25px 0 10px;
    color: var(--blackColor);
}

.edurock-pestana ul {
    list-style: disc;
    padding-left: 20px;
}

/* Fotos de los bloques about: como en los heros, se limitan a la caja del
   tema (sus recortes miden lo que se indica) y se recortan con object-fit. */
.edurock-about-default .aboutarea__2__img__1 {
    width: calc(100% - 70px);
    max-width: 382px;
    aspect-ratio: 382 / 484;
    object-fit: cover;
}

.edurock-about-default .aboutarea__2__img__2 {
    width: 228px;
    max-width: 50%;
    aspect-ratio: 228 / 181;
    object-fit: cover;
    border-radius: 10px;
}

.edurock-about-bienvenida .aboutarea__5__img img {
    width: 100%;
    max-width: 565px;
    aspect-ratio: 565 / 575;
    object-fit: cover;
}

.edurock-about-descubre .aboutarea__img img {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 400 / 550;
    object-fit: cover;
}

.edurock-about-perfil .instructor__sidebar__img > img {
    width: 100%;
    max-width: 370px;
    aspect-ratio: 370 / 420;
    object-fit: cover;
}

.edurock-about-bienvenida .aboutarea__5__small__icon img {
    max-width: 48px;
    max-height: 60px;
    object-fit: contain;
}

/* Why: el texto de las tarjetas viene del editor (<p>). */
.edurock-texto-tarjeta p:last-child {
    margin-bottom: 0;
}

/* Why "iconos": el tema contaba con una línea de texto. Con un texto largo
   el círculo del icono se encogía en un óvalo y se quedaba a media altura;
   aquí no encoge, va arriba junto al título y las cajas de una fila miden
   lo mismo. */
.edurock-why-iconos .row > [class*="col-"] {
    display: flex;
}

.edurock-why-iconos .trainingarea__wraper {
    width: 100%;
}

.edurock-why-iconos .trainingarea__wraper .trainingarea__icon {
    align-items: flex-start;
}

.edurock-why-iconos .trainingarea__wraper .trainingarea__icon i {
    flex-shrink: 0;
}

/* Why "con-imagen": el fondo suave del bloque de home-9 (allí una foto con
   el rosa; aquí el acento de la identidad muy aclarado), la imagen abajo
   del todo, sin marco, y las tarjetas con el texto del editor. */
.edurock-why-con-imagen {
    background-color: color-mix(in srgb, var(--accent) 10%, #ffffff);
}

.edurock-why-con-imagen__imagen {
    text-align: center;
}

.edurock-why-con-imagen__foto {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 640px;
    width: auto;
    height: auto;
}

.edurock-why-con-imagen__celda {
    display: flex;
}

.edurock-why-con-imagen__celda .single__service {
    width: 100%;
}

.edurock-why-con-imagen__boton {
    margin-top: 10px;
}

/* About "default" con un logo: entero, sin recorte ni marco de foto. */
.edurock-about-default--logo .aboutarea__2__img__1 {
    width: auto;
    max-width: calc(100% - 70px);
    max-height: 420px;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
}

/* Why "categorias": un icono de Font Awesome en el hueco del SVG del tema,
   sobre la misma mancha. */
.service__img .edurock-icono-fa {
    position: relative;
    z-index: 1;
    font-size: 34px;
    color: var(--primaryColor);
    width: auto;
    height: auto;
}

/* Why "cursos" y "programas": fotos de cualquier tamaño en la caja del tema. */
.edurock-why-cursos .gridarea__img img,
.edurock-why-programas .single__blog__img img {
    width: 100%;
    aspect-ratio: 400 / 270;
    object-fit: cover;
}

.edurock-why-cursos .gridarea__small__img img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.edurock-why-cursos .gridarea__small__content p {
    margin: 0;
}

.edurock-why-categorias-color .best__categories__link {
    gap: 15px;
}

.edurock-why-categorias-color .best__categories__icon i {
    font-size: 28px;
    color: var(--primaryColor);
}

.edurock-why-categorias-color .best__categories__item:hover .best__categories__icon i {
    color: var(--on-accent);
}

/* Testimonios: el markup semántico (figure, blockquote) sin sus márgenes,
   fotos de cualquier tamaño en el círculo del tema y las estrellas. */
.edurock-testimonial-rejilla figure,
.edurock-testimonial-con-imagen figure,
.edurock-testimonial-rejilla blockquote,
.edurock-testimonial-con-imagen blockquote {
    margin: 0;
}

.testimonial__img img,
.aboutarea__content__wraper__3 .aboutarea__img__3 > img,
.testimonial__img__3 img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial__name .h6,
.aboutarea__img__name .h6 {
    margin-bottom: 0;
}

.edurock-estrellas,
.testimonial__icon {
    color: var(--yellow);
}

.edurock-testimonial-con-imagen .testimonial__group__img img {
    max-width: 100%;
    height: auto;
}

.slick-arrow:focus-visible {
    outline: 2px solid var(--primaryColor);
    outline-offset: 3px;
}

/* Reseñas: el resumen de la nota bajo el encabezado. */
.edurock-reviews__resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.edurock-reviews__media {
    font-size: 32px;
    font-weight: 700;
    color: var(--headingColor);
    font-family: var(--headingFont);
}

.edurock-reviews__total {
    color: var(--contentColor);
}

.edurock-reviews__enlace {
    margin-top: 30px;
}

/* Precios: el plan destacado se queda con el aspecto que el tema da al
   pasar por encima, con un borde de la marca. */
.pricingarea__content__wraper.edurock-plan-destacado {
    background: var(--whiteColor);
    box-shadow: 0px 4px 49px rgba(0, 0, 0, 0.05);
    outline: 2px solid var(--primaryColor);
}

.edurock-pricing-tabla .tution__img img {
    width: 100%;
    aspect-ratio: 410 / 500;
    object-fit: cover;
    border-radius: var(--borderRadius3);
}

.edurock-tabla-precio {
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: 600;
    color: var(--primaryColor);
}

.edurock-tabla-descripcion {
    margin-bottom: 15px;
}

/* Cifras: un icono de Font Awesome en el sitio del dibujo del tema. */
.edurock-cifra-icono {
    font-size: 40px;
    color: var(--primaryColor);
}

/* Equipo: fotos de cualquier tamaño en la caja del tema. */
.edurock-team .teamarea__img img {
    width: 100%;
    aspect-ratio: 370 / 400;
    object-fit: cover;
}

/* Contacto "registro": el tema tiñe la foto de fondo con un velo morado
   fijo (::before, rgba(38, 0, 148, .93)). Aquí el velo es la marca
   oscurecida, que con el morado de Edurock da el mismo tono y con otra
   marca la sigue; el texto blanco del tema se lee encima. */
.edurock-contacto-registro::before {
    background: color-mix(in srgb, color-mix(in srgb, var(--primary) 60%, #000000) 93%, transparent);
}

/* La foto del tema (1920x523) va sin background-size: con el formulario la
   banda es más alta y se repetía por debajo. */
.edurock-contacto-registro {
    background-size: cover;
    background-position: center;
}

/* Llamada a la acción: la banda del pie del tema (texto blanco) en una caja
   oscura propia, para que se lea sobre cualquier fondo de sección. */
.edurock-cta__caja {
    background: var(--darkblack);
    border-radius: var(--borderRadius3);
    padding: 50px 60px;
    border-bottom: 0;
}

@media (max-width: 767px) {
    .edurock-cta__caja {
        padding: 35px 25px;
    }
}

.edurock-cta__texto p {
    color: rgba(255, 255, 255, 0.75);
    margin: 10px 0 0;
}

.edurock-cta__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-end;
}

@media (max-width: 991px) {
    .edurock-cta__botones {
        justify-content: flex-start;
        margin-top: 25px;
    }
}

/* Contacto: datos y formulario. */
.edurock-contacto .contact__section {
    padding-bottom: 50px;
}

.edurock-contacto .contact__email a {
    color: inherit;
}

.edurock-direccion p {
    margin-bottom: 0;
}

.edurock-form-contacto .contact__input__wraper select,
.edurock-form-registro .edurock-select {
    width: 100%;
    appearance: auto;
}

.edurock-form-contacto .contact__input__wraper select {
    height: 60px;
    padding: 0 20px;
    border: 1px solid var(--borderColor1);
    background: transparent;
    color: var(--contentColor);
    margin-bottom: 30px;
}

.edurock-form-registro .edurock-campo {
    position: relative;
}

.edurock-campo--opcion {
    margin-bottom: 20px;
}

.edurock-etiqueta {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.edurock-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edurock-legal {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 25px;
    font-size: 14px;
}

.edurock-legal input {
    margin-top: 4px;
}

.edurock-legal a {
    color: var(--primaryColor);
    text-decoration: underline;
}

#output-contact:not(:empty) {
    margin-top: 15px;
}

/* Preguntas frecuentes: aire entre el acordeón y su botón. */
.edurock-faq__boton {
    margin-top: 40px;
}

.edurock-faq__respuesta p:last-child {
    margin-bottom: 0;
}

/* Logos: cualquier tamaño de logo en la fila del tema, centrados. */
.edurock-logos__fila {
    justify-content: center;
    gap: 30px;
}

.edurock-logos .brandarea__img img {
    max-height: 90px;
    width: auto;
    object-fit: contain;
}

.edurock-logos__texto {
    margin-top: 30px;
}

/* Eventos: fotos de cualquier tamaño en la caja del tema. */
.edurock-eventos .eventarea__img {
    flex: 0 0 300px;
    max-width: 40%;
}

.edurock-eventos .eventarea__img img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Vídeo: portada a todo el ancho; sin portada, un fondo del tema. */
.edurock-video__portada {
    position: relative;
}

.edurock-video__portada > img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--borderRadius3);
}

.edurock-video__portada--vacia {
    aspect-ratio: 16 / 9;
    background: var(--darkdeep1);
    border-radius: var(--borderRadius3);
}

.edurock-video__boton {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edurock-video__boton .video__pop__btn {
    position: relative;
}

.edurock-video__boton.registerarea__video a {
    margin-right: 0;
}

/* Marquesina: quieta para quien pide reducir el movimiento. */
@media (prefers-reduced-motion: reduce) {
    .edurock-marquesina .animate__content__wrap {
        animation: none;
        flex-wrap: wrap;
        white-space: normal;
        width: auto;
    }

    .edurock-marquesina .single__service[aria-hidden="true"] {
        display: none;
    }
}

.edurock-marquesina .service__content .h3 {
    margin-bottom: 0;
}

/* >>> etiquetas (generado con appData/view/templates/edurock/herramientas/
   etiquetas.php desde style.css: las reglas del tema para un nivel de
   encabezado, copiadas para el que usan las maquetas; no editar a mano) */
.herobannerarea__title .herobannerarea__title__heading__2.herobannerarea__title__heading__3 h1 {
    font-size: 65px;
    line-height: 72px;
    color: var(--blackColor);
}

@media (min-width: 992px) and (max-width: 1365px) {
    .herobannerarea__title .herobannerarea__title__heading__2.herobannerarea__title__heading__3 h1 {
        font-size: 48px;
        line-height: 60px;
    }
}

@media (max-width: 767px) {
    .herobannerarea__title .herobannerarea__title__heading__2.herobannerarea__title__heading__3 h1 {
        font-size: 35px;
        line-height: 42px;
    }
}

.herobannerarea__title .herobannerarea__title__heading__2 h1 {
    font-size: 60px;
    line-height: 72px;
    letter-spacing: 0.5px;
    color: var(--whiteColor);
}

.herobannerarea__title .herobannerarea__title__heading__2 h1 span {
    color: var(--secondaryColor);
}

@media (min-width: 992px) and (max-width: 1365px) {
    .herobannerarea__title .herobannerarea__title__heading__2 h1 {
        font-size: 50px;
        line-height: 62px;
    }
}

@media (max-width: 767px) {
    .herobannerarea__title .herobannerarea__title__heading__2 h1 {
        font-size: 30px;
        line-height: 40px;
    }
}

.herobannerarea__clms .gridarea__wraper.gridarea__wraper__2 .gridarea__content .gridarea__bottom .gridarea__small__img .gridarea__small__content .h6 {
    font-size: 16px;
}

@media (min-width: 1500px) and (max-width: 1920px) {
    .herobannerarea__online__course .herobannerarea__title .herobannerarea__title__heading__2.herobannerarea__title__heading__3 h1 {
        font-size: 90px;
        line-height: 95px;
    }
}

@media (min-width: 1366px) and (max-width: 1499px) {
    .herobannerarea__online__course .herobannerarea__title .herobannerarea__title__heading__2.herobannerarea__title__heading__3 h1 {
        font-size: 90px;
        line-height: 95px;
    }
}

.educationarea__wrapper .educationarea__heading h1 {
    font-size: 60px;
    font-family: var(--headingFont);
    line-height: 72px;
    font-weight: 700;
    color: var(--blackColor);
    margin: 0;
}

@media (min-width: 992px) and (max-width: 1365px) {
    .educationarea__wrapper .educationarea__heading h1 {
        font-size: 50px;
        line-height: 62px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .educationarea__wrapper .educationarea__heading h1 {
        font-size: 40px;
        line-height: 62px;
    }
}

@media (max-width: 767px) {
    .educationarea__wrapper .educationarea__heading h1 {
        font-size: 40px;
        line-height: 52px;
    }
}

.trainingarea__wraper .trainingarea__icon .trainingarea__content h3 {
    font-size: 20px;
    color: var(--blackColor);
    font-weight: 600;
    margin-bottom: 5px;
}

@media (min-width: 992px) and (max-width: 1365px) {
    .trainingarea__wraper .trainingarea__icon .trainingarea__content h3 {
        font-size: 18px;
    }
}

@media (min-width: 992px) and (max-width: 1365px) {
    .aboutarea__content__tap__wraper .single__event__wraper .eventarea__content__wraper .single__event__heading h3 {
        font-size: 20px;
        margin-right: 0;
    }
}

.gridarea__wraper.gridarea__wraper__2 .gridarea__content .gridarea__bottom .gridarea__small__img .gridarea__small__content .h6 {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
}

.gridarea__wraper .gridarea__content .gridarea__bottom .gridarea__small__content .h6 {
    margin-bottom: 0;
}

.single__event__wraper:hover .eventarea__content__wraper .single__event__heading h3 a {
    color: var(--whiteColor);
}

.single__event__wraper:hover .eventarea__content__wraper .single__event__heading h3 a:hover {
    color: var(--secondaryColor);
}

.single__event__wraper .eventarea__content__wraper .single__event__heading h3 {
    font-size: 24px;
    font-weight: 600;
    margin-right: 40px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .single__event__wraper .eventarea__content__wraper .single__event__heading h3 {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .single__event__wraper .eventarea__content__wraper .single__event__heading h3 {
        font-size: 15px;
    }
}

.pricingarea__content__wraper .pricingarea__heading h3 {
    font-weight: 600;
    font-size: 28px;
    line-height: 45px;
    color: var(--blackColor);
}

.pricingarea__content__wraper .pricingarea__heading .pricingarea__number .h1 {
    font-weight: 500;
    font-size: 48px;
    color: var(--blackColor);
}

.pricingarea__content__wraper .pricingarea__heading .pricingarea__number .h1 .price__currency {
    font-size: 58px;
    padding-right: 3px;
}

.pricingarea__content__wraper .pricingarea__heading .pricingarea__number .h1 .price__durition {
    font-weight: 500;
    font-size: 22px;
    line-height: 35px;
    color: var(--contentColor2);
    padding-left: 3px;
}

.registerarea__form .registerarea__form__heading h3 {
    font-family: var(--bodyFont);
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 600;
}

.single__testimonial__wraper .single__testimonial__inner .testimonial__img .testimonial__name .h6 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .single__testimonial__wraper .single__testimonial__inner .testimonial__img .testimonial__name .h6 {
        font-size: 18px;
    }
}

.aboutarea__img__3 .aboutarea__img__name .h6 {
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 5px;
}

@media (min-width: 992px) and (max-width: 1365px) {
    .aboutarea__img__3 .aboutarea__img__name .h6 {
        font-size: 18px;
        line-height: 23px;
    }
}

.testimonialarea__person__3 .testimonial__name .h6 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.single__team .teamarea__content h3 {
    font-weight: 600;
    font-size: 24px;
    line-height: 38px;
    color: var(--blackColor);
}

.instructor__list > ul li .instructor__heading h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 54px;
    margin: 0;
}

@media (min-width: 992px) and (max-width: 1365px) {
    .instructor__list > ul li .instructor__heading h2 {
        font-size: 30px;
        line-height: 44px;
    }
}

@media (max-width: 767px) {
    .instructor__list > ul li .instructor__heading h2 {
        font-size: 25px;
        line-height: 34px;
    }
}

.instructor__content__wraper h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    margin: 0;
}

.instructor__heading__2 h2 {
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2px;
    margin-bottom: 0;
}

.single__blog__content h3 a {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: var(--blackColor2);
}

@media (min-width: 992px) and (max-width: 1365px) {
    .single__blog__content h3 a {
        font-size: 20px;
        line-height: 27px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .single__blog__content h3 a {
        font-size: 20px;
        line-height: 23px;
    }
}

.single__blog__content h3 a:hover {
    color: var(--primaryColor);
}

.blog__content__wraper__2 .blogarea__text__wraper__2 .blogarea__heading__2 h2 {
    margin: 0;
}

.blog__content__wraper__2 .blogarea__text__wraper__2 .blogarea__heading__2 h2 a {
    font-weight: 700;
    font-size: 34px;
    line-height: 54px;
    color: var(--blackColor2);
}

@media (min-width: 992px) and (max-width: 1365px) {
    .blog__content__wraper__2 .blogarea__text__wraper__2 .blogarea__heading__2 h2 a {
        font-size: 28px;
        line-height: 40px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .blog__content__wraper__2 .blogarea__text__wraper__2 .blogarea__heading__2 h2 a {
        font-size: 32px;
        line-height: 40px;
    }
}

@media (max-width: 767px) {
    .blog__content__wraper__2 .blogarea__text__wraper__2 .blogarea__heading__2 h2 a {
        font-size: 24px;
        line-height: 34px;
    }
}

.blog__content__wraper__2 .blogarea__text__wraper__2 .blogarea__heading__2 h2 a:hover {
    color: var(--primaryColor);
}

.early__programs .single__blog__content h3 a {
    font-size: 34px;
    line-height: 1.5;
}

@media (min-width: 1366px) and (max-width: 1499px) {
    .early__programs .single__blog__content h3 a {
        font-size: 20px;
    }
}

@media (min-width: 992px) and (max-width: 1365px) {
    .early__programs .single__blog__content h3 a {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .early__programs .single__blog__content h3 a {
        font-size: 24px;
    }
}

.scc__info .h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
}

.scc__info .h5 span {
    font-weight: 500;
}

.single__contact .contact__text h3 {
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    line-height: 38px;
    color: var(--blackColor);
}

.footerarea__text h2 {
    font-size: 40px;
    line-height: 64px;
    color: var(--whiteColor);
    margin-bottom: 0;
}

@media (min-width: 768px) and (max-width: 991px) {
    .footerarea__text h2 {
        font-size: 25px;
        line-height: 40px;
    }
}

@media (max-width: 767px) {
    .footerarea__text h2 {
        font-size: 36px;
        line-height: 50px;
    }
}

.footerarea__text h2 span {
    color: var(--primaryColor);
}
/* <<< etiquetas */