/* ===== Estilos base (todos los grids) ===== */
.bloque-cat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
	padding:3.5rem;
}
.parrafo {
  display: grid;
  grid-template-columns: 1fr; /* por defecto, una columna al 100% */
	margin-bottom:2em;
}
.parrafo p {
  width: 100%;        /* siempre toma todo el ancho disponible */
  max-width: 50%;     /* pero nunca más del 30% del contenedor */
  margin: 1em 3.5rem;   /* centrado */
  line-height:1.3;
	  color:#454444;
}

.bloque-cat-item {
    position: relative;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.bloque-cat-item:hover {
    transform: scale(1);
}
.bloque-cat-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.3s ease;
    z-index: 1;
}
.bloque-cat-item:hover::before {
    background-color: #00FF00;
}
.bloque-cat-item .titulo {
    position: absolute;
    z-index: 2;
    text-align: left;
    padding: 1.5rem;
	text-transform:uppercase;
	font-style: italic;
	bottom:0;
	width:100%;
	line-height:1.2;
}
.titulo:hover{
	color:#140030;
}

/* ===== Responsividad estándar ===== */
@media (max-width: 1200px) {
    .bloque-cat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 992px) {
    .bloque-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .bloque-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .bloque-cat-grid {
		grid-template-columns: 1fr;}
	.bloque-cat-item .titulo {
		padding:1em;
    }
}

/* ===== Estilos personalizados por categoría ===== */

/* Ejemplo: performance */
.bloque-cat-grid-performance {
    grid-template-columns: 1fr;
}
.bloque-cat-item-performance {
    aspect-ratio: auto;
    height: 40vh;
    font-size: 1.2rem;
    justify-content: flex-start;
    /*padding-left: 1rem;*/
	align-items: end;
 	padding-bottom: 2em;
}
/** talleres **/
/* Solo para talleres: título debajo */
.bloque-cat-item-talleres {
    display: flex;
    flex-direction: column; /* apila imagen y título */
    aspect-ratio: 1/2;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    overflow: hidden;
    display: block;
    width: 100%;
    flex: 1; /* ocupa el alto disponible */
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}
.bloque-cat-item-talleres .resumen-item {
	position:absolute;
	bottom:1em;
	z-index:2;
	font-weight:300;
	font-weight:500;
	font-style:italic;
	
	
}
.bloque-cat-item-talleres .titulo {
    margin-top: 0.5em;
    text-align: left;
    color: #fff; /* puedes cambiar color según diseño */
    text-transform: uppercase;
    font-weight: 600;
	position:relative!important;
}
/* Solo para talleres: título debajo */
.bloque-cat-item-talleres {
    display: flex;
    flex-direction: column; /* apila imagen y título */
    aspect-ratio: 1/2;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    overflow: hidden;
}

.bloque-cat-item-talleres a {
    display: block;
    width: 100%;
    flex: 1; /* ocupa el alto disponible */
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}
.contenido-taller {
	position:absolute;
	bottom:0;
	padding:1em;
	background:#140030;
}
.extracto, .leer-mas {
	position:relative;
	z-index:2;
	font-weight:300;
	padding:0 .5em;
	line-height:1.3em;
}
.leer-mas span {
	color:white;
	text-decoration:none;
	margin-top:.5em;
}


/* Cambiar TODO el texto a azul en ese mismo hover */
.bloque-cat-item-talleres:hover .contenido-taller,
.bloque-cat-item-talleres:hover .contenido-taller .titulo,
.bloque-cat-item-talleres:hover .contenido-taller .extracto,
.bloque-cat-item-talleres:hover .contenido-taller .leer-mas a,
.bloque-cat-item-talleres:hover .contenido-taller .leer-mas span {
    color: #140030 !important;
}

/********************* hay mas estilos para este media query en style.css ********/

@media (max-width: 600px) {
	.contenido-taller {
		padding:1em!important;
	}
	.parrafo p {
		margin: 2em;
  line-height: 1.3;
  color: #454444;
		width:unset;
		max-width:unset;
	}
}