/* estilos.css - AP Resolve | consolidado desde index/header/footer (22-jun-2026) */

/* ============================ BASE / VARIABLES ============================ */
:root{
            --color-primary: #0E5A6F;
            --color-secondary: #18A7A1;
            --color-secondary-dark: #128C87;
            --color-white: #FFFFFF;
        }
        .bg-primary-custom{ background-color: var(--color-primary)!important; }
        .bg-secondary-custom{ background-color: var(--color-secondary)!important; }
        .text-primary-custom{ color: var(--color-primary)!important; }
        .text-secondary-custom{ color: var(--color-secondary)!important; }
        .btn-primary-custom{ background-color: var(--color-primary); border-color: var(--color-primary); color:#fff; }
        .btn-primary-custom:hover{ background-color: var(--color-secondary); border-color: var(--color-secondary); color:#fff; }
        .btn-secondary-custom{ background-color: var(--color-secondary); border-color: var(--color-secondary); color:#fff; }
        .btn-secondary-custom:hover{ background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color:#fff; }
        .btn-outline-custom{ border:2px solid #fff; color:#fff; background:transparent; }
        .btn-outline-custom:hover{ background:#fff; color: var(--color-primary); }
        .hero-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg, rgba(14,90,111,.82), rgba(24,167,161,.55)); }
        .logo-track{ display:flex; animation: scrollLogos 80s linear infinite; }
        .logo-track:hover{ animation-play-state: paused; }
        @keyframes scrollLogos{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
        .instructor-img{ width:130px; height:130px; object-fit:cover; }
        .client-logo{ height:60px; width:auto; max-width:150px; object-fit:contain; margin:0 1.5rem; opacity:.75; transition:opacity .3s; }
        .client-logo:hover{ opacity:1; }

/* ============================ NUESTROS CLIENTES (carrusel logos) ============================ */
/* CONTENEDOR GENERAL */
.logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* CONTENEDOR OCULTO */
.logo-container {
    overflow: hidden;
    width: 100%;
}

/* TRACK */
.logo-track {
    display: flex;
    gap: 60px;
    width: max-content;

    /* 👇 MÁS LENTO (ANTES 25s) */
    animation: scrollLogos 60s linear infinite;
}

/* ANIMACIÓN */
@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* LOGOS BASE */
.client-logo {
    height: 55px;
    max-width: 120px;
    object-fit: contain;

    transition: all .4s ease;
}

/* 👇 EFECTO “DESVANECIDO” GENERAL */
.logo-container::before,
.logo-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* IZQUIERDA */
.logo-container::before {
    left: 0;
    background: linear-gradient(to right, white 40%, transparent);
}

/* DERECHA */
.logo-container::after {
    right: 0;
    background: linear-gradient(to left, white 40%, transparent);
}

/* 👇 EFECTO GRIS SUAVE EN TODA LA LÍNEA */
.logo-track img {
    filter: grayscale(70%);
    opacity: 0.7;
}

/* 👇 CUANDO PASA AL CENTRO SE VE MÁS COLOR */
.logo-track img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* FLECHAS */
.logo-btn {
    position: absolute;
    z-index: 3;
    background: #000;
    color: #fff;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.6;
}

.logo-btn:hover {
    opacity: 1;
}

.logo-btn.prev {
    left: 10px;
}

.logo-btn.next {
    right: 10px;
}

/* ============================ TESTIMONIOS ============================ */
.testimonial-card {
    padding: 22px;
    text-align: center;
    height: 100%;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 12px;
    transition: 0.3s;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.testimonial-card hr {
    margin: 12px auto;
    width: 50%;
}

/* Flechas separadas */
.carousel-control-prev {
    left: -50px;
}
.carousel-control-next {
    right: -50px;
}

/* Flechas visibles */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0,0,0,0.7);
    border-radius: 50%;
    padding: 15px;
}

/* ============================ SERVICIOS ============================ */
.servicio-card {
    border-radius: 12px;
    transition: 0.3s;
    height: 100%;
}

.servicio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* 👇 CLAVE: FLEX PARA ALINEAR TODO */
.servicio-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* CONTENIDO */
.servicio-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* TEXTO CON ALTURA IGUAL */
.servicio-text {
    min-height: 90px;
}

/* BOTÓN SIEMPRE ABAJO */
.servicio-btn {
    margin-top: auto;
}

/* FLECHAS */
.carousel-control-prev {
    left: -40px;
}
.carousel-control-next {
    right: -40px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0,0,0,0.7);
    border-radius: 50%;
    padding: 15px;
}

/* INDICADORES CENTRADOS ABAJO */
.carousel-indicators {
    bottom: -40px;
}

.carousel-indicators [data-bs-target] {
    background-color: #000;
}
.carousel-indicators .active {
    background-color: #0d6efd;
}

/* ============================ CURSOS Y MEMBRESIA ============================ */
.cursos-section {
    background-color: #2f2f2f;
    color: #fff;
}

.curso-card {
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
    height: 100%;
}

.curso-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* 👇 CLAVE: TODAS LAS IMÁGENES IGUALES */
.curso-img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

/* BOTONES */
.curso-btn {
    background: #18a7a1;
    color: #fff;
    border-radius: 50px;
}

.curso-btn:hover {
    background: #15918c;
    color: #fff;
}

/* ============================ FOOTER ============================ */
.footer-dark {
    background: #1f2e3d;
    color: #fff;
}

.footer-top {
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.footer-logos img {
    height: 40px;
    margin: 10px;
    opacity: 0.85;
    filter: grayscale(100%);
    transition: 0.3s;
}

.footer-logos img:hover {
    filter: none;
    opacity: 1;
}

.footer-whatsapp {
    background: #25D366;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 20px auto;
    font-size: 28px;
    color: #fff;
    text-decoration: none;
}

.footer-bottom {
    background: #18a7a1;
}

/* Frase del footer — la clienta la pidió un poco más grande (A11.4) */
.footer-frase {
    font-size: 1.12rem;
    line-height: 1.6;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Leyenda de Agente Capacitador Externo (A11.3) */
.footer-stps {
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

/* Logos institucionales oficiales (CANACO, STPS, REPSE, Agente Cap. Ext.) — blancos, fondo transparente */
.footer-oficiales { gap: 28px 40px; }
.footer-oficiales img { height: 56px; width: auto; max-width: 100%; object-fit: contain; opacity: .9; transition: opacity .3s; }
.footer-oficiales img:hover { opacity: 1; }
.footer-oficiales img.oficial-texto { height: 30px; }
@media (max-width: 576px) {
    .footer-oficiales img { height: 42px; }
    .footer-oficiales img.oficial-texto { height: 22px; }
}

/* ============================ PÁGINAS INTERNAS ============================ */
.page-hero {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    padding: 56px 0 48px;
}
.page-hero h1 { font-weight: 700; font-size: 2.2rem; margin: 0; }
.page-hero p { opacity: .9; margin: 8px 0 0; }
.page-hero .breadcrumb a { color: #fff; opacity: .8; text-decoration: none; }
.page-hero .breadcrumb-item.active, .page-hero .breadcrumb-item + .breadcrumb-item::before { color: #fff; opacity: .8; }

.texto-institucional p { font-size: 1.05rem; line-height: 1.75; color: #333; }
.dato-registro { border-left: 4px solid var(--color-secondary); background: #f3f9f9; padding: 16px 20px; border-radius: 0 10px 10px 0; }
.mv-card { border: 0; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.07); height: 100%; }
.mv-card .mv-icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-secondary); color: #fff; font-size: 1.5rem; }
.valor-card { border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.06); padding: 22px; height: 100%; border-top: 4px solid var(--color-secondary); }
.valor-card h6 { color: var(--color-primary); font-weight: 700; letter-spacing: .5px; }

/* Calendario / Normas: visor PDF */
.pdf-frame { width: 100%; height: 75vh; min-height: 520px; border: 0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); background: #f5f5f5; }
.norma-tab { border: 2px solid #e3eeee; border-radius: 12px; padding: 14px 16px; text-align: left; background: #fff; width: 100%; transition: .2s; }
.norma-tab strong { display: block; color: var(--color-primary); }
.norma-tab small { color: #666; }
.norma-tab:hover { border-color: var(--color-secondary); }
.norma-tab.active { border-color: var(--color-secondary); background: #eef8f7; }

/* Galería: carrusel continuo + cuadrícula */
.gal-wrapper { position: relative; }
.gal-viewport { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.gal-viewport::-webkit-scrollbar { display: none; }
.gal-track { display: flex; gap: 18px; padding: 6px 4px 16px; }
.gal-item { flex: 0 0 280px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.08); cursor: pointer; transition: transform .3s; border: 0; padding: 0; text-align: left; }
.gal-item:hover { transform: translateY(-4px); }
.gal-item img { width: 100%; height: 200px; object-fit: cover; display: block; }
.gal-item span { display: block; padding: 10px 14px; font-weight: 600; font-size: .85rem; color: var(--color-primary); text-transform: uppercase; }
.gal-btn { position: absolute; top: 40%; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 1.2rem; }
.gal-btn:hover { background: #000; }
.gal-btn.prev { left: -8px; } .gal-btn.next { right: -8px; }
.gal-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; cursor: pointer; transition: opacity .3s; }
.gal-grid img:hover { opacity: .85; }
@media (max-width: 576px) { .gal-item { flex-basis: 78vw; } }

/* Contacto */
.contacto-card { border: 0; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.07); height: 100%; text-align: center; padding: 28px 20px; }
.contacto-card i { font-size: 2rem; color: var(--color-secondary); }
.contacto-card a { color: var(--color-primary); font-weight: 600; text-decoration: none; }

/* Menú: 10 entradas en una sola línea (nombres sin partir) */
.navbar-nav .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399px) {
    .navbar-nav .nav-link.px-3 { padding-left: .45rem !important; padding-right: .45rem !important; font-size: .92rem; }
    .navbar-nav .btn.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; font-size: .9rem; }
}

/* Links secundarios en el footer (Quiénes Somos, Galería, Normas, Blog, Contacto) */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.footer-links a { color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .9; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 1199px) { .cintillo-datos small { font-size: .78rem; margin-right: .6rem !important; } }

/* ============================ BLOG / CONFERENCIAS ============================ */
.blog-buscar .input-group-text { background: #fff; border-right: 0; color: var(--color-secondary); }
.blog-buscar .form-control { border-left: 0; }
.blog-card { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.07); text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.12); color: inherit; }
.blog-card-img { width: 100%; height: 210px; object-fit: cover; }
.blog-fecha { font-size: .8rem; color: var(--color-secondary-dark); font-weight: 600; margin-bottom: .5rem; }
.blog-titulo { font-size: 1.08rem; font-weight: 700; color: var(--color-primary); line-height: 1.35; margin-bottom: .6rem; }
.blog-extracto { font-size: .9rem; color: #555; margin-bottom: 1rem; }
.blog-leer { font-size: .88rem; font-weight: 700; color: var(--color-secondary); }
.conf-fecha { display: inline-block; margin-bottom: .7rem; background: var(--color-primary); color: #fff; font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 50px; }
.pagination .page-link { color: var(--color-primary); border-radius: 50% !important; margin: 0 3px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.pagination .active .page-link { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }

/* Detalle */
.articulo-img { width: 100%; max-height: 460px; object-fit: cover; }
.articulo-cuerpo { font-size: 1.05rem; line-height: 1.75; color: #222; overflow-wrap: anywhere; }
.articulo-cuerpo img { max-width: 100%; height: auto; }
.articulo-cuerpo table { max-width: 100%; display: block; overflow-x: auto; }
.articulo-cuerpo h2, .articulo-cuerpo h3 { margin-top: 1.6rem; margin-bottom: .8rem; font-weight: 700; }
.articulo-cuerpo span[style*="font-size"] { font-size: inherit !important; }
.compartir { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef6f6; color: var(--color-primary); font-size: 1.1rem; }
.compartir:hover { background: var(--color-secondary); color: #fff; }
.lateral-box { background: #f6f9f9; border-radius: 14px; padding: 22px; }
.lateral-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e3eded; text-decoration: none; color: #333; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.lateral-item:hover { color: var(--color-secondary); }
.lateral-item img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.lateral-cta { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: #fff; }
@media (min-width: 992px) { .lateral-sticky { position: sticky; top: 110px; } }
.conf-img { object-fit: contain; background: #0e2f3a; height: 320px; }
@media (max-width: 576px) { .page-hero { padding: 36px 0 30px; } .page-hero h1 { font-size: 1.55rem; } }
.instructor-ficha-img { width: 220px; height: 220px; object-fit: cover; border: 6px solid #fff; }

/* ============================ REVISIÓN 21-SEP (brief jun-26) ============================ */
/* Hero a 3/4 del ancho en escritorio (A7.1) + flechas y líneas visibles (A7.2) */
@media (min-width: 992px) {
    .hero-wrap { padding-top: 22px; }
    .hero-wrap #heroCarousel { max-width: 75%; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
}
#heroCarousel .carousel-control-prev { left: 12px; }
#heroCarousel .carousel-control-next { right: 12px; }
#heroCarousel .carousel-control-prev, #heroCarousel .carousel-control-next { width: 52px; opacity: 1; }
#heroCarousel .carousel-control-prev-icon, #heroCarousel .carousel-control-next-icon { background-color: rgba(14,90,111,.85); padding: 18px; background-size: 55%; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
#heroCarousel .carousel-indicators { bottom: 8px; margin-bottom: 0; }
#heroCarousel .carousel-indicators [data-bs-target] { width: 34px; height: 5px; border-radius: 3px; background-color: #fff; opacity: .6; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
#heroCarousel .carousel-indicators .active { background-color: var(--color-secondary); opacity: 1; }

/* Filas continuas (.mq): logos e instructores */
.mq { position: relative; padding: 0 54px; }
.mq-vp { overflow: hidden; }
.mq-track { display: flex; align-items: center; width: max-content; will-change: transform; }
.mq-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(14,90,111,.9); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.mq-btn:hover { background: var(--color-secondary); }
.mq-btn.prev { left: 6px; } .mq-btn.next { right: 6px; }
.logos-bn { gap: 56px; padding: 10px 0; }
.logos-bn .client-logo { height: 58px; max-width: 150px; width: auto; object-fit: contain; margin: 0; filter: grayscale(100%); opacity: .75; transition: filter .3s, opacity .3s; }
.logos-bn .client-logo:hover { filter: grayscale(0%); opacity: 1; }
.instructores-track { gap: 34px; padding: 8px 0; }
.instructor-item { width: 170px; text-align: center; display: block; }
@media (max-width: 576px) { .mq { padding: 0 44px; } .logos-bn { gap: 36px; } .instructor-item { width: 140px; } }

/* Franja gris de avisos (A4/A5) */
.franja-gris { background: #ececec; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; }
.franja-items { position: relative; min-height: 56px; overflow: hidden; }
.franja-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px; font-size: .95rem; color: #333; opacity: 0; pointer-events: none; transition: opacity .6s, transform .6s; padding: 8px 12px; }
.franja-item a { font-weight: 700; color: var(--color-primary); text-decoration: underline; white-space: nowrap; }
.franja-item.activo { opacity: 1; pointer-events: auto; transform: none; }
.franja-item.desde-izq { animation: franjaIzq .6s ease; }
.franja-item.desde-der { animation: franjaDer .6s ease; }
@keyframes franjaIzq { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes franjaDer { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 576px) { .franja-items { min-height: 78px; } .franja-item { font-size: .85rem; flex-wrap: wrap; } }

/* Deslizador de cursos (A9.5) */
.sl { position: relative; padding: 0 54px; }
.sl-vp { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sl-vp::-webkit-scrollbar { display: none; }
.sl-track { display: flex; gap: 20px; padding: 6px 2px 14px; }
.sl-item { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; }
@media (max-width: 991px) { .sl-item { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 576px) { .sl { padding: 0 40px; } .sl-item { flex-basis: 100%; } }
.sl-btn { position: absolute; top: 45%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--color-secondary); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.sl-btn:disabled { opacity: .3; }
.sl-btn.prev { left: 4px; } .sl-btn.next { right: 4px; }
.sl.sin-flechas .sl-btn { display: none; }
.sl-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.sl-dots button { width: 11px; height: 11px; border-radius: 50%; border: 0; background: rgba(255,255,255,.4); padding: 0; }
.sl-dots button.activo { background: var(--color-secondary); width: 28px; border-radius: 6px; }

/* Footer: logo AP ovalado en blanco y negro (A11.1) */
.footer-logo-ap { background: #fff; border-radius: 50%; padding: 10px 18px; height: 96px; width: auto; }

/* Líneas del banner principal (sin el borde transparente que Bootstrap les pone) */
#heroCarousel .carousel-indicators [data-bs-target] { border-top: 0; border-bottom: 0; background-clip: border-box; margin: 0 4px; }

/* Testimonios y Servicios: las flechas van FUERA de las tarjetas, sin tapar el texto (A6/A8.6) */
#testimoniosCarousel, #serviciosCarousel { padding: 0 56px; }
#testimoniosCarousel .carousel-control-prev, #serviciosCarousel .carousel-control-prev { left: 0; width: 44px; }
#testimoniosCarousel .carousel-control-next, #serviciosCarousel .carousel-control-next { right: 0; width: 44px; }
#testimoniosCarousel .carousel-control-prev-icon, #testimoniosCarousel .carousel-control-next-icon,
#serviciosCarousel .carousel-control-prev-icon, #serviciosCarousel .carousel-control-next-icon { background-color: rgba(14,90,111,.9); padding: 16px; background-size: 55%; }
#serviciosCarousel .carousel-indicators [data-bs-target] { background-color: #9bb; }
#serviciosCarousel .carousel-indicators .active { background-color: var(--color-secondary); }
@media (max-width: 576px) {
    #testimoniosCarousel, #serviciosCarousel { padding: 0 40px; }
    #testimoniosCarousel .carousel-control-prev, #serviciosCarousel .carousel-control-prev,
    #testimoniosCarousel .carousel-control-next, #serviciosCarousel .carousel-control-next { width: 34px; }
}

/* Celular: Testimonios y Servicios se deslizan de lado en vez de apilarse */
@media (max-width: 767px) {
    #testimoniosCarousel .carousel-item .row, #serviciosCarousel .carousel-item .row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; }
    #testimoniosCarousel .carousel-item .row::-webkit-scrollbar, #serviciosCarousel .carousel-item .row::-webkit-scrollbar { display: none; }
    #testimoniosCarousel .carousel-item .row > [class*="col"], #serviciosCarousel .carousel-item .row > [class*="col"] { flex: 0 0 86%; max-width: 86%; scroll-snap-align: center; }
}

/* Clientes arriba del menú (include/clientes.php): franja discreta tipo "confían en nosotros" */
.clientes-top { background: #f6f9fa; border-top: 1px solid #e6eef0; border-bottom: 1px solid #e6eef0; }
.clientes-top-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 6px 16px; }
.clientes-top-tit { flex: 0 0 auto; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7a8f95; white-space: nowrap; padding-right: 18px; border-right: 1px solid #d9e3e6; }
.clientes-top-tit i { color: var(--color-secondary); margin-right: 4px; }
.clientes-top .mq { flex: 1 1 auto; min-width: 0; padding: 0; }
.clientes-top .mq-btn { display: none; }
.clientes-top .mq-vp { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.clientes-top .logos-bn { gap: 44px; padding: 4px 0; }
.clientes-top .logos-bn .client-logo { height: 34px; max-width: 110px; opacity: .55; mix-blend-mode: multiply; }
.clientes-top .logos-bn .client-logo:hover { opacity: 1; }
@media (max-width: 576px) {
  .clientes-top-in { padding: 5px 10px; gap: 10px; }
  .clientes-top-tit { font-size: .6rem; padding-right: 10px; }
  .clientes-top-tit i { display: none; }
  .clientes-top .logos-bn { gap: 24px; }
  .clientes-top .logos-bn .client-logo { height: 26px; max-width: 80px; }
}

/* Íconos de redes del footer sin subrayado (9-oct) */
.footer-dark a.fs-5 { text-decoration: none; }

/* Cintillo azul en celular (10-oct) */
.cintillo-movil a { text-decoration: none; }

/* ============================ CURSOS (cursos.php / curso.php / solicitar.php) ============================ */
.curso-lista-card { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.07); transition: .3s; }
.curso-lista-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.curso-lista-card .card-img-top { aspect-ratio: 4/3; object-fit: cover; background: #f3f9f9; }
.curso-fecha { color: var(--color-secondary); font-weight: 700; font-size: .85rem; letter-spacing: .3px; text-transform: uppercase; }
.curso-detalle-img { max-height: 520px; }
.curso-contenido { font-size: 1.02rem; line-height: 1.7; color: #333; overflow-wrap: anywhere; }
.curso-contenido img { max-width: 100%; height: auto; }
.curso-contenido strong { color: var(--color-primary); }
.curso-contenido table { max-width: 100%; display: block; overflow-x: auto; }
.curso-aside { top: 110px; background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 24px; border-top: 4px solid var(--color-secondary); }
.form-formsave .form-control { border-radius: 10px; }