.modelos-page{
	background:#2b2b2b;
}

.modelos-layout{
	display:grid;
	grid-template-columns:260px 1fr;
	gap:60px;
	max-width:1850px;
	margin:auto;
	margin-left:80px;
	margin-bottom:80px;
	padding:20px 60px;
}

/* FILTROS */

.separador-filtros {
	margin:40px;
}

.modelos-filtros h3{
	margin-top:10px;
	margin-bottom:15px;
	color:rgba(252, 252, 253, 0.7);
	font-size: 15px;
  	line-height: 20px;
}

.filtro-btn{
	display:block;
	margin-bottom:6px;
	padding:6px 14px;
	border-radius:10px;
	border:1px solid #bbb;
	background:rgb(44, 52, 63);
	color:#fff;
	text-decoration:none;
	font-size:14px;
	transition:.2s;
	line-height: 20px;
}

.filtro-btn:hover{
	background:#444;
	color:#fff;
	transform:translateY(-2px);
}

.filtro-btn.activo{
	background:#1F497D;
	border-color:#bbb;
}

/* RESULTADOS */

.modelos-titulo{
	margin-top:10px;
	margin-bottom:15px;
	color:rgba(252, 252, 253, 0.7);
	font-size: 15px;
  	line-height: 20px;
}

/* GRID MODELOS */

.modelos-grid{
	display:grid;
	grid-template-columns:
	repeat(auto-fill,minmax(280px,1fr));
	gap:25px;
}

/* CARD */

/* CARD BASE */

.modelo-card{
	display:block;
	perspective:1200px;
	height:200px;
	text-decoration:none;
	background:linear-gradient(	145deg,	#333, #1d1d1d );
	color:#fff;
	transition:.25s;
	font-size: 16px;
	font-weight: 700;
	border-radius:10px;
	overflow:visible;
}

/* CONTENEDOR INTERNO */

.modelo-card-inner{
	position:relative;
	width:100%;
	height:100%;
	transition:transform .7s cubic-bezier(.19,1,.22,1);
	transform-style:preserve-3d;
}

/* HOVER */

.modelo-card:hover .modelo-card-inner{
	transform:rotateY(180deg);
}

/* CARAS */

.modelo-card-front,
.modelo-card-back{
	position:absolute;
	width:100%;
	height:100%;
	border-radius:10px;
	backface-visibility:hidden;
	overflow:hidden;
}

/* FRONTAL */

.modelo-card-front{
	background:linear-gradient(	145deg,	#333, #1d1d1d );
	color:#fff;
	padding:30px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	font-size: 16px;
	font-weight: 700;
	border-radius:10px;
	border:1px solid #bbb;
}

/* TRASERA */

.modelo-card-back{
	border-radius:0px;
	transform:rotateY(180deg);
	background:#000;
	border-radius:10px;
	border:0px;
}

/* IMAGEN */

.modelo-card-back img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.modelo-card-titulo{
	margin-top:20px;
	font-size:25px;
	font-weight:600;
	margin-bottom:20px;
}

.modelo-card-versiones{
	font-size:14px;
	opacity:.7;
}

.modelo-card-precio_min{
	font-size:14px;
	opacity:.7;
	margin-bottom: 5px;
}

.modelo-card-tipos{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-top: 10px;
}

.modelo-badge-tipo{
	background:#3a3a3a;
	border:1px solid #777;
	color:#fff;
	font-size:12px;
	padding:4px 10px;
	border-radius:20px;
	line-height:1.3;
}


/* =========================
   MOBILE FILTROS
========================= */

.mobile-filtros-open{
    display:none;
}

.mobile-filtros{
    display:none;
}

/* ===== MOBILE ===== */

@media only screen and (min-width: 1px) and (max-width: 999px) {

    /* Layout pasa a 1 columna */
    .modelos-layout{
        grid-template-columns:1fr;
        margin-left:0;
        padding:20px;
    }

    /* Ocultar sidebar */
    .modelos-filtros{
        display:none;
    }

    /* Botón abrir */
    .mobile-filtros-open{
    	display: flex;
    	align-items: center;
		width:calc(95% - 15px);
        margin:20px 20px 00px 20px;
        padding:12px;
        border-radius:10px;
        background:#1F497D;
        color:#fff;
        border:none;
        font-size:16px;
		justify-content:left;
    }

	.icono-menu {
	    margin-left: auto;          /* empuja el icono a la derecha */
	    font-size: 18px;
	}
	
    /* Overlay */
	.mobile-filtros{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:#1d1d1d;
		z-index:9999;
    	will-change: transform;
		display:flex;
		flex-direction:column;

		/* ESTADO CERRADO */
		transform:translateX(-100%);
		opacity:0;
		visibility:hidden;
		pointer-events:none;

		transition:transform .3s ease, opacity .3s ease;
	}

	.mobile-filtros.activo{
		transform:translateX(0);
		opacity:1;
		visibility:visible;
		pointer-events:auto;
	}

    /* Header */
    .mobile-filtros-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:20px;
        font-size:18px;
        border-bottom:1px solid #333;
    }

    .mobile-filtros-close{
        background:none;
        border:none;
        color:#fff;
        font-size:22px;
    }

    /* Lista */
    .mobile-filtros-list{
        padding:20px;
        overflow-y:auto;
        flex:1;
    }

    /* Footer */
    .mobile-filtros-footer{
        padding:20px;
        border-top:1px solid #333;
    }

    .mobile-aplicar{
    	display: flex;
    	align-items: center;
		width:calc(95% - 15px);
        margin:20px 20px 00px 20px;
        padding:12px;
        border-radius:10px;
        background:#1F497D;
        color:#fff;
        border:none;
        font-size:16px;
		justify-content:center;
    }
	
	.mobile-aplicar.secondary{
		background:#444;
		color:#fff;
		margin-bottom:10px;
	}

	.mobile-aplicar.secondary:hover{
		background:#666;
	}

	.mobile-filtros-list h3{
		margin-top:10px;
		margin-bottom:15px;
		color:rgba(252, 252, 253, 0.7);
		font-size: 15px;
		line-height: 20px;
	}
}