.subtitulo {
    font-size: 1.20em;
    text-align: center;
    color: black;
}

.arti1 {
    display: flex;
    flex-wrap: wrap;
    background-color: #b4dadd;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Hover SOLO en la tarjeta individual */
.cuadradoprinc:hover {
    background-color: #d68a47;
    cursor: pointer;
}

/* Tarjeta principal - estructura básica */
.cuadradoprinc {
    text-align: center;
    width: 300px;
    border: 3px solid black;
    padding: 10px;
    margin: 5px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center;
    box-sizing: border-box;
    min-height: 420px;                    /* altura mínima para que haya espacio abajo */
    overflow: hidden;
    position: relative;
}

/* Texto arriba - forzamos prioridad máxima */
.tituloarti {
    font-size: 1.3em !important;
    color: blue !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
}

.parr1 {
    margin: 0 0 30px 0 !important;       /* espacio GRANDE antes de la foto */
    font-weight: 600 !important;
}



/* Anulamos TODAS las reglas antiguas de .fotomX para que no interfieran */
.fotom1, .fotom2, .fotom3, .fotom4 {
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: 200px !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 999 !important;               /* va última */
    object-fit: cover !important;
}

/* Link clickable */
.tarjeta-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.tarjeta-link:hover {
    opacity: 0.92;
    transition: opacity 0.2s;
}
/* Contenedor de la tarjeta (cuadradoprinc) */
.cuadradoprinc {
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 420px !important;   /* altura mínima para que haya espacio abajo */
}

/* El link que envuelve todo (tarjeta-link) - forzamos que sea columna */
.tarjeta-link {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

/* Texto arriba */
.tarjeta-link .tituloarti,
.tarjeta-link .parr1 {
    margin-bottom: 20px !important;   /* espacio grande antes de la foto */
}

/* Foto abajo - empujada al fondo con espacio */
.tarjeta-link .foto-portada {
    margin-top: auto !important;      /* empuja la foto hacia abajo */
    margin-bottom: 10px !important;   /* espacio al fondo de la tarjeta */
    height: 200px !important;
    width: 100% !important;
    border-radius: 12px !important;
}

/* Anula cualquier interferencia de las clases antiguas fotomX */
.cuadradoprinc .fotom1,
.cuadradoprinc .fotom2,
.cuadradoprinc .fotom3,
.cuadradoprinc .fotom4 {
    position: static !important;
    margin: 0 !important;
    order: 999 !important;
}