.carnets-block {
  display: flex;
  flex-direction: column;
  position: sticky;
  gap: var(--spacing-40);
  width: 100%;
  margin-block-start: 0;
}

/* .carnets-block .col {
  flex-basis: 50%;
} */


.carnets-grid.col {
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  position: relative;
}

.carnets-filters.col {
  position: sticky;
  top: 0; 
  left: 0;
  align-self: start;
  display: flex;
  gap: var(--spacing-24);
  z-index: 9;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: var(--spacing-24) var(--spacing-24);
  border-radius: 8px;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* .filter-group:not(:last-child) { 
  margin-bottom: 1rem; 
} */

.filter-group {
    flex-basis: 33%;
}

.filter-group .pregunta {
  font-weight: 600;
  font-size: var(--wp--preset--font-size--h-6);
}

.filter-buttons { 
  margin:0.5em 0; 
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-btn {
  padding: 0.2em 0.6em;
  cursor: pointer;
  border: 1px solid rgba(244, 0, 0, 0.4);
  border-radius: var(--wp--preset--spacing--space-80);
  background: var(--wp--preset--color--white);
  transition: 0.2s;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--small);
}
.filter-btn.active, .filter-btn:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--accent); }
.filter-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.filter-btn:focus { outline-width: 1px; }


.carnets-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.carnet-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  position: relative;
  padding: var(--spacing-24);
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(244, 0, 0, 0.4); 
  width: 100%;
  flex-basis: 32%;
  box-shadow: 0px 0px 40px #ff00001c;
}


.carnet-card .image {
    width: 100%;
    max-width: 20vw;
    height: auto;
    overflow: hidden;
    border-radius: 8px;
}

.carnet-card .image img {
    object-fit: cover;
    border-radius: 8px;
    width: 100%;
    height: 100%;
}

.carnet-card .title {
  font-size: var(--wp--preset--font-size--h-4);
  margin: 0.5rem 0; 
}

.carnet-card ul {
  font-size: var(--wp--preset--font-size--h-6);
}

.carnet-card li {
  margin-bottom: 0 !important;
}

.carnet-card .desc {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  gap: var(--spacing-12);
}

.carnet-card .titulo {
  padding: 0 !important;
}

.carnet-card .titulo-precio, .carnet-card .meta {
  justify-content: space-between;
}

.carnet-card .wp-block-post-terms a {
  pointer-events: none;
  text-decoration: none;
  color: var(--wp--preset--color--black-80);
}

.carnet-card .precio {
  border-radius: 8px;
  /* padding: 4px 8px;
  border: 1px solid var(--color-accent-40); */
  /* background-color: rgb(244 0 0 / 16%); */
}


.carnet-card ul.wp-block-list {
  margin: 0;
  margin-bottom: var(--spacing-24);
}

.carnet-card .wp-block-button__link {
  width: fit-content;
  margin-top: auto;
}


/* Boton mostrar / ocultar filtros desktop */
.cb-toggle-filters {
  display: none;
}



@media only screen and (max-width: 768px) {
  .carnets-block {
    flex-direction: column;
    position: relative;
    justify-content: center;
    margin-top: var(--spacing-24);
  }
  .carnets-filters.col {
    flex-basis: 100%;
    position: fixed;
    left: 0;
    bottom: var(--spacing-24);
    top: inherit;
    padding: var(--spacing-24);
    flex-direction: column;
    box-shadow: 1px 1px 1px #f0f0f0 inset, 1px 1px 1px #f2f2f2;
  }

  .filter-btn { background: #ffffffc2; margin: 2px; padding: 4px 10px; }

  svg#corner1 { width: 40%; left: -40px;  }
  svg#corner3 { width: 30%; }

  .carnets-grid.col { flex-direction: row; overflow: scroll; scroll-snap-type: x proximity; }
  .carnets-grid .carnet-card { flex-direction: column; gap: var(--spacing-8); min-width: 100%; width: 100%;}
  .carnet-card ul.wp-block-list { margin-bottom: 0;}
  .carnet-card .image { max-width: 100%; height: 140px;}
  .carnet-card .desc { gap: var(--spacing-12); }

  .result-content .carnet-card { flex: 0 0 70% !important; }
  .result-content .carnet-card .wp-block-buttons { margin-top: var(--spacing-12); }
	
	/* Boton mostrar / ocultar filtros mobile */
  .cb-toggle-filters {
    display: block;
    width: 100%;
    padding: var(--spacing-8);
    border: 1px solid var(--wp--preset--color--accent);
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--white);
    font-family: inherit;
    border-radius: var(--border-radius);
  }

  .carnets-filters:not(.filters-open) .filter-group {
    display: none;
  }

  .filters-open .cb-toggle-filters {
    margin-bottom: var(--spacing-8);
  }
}