/* ============================================================
   Zona de información de la index — tarjetas en matriz
   + carrusel de tarjetas (mismo estilo gráfico)
   Ubicación: static/assets/css/cfp-info-cards.css
   Color de acento: variable --cfp-accent
   (#e74c3c = rojo de los botones del sitio, ver red.css)
============================================================ */

.cfp-info-section,
.cfp-carousel-section,
.cfp-quicklinks-section,
.cfp-visited-section {
    --cfp-accent: #e74c3c;        /* rojo botones del sitio (red.css) */
    --cfp-accent-hover: #c0392b;
    --cfp-heading: #2541b3;       /* morado corporativo (cfp.css .color-green) */
    --cfp-reco: #223eaf;          /* azul de cabeceras/detalles de carruseles de texto */
}

.cfp-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.05fr;
    grid-auto-rows: 1fr;
    gap: 18px;
}

/* ---- tarjeta base ---- */
.cfp-info-card {
    position: relative;
    display: flex;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow: hidden;
    text-decoration: none;
    color: #555;
    min-height: 130px;
    transition: box-shadow .3s ease, transform .3s ease;
}
.cfp-info-card:hover,
.cfp-info-card:focus {
    text-decoration: none;
    color: #555;
    box-shadow: 0 8px 22px rgba(0,0,0,.14);
    transform: translateY(-3px);
}

.cfp-info-card__img {
    flex: 0 0 40%;
    overflow: hidden;
}
.cfp-info-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.cfp-info-card:hover .cfp-info-card__img img { transform: scale(1.06); }

.cfp-info-card__body {
    flex: 1;
    padding: 12px 16px 34px;
}
.cfp-info-card__body h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: #333;
    line-height: 1.25;
}
.cfp-info-card__body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #666;
}

/* flecha inferior derecha */
.cfp-info-card__arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38px;
    height: 32px;
    background: var(--cfp-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: width .25s ease;
}
.cfp-info-card:hover .cfp-info-card__arrow { width: 50px; }

/* ---- tarjeta grande (columna derecha) ----
   span 2 = ocupa las 2 filas de tarjetas pequeñas.
   Si añades otra fila de tarjetas, cambia a span 3. */
.cfp-info-card--big {
    grid-column: 3;
    grid-row: 1 / span 2;
    flex-direction: column;
}
.cfp-info-card--big .cfp-info-card__img { flex: 1 1 55%; }
.cfp-info-card--big .cfp-info-card__body {
    flex: 1 1 45%;
    padding: 20px 22px 44px;
}
.cfp-info-card--big .cfp-info-card__body h3 { font-size: 20px; }
.cfp-info-card--big .cfp-info-card__body p { font-size: 14px; }

/* botón dentro de una tarjeta (p. ej. suscripción al boletín) */
.cfp-info-card__btn {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 16px;
    border: 2px solid var(--cfp-accent);
    color: var(--cfp-accent);
    font-size: 14px;
    font-weight: 700;
    transition: background .25s ease, color .25s ease;
}
.cfp-info-card:hover .cfp-info-card__btn {
    background: var(--cfp-accent);
    color: #fff;
}

/* ---- accesos directos (bajo la matriz): composición
   editorial, solo tipografía y aire ---- */
.cfp-quicklinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
/* margen cuando va como sección independiente */
.cfp-quicklinks-section .cfp-quicklinks { margin: 45px 0; }
.cfp-quicklinks__item {
    display: block;
    padding-bottom: 28px;
    border-bottom: 1px solid #ddd;
    text-decoration: none;
    transition: border-color .25s ease;
}
.cfp-quicklinks__item:hover,
.cfp-quicklinks__item:focus {
    text-decoration: none;
    border-color: var(--cfp-heading);
}
.cfp-quicklinks__title {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: #1e2330;
}
.cfp-quicklinks__dash {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--cfp-accent);
    margin: 14px 0 16px;
}
.cfp-quicklinks__text {
    display: block;
    max-width: 340px;
    font-size: 14px;
    line-height: 1.6;
    color: #777;
}
.cfp-quicklinks__link {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cfp-heading);
}
.cfp-quicklinks__link .fa {
    color: var(--cfp-accent);
    margin-left: 6px;
    transition: transform .25s ease;
}
.cfp-quicklinks__item:hover .cfp-quicklinks__link .fa { transform: translateX(4px); }

@media (max-width: 991px) {
    .cfp-quicklinks { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
    .cfp-quicklinks { margin-top: 32px; }
    .cfp-quicklinks__title { font-size: 25px; }
    .cfp-quicklinks__item { padding-bottom: 22px; }
}

/* ---- responsive ---- */
@media (max-width: 991px) {
    .cfp-info-grid { grid-template-columns: 1fr 1fr; }
    .cfp-info-card--big {
        grid-column: 1 / -1;
        grid-row: auto;
        flex-direction: row;
    }
    .cfp-info-card--big .cfp-info-card__img { flex: 0 0 45%; }
}
@media (max-width: 600px) {
    /* auto: cada tarjeta mide lo que pide su contenido
       (con 1fr todas heredaban el alto de la más alta) */
    .cfp-info-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    /* las tarjetas pequeñas conservan la imagen como columna
       lateral, pero en absoluto: así la altura natural de la
       foto no infla la tarjeta y esta mide solo lo del texto */
    .cfp-info-card { min-height: 110px; }
    .cfp-info-card__img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 35%;
        flex: none;
    }
    .cfp-info-card__body { margin-left: 35%; }
    /* solo la grande pasa a vertical, con imagen alta
       (no una franja) para no perder el encuadre */
    .cfp-info-card--big { flex-direction: column; }
    .cfp-info-card--big .cfp-info-card__img {
        position: static;
        width: auto;
        flex: 0 0 auto;
        height: 210px;
    }
    .cfp-info-card--big .cfp-info-card__body { margin-left: 0; }
}

/* ============================================================
   CARRUSEL de destacados — 3 visibles, scroll horizontal a
   partir de la 4ª. Tarjetas con imagen a sangre completa y
   texto superpuesto (se diferencia de la matriz blanca).
============================================================ */

.cfp-carousel-section {
    background: #f6f7f9; /* banda que separa la zona */
    padding: 40px 0;
}

/* ---- cabecera destacada (H1) sobre el carrusel ----
   Estructura: eyebrow (universidad) + titular grande con
   subrayado-marcador + subtítulo. Todo dentro del H1 para SEO. */
.cfp-carousel__header {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}
.cfp-carousel__header h1 { margin: 0; }

.cfp-carousel__header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cfp-heading);
}
.cfp-carousel__header-eyebrow::before,
.cfp-carousel__header-eyebrow::after {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--cfp-accent);
}

.cfp-carousel__header-title {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    color: #1e2330;
    margin-bottom: 14px;
}
.cfp-carousel__header-title .cfp-mark {
    background: linear-gradient(transparent 68%, rgba(37,65,179,.18) 0);
}

.cfp-carousel__header-sub {
    display: block;
    max-width: 560px;
    margin: 0 auto;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #666;
}

.cfp-carousel { position: relative; }

.cfp-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 50px) / 3); /* 3 tarjetas visibles */
    gap: 25px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 5px 2px 8px; /* aire para la sombra */
    -ms-overflow-style: none;
    scrollbar-width: none; /* sin barra de scroll */
    cursor: grab;
}
.cfp-carousel__track::-webkit-scrollbar { display: none; }
.cfp-carousel__track > * { scroll-snap-align: start; }
.cfp-carousel__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none; /* arrastre libre; al soltar vuelve a encajar */
    user-select: none;
}

/* ---- tarjeta destacada: imagen de fondo + texto encima ---- */
.cfp-hero-card {
    position: relative;
    display: block;
    height: 340px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    text-decoration: none;
    transition: box-shadow .3s ease, transform .3s ease;
}
.cfp-hero-card:hover,
.cfp-hero-card:focus {
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    transform: translateY(-3px);
}

.cfp-hero-card__img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.cfp-hero-card:hover .cfp-hero-card__img { transform: scale(1.06); }

.cfp-hero-card__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(25,30,45,.10) 35%, rgba(25,30,45,.88) 100%);
}

.cfp-hero-card__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 26px 34px;
}
.cfp-hero-card__body h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}
.cfp-hero-card__body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,.88);
}

/* la flecha roja es la misma que la de la matriz:
   reutiliza la clase .cfp-info-card__arrow dentro de la tarjeta */
.cfp-hero-card .cfp-info-card__arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38px;
    height: 32px;
    background: var(--cfp-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: width .25s ease;
}
.cfp-hero-card:hover .cfp-info-card__arrow { width: 50px; }

/* ---- flechas de navegación (fondo blanco) ---- */
.cfp-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    color: var(--cfp-accent);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cfp-carousel__btn:hover {
    background: var(--cfp-accent);
    border-color: var(--cfp-accent);
    color: #fff;
}
.cfp-carousel__btn:active { background: var(--cfp-accent-hover); border-color: var(--cfp-accent-hover); }
.cfp-carousel__btn--prev { left: -18px; }
.cfp-carousel__btn--next { right: -18px; }
/* por debajo de 768px el container no tiene margen exterior:
   las flechas entran para no provocar scroll horizontal */
@media (max-width: 767px) {
    .cfp-carousel__btn--prev { left: -8px; }
    .cfp-carousel__btn--next { right: -8px; }
}

/* ============================================================
   VISITADOS RECIENTEMENTE — franja compacta bajo el buscador.
   Solo se renderiza si hay visitas (cookies aceptadas), así que
   cuando no aparece la página fluye sin hueco. Reutiliza el
   carrusel cfp (flechas, arrastre, bucle: mismo JS).
============================================================ */

/* Fondo: imagen muy sutil bajo un velo del color de la banda.
   El degradado superior parte del color sólido (#f6f7f9) y se
   va abriendo hacia la imagen, integrando ambas partes.
   Cambia el archivo de ../../images/fondos/ si prefieres otra. */
/* degradado sutil sobre el color de la banda, sin imagen:
   arranca en el color base y se oscurece ligeramente */
.cfp-visited-section {
    background: linear-gradient(180deg,
        #f6f7f9 0%,
        #f6f7f9 30%,
        #e9ebef 100%);
    padding: 32px 0 40px;
}

/* misma composición que recomendados: cabecera a la izquierda
   (.cfp-reco-layout / .cfp-reco-header) y carrusel a la derecha,
   con las mismas flechas blancas (ver overrides más abajo) */

/* 3 fichas visibles */
.cfp-carousel__track--visited {
    grid-auto-columns: calc((100% - 50px) / 3);
    padding: 4px 2px 10px;
}

/* ficha compacta tipo chip, con imagen del curso a la izquierda */
.cfp-visited-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid #e9ebf1;
    border-left: 1px solid var(--cfp-heading);
    min-height: 130px;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
.cfp-visited-card:hover,
.cfp-visited-card:focus {
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    transform: translateY(-2px);
}
/* barrido rojo inferior al hover, como en recomendados */
.cfp-visited-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--cfp-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.cfp-visited-card:hover::after,
.cfp-visited-card:focus::after { transform: scaleX(1); }
.cfp-visited-card__body {
    display: block;
    padding: 14px 16px;
}
.cfp-visited-card__type {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cfp-heading);
}
.cfp-visited-card__meta {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #777;
}
.cfp-visited-card__meta em {
    font-style: normal;
    color: var(--cfp-heading);
    margin-right: 4px;
}
.cfp-visited-card__name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #1e2330;
}

@media (max-width: 991px) {
    .cfp-carousel__track--visited { grid-auto-columns: calc((100% - 25px) / 2); }
}
@media (max-width: 600px) {
    .cfp-visited-section { padding: 22px 0 0; }
    .cfp-carousel__track--visited { grid-auto-columns: 100%; }
}

/* ============================================================
   RECOMENDADOS "También te puede interesar" — banda delimitada
   con tarjetas de solo texto. Reutiliza .cfp-carousel (flechas,
   arrastre y bucle: mismo JS, no hace falta cargarlo dos veces).
============================================================ */

.cfp-reco-section {
    --cfp-reco: #223eaf;
    background: #f6f7f9;
    padding: 40px 0;
}

/* composición: cabecera a la izquierda, carrusel a la derecha */
.cfp-reco-layout {
    display: grid;
    /* minmax(0, 1fr): permite que la columna del carrusel
       encoja y no desborde el container */
    grid-template-columns: minmax(220px, 26%) minmax(0, 1fr);
    gap: 45px;
    align-items: center;
}
.cfp-reco-layout .cfp-carousel { min-width: 0; }

/* cabecera de la sección */
.cfp-reco-header { margin-bottom: 0; }
.cfp-reco-header h2 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 800;
    color: #1e2330;
    line-height: 1.2;
}
.cfp-reco-header h2::before {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    background: var(--cfp-reco);
    margin-bottom: 12px;
}
.cfp-reco-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #777;
    max-width: 520px;
}

/* 3 tarjetas visibles en la zona derecha
   (padding extra para que el zoom del hover no se recorte) */
.cfp-carousel__track--reco {
    grid-auto-columns: calc((100% - 25px) / 2); /* 2 tarjetas visibles */
    /* aire suficiente para que la sombra del hover no se
       recorte contra el borde del carril */
    padding: 12px 8px 38px;
}

/* tarjeta de color a sangre (modelo editorial):
   · Título propio -> fondo en tonos morados + imagen del título
   · Curso         -> fondo teal, solo texto
   Esquinas rectas. La modalidad va como etiqueta en la esquina
   superior derecha. "Más información" anclado abajo. */
.cfp-reco-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 290px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.cfp-reco-card--tp { background: linear-gradient(160deg, #2541b3 0%, #4a3e9e 100%); }
/* curso: gris azulado profundo, en la familia del buscador oscuro,
   que contrasta con el morado de los títulos propios */
.cfp-reco-card--curso { background: linear-gradient(160deg, #46536e 0%, #333d52 100%); }
.cfp-reco-card:hover,
.cfp-reco-card:focus {
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
    z-index: 2;
}

/* imagen del título propio (si falla, se oculta con onerror) */
.cfp-reco-card__img {
    display: block;
    height: 120px;
    overflow: hidden;
    flex: 0 0 auto;
}
.cfp-reco-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.cfp-reco-card:hover .cfp-reco-card__img img { transform: scale(1.05); }

/* etiqueta de modalidad, esquina superior derecha */
.cfp-reco-card__mode {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    padding: 4px 10px;
    background: rgba(17,19,28,.85);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}
.cfp-reco-card__mode em {
    font-style: normal;
    margin-right: 4px;
}

/* cuerpo */
.cfp-reco-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px 16px;
}
.cfp-reco-card__type {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
}
.cfp-reco-card__name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}
.cfp-reco-card__meta {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255,255,255,.8);
}
.cfp-reco-card__meta em {
    font-style: normal;
    color: rgba(255,255,255,.9);
    margin-right: 4px;
}

/* "Más información" anclado abajo, como el modelo */
.cfp-reco-card__link {
    display: block;
    margin-top: auto;
    padding-top: 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.cfp-reco-card__link .fa {
    margin-left: 6px;
    transition: transform .25s ease;
}
.cfp-reco-card:hover .cfp-reco-card__link .fa { transform: translateX(5px); }

/* flechas de recomendados con el aspecto del slider superior:
   pastilla blanca, chevron oscuro y ampliación al hover */
.cfp-reco-section .cfp-carousel__btn,
.cfp-visited-section .cfp-carousel__btn {
    width: 36px;
    height: 36px;
    border: 0;
    background: #fff;
    color: #333;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    transition: transform .2s ease;
}
.cfp-reco-section .cfp-carousel__btn:hover,
.cfp-reco-section .cfp-carousel__btn:focus,
.cfp-reco-section .cfp-carousel__btn:active,
.cfp-visited-section .cfp-carousel__btn:hover,
.cfp-visited-section .cfp-carousel__btn:focus,
.cfp-visited-section .cfp-carousel__btn:active {
    background: #fff;
    border: 0;
    color: #333;
    transform: translateY(-50%) scale(1.15);
}

/* carril lateral en todos los anchos: las tarjetas nunca llegan
   al borde y las flechas viven en su propio espacio, sin pisar
   el texto ni provocar scroll horizontal */
.cfp-reco-section .cfp-carousel,
.cfp-visited-section .cfp-carousel { padding: 0 46px; }
.cfp-reco-section .cfp-carousel__btn--prev,
.cfp-visited-section .cfp-carousel__btn--prev { left: 0; }
.cfp-reco-section .cfp-carousel__btn--next,
.cfp-visited-section .cfp-carousel__btn--next { right: 0; }

@media (max-width: 991px) {
    /* en tablet/móvil la cabecera vuelve arriba */
    .cfp-reco-layout { grid-template-columns: 1fr; gap: 28px; }
    .cfp-carousel__track--reco { grid-auto-columns: calc((100% - 25px) / 2); }
}
@media (max-width: 600px) {
    .cfp-reco-section { padding: 25px 0; }
    .cfp-reco-header h2 { font-size: 20px; }
    .cfp-carousel__track--reco { grid-auto-columns: 100%; }
    .cfp-reco-card { min-height: 0; }
}

/* ---- responsive: 2 tarjetas en tablet, 1 en móvil ---- */
@media (max-width: 991px) {
    .cfp-carousel__track { grid-auto-columns: calc((100% - 25px) / 2); }
    .cfp-hero-card { height: 300px; }
}
@media (max-width: 600px) {
    .cfp-carousel-section { padding: 25px 0; }
    .cfp-carousel__header { margin-bottom: 25px; }
    .cfp-carousel__header-eyebrow { font-size: 11px; letter-spacing: 2px; }
    .cfp-carousel__header-title { font-size: 23px; }
    .cfp-carousel__header-sub { font-size: 14px; }
    .cfp-carousel__track { grid-auto-columns: 100%; }
    .cfp-hero-card { height: 260px; }
    .cfp-carousel__btn--prev { left: -8px; }
    .cfp-carousel__btn--next { right: -8px; }
}