[data-component-id="usfq_theme:card"] {
    svg path {
        stroke: currentColor !important;
    }

    .btn {
        margin-top: 3rem;
    }

    p {
        margin-bottom: 0;
    }
    
    &.card--bg-primary {
        &:not(.card--profesor):not(.card--alumni):not(.card--main) {
            background-color: var(--primary);
            color: var(--white);

            &:hover {
                background-color: var(--white);
                color: var(--secondary);
            }
        }

        &:hover {
            svg path {
                stroke: var(--secondary) !important;
            }

            .h2.sedes_card-title,
            .h4.colegios_card-title {
                color: var(--primary);
            }

            .btn.btn-secondary {
                background: var(--primary) !important;
                color: var(--white) !important;
                border: 1px solid var(--white) !important;

                &:hover {
                    background: var(--secondary) !important;
                    color: var(--white) !important;
                    border: 1px solid var(--secondary) !important;
                }
            }

            .card-event__date.date {
                background-color: var(--secondary);
            }
        }

        .h2.sedes_card-title,
        .h4.colegios_card-title,
        .textbottom_card-title {
            color: var(--white);
        }

        &:hover .textbottom_card-title {
            color: var(--primary) !important;
        }

        &.card--colegios:hover {
            background-color: var(--white) !important;
        }

        .btn.btn-secondary {
            background: var(--white) !important;
            color: var(--secondary) !important;
            border: 1px solid var(--secondary) !important;
        }

        .card-event__date.date {
            background-color: var(--secondary);
        }
    }

    &.card--bg-secondary {
        &:not(.card--profesor):not(.card--alumni):not(.card--main) {
            background-color: var(--secondary);
            color: var(--white);

            &:hover {
                background-color: var(--primary);
                color: var(--white);
            }
        }

        &:not(.card--alumni):not(.card--profesor):hover .icon {
            color: var(--white) !important;
        }

        &:hover {
            svg path {
                stroke: var(--secondary) !important;
            }

            .h2.sedes_card-title,
            .h4.colegios_card-title {
                color: var(--primary);
            }

            .btn.btn-secondary {
                background: var(--primary) !important;
                color: var(--white) !important;
                border: 1px solid var(--white) !important;

                &:hover {
                    background: var(--secondary) !important;
                    color: var(--white) !important;
                    border: 1px solid var(--secondary) !important;
                }
            }

            .card-event__date.date {
                background-color: var(--secondary) !important;
            }
        }

        .h2.sedes_card-title,
        .h4.colegios_card-title {
            color: var(--white);
        }

        /* Asegura que en hover la variante textbottom muestre el título en blanco */
        &:hover .textbottom_card-title {
            color: var(--white) !important;
        }

        &.card--sedes:hover {
            background-color: var(--white) !important;
            color: var(--secondary) !important;

            .h2.sedes_card-title {
                color: var(--secondary);
            }
        }

        &.card--colegios:hover {
            background-color: var(--white) !important;
            color: var(--secondary) !important;
        }

        .btn.btn-secondary {
            background: var(--white) !important;
            color: var(--secondary) !important;
            border: 1px solid var(--secondary) !important;
        }

        .card-event__date.date {
            background-color: var(--primary);
        }
    }

    &.card--bg-light {
        &:not(.card--profesor):not(.card--alumni):not(.card--main) {
            background-color: var(--white);
            color: var(--secondary);

            &:hover {
                background-color: var(--primary);
                color: var(--white);
            }
            &:hover.card--textbottom {
                    background-color: var(--primary);
                    color: var(--white);
                        .textbottom_card-title {
                            color: var(--white) !important;
                        }
                    }
        }


        .btn.btn-secondary {
            border: 1px solid currentColor !important;
        }

        &:not(.card--alumni):not(.card--profesor):hover .icon {
            color: var(--white) !important;
        }

        &:hover {
            svg path {
                stroke: var(--white) !important;
            }

            .h2.sedes_card-title,
            .h4.colegios_card-title, .colegios_card-eyebrow {
                color: var(--white);
            }

            .colegios_card-body .subtitle.red,
            .colegios_card-body h3.subtitle.red {
                color: var(--white) !important;
            }

            .btn.btn-secondary {
                background: var(--white) !important;
                color: var(--secondary) !important;
                border: 1px solid var(--secondary) !important;

                &:hover {
                    background: var(--secondary) !important;
                    color: var(--white) !important;
                    border: 1px solid var(--secondary) !important;
                }
            }
        }

        /* &.card--colegios:hover {
            background-color: var(--dark) !important;
        } */

        .card-event__date.date {
            background-color: var(--primary) !important;
        }
    }

    /*Cuadro fecha*/
    &.date {
        background-color: var(--secondary);
        color: var(--white);

        &:hover {
            background-color: var(--primary);
        }
    }
}

/*CARD TEXTBOTTOM*/
.card.card-textbottom {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.textbottom_card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.textbottom-cta .btn-secondary {
    background: var(--white);
    color: var(--secondary);
}

.textbottom_card-title {
    color: var(--primary);
}

.card-textbottom {
    display: flex;
    flex-direction: column;
}

.container-textbottom {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    padding: 80px 24px;
}

.textbottom-cta{
    margin-top: auto;
}
/*CARD ALUMNI*/
.card.card-alumni {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.card-alumni_card-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.alumni_card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-alumni_card-img-top {
    position: relative;

}

.alumni_card-title {
    color: var(--primary) !important;
}

/* Estilos opción ver mas desktop */
.btn-toggle-more {
  display: none;
}

/* Desktop: Comportamiento a partir de 768px */
@media (min-width: 768px) {
  .card-text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .btn-toggle-more {
    display: inline-block;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    margin: 8px 0;
    cursor: pointer;
    text-decoration: underline;
    text-align: left;
    position: relative;
    z-index: 20;
  }

  /* Clase que remueve el límite de líneas cuando el usuario da clic */
  .card-text-clamp.is-expanded {
    -webkit-line-clamp: unset;
  }
}

/*DESKTOP*/

/*CARD PROFESOR*/
.card.card-profesor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Tarjeta entera clicable: el ::after del enlace del titulo la cubre. Solo
   el teaser de docente pasa el enlace; sin el, la tarjeta no cambia. */
.card.card-profesor:has(.profesor_card-link) {
    position: relative;
}

.profesor_card-title .profesor_card-link {
    color: inherit;
    text-decoration: none;
}

.profesor_card-title .profesor_card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
}

.profesor_card-body {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-wrap: break-word;
}

.card-profesor_card-img-top {
    position: relative;
}

.card-profesor_card-image img {
    filter: grayscale(100%);
}

.card-profesor--small .card-profesor_card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La ceja del teaser de docente une cargo y colegio. El separador se dibuja:
   el caracter "·" sale cuadrado en Zalando Sans Expanded. Solo aparece cuando
   hay los dos valores, que es lo unico que cambia respecto a como se veian las
   fichas donde el docente trae uno solo. */
.profesor_card-body .teacher-teaser__role + .teacher-teaser__school::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 0.5em;
    border-radius: 50%;
    background-color: currentColor;
    vertical-align: middle;
}

.card-profesor--large .eyebrow--large {
    font-size: 20px;
    margin-top: 1rem;
}

.card-profesor--large .card-profesor_card-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
    .card-profesor--large .card-profesor_card-image img {
        width: auto;
        height: auto;
    }
}


/*CARD SEDES*/
.card.card-sedes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    background: var(--white);
}

.card-sedes_card-image img {
    width: 100%;
    object-fit: cover;
}

.sedes_card-body {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 16px;
}

.card-sedes_card-img-top {
    position: relative;
}

.h2.sedes_card-title {
    color: var(--primary);
}

.container-direction {
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-sedes svg {
    width: 16px !important;
    height: 16px !important;
}

/*DESKTOP*/
@media (min-width: 1025px) {
    .card.card-sedes {
        max-width: 310px;
    }

    .card-sedes_card-image img {
        max-width: 310px;
    }
}

/*CARD COLEGIOS*/
.card.card-colegios {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: 100%;
    background: var(--white);
    margin-bottom: 64px;
}

.card-colegios_card-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.colegios_card-body {
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    flex: 1;
}

.card-colegios_card-img-top {
    position: relative;
}

.h4.colegios_card-title {
    color: var(--primary);
}

.container-button {
    margin-top: 1rem;
    /* display: contents; */
     margin-top: auto;
}

/*Tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
    .container-button {
        display: contents;
    }
}

/*DESKTOP*/
@media (min-width: 1025px) {
    .container-button {
        display: flex;
        justify-content: end;
        margin-top: auto;
    }
}

/*CARD CURSOS*/
.card.card-cursos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    background: var(--white);
    margin-bottom: 32px;
}

/* La franja de 175px la daba el alto intrinseco de venue_card (310x175). Con
   card_colegios (1504x850) el atributo height de la imagen la estiraria a 850. */
.card-cursos_card-image img {
    width: 100%;
    height: 175px;
    object-fit: cover;
}

.card-cursos_card-img-top {
    position: relative;
}

/* La cinta va en diagonal sobre la esquina de la imagen. El recorte lo hace el
   contenedor, no la cinta: así la banda puede sobresalir por los dos lados y
   verse cortada a ras de la foto. */
.card-cursos_card-img-top {
    overflow: hidden;
}

.card-cursos__badge {
    position: absolute;
    top: 34px;
    right: -56px;
    width: 210px;
    transform: rotate(45deg);
    background: var(--dark);
    color: var(--white);
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: var(--fw-body-regular-bold);
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

.cursos_card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    flex: 1;
}

.h4.cursos_card-title {
    color: var(--primary);
}

.cursos_card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cursos_card-modality,
.cursos_card-date,
.cursos_card-location {
    margin: 0;
}

.cursos_card-investment-label {
    font-weight: var(--fw-body-regular-bold);
    margin-bottom: 4px;
}

.cursos_card-modality strong,
.cursos_card-location strong {
    font-weight: var(--fw-body-regular-bold);
}

.cursos_card-investment-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

/* El rótulo lleva dos puntos en el mockup. Va por CSS y no en el twig porque
   ese texto lo comparte el molecule con las demás variantes. */
.card-cursos .cursos_card-investment-label::after {
    content: ':';
}

/* La primera tarifa es la de referencia y se destaca; las demás quedan en gris
   como líneas secundarias. */
.card-cursos .cursos_card-investment-line {
    display: block;
    color: var(--gray-600, #6b6b6b);
}

/* first-of-type y no first-child: el rótulo "Inversión" es el primer hijo del
   contenedor, así que la primera tarifa nunca sería first-child. */
.card-cursos .cursos_card-investment-line:first-of-type {
    color: inherit;
    font-weight: var(--fw-body-regular-bold);
}

.card-cursos .btn.btn--primary {
    text-transform: uppercase;
}

/* Hover en modo claro: la tarjeta entera a negro con el texto en blanco, y el
   botón invertido a blanco sobre negro. */
.card-cursos:hover {
    background: var(--secondary);
    color: var(--white);
}

.card-cursos:hover .h4.cursos_card-title,
.card-cursos:hover .cursos_card-text,
.card-cursos:hover .cursos_card-text p,
.card-cursos:hover .cursos_card-modality,
.card-cursos:hover .cursos_card-investment-label,
.card-cursos:hover .cursos_card-investment-line,
.card-cursos:hover .cursos_card-investment p {
    color: var(--white);
}

.card-cursos:hover .btn.btn--primary {
    background: var(--white);
    color: var(--secondary);
    border-color: var(--white);
}

/* Con la tarjeta en negro, el hover propio del boton lo pintaba negro con
   borde negro: la pildora desaparecia y quedaba el texto suelto. Se le da el
   rojo de marca, que es lo que ya hace el esquema oscuro. Los `!important`
   son para ganarle al hover del atomo, que ya los trae. */
.card-cursos:hover .btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--primary) !important;
    color: var(--white) !important;
    border: 2px solid var(--primary) !important;
}

/* Este comentario decía que la tarjeta no invertía en dark mode, pero sí
   invierte: la regla de más abajo, "[data-component-id=...].card--bg-light:not(...)",
   solo excluye profesor/alumni/main, no cursos, así que en dark mode
   card--cursos SÍ pasa a fondo negro con texto blanco. Poner aquí un
   `color: var(--secondary)` (negro) sin condicionar al esquema dejaba estos
   textos negro sobre negro en dark mode -- se veían en el HTML pero
   invisibles en pantalla. Hay que fijar el color en los dos esquemas por
   separado, igual que ya hace .curso-instructores__link más abajo. */
/* El `:not(:hover)` es imprescindible, no es adorno. Este bloque lleva
   `!important` y el hover de arriba no, asi que sin el la tarjeta pasaba a
   negro con la descripcion, la modalidad y el rotulo de inversion todavia en
   negro: invisibles. Solo se salvaban el titulo y las lineas de tarifa, que no
   estan en esta lista. */
:where(html:not([data-theme="dark"])) .card-cursos:not(:hover) .cursos_card-text,
:where(html:not([data-theme="dark"])) .card-cursos:not(:hover) .cursos_card-text p,
:where(html:not([data-theme="dark"])) .card-cursos:not(:hover) .cursos_card-modality,
:where(html:not([data-theme="dark"])) .card-cursos:not(:hover) .cursos_card-date,
:where(html:not([data-theme="dark"])) .card-cursos:not(:hover) .cursos_card-location,
:where(html:not([data-theme="dark"])) .card-cursos:not(:hover) .cursos_card-investment-label,
:where(html:not([data-theme="dark"])) .card-cursos:not(:hover) .cursos_card-investment-tag,
:where(html:not([data-theme="dark"])) .card-cursos:not(:hover) .cursos_card-investment-amount,
:where(html:not([data-theme="dark"])) .card-cursos:not(:hover) .cursos_card-investment p {
    color: var(--secondary) !important;
}

:where(html[data-theme="dark"]) .card-cursos .cursos_card-text,
:where(html[data-theme="dark"]) .card-cursos .cursos_card-text p,
:where(html[data-theme="dark"]) .card-cursos .cursos_card-modality,
:where(html[data-theme="dark"]) .card-cursos .cursos_card-date,
:where(html[data-theme="dark"]) .card-cursos .cursos_card-location,
:where(html[data-theme="dark"]) .card-cursos .cursos_card-investment-label,
:where(html[data-theme="dark"]) .card-cursos .cursos_card-investment-tag,
:where(html[data-theme="dark"]) .card-cursos .cursos_card-investment-amount,
:where(html[data-theme="dark"]) .card-cursos .cursos_card-investment p {
    color: var(--white) !important;
}

/* El Figma pide un gris oscuro para el cuerpo de la tarjeta en dark mode,
   no el negro puro que le pone la regla compartida de más abajo
   ("[data-component-id=...].card--bg-light:not(...)"). El selector repite
   esa misma cadena y le suma ".card--cursos" para ganarle en especificidad
   sin tocarla -- así colegios/sedes, que comparten esa regla, no cambian. */
:where(html[data-theme="dark"]) [data-component-id="usfq_theme:card"].card--bg-light.card--cursos:not(.card--profesor):not(.card--alumni):not(.card--main) {
    background-color: var(--dark) !important;
    color: var(--white) !important;
}

/* El botón "Ver más" es rojo con texto blanco en todo el sitio
   (.btn.btn--primary en button.css); el Figma lo quiere invertido -- fondo
   blanco, texto negro -- solo en esta tarjeta y solo en dark mode. El hover
   vuelve al rojo/blanco de siempre para no dejar la tarjeta sin estado de
   interacción. */
:where(html[data-theme="dark"]) .card-cursos .btn.btn--primary {
    background: var(--white) !important;
    color: var(--secondary) !important;
    border: 2px solid var(--white) !important;
}

:where(html[data-theme="dark"]) .card-cursos .btn.btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--primary) !important;
    color: var(--white) !important;
    border: 2px solid var(--primary) !important;
}

/* En oscuro la tarjeta se queda quieta: el Figma solo da estado de hover al
   botón. Anula el hover claro de más arriba. */
:where(html[data-theme="dark"]) .card-cursos:hover {
    background: var(--dark);
}

:where(html[data-theme="dark"]) .card-cursos:hover .h4.cursos_card-title {
    color: var(--primary);
}

:where(html[data-theme="dark"]) .card-cursos:hover .cursos_card-text,
:where(html[data-theme="dark"]) .card-cursos:hover .cursos_card-text p,
:where(html[data-theme="dark"]) .card-cursos:hover .cursos_card-modality,
:where(html[data-theme="dark"]) .card-cursos:hover .cursos_card-investment-label,
:where(html[data-theme="dark"]) .card-cursos:hover .cursos_card-investment-line,
:where(html[data-theme="dark"]) .card-cursos:hover .cursos_card-investment p {
    color: var(--white);
}

:where(html[data-theme="dark"]) .card-cursos:hover .btn.btn--primary:not(:hover) {
    background: var(--white) !important;
    color: var(--secondary) !important;
    border-color: var(--white) !important;
}

/*Tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
    .card.card-cursos {
        max-width: 100%;
    }
}

/*DESKTOP*/
@media (min-width: 1025px) {
    .card.card-cursos {
        max-width: 100%;
    }

    .card-cursos .container-button {
        display: flex;
        justify-content: end;
    }
}

/*CARD EVENTO*/
.card-event {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
}

.card.card-event {
    width: 100%;
    max-width: 160px;
}

.card-event_card-img-top {
    margin-top: 1rem;
}

.card-event_card-image img {
    width: 100%;
    object-fit: cover;
}

.event_card-body {
    position: static;
}

.event_card-title a {
    text-decoration: none;
}

/* "Ver mas" (clamp) y "Ver detalle" (link) deben quedar en filas separadas;
   sin esta regla ambos son elementos inline/inline-block y el navegador los
   ubica en la misma linea si el ancho de la tarjeta lo permite. */
.event_card-link {
    display: flex;
    width: fit-content;
    margin-top: 1rem;
}

.event_card-title a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.view-events-attachment .event_card-title a::after {
    top: -1.3rem;
    left: -13%;
    right: -13%;
    height: 117%;
}

.event_card-body .subtitle-s2 {
    width: 81px;
}

.card-event__date {
    position: relative;
    width: 48px;
    height: 48px;
    margin-top: 3px;
    margin-bottom: -40px;
    align-self: flex-end;
    margin-right: 8%;
    z-index: 2;
    color: var(--white);
}

.card-event__day {
    margin: auto;
    display: flex;
    justify-content: end;
}

.card-event__month,
.card-event__day {
    font-size: 16px !important;
}

/* Descripcion de las tarjetas de los listados de eventos (teaser de
   activities_events): ya llega recortada del servidor y aqui se topa en cuatro
   lineas para las rejillas estrechas. El hueco inferior de los organismos pasa
   de padding a margin: con overflow hidden el padding dejaba asomar la quinta
   linea. */
.card.card-event--summary .event_card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    padding-bottom: 0;
    margin-bottom: 1rem;
}

/*TABLET*/
@media (min-width: 768px) and (max-width: 1024px) {
    .card-event {
        flex-direction: column;
    }

    .card.card-event {
        max-width: 348px;
    }

    .card-event_card-img-top {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .card-event_card-image img {
        max-width: 348px;
    }

    .event_card-body {
        padding: 24px;
    }

    .event_card-body .subtitle-s2 {
        width: 122px;
    }

    .card-event__date {
        align-self: flex-start;
        margin-left: 24px;
        margin-right: 0;
        margin-top: -24px;
        margin-bottom: -24px;
    }

    .card-event__day {
        margin-bottom: 3px !important;
    }

    .view-events-attachment .event_card-title a::after {
        top: -5.3rem;
        left: -14%;
        right: -14%;
        height: 144%;
    }
}

/*DESKTOP*/
@media (min-width: 1025px) {
    .card-event {
        flex-direction: column;
    }

    .card.card-event {
        max-width: 310px;
    }

    .card-event_card-img-top {
        margin-top: 0;
        /* margin-bottom: 1rem; */
    }

    .card-event_card-image img {
        max-width: 310px;
    }

    .event_card-body {
        padding: 24px;
    }

    .event_card-body .subtitle-s2 {
        width: 122px;
    }

    .card-event__date {
        align-self: flex-start;
        margin-left: 1.5rem;
        margin-right: 0;
        margin-top: -24px;
        margin-bottom: -24px;
    }

    .card-event__day {
        margin-top: -3px !important;
    }

    .view-events-attachment .event_card-title a::after {
        top: -5.3rem;
        left: -13%;
        right: -13%;
        height: 144%;
    }
}


/*CARD EVENTO MAIN*/
.container-main {
    border: 1px solid currentColor;
    width: 100%;
    padding: 24px 48px;
    display: flex;
    flex-direction: column-reverse;
}

.card.card-main {
    display: flex;
    gap: 32px;
    background-color: var(--white);
}

.card.card-main:hover {
    background-color: var(--secondary);
    color: var(--white);
    /* max-width: 720px; */
}

.card.card-main:hover .card-main__date {
    background-color: var(--primary);
}

.card-img-top {
    margin-top: 1rem;
}

.card-main_card-image {
    position: relative;
}

.card-main_card-image img {
    width: 100%;
    /* max-width: 343px; */
}


.card-main-body .subtitle-s1 {
    width: 81px;
}

.card-main__date {
    position: absolute;
    width: 48px;
    height: 48px;
    top: -16px;
    right: 8%;
}

.card-main__day {
    margin: auto;
    margin-top: 16px !important;
    display: flex;
    justify-content: end;
}

.card-main svg {
    width: 20px !important;
    height: 20px !important;
}

.card-main__date {
    background-color: var(--secondary);
    color: var(--white);
}

/*TABLET*/
@media (min-width: 768px) and (max-width: 1024px) {
    .container-main {
        max-width: 720px;
        padding: 122px 150px;
    }

    .card-img-top {
        margin-top: 2rem;
    }

    .card-main_card-image img {
        max-width: 420px;
    }

    .card-main-body .subtitle-s1 {
        width: 162px;
    }

    .card-main__date {
        width: 80px;
        height: 80px;
        top: -32px;
    }

    .card-main__day {
        margin-top: 32px !important;
    }

    .card-main__icon {
        display: none;
    }
}

/*DESKTOP*/
@media (min-width: 1025px) {
    .container-main {
        max-width: 660px;
        padding: 84px 112px;
    }

    .card-img-top {
        margin-top: 2rem;
    }

    .card-main_card-image img {
        max-width: 420px;
        max-width: 100%;
        height: auto;
    }

    .card-main-body .subtitle-s1 {
        width: 162px;
    }

    .card-main__date {
        width: 80px;
        height: 80px;
        top: -32px;
    }

    .card-main__day {
        margin-top: 32px !important;
    }

    .card-main__icon {
        display: none;
    }
}

:where(html[data-theme="dark"]) p {
    color: currentColor !important;
}

:where(html[data-theme="dark"]) [data-component-id="usfq_theme:card"] {
    &.card--bg-light:not(.card--profesor):not(.card--alumni):not(.card--main) {
        /* background-color: black !important; */
        /* color: var(--white) !important; */
    }
}

/* Card alumni dark-mode */
:where(html[data-theme="dark"]) .alumni_card-title {
    color: var(--white) !important;
}

/* Card main dark-mode */
:where(html[data-theme="dark"]) .card.card-main {
    background: var(--secondary) !important;
}

:where(html[data-theme="dark"]) .card.card-main:hover {
    background: var(--primary) !important;
}

:where(html[data-theme="dark"]) .card.card-main .date {
    background-color: var(--primary) !important;
}

:where(html[data-theme="dark"]) .card.card-main:hover .date {
    background-color: var(--secondary) !important;
}

/* card colegio */
:where(html[data-theme="dark"]) .card--bg-secondary.card--colegios:hover .colegios_card-text {
    color: var(--secondary) !important;
}

:where(html[data-theme="dark"]) .card--bg-light.card--colegios .colegios_card-text {
    color: var(--secondary) !important;
}

:where(html[data-theme="dark"]) .card--bg-light.card--colegios .colegios_card-text:hover {
    color: var(--secondary) !important;
}

/* text button */
:where(html[data-theme="dark"]) .card--bg-light.textbottom_card-text{
    color: var(--secondary)!important;
}
    /* .textbottom_card-text p{
    color: var(--secondary)!important;
} */


/* card evento */
:where(html[data-theme="dark"]) .card--bg-light h3.h4.event_card-title {
    color: var(--secondary) !important;
}

:where(html[data-theme="dark"]) .card--bg-light:hover h3.h4.event_card-title {
    color: var(--white) !important;
}

:where(html[data-theme="dark"]) .card--bg-light:hover.card--colegios .colegios_card-text {
    color: var(--white) !important;
}

:where(html[data-theme="dark"]) .card--bg-light.card--sedes .sedes_card-text p {
    color: var(--secondary) !important;
}

:where(html[data-theme="dark"]) .card--bg-light:hover.card--sedes .sedes_card-text p {
    color: var(--white) !important;
}

:where(html[data-theme="dark"]) .card--bg-primary:hover.card--colegios .colegios_card-text {
    color: var(--secondary) !important;
}

:where(html[data-theme="dark"]) .card--bg-primary:hover .textbottom_card-title {
    color: var(--white) !important;
}

:where(html[data-theme="dark"]) [data-component-id="usfq_theme:icon"] {
    color: inherit !important;
}

:where(html[data-theme="dark"]) .card--bg-light.card--colegios p {
    color: var(--secondary);
}

:where(html[data-theme="dark"]) .card--bg-light.card--colegios:hover p {
    color: var(--white) !important;
}


/* CARD TESTIMONY*/
.card.card-testimony {
    padding: 32px 13px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem 1.25rem;
}

.card-testimony > p { 
    display: contents; 
}

.card-testimony > div:first-of-type { 
    grid-column: 1 / -1; 
}


.card-testimony_card-image { 
    grid-column: 1; 
}

.testimony_card-body      { 
    grid-column: 2; 
}

.card-testimony_card-image img {
  width: 48px; 
  height: 48px;
  object-fit: cover;
  display: block;
}

.card.card-testimony .highlighted_text {
    color: var(--primary);
    text-transform: uppercase;
    font-size: var(--fs-eyebrow);
    line-height: var(--lh-eyebrow);
    font-weight: 500;
    letter-spacing: .25em;
}


/*MOBILE*/
@media (max-width: 768px) {
  .card.card-testimony,
  .card.card-testimony * {
    direction: ltr;       
    text-align: left;
    unicode-bidi: isolate;
  }

  .card.card-testimony {
    display: flex;
    flex-direction: column;
    align-items: stretch;    
    gap: 1rem;
    padding: 32px 13px;
  }

  .card.card-testimony > p { 
    display: none; 
    }

  .card.card-testimony > div,
  .testimony_card-body > * {
    margin-inline: 0;
    text-align: left;
  }

  .card-testimony_card-image {
    display: flex;
    justify-content: flex-start;
  }

}

/* ==================================================
   CREDITOS DE PROPIEDAD INTELECTUAL

   Caja de referencia del disparador, que va en position: absolute dentro de
   la capa .media-credits--modal.
================================================== */
.card .card-event_card-image,
.card .card-main_card-image,
.card .card-sedes_card-image,
.card .card-colegios_card-image,
.card .card-cursos_card-image,
.card .card-profesor_card-image,
.card .card-alumni_card-image,
.card .card-testimony_card-image {
  position: relative;
}