/* Premium Cards Carousel for Elementor - v1.2.0
   Compatible con WoodMart: flechas, puntos y selector son <span role="button">
   (no <button>) para que el tema no les aplique sus estilos de botón, y la imagen
   es un background-image que siempre ocupa el 100% del recuadro. */

.pcc {
	/* Valores por defecto. Elementor los sobrescribe con los controles del widget. */
	--pcc-per-view: 3;
	--pcc-cols: 3;
	--pcc-gap: 24px;
	--pcc-blur: 8px;
	--pcc-zoom: 1.06;
	--pcc-bright: 1;
	--pcc-sat: 1;
	--pcc-speed: 500ms;
	--pcc-trail: #22c55e;
	--pcc-trail-dur: 900ms;
	--pcc-arrow-off: -14px;
	--pcc-edge: 24px;
	--pcc-img-h: 220px;
	--pcc-card-pt: 10px;
	--pcc-lift: 6px;
	--pcc-pt: 24px;
	--pcc-pr: var(--pcc-edge);
	--pcc-pb: 46px;
	--pcc-pl: var(--pcc-edge);
	--pcc-arrow-top: calc(var(--pcc-pt) + var(--pcc-card-pt) + var(--pcc-img-h) / 2);
	--pcc-dot: 10px;
	--pcc-ov: rgba(11, 47, 107, 0.45);
	--pcc-shine: rgba(255, 255, 255, 0.45);
	--pcc-ring: #0a8fe8;
	--pcc-ring-w: 2px;
	--pcc-tline: #0a8fe8;
	--pcc-btn-bgn: #0a8fe8;
	--pcc-btn-hbg: #0b2f6b;

	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.pcc *, .pcc *::before, .pcc *::after { box-sizing: border-box; }

@media (max-width: 1024px) {
	.pcc { --pcc-per-view: 2; --pcc-cols: 2; --pcc-gap: 20px; --pcc-arrow-off: 4px; --pcc-img-h: 200px; }
}
@media (max-width: 767px) {
	.pcc { --pcc-per-view: 1; --pcc-cols: 1; --pcc-gap: 16px; --pcc-edge: 16px; }
}

/* ---------- Escenario y pista ---------- */
.pcc-stage { position: relative; }

.pcc-track {
	display: flex;
	gap: var(--pcc-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pcc-pl);
	/* Padding general del contenido: editable desde Estilo > Tarjeta */
	padding: var(--pcc-pt) var(--pcc-pr) var(--pcc-pb) var(--pcc-pl);
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	outline: none;
}
.pcc-track::-webkit-scrollbar { display: none; }

.pcc-track.is-drag {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}
.pcc[data-drag="1"][data-mode="carousel"] .pcc-track { cursor: grab; }

.pcc-item {
	flex: 0 0 calc((100% - (var(--pcc-per-view) - 1) * var(--pcc-gap)) / var(--pcc-per-view));
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
}

/* ---------- Modo grilla ---------- */
.pcc[data-mode="grid"] .pcc-track {
	display: grid;
	grid-template-columns: repeat(var(--pcc-cols), minmax(0, 1fr));
	overflow: visible;
	scroll-snap-type: none;
	cursor: auto;
}
.pcc[data-mode="grid"] .pcc-item { flex: none; width: auto; }
.pcc[data-mode="grid"] .pcc-arrow,
.pcc[data-mode="grid"] .pcc-dots { display: none; }

.pcc.pcc--static .pcc-arrow,
.pcc.pcc--static .pcc-dots { display: none; }

/* ---------- Tarjeta ---------- */
.pcc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border-radius: 18px;
	padding: 10px 10px 24px;
	box-shadow: 0 8px 24px rgba(10, 60, 130, 0.10);
	transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s ease, background-color 0.35s ease;
	will-change: transform;
}
@media (hover: hover) {
	.pcc-card:hover {
		transform: perspective(900px) rotateX(var(--pcc-rx, 0deg)) rotateY(var(--pcc-ry, 0deg)) translateY(calc(var(--pcc-lift) * -1));
	}
	.pcc-card.is-tilting { transition: transform 0.08s linear, box-shadow 0.35s ease, background-color 0.35s ease; }
}

/* Borde luminoso */
.pcc--ring .pcc-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	border: var(--pcc-ring-w) solid var(--pcc-ring);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
.pcc--ring .pcc-card:hover::before { opacity: 1; }

/* ---------- Imagen (background-image) ---------- */
.pcc-media-wrap { margin-bottom: 20px; }

.pcc-media {
	position: relative;
	height: var(--pcc-img-h);
	overflow: hidden;
	border-radius: 14px;
	background-color: #e6edf7;
	isolation: isolate;
	transform: translateZ(0); /* recorte correcto con blur */
	--f-gray: 0;
	--f-blur: 0px;
	--f-br: 1;
	--f-sat: 1;
}

.pcc-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	-webkit-user-drag: none;
	user-select: none;
	filter: grayscale(var(--f-gray)) blur(var(--f-blur)) brightness(var(--f-br)) saturate(var(--f-sat));
	transition: filter var(--pcc-speed) ease, transform calc(var(--pcc-speed) + 150ms) cubic-bezier(.2, .8, .2, 1), opacity var(--pcc-speed) ease;
}
.pcc-img--alt { opacity: 0; }

.pcc--gray .pcc-media { --f-gray: 1; }

@media (hover: hover) {
	.pcc-media:hover .pcc-img { transform: scale(var(--pcc-zoom)); }
	.pcc-media:hover { --f-br: var(--pcc-bright); --f-sat: var(--pcc-sat); }
	.pcc--blur .pcc-media:hover { --f-blur: var(--pcc-blur); }
	.pcc--gray .pcc-media:hover { --f-gray: 0; }
	.pcc-media:hover .pcc-img--alt { opacity: 1; }
}

/* Capa de color */
.pcc--ov .pcc-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--pcc-ov);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--pcc-speed) ease;
}
.pcc--ov-grad .pcc-media::after { background: linear-gradient(to top, var(--pcc-ov), transparent 75%); }
@media (hover: hover) { .pcc--ov .pcc-media:hover::after { opacity: 1; } }

/* Brillo diagonal */
.pcc--shine .pcc-media::before {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	z-index: 2;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, var(--pcc-shine), transparent);
	transform: skewX(-20deg);
	opacity: 0;
	pointer-events: none;
}
@media (hover: hover) { .pcc--shine .pcc-media:hover::before { animation: pcc-shine 0.9s ease forwards; } }
@keyframes pcc-shine {
	0%   { left: -60%; opacity: 1; }
	100% { left: 140%; opacity: 1; }
}

/* ---------- Insignia ---------- */
.pcc-badge {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: #0b2f6b;
	color: #fff;
	border-radius: 12px;
	line-height: 1;
	pointer-events: none;
	transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), background-color 0.3s ease, color 0.3s ease;
}
.pcc-badge i { font-size: 28px; line-height: 1; }
.pcc-badge svg { width: 28px; height: 28px; fill: currentColor; }

.pcc-badgefx--scale  .pcc-card:hover .pcc-badge { transform: scale(1.12); }
.pcc-badgefx--rotate .pcc-card:hover .pcc-badge { transform: rotate(-10deg) scale(1.1); }
.pcc-badgefx--bounce .pcc-card:hover .pcc-badge { animation: pcc-bounce 0.7s ease; }
.pcc-badgefx--pulse  .pcc-badge { animation: pcc-badge-pulse 2s ease-out infinite; }

@keyframes pcc-bounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-10px); }
	55% { transform: translateY(0); }
	75% { transform: translateY(-4px); }
}
@keyframes pcc-badge-pulse {
	0%   { box-shadow: 0 0 0 0 var(--pcc-ring); }
	70%  { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* ---------- Estela de círculos ---------- */
.pcc-trail-dot {
	position: absolute;
	z-index: 2;
	border-radius: 50%;
	pointer-events: none;
	background: var(--pcc-trail);
	transform: translate(-50%, -50%) scale(0.3);
	opacity: 0;
	animation: pcc-dot var(--pcc-trail-dur) ease-out forwards;
}
.pcc-trail-dot.is-core { animation-name: pcc-core; }
.pcc--trail-ring .pcc-trail-dot { background: transparent; border: 2px solid var(--pcc-trail); }

@keyframes pcc-dot {
	0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0.3); }
	35%  { opacity: 0.45; }
	100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes pcc-core {
	0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

/* ---------- Contenido ---------- */
.pcc-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0 16px;
}
.pcc-title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: #0b2f6b;
	transition: color 0.3s ease;
}
.pcc--tl .pcc-title {
	width: fit-content;
	max-width: 100%;
	padding-bottom: 4px;
	background: linear-gradient(var(--pcc-tline), var(--pcc-tline)) 0 100% / 0 2px no-repeat;
	transition: color 0.3s ease, background-size 0.45s cubic-bezier(.2, .8, .2, 1);
}
.pcc--tl .pcc-card:hover .pcc-title { background-size: 100% 2px; }

.pcc-desc {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #5b6b85;
}
.pcc-divider {
	border-top: 1px solid #d6deea;
	margin: 2px 0 16px;
}
.pcc-subtitle {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 600;
	color: #0b2f6b;
}
.pcc-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pcc-list li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	color: #0b2f6b;
}
.pcc-list li::before { content: none; }
.pcc-list svg { flex: none; color: #16a34a; }

/* ---------- Botón de la tarjeta ---------- */
.pcc-actions {
	display: flex;
	justify-content: flex-start;
	margin-top: auto;
	padding-top: 20px;
}
.pcc a.pcc-btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 0;
	border-radius: 30px;
	background: #0a8fe8;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pcc a.pcc-btn:hover, .pcc a.pcc-btn:focus { background: #0b2f6b; color: #fff; text-decoration: none; }
.pcc a.pcc-btn:active { transform: scale(0.97); }
.pcc a.pcc-btn .pcc-ico { flex: none; transition: transform 0.3s ease; }
.pcc a.pcc-btn:hover .pcc-ico { transform: translateX(2px); }

.pcc-btnfx--slide a.pcc-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pcc-btn-hbg);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(.2, .8, .2, 1);
}
.pcc-btnfx--slide a.pcc-btn:hover::before,
.pcc-btnfx--slide a.pcc-btn:focus::before { transform: scaleX(1); }
.pcc-btnfx--slide a.pcc-btn:hover,
.pcc-btnfx--slide a.pcc-btn:focus { background-color: var(--pcc-btn-bgn) !important; }

.pcc-btnfx--lift a.pcc-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -8px var(--pcc-btn-bgn); }
.pcc-btnfx--glow a.pcc-btn:hover { box-shadow: 0 0 18px 2px var(--pcc-btn-bgn); }
.pcc-btnfx--pulse a.pcc-btn:hover { animation: pcc-btn-pulse 1s ease-out infinite; }
.pcc-btnfx--none a.pcc-btn:hover .pcc-ico,
.pcc-btnfx--slide a.pcc-btn:hover .pcc-ico,
.pcc-btnfx--lift a.pcc-btn:hover .pcc-ico,
.pcc-btnfx--glow a.pcc-btn:hover .pcc-ico,
.pcc-btnfx--pulse a.pcc-btn:hover .pcc-ico { transform: none; }

@keyframes pcc-btn-pulse {
	0%   { box-shadow: 0 0 0 0 var(--pcc-btn-bgn); }
	100% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
}

/* ---------- Flechas (span role=button: inmunes al CSS de botones del tema) ---------- */
.pcc .pcc-arrow {
	position: absolute;
	top: var(--pcc-arrow-top);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #0a8fe8;
	color: #fff;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 6px 16px rgba(10, 60, 130, 0.25);
	transform: translateY(-50%);
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.pcc .pcc-arrow::before, .pcc .pcc-arrow::after { content: none; }
.pcc .pcc-arrow svg {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	max-width: none;
	margin: 0;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
}
.pcc .pcc-arrow:hover:not(.is-disabled) { background: #0b2f6b; transform: translateY(-50%) scale(1.06); }
.pcc .pcc-arrow.is-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.pcc .pcc-arrow:focus-visible { outline: 2px solid #0a8fe8; outline-offset: 3px; }
.pcc .pcc-prev { left: var(--pcc-arrow-off); }
.pcc .pcc-next { right: var(--pcc-arrow-off); }

/* ---------- Puntos ---------- */
.pcc .pcc-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
.pcc .pcc-dot-btn {
	display: block;
	flex: none;
	width: var(--pcc-dot);
	height: var(--pcc-dot);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #b9c7db;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.25s ease, transform 0.25s ease, width 0.3s ease;
}
.pcc .pcc-dot-btn::before, .pcc .pcc-dot-btn::after { content: none; }
.pcc .pcc-dot-btn.is-active { background: #0a8fe8; transform: scale(1.25); }
.pcc--dots-pill .pcc-dot-btn.is-active { width: calc(var(--pcc-dot) * 2.6); transform: none; }

/* ---------- Selector carrusel / grilla ---------- */
.pcc-switch {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-bottom: 8px;
}
.pcc .pcc-switch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #d6deea;
	border-radius: 10px;
	background: #fff;
	color: #0b2f6b;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	box-shadow: none;
	user-select: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.pcc .pcc-switch-btn svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; pointer-events: none; }
.pcc .pcc-switch-btn[aria-pressed="true"] { background: #0a8fe8; border-color: #0a8fe8; color: #fff; }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
	.pcc-card, .pcc-img, .pcc-badge, .pcc a.pcc-btn { transition: none; animation: none; }
	.pcc-trail-dot { display: none; }
	.pcc-track { scroll-behavior: auto; }
	.pcc--shine .pcc-media::before { display: none; }
}