/*
 * [serenia_tratamientos] listing: search, filter chips and cards.
 * Selectors are scoped under .serenia-trat (0,2,0+) so they beat Astra's
 * "button:hover/focus" and Elementor's ".elementor-kit-N button" (0,1,1) rules.
 * Layout reacts to the widget's own width (container queries), not the viewport.
 */
.serenia-trat{
	--s-brown:#5d4839;
	--s-text:#615a5a;
	--s-beige:#efe9e1;
	--s-white:#fff;
	--s-yellow:#fde962;
	--s-line:rgba(93,72,57,.16);
	--s-radius:16px;
	--s-ease:cubic-bezier(.2,0,0,1);
	container-type:inline-size;
	font-family:"Avenir",sans-serif;
	color:var(--s-text);
}

/* Bar: one wrapping row; chips flow inline after the search field */
.serenia-trat .serenia-trat__bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 32px}
.serenia-trat .serenia-chips{display:contents}

/* Search */
.serenia-trat .serenia-search{position:relative;display:flex;align-items:center;flex:0 1 400px;margin:0;color:var(--s-brown)}
.serenia-trat .serenia-search svg{position:absolute;left:20px;pointer-events:none}
.serenia-trat .serenia-search input[type=search]{
	width:100%;height:52px;margin:0;padding:0 24px 0 52px;
	border:1px solid var(--s-line);border-radius:999px;background:var(--s-white);box-shadow:none;
	font:inherit;font-size:16px;line-height:1.2;color:var(--s-brown);
	-webkit-appearance:none;appearance:none;
	transition:border-color .15s var(--s-ease);
}
.serenia-trat .serenia-search input[type=search]::placeholder{color:var(--s-text);opacity:.85}
.serenia-trat .serenia-search input[type=search]:hover{border-color:rgba(93,72,57,.4)}
.serenia-trat .serenia-search input[type=search]:focus{border:1px solid var(--s-brown);outline:none}
.serenia-trat .serenia-search input[type=search]:focus-visible{outline:2px solid var(--s-brown);outline-offset:2px}

/* Chips */
.serenia-trat .serenia-chip{
	display:inline-flex;align-items:center;gap:10px;min-height:52px;margin:0;padding:0 22px;
	border:1px solid var(--s-line);border-radius:999px;background:var(--s-white);box-shadow:none;
	font:inherit;font-size:15px;font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;
	color:var(--s-brown);cursor:pointer;
	transition:background-color .15s var(--s-ease),border-color .15s var(--s-ease);
}
.serenia-trat .serenia-chip:has(.serenia-chip__icon){padding-left:8px}
.serenia-trat .serenia-chip:hover,
.serenia-trat .serenia-chip:focus,
.serenia-trat .serenia-chip:active{background:var(--s-white);border-color:var(--s-line);color:var(--s-brown);box-shadow:none;outline:none}
.serenia-trat .serenia-chip:hover{border-color:var(--s-brown)}
.serenia-trat .serenia-chip[aria-pressed=true],
.serenia-trat .serenia-chip[aria-pressed=true]:hover,
.serenia-trat .serenia-chip[aria-pressed=true]:focus{background:var(--s-yellow);border-color:var(--s-yellow);color:var(--s-brown)}
.serenia-trat .serenia-chip[aria-pressed=true]:hover{border-color:var(--s-brown)}
.serenia-trat .serenia-chip:focus-visible{outline:2px solid var(--s-brown);outline-offset:2px}
.serenia-trat .serenia-chip__icon{flex:none;width:36px;height:36px;padding:6px;border-radius:50%;background:var(--s-beige);object-fit:contain}
.serenia-trat .serenia-chip[aria-pressed=true] .serenia-chip__icon{background:var(--s-white)}

/* Grid */
.serenia-trat .serenia-trat__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin:0;padding:0;list-style:none}
.serenia-trat .serenia-card{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:0;overflow:hidden;border-radius:var(--s-radius);background:var(--s-white)}
.serenia-trat .serenia-card::before{content:none}
.serenia-trat .serenia-card[hidden]{display:none}
.serenia-trat .serenia-card:has(.serenia-card__link:focus-visible){outline:2px solid var(--s-brown);outline-offset:2px}

.serenia-trat .serenia-card__link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none;box-shadow:none;outline:none}
.serenia-trat .serenia-card__link:hover,
.serenia-trat .serenia-card__link:focus{color:inherit;text-decoration:none}
.serenia-trat .serenia-card__img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:6/5;margin:0;border-radius:0;object-fit:cover;background:var(--s-beige)}
.serenia-trat .serenia-card__body{display:flex;flex-direction:column;flex:1;padding:20px}
.serenia-trat .serenia-card__title{margin:0 0 8px;padding:0;font-family:inherit;font-size:26px;font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--s-brown)}
.serenia-trat .serenia-card__desc{
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
	margin:0;font-size:14px;line-height:1.5;color:var(--s-text);
}
.serenia-trat .serenia-card__price{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;margin:auto 0 0;padding-top:20px;font-size:14px;line-height:1;color:var(--s-text)}
.serenia-trat .serenia-card__price strong{font-size:28px;font-weight:500;color:var(--s-brown)}

/* CTA card: same shape, beige, centered content */
.serenia-trat .serenia-card--cta{background:var(--s-beige)}
.serenia-trat .serenia-card--cta .serenia-card__img{object-position:50% 15%}
.serenia-trat .serenia-card--cta .serenia-card__body{align-items:center;text-align:center}
.serenia-trat .serenia-card--cta .serenia-card__title{font-weight:800}
.serenia-trat .serenia-card--cta .serenia-card__desc{display:block;margin-bottom:20px;font-size:15px}
.serenia-trat .serenia-card__btn{
	display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:auto 0 0;padding:0 28px;
	border:1px solid var(--s-brown);border-radius:999px;background:transparent;box-shadow:none;
	font:inherit;font-size:15px;font-weight:500;line-height:1.2;text-decoration:none;color:var(--s-brown);
	transition:background-color .15s var(--s-ease),color .15s var(--s-ease);
}
.serenia-trat .serenia-card__btn:hover,
.serenia-trat .serenia-card__btn:focus{background:var(--s-brown);color:var(--s-white);text-decoration:none}
.serenia-trat .serenia-card__btn:focus-visible{outline:2px solid var(--s-brown);outline-offset:2px}

@media (hover:hover){
	.serenia-trat .serenia-card__img{transition:transform .4s var(--s-ease)}
	.serenia-trat .serenia-card__link:hover .serenia-card__img{transform:scale(1.03)}
}

/* Filtered-zero state */
.serenia-trat .serenia-trat__empty{margin:0 0 30px;padding:40px 24px;border-radius:var(--s-radius);background:var(--s-white);text-align:center}
.serenia-trat .serenia-trat__empty[hidden]{display:none}
.serenia-trat .serenia-trat__empty p{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--s-brown)}
.serenia-trat .serenia-trat__reset{
	display:inline-flex;align-items:center;min-height:48px;margin:0;padding:0 24px;
	border:1px solid var(--s-brown);border-radius:999px;background:transparent;box-shadow:none;
	font:inherit;font-size:15px;font-weight:500;line-height:1.2;text-transform:none;color:var(--s-brown);cursor:pointer;
	transition:background-color .15s var(--s-ease),color .15s var(--s-ease);
}
.serenia-trat .serenia-trat__reset:hover,
.serenia-trat .serenia-trat__reset:focus{background:var(--s-brown);border-color:var(--s-brown);color:var(--s-white);outline:none}
.serenia-trat .serenia-trat__reset:focus-visible{outline:2px solid var(--s-brown);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
	.serenia-trat *{transition:none!important}
	.serenia-trat .serenia-card__link:hover .serenia-card__img{transform:none}
}

@container (max-width:1099px){
	.serenia-trat .serenia-trat__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
	.serenia-trat .serenia-card__title{font-size:24px}
}
@container (max-width:799px){
	.serenia-trat .serenia-trat__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@container (max-width:599px){
	.serenia-trat .serenia-trat__bar{margin-bottom:24px}
	.serenia-trat .serenia-search{flex-basis:100%}
	.serenia-trat .serenia-search input[type=search]{height:48px}
	/* One scrollable row; padding keeps focus rings inside the scroll box. */
	.serenia-trat .serenia-chips{display:flex;gap:8px;width:calc(100% + 8px);min-width:0;margin:0 -4px;padding:4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
	.serenia-trat .serenia-chips::-webkit-scrollbar{display:none}
	.serenia-trat .serenia-chip{flex:none;min-height:44px;padding:0 16px;font-size:14px}
	.serenia-trat .serenia-chip:has(.serenia-chip__icon){padding-left:6px}
	.serenia-trat .serenia-chip__icon{width:32px;height:32px}
}
@container (max-width:519px){
	.serenia-trat .serenia-trat__grid{grid-template-columns:minmax(0,1fr)}
}

/* Family links (segmented pill row above the bar, like the reference's category tabs) */
.serenia-trat .serenia-famnav{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0 0 32px;padding:4px;border-radius:999px;background:var(--s-white)}
.serenia-trat .serenia-famnav__link{display:inline-flex;align-items:center;min-height:44px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:500;line-height:1.2;color:var(--s-brown);text-decoration:none;transition:background-color .15s var(--s-ease),color .15s var(--s-ease)}
.serenia-trat .serenia-famnav__link:hover{background:var(--s-beige);color:var(--s-brown)}
.serenia-trat .serenia-famnav__link[aria-current=page]{background:var(--s-brown);color:var(--s-white)}
.serenia-trat .serenia-famnav__link:focus-visible{outline:2px solid var(--s-brown);outline-offset:2px}
@container (max-width:600px){
	.serenia-trat .serenia-famnav{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:20px}
	.serenia-trat .serenia-famnav__link{flex:none;white-space:nowrap;padding:0 18px;font-size:14px}
}