/*
 Theme Name:   COITT Astra Child
 Theme URI:    https://www.telecos.zone
 Description:  Tema hijo de Astra para la migración del COITT
 Author:       COITT
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* === Global Fonts === */
body {
    font-family: "Open Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", sans-serif;
}

/* === News listing page === */
.news-listing {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.news-item {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.news-item:last-child {
    border-bottom: none;
}

.news-item .news-image {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.news-item .news-category {
    display: inline-block;
    background: #337ab7;
    color: #fff;
    padding: 3px 10px;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.news-item .news-date {
    color: #999;
    font-size: 13px;
    margin-bottom: 8px;
}

.news-item .news-title {
    font-family: "Raleway", sans-serif;
    font-size: 22px;
    margin-bottom: 10px;
}

.news-item .news-title a {
    color: #333;
    text-decoration: none;
}

.news-item .news-title a:hover {
    color: #67c2d7;
}

.news-item .news-excerpt {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.news-item .news-read-more {
    color: #337ab7;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}

.news-item .news-read-more:hover {
    color: #67c2d7;
}

/* === Breadcrumbs === */
.breadcrumb-bar {
    background: #f5f5f5;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    color: #999;
}

.breadcrumb-bar a {
    color: #337ab7;
    text-decoration: none;
}

/* === Pagination === */
.news-pagination {
    text-align: center;
    padding: 20px 0;
}

.news-pagination a,
.news-pagination span {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    border: 1px solid #ddd;
    color: #337ab7;
    text-decoration: none;
    font-size: 14px;
}

.news-pagination .current {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
}

/* === Header social icons === */
.coitt-social a,
.coitt-social a:visited,
.coitt-social a:focus {
    color: #999999 !important;
    text-decoration: none;
    margin-right: 10px;
    transition: color 0.3s;
}
.coitt-social a:last-child {
    margin-right: 0;
}
.coitt-social a:hover {
    color: #8bd8eb !important;
}

/* === Header contact info === */
.coitt-contact {
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;
}
.coitt-contact,
.ast-builder-layout-element .coitt-contact a,
.ast-builder-layout-element .coitt-contact a:visited,
.ast-builder-layout-element .coitt-contact a:focus,
.coitt-contact a,
.coitt-contact a:visited,
.coitt-contact a:focus {
    color: #8c8c8c !important;
    text-decoration: none !important;
    transition: color 0.3s;
}
.ast-builder-layout-element .coitt-contact a:hover,
.coitt-contact a:hover {
    color: #c7c7c7 !important;
}

/* === Menu secundario: iconos encima del texto === */
#ast-hf-menu-1 {
    gap: 0 !important;
}
#ast-hf-menu-1 .menu-item {
    margin: 0 5px !important;
}
#ast-hf-menu-1 .menu-item > .menu-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    padding: 0 5px !important;
}
#ast-hf-menu-1 .menu-item > .menu-link i._mi {
    display: block !important;
    font-size: 40px !important;
    color: #67c2d7 !important;
    margin-bottom: 10px;
    margin-right: 0 !important;
}
#ast-hf-menu-1 .menu-item > .menu-link span {
    font-weight: 600 !important;
    color: #67c2d7 !important;
}
#ast-hf-menu-1 .menu-item > .menu-link:hover span {
    color: #7299b1 !important;
}

/* === Slider arrows: inside + show on hover === */
.uagb-slider-container .swiper-button-prev,
.uagb-slider-container .swiper-button-next {
    opacity: 0;
    transition: opacity 0.3s ease;
    inset-inline-start: 10px;
}
.uagb-slider-container .swiper-button-next {
    inset-inline-start: auto;
    inset-inline-end: 10px;
}
.uagb-slider-container:hover .swiper-button-prev,
.uagb-slider-container:hover .swiper-button-next {
    opacity: 1;
}

/* === Mega Menu: cabeceras de columna no clicables === */
#mega-menu-wrap-secondary_menu .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    pointer-events: none !important;
    cursor: default !important;
}

/* === Article layout (plain posts: Noticias, UDLN, etc.) ===
   Matches Joomla original: image top, h2 title + separator, meta with icons */
/* Justify paragraphs inside course/magazine layouts (matches article layout) */
.coitt-course-body p,
.coitt-magazine-content p {
    text-align: justify;
}

/* Category link above the article title (course/webinar layout) */
.coitt-course-body .coitt-course-category {
    font-size: 12px;
    color: #666;
    margin-bottom: 14px;
}
.coitt-course-body .coitt-course-category i {
    color: var(--ast-global-color-1, #67c2d7);
    margin-right: 5px;
}
.coitt-course-body .coitt-course-category a {
    color: var(--ast-global-color-1, #67c2d7);
    text-decoration: none;
}
.coitt-course-body .coitt-course-category a:hover {
    color: #666;
}

/* Thin default separators (wp:separator) inside single posts.
   The custom title-separator uses its own CSS and is unaffected. */
.coitt-single-post .wp-block-separator,
.coitt-single-post hr.wp-block-separator {
    border: 0;
    border-top: 1px solid #e6e6e6;
    height: 1px;
    background: none;
    margin: 12px 0;
    max-width: 100%;
}

/* Latest-posts block used as "Otros cursos" sidebar in course layout: center everything */
.coitt-single-post .coitt-sidebar-posts,
.coitt-single-post .wp-block-latest-posts.coitt-sidebar-posts {
    text-align: center;
    padding-left: 0;
    list-style: none;
}
.coitt-single-post .coitt-sidebar-posts li {
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
    text-align: center;
}
.coitt-single-post .coitt-sidebar-posts .wp-block-latest-posts__featured-image {
    margin: 0 auto 8px auto;
    text-align: center;
    display: block;
}
.coitt-single-post .coitt-sidebar-posts .wp-block-latest-posts__featured-image img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
}
.coitt-single-post .coitt-sidebar-posts a {
    display: block;
    text-align: left;
    color: var(--ast-global-color-1, #67c2d7);
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
}
.coitt-single-post .coitt-sidebar-posts a:hover {
    color: #3b3b3b;
}

/* === Category archive (category.php) === */
.coitt-category-archive {
    max-width: 1170px;
    margin: 0 auto;
    padding: 30px 20px;
}
.coitt-category-header {
    margin-bottom: 30px;
}
.coitt-category-title {
    font-family: 'Raleway', sans-serif;
    font-size: 32px;
    font-weight: 500;
    color: #3b3b3b;
    display: inline-table;
    padding-right: 30px;
    box-shadow: inset 0 -1px 0 #dddddd;
    margin: 0 0 15px 0;
}
.coitt-category-title.coitt-tsep-heading::after {
    clear: both;
    display: block;
    float: left;
    content: "";
    position: relative;
    height: 2px;
    width: 70%;
    margin: 8px 30% 0 0;
    border-radius: 2px;
    background: #67c2d7;
}
.coitt-category-description {
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}

/* Leading article: first post shown above the grid with a large image */
.coitt-leading {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}
.coitt-leading .coitt-leading-image {
    display: block;
    margin-bottom: 20px;
    overflow: hidden;
}
.coitt-leading .coitt-leading-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .3s ease;
}
.coitt-leading .coitt-leading-image:hover img { transform: scale(1.02); }
.coitt-leading .coitt-leading-title {
    font-family: 'Raleway', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: #3b3b3b;
    line-height: 1.3;
    display: inline-table;
    padding-right: 30px;
    box-shadow: inset 0 -1px 0 #dddddd;
    margin: 0 0 20px 0;
}
.coitt-leading .coitt-leading-title.coitt-tsep-heading::after {
    clear: both;
    display: block;
    float: left;
    content: "";
    position: relative;
    height: 2px;
    width: 70%;
    margin: 8px 30% 0 0;
    border-radius: 2px;
    background: #67c2d7;
}
.coitt-leading .coitt-card-intro {
    font-size: 15px;
}

.coitt-category-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 30px;
}
.coitt-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 0;
    border-bottom: none;
}
.coitt-card .coitt-card-image {
    display: block;
    overflow: hidden;
    width: 100%;
}
.coitt-card .coitt-card-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .3s ease;
}
.coitt-card .coitt-card-image:hover img { transform: scale(1.03); }

.coitt-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.coitt-card-category {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}
.coitt-card-category i {
    color: var(--ast-global-color-1, #67c2d7);
    margin-right: 5px;
}
.coitt-card-category a {
    color: var(--ast-global-color-1, #67c2d7);
    text-decoration: none;
}
.coitt-card-category a:hover { color: #666; }

.coitt-card-title {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 10px 0;
}
.coitt-card-title a {
    color: #3b3b3b;
    text-decoration: none;
}
.coitt-card-title a:hover { color: var(--ast-global-color-1, #67c2d7); }

.coitt-card-intro {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 14px;
    text-align: justify;
}
.coitt-card-intro p:last-child { margin-bottom: 0; }

.coitt-card-readmore {
    display: inline-block;
    padding: 8px 18px;
    background: var(--ast-global-color-1, #67c2d7);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    border-radius: 3px;
    margin-bottom: 12px;
    align-self: flex-start;
    transition: background .2s, color .2s;
}
.coitt-card-readmore:hover {
    background: #f5f5f5;
    color: var(--ast-global-color-1, #67c2d7);
}
.coitt-card-share {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.coitt-category-pagination {
    margin-top: 40px;
    text-align: center;
}

@media (max-width: 768px) {
    .coitt-category-list { grid-template-columns: 1fr; }
    .coitt-card .coitt-card-image { width: 100%; }
}

/* Per-category page-title banner (clone of Joomla .sp-page-title) with parallax. */
.coitt-page-title {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: fixed; /* parallax effect */
    box-shadow: inset 0 -10px 40px -10px rgba(0,0,0,0.5);
    padding: 60px 0;
    color: #fff;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.coitt-page-title .coitt-page-title-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    text-align: left;
}
.coitt-page-title h2 {
    color: #fff;
    font-size: 28px;
    line-height: 1;
    margin: 0 0 10px 0;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}
.coitt-page-title .coitt-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    color: #fff;
    font-size: 13px;
}
.coitt-page-title .coitt-breadcrumb li {
    display: inline;
    margin-right: 6px;
}
.coitt-page-title .coitt-breadcrumb li + li::before {
    content: "/";
    padding-right: 6px;
    color: rgba(255,255,255,0.6);
}
.coitt-page-title .coitt-breadcrumb a {
    color: #fff;
    text-decoration: none;
}
.coitt-page-title .coitt-breadcrumb a:hover { text-decoration: underline; }
.coitt-page-title .coitt-breadcrumb li.active { color: rgba(255,255,255,0.85); }

/* Full-width single-post slider injected via astra_header_after hook.
   Lives outside the article container so it hugs the header. */
.coitt-single-slider {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.coitt-single-slider .n2-ss-slider-wrapper-inside,
.coitt-single-slider .wp-block-nextend-smartslider3 {
    margin: 0 !important;
}
.coitt-layout-article .coitt-article-body {
    max-width: 870px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.71;
    color: #333;
}
.coitt-layout-article .coitt-article-image {
    margin-bottom: 30px;
}
.coitt-layout-article .coitt-article-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}
.coitt-layout-article .coitt-article-header {
    position: relative;
    margin-bottom: 25px;
}
.coitt-layout-article .coitt-article-title {
    font-family: 'Raleway', sans-serif;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 500;
    color: #3b3b3b;
}
/* Uses the same visual as the coitt/title-separator block:
   heading is an inline-table with gray base line (box-shadow) and a colored
   line below (::after) proportional to the heading width. */
.coitt-layout-article .coitt-article-title.coitt-tsep-heading {
    display: inline-table;
    padding-right: 30px;
    box-shadow: inset 0 -1px 0 #dddddd;
    margin: 20px 0 15px 0;
}
.coitt-layout-article .coitt-article-title.coitt-tsep-heading::after {
    clear: both;
    display: block;
    float: left;
    content: "";
    position: relative;
    height: 2px;
    width: 70%;
    margin: 8px 30% 0 0;
    border-radius: 2px;
    padding: 0;
    background: #67c2d7;
}
.coitt-layout-article .coitt-article-info {
    margin: 12px 0 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 20px;
    color: #666;
}
.coitt-layout-article .coitt-article-info dd {
    display: inline-block;
    margin: 0 12px 0 0;
}
.coitt-layout-article .coitt-article-info dd i {
    margin-right: 5px;
    color: #67c2d7;
}
.coitt-layout-article .coitt-article-info a {
    color: #666;
    text-decoration: none;
}
.coitt-layout-article .coitt-article-info a:hover {
    color: #67c2d7;
}
.coitt-layout-article .coitt-article-content {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}
.coitt-layout-article .coitt-article-content p,
.coitt-layout-article .coitt-article-content li {
    font-size: 16px;
}
.coitt-layout-article .coitt-article-content a {
    color: var(--ast-global-color-1, #67c2d7);
    text-decoration: none;
}
.coitt-layout-article .coitt-article-content a:hover {
    text-decoration: underline;
}
.coitt-layout-article .coitt-article-content p {
    margin-bottom: 14px;
    text-align: justify;
}
.coitt-layout-article .coitt-article-content img {
    max-width: 100%;
    height: auto;
    margin: 15px auto;
    display: block;
}
.coitt-single-post .coitt-article-share,
.coitt-layout-article .coitt-article-share {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
/* Astra native post-navigation, restyled to match the COITT/Joomla original:
   centered pair of pill buttons (light gray bg, secondary-blue text → hover blue bg/white text).
   Hides the adjacent post title Astra shows by default. */
.coitt-layout-article .post-navigation {
    margin-top: 20px;
    text-align: center;
}
/* Override Astra's default .post-navigation layout:
   - nav-links forced to 100% width with padding
   - each <a> forced to max-width: 80%
   - ::after pseudo-element creates a vertical separator line between buttons */
.single .coitt-layout-article .post-navigation .nav-links {
    display: inline-flex !important;
    width: auto !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    grid-gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    justify-content: center;
    align-items: stretch;
    font-size: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e6e6e6;
    border-radius: 0.25em;
    overflow: hidden;
}
.single .coitt-layout-article .post-navigation .nav-previous,
.single .coitt-layout-article .post-navigation .nav-next {
    flex: 0 0 auto;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    text-align: center;
    display: block !important;
}
/* Divider line between the two buttons (like original Joomla cd-pagination) */
.single .coitt-layout-article .post-navigation .nav-previous + .nav-next a {
    border-left: 1px solid #e6e6e6 !important;
}
/* Kill Astra's vertical separator line between prev/next */
.single .coitt-layout-article .post-navigation .nav-previous::after,
.single .coitt-layout-article .post-navigation .nav-next::before {
    display: none !important;
    content: none !important;
}
.single .coitt-layout-article .post-navigation a {
    max-width: none !important;
}
.coitt-layout-article .post-navigation .nav-links a {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 56px;
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f5f5 !important;
    color: var(--ast-global-color-1, #67c2d7) !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    overflow: hidden;
    transition: background .3s, color .3s;
}
/* Hide the post title that Astra adds by default (if any residual) */
.coitt-layout-article .post-navigation .nav-links a p { display: none !important; }

/* Arrow (visible in normal state) and text (hidden below, slides up on hover) */
.coitt-layout-article .post-navigation .nav-links .coitt-nav-arrow,
.coitt-layout-article .post-navigation .nav-links .coitt-nav-text {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: transform .3s ease;
}
/* Use the exact ap-arrows font from the original Joomla site */
@font-face {
    font-family: 'ap-arrows';
    src: url('fonts/ap-arrows/ap-arrows.woff') format('woff'),
         url('fonts/ap-arrows/ap-arrows.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Pe-icon-7-stroke font from the original Joomla site (rocket, keypad, globe, etc.) */
@font-face {
    font-family: 'peIcon7';
    src: url('fonts/pe-icon-7-stroke/Pe-icon-7-stroke.woff') format('woff'),
         url('fonts/pe-icon-7-stroke/Pe-icon-7-stroke.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
[class^="pe-7s-"], [class*=" pe-7s-"] {
    display: inline-block;
    font-family: 'peIcon7';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 6px;
    vertical-align: middle;
}
/* Complete Pe-icon-7-stroke glyph set (copied from the Joomla theme) */
.pe-7s-add-user:before{content:"\e6a9"} .pe-7s-airplay:before{content:"\e67f"} .pe-7s-alarm:before{content:"\e67e"} .pe-7s-album:before{content:"\e6aa"} .pe-7s-albums:before{content:"\e67d"} .pe-7s-anchor:before{content:"\e67c"} .pe-7s-angle-down:before{content:"\e688"} .pe-7s-angle-down-circle:before{content:"\e689"} .pe-7s-angle-left:before{content:"\e686"} .pe-7s-angle-left-circle:before{content:"\e687"} .pe-7s-angle-right:before{content:"\e684"} .pe-7s-angle-right-circle:before{content:"\e685"} .pe-7s-angle-up:before{content:"\e682"} .pe-7s-angle-up-circle:before{content:"\e683"} .pe-7s-arc:before{content:"\e6ab"} .pe-7s-attention:before{content:"\e67b"} .pe-7s-back:before{content:"\e67a"} .pe-7s-ball:before{content:"\e679"} .pe-7s-bandaid:before{content:"\e6ad"} .pe-7s-battery:before{content:"\e678"} .pe-7s-bell:before{content:"\e677"} .pe-7s-bicycle:before{content:"\e676"} .pe-7s-bluetooth:before{content:"\e68d"} .pe-7s-bookmarks:before{content:"\e675"} .pe-7s-bottom-arrow:before{content:"\e6a8"} .pe-7s-browser:before{content:"\e672"} .pe-7s-calculator:before{content:"\e671"} .pe-7s-call:before{content:"\e670"} .pe-7s-camera:before{content:"\e66f"} .pe-7s-car:before{content:"\e6ae"} .pe-7s-cart:before{content:"\e66e"} .pe-7s-cash:before{content:"\e68c"} .pe-7s-chat:before{content:"\e66d"} .pe-7s-check:before{content:"\e66c"} .pe-7s-clock:before{content:"\e66b"} .pe-7s-close:before{content:"\e680"} .pe-7s-close-circle:before{content:"\e681"} .pe-7s-cloud:before{content:"\e66a"} .pe-7s-cloud-download:before{content:"\e68b"} .pe-7s-cloud-upload:before{content:"\e68a"} .pe-7s-coffee:before{content:"\e669"} .pe-7s-comment:before{content:"\e668"} .pe-7s-compass:before{content:"\e667"} .pe-7s-config:before{content:"\e666"} .pe-7s-copy-file:before{content:"\e665"} .pe-7s-credit:before{content:"\e664"} .pe-7s-crop:before{content:"\e663"} .pe-7s-culture:before{content:"\e662"} .pe-7s-cup:before{content:"\e661"} .pe-7s-date:before{content:"\e660"} .pe-7s-delete-user:before{content:"\e6a7"} .pe-7s-diamond:before{content:"\e6af"} .pe-7s-disk:before{content:"\e6a6"} .pe-7s-diskette:before{content:"\e65f"} .pe-7s-door-lock:before{content:"\e6b0"} .pe-7s-download:before{content:"\e65c"} .pe-7s-drawer:before{content:"\e65b"} .pe-7s-drop:before{content:"\e65a"} .pe-7s-edit:before{content:"\e659"} .pe-7s-eyedropper:before{content:"\e6b1"} .pe-7s-female:before{content:"\e6b2"} .pe-7s-file:before{content:"\e656"} .pe-7s-film:before{content:"\e6a5"} .pe-7s-filter:before{content:"\e655"} .pe-7s-flag:before{content:"\e654"} .pe-7s-folder:before{content:"\e653"} .pe-7s-gift:before{content:"\e652"} .pe-7s-glasses:before{content:"\e651"} .pe-7s-gleam:before{content:"\e650"} .pe-7s-global:before{content:"\e64f"} .pe-7s-graph:before{content:"\e64e"} .pe-7s-gym:before{content:"\e6b3"} .pe-7s-hammer:before{content:"\e6b4"} .pe-7s-headphones:before{content:"\e6b5"} .pe-7s-helm:before{content:"\e6b6"} .pe-7s-home:before{content:"\e648"} .pe-7s-hourglass:before{content:"\e6b7"} .pe-7s-id:before{content:"\e68f"} .pe-7s-info:before{content:"\e647"} .pe-7s-joy:before{content:"\e6a4"} .pe-7s-junk:before{content:"\e646"} .pe-7s-key:before{content:"\e6a3"} .pe-7s-keypad:before{content:"\e645"} .pe-7s-leaf:before{content:"\e6b8"} .pe-7s-left-arrow:before{content:"\e6a2"} .pe-7s-less:before{content:"\e644"} .pe-7s-light:before{content:"\e643"} .pe-7s-like:before{content:"\e642"} .pe-7s-link:before{content:"\e641"} .pe-7s-lintern:before{content:"\e640"} .pe-7s-lock:before{content:"\e63f"} .pe-7s-look:before{content:"\e63e"} .pe-7s-loop:before{content:"\e63d"} .pe-7s-magic-wand:before{content:"\e6b9"} .pe-7s-magnet:before{content:"\e63c"} .pe-7s-mail:before{content:"\e639"} .pe-7s-mail-open:before{content:"\e63a"} .pe-7s-mail-open-file:before{content:"\e63b"} .pe-7s-male:before{content:"\e6ba"} .pe-7s-map:before{content:"\e637"} .pe-7s-map-marker:before{content:"\e638"} .pe-7s-medal:before{content:"\e6a0"} .pe-7s-menu:before{content:"\e636"} .pe-7s-micro:before{content:"\e635"} .pe-7s-monitor:before{content:"\e634"} .pe-7s-moon:before{content:"\e633"} .pe-7s-more:before{content:"\e632"} .pe-7s-mouse:before{content:"\e631"} .pe-7s-music:before{content:"\e630"} .pe-7s-musiclist:before{content:"\e62f"} .pe-7s-mute:before{content:"\e69f"} .pe-7s-network:before{content:"\e69e"} .pe-7s-news-paper:before{content:"\e62e"} .pe-7s-next:before{content:"\e62d"} .pe-7s-note:before{content:"\e62c"} .pe-7s-notebook:before{content:"\e62b"} .pe-7s-paint:before{content:"\e62a"} .pe-7s-paint-bucket:before{content:"\e6bd"} .pe-7s-paperclip:before{content:"\e69c"} .pe-7s-paper-plane:before{content:"\e629"} .pe-7s-pen:before{content:"\e628"} .pe-7s-pendrive:before{content:"\e6be"} .pe-7s-phone:before{content:"\e627"} .pe-7s-photo:before{content:"\e6bf"} .pe-7s-photo-gallery:before{content:"\e626"} .pe-7s-piggy:before{content:"\e6c0"} .pe-7s-pin:before{content:"\e69b"} .pe-7s-plane:before{content:"\e625"} .pe-7s-play:before{content:"\e624"} .pe-7s-plug:before{content:"\e69a"} .pe-7s-plugin:before{content:"\e6c1"} .pe-7s-plus:before{content:"\e623"} .pe-7s-portfolio:before{content:"\e622"} .pe-7s-power:before{content:"\e621"} .pe-7s-prev:before{content:"\e620"} .pe-7s-print:before{content:"\e61f"} .pe-7s-radio:before{content:"\e61e"} .pe-7s-refresh:before{content:"\e61c"} .pe-7s-refresh-cloud:before{content:"\e61d"} .pe-7s-repeat:before{content:"\e61b"} .pe-7s-ribbon:before{content:"\e61a"} .pe-7s-right-arrow:before{content:"\e699"} .pe-7s-rocket:before{content:"\e6c3"} .pe-7s-safe:before{content:"\e698"} .pe-7s-science:before{content:"\e619"} .pe-7s-scissors:before{content:"\e697"} .pe-7s-search:before{content:"\e618"} .pe-7s-server:before{content:"\e617"} .pe-7s-settings:before{content:"\e6c4"} .pe-7s-share:before{content:"\e616"} .pe-7s-shield:before{content:"\e6c5"} .pe-7s-shopbag:before{content:"\e615"} .pe-7s-shuffle:before{content:"\e614"} .pe-7s-signal:before{content:"\e613"} .pe-7s-smile:before{content:"\e6c6"} .pe-7s-speaker:before{content:"\e612"} .pe-7s-star:before{content:"\e611"} .pe-7s-stopwatch:before{content:"\e610"} .pe-7s-study:before{content:"\e60f"} .pe-7s-sun:before{content:"\e60e"} .pe-7s-switch:before{content:"\e696"} .pe-7s-target:before{content:"\e60d"} .pe-7s-ticket:before{content:"\e60c"} .pe-7s-timer:before{content:"\e60b"} .pe-7s-tools:before{content:"\e60a"} .pe-7s-trash:before{content:"\e609"} .pe-7s-umbrella:before{content:"\e608"} .pe-7s-unlock:before{content:"\e607"} .pe-7s-up-arrow:before{content:"\e695"} .pe-7s-upload:before{content:"\e606"} .pe-7s-usb:before{content:"\e6c7"} .pe-7s-user:before{content:"\e605"} .pe-7s-user-female:before{content:"\e694"} .pe-7s-users:before{content:"\e693"} .pe-7s-vector:before{content:"\e6c8"} .pe-7s-video:before{content:"\e604"} .pe-7s-voicemail:before{content:"\e603"} .pe-7s-volume:before{content:"\e692"} .pe-7s-wallet:before{content:"\e600"} .pe-7s-way:before{content:"\e68e"} .pe-7s-wine:before{content:"\e6c9"} .pe-7s-world:before{content:"\e691"} .pe-7s-wristwatch:before{content:"\e690"}


/* Per-page footer hide. Some Joomla menu items render with a minimal
 * footer (just the embedded contact module + copyright + legal, no
 * widgets / accreditation row). The codigat menu and its sub-items are
 * the canonical example. On WP we have one global Astra footer for the
 * whole site, so on those exceptions we hide both #colophon and the
 * custom bottom row via a page-id body class.
 * Detection: in Joomla, <footer id="sp-footer"> for these pages is
 * < ~22k bytes and contains 4 modules vs ~44k+ / 5+ modules for the
 * full footer. */
body.page-id-3468 #colophon,    /* /codigat */
body.page-id-3470 #colophon,    /* /codigat/contacto */
body.page-id-3472 #colophon,    /* /codigat/ediciones */
body.page-id-3474 #colophon,    /* /codigat/programa */
body.page-id-3476 #colophon,    /* /codigat/reunion-virtual */
/* /codigat (top page only) absorbs the copyright + legal links inside
 * its in-page dark contact section, so we suppress the global bottom
 * row on that one page to avoid duplication. The sub-pages don't have
 * an inline contact section, so their .coitt-footer-bottom stays
 * visible for the legal links. */
body.page-id-3468 .coitt-footer-bottom { display: none !important; }

/* Force white text inside migrated sections that declare white color on the wp:group wrapper
   (Astra's heading colors otherwise override the group's inline color).
   Matches color:#ffffff, color:#fff and color:rgba(255,255,255,...).
   The [style^=…] / [style*=";color…"] / [style*="; color…"] triad covers
   the property at the start, after a `;`, and after `; ` — without
   matching `background-color:#ffffffd6` (semi-transparent white bg) which
   would otherwise produce a substring false positive. */
.wp-block-group[style^="color:#ffffff"] :is(h1,h2,h3,h4,h5,h6,p,li,i),
.wp-block-group[style*=";color:#ffffff"] :is(h1,h2,h3,h4,h5,h6,p,li,i),
.wp-block-group[style*="; color:#ffffff"] :is(h1,h2,h3,h4,h5,h6,p,li,i),
.wp-block-group[style^="color:#fff;"] :is(h1,h2,h3,h4,h5,h6,p,li,i),
.wp-block-group[style*=";color:#fff;"] :is(h1,h2,h3,h4,h5,h6,p,li,i),
.wp-block-group[style*="; color:#fff;"] :is(h1,h2,h3,h4,h5,h6,p,li,i),
.wp-block-group[style^="color:rgba(255, 255, 255"] :is(h1,h2,h3,h4,h5,h6,p,li,i),
.wp-block-group[style*=";color:rgba(255, 255, 255"] :is(h1,h2,h3,h4,h5,h6,p,li,i),
.wp-block-group[style*="; color:rgba(255, 255, 255"] :is(h1,h2,h3,h4,h5,h6,p,li,i) {
    color: #ffffff !important;
}

/* COITT course/webinar action buttons (match original Joomla colors + icons).
   Colors come from inline styles emitted in gutenberg.py; do NOT use !important here,
   the JS hover filter in functions.php swaps them on mouseenter/mouseleave. */
.coitt-btn-inscribete .wp-block-button__link,
.coitt-btn-otros-cursos .wp-block-button__link,
.coitt-btn-plataforma .wp-block-button__link {
    transition: background-color .2s ease, color .2s ease;
}
.coitt-layout-article .post-navigation .nav-links .coitt-nav-arrow {
    transform: translateY(0);
    font-family: 'ap-arrows';
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}
.coitt-layout-article .post-navigation .nav-links .coitt-nav-arrow-prev::before {
    content: "\e606";
}
.coitt-layout-article .post-navigation .nav-links .coitt-nav-arrow-next::before {
    content: "\e607";
}
.coitt-layout-article .post-navigation .nav-links .coitt-nav-text {
    transform: translateY(100%);
    font-size: 14px;
    font-weight: 400;
}
/* Hover: arrow slides up and out, text slides up into view; colors swap */
.coitt-layout-article .post-navigation .nav-links a:hover,
.coitt-layout-article .post-navigation .nav-links a:focus {
    background: var(--ast-global-color-1, #67c2d7) !important;
    color: #ffffff !important;
}
.coitt-layout-article .post-navigation .nav-links a:hover .coitt-nav-arrow,
.coitt-layout-article .post-navigation .nav-links a:focus .coitt-nav-arrow {
    transform: translateY(-100%);
}
.coitt-layout-article .post-navigation .nav-links a:hover .coitt-nav-text,
.coitt-layout-article .post-navigation .nav-links a:focus .coitt-nav-text {
    transform: translateY(0);
}
.coitt-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none;
    font-size: 18px;
    transition: opacity 0.3s;
}
.coitt-share-btn:hover { opacity: 0.8; }
.coitt-share-facebook { background: #3b5998; }
.coitt-share-twitter { background: #1da1f2; }
.coitt-share-linkedin { background: #0077b5; }

/* === Magazine layout (Revista @ntena) === */
.coitt-layout-magazine .coitt-magazine-body {
    max-width: 900px;
    margin: 0 auto;
}
.coitt-layout-magazine .coitt-magazine-cover {
    text-align: center;
    margin-bottom: 30px;
}
.coitt-layout-magazine .coitt-magazine-cover img {
    max-width: 400px;
    height: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.coitt-layout-magazine .coitt-magazine-content {
    font-size: 16px;
    line-height: 1.7;
}

/* ======= Footer widget columns ======= */
.site-footer .coitt-footer-heading {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
}
.site-footer .coitt-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer .coitt-footer-list li {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.site-footer .coitt-footer-list li a {
    color: #e5e5e5;
    text-decoration: none;
    display: inline-block;
}
.site-footer .coitt-footer-list li a:hover {
    color: #67c2d7;
    text-decoration: underline;
}
.site-footer .coitt-cookie-btn .wp-block-button__link {
    background-color: rgba(255,255,255,0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.77) !important;
    border-radius: 4px !important;
    font-size: 14px;
}
.site-footer .coitt-cookie-btn .wp-block-button__link:hover {
    background-color: rgba(255,255,255,0.15) !important;
}
.coitt-footer-bottom a:hover { color: #67c2d7 !important; text-decoration: underline; }
/* In-page contact / legal-links bars rendered as a wp:group with the
 * site-footer dark gray background (#363839) — codigat is the canonical
 * example. The inline `style="color:#a3a3a3"` on each link wins over
 * descendant rules, so the hover state needs `!important` to take over. */
.wp-block-group[style*="background-color:#363839"] a:hover,
.wp-block-group[style*="background-color:#363839"] a:focus {
    color: #67c2d7 !important;
}
/* ============================================================
 * Pagination — cyan pill buttons matching production telecos.zone
 *
 * UAGB injects per-block inline CSS (e.g. `.uagb-block-3bdffeb1
 * .uagb-post-pagination-wrap a {...}`); we use the [class*="uagb-block-"]
 * attribute selector to match every UAGB instance and override its layout.
 * Layout: centered horizontal row that wraps on narrow viewports — never a
 * vertical stack. Colors: cyan text on white background by default; solid
 * cyan with white text for the current page (and on hover).
 * ============================================================ */
[class*="uagb-block-"] .uagb-post-pagination-wrap,
.coitt-category-pagination,
.navigation.pagination {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0 !important;          /* buttons join edge-to-edge */
    width: 100%;
    margin: 30px auto;
    padding: 0;
}
[class*="uagb-block-"] .uagb-post-pagination-wrap a.page-numbers,
[class*="uagb-block-"] .uagb-post-pagination-wrap span.page-numbers,
.coitt-category-pagination .page-numbers,
.navigation.pagination .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 48px;
    padding: 14px 22px !important;   /* larger, fuller buttons */
    margin: 0 !important;
    background-color: #fff !important;
    color: #67c2d7 !important;
    border: 1px solid #67c2d7 !important;
    border-radius: 0 !important;     /* square corners */
    border-right: 0 !important;      /* avoid double border between adjacent buttons */
    font-size: 15px;
    line-height: 1.2;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
    user-select: none;
}
/* The last button keeps its right border so the row closes properly. */
[class*="uagb-block-"] .uagb-post-pagination-wrap > .page-numbers:last-child,
.coitt-category-pagination .page-numbers:last-child,
.navigation.pagination .page-numbers:last-child {
    border-right: 1px solid #67c2d7 !important;
}
[class*="uagb-block-"] .uagb-post-pagination-wrap a.page-numbers:hover,
.coitt-category-pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover {
    background-color: #67c2d7 !important;
    color: #fff !important;
}
[class*="uagb-block-"] .uagb-post-pagination-wrap span.page-numbers.current,
.coitt-category-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
    background-color: #67c2d7 !important;
    color: #fff !important;
    cursor: default;
}

/* === Off-canvas drawer: replica del layout Joomla Helix off-canvas =====
 * El plugin off-canvas-sidebars genera <div id="ocs-main"> con la nav.
 * Estos estilos lo igualan visualmente al panel de Joomla:
 *  - panel blanco que entra desde la derecha, ancho 320px
 *  - botón X en la esquina superior derecha
 *  - caja de búsqueda en la parte superior
 *  - menu accordion: items con submenu llevan flecha que rota al expandir
 */
#ocs-main {
    background: #ffffff;
    width: 320px;
    padding: 16px 0 30px;
    color: #444;
}
#ocs-main .ocs-search-wrap {
    padding: 0 18px 18px;
}
#ocs-main .ocs-search-wrap input[type="search"] {
    width: 100%;
    border: 1px solid #ddd;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 0;
    background: #f5f5f5;
}
#ocs-main nav ul,
#ocs-main nav ul ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#ocs-main nav ul.menu > li,
#ocs-main nav .menu-item {
    position: relative;
    border-bottom: 1px solid #eee;
}
#ocs-main nav .menu-item > a {
    display: block;
    padding: 10px 38px 10px 18px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
}
#ocs-main nav .menu-item > a:hover,
#ocs-main nav .menu-item.current-menu-item > a {
    color: #67c2d7;
    background: #fafafa;
}
/* submenu togglers */
#ocs-main nav .ocs-submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #888;
    transition: transform .2s ease;
    z-index: 1;
}
#ocs-main nav .ocs-submenu-toggle::before {
    content: "\f107"; /* fa-angle-down */
    font-family: "FontAwesome";
    font-size: 16px;
}
#ocs-main nav .menu-item.is-open > .ocs-submenu-toggle {
    transform: rotate(180deg);
}
/* hide nested submenus by default; expand when parent is .is-open */
#ocs-main nav .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    background: #f7f9fa;
}
#ocs-main nav .menu-item.is-open > .sub-menu {
    max-height: 1500px;
}
#ocs-main nav .sub-menu .menu-item > a {
    padding-left: 32px;
    font-size: 13px;
    color: #555;
}
#ocs-main nav .sub-menu .sub-menu .menu-item > a {
    padding-left: 46px;
    font-size: 12px;
    color: #666;
}

/* style the trigger menu item (☰) so it sits visually like an icon */
.ocs-toggle-main > a,
li.ocs-toggle-main > a,
li.coitt-hamburger-trigger > a {
    font-size: 22px !important;
    line-height: 1 !important;
    padding: 0 10px !important;
}

/* === Search results page === */
.coitt-search-results {
    padding: 30px 0 60px;
    background: #fff;
}
.coitt-search-results .coitt-search-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}
.coitt-search-header {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 18px;
    margin-bottom: 24px;
}
.coitt-search-header .coitt-search-title {
    font-family: "Raleway", sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: #3b3b3b;
    margin: 0 0 6px;
}
.coitt-search-header .coitt-search-title em {
    color: #67c2d7;
    font-style: normal;
    font-weight: 600;
}
.coitt-search-header .coitt-search-count {
    margin: 0;
    color: #6b6b6b;
    font-size: 14px;
}
.coitt-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.coitt-search-list .coitt-search-item {
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
}
.coitt-search-list .coitt-search-item:last-child {
    border-bottom: 0;
}
.coitt-search-item-title {
    font-family: "Raleway", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 6px;
}
.coitt-search-item-title a {
    color: #67c2d7;            /* theme cyan (--ast-global-color-1) */
    text-decoration: none;
    transition: color .15s ease;
}
.coitt-search-item-title a:hover,
.coitt-search-item-title a:focus {
    color: var(--ast-global-color-4, #005fa3);   /* darker primary blue */
}
.coitt-search-item-excerpt {
    color: #555;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 6px;
}
.coitt-search-item-date {
    display: inline-block;
    color: #8b8b8b;
    font-size: 12px;
}
.coitt-search-empty {
    color: #6b6b6b;
    padding: 40px 0;
    text-align: center;
}

/* In-content text links: light secondary blue, darker on hover.
   Scoped to post content so we don't override menus, buttons, breadcrumbs. */
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.coitt-card-link):not(.sppb-gallery-btn),
.wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-element-button) {
    color: #a0dfef;
    transition: color 0.2s ease-in-out;
}
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.coitt-card-link):not(.sppb-gallery-btn):hover,
.wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-element-button):hover {
    color: #67c2d7;
}

/* Bootstrap-3 style grid for SP Page Builder addons that survived migration as
   raw HTML (sppb-addon-articles, gallery rows, etc.). Joomla's Helix template
   provided this; in WP we re-implement only what we use: 3-col / 2-col / 6-col
   flex layouts. */
.sppb-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.sppb-row > [class*="sppb-col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    margin-bottom: 30px;
}
.sppb-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
.sppb-col-sm-6  { flex: 0 0 50%;  max-width: 50%; }
.sppb-col-sm-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.sppb-col-sm-3  { flex: 0 0 25%;  max-width: 25%; }
.sppb-col-sm-2  { flex: 0 0 16.667%; max-width: 16.667%; }
@media (max-width: 768px) {
    .sppb-col-sm-4, .sppb-col-sm-3, .sppb-col-sm-2 { flex: 0 0 100%; max-width: 100%; }
    .sppb-col-sm-6 { flex: 0 0 100%; max-width: 100%; }
}
.sppb-addon-articles .sppb-addon-article img.sppb-img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 12px;
}
.sppb-addon-articles .sppb-addon-article h3 {
    font-size: 18px;
    margin: 0 0 8px;
    line-height: 1.3;
}
.sppb-addon-articles .sppb-addon-article h3 a {
    color: #0066cc;
}
.sppb-addon-articles .sppb-article-meta {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
    display: block;
}
.sppb-addon-articles .sppb-article-meta > span {
    margin-right: 12px;
}
.sppb-addon-articles .sppb-article-introtext {
    font-size: 14px;
    color: #444;
    margin-bottom: 10px;
}
.sppb-addon-articles .sppb-readmore {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
}

/* ============================================================================
 * Artículos del blog (blog-sobre-el-coitt): layout a 2 columnas con barra
 * lateral dinámica "Más / Formación / Uno de los nuestros" (igual que prod).
 * ========================================================================== */
.coitt-layout-article .coitt-article-body.coitt-blog-layout {
    max-width: 1160px;
    display: flex;
    align-items: flex-start;
    gap: 45px;
}
.coitt-blog-layout .coitt-article-primary {
    flex: 1 1 auto;
    min-width: 0;
}
.coitt-blog-aside {
    flex: 0 0 300px;
    width: 300px;
    font-family: 'Raleway', sans-serif;
}
@media (max-width: 921px) {
    .coitt-layout-article .coitt-article-body.coitt-blog-layout { display: block; max-width: 870px; }
    .coitt-blog-aside { width: 100%; margin-top: 45px; }
}
.coitt-side-block { margin-bottom: 26px; }
.coitt-side-title.coitt-tsep-heading {
    display: inline-table;
    font-family: 'Raleway', sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: #3b3b3b;
    padding-right: 30px;
    box-shadow: inset 0 -1px 0 #dddddd;
    margin: 0 0 18px 0;
    line-height: 1.3;
}
.coitt-side-title.coitt-tsep-heading::after {
    clear: both; display: block; float: left; content: "";
    position: relative; height: 2px; width: 70%;
    margin: 8px 30% 0 0; border-radius: 2px; background: #67c2d7;
}
.coitt-side-list { list-style: none; margin: 0; padding: 0; }
.coitt-side-item { margin-bottom: 15px; }
.coitt-side-item a {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: #3b3b3b;
}
.coitt-side-thumb {
    flex: 0 0 72px; width: 72px; height: 56px;
    overflow: hidden; border-radius: 4px; background: #f0f0f0;
}
.coitt-side-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coitt-side-name { font-size: 13px; line-height: 1.35; font-weight: 500; }
.coitt-side-item a:hover .coitt-side-name { color: #67c2d7; }
.coitt-side-cta {
    display: flex; flex-direction: column; gap: 10px; margin: 16px 0 26px;
}
.coitt-side-btn {
    display: block; text-align: center; text-decoration: none;
    background: #006cff; color: #fff !important;
    border-radius: 4px; padding: 11px 18px;
    font-size: 14px; font-weight: 600;
    transition: background .2s ease;
}
.coitt-side-btn:hover { background: #0056cc; }

/* Tamaños de fuente más grandes en la barra lateral del blog (no afecta a
 * la sidebar de webinars/cursos, que usa solo .coitt-single-post). */
.coitt-single-post .coitt-blog-aside .coitt-sidebar-posts a {
    font-size: 24px;
    line-height: 1.3;
}

/* Coworking (Azca 6229 / Manuel Tovar 6230 / duplicados 3490,3492): fichas de
 * "Precios". Fondo claro en todas las fichas; y SOLO el precio (el <p> sin
 * has-link-color) en gris oscuro. El encabezado y las features (que llevan
 * has-link-color) mantienen su color original. */
/* Fichas de fondo CLARO (todas menos las marcadas .coitt-card-onblue): fondo
 * gris claro, nombre del plan en teal y precio/features en gris oscuro. */
.page-id-6229 .wp-block-columns .wp-block-column .wp-block-group.has-background:not(.coitt-card-onblue),
.page-id-6230 .wp-block-columns .wp-block-column .wp-block-group.has-background:not(.coitt-card-onblue) {
    background-color: #f7f7f7;
    border-radius: 5px;
}
.page-id-6229 .wp-block-columns .wp-block-group.has-background:not(.coitt-card-onblue) h4,
.page-id-6230 .wp-block-columns .wp-block-group.has-background:not(.coitt-card-onblue) h4 {
    color: #67c2d7 !important;
}
.page-id-6229 .wp-block-columns .wp-block-group.has-background:not(.coitt-card-onblue) p,
.page-id-6229 .wp-block-columns .wp-block-group.has-background:not(.coitt-card-onblue) p strong,
.page-id-6230 .wp-block-columns .wp-block-group.has-background:not(.coitt-card-onblue) p,
.page-id-6230 .wp-block-columns .wp-block-group.has-background:not(.coitt-card-onblue) p strong {
    color: #3b3b3b !important;
}
/* Fichas sobre la sección AZUL: fondo transparente (se ve el azul) y texto blanco. */
.coitt-card-onblue.wp-block-group.has-background {
    background-color: transparent !important;
}
.coitt-card-onblue h4,
.coitt-card-onblue p,
.coitt-card-onblue p strong,
.coitt-card-onblue small {
    color: #ffffff !important;
}

/* Home: cards de profiles-section (módulos "Uno de los nuestros" y "Sobre el
 * COITT") — igualar altura. Las imágenes y subtítulos ya son iguales; los
 * títulos varían mucho (citas largas vs titulares cortos). Reservamos una
 * altura fija de 4 líneas para el título (clamp con elipsis) → cards iguales. */
.profile-card .profile-card-body h4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 5.6em;
}
/* Igualar también la altura de imagen de las cards (perfiles 1.90 vs blog 1.95). */
.profile-card .profile-card-img-wrap img {
    aspect-ratio: 250 / 131;
    object-fit: cover;
    height: auto;
}

/* Coworking Azca duplicada (servicios, id 3639): mismas reglas de ficha. */
.page-id-3639 .wp-block-columns .wp-block-column .wp-block-group.has-background:not(.coitt-card-onblue) {
    background-color: #f7f7f7;
    border-radius: 5px;
}
.page-id-3639 .wp-block-columns .wp-block-group.has-background:not(.coitt-card-onblue) h4 {
    color: #67c2d7 !important;
}
.page-id-3639 .wp-block-columns .wp-block-group.has-background:not(.coitt-card-onblue) p,
.page-id-3639 .wp-block-columns .wp-block-group.has-background:not(.coitt-card-onblue) p strong {
    color: #3b3b3b !important;
}

/* Coworking Azca/M.Tovar (estructura "patrimonial" 3490/3492): las clases de
 * color de WP no se aplican y el texto hereda blanco de la sección. Forzamos:
 * fichas de fondo CLARO (color-5/#f5f5f5) → texto oscuro; fichas TEAL
 * (color-1/#67c2d7) → texto blanco. */
.page-id-3490 .wp-block-group.has-ast-global-color-5-background-color *:not(a):not(hr):not(.wp-block-separator),
.page-id-3492 .wp-block-group.has-ast-global-color-5-background-color *:not(a):not(hr):not(.wp-block-separator),
.page-id-3490 .wp-block-group.has-ast-global-color-4-background-color *:not(a):not(hr):not(.wp-block-separator),
.page-id-3492 .wp-block-group.has-ast-global-color-4-background-color *:not(a):not(hr):not(.wp-block-separator) {
    color: #3b3b3b !important;
}
.page-id-3490 .wp-block-group.has-ast-global-color-1-background-color *:not(a):not(hr):not(.wp-block-separator),
.page-id-3492 .wp-block-group.has-ast-global-color-1-background-color *:not(a):not(hr):not(.wp-block-separator) {
    color: #ffffff !important;
}

/* Home "Descuentos especiales": dinamismo. Si se quitan todos los banners de
 * descuento (acuerdo no activo), el apartado entero se oculta solo, pero el
 * bloque permanece en la página para reactivarlo añadiendo banners de nuevo. */
.coitt-descuentos:not(:has(.wp-block-image)) {
    display: none !important;
}

/* Libre Ejercicio (page 69): fondos de las secciones de texto blanco mediante
 * CLASE (persistente — Gutenberg conserva className), no inline (que el editor
 * borra al guardar). coitt-le-bg1 = primera sección, coitt-le-bg2 = ORIENTACIÓN. */
.coitt-le-bg1,
.coitt-le-bg2 {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.coitt-le-bg1 { background-image: url('https://pre.telecos.zone/images/2020/01/16/panel.png'); }
.coitt-le-bg2 { background-image: url('https://pre.telecos.zone/images/2020/01/16/panel_gris.png'); }

/* Query loops con imagen destacada a aspect-ratio fijo (Noticias y demás):
 * la img con height:100% no resuelve contra el aspect-ratio y estira la caja,
 * dejando portadas de distinto alto. Posicionamos la img en absoluto para que
 * rellene la caja 16:9 (u otra) y recorte en "cover", homogeneizando todas. */
.wp-block-post-featured-image[style*="aspect-ratio"] {
    position: relative;
    overflow: hidden;
}
.wp-block-post-featured-image[style*="aspect-ratio"] img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Actualidad "Últimas Noticias" (query loop): capitalizar la fecha (es_ES la
 * genera en minúscula) para igualar el aspecto del diseño original. */
.coitt-ultimas-noticias .wp-block-post-date { text-transform: capitalize; }

/* Junta de Gobierno (page 10): centrar verticalmente el contenido (nombre +
 * botón LinkedIn) de la columna de texto de cada ficha, para que todos los
 * botones queden a la misma altura (al centro) y no arriba/abajo. */
.page-id-10 .wp-block-columns .wp-block-column:has(> .wp-block-buttons) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Junta (page 10): igualar la altura del parrafo de nombre (algunos cargos/nombres
 * ocupan 3 lineas y otros 2) para que TODOS los botones de LinkedIn queden
 * exactamente a la misma altura, con el texto centrado dentro del bloque. */
.page-id-10 .wp-block-columns .wp-block-column:has(> .wp-block-buttons) > p {
    min-height: 87px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
}

/* Circulares (page 3580): lista de desplegables (wp:details) con aspecto de
 * viewlist: separador entre items, titulo en teal, indicador y padding. */
.page-id-3580 .wp-block-details {
    border-bottom: 1px solid #e6e6e6;
    padding: 12px 6px;
    margin: 0;
}
.page-id-3580 .wp-block-details > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ast-global-color-1, #67c2d7);
    list-style: none;
    position: relative;
    padding-left: 26px;
}
.page-id-3580 .wp-block-details > summary::-webkit-details-marker { display: none; }
.page-id-3580 .wp-block-details > summary::before {
    content: "\25B6";
    position: absolute;
    left: 6px;
    font-size: 12px;
    transition: transform .15s ease;
    color: var(--ast-global-color-1, #67c2d7);
}
.page-id-3580 .wp-block-details[open] > summary::before { transform: rotate(90deg); }
.page-id-3580 .wp-block-details[open] > summary { margin-bottom: 12px; }
.page-id-3580 .wp-block-details p { margin: 0 0 .8em; }