/* ==========================================================================
   Kinesilk New — styles.css
   Mobile first. Breakpoints: 768px (tablet) · 1100px (desktop)
   Colores y fuentes vienen de theme.json (variables --wp--preset--*)
   ========================================================================== */

/* 1. Variables
   ========================================================================== */
:root {
	--ks-cream: var(--wp--preset--color--cream);
	--ks-mint: var(--wp--preset--color--mint);
	--ks-coral: var(--wp--preset--color--coral);
	--ks-blush: var(--wp--preset--color--blush);
	--ks-aqua: var(--wp--preset--color--aqua);
	--ks-ink: var(--wp--preset--color--ink);
	--ks-ink-soft: var(--wp--preset--color--ink-soft);
	--ks-white: #fff;
	/* Colores de la gráfica promo (solo en el hero promocional) */
	--ks-promo-pink: var(--wp--preset--color--promo-pink);
	--ks-promo-yellow: var(--wp--preset--color--promo-yellow);
	--ks-hero-pink: var(--wp--preset--color--hero-pink);
	--ks-radius: 24px;
	--ks-radius-sm: 14px;
	--ks-shadow: 0 1px 2px rgba(30, 43, 42, .04), 0 12px 32px -16px rgba(30, 43, 42, .18);
	--ks-shadow-lg: 0 2px 4px rgba(30, 43, 42, .04), 0 24px 48px -20px rgba(30, 43, 42, .25);
	--ks-section-y: clamp(4rem, 9vw, 7.5rem);
	--ks-max: 1180px;
}

/* 2. Base
   ========================================================================== */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, p, li {
	text-wrap: pretty;
}

a {
	color: var(--ks-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

a:hover {
	color: var(--ks-ink);
	text-decoration-color: var(--ks-coral);
	text-decoration-thickness: 3px;
}

:where(a, button, summary, input):focus-visible {
	outline: 3px solid var(--ks-ink);
	outline-offset: 3px;
	border-radius: 6px;
}

img {
	height: auto;
	max-width: 100%;
}

.ks-main {
	margin-block-start: 0;
}

.ks-main--page {
	padding-block: var(--ks-section-y);
}

/* 3. Utilidades
   ========================================================================== */
.is-style-ks-hidden {
	display: none !important;
}

.editor-styles-wrapper .is-style-ks-hidden {
	display: block !important;
	opacity: .35;
	outline: 2px dashed var(--ks-coral);
}

/* 4. Botones
   ========================================================================== */
.wp-block-button .wp-block-button__link {
	align-items: center;
	border: 2px solid transparent;
	border-radius: 999px;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 600;
	gap: .5rem;
	justify-content: center;
	line-height: 1.2;
	min-height: 52px;
	padding: .9rem 1.75rem;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
	box-shadow: 0 14px 28px -12px rgba(30, 43, 42, .4);
	transform: translateY(-2px);
}

.wp-block-button .wp-block-button__link:active {
	box-shadow: 0 4px 10px -6px rgba(30, 43, 42, .4);
	transform: translateY(0);
}

.wp-block-button.is-style-ks-primary .wp-block-button__link {
	background: var(--ks-coral);
	box-shadow: 0 10px 24px -12px rgba(254, 164, 164, .9);
	color: var(--ks-ink);
}

.wp-block-button.is-style-ks-primary .wp-block-button__link:hover {
	background: var(--ks-blush);
	border-color: var(--ks-coral);
	color: var(--ks-ink);
}

.wp-block-button.is-style-ks-whatsapp .wp-block-button__link,
.wp-block-button.is-style-ks-whatsapp-xl .wp-block-button__link {
	background: var(--ks-mint);
	box-shadow: 0 10px 24px -12px rgba(30, 120, 96, .5);
	color: var(--ks-ink);
}

.wp-block-button.is-style-ks-whatsapp .wp-block-button__link:hover,
.wp-block-button.is-style-ks-whatsapp-xl .wp-block-button__link:hover {
	background: var(--ks-aqua);
	border-color: var(--ks-mint);
	color: var(--ks-ink);
}

.wp-block-button.is-style-ks-whatsapp-xl .wp-block-button__link {
	font-size: 1.25rem;
	min-height: 64px;
	padding: 1.1rem 2.5rem;
}

.wp-block-button.is-style-ks-ghost .wp-block-button__link {
	background: transparent;
	border-color: var(--ks-ink);
	color: var(--ks-ink);
}

.wp-block-button.is-style-ks-ghost .wp-block-button__link:hover {
	background: var(--ks-ink);
	color: var(--ks-cream);
}

/* 5. Cabecera
   ========================================================================== */
/* Cabecera fija (sticky). Sin backdrop-filter: rompería el menú móvil a pantalla completa */
html,
body {
	overflow-x: clip;
}

.wp-site-blocks > .ks-header,
.ks-header {
	background: rgba(252, 249, 234, .97);
	border-bottom: 1px solid rgba(30, 43, 42, .06);
	box-shadow: 0 8px 24px -18px rgba(30, 43, 42, .35);
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .ks-header {
	top: var(--wp-admin--admin-bar--height, 0);
}

.ks-header__inner {
	margin-inline: auto;
	max-width: 1320px;
	min-height: 72px;
	padding-block: .5rem;
}

.ks-logo {
	margin: 0;
}

.ks-logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

.ks-header .ks-logo img {
	max-height: 48px;
	width: auto !important;
}

/* Respaldo: el logo de cualquier cabecera nunca supera 48px (plantillas de WooCommerce sin la clase ks-header) */
header .ks-logo img {
	max-height: 48px;
	width: auto !important;
}

/* Tinte para logos blancos: sube el logo blanco real y aplica el estilo */
.is-style-ks-logo-ink img {
	filter: brightness(0) opacity(.88);
}

.is-style-ks-logo-pink img {
	filter: brightness(0) invert(29%) sepia(62%) saturate(2400%) hue-rotate(312deg) brightness(88%);
}

/* Mobile: hamburguesa a la izquierda, logo al centro */
@media (max-width: 1023px) {
	.ks-header__inner.is-layout-flex {
		display: grid;
		grid-template-columns: 48px 1fr 48px;
		align-items: end;
		gap: .5rem;
	}

	.ks-header .ks-nav {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.ks-header .ks-logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	.ks-header .ks-logo img {
		max-height: 40px;
	}

	.ks-header .ks-minicart {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}

.ks-nav {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	margin-inline-start: auto;
}

.ks-nav .wp-block-navigation-item__content {
	padding: .5rem .25rem;
	text-decoration: none;
}

.ks-nav .wp-block-navigation__responsive-container-open,
.ks-nav .wp-block-navigation__responsive-container-close {
	height: 44px;
	justify-content: center;
	width: 44px;
}

.ks-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ks-cream);
	font-size: 1.375rem;
}

.ks-header__cta {
	display: none !important;
	gap: .5rem;
}

.ks-header__cta .is-style-ks-ghost .wp-block-button__link {
	font-size: .9375rem;
	min-height: 48px;
	padding: .6rem 1.1rem;
}

/* Mini carrito (WooCommerce) */
.ks-minicart .wc-block-mini-cart__button {
	align-items: center;
	border-radius: 12px;
	color: var(--ks-ink);
	display: flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: .5rem;
	transition: background-color .2s ease;
}

.ks-minicart .wc-block-mini-cart__button:hover {
	background: var(--ks-blush);
}

/* Contador: tinta + blanco (contraste ~14:1) con aro crema para separarlo del icono */
.ks-minicart .wc-block-mini-cart__badge {
	background: var(--ks-ink) !important;
	box-shadow: 0 0 0 2px var(--ks-cream);
	color: var(--ks-white) !important;
	font-weight: 700;
}

/* Menú: hamburguesa bajo 1024px, horizontal en escritorio */
.ks-nav .wp-block-navigation__responsive-container-open {
	border-radius: 12px;
}

.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 4rem;
}

.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid rgba(30, 43, 42, .08);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.625rem;
	font-weight: 600;
	width: 100%;
}

.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: .75rem;
}

@media (min-width: 1024px) {
	.ks-header__cta {
		display: flex;
	}

	.ks-nav .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	.ks-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		background: transparent;
		display: block;
		inset: auto;
		padding: 0;
		position: relative;
		width: 100%;
		z-index: auto;
	}

	.ks-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		display: none;
	}

	.ks-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		flex-direction: row;
		gap: 1.5rem;
	}

	.ks-nav .current-menu-item > .wp-block-navigation-item__content {
		box-shadow: inset 0 -2px 0 var(--ks-coral);
	}
}

/* 6. Hero promocional
   ========================================================================== */
.ks-hero {
	background:
		radial-gradient(ellipse 120% 60% at 50% 100%, var(--ks-hero-pink) 0%, rgba(239, 166, 196, .55) 45%, rgba(252, 249, 234, 0) 75%),
		linear-gradient(180deg, var(--ks-cream) 0%, #fbeef0 100%);
	margin-block-start: 0;
	overflow: hidden;
	padding: 2rem 1.25rem 0;
	position: relative;
}

.ks-hero__grid.wp-block-columns {
	align-items: center;
	gap: 1.5rem;
	margin: 0 auto;
	max-width: 1320px;
}

.ks-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	text-align: left;
}

.ks-hero__copy > * {
	margin-block: 0;
}

/* Título promo editable (réplica CSS de la gráfica "Semana Cyber") */
.ks-cyber {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ks-cyber > * {
	margin: 0;
}

.is-style-ks-cyber-pink,
.is-style-ks-cyber-yellow {
	-webkit-text-stroke: .14em var(--ks-white);
	filter: drop-shadow(0 8px 14px rgba(150, 40, 85, .22));
	font-family: var(--wp--preset--font-family--promo);
	font-size: clamp(1.6rem, 10.5vw, 6.5rem);
	font-style: italic;
	font-weight: 900;
	letter-spacing: -.01em;
	line-height: .92;
	paint-order: stroke fill;
	text-transform: uppercase;
}

.is-style-ks-cyber-pink {
	color: var(--ks-promo-pink);
}

.is-style-ks-cyber-yellow {
	color: var(--ks-promo-yellow);
	margin-top: -.05em;
}

.is-style-ks-ribbon {
	background: var(--ks-white);
	box-shadow: 6px 6px 0 var(--ks-promo-yellow);
	color: var(--ks-ink);
	display: inline-block;
	font-family: var(--wp--preset--font-family--promo);
	font-size: clamp(1rem, 4.4vw, 1.5rem);
	font-style: italic;
	font-weight: 800;
	letter-spacing: .01em;
	margin-top: 1rem !important;
	padding: .45em 1.1em;
	text-transform: uppercase;
	transform: skewX(-8deg);
}

.ks-hero__subtitle {
	color: var(--ks-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1rem, 3.6vw, 1.25rem);
	font-weight: 500;
}

.ks-hero__subtitle span {
	color: var(--ks-promo-pink);
	padding-inline: .25em;
}

.ks-badges {
	gap: .5rem;
	justify-content: center;
}

.ks-badge {
	align-items: center;
	border-radius: var(--ks-radius-sm);
	box-shadow: var(--ks-shadow);
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	font-family: var(--wp--preset--font-family--promo);
	font-style: italic;
	justify-content: center;
	max-width: 190px;
	padding: .85rem .6rem;
	text-align: center;
	text-transform: uppercase;
}

.ks-badge > * {
	margin: 0 !important;
}

.ks-badge--magenta {
	background: var(--ks-promo-pink);
	color: var(--ks-white);
}

.ks-badge--magenta .ks-badge__big {
	color: var(--ks-promo-yellow);
}

.ks-badge--sun {
	background: var(--ks-promo-yellow);
	color: var(--ks-ink);
}

.ks-badge__small {
	font-size: .8125rem;
	font-weight: 800;
	line-height: 1.15;
}

.ks-badge__big {
	font-size: 1.375rem;
	font-weight: 900;
	line-height: 1.05;
}

.ks-hero__actions {
	justify-content: center;
}

.ks-hero__actions .wp-block-button {
	width: 100%;
}

.ks-hero__actions .wp-block-button__link {
	width: 100%;
}

.ks-hero__media {
	align-self: end;
}

.ks-hero__img {
	margin: 0;
}

.ks-hero__img img {
	display: block;
	margin-inline: auto;
	width: 100%;
}

.ks-hero__img--tablet,
.ks-hero__img--desktop {
	display: none;
}

/* Mobile/tablet: imagen al lado del título (la columna de texto se "abre" en la grilla) */
@media (max-width: 1099px) {
	.ks-hero {
		padding: 1.25rem 1rem 1.75rem;
	}

	.ks-hero__grid.wp-block-columns {
		align-items: center;
		display: grid;
		gap: .5rem 0;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}

	.ks-hero__copy.wp-block-column {
		display: contents;
	}

	.ks-hero__copy > .ks-cyber,
	.ks-hero__copy > .ks-hero-title {
		align-items: flex-start;
		grid-column: 1;
		grid-row: 1;
	}

	.ks-hero__media.wp-block-column {
		align-self: center;
		grid-column: 2;
		grid-row: 1;
		margin-right: -1rem;
	}

	.ks-hero__copy > .ks-hero__subtitle,
	.ks-hero__copy > .ks-badges,
	.ks-hero__copy > .ks-hero__actions {
		grid-column: 1 / -1;
		margin-top: .5rem;
	}

	.is-style-ks-cyber-pink,
	.is-style-ks-cyber-yellow {
		filter: drop-shadow(0 6px 10px rgba(150, 40, 85, .22));
		font-size: clamp(1.9rem, 10.5vw, 4.5rem);
	}

	.is-style-ks-ribbon {
		font-size: clamp(.7rem, 3.2vw, 1rem);
		margin-top: .75rem !important;
		padding: .35em .7em;
	}

	.ks-badges.is-layout-flex {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ks-badge {
		max-width: none;
	}
}

/* Hero alternativo con video institucional */
.ks-hero-video.wp-block-cover {
	min-height: min(88vh, 760px);
	padding: 6rem 1.25rem;
}

.ks-hero-video__title {
	color: var(--ks-white);
	font-size: var(--wp--preset--font-size--xx-large);
	margin-inline: auto;
	max-width: 16ch;
	text-align: center;
}

.ks-hero-video .ks-hero__subtitle {
	color: var(--ks-white);
	text-align: center;
}

.ks-hero-video .ks-hero__subtitle span {
	color: var(--ks-mint);
}

/* 7. Secciones (estructura común)
   ========================================================================== */
.ks-section {
	margin-block-start: 0;
	padding: var(--ks-section-y) 1.25rem;
}

.ks-section > * {
	margin-inline: auto;
	max-width: var(--ks-max);
}

.ks-section__head {
	margin-block-end: clamp(2rem, 5vw, 3.5rem);
	max-width: 720px;
	text-align: center;
}

.ks-section__head > * {
	margin-block: 0;
}

.ks-eyebrow {
	background: var(--ks-blush);
	border-radius: 999px;
	color: var(--ks-ink);
	border: 1.5px solid var(--ks-coral);
	display: inline-block;
	max-width: 100%;
	padding: .35rem .9rem;
	width: max-content;
	font-family: var(--wp--preset--font-family--heading);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .14em;
	margin-block-end: .75rem !important;
	text-transform: uppercase;
}

.ks-title {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -.015em;
}

.ks-lead {
	color: var(--ks-ink-soft);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	margin-block-start: 1rem !important;
}

.ks-card__title {
	font-size: 1.3125rem;
	margin-block: 0;
}

.ks-card__text {
	color: var(--ks-ink-soft);
	margin-block: 0;
}

/* Iconos geométricos */
.ks-icon {
	align-items: center;
	background: var(--ks-cream);
	border-radius: 16px;
	display: flex;
	height: 56px;
	justify-content: center;
	position: relative;
	width: 56px;
}

.ks-icon::before {
	content: "";
	display: block;
}

.ks-icon--circle { background: rgba(135, 233, 206, .35); }
.ks-icon--circle::before { background: var(--ks-mint); border-radius: 50%; height: 22px; width: 22px; }
.ks-icon--diamond { background: rgba(254, 164, 164, .3); }
.ks-icon--diamond::before { background: var(--ks-coral); height: 18px; transform: rotate(45deg); width: 18px; }
.ks-icon--ring { background: rgba(186, 222, 218, .5); }
.ks-icon--ring::before { border: 5px solid var(--ks-ink); border-radius: 50%; height: 24px; width: 24px; }
.ks-icon--square { background: rgba(255, 189, 190, .45); }
.ks-icon--square::before { background: var(--ks-coral); border-radius: 6px; height: 20px; width: 20px; }

/* 8. Tratamientos (tarjetas deslizables en mobile)
   ========================================================================== */
.ks-treatments {
	background: var(--ks-white);
}

.wp-block-columns.ks-cards {
	flex-wrap: nowrap !important;
	gap: 1rem;
	margin-inline: -1.25rem;
	max-width: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: .5rem 1.25rem 1.5rem;
	scroll-padding-inline: 1.25rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.wp-block-columns.ks-cards > .wp-block-column {
	flex: 0 0 82%;
	scroll-snap-align: start;
}

.ks-card {
	background: var(--ks-cream);
	border-radius: var(--ks-radius);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.75rem;
	transition: box-shadow .25s ease, transform .25s ease;
}

.ks-card > * {
	margin: 0;
}

.ks-card:hover {
	box-shadow: var(--ks-shadow-lg);
	transform: translateY(-3px);
}

.ks-card__actions {
	margin-top: auto !important;
}

.ks-card .wp-block-button__link {
	font-size: .9375rem;
	min-height: 48px;
	padding: .75rem 1.25rem;
}

/* 9. Beneficios
   ========================================================================== */
.ks-benefits__grid.wp-block-columns {
	gap: 1rem;
}

.ks-benefit {
	background: var(--ks-white);
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
}

.ks-benefit > * {
	margin: 0;
}

.ks-benefits__strip {
	color: var(--ks-ink-soft);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	margin-top: 2.5rem !important;
	text-align: center;
}

.ks-benefits__strip span {
	color: var(--ks-coral);
	padding-inline: .35em;
}

/* 10. Packs, categorías y productos (WooCommerce)
   ========================================================================== */
.ks-packs {
	background: linear-gradient(180deg, var(--ks-cream) 0%, rgba(186, 222, 218, .35) 100%);
}

.ks-cats {
	margin-block-end: 2rem;
}

.ks-cats .wc-block-product-categories-list {
	display: flex;
	gap: .5rem;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: .25rem .1rem .75rem;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.ks-cats .wc-block-product-categories-list-item {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
}

.ks-cats .wc-block-product-categories-list-item a {
	align-items: center;
	background: var(--ks-white);
	border: 1px solid rgba(30, 43, 42, .12);
	border-radius: 999px;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	min-height: 44px;
	padding: .5rem 1.1rem;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
	white-space: nowrap;
}

.ks-cats .wc-block-product-categories-list-item a:hover {
	background: var(--ks-mint);
	border-color: var(--ks-mint);
	color: var(--ks-ink);
}

.ks-cats .wc-block-product-categories-list--depth-1 {
	display: none;
}

.ks-products .wc-block-product {
	background: var(--ks-white);
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow);
	display: flex;
	flex-direction: column;
	gap: .75rem;
	overflow: hidden;
	padding: 0 0 1.25rem;
	text-align: left;
}

.ks-products .wc-block-product > * {
	margin: 0;
	padding-inline: 1.25rem;
}

.ks-products .wc-block-components-product-image {
	padding-inline: 0;
	position: relative;
}

.ks-products .wc-block-components-product-image a {
	display: block;
	overflow: hidden;
}

.ks-products .wc-block-components-product-image img {
	transition: transform .4s ease;
}

.ks-products .wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.04);
}

.ks-products .ks-badges-overlay {
	top: .75rem;
}

.ks-products .wc-block-components-product-image img {
	aspect-ratio: 1;
	object-fit: cover;
}

.ks-products .wp-block-post-title {
	font-size: 1.125rem;
}

.ks-products .wp-block-post-title a {
	text-decoration: none;
}

.ks-products .wc-block-components-product-price {
	font-weight: 700;
}

.ks-products .wp-block-button__link,
.ks-products .wc-block-components-product-button__button {
	background: var(--ks-ink);
	border-radius: 999px;
	color: var(--ks-cream);
	min-height: 48px;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.ks-products .wp-block-button__link:hover,
.ks-products .wc-block-components-product-button__button:hover {
	background: var(--ks-mint);
	color: var(--ks-ink);
	transform: translateY(-2px);
}

.ks-packs__more {
	justify-content: center;
	margin-top: 2.5rem;
}

/* Página Servicios y archivo de categoría */
.ks-services-page .ks-section__head .ks-title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.ks-cats--sticky {
	background: rgba(252, 249, 234, .92);
	backdrop-filter: blur(10px);
	padding-block-start: .5rem;
	position: sticky;
	top: 72px;
	z-index: 20;
}

.ks-products--catalog {
	margin-block-start: 1rem;
}

.ks-products--catalog .wp-block-query-pagination {
	gap: .5rem;
	margin-top: 2.5rem;
}

/* Servicios — layout de tienda con barra lateral de filtros (sin sticky) */
.ks-shop-layout {
	gap: 2rem;
	margin-block-start: 1.5rem;
	align-items: flex-start;
}
.ks-shop-sidebar {
	min-width: 220px;
}
.ks-filter-card {
	background: var(--ks-white);
	border: 1px solid rgba(30, 43, 42, .08);
	border-radius: 18px;
	box-shadow: var(--ks-shadow);
	padding: 1.25rem 1.3rem;
	margin-bottom: 1.25rem;
}
.ks-filter__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 1rem;
	color: var(--ks-ink);
}
.ks-shop-toolbar {
	gap: 1rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid rgba(30, 43, 42, .08);
	padding-bottom: 1rem;
}
.ks-shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--ks-ink);
}
.ks-shop-toolbar .woocommerce-ordering select,
.ks-shop-toolbar select {
	border: 1px solid rgba(30, 43, 42, .15);
	border-radius: 999px;
	padding: .5rem 1rem;
	background: var(--ks-white);
}

/* Filtro por precio: inputs y botón con el look del tema */
.ks-filter-card .wc-block-price-filter__amount,
.ks-filter-card .wc-block-components-price-slider__amount {
	border: 1px solid rgba(30, 43, 42, .15);
	border-radius: 10px;
}
.ks-filter-card .wc-block-components-filter-submit-button,
.ks-filter-card button[type="submit"] {
	background: var(--ks-coral);
	color: var(--ks-ink);
	border-radius: 999px;
	border: 0;
	font-weight: 600;
	padding: .5rem 1.2rem;
}
.ks-filter-card .wc-block-price-filter__range-input-progress,
.ks-filter-card .wc-block-components-price-slider__range-input-progress {
	--range-color: var(--ks-coral);
}

/* Filtros activos (chips) */
.ks-filter-card .wc-block-components-chip {
	background: var(--ks-blush);
	border-radius: 999px;
	color: var(--ks-ink);
}

/* Lista de categorías en la barra lateral */
.ks-shop-sidebar .wc-block-product-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ks-shop-sidebar .wc-block-product-categories-list-item {
	margin: 0;
}
.ks-shop-sidebar .wc-block-product-categories-list-item a {
	border-bottom: 1px solid rgba(30, 43, 42, .06);
	color: var(--ks-ink);
	display: block;
	padding: .45rem 0;
	text-decoration: none;
}
.ks-shop-sidebar .wc-block-product-categories-list-item a:hover {
	color: var(--ks-coral);
}

/* Mobile: barra lateral arriba, a ancho completo */
@media (max-width: 781px) {
	.ks-shop-layout {
		gap: 1.25rem;
	}
	.ks-shop-sidebar,
	.ks-shop-main {
		flex-basis: 100% !important;
	}
}

/* Páginas interiores (Tecnología, Contacto, Carrito) */
.ks-page-head {
	background:
		radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255, 189, 190, .55) 0%, rgba(252, 249, 234, 0) 70%),
		var(--ks-cream);
	margin-block-start: 0;
	padding: clamp(3rem, 7vw, 6rem) 1.25rem clamp(1rem, 3vw, 2rem);
}

.ks-page-head .ks-section__head {
	margin-block-end: 0;
	margin-inline: auto;
}

.ks-page-head .ks-title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.ks-page-content:empty {
	display: none;
}

.ks-contact__grid.wp-block-columns {
	gap: 1rem;
}

.ks-contact .ks-process__actions {
	flex-wrap: wrap;
	gap: .75rem;
}

.ks-cart .ks-title {
	margin-block-end: 2rem;
}

.ks-map {
	background: var(--ks-aqua);
	border: 6px solid var(--ks-white);
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow-lg);
	margin-block-start: 2.5rem;
	overflow: hidden;
}

.ks-map iframe {
	border: 0;
	display: block;
	height: clamp(320px, 45vw, 460px);
	width: 100%;
}

/* Tecnología: bloques de equipo */
.ks-page-head__actions {
	justify-content: center;
	margin-top: 1.75rem !important;
}

.ks-tech:nth-of-type(odd) {
	background: var(--ks-white);
}

.ks-tech__grid.wp-block-columns {
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.ks-tech__img {
	margin: 0;
}

.ks-tech__img img {
	aspect-ratio: 5 / 4;
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow-lg);
	object-fit: cover;
	width: 100%;
}

.ks-tech__copy > * {
	margin-block: 0;
}

.ks-tech__copy .ks-lead {
	color: var(--ks-ink);
	font-weight: 500;
}

.ks-tech__body {
	color: var(--ks-ink-soft);
	margin-top: 1rem !important;
}

.ks-checklist {
	display: grid;
	gap: .75rem;
	list-style: none;
	margin-top: 1.5rem !important;
	padding: 0;
}

.ks-checklist li {
	align-items: flex-start;
	display: flex;
	gap: .75rem;
	font-weight: 500;
}

.ks-checklist li::before {
	align-items: center;
	background: var(--ks-mint);
	border-radius: 50%;
	content: "✓";
	display: inline-flex;
	flex: 0 0 26px;
	font-size: .875rem;
	font-weight: 700;
	height: 26px;
	justify-content: center;
	margin-top: .1rem;
}

.ks-tech__actions {
	margin-top: 2rem !important;
}

@media (min-width: 782px) {
	.ks-tech--reverse .ks-tech__media {
		order: 2;
	}
}

/* Equipos certificados */
.ks-certs {
	background: var(--ks-white);
}

.ks-certs__grid.wp-block-columns {
	gap: 1rem;
}

.ks-cert {
	align-items: center;
	background: var(--ks-blush);
	border: 2px solid var(--ks-coral);
	border-radius: var(--ks-radius);
	display: flex;
	flex-direction: column;
	gap: .875rem;
	padding: 2rem 1.75rem;
	text-align: center;
	transition: box-shadow .25s ease, transform .25s ease;
}

.ks-cert > * {
	margin: 0;
}

.ks-cert:hover {
	box-shadow: var(--ks-shadow-lg);
	transform: translateY(-3px);
}

.ks-cert__logo img {
	height: 64px;
	object-fit: contain;
	width: auto;
}

.ks-cert .ks-card__text {
	color: var(--ks-ink);
}

/* 11. El momento de cuidar tu piel (2 columnas)
   ========================================================================== */
.ks-split__grid.wp-block-columns {
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.ks-split__img {
	margin: 0;
}

.ks-split__img img {
	aspect-ratio: 5 / 6;
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow-lg);
	object-fit: cover;
	width: 100%;
}

.ks-split__copy > * {
	margin-block: 0;
}

.ks-split__actions {
	margin-top: 2rem !important;
}

/* 12. Proceso
   ========================================================================== */
.ks-process {
	background: var(--ks-white);
}

.ks-steps.wp-block-columns {
	counter-reset: ks-step;
	gap: 1rem;
}

.ks-step {
	border: 1px solid rgba(30, 43, 42, .1);
	border-radius: var(--ks-radius);
	counter-increment: ks-step;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.75rem;
}

.ks-step > * {
	margin: 0;
}

.ks-step::before {
	align-items: center;
	background: var(--ks-blush);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--ks-coral);
	content: counter(ks-step);
	display: flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.ks-process__actions {
	justify-content: center;
	margin-top: 2.5rem;
}

/* 13. Fundadora / Nuestra tecnología (tarjeta menta con foto a sangre)
   ========================================================================== */
.ks-founder {
	background: linear-gradient(135deg, var(--ks-aqua) 0%, var(--ks-mint) 100%);
}

.ks-founder__card.wp-block-columns {
	background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .08) 100%);
	border-radius: 28px;
	box-shadow: 0 30px 60px -30px rgba(30, 43, 42, .35);
	gap: 0;
	overflow: hidden;
}

.ks-founder__copy.wp-block-column {
	align-self: center;
	padding: clamp(2rem, 5vw, 3rem);
}

.ks-founder__copy > * {
	margin-block: 0;
}

.ks-founder__eyebrow {
	color: #0c5a47;
	font-family: var(--wp--preset--font-family--heading);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ks-founder__title {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin-block: 1.25rem 1.5rem !important;
}

.ks-founder__quote.wp-block-quote {
	border: 0;
	margin: 0;
	padding: 0;
}

.ks-founder__quote p {
	color: #2f4744;
	font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
	line-height: 1.7;
}

.ks-founder__quote cite {
	color: var(--ks-ink);
	display: block;
	font-size: 1rem;
	font-style: normal;
	margin-top: 1.5rem;
}

.ks-founder__media.wp-block-column {
	align-self: stretch;
	min-height: 360px;
	position: relative;
}

.ks-founder__img {
	inset: 0;
	margin: 0;
	position: absolute;
}

.ks-founder__img img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

/* Mobile/tablet: foto arriba, cuadrada, encuadre de cabeza a brazos */
@media (max-width: 781px) {
	.ks-founder__media.wp-block-column {
		aspect-ratio: 1;
		min-height: 0;
		order: -1;
	}

	.ks-founder__img img {
		object-position: center 18%;
	}
}

@media (min-width: 782px) {
	.ks-founder__copy.wp-block-column {
		flex-basis: 56%;
	}
}

/* 14. Galería
   ========================================================================== */
.ks-gallery-section {
	background: var(--ks-white);
}

.wp-block-gallery.ks-gallery.has-nested-images {
	gap: .75rem;
}

.wp-block-gallery.ks-gallery.has-nested-images figure.wp-block-image {
	width: calc(50% - .375rem) !important;
}

.ks-gallery .wp-block-image img {
	aspect-ratio: 1;
	border-radius: var(--ks-radius-sm);
	object-fit: cover;
}

.ks-gallery__actions {
	justify-content: center;
	margin-top: 2rem;
}

/* 15. Testimonios
   ========================================================================== */
.ks-reviews {
	background: linear-gradient(180deg, var(--ks-white) 0%, var(--ks-cream) 100%);
}

/* 16. Preguntas frecuentes (acordeón nativo <details>)
   ========================================================================== */
.ks-faq > .ks-faq__group {
	margin-block-start: 2.5rem;
	max-width: 820px;
}

.ks-faq__group-title {
	color: var(--ks-ink);
	font-size: .9375rem;
	letter-spacing: .12em;
	margin-block-end: .75rem;
	text-transform: uppercase;
}

.ks-faq__item.wp-block-details {
	background: var(--ks-white);
	border-radius: var(--ks-radius-sm);
	box-shadow: var(--ks-shadow);
	margin-block: .625rem 0;
	padding: 0;
}

.ks-faq__item summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 600;
	list-style: none;
	min-height: 56px;
	padding: 1.1rem 3.5rem 1.1rem 1.25rem;
	position: relative;
}

.ks-faq__item summary::-webkit-details-marker {
	display: none;
}

.ks-faq__item summary::after {
	align-items: center;
	background: var(--ks-cream);
	border-radius: 50%;
	content: "+";
	display: flex;
	font-size: 1.25rem;
	font-weight: 500;
	height: 32px;
	justify-content: center;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	transition: transform .2s ease, background-color .2s ease;
	width: 32px;
}

.ks-faq__item[open] summary::after {
	background: var(--ks-mint);
	transform: translateY(-50%) rotate(45deg);
}

.ks-faq__item > :not(summary) {
	color: var(--ks-ink-soft);
	margin: 0;
	padding: 0 1.25rem 1.25rem;
}

.ks-faq__item ul {
	padding-inline-start: 2.5rem;
}

/* 17. Llamado a la acción final
   ========================================================================== */
.ks-cta__card {
	position: relative;
	background: rgba(255, 255, 255, .62);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	border: 1.5px solid rgba(255, 255, 255, .72);
	border-radius: 32px;
	box-shadow:
		0 16px 48px rgba(30, 43, 42, .14),
		inset 0 1px 0 rgba(255, 255, 255, .65);
	padding: clamp(2.5rem, 7vw, 5rem) 1.5rem;
	text-align: center;
}

/* Fallback sin backdrop-filter: fondo mas solido para legibilidad. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ks-cta__card { background: rgba(255, 255, 255, .85); }
}

.ks-cta__card > * {
	margin-inline: auto;
	max-width: 640px;
}

.ks-cta__card .ks-title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block: 0;
}

.ks-cta__actions {
	justify-content: center;
	margin-top: 2rem;
}

/* 18. Pie de página (rosados de marca)
   ========================================================================== */
.ks-footer {
	background: var(--ks-blush);
	border-top: 6px solid var(--ks-coral);
	color: var(--ks-ink);
	margin-block-start: 0;
	padding: 4rem 1.25rem 7rem;
}

.ks-footer a {
	color: var(--ks-ink);
	text-decoration-color: var(--ks-coral);
	text-decoration-thickness: 2px;
}

.ks-footer__inner {
	margin-inline: auto;
	max-width: var(--ks-max);
}

.ks-footer__top {
	border-bottom: 2px solid var(--ks-coral);
	gap: 1.5rem;
	padding-bottom: 2rem;
}

.ks-footer__top .wp-block-button__link {
	background: var(--ks-ink);
	color: var(--ks-cream);
}

.ks-footer__top .wp-block-button__link:hover {
	background: #2d3f3d;
	color: var(--ks-cream);
}

.ks-footer__grid.wp-block-columns {
	gap: 2rem;
	padding-top: 2rem;
}

.ks-footer__title {
	background: var(--ks-coral);
	border-radius: 999px;
	color: var(--ks-ink);
	display: inline-block;
	padding: .25rem .75rem;
	font-size: .875rem;
	letter-spacing: .12em;
	margin-block-end: .75rem;
	text-transform: uppercase;
}

.ks-footer p {
	margin-block: 0 .4rem;
}

.ks-footer .ks-logo img {
	max-height: 56px;
	width: auto !important;
}

.ks-hours {
	border-collapse: collapse;
	width: 100%;
}

.ks-hours td {
	border: 0;
	padding: .2rem 1rem .2rem 0;
}

.ks-hours td:last-child {
	font-weight: 600;
}

.ks-hours tr + tr td {
	border-top: 1px dashed var(--ks-coral);
}

.ks-social.wp-block-social-links {
	gap: .5rem;
	margin-top: 1rem;
}

.ks-social .wp-social-link {
	background: var(--ks-coral) !important;
	color: var(--ks-ink) !important;
}

.ks-social .wp-social-link a {
	padding: .6rem;
}

.ks-footer__legal {
	border-top: 2px solid var(--ks-coral);
	font-size: .875rem;
	margin-top: 2.5rem !important;
	padding-top: 1.25rem;
}

/* 19. CTA flotante "Evaluación gratuita" (bloque Iconos sociales → WhatsApp)
   ========================================================================== */
.wp-block-social-links.ks-floating-cta {
	bottom: max(1rem, env(safe-area-inset-bottom));
	left: 1rem;
	margin: 0;
	padding: 0;
	position: fixed;
	right: 1rem;
	z-index: 60;
}

.ks-floating-cta .wp-social-link {
	background: var(--ks-mint) !important;
	border-radius: 999px;
	box-shadow: 0 16px 32px -12px rgba(30, 43, 42, .45);
	color: var(--ks-ink) !important;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
	width: 100%;
}

.ks-floating-cta .wp-social-link:hover {
	background: var(--ks-aqua) !important;
	box-shadow: 0 20px 36px -12px rgba(30, 43, 42, .5);
	transform: translateY(-2px);
}

.ks-floating-cta .wp-block-social-link-anchor {
	align-items: center;
	display: flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 600;
	gap: .65rem;
	justify-content: center;
	min-height: 56px;
	padding: .6rem 1.5rem .6rem .7rem !important;
}

.ks-floating-cta .wp-block-social-link-anchor svg {
	background: var(--ks-cream);
	border-radius: 50%;
	box-sizing: content-box;
	height: 22px;
	padding: 6px;
	width: 22px;
}

.ks-floating-cta .wp-block-social-link-label {
	padding: 0 !important;
}

.editor-styles-wrapper .ks-floating-cta {
	position: static;
}

/* 19b. Ficha de producto
   ========================================================================== */
.ks-product {
	padding: 1.5rem 1.25rem var(--ks-section-y);
}

.ks-breadcrumbs {
	color: var(--ks-ink-soft);
	font-size: .9375rem;
	margin-block-end: 1.5rem;
}

.ks-breadcrumbs a {
	text-decoration: none;
}

.ks-breadcrumbs a:hover {
	text-decoration: underline;
}

.ks-product__grid.wp-block-columns {
	gap: clamp(1.5rem, 4vw, 4rem);
}

.ks-product__gallery .woocommerce-product-gallery__image img,
.ks-product__gallery .flex-viewport {
	border-radius: var(--ks-radius);
}

.ks-product__gallery .flex-control-thumbs {
	display: grid !important;
	gap: .5rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: .75rem !important;
}

.ks-product__gallery .flex-control-thumbs img {
	border: 2px solid transparent;
	border-radius: var(--ks-radius-sm);
	opacity: .7;
	transition: opacity .2s ease, border-color .2s ease;
}

.ks-product__gallery .flex-control-thumbs img.flex-active,
.ks-product__gallery .flex-control-thumbs img:hover {
	border-color: var(--ks-coral);
	opacity: 1;
}

/* El wrapper de insignias solo se agrega a productos CON badge (oferta,
   destacado, nuevo o agotado). Al ser una caja de bloque, rompia el
   estiramiento flex de la imagen, asi que esas tarjetas mostraban la imagen
   en su tamano natural en vez de llenar la tarjeta. display:contents disuelve
   la caja del wrapper: el bloque de imagen vuelve a ser hijo directo flex de
   la tarjeta y se estira igual que el resto. El overlay de insignias
   (absoluto) se ancla a la tarjeta .wc-block-product de abajo. */
/* T57: el overlay de badges se posiciona contra este wrapper; display:contents
   no genera caja, por eso los badges "volaban" fuera de la imagen. */
.ks-product-media {
	position: relative;
}

.wc-block-product {
	position: relative;
}

.ks-badges-overlay {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	left: .75rem;
	pointer-events: none;
	position: absolute;
	right: .75rem;
	top: .75rem;
	z-index: 5;
}

.ks-pbadge {
	border-radius: 999px;
	box-shadow: var(--ks-shadow);
	font-family: var(--wp--preset--font-family--heading);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: .3rem .75rem;
	text-transform: uppercase;
}

.ks-pbadge--sale { background: var(--ks-coral); color: var(--ks-ink) !important; }
.ks-pbadge--featured { background: var(--ks-mint); color: var(--ks-ink) !important; margin-left: auto; }
.ks-pbadge--new { background: var(--ks-aqua); color: var(--ks-ink); }
.ks-pbadge--out { background: var(--ks-ink); color: var(--ks-white); }

.ks-product .wc-block-components-product-sale-badge {
	display: none;
}

.ks-product__summary > * {
	margin-block: 0;
}

.ks-product__cats {
	font-family: var(--wp--preset--font-family--heading);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ks-product__cats a {
	text-decoration: none;
}

.ks-product__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block: .5rem .75rem !important;
}

.ks-product__rating .star-rating span::before,
.ks-products .star-rating span::before {
	color: #e0858a;
}

.ks-product__price {
	font-size: 1.75rem;
	font-weight: 700;
	margin-block: 1rem !important;
}

.ks-product__price del {
	color: var(--ks-ink-soft);
	font-size: 1.125rem;
	font-weight: 400;
}

.ks-product__price ins {
	text-decoration: none;
}

.ks-product__short {
	color: var(--ks-ink-soft);
	font-size: 1.0625rem;
}

.ks-product__stock {
	font-weight: 600;
	margin-top: .75rem !important;
}

.ks-buybox {
	background: var(--ks-white);
	border-radius: var(--ks-radius);
	box-shadow: var(--ks-shadow);
	margin-top: 1.5rem !important;
	padding: 1.25rem;
}

.ks-buybox form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.ks-buybox .quantity input {
	border: 1.5px solid rgba(30, 43, 42, .2);
	border-radius: 999px;
	min-height: 52px;
	text-align: center;
	width: 5rem;
}

.ks-buybox .single_add_to_cart_button {
	background: var(--ks-mint) !important;
	border-radius: 999px !important;
	color: var(--ks-ink) !important;
	flex: 1 1 200px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	min-height: 52px;
	transition: background-color .2s ease, transform .2s ease;
}

.ks-buybox .single_add_to_cart_button:hover {
	background: var(--ks-aqua) !important;
	transform: translateY(-2px);
}

.ks-buybox__checkout {
	gap: .75rem;
	margin-top: .75rem;
}

.ks-buybox__checkout .wp-block-button {
	flex: 1 1 160px;
}

.ks-buybox__checkout .wp-block-button__link {
	width: 100%;
}

.ks-buybox__help {
	color: var(--ks-ink-soft);
	font-size: .9375rem;
	margin: 1rem 0 0;
}

.ks-product__sku {
	color: var(--ks-ink-soft);
	font-size: .875rem;
	margin-top: 1rem !important;
}

.ks-product__details {
	margin-top: clamp(3rem, 6vw, 5rem);
}

.ks-product__details .wc-tabs {
	border-bottom: 1px solid rgba(30, 43, 42, .12);
	display: flex;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	overflow-x: auto;
	padding: 0;
}

.ks-product__details .wc-tabs li a {
	border-bottom: 3px solid transparent;
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	padding: .75rem 1rem;
	text-decoration: none;
	white-space: nowrap;
}

.ks-product__details .wc-tabs li.active a {
	border-color: var(--ks-coral);
}

.ks-product__details .commentlist {
	display: grid;
	gap: 1rem;
	list-style: none;
	padding: 0;
}

.ks-product__details .commentlist .comment_container {
	background: var(--ks-white);
	border-radius: var(--ks-radius-sm);
	box-shadow: var(--ks-shadow);
	padding: 1.25rem;
}

.ks-product__related {
	margin-top: clamp(3rem, 6vw, 5rem);
}

.ks-product__related .ks-cats {
	margin-top: 2rem;
}

/* 20. Ajustes generales WooCommerce
   ========================================================================== */
.woocommerce .wp-element-button,
.wc-block-components-button:not(.is-link) {
	border-radius: 999px;
	min-height: 48px;
}

.wc-block-components-product-sale-badge,
a:hover .wc-block-components-product-sale-badge {
	background: var(--ks-coral);
	border: 0;
	border-radius: 999px;
	color: var(--ks-ink) !important;
}

/* 21. Tablet (≥768px)
   ========================================================================== */
@media (min-width: 768px) {
	.ks-hero {
		padding-top: 3rem;
	}

	.ks-hero__img--mobile {
		display: none;
	}

	.ks-hero__img--tablet {
		display: block;
	}

	.ks-hero__actions .wp-block-button,
	.ks-hero__actions .wp-block-button__link {
		width: auto;
	}

	.ks-badge {
		padding: 1rem 1.4rem;
	}

	.ks-badge__small {
		font-size: .875rem;
	}

	.ks-badge__big {
		font-size: 1.75rem;
	}

	.wp-block-columns.ks-cards > .wp-block-column {
		flex-basis: 44%;
	}

	.wp-block-gallery.ks-gallery.has-nested-images figure.wp-block-image {
		width: calc(33.333% - .5rem) !important;
	}

	.ks-steps.wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-social-links.ks-floating-cta {
		bottom: 1.5rem;
		left: 1.5rem;
		right: auto;
	}

	.ks-floating-cta .wp-social-link {
		width: auto;
	}

	.ks-footer {
		padding-bottom: 4rem;
	}
}

/* 22. Desktop (≥1100px)
   ========================================================================== */
@media (min-width: 1100px) {

	.ks-hero {
		background:
			radial-gradient(ellipse 55% 85% at 74% 62%, var(--ks-hero-pink) 0%, rgba(239, 166, 196, .55) 42%, rgba(252, 249, 234, 0) 72%),
			linear-gradient(100deg, var(--ks-cream) 0%, #fbeef0 100%);
		padding: 2rem 2rem 0;
	}

	.ks-hero__grid.wp-block-columns {
		gap: 2rem;
	}

	.ks-hero__copy.wp-block-column {
		align-items: flex-start;
		flex: 0 0 44%;
		padding-block: 3rem 5rem;
		text-align: left;
	}

	.ks-cyber {
		align-items: flex-start;
	}

	.ks-badges {
		justify-content: flex-start;
	}

	.ks-hero__actions {
		justify-content: flex-start;
	}

	.ks-hero__img--tablet {
		display: none;
	}

	.ks-hero__img--desktop {
		display: block;
	}

	.wp-block-columns.ks-cards {
		margin-inline: auto;
		overflow: visible;
		padding-inline: 0;
	}

	.wp-block-columns.ks-cards > .wp-block-column {
		flex: 1 1 0;
	}

	.ks-steps.wp-block-columns {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ks-footer__grid > .wp-block-column:first-child {
		flex-grow: 1.6;
	}
}

/* 22b. Animaciones (CSS puro, sin JavaScript)
   ========================================================================== */
@keyframes ks-rise {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

@keyframes ks-pop {
	0% { opacity: 0; transform: scale(.85) rotate(-3deg); }
	70% { opacity: 1; transform: scale(1.04) rotate(0); }
	100% { transform: scale(1); }
}

@keyframes ks-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.ks-cyber > *,
.ks-badge {
	animation: ks-pop .7s cubic-bezier(.2, .7, .2, 1) backwards;
}

.ks-cyber > :nth-child(2) { animation-delay: .12s; }
.ks-cyber > :nth-child(3) { animation-delay: .24s; }
.ks-badge:nth-child(1) { animation-delay: .35s; }
.ks-badge:nth-child(2) { animation-delay: .45s; }
.ks-badge:nth-child(3) { animation-delay: .55s; }

.ks-hero__subtitle,
.ks-hero__actions {
	animation: ks-rise .8s .3s cubic-bezier(.2, .7, .2, 1) backwards;
}

.ks-hero__img img {
	animation: ks-float 6s ease-in-out infinite;
}

/* Aparición al hacer scroll (navegadores con scroll-driven animations) */
@supports (animation-timeline: view()) {
	.ks-section__head,
	.ks-card,
	.ks-benefit,
	.ks-step,
	.ks-split__media,
	.ks-founder__media,
	.ks-gallery .wp-block-image,
	.ks-faq__item,
	.ks-map,
	.ks-tech__media,
	.ks-checklist li,
	.ks-cert,
	.ks-cta__card,
	.ks-products .wc-block-product {
		animation: ks-rise linear both;
		animation-range: entry 0% entry 60%;
		animation-timeline: view();
	}
}

.editor-styles-wrapper * {
	animation: none !important;
}

/* 23. Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}


/* ==========================================================================
   24. Ajustes mobile y componentes nuevos
   ========================================================================== */

/* Tratamientos: sin scroll lateral; las tarjetas hacen wrap y bajan */
.wp-block-columns.ks-cards,
.wp-block-columns.ks-cards.is-not-stacked-on-mobile {
	flex-wrap: wrap !important;
	margin-inline: auto;
	overflow: visible;
	padding: .5rem 0 1.5rem;
	scroll-snap-type: none;
}

.wp-block-columns.ks-cards > .wp-block-column,
.wp-block-columns.ks-cards.is-not-stacked-on-mobile > .wp-block-column {
	flex: 1 1 250px !important;
	min-width: 0;
}

@media (max-width: 599px) {
	.ks-card {
		padding: 1.5rem;
	}
}

/* Hero: insignias legibles en pantallas pequeñas */
@media (max-width: 480px) {
	.ks-badges.is-layout-flex {
		gap: .375rem;
	}

	.ks-badge {
		padding: .6rem .3rem;
	}

	.ks-badge__big {
		font-size: clamp(.95rem, 5vw, 1.375rem);
	}

	.ks-badge__small {
		font-size: clamp(.625rem, 2.9vw, .8125rem);
	}

	.ks-badge:nth-child(3) .ks-badge__big {
		font-size: clamp(.75rem, 3.6vw, 1.125rem);
		letter-spacing: -.01em;
	}
}

/* "Finalizar compra": solo con productos en el carrito */
.ks-header__checkout,
.ks-nav-checkout {
	display: none !important;
}

.ks-has-cart .ks-header__checkout {
	display: none !important;
}

.ks-has-cart .ks-nav-checkout {
	display: flex !important;
}

/* "Agenda tu cita" en el menú: solo mobile/tablet; en desktop es botón de cabecera */
@media (min-width: 1024px) {
	.ks-nav .ks-nav-whatsapp {
		display: none !important;
	}
	/* Desktop: el CTA del header se muestra (gana a la regla de layout de WP) */
	.ks-header__cta {
		display: flex !important;
	}
	/* Un poco de aire a la izquierda del logo en desktop */
	.ks-logo {
		margin-left: clamp(1rem, 3vw, 2.5rem);
	}
}

/* Botones dentro del menú móvil: "Agenda tu cita" (menta) y "Finalizar compra" (coral), con apariencia de botón */
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .ks-nav-whatsapp,
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .ks-nav-checkout {
	border-bottom: 0 !important;
	margin-top: 1rem;
}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .ks-nav-whatsapp .wp-block-navigation-item__content,
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .ks-nav-checkout .wp-block-navigation-item__content {
	border-radius: 999px;
	color: var(--ks-ink);
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 700;
	padding: .85rem 2rem;
	text-decoration: none;
}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .ks-nav-whatsapp .wp-block-navigation-item__content {
	background: var(--ks-mint);
}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .ks-nav-checkout .wp-block-navigation-item__content {
	background: var(--ks-coral);
}

/* Menú abierto: lista a ancho completo, contenido a la izquierda y divisores parejos */
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	width: 100% !important;
}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left !important;
	width: 100% !important;
}

/* Reseñas: se usa el estilo nativo del plugin RepoOcean (sin overrides del tema). */

.ks-header__checkout .wp-block-button__link {
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ks-header__checkout .wp-block-button__link:hover,
.ks-header__checkout .wp-block-button__link:focus-visible {
	background: var(--ks-coral);
	border-color: var(--ks-coral);
	box-shadow: 0 10px 22px -12px rgba(30, 43, 42, .45);
	color: var(--ks-ink);
	transform: translateY(-2px);
}

.ks-nav-checkout .wp-block-navigation-item__content {
	color: var(--ks-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--ks-coral);
	text-decoration-thickness: 3px;
}

@media (min-width: 1024px) {
	/* En escritorio ya está el botón de la cabecera */
	.ks-has-cart .ks-nav-checkout {
		display: none !important;
	}
}

/* Mini carrito desplegable */
.ks-mc {
	position: relative;
}

.ks-mc__toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 12px;
	color: var(--ks-ink);
	cursor: pointer;
	display: flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: .5rem;
	position: relative;
	transition: background-color .2s ease;
}

.ks-mc__toggle:hover,
.ks-mc.is-open .ks-mc__toggle {
	background: var(--ks-blush);
}

.ks-mc__count {
	background: var(--ks-ink);
	border-radius: 999px;
	box-shadow: 0 0 0 2px var(--ks-cream);
	color: var(--ks-white);
	font-size: .6875rem;
	font-weight: 700;
	line-height: 18px;
	min-width: 18px;
	padding: 0 4px;
	position: absolute;
	right: 2px;
	text-align: center;
	top: 2px;
}

.ks-mc__count[hidden] {
	display: none;
}

.ks-mc__panel {
	background: var(--ks-white);
	border-radius: var(--ks-radius-sm);
	box-shadow: var(--ks-shadow-lg);
	padding: 1.25rem;
	position: absolute;
	right: 0;
	top: calc(100% + .5rem);
	width: min(340px, calc(100vw - 2rem));
	z-index: 80;
}

.ks-mc__panel[hidden] {
	display: none;
}

.ks-mc__panel > *,
.ks-mc__body > * {
	margin: 0;
}

.ks-mc__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: .75rem !important;
}

.ks-mc__list {
	display: grid;
	gap: .75rem;
	list-style: none;
	padding: 0;
}

.ks-mc__item {
	align-items: center;
	display: grid;
	gap: .75rem;
	grid-template-columns: 52px minmax(0, 1fr);
}

.ks-mc__thumb img {
	aspect-ratio: 1;
	border-radius: 10px;
	display: block;
	object-fit: cover;
	width: 52px;
}

.ks-mc__info {
	display: grid;
	gap: .15rem;
	min-width: 0;
}

.ks-mc__name {
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.ks-mc__meta {
	color: var(--ks-ink-soft);
	font-size: .875rem;
}

.ks-mc__more {
	color: var(--ks-ink-soft);
	font-size: .875rem;
	margin-top: .75rem !important;
}

.ks-mc__subtotal {
	border-top: 1px solid rgba(30, 43, 42, .1);
	display: flex;
	justify-content: space-between;
	margin-top: 1rem !important;
	padding-top: .75rem;
}

.ks-mc__empty {
	color: var(--ks-ink-soft);
}

.ks-mc__actions {
	display: grid;
	gap: .5rem;
	margin-top: 1rem !important;
}

.ks-mc__btn {
	align-items: center;
	background: var(--ks-coral);
	border: 2px solid var(--ks-coral);
	border-radius: 999px;
	color: var(--ks-ink);
	display: flex;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	justify-content: center;
	min-height: 46px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ks-mc__btn:hover {
	background: var(--ks-blush);
	color: var(--ks-ink);
	text-decoration: none;
}

.ks-mc__btn--ghost {
	background: transparent;
	border-color: var(--ks-ink);
}

.ks-mc__btn--ghost:hover {
	background: var(--ks-ink);
	border-color: var(--ks-ink);
	color: var(--ks-cream);
}

/* Packs: grilla de productos (filtros cargan en el mismo lugar) */
.ks-pgrid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	transition: opacity .2s ease;
}

.ks-pgrid[aria-busy="true"] {
	opacity: .45;
}

@media (min-width: 1100px) {
	.ks-pgrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ks-pcard {
	background: var(--ks-white);
	border-radius: var(--ks-radius-sm);
	box-shadow: var(--ks-shadow);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	overflow: hidden;
	padding-bottom: 1rem;
}

.ks-pcard--empty {
	color: var(--ks-ink-soft);
	grid-column: 1 / -1;
	padding: 2rem;
	text-align: center;
}

.ks-pcard__media {
	display: block;
	position: relative;
}

.ks-pcard__media img {
	aspect-ratio: 1;
	display: block;
	object-fit: cover;
	width: 100%;
}

.ks-pcard .ks-badges-overlay {
	left: .5rem;
	top: .5rem;
}

.ks-pcard__title {
	font-size: 1rem;
	line-height: 1.3;
	margin: .25rem .875rem 0;
}

.ks-pcard__title a {
	text-decoration: none;
}

.ks-pcard__price {
	font-weight: 700;
	margin: 0 .875rem;
}

.ks-pcard__price del {
	color: var(--ks-ink-soft);
	font-weight: 400;
}

.ks-pcard__btn {
	background: var(--ks-ink);
	border-radius: 999px;
	color: var(--ks-cream);
	font-size: .875rem;
	font-weight: 600;
	margin: auto .875rem 0;
	min-height: 44px;
	padding: .6rem .75rem;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.ks-pcard__btn:hover {
	background: var(--ks-coral);
	color: var(--ks-ink);
	text-decoration: none;
}

.ks-pcard .added_to_cart {
	font-size: .875rem;
	margin: 0 .875rem;
	text-align: center;
}

.ks-cats a[aria-current="true"] {
	background: var(--ks-ink);
	border-color: var(--ks-ink);
	color: var(--ks-cream);
}

/* Subcategorías (página de categoría) */
.ks-subcats ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.ks-subcats a {
	border: 1px solid rgba(30, 43, 42, .2);
	border-radius: 999px;
	display: inline-flex;
	font-size: .9375rem;
	min-height: 40px;
	align-items: center;
	padding: .4rem 1rem;
	text-decoration: none;
}

.ks-subcats a:hover {
	border-color: var(--ks-ink);
}

.ks-subcats a[aria-current="page"],
.ks-cats .wc-block-product-categories-list-item a[aria-current],
.ks-cats .wc-block-product-categories-list-item.is-current a {
	background: var(--ks-ink);
	border-color: var(--ks-ink);
	color: var(--ks-cream);
}

.ks-cats .wc-block-product-categories-list {
	flex-wrap: wrap;
	justify-content: center;
	overflow: visible;
}

.ks-cats .wc-block-product-categories-list-item a:hover {
	background: var(--ks-white);
	border-color: var(--ks-ink);
}

/* Carruseles (plugin Custom Woo Pro Carousel) con los estilos del tema */
:root {
	--cwc-color-title: var(--ks-ink);
	--cwc-title-font-size: clamp(1.5rem, 3vw, 2rem);
}

.ks-carousel .cwc-carousel {
	--cwc-color-text: var(--ks-ink);
	--cwc-color-border: transparent;
	--cwc-color-background: var(--ks-white);
	--cwc-color-accent: var(--ks-ink);
	--cwc-border-radius: var(--ks-radius-sm);
	--cwc-border-width: 0;
	--cwc-font-family: var(--wp--preset--font-family--body);
	--cwc-nav-color-bg: var(--ks-white);
	--cwc-nav-color-bg-hover: var(--ks-coral);
	--cwc-nav-color-arrow: var(--ks-ink);
	--cwc-cover-overlay-opacity: .35;
	padding-bottom: 4.5rem;
}

.ks-carousel {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.ks-carousel--cats {
	background: var(--ks-cream);
}

.ks-carousel--products {
	background: var(--ks-white);
}

.ks-carousel .cwc-carousel__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--cwc-title-font-size);
}

.ks-carousel .cwc-card,
.ks-carousel .cwc-category-card {
	box-shadow: var(--ks-shadow);
	display: flex;
	flex-direction: column;
	height: auto;
	transition: box-shadow .25s ease, transform .25s ease;
}

.ks-carousel .swiper {
	padding: .5rem .25rem 4.5rem;
}

.ks-carousel .cwc-card:hover,
.ks-carousel .cwc-category-card:hover {
	box-shadow: var(--ks-shadow-lg);
	transform: translateY(-3px);
}

.ks-carousel .cwc-card__image,
.ks-carousel .cwc-category-card__image {
	aspect-ratio: 1;
	object-fit: cover;
}

.ks-carousel .cwc-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	padding: .875rem .875rem 0;
}

.ks-carousel .cwc-card__category-line {
	color: var(--ks-ink-soft);
	font-size: .8125rem;
	padding: .25rem .875rem 0;
}

.ks-carousel .cwc-card__price {
	font-weight: 700;
	padding: .5rem .875rem .875rem;
}

.ks-carousel .cwc-card__price del {
	color: var(--ks-ink-soft);
	font-weight: 400;
}

.ks-carousel .cwc-card__buy {
	background: var(--ks-ink);
	border-radius: 999px;
	color: var(--ks-cream);
	font-weight: 600;
	margin: auto .875rem .875rem;
	min-height: 44px;
	padding: .65rem 1rem;
	text-align: center;
	transition: background-color .2s ease, color .2s ease;
}

.ks-carousel .cwc-card__buy:hover {
	background: var(--ks-coral);
	color: var(--ks-ink);
}

.ks-carousel .cwc-category-card .cwc-card__title {
	padding-bottom: .875rem;
	text-align: center;
}

.ks-carousel .cwc-category-card__cover-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 600;
}

.ks-carousel .swiper-button-prev,
.ks-carousel .swiper-button-next {
	border-radius: 999px;
	box-shadow: var(--ks-shadow);
	height: 44px;
	width: 44px;
}

.ks-carousel .swiper-button-prev::after,
.ks-carousel .swiper-button-next::after {
	font-size: 1rem;
	font-weight: 700;
}

.ks-carousel .swiper-pagination-bullet {
	background: var(--ks-ink);
	opacity: .25;
}

.ks-carousel .swiper-pagination-bullet-active {
	background: var(--ks-coral);
	opacity: 1;
	width: 22px;
	border-radius: 999px;
}

/* Footer: crédito */
.ks-footer__credit {
	color: var(--ks-ink-soft);
	font-size: .8125rem;
	margin-top: .75rem !important;
}

.ks-footer__credit a {
	font-weight: 600;
	text-decoration: none;
}

.ks-footer__credit a:hover {
	text-decoration: underline;
}

.ks-heart {
	color: var(--ks-coral);
	display: inline-block;
	transform: translateY(1px);
}


/* ==========================================================================
   Kinesilk — Ajustes de continuación (T7, T12, T13, T16, T25)
   ========================================================================== */

/* T16 — el logo nunca pega al borde en pantallas grandes */
.ks-header__inner {
	padding-inline: clamp(1rem, 3vw, 2.25rem);
}

/* T25 — Hero: botón "Ver promociones" con más presencia */
.ks-hero__actions .wp-block-button.is-style-ks-primary .wp-block-button__link {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .01em;
	min-height: 60px;
	padding-inline: 2.25rem;
	box-shadow: 6px 6px 0 var(--ks-promo-yellow);
}

.ks-hero__actions .wp-block-button.is-style-ks-primary .wp-block-button__link:hover {
	box-shadow: 3px 3px 0 var(--ks-promo-yellow);
	transform: translateY(-1px);
}

/* T7 / T12 / T13 — centrar verticalmente el texto de los botones de compra */
.ks-buybox .single_add_to_cart_button,
.ks-products .wp-block-button__link,
.ks-products .wc-block-components-product-button__button,
.ks-carousel .cwc-card__buy,
.woocommerce a.button.add_to_cart_button,
.woocommerce .wp-element-button,
.wc-block-components-button:not(.is-link) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1.15;
	text-align: center;
}

/* ==========================================================================
   Kinesilk — Selector de cantidad +/- (T19, T27)
   ========================================================================== */
.ks-qty {
	align-items: center;
	display: inline-flex;
	gap: .4rem;
}

.ks-qty input.qty,
.ks-qty input[type="number"] {
	font-size: 1.125rem;
	font-weight: 700;
	min-height: 48px;
	padding-inline: .25rem;
	text-align: center;
	width: 3.25rem;
}

/* oculta las flechas nativas del input numérico */
.ks-qty input[type="number"]::-webkit-inner-spin-button,
.ks-qty input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ks-qty input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.ks-qty__btn {
	align-items: center;
	background: var(--ks-cream);
	border: 1.5px solid rgba(30, 43, 42, .18);
	border-radius: 999px;
	color: var(--ks-ink);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 1.35rem;
	font-weight: 700;
	height: 44px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
	width: 44px;
}

.ks-qty__btn:hover {
	background: var(--ks-mint);
	border-color: var(--ks-mint);
	transform: translateY(-1px);
}

.ks-qty__btn:active {
	transform: translateY(0);
}

.ks-qty__btn:focus-visible {
	outline: 2px solid var(--ks-coral);
	outline-offset: 2px;
}

/* ==========================================================================
   Kinesilk — Horario del footer responsive (T30)
   ========================================================================== */
.ks-hours td:first-child {
	padding-right: .85rem;
	vertical-align: top;
	white-space: nowrap;
}

.ks-hours td:last-child {
	line-height: 1.4;
}

.ks-hours__range {
	white-space: nowrap;
}

.ks-hours__sep {
	color: var(--ks-coral);
}

/* ==========================================================================
   Kinesilk — Centrado global del texto de botones (T29)
   ========================================================================== */
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link),
.ks-pcard__btn,
.ks-mc__btn,
.ks-qty__btn,
.cwc-card__buy,
.ks-subcats a {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	line-height: 1.15;
	text-align: center;
}

/* ==========================================================================
   Kinesilk — Galería de producto: miniaturas más grandes (T14)
   ========================================================================== */
.ks-product__gallery .flex-control-thumbs {
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
	gap: .75rem !important;
}

.ks-product__gallery .flex-control-thumbs img {
	width: 100%;
}

/* T14 refuerzo: la miniatura llena su celda (vence a FlexSlider/WooCommerce) */
.ks-product__gallery .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.ks-product__gallery .flex-control-thumbs li img {
	aspect-ratio: 1;
	display: block;
	height: auto !important;
	object-fit: cover;
	width: 100% !important;
}

/* ==========================================================================
   Kinesilk — Un solo badge de oferta: oculta el nativo ¡Oferta! (T31)
   El tema ya muestra -XX% (.ks-pbadge--sale) sobre la imagen.
   ========================================================================== */
.woocommerce span.onsale,
.woocommerce .onsale,
.wc-block-components-product-sale-badge {
	display: none !important;
}

/* ==========================================================================
   Kinesilk — Servicios: orden, filtros activos y precio (T18, T22, T28)
   ========================================================================== */

/* T18 — el selector de orden usa la fuente del resto del sitio */
.ks-shop-toolbar .woocommerce-ordering select,
.ks-shop-toolbar select,
select.orderby {
	font-family: inherit;
	font-size: 1rem;
	color: var(--ks-ink);
}

/* T28 — precio: campos más grandes y apilados en dos líneas */
.ks-filter-card .wc-block-price-filter__controls,
.ks-filter-card .wc-block-components-price-slider__controls {
	align-items: stretch;
	flex-direction: column;
	gap: .6rem;
}

.ks-filter-card .wc-block-price-filter__amount,
.ks-filter-card .wc-block-components-price-slider__amount {
	font-size: 1.05rem;
	min-height: 46px;
	padding: .55rem .85rem;
	text-align: center;
	width: 100%;
}

/* el guion separador sobra cuando están apilados */
.ks-filter-card .wc-block-price-filter__range-text {
	display: none;
}

/* T22 — filtros activos: texto más chico y botones estilados */
.ks-filter-card .wc-block-active-filters__title {
	font-size: .85rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ks-filter-card .wc-block-active-filters__list,
.ks-filter-card .wc-block-active-filters {
	font-size: .85rem;
}

.ks-filter-card .wc-block-components-chip {
	background: var(--ks-blush);
	border: 0;
	border-radius: 999px;
	color: var(--ks-ink);
	font-size: .8rem;
	padding: .2rem .25rem .2rem .7rem;
}

.ks-filter-card .wc-block-components-chip__remove {
	align-items: center;
	background: rgba(30, 43, 42, .12);
	border-radius: 999px;
	display: inline-flex;
	height: 20px;
	justify-content: center;
	margin-left: .35rem;
	width: 20px;
}

.ks-filter-card .wc-block-components-chip__remove:hover {
	background: var(--ks-coral);
}

.ks-filter-card .wc-block-components-chip__remove-icon,
.ks-filter-card .wc-block-components-chip__remove svg {
	fill: var(--ks-ink);
	height: 12px;
	width: 12px;
}

.ks-filter-card .wc-block-active-filters__clear-all,
.ks-filter-card .wc-block-active-filters__clear,
.ks-filter-card button.wc-block-active-filters__clear-all {
	background: transparent;
	border: 1px solid rgba(30, 43, 42, .2);
	border-radius: 999px;
	color: var(--ks-ink);
	cursor: pointer;
	font-size: .8rem;
	font-weight: 600;
	margin-top: .75rem;
	padding: .35rem .9rem;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.ks-filter-card .wc-block-active-filters__clear-all:hover,
.ks-filter-card .wc-block-active-filters__clear:hover {
	background: var(--ks-coral);
	border-color: var(--ks-coral);
}

/* T28 refuerzo: campos de precio grandes de verdad (vence specificity de WC) */
.ks-filter-card .wc-block-price-filter__controls .wc-block-price-filter__amount,
.ks-filter-card input.wc-block-price-filter__amount,
.ks-filter-card .wc-block-components-price-slider__controls input {
	font-size: 1.2rem !important;
	font-weight: 600;
	min-height: 54px !important;
	width: 100% !important;
}

.ks-filter-card .wc-block-price-filter__controls,
.ks-filter-card .wc-block-components-price-slider__controls {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
}

/* T28 fix final: quitar max-width 60px de WC y que el input llene su control */
.ks-filter-card .wc-block-price-filter__control {
	display: block !important;
}

.ks-filter-card .wc-block-price-filter__amount,
.ks-filter-card input.wc-block-price-filter__amount {
	box-sizing: border-box;
	max-width: none !important;
	width: 100% !important;
}

/* ==========================================================================
   Kinesilk — Servicios: buscador/multi-cat + filtros mobile (T20, T32)
   ========================================================================== */
.ks-catsearch__input {
	border: 1px solid rgba(30, 43, 42, .15);
	border-radius: 999px;
	font-size: .95rem;
	margin-bottom: .85rem;
	padding: .55rem .95rem;
	width: 100%;
}

.ks-shop-sidebar .wc-block-product-categories-list-item.is-selected > a {
	background: var(--ks-coral);
	border-radius: 999px;
	color: var(--ks-ink);
	font-weight: 600;
	padding-inline: .7rem;
}

.ks-shop-sidebar .wc-block-product-categories-list-item > a::before {
	content: "";
	border: 1.5px solid rgba(30, 43, 42, .3);
	border-radius: 5px;
	display: inline-block;
	height: 15px;
	margin-right: .5rem;
	vertical-align: -3px;
	width: 15px;
}

.ks-shop-sidebar .wc-block-product-categories-list-item.is-selected > a::before {
	background: var(--ks-ink);
	border-color: var(--ks-ink);
}

/* botón de filtros (solo mobile) */
.ks-filter-toggle {
	display: none;
}

.ks-filter-toggle__icon {
	background:
		linear-gradient(var(--ks-ink), var(--ks-ink)) left top/18px 2px no-repeat,
		linear-gradient(var(--ks-ink), var(--ks-ink)) left center/13px 2px no-repeat,
		linear-gradient(var(--ks-ink), var(--ks-ink)) left bottom/8px 2px no-repeat;
	height: 14px;
	width: 18px;
}

@media (max-width: 781px) {
	.ks-filter-toggle {
		align-items: center;
		background: var(--ks-white);
		border: 1px solid rgba(30, 43, 42, .15);
		border-radius: 999px;
		cursor: pointer;
		display: inline-flex;
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 600;
		gap: .5rem;
		justify-content: center;
		margin: 1rem 0 .5rem;
		padding: .7rem 1.1rem;
		width: 100%;
	}

	.ks-shop-sidebar {
		display: none;
	}

	.ks-shop-sidebar.is-open {
		display: block;
		margin-bottom: 1.25rem;
	}

	/* categorías compactas: chips que no comen pantalla */
	.ks-shop-sidebar .wc-block-product-categories-list {
		display: flex;
		flex-wrap: wrap;
		gap: .45rem;
	}

	.ks-shop-sidebar .wc-block-product-categories-list-item a {
		border: 1px solid rgba(30, 43, 42, .15);
		border-bottom: 1px solid rgba(30, 43, 42, .15);
		border-radius: 999px;
		padding: .35rem .8rem;
	}

	.ks-shop-sidebar .wc-block-product-categories-list-item > a::before {
		display: none;
	}
}

/* ==========================================================================
   Kinesilk — Botones de tarjeta de producto a ancho completo (T33)
   (el centrado global los había dejado al ancho del texto)
   ========================================================================== */
.ks-products .wc-block-product .wp-block-button,
.ks-products .wc-block-product .wc-block-components-product-button,
.ks-pcard .wp-block-button {
	display: block;
	width: 100%;
}

.ks-products .wp-block-button__link,
.ks-products .wc-block-components-product-button__button,
.ks-products .wc-block-components-product-button .wp-element-button,
.ks-products a.button,
.ks-pcard .ks-pcard__btn,
.ks-pcard .wp-block-button__link {
	width: 100% !important;
}

/* ==========================================================================
   Kinesilk — Borde del panel de filtros mobile (T34)
   ========================================================================== */
@media (max-width: 781px) {
	.ks-shop-sidebar.is-open {
		background: rgba(255, 255, 255, .45);
		border: 1px solid rgba(30, 43, 42, .18);
		border-radius: 18px;
		box-shadow: 0 12px 30px -24px rgba(30, 43, 42, .5);
		padding: 1rem;
	}
}

/* ==========================================================================
   Kinesilk — Fondo con formas suaves muy difuminadas (T35)
   ========================================================================== */
.wp-site-blocks {
	position: relative;
}

.wp-site-blocks::before {
	background:
		radial-gradient(38vw 38vw at 84% 8%, rgba(239, 166, 196, .16), transparent 62%),
		radial-gradient(44vw 44vw at 8% 42%, rgba(186, 222, 218, .18), transparent 64%),
		radial-gradient(40vw 40vw at 92% 70%, rgba(254, 164, 164, .12), transparent 62%),
		radial-gradient(34vw 34vw at 24% 96%, rgba(255, 194, 46, .10), transparent 60%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-site-blocks::before {
		animation: ksDrift 32s ease-in-out infinite alternate;
	}

	@keyframes ksDrift {
		from { transform: translate3d(0, 0, 0) scale(1); }
		to   { transform: translate3d(0, -2.5%, 0) scale(1.06); }
	}
}

/* ==========================================================================
   Kinesilk — Botones de producto compactos en mobile (T36)
   ========================================================================== */
@media (max-width: 781px) {
	.ks-products .wp-block-button__link,
	.ks-products .wc-block-components-product-button__button,
	.ks-products .wc-block-components-product-button .wp-element-button,
	.ks-products a.button {
		font-size: .8rem;
		letter-spacing: 0;
		min-height: 42px;
		padding-inline: .55rem !important;
	}
}

/* ==========================================================================
   Kinesilk — Efecto glass en el panel de filtros mobile (T37)
   ========================================================================== */
@media (max-width: 781px) {
	.ks-shop-sidebar.is-open {
		-webkit-backdrop-filter: blur(16px) saturate(150%);
		backdrop-filter: blur(16px) saturate(150%);
		background: rgba(255, 255, 255, .28);
		border: 1.5px solid rgba(255, 255, 255, .72);
		border-radius: 20px;
		box-shadow: 0 18px 48px -26px rgba(30, 43, 42, .55);
	}

	.ks-shop-sidebar.is-open .ks-filter-card {
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		background: rgba(255, 255, 255, .42);
		border: 1px solid rgba(255, 255, 255, .5);
		box-shadow: none;
	}

	.ks-shop-sidebar.is-open .ks-catsearch__input {
		background: rgba(255, 255, 255, .7);
	}
}

/* T33/T36 fix: el wrapper del botón en border-box para que no desborde el card */
.ks-products .wc-block-product .wp-block-button,
.ks-products .wc-block-product .wc-block-components-product-button,
.ks-products .wc-block-product > * {
	box-sizing: border-box;
}

/* T36 extra: menos padding lateral del contenido del card en mobile */
@media (max-width: 781px) {
	.ks-products .wc-block-product > * {
		padding-inline: .8rem;
	}

	.ks-products .wp-block-button__link,
	.ks-products .wc-block-components-product-button__button,
	.ks-products .wc-block-components-product-button .wp-element-button,
	.ks-products a.button {
		padding-inline: .4rem !important;
	}
}

/* T39: fuente del CTA flotante más grande */
.ks-floating-cta .wp-block-social-link-label {
	font-size: 1.25rem;
}

/* ==========================================================================
   Kinesilk — Animación al agregar al carrito (T13)
   ========================================================================== */
@keyframes ksBump {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.28); }
	60%  { transform: scale(.9); }
	100% { transform: scale(1); }
}

.ks-mc--bump {
	animation: ksBump .5s ease;
}

.ks-added {
	background: var(--ks-mint) !important;
	color: var(--ks-ink) !important;
	transition: background-color .2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ks-mc--bump { animation: none; }
}

/* ==========================================================================
   Kinesilk — Categorías en página de categoría: simplificadas (T21)
   ========================================================================== */
.ks-cat-hidden {
	display: none !important;
}

.ks-cats .ks-catsearch__input--cats {
	margin-bottom: .75rem;
	max-width: 340px;
}

/* pills más compactas para que no abrumen ni empujen los productos */
.ks-cats .wc-block-product-categories-list-item a {
	font-size: .9rem;
	min-height: 38px;
	padding: .35rem .85rem;
}

.ks-cats-toggle {
	background: transparent;
	border: 1px solid rgba(30, 43, 42, .2);
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: .85rem;
	font-weight: 600;
	margin-top: .85rem;
	padding: .4rem 1rem;
	transition: background-color .15s ease, border-color .15s ease;
}

.ks-cats-toggle:hover {
	background: var(--ks-coral);
	border-color: var(--ks-coral);
}

/* ==========================================================================
   Kinesilk — Etiquetas y jerarquía: categoría vs subcategoría (T40)
   ========================================================================== */
.ks-group-label {
	color: var(--ks-ink-soft, #5b6b69);
	font-family: var(--wp--preset--font-family--heading);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	margin: 0 0 .6rem;
	text-transform: uppercase;
}

/* Subcategorías: pills rellenas (acento), jerarquía primaria */
.ks-subcats ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.ks-subcats a {
	background: var(--ks-blush);
	border: 1px solid var(--ks-blush);
	border-radius: 999px;
	color: var(--ks-ink);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	padding: .45rem 1rem;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.ks-subcats a:hover,
.ks-subcats a[aria-current] {
	background: var(--ks-coral);
	border-color: var(--ks-coral);
}

/* Todas las categorías: pills de contorno (secundarias) */
.ks-cats .wc-block-product-categories-list-item a {
	background: var(--ks-white);
}

/* ==========================================================================
   Kinesilk — Barra de categorías NO sticky (no tapa productos) (T43)
   ========================================================================== */
.ks-cats--sticky {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: transparent;
	margin-bottom: 1.75rem;
	position: static;
	top: auto;
}

/* T44: margen abajo del botón "Ver todas las categorías" */
.ks-cats-toggle {
	margin-bottom: 1.75rem;
}

/* ==========================================================================
   Kinesilk — Selector +/- en la tarjeta cuando ya está en el carrito (T17)
   ========================================================================== */
.ks-cardqty {
	align-items: center;
	display: inline-flex;
	gap: .5rem;
	justify-content: center;
	width: 100%;
}

.ks-cardqty__btn {
	align-items: center;
	background: var(--ks-ink);
	border: 0;
	border-radius: 999px;
	color: var(--ks-cream);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 1.2rem;
	font-weight: 700;
	height: 42px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color .15s ease, transform .15s ease;
	width: 42px;
}

.ks-cardqty__btn:hover {
	background: var(--ks-mint);
	color: var(--ks-ink);
	transform: translateY(-1px);
}

.ks-cardqty__btn:active {
	transform: translateY(0);
}

.ks-cardqty__n {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 700;
	min-width: 2ch;
	text-align: center;
}

@media (max-width: 781px) {
	.ks-cardqty__btn {
		height: 38px;
		width: 38px;
	}
}

/* T17: ocultar el botón del bloque cuando el producto ya está en el carrito */
.ks-incart .wc-block-components-product-button,
.ks-incart > .ks-pcard__btn.add_to_cart_button {
	display: none !important;
}

/* T45: centrar el botón "Escríbenos por WhatsApp" del head de Servicios */
.ks-head__cta {
	display: flex;
	justify-content: center;
	margin-top: 1.1rem;
}

/* ==========================================================================
   Kinesilk — Menú mobile: "Agenda tu cita" y "Finalizar compra" a ancho
   completo respetando el gutter del menú (T46)
   ========================================================================== */
@media (max-width: 1023px) {
	.ks-nav .wp-block-navigation__responsive-container.is-menu-open .ks-nav-whatsapp .wp-block-navigation-item__content,
	.ks-nav .wp-block-navigation__responsive-container.is-menu-open .ks-nav-checkout .wp-block-navigation-item__content {
		box-sizing: border-box;
		display: block;
		text-align: center;
		width: 100%;
	}
}

/* T47: ocultar el CTA flotante mientras el menú overlay está abierto
   (no debe tapar "Finalizar compra") */
html.has-modal-open .ks-floating-cta {
	display: none !important;
}

/* ==========================================================================
   Kinesilk — Página de checkout clásico (T48, T49)
   ========================================================================== */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
}

/* Campos: legibles y con el look del tema */
.woocommerce-checkout .input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	background: var(--ks-white);
	border: 1.5px solid rgba(30, 43, 42, .18);
	border-radius: 12px;
	box-sizing: border-box;
	font-size: 1rem;
	min-height: 52px;
	padding: .8rem 1rem;
	width: 100%;
}

.woocommerce-checkout textarea {
	min-height: 110px;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	border-color: var(--ks-coral);
	box-shadow: 0 0 0 3px rgba(254, 164, 164, .25);
	outline: none;
}

.woocommerce-checkout .form-row label,
.woocommerce-checkout label {
	color: var(--ks-ink);
	font-size: .95rem;
	font-weight: 600;
	margin-bottom: .35rem;
}

/* Select2 (país/región) a la misma altura */
.woocommerce-checkout .select2-container--default .select2-selection--single {
	align-items: center;
	border: 1.5px solid rgba(30, 43, 42, .18);
	border-radius: 12px;
	display: flex;
	font-size: 1rem;
	height: 52px;
	padding: 0 .5rem;
}

/* Títulos de sección */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

/* Caja del resumen del pedido */
.woocommerce-checkout #order_review {
	background: var(--ks-white);
	border: 1px solid rgba(30, 43, 42, .08);
	border-radius: 18px;
	box-shadow: var(--ks-shadow);
	padding: 1.5rem;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	font-size: 1rem;
}

/* Botón de realizar pedido */
.woocommerce-checkout #place_order {
	background: var(--ks-mint) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: var(--ks-ink) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 700;
	min-height: 56px;
	padding: .85rem 2rem;
	transition: background-color .2s ease, transform .2s ease;
	width: 100%;
}

.woocommerce-checkout #place_order:hover {
	background: var(--ks-aqua) !important;
	transform: translateY(-2px);
}

/* Aviso de cupón */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--ks-cream);
	border-radius: 12px;
}

/* Layout 2 columnas en desktop */
@media (min-width: 992px) {
	.woocommerce-checkout .col2-set {
		align-items: start;
		display: grid;
		gap: 2.5rem;
		grid-template-columns: 1.3fr 1fr;
	}

	.woocommerce-checkout #order_review {
		position: sticky;
		top: 90px;
	}
}

/* T48/T49 extra: campo de cupón y cualquier input del checkout */
.checkout_coupon .input-text,
.woocommerce-page form.checkout_coupon input[type="text"],
body.woocommerce-checkout .input-text {
	background: var(--ks-white);
	border: 1.5px solid rgba(30, 43, 42, .18);
	border-radius: 12px;
	box-sizing: border-box;
	font-size: 1rem;
	min-height: 52px;
	padding: .8rem 1rem;
}

/* T49 fix: vence la especificidad de WooCommerce para el tamaño de fuente */
.woocommerce form .form-row input.input-text,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout #customer_details input.input-text {
	border-radius: 12px !important;
	font-size: 1rem !important;
}

/* ==========================================================================
   Kinesilk — Ajustes responsive (batch deploy): hero, badges, packs, tienda
   ========================================================================== */

/* Packs: boton contenido en la card (width:100% + margen lo desbordaba). */
.ks-pcard .ks-pcard__btn {
	width: auto !important;
}

/* Hero badges: nunca partir una palabra a la mitad. */
.ks-badge__big,
.ks-badge__small {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}

/* Hero titulo cyber: no partir "SEMANA" (hay un word-break:break-word heredado). */
.is-style-ks-cyber-pink,
.is-style-ks-cyber-yellow {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Cards de producto (bloques WooCommerce): imagen SIEMPRE a ancho completo de
   la card — tienda, categoria, relacionados ("Tambien te puede interesar"),
   upsells, etc. No afecta la imagen principal del producto (otra clase:
   wp-block-woocommerce-product-image-gallery). */
.wc-block-components-product-image {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 600px) {
	/* 3er badge del hero: un toque mas chico para que "DEPILACION" entre entero. */
	.ks-badge:nth-child(3) .ks-badge__big {
		font-size: clamp(.7rem, 3.2vw, 1.125rem);
	}
}

/* ==========================================================================
   Kinesilk — Blobs ambientales (fondo animado por seccion)
   Movimiento continuo, lentisimo y organico. Solo transform/opacity (GPU).
   Respeta prefers-reduced-motion. Colores de marca via --amb-1 / --amb-2 (RGB).
   ========================================================================== */
.ks-treatments { --amb-1: 135,233,206; --amb-2: 239,166,196; } /* mint / hero-pink */
.ks-process    { --amb-1: 254,164,164; --amb-2: 135,233,206; } /* coral / mint */
.ks-reviews    { --amb-1: 239,166,196; --amb-2: 255,194,46;  } /* hero-pink / amarillo */
.ks-cta        { --amb-1: 135,233,206; --amb-2: 254,164,164; } /* mint / coral */

.ks-treatments,
.ks-process,
.ks-reviews,
.ks-cta {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background:
		radial-gradient(ellipse 48% 48% at 71% 27%, rgba(135, 233, 206, .5) 0%, rgba(135, 233, 206, 0) 62%),
		radial-gradient(ellipse 50% 52% at 27% 80%, rgba(255, 189, 190, .6) 0%, rgba(255, 189, 190, 0) 62%);
}

.ks-treatments::before, .ks-process::before, .ks-reviews::before, .ks-cta::before,
.ks-treatments::after,  .ks-process::after,  .ks-reviews::after,  .ks-cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: clamp(280px, 48vw, 600px);
	aspect-ratio: 1;
	border-radius: 50%;
	will-change: transform;
}

.ks-treatments::before, .ks-process::before, .ks-reviews::before, .ks-cta::before {
	top: -8%;
	left: -10%;
	background: radial-gradient(circle at center, rgba(var(--amb-1), .5) 0%, rgba(var(--amb-1), 0) 68%);
}

.ks-treatments::after, .ks-process::after, .ks-reviews::after, .ks-cta::after {
	bottom: -10%;
	right: -8%;
	background: radial-gradient(circle at center, rgba(var(--amb-2), .45) 0%, rgba(var(--amb-2), 0) 68%);
}

/* Movimiento continuo y lentisimo (cada mancha con su ritmo => flota organica). */
@media (prefers-reduced-motion: no-preference) {
	.ks-treatments::before, .ks-process::before, .ks-reviews::before, .ks-cta::before {
		animation: ks-ambient-a 7s ease-in-out infinite;
	}
	.ks-treatments::after, .ks-process::after, .ks-reviews::after, .ks-cta::after {
		animation: ks-ambient-b 9s ease-in-out -4s infinite;
	}

	@keyframes ks-ambient-a {
		0%   { opacity: 0;  transform: translate3d(-12%, -8%, 0) scale(.8); }
		50%  { opacity: .7; transform: translate3d(10%, 7%, 0) scale(1.2); }
		100% { opacity: 0;  transform: translate3d(30%, 20%, 0) scale(1.4); }
	}
	@keyframes ks-ambient-b {
		0%   { opacity: 0;  transform: translate3d(12%, 10%, 0) scale(1.35); }
		50%  { opacity: .6; transform: translate3d(-8%, -5%, 0) scale(1.1); }
		100% { opacity: 0;  transform: translate3d(-28%, -22%, 0) scale(.8); }
	}
}

/* ==========================================================================
   Kinesilk — Glass en cards de proceso (estilo iOS "liquid glass")
   Fondo translucido + backdrop blur/saturate (frostea los blobs detras),
   borde claro y highlight superior. Fallback: fondo blanco casi solido.
   ========================================================================== */
.ks-step {
	background: rgba(255, 255, 255, .62);
	border: 1.5px solid rgba(255, 255, 255, .72);
	box-shadow:
		0 10px 30px rgba(30, 43, 42, .10),
		inset 0 1px 0 rgba(255, 255, 255, .65);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
}

/* Si el navegador no soporta backdrop-filter, fondo mas solido para legibilidad. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ks-step {
		background: rgba(255, 255, 255, .85);
	}
}

/* ==========================================================================
   Kinesilk — 3er blob ambiental por seccion (sobre .ks-title::before)
   ========================================================================== */
.ks-treatments { --amb-3: 254,164,164; } /* coral */
.ks-process    { --amb-3: 239,166,196; } /* hero-pink */
.ks-reviews    { --amb-3: 135,233,206; } /* mint */
.ks-cta        { --amb-3: 239,166,196; } /* hero-pink */

.ks-treatments .ks-title::before,
.ks-process .ks-title::before,
.ks-reviews .ks-title::before,
.ks-cta .ks-title::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	top: 8%;
	left: 55%;
	width: clamp(240px, 42vw, 520px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(var(--amb-3), .42) 0%, rgba(var(--amb-3), 0) 68%);
	will-change: transform, opacity;
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.ks-treatments .ks-title::before,
	.ks-process .ks-title::before,
	.ks-reviews .ks-title::before,
	.ks-cta .ks-title::before {
		animation: ks-ambient-c 8.5s ease-in-out -6s infinite;
	}
	@keyframes ks-ambient-c {
		0%   { opacity: 0;   transform: translate3d(0, -12%, 0) scale(.8); }
		50%  { opacity: .55; transform: translate3d(-7%, 9%, 0) scale(1.18); }
		100% { opacity: 0;   transform: translate3d(9%, 28%, 0) scale(1.45); }
	}
}

/* ==========================================================================
   Kinesilk — Blobs ambientales globales (todas las paginas menos la home,
   que ya tiene los suyos por seccion). Fixed = fondo ambiental calmo.
   ========================================================================== */
body:not(.home) { --amb-1: 135,233,206; --amb-2: 239,166,196; } /* mint / hero-pink */

body:not(.home)::before,
body:not(.home)::after {
	content: "";
	position: fixed;
	z-index: -1;
	pointer-events: none;
	width: clamp(320px, 52vw, 700px);
	aspect-ratio: 1;
	border-radius: 50%;
	will-change: transform, opacity;
}

body:not(.home)::before {
	top: -12%;
	left: -10%;
	background: radial-gradient(circle at center, rgba(var(--amb-1), .4) 0%, rgba(var(--amb-1), 0) 68%);
}

body:not(.home)::after {
	bottom: -14%;
	right: -10%;
	background: radial-gradient(circle at center, rgba(var(--amb-2), .4) 0%, rgba(var(--amb-2), 0) 68%);
}

@media (prefers-reduced-motion: no-preference) {
	body:not(.home)::before { animation: ks-ambient-a 10s ease-in-out infinite; }
	body:not(.home)::after  { animation: ks-ambient-b 13s ease-in-out -6s infinite; }
}

/* ==========================================================================
   Kinesilk — Glass en cajas de Cart/Checkout (resumen de pedido y totales)
   ========================================================================== */
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
	background: rgba(255, 255, 255, .62);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	border: 1.5px solid rgba(255, 255, 255, .72);
	border-radius: 18px;
	box-shadow:
		0 16px 48px rgba(30, 43, 42, .14),
		inset 0 1px 0 rgba(255, 255, 255, .65);
	padding: 1.5rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.woocommerce-cart .cart_totals,
	.woocommerce-checkout #order_review {
		background: rgba(255, 255, 255, .9);
	}
}

/* ==========================================================================
   Kinesilk — Blobs detras de Cart/Checkout (para que el glass "se sienta").
   Sin overflow:clip para no romper el position:sticky del #order_review.
   ========================================================================== */
.ks-cart {
	--amb-1: 135,233,206; /* mint */
	--amb-2: 239,166,196; /* hero-pink */
	position: relative;
	isolation: isolate;
}

.ks-cart::before,
.ks-cart::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: clamp(300px, 55vw, 620px);
	aspect-ratio: 1;
	border-radius: 50%;
	will-change: transform, opacity;
}

.ks-cart::before {
	top: 4%;
	right: 0;
	background: radial-gradient(circle at center, rgba(var(--amb-1), .55) 0%, rgba(var(--amb-1), 0) 66%);
}

.ks-cart::after {
	bottom: 6%;
	left: 0;
	background: radial-gradient(circle at center, rgba(var(--amb-2), .5) 0%, rgba(var(--amb-2), 0) 66%);
}

@media (prefers-reduced-motion: no-preference) {
	.ks-cart::before { animation: ks-ambient-a 8s ease-in-out infinite; }
	.ks-cart::after  { animation: ks-ambient-b 10s ease-in-out -4s infinite; }
}

/* ==========================================================================
   Kinesilk — Glass en items del carrito + fix de ancho (box-sizing) + link volver
   ========================================================================== */
/* Fix: el padding sumaba al ancho y la caja se salia a la derecha. */
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-cart tr.cart_item {
	box-sizing: border-box;
	max-width: 100%;
}

/* Glass en el WRAPPER completo de los productos del carrito (una sola card). */
.woocommerce-cart .woocommerce-cart-form {
	background: rgba(255, 255, 255, .62);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	border: 1.5px solid rgba(255, 255, 255, .72);
	border-radius: 18px;
	box-shadow:
		0 16px 48px rgba(30, 43, 42, .14),
		inset 0 1px 0 rgba(255, 255, 255, .65);
	box-sizing: border-box;
	max-width: 100%;
	padding: .5rem 1.5rem 1.5rem;
	margin-bottom: 1.5rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.woocommerce-cart .woocommerce-cart-form { background: rgba(255, 255, 255, .9); }
}

/* Cada producto = panel suave y uniforme dentro del wrapper glass, bien separado. */
.woocommerce-cart tr.cart_item {
	background: rgba(255, 255, 255, .42);
	border: 0;
	border-radius: 14px;
	box-shadow:
		0 2px 12px rgba(30, 43, 42, .05),
		inset 0 0 0 1px rgba(255, 255, 255, .5);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding: .35rem 1.1rem .6rem;
	margin: .7rem 0;
}

.woocommerce-cart tr.cart_item:first-of-type {
	margin-top: .4rem;
}

/* Encabezado del carrito: titulo + link "Volver a servicios" en una fila. */
.ks-cart__head {
	align-items: baseline;
	column-gap: 1rem;
	flex-wrap: wrap;
	row-gap: .25rem;
}

.ks-cart__back {
	margin: 0;
	font-weight: 600;
}

.ks-cart__back a {
	color: var(--ks-promo-pink);
	text-decoration: none;
}

.ks-cart__back a:hover {
	text-decoration: underline;
}

/* Gap campo de cupon + boton "Aplicar cupon" */
.woocommerce-cart .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
}

.woocommerce-cart .coupon .input-text {
	flex: 1 1 200px;
	margin: 0;
}

/* Quita el borde de la tabla general del carrito (cada item ya es su card glass) */
.woocommerce-cart table.cart,
.woocommerce-cart .shop_table {
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Quita el rayado zebra de WooCommerce en los items del carrito (filas pares
   tenian un fondo rgba(0,0,0,.024) que con el glass hacia ver distinto el 2do). */
.woocommerce-cart table.cart tr.cart_item td,
.woocommerce-cart .shop_table tr.cart_item td {
	background-color: transparent;
}

/* Linea arriba de la X: es el border-top del cell product-remove -> eliminar. */
.woocommerce-cart tr.cart_item td.product-remove {
	border-top: 0;
}

/* Zebra en los paneles: items pares un poco mas opacos (distincion util). */
.woocommerce-cart tr.cart_item:nth-child(even) {
	background: rgba(255, 255, 255, .6);
}

/* ==========================================================================
   Kinesilk — Glass en "Detalles de facturacion" del checkout.
   Ademas lo paso a UNA columna (billing full-width): evita la columna de
   envío vacía que empujaba el formulario a la mitad derecha en desktop.
   ========================================================================== */
/* Contenedor = solo layout (facturación full-width sin envío). */
.woocommerce-checkout #customer_details {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

/* Glass en CADA grupo de campos (facturación, envío, notas) -> cada uno su caja. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	background: rgba(255, 255, 255, .62);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	border: 1.5px solid rgba(255, 255, 255, .72);
	border-radius: 18px;
	box-shadow:
		0 16px 48px rgba(30, 43, 42, .14),
		inset 0 1px 0 rgba(255, 255, 255, .65);
	box-sizing: border-box;
	max-width: 100%;
	padding: 1.75rem;
	margin-bottom: 1.5rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields {
		background: rgba(255, 255, 255, .9);
	}
}

/* Futuro: SOLO si hay envío (bloque de shipping presente), facturación + envío
   vuelven a 2 columnas en desktop. Sin envío queda full-width (arriba). */
@media (min-width: 992px) {
	.woocommerce-checkout #customer_details:has(.woocommerce-shipping-fields .form-row) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
		align-items: start;
	}
	.woocommerce-checkout #customer_details:has(.woocommerce-shipping-fields .form-row) .col-1,
	.woocommerce-checkout #customer_details:has(.woocommerce-shipping-fields .form-row) .col-2 {
		width: 100%;
	}
}

/* No mostrar caja glass vacía: grupos de campos sin .form-row (ocultar). ocultar cajas glass vacias */
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(.form-row)),
.woocommerce-checkout .woocommerce-additional-fields:not(:has(.form-row)) {
	display: none;
}


/* ==========================================================================
   Kinesilk — Fix contraste: hover sobre un pill de categoria YA activo (T48)
   El hover generico de .ks-cats ponia fondo blanco sin cambiar el color del
   texto, dejando el texto cream del estado activo ilegible. Mantenemos el
   look activo (fondo ink + texto cream) tambien en hover.
   ========================================================================== */
.ks-cats .wc-block-product-categories-list-item a[aria-current]:hover,
.ks-cats .wc-block-product-categories-list-item.is-current a:hover {
	background: var(--ks-ink);
	border-color: var(--ks-ink);
	color: var(--ks-cream);
}

/* Subcats: el estado activo debe usar texto ink sobre coral (el cream se
   filtraba de una regla previa y daba bajo contraste). */
.ks-subcats a[aria-current],
.ks-subcats a[aria-current="page"],
.ks-subcats a[aria-current]:hover {
	color: var(--ks-ink);
}


/* ==========================================================================
   Kinesilk — Hero: video de aniversario en el slot de media (T49)
   Mismo encuadre que las imagenes (ancho completo, sin radio), 16:9 con
   object-fit cover. width/height reservan el espacio y evitan CLS.
   ========================================================================== */
.ks-hero__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}


/* ==========================================================================
   Kinesilk — Hero video: linea de promo sobre el cover (T50)
   ========================================================================== */
.ks-hero-video__promo {
	color: var(--ks-white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	font-weight: 700;
	margin-inline: auto;
	max-width: 30ch;
	text-align: center;
}


/* ==========================================================================
   Kinesilk — Hero video: responsividad en mobile (T51)
   El video trae texto adentro (marca + "especial aniversario"). En mobile un
   cover recortaba los lados y lo perdia. Solucion: mostrar el frame completo
   (contain) arriba y bajar el contenido (promo + CTA) a una banda solida.
   ========================================================================== */
.ks-hero-video.wp-block-cover {
	background-color: var(--ks-ink);
}

@media (max-width: 1024px) {
	.ks-hero-video .wp-block-cover__video-background {
		object-fit: contain;
		object-position: top center;
	}

	.ks-hero-video.wp-block-cover {
		justify-content: flex-end;
		min-height: 62vh;
		padding-block: 1.25rem 2.5rem;
	}

	/* el contenido vive en la banda solida de abajo, asi bajamos el oscurecido
	   sobre el video para que su texto interno se lea bien */
	.ks-hero-video .wp-block-cover__background {
		opacity: .2;
	}
}


/* ==========================================================================
   Kinesilk — Hero video: CTA "Ver promociones" mas fino y compacto (T52)
   De barra full-width 60px a pill centrado ~46px, acento amarillo mas sutil.
   Scopeado a .ks-hero-video (el formato estandar conserva su boton).
   ========================================================================== */
.ks-hero-video .ks-hero__actions .wp-block-button {
	width: auto;
}

.ks-hero-video .ks-hero__actions .wp-block-button.is-style-ks-primary .wp-block-button__link {
	font-size: 1rem;
	min-height: 46px;
	padding-inline: 1.9rem;
	width: auto;
	box-shadow: 3px 3px 0 var(--ks-promo-yellow);
}


/* ==========================================================================
   Kinesilk — Hero video: solo el video + CTA al fondo (T53)
   Texto overlay removido (el video comunica). El unico contenido visible, el
   boton, va al fondo; bajamos el oscurecido para que el video luzca.
   ========================================================================== */
.ks-hero-video .wp-block-cover__background {
	opacity: .2;
}


/* ==========================================================================
   Kinesilk — Hero video LAPTOP: boton en esquina inferior izquierda y
   menos recorte del video para que se vea el logo de arriba (T54)
   ========================================================================== */
@media (min-width: 1025px) {
	.ks-hero-video.wp-block-cover {
		min-height: 100svh;
	}

	/* anclar el video arriba: garantiza que el logo "KINESILK" quede visible */
	.ks-hero-video .wp-block-cover__video-background {
		object-position: top center;
	}

	/* CTA pegado a la esquina inferior izquierda del hero */
	.ks-hero-video .ks-hero__actions {
		position: absolute;
		left: 2rem;
		bottom: 2rem;
		justify-content: flex-start;
		margin: 0;
		width: auto;
		z-index: 2;
	}
}


/* ==========================================================================
   Kinesilk — Hero ANIVERSARIO animado, paleta de marca (T56)
   Reemplaza el hero por video. Fondo crema->agua->menta, texto tinta,
   destellos/fuegos en coral/menta/rubor. JS: assets/js/hero-aniversario.js.
   ========================================================================== */
.ks-aniv {
	--a-cream: #fcf9ea; --a-aqua: #badeda; --a-mint: #87e9ce;
	--a-coral: #fea4a4; --a-coral-deep: #f07e7e; --a-blush: #ffbdbe;
	--a-ink: #1e2b2a; --a-ink-soft: #4a5856;
	align-items: center;
	background: radial-gradient(125% 100% at 50% 14%, #fff 0%, var(--a-cream) 24%, var(--a-aqua) 64%, var(--a-mint) 100%);
	color: var(--a-ink);
	display: flex;
	flex-direction: column;
	isolation: isolate;
	justify-content: center;
	min-height: min(88svh, 740px);
	overflow: hidden;
	padding: clamp(5rem, 9vh, 6.5rem) 1.25rem clamp(2.2rem, 5vh, 3.5rem);
	position: relative;
	text-align: center;
}

.ks-aniv::before,
.ks-aniv::after { content: ""; inset: -12%; pointer-events: none; position: absolute; z-index: 0; }
.ks-aniv::before {
	animation: ks-aniv-twinkle 4.5s ease-in-out infinite;
	background-image:
		radial-gradient(2px 2px at 12% 18%, var(--a-coral) 45%, transparent 55%),
		radial-gradient(2px 2px at 28% 62%, var(--a-mint) 45%, transparent 55%),
		radial-gradient(1.5px 1.5px at 44% 30%, var(--a-blush) 45%, transparent 55%),
		radial-gradient(2px 2px at 68% 48%, var(--a-coral) 45%, transparent 55%),
		radial-gradient(1.5px 1.5px at 82% 22%, var(--a-mint) 45%, transparent 55%),
		radial-gradient(2px 2px at 90% 72%, var(--a-blush) 45%, transparent 55%),
		radial-gradient(1.5px 1.5px at 56% 80%, var(--a-coral) 45%, transparent 55%),
		radial-gradient(2px 2px at 20% 90%, var(--a-mint) 45%, transparent 55%);
}
.ks-aniv::after {
	animation: ks-aniv-twinkle 6s ease-in-out infinite 1.3s; opacity: .8;
	background-image:
		radial-gradient(1.5px 1.5px at 8% 40%, var(--a-mint) 45%, transparent 55%),
		radial-gradient(2px 2px at 36% 10%, var(--a-coral) 45%, transparent 55%),
		radial-gradient(1.5px 1.5px at 62% 18%, var(--a-blush) 45%, transparent 55%),
		radial-gradient(2px 2px at 76% 58%, var(--a-coral) 45%, transparent 55%),
		radial-gradient(1.5px 1.5px at 94% 44%, var(--a-mint) 45%, transparent 55%),
		radial-gradient(2px 2px at 48% 52%, var(--a-blush) 45%, transparent 55%),
		radial-gradient(1.5px 1.5px at 24% 70%, var(--a-coral) 45%, transparent 55%);
}
@keyframes ks-aniv-twinkle { 0%,100% { opacity:.3; } 50% { opacity:.95; } }

.ks-aniv__fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ks-aniv__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.ks-aniv__glow {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(42% 38% at 50% 40%, rgba(254,164,164,.28), transparent 70%);
	animation: ks-aniv-glowpulse 5s ease-in-out infinite;
}
@keyframes ks-aniv-glowpulse { 0%,100% { opacity:.4; } 50% { opacity:.9; } }

.ks-aniv__content {
	position: relative; z-index: 3; width: 100%;
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(.7rem, 1.8vw, 1.2rem);
}

.ks-aniv__brand {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	padding: 1.6rem 1.9rem; animation: ks-aniv-rise 1s cubic-bezier(.2,.7,.2,1) backwards;
}
.ks-aniv__logo-img { display: block; width: clamp(150px, 24vw, 220px); height: auto; }
.ks-aniv__brand::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1;
	transform: translate(-50%,-50%); border-radius: 50%; border: 1.5px solid rgba(254,164,164,.7);
	box-shadow: 0 0 26px rgba(254,164,164,.3), inset 0 0 26px rgba(135,233,206,.22); z-index: -1;
	animation: ks-aniv-ring 1.2s ease-out .15s backwards, ks-aniv-ringpulse 3.6s ease-in-out 1.5s infinite;
}
.ks-aniv__brand::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1;
	transform: translate(-50%,-50%); border-radius: 50%; z-index: -1;
	background: conic-gradient(from 0deg, transparent 0 60%, rgba(254,164,164,.9) 78%, rgba(135,233,206,.5) 86%, transparent 93%);
	-webkit-mask: radial-gradient(closest-side, transparent 0 93%, #000 95%, #000 100%);
	        mask: radial-gradient(closest-side, transparent 0 93%, #000 95%, #000 100%);
	animation: ks-aniv-ringspin 5.5s linear infinite;
}
@keyframes ks-aniv-ringspin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes ks-aniv-ringpulse {
	0%,100% { box-shadow: 0 0 26px rgba(254,164,164,.3), inset 0 0 26px rgba(135,233,206,.22); }
	50% { box-shadow: 0 0 44px rgba(254,164,164,.5), inset 0 0 34px rgba(135,233,206,.32); }
}
@keyframes ks-aniv-ring { from { opacity:0; transform: translate(-50%,-50%) scale(.55);} to { opacity:1; transform: translate(-50%,-50%) scale(1);} }
@keyframes ks-aniv-rise { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform:none;} }

.ks-aniv__scenes { position: relative; width: 100%; min-height: clamp(185px, 26vh, 240px); }
.ks-aniv__scene {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(.6rem, 1.8vw, 1.1rem);
	opacity: 0; filter: blur(10px); transform: scale(.985);
	transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s ease; pointer-events: none;
}
.ks-aniv__scene.is-active { opacity: 1; filter: blur(0); transform: none; }

.ks-aniv__num {
	-webkit-background-clip: text; background-clip: text; color: transparent;
	background-image: linear-gradient(180deg, var(--a-coral), var(--a-coral-deep));
	display: block; font-size: clamp(3.5rem, 12vw, 7rem); line-height: .85; font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
}
.ks-aniv__title { color: var(--a-ink); font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.8rem, 5.2vw, 3.4rem); font-weight: 700; letter-spacing: .05em; margin: 0; text-transform: uppercase; }
.ks-aniv__lead { color: var(--a-ink); font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.4rem, 4.5vw, 2.6rem); letter-spacing: .08em; margin: 0; text-transform: uppercase; font-weight: 700; line-height: 1.1; }
.ks-aniv__sub { color: var(--a-coral-deep); font-family: var(--wp--preset--font-family--heading); font-size: clamp(1rem, 2.6vw, 1.5rem); letter-spacing: .12em; margin: 0; text-transform: uppercase; font-weight: 600; }
.ks-aniv__text { color: var(--a-ink-soft); font-size: clamp(1rem, 2.2vw, 1.3rem); margin: 0 auto; max-width: 34ch; }

.ks-aniv__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; animation: ks-aniv-rise 1s cubic-bezier(.2,.7,.2,1) .55s backwards; }
.ks-aniv__badge {
	background: rgba(255,255,255,.55); border: 1px solid var(--a-coral);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border-radius: 16px; padding: .7rem 1.4rem; min-width: 120px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
	box-shadow: 0 10px 24px -16px rgba(30,43,42,.5);
}
.ks-aniv__b-lg { color: var(--a-ink); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.45rem; }
.ks-aniv__b-sm { color: var(--a-ink-soft); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

.ks-aniv__cta-wrap { position: static; z-index: 4; text-align: center; margin-top: .4rem; }
.ks-aniv__cta {
	display: inline-block; background: var(--a-coral); color: var(--a-ink); text-decoration: none;
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.05rem;
	min-height: 52px; line-height: 52px; padding-inline: 2.25rem; border-radius: 999px;
	box-shadow: 0 12px 28px -10px rgba(240,126,126,.7);
	transition: transform .15s ease, background-color .15s ease;
	animation: ks-aniv-rise 1s cubic-bezier(.2,.7,.2,1) .4s backwards;
}
.ks-aniv__cta:hover { transform: translateY(-2px); background: var(--a-blush); color: var(--a-ink); }

@media (prefers-reduced-motion: reduce) {
	.ks-aniv::before, .ks-aniv::after, .ks-aniv__glow,
	.ks-aniv__brand, .ks-aniv__brand::before, .ks-aniv__brand::after, .ks-aniv__cta { animation: none !important; }
	.ks-aniv__scene { transition: none; }
}


/* ==========================================================================
   Kinesilk - Ficha de producto: ordenar badges vs icono de zoom (T58)
   La lupa de la galeria va arriba-derecha; agrupo los badges a la izquierda
   y reservo la derecha para que no se solapen.
   ========================================================================== */
.ks-product-media .ks-badges-overlay {
	right: 3.25rem;
}
.ks-product-media .ks-pbadge--featured {
	margin-left: 0;
}


/* ==========================================================================
   Kinesilk - Recorte de la marca de agua IA (esquina inf-der) en imagenes de
   producto, con leve zoom anclado arriba-izquierda (T59). Es recorte visual;
   lo ideal es quitar la marca del archivo original.
   ========================================================================== */
.ks-pcard__media,
.wc-block-components-product-image > a,
.wc-block-components-product-image .wp-block-woocommerce-product-image > a {
	overflow: hidden;
}
.ks-pcard__media img,
.wc-block-components-product-image > a img {
	transform: scale(1.08);
	transform-origin: top left;
}


/* ==========================================================================
   Kinesilk - Ocultar la lupa de zoom del producto cuando el menu mobile
   esta abierto (se quedaba encima del overlay) (T60).
   ========================================================================== */
html.has-modal-open .woocommerce-product-gallery__trigger,
html.has-modal-open .wc-block-components-product-image-gallery__dialog-trigger {
	display: none !important;
}


/* ==========================================================================
   Kinesilk - Imagen de producto a ancho completo del card (T61)
   El bloque de imagen traia padding lateral (~0.8rem) que dejaba la foto
   insertada y chica. La llevamos a ancho completo, con cover para que llene.
   ========================================================================== */
.wc-block-components-product-image,
.ks-product-media {
	padding: 0 !important;
}

.wc-block-components-product-image {
	margin: 0 0 1rem;
}
.wc-block-components-product-image > a {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.wc-block-components-product-image > a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.08);
	transform-origin: top left;
}


/* ==========================================================================
   Selector de sesiones en el card (T62)
   ========================================================================== */
.ks-sel { display: flex; flex-direction: column; gap: .7rem; margin-top: .4rem; }
.ks-sel, .ks-sel * { box-sizing: border-box; }
.ks-sel [hidden] { display: none !important; }
.ks-sel__pills { display: flex; gap: .5rem; }
.ks-sel__pill {
	flex: 1;
	position: relative;
	background: var(--ks-white);
	border: 1.5px solid rgba(30, 43, 42, .16);
	border-radius: var(--ks-radius-sm);
	color: var(--ks-ink);
	cursor: pointer;
	font-family: inherit;
	padding: .55rem .4rem .5rem;
	text-align: center;
	transition: border-color .15s, background .15s, transform .08s;
}
.ks-sel__pill:hover { border-color: var(--ks-coral); }
.ks-sel__pill:active { transform: translateY(1px); }
.ks-sel__pill[aria-pressed="true"] { border-color: var(--ks-coral); background: rgba(254, 164, 164, .16); }
.ks-sel__pill:focus-visible { outline: 2px solid var(--ks-ink); outline-offset: 2px; }
.ks-sel__pilln { display: block; font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 700; font-size: .95rem; }
.ks-sel__pillh { display: block; font-size: .78rem; color: var(--ks-ink-soft); margin-top: .1rem; }
.ks-sel__tag {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ks-mint);
	color: var(--ks-ink);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .12rem .45rem;
	border-radius: 7px;
	white-space: nowrap;
}
.ks-sel__price { display: flex; flex-direction: column; gap: .14rem; }
.ks-sel__prow { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ks-sel__off { background: var(--ks-promo-pink); color: var(--ks-white); font-weight: 700; font-size: .72rem; padding: .1rem .4rem; border-radius: 6px; }
.ks-sel__was { color: var(--ks-ink-soft); text-decoration: line-through; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ks-sel__now { font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 700; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ks-sel__unit { color: var(--ks-ink-soft); font-size: .82rem; }
.ks-sel__unit b { color: var(--ks-promo-pink); font-weight: 600; }
.ks-sel__cta {
	background: var(--ks-ink);
	border-radius: 999px;
	color: var(--ks-cream);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	min-height: 48px;
	padding: .5rem 1rem;
	text-align: center;
	text-decoration: none;
	transition: background .15s, color .15s, transform .08s;
	width: 100%;
	font-variant-numeric: tabular-nums;
}
.ks-sel__cta:hover { background: var(--ks-coral); color: var(--ks-ink); text-decoration: none; }
.ks-sel__cta:active { transform: translateY(1px); }
.ks-sel__cta.is-added { background: var(--ks-mint); color: var(--ks-ink); }
@media (prefers-reduced-motion: reduce) { .ks-sel__pill, .ks-sel__cta { transition: none; } }


/* ==========================================================================
   Paginación del catálogo — pills + leyenda "Página X de Y" (T63)
   ========================================================================== */
.ks-pg-caption {
	color: var(--ks-ink-soft);
	font-family: var(--wp--preset--font-family--heading);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	margin: 0 0 1rem;
	text-align: center;
	width: 100%;
}
.ks-pg-caption b { color: var(--ks-ink); font-weight: 700; }

.wp-block-query-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
}
.wp-block-query-pagination.ks-pagination--top { margin: 0 0 1.75rem; }
/* Aire entre la galería y la paginación de abajo (T63b) */
.wc-block-product-template + .ks-pg-caption { margin-top: clamp(1.75rem, 6vw, 2.5rem); }


.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	align-items: center;
	background: var(--ks-white);
	border: 1.5px solid rgba(30, 43, 42, .15);
	border-radius: 999px;
	box-sizing: border-box;
	color: var(--ks-ink);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	height: 42px;
	justify-content: center;
	line-height: 1;
	min-width: 42px;
	padding: 0 .5rem;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.wp-block-query-pagination .page-numbers:hover:not(.current):not(.dots),
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--ks-mint);
	border-color: var(--ks-mint);
	color: var(--ks-ink);
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--ks-coral);
	border-color: var(--ks-coral);
	box-shadow: 0 8px 18px -10px rgba(217, 99, 95, .8);
	color: var(--ks-ink);
	font-weight: 700;
}
.wp-block-query-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--ks-ink-soft);
	min-width: 24px;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next { padding: 0 1.1rem; }
.wp-block-query-pagination-previous::before { content: "\2039"; font-size: 1.15rem; margin-right: .4rem; }
.wp-block-query-pagination-next::after { content: "\203A"; font-size: 1.15rem; margin-left: .4rem; }
.wp-block-query-pagination .page-numbers:active,
.wp-block-query-pagination-previous:active,
.wp-block-query-pagination-next:active { transform: translateY(1px); }
.wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination-next:focus-visible,
.wp-block-query-pagination .page-numbers:focus-visible { outline: 2px solid var(--ks-coral); outline-offset: 2px; }


/* ==========================================================================
   Buscador del catálogo (T64)
   ========================================================================== */
.ks-shop-search {
	align-items: center;
	background: var(--ks-white);
	border: 1.5px solid rgba(30, 43, 42, .15);
	border-radius: 999px;
	box-sizing: border-box;
	display: flex;
	gap: .5rem;
	margin: 0 auto 1.6rem;
	max-width: 560px;
	padding: .3rem .3rem .3rem 1.1rem;
	width: 100%;
}
.ks-shop-search:focus-within { border-color: var(--ks-coral); }
.ks-shop-search__icon { color: var(--ks-ink-soft); flex: 0 0 auto; }
.ks-shop-search__input {
	background: transparent;
	border: 0;
	color: var(--ks-ink);
	flex: 1;
	font-family: inherit;
	font-size: 1rem;
	min-width: 0;
	outline: none;
	padding: .55rem 0;
}
.ks-shop-search__input::placeholder { color: var(--ks-ink-soft); }
.ks-shop-search__btn {
	background: var(--ks-ink);
	border: 0;
	border-radius: 999px;
	box-sizing: border-box;
	color: var(--ks-cream);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	min-height: 42px;
	padding: 0 1.4rem;
	transition: background-color .15s ease, color .15s ease;
}
.ks-shop-search__btn:hover { background: var(--ks-coral); color: var(--ks-ink); }
.ks-shop-search__btn:focus-visible { outline: 2px solid var(--ks-coral); outline-offset: 2px; }

/* Buscador dinámico: atenuar la grilla mientras carga (T64b) */
.ks-shop-main.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }