/* Seccion proyectos */
#contenedor{height: 570px; display:flex; align-items:center; gap:30px; overflow-x:auto; overflow-y:hidden; padding:0 60px; scroll-behavior:smooth; scrollbar-width:none; margin-top: 50px;}
#contenedor::-webkit-scrollbar{display:none;}

/* FILTROS */
.titulo-filtros{padding:10px 40px; background:transparent; font-size:16px; font-weight:700; text-transform:none; border: 2px solid #7f7f7f; border-radius: 50%;}
.contenedor-porfolio button:hover, .contenedor-porfolio button:focus{background-color: transparent!important;}
.contenido-filtros{padding:8px 0px 0px 0px;}

/* Grupos principales */
.grupos-filtros{display:flex; flex-wrap:wrap; gap:10px;}
.grupo-filtro{border:0px!important; background:transparent; color:#d1d5db; padding:12px; cursor:pointer; font-size:14px; font-weight:600; transition:.25s;}
.grupo-filtro:hover{color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.08);}
.grupo-filtro.activo{border-color:var(--accent); color:#fff;}

/* Subgrupos */
.subgrupo-filtros{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-left:10px; border-left:2px solid var(--accent);}
.subfiltro{padding:12px 30px; cursor:pointer; font-size:12px; transition:.25s; border: 2px solid #7f7f7f; border-radius: 50%; background: transparent;}
.subfiltro:hover{color:#262626; background-color:#B6D8D6!important; border-color:#B6D8D6!important;}
.subfiltro.activo{color:#262626; background-color:#B6D8D6!important; border-color:#B6D8D6!important;}
button.subfiltro:hover, button.subfiltro:focus{color:#262626; background-color:#B6D8D6!important; border-color:#B6D8D6!important;}

/* Refuerza el comportamiento de los atributos hidden */
[hidden]{display:none !important;}

/* SIN RESULTADOS */
.sin-resultados{display: none; min-height:250px; padding:40px; border-radius:24px; border:1px solid rgba(255,255,255,.08); align-items:center; justify-content:center; text-align:center; color: white;}
.sin-resultados.visible{display:flex;}

/* RESPONSIVE */
@media(max-width:768px){
    #contenedor{height:calc(100vh - 70px); padding:0 20px; gap:20px;}
    .proyecto{flex-basis:calc(100vw - 70px); height:530px;}
    .sin-resultados{flex-basis:calc(100vw - 70px);}
}

/* Solo organiza los dos botones */
.selector-disposicion {display: flex; align-items: center; gap: 10px;}

/* Diseño horizontal por defecto */
#contenedor.sel-horizontal {display: flex; align-items: center;}

/* Diseño vertical seleccionado */
#contenedor.sel-vertical {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto;}
.selector-disposicion__boton {padding: 0; border: 0; height: 40px; width: 60px; background-color: transparent; cursor: pointer; opacity: 0.5;}
.selector-disposicion__boton.activo {opacity: 1;}
.seccion-header-porfolio{display: flex; align-items: flex-end; justify-content: space-between; flex-direction: row; width: 90%; margin: auto;}
.seccion-header-porfolio > div.bloque-filtros{width: 75%!important;}
.seccion-header-porfolio > div.selector-disposicion{width: 25%!important;}
.seccion-header-porfolio > div.selector-disposicion{justify-content: flex-end;}

/* TARJETAS */
.proyecto{flex:0 0 510px; height:auto; background:transparent; border:0; border-radius:0; overflow:visible; cursor:pointer; outline:none;}
.proyecto-titulo{ margin:0 0 10px; color: white!important; font-size: 22px; font-weight:500;}
.oculto{display: none!important;}

/* La tarjeta conserva una altura fija. La imagen ocupa todo el espacio disponible y se reduce exactamente lo necesario según la altura real del texto. */
.proyecto-media{ display:flex; flex-direction:column; width:100%; height:460px; overflow:hidden; background:transparent;}
.proyecto-imagen{ display:block; flex:1 1 auto; min-height:0; width:100%; height:auto; object-fit:cover; border-radius:10px; transition: flex-basis .4s ease, transform .4s ease;}
.proyecto-imagen-fondo{background-size:cover; background-position:center;}


/* La descripción está en el flujo normal. max-height permite que ocupe solo lo que necesita: dos líneas, cuatro líneas o cualquier altura intermedia. */
.proyecto-descripcion{ flex:0 0 auto; max-height:0; overflow:hidden; padding:0 2px; color:white; background:var(--bg); opacity:0; visibility:hidden; transform:translateY(8px); transition: max-height .4s ease, padding .4s ease, opacity .25s ease .08s, visibility .25s ease .08s, transform .25s ease .08s;}
.proyecto-descripcion p{ margin:10px 0px 0px 0px; max-width:100%; color: white!important; font-size: 16px!important; line-height: normal; border-top: 2px solid; padding-top:10px; display: flex; flex-direction: row; align-items: center;}

/* Al hacer hover, el texto toma su altura real. La imagen se encoge automáticamente para dejarle espacio. */
.proyecto:hover .proyecto-descripcion, .proyecto:focus .proyecto-descripcion, .proyecto:focus-within .proyecto-descripcion{ max-height:220px; padding:10px 2px 0; opacity:1; visibility:visible; transform:translateY(0);}
.proyecto:hover .proyecto-imagen, .proyecto:focus .proyecto-imagen, .proyecto:focus-within .proyecto-imagen{transform:scale(1.01);}
.proyecto-anio{ margin-top:10px; color: white !important; font-size:16px; font-weight:600; line-height:1;}

@media (hover:none){
    .proyecto-descripcion{transition: max-height .3s ease, padding .3s ease, opacity .2s ease, visibility .2s ease;}
}