/**
 * Khala Área Profesional — estilos
 * Carga: mu-plugin khala-pro (clase Khala_Pro_Visibility::enqueue_styles).
 *
 * Filosofía "Chromatic Stillness": un foco, ondas concéntricas, asimetría
 * intencional pero composiciones balanceadas. Sin negro puro.
 */

/* ============================================
   1. Tarjetas — base + hover
   ============================================ */
.khala-card {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
	will-change: transform;
}
.khala-card:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 18px 42px rgba(50, 75, 75, 0.16) !important;
}

/* Variante tarjeta clickable (con url en el blurb) */
.khala-card-pro .et_pb_blurb_content { cursor: pointer; }
.khala-card-pro a { text-decoration: none !important; }

/* Variante dark (cta tienda) */
.khala-card-dark:hover {
	box-shadow: 0 18px 42px rgba(50, 75, 75, 0.32) !important;
}

/* ============================================
   2. Secciones — fondos con depth (no blanco plano)
   ============================================ */

/* Cremo con blob amarillo arriba derecha */
.khala-section-cream-blob-yellow {
	position: relative;
	background: #F9F3E9 !important;
	overflow: hidden !important;
}
.khala-section-cream-blob-yellow::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -100px;
	width: 480px;
	height: 480px;
	background: url("/wp-content/uploads/khala-visual-remodel/blob-amarillo.png") no-repeat center / contain;
	opacity: 0.35;
	pointer-events: none;
	z-index: 0;
}
.khala-section-cream-blob-yellow > .et_pb_row { position: relative; z-index: 1; }

/* Crema con blob azul abajo izquierda */
.khala-section-cream-blob-blue {
	position: relative;
	background: #F9F3E9 !important;
	overflow: hidden !important;
}
.khala-section-cream-blob-blue::before {
	content: "";
	position: absolute;
	bottom: -140px;
	left: -120px;
	width: 520px;
	height: 520px;
	background: url("/wp-content/uploads/khala-visual-remodel/blob-azul.png") no-repeat center / contain;
	opacity: 0.32;
	pointer-events: none;
	z-index: 0;
}
.khala-section-cream-blob-blue > .et_pb_row { position: relative; z-index: 1; }

/* Crema con blob verde derecha centrado */
.khala-section-cream-blob-green {
	position: relative;
	background: #F9F3E9 !important;
	overflow: hidden !important;
}
.khala-section-cream-blob-green::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -160px;
	transform: translateY(-50%);
	width: 460px;
	height: 460px;
	background: url("/wp-content/uploads/khala-visual-remodel/blob-verde.png") no-repeat center / contain;
	opacity: 0.30;
	pointer-events: none;
	z-index: 0;
}
.khala-section-cream-blob-green > .et_pb_row { position: relative; z-index: 1; }

/* Blanco con gradient radial cromático suave (en lugar de blanco plano) */
.khala-section-white-soft {
	position: relative;
	background:
		radial-gradient(ellipse 800px 600px at 20% 0%, rgba(140, 205, 204, 0.10), transparent 60%),
		radial-gradient(ellipse 600px 500px at 100% 100%, rgba(149, 177, 176, 0.10), transparent 60%),
		#FFFFFF !important;
}

/* Hero dark con vignette + blob de acento */
.khala-section-dark-hero {
	position: relative;
	background:
		radial-gradient(ellipse 700px 500px at 80% 30%, rgba(140, 205, 204, 0.18), transparent 65%),
		linear-gradient(180deg, #2A4040 0%, #324B4B 60%, #2F4545 100%) !important;
	overflow: hidden !important;
}
.khala-section-dark-hero::after {
	content: "";
	position: absolute;
	bottom: -160px;
	left: -140px;
	width: 520px;
	height: 520px;
	background: url("/wp-content/uploads/khala-visual-remodel/blob-azul.png") no-repeat center / contain;
	opacity: 0.18;
	pointer-events: none;
	z-index: 0;
}
.khala-section-dark-hero > .et_pb_row { position: relative; z-index: 1; }

/* Dark CTA pre-form con blob naranja */
.khala-section-dark-cta {
	position: relative;
	background:
		radial-gradient(ellipse 600px 400px at 50% 100%, rgba(140, 205, 204, 0.14), transparent 70%),
		#324B4B !important;
	overflow: hidden !important;
}
.khala-section-dark-cta::before {
	content: "";
	position: absolute;
	top: -100px;
	right: -120px;
	width: 380px;
	height: 380px;
	background: url("/wp-content/uploads/khala-visual-remodel/blob-naranja.png") no-repeat center / contain;
	opacity: 0.16;
	pointer-events: none;
	z-index: 0;
}
.khala-section-dark-cta > .et_pb_row { position: relative; z-index: 1; }

/* Mandala-bg para sección manifiesto cromático */
.khala-section-mandala {
	position: relative;
	background:
		radial-gradient(ellipse 700px 600px at 15% 50%, rgba(140, 205, 204, 0.08), transparent 60%),
		#F9F3E9 !important;
	overflow: hidden !important;
}

/* ============================================
   3. Tipografía pro
   ============================================ */
.khala-section-dark-hero h1,
.khala-section-dark-hero h2,
.khala-section-dark-hero h3,
.khala-section-dark-cta h2 {
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.10);
}

/* Énfasis italic suave */
.khala-pro-emphasis em {
	font-style: italic;
	font-weight: 400;
	color: #8CCDCC;
}

/* ============================================
   4. Form CF7 wrap — estética cromática
   ============================================ */
.khala-pro-form-wrap {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 44px 36px;
	box-shadow: 0 8px 32px rgba(50, 75, 75, 0.08);
}
.khala-pro-form-wrap label {
	display: block;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #324B4B;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
	margin-top: 14px;
}
.khala-pro-form-wrap input[type="text"],
.khala-pro-form-wrap input[type="email"],
.khala-pro-form-wrap input[type="tel"],
.khala-pro-form-wrap input[type="url"],
.khala-pro-form-wrap select,
.khala-pro-form-wrap textarea {
	width: 100%;
	background: #F9F3E9;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 14px 16px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: #324B4B;
	transition: border-color 0.25s ease, background 0.25s ease;
}
.khala-pro-form-wrap input:focus,
.khala-pro-form-wrap select:focus,
.khala-pro-form-wrap textarea:focus {
	outline: none;
	border-color: #8CCDCC;
	background: #FFFFFF;
}
.khala-pro-form-wrap textarea { min-height: 120px; resize: vertical; }
.khala-pro-form-wrap input[type="submit"],
.khala-pro-form-wrap .wpcf7-submit {
	background: #324B4B !important;
	color: #F9F3E9 !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 16px 44px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	margin-top: 24px !important;
	transition: background 0.25s ease, transform 0.25s ease !important;
}
.khala-pro-form-wrap input[type="submit"]:hover,
.khala-pro-form-wrap .wpcf7-submit:hover {
	background: #8CCDCC !important;
	color: #324B4B !important;
	transform: translateY(-2px);
}

/* ============================================
   5. Grid de rituales (shortcode khala_pro_rituales)
   ============================================ */
.khala-pro-rituales-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.khala-pro-ritual {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 36px 32px 32px;
	box-shadow: 0 6px 24px rgba(50, 75, 75, 0.07);
	border-top: 4px solid #8CCDCC;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.khala-pro-ritual:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(50, 75, 75, 0.14);
}

/* Variantes cromáticas (color del borde superior) */
.khala-pro-ritual--azul     { border-top-color: #8CCDCC; }
.khala-pro-ritual--verde    { border-top-color: #95C5A8; }
.khala-pro-ritual--amarillo { border-top-color: #E8D572; }
.khala-pro-ritual--naranja  { border-top-color: #E89B5F; }
.khala-pro-ritual--rojo     { border-top-color: #C46B6B; }
.khala-pro-ritual--violeta  { border-top-color: #A88BCC; }
.khala-pro-ritual--rosa     { border-top-color: #E8B6C7; }

.khala-pro-ritual header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	background: none;
}
/* Sustituir el emoji con un disco cromático suave (no emojis as icons + no saturation) */
.khala-pro-ritual-emoji {
	font-size: 0 !important;
	color: transparent;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #8CCDCC;
	flex-shrink: 0;
	box-shadow: 0 0 0 4px rgba(140, 205, 204, 0.18);
}
.khala-pro-ritual--azul .khala-pro-ritual-emoji     { background: #8CCDCC; box-shadow: 0 0 0 4px rgba(140,205,204,0.18); }
.khala-pro-ritual--verde .khala-pro-ritual-emoji    { background: #95C5A8; box-shadow: 0 0 0 4px rgba(149,197,168,0.18); }
.khala-pro-ritual--amarillo .khala-pro-ritual-emoji { background: #E8D572; box-shadow: 0 0 0 4px rgba(232,213,114,0.20); }
.khala-pro-ritual--naranja .khala-pro-ritual-emoji  { background: #E89B5F; box-shadow: 0 0 0 4px rgba(232,155,95,0.20); }
.khala-pro-ritual--rojo .khala-pro-ritual-emoji     { background: #C46B6B; box-shadow: 0 0 0 4px rgba(196,107,107,0.20); }
.khala-pro-ritual--violeta .khala-pro-ritual-emoji  { background: #A88BCC; box-shadow: 0 0 0 4px rgba(168,139,204,0.18); }
.khala-pro-ritual--rosa .khala-pro-ritual-emoji     { background: #E8B6C7; box-shadow: 0 0 0 4px rgba(232,182,199,0.18); }
.khala-pro-ritual h3 {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 500 !important;
	color: #324B4B !important;
	font-size: 19px !important;
	line-height: 1.35em !important;
	margin: 0 !important;
	padding: 0 !important;
}
.khala-pro-ritual-content {
	color: #492A12;
	font-size: 14px;
	line-height: 1.75em;
	margin: 0 0 16px;
	flex-grow: 1;
}
.khala-pro-ritual-meta {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}
.khala-pro-ritual-meta li {
	color: #492A12;
	font-size: 13px;
	line-height: 1.8em;
	margin: 0;
	padding: 0;
	opacity: 0.82;
	letter-spacing: 0.01em;
}
.khala-pro-ritual-quote {
	font-family: 'DM Sans', sans-serif;
	font-style: italic;
	font-weight: 400;
	color: #324B4B;
	font-size: 14px;
	line-height: 1.55em;
	margin: 0 0 20px;
	padding: 14px 16px 14px 18px;
	border-left: 3px solid #8CCDCC;
	background: rgba(140, 205, 204, 0.08);
	border-radius: 0 8px 8px 0;
	quotes: none;
}
.khala-pro-ritual-quote::before,
.khala-pro-ritual-quote::after { content: none; }

.khala-pro-ritual-link {
	color: #324B4B;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-decoration: none;
	border-bottom: 1px solid #8CCDCC;
	padding-bottom: 3px;
	align-self: flex-start;
	transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.khala-pro-ritual-link:hover {
	color: #8CCDCC;
	border-bottom-color: #324B4B;
	transform: translateX(3px);
}

@media (max-width: 600px) {
	.khala-pro-rituales-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.khala-pro-ritual { padding: 30px 24px 26px; }
}

/* ============================================
   6. Condiciones numeradas — gran número decorativo
   ============================================ */
.khala-cond-row {
	position: relative;
}
.khala-cond-row .khala-cond-num {
	font-family: 'DM Sans', sans-serif;
	font-style: italic;
	font-weight: 500;
	font-size: 72px;
	line-height: 1;
	color: #8CCDCC;
	opacity: 0.55;
	margin: 0;
}

/* ============================================
   7. Wave divider (entre secciones)
   ============================================ */
.khala-wave-floral-down::after {
	content: "";
	display: block;
	height: 60px;
	background: url("/wp-content/uploads/khala-visual-remodel/wave-divider-floral.svg") no-repeat center bottom / 100% 100%;
}

/* ============================================
   8a. Banner horizontal Tienda Pro (dark con accent)
   ============================================ */
.khala-tienda-banner {
	position: relative;
	background:
		radial-gradient(ellipse 600px 400px at 100% 50%, rgba(140, 205, 204, 0.22), transparent 60%),
		linear-gradient(135deg, #2A4040 0%, #324B4B 50%, #3A5555 100%) !important;
	border-radius: 22px !important;
	padding: 56px 48px !important;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(50, 75, 75, 0.18) !important;
}
.khala-tienda-banner::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -80px;
	width: 320px;
	height: 320px;
	background: url("/wp-content/uploads/khala-visual-remodel/blob-azul.png") no-repeat center / contain;
	opacity: 0.20;
	pointer-events: none;
}
.khala-tienda-banner > .et_pb_column { position: relative; z-index: 1; }

/* ============================================
   8b. Cards de política/contacto/formación con borde lateral
   ============================================ */
.khala-policy-card {
	background: #FFFFFF !important;
	border-left: 4px solid #8CCDCC !important;
	border-radius: 0 18px 18px 0 !important;
	padding: 32px 36px !important;
	box-shadow: 0 6px 20px rgba(50, 75, 75, 0.06) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.khala-policy-card:hover {
	transform: translateX(4px);
	box-shadow: 0 10px 28px rgba(50, 75, 75, 0.10) !important;
}

/* ============================================
   8c. Sección crema con blob rosa (Flor de Cerezo)
   ============================================ */
.khala-section-cream-blob-pink {
	position: relative;
	background: #F9F3E9 !important;
	overflow: hidden !important;
}
.khala-section-cream-blob-pink::before {
	content: "";
	position: absolute;
	top: 30%;
	left: -120px;
	width: 460px;
	height: 460px;
	background: url("/wp-content/uploads/khala-visual-remodel/blob-rojo.png") no-repeat center / contain;
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}
.khala-section-cream-blob-pink > .et_pb_row { position: relative; z-index: 1; }

/* ============================================
   8d. Sección crema con blob violeta
   ============================================ */
.khala-section-cream-blob-violet {
	position: relative;
	background: #F9F3E9 !important;
	overflow: hidden !important;
}
.khala-section-cream-blob-violet::before {
	content: "";
	position: absolute;
	bottom: -100px;
	right: -100px;
	width: 480px;
	height: 480px;
	background: url("/wp-content/uploads/khala-visual-remodel/blob-violeta.png") no-repeat center / contain;
	opacity: 0.26;
	pointer-events: none;
	z-index: 0;
}
.khala-section-cream-blob-violet > .et_pb_row { position: relative; z-index: 1; }

/* ============================================
   8e. Cards "Lo que tienes" con icono + check
   ============================================ */
.khala-feature-card {
	background: #FFFFFF !important;
	border-radius: 18px !important;
	padding: 30px 28px !important;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.06) !important;
	border: 1px solid rgba(140, 205, 204, 0.20);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.khala-feature-card:hover {
	transform: translateY(-3px);
	border-color: rgba(140, 205, 204, 0.45);
	box-shadow: 0 14px 32px rgba(50, 75, 75, 0.10) !important;
}

/* ============================================
   9. Responsive
   ============================================ */
@media (max-width: 980px) {
	.khala-section-cream-blob-yellow::before,
	.khala-section-cream-blob-blue::before,
	.khala-section-cream-blob-green::before,
	.khala-section-dark-hero::after,
	.khala-section-dark-cta::before {
		width: 320px;
		height: 320px;
		opacity: 0.18;
	}
	.khala-cond-row .khala-cond-num { font-size: 56px; }
	.khala-pro-form-wrap { padding: 32px 22px; }
}

@media (max-width: 600px) {
	.khala-section-cream-blob-yellow::before,
	.khala-section-cream-blob-blue::before,
	.khala-section-cream-blob-green::before,
	.khala-section-dark-hero::after,
	.khala-section-dark-cta::before {
		width: 240px;
		height: 240px;
		opacity: 0.14;
	}
}

/* Responsive ajustes para tienda banner */
@media (max-width: 768px) {
	.khala-tienda-banner { padding: 40px 28px !important; }
	.khala-policy-card { padding: 26px 24px !important; }
}

/* ============================================
   11. Single Ritual Pro (template custom)
   ============================================ */

/* Reset wrappers de Divi en este template */
body.khala-ritual-single #main-content,
body.khala-ritual-single #et-main-area {
	background: #F9F3E9;
}
body.khala-ritual-single .container,
body.khala-ritual-single #main-content .container {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.khala-ritual-single #left-area {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
}
body.khala-ritual-single #sidebar { display: none !important; }
body.khala-ritual-single .post-meta,
body.khala-ritual-single .entry-meta,
body.khala-ritual-single .et_post_meta_wrapper { display: none !important; }
body.khala-ritual-single .et_pb_post .post-meta { display: none !important; }

.khala-ritual-article {
	font-family: 'DM Sans', sans-serif;
	color: #324B4B;
}

/* --- HERO --- */
.khala-ritual-hero {
	position: relative;
	background:
		radial-gradient(ellipse 700px 500px at 80% 30%, color-mix(in srgb, var(--khala-color, #8CCDCC) 22%, transparent), transparent 65%),
		linear-gradient(180deg, #2A4040 0%, #324B4B 60%, #2F4545 100%);
	padding: 180px 24px 140px;
	overflow: hidden;
	text-align: center;
}
.khala-ritual-hero::before {
	content: "";
	position: absolute;
	bottom: -160px;
	left: -160px;
	width: 540px;
	height: 540px;
	background: var(--khala-blob-url) no-repeat center / contain;
	opacity: 0.20;
	pointer-events: none;
}
.khala-ritual-hero::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 380px;
	height: 380px;
	background: var(--khala-blob-url) no-repeat center / contain;
	opacity: 0.14;
	pointer-events: none;
}
.khala-ritual-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 820px;
	margin: 0 auto;
}

.khala-ritual-kicker {
	margin: 0 0 30px;
	letter-spacing: 0.28em;
	color: #8CCDCC;
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
}
.khala-ritual-kicker a {
	color: #8CCDCC;
	text-decoration: none;
	transition: color 0.25s ease;
}
.khala-ritual-kicker a:hover { color: #F9F3E9; }
.khala-ritual-sep { margin: 0 10px; opacity: 0.5; }

.khala-ritual-disc {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--khala-color, #8CCDCC);
	margin: 0 auto 28px;
	box-shadow: 0 0 0 14px color-mix(in srgb, var(--khala-color, #8CCDCC) 18%, transparent);
}

.khala-ritual-title {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 500 !important;
	color: #F9F3E9 !important;
	font-size: 62px !important;
	line-height: 1.15em !important;
	margin: 0 !important;
	letter-spacing: -0.005em;
}

.khala-ritual-quote-hero {
	margin: 36px auto 0;
	max-width: 620px;
	color: #A8C5C4;
	font-size: 20px;
	line-height: 1.55;
	font-weight: 400;
}
.khala-ritual-quote-hero em {
	font-style: italic;
	color: #A8C5C4;
}

/* --- META CARDS --- */
.khala-ritual-meta-section {
	background: #F9F3E9;
	padding: 80px 24px 40px;
	position: relative;
	margin-top: -60px;
}
.khala-ritual-meta-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.khala-meta-card {
	background: #FFFFFF;
	border-radius: 18px;
	padding: 32px 28px;
	box-shadow: 0 12px 28px rgba(50, 75, 75, 0.10);
	text-align: left;
	border-top: 3px solid var(--khala-color, #8CCDCC);
}
.khala-meta-label {
	margin: 0 0 10px;
	letter-spacing: 0.20em;
	color: #8CCDCC;
	font-weight: 500;
	font-size: 11px;
	text-transform: uppercase;
}
.khala-meta-value {
	margin: 0;
	color: #324B4B;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.35;
}
.khala-meta-value strong { font-weight: 500; font-size: 32px; }
.khala-meta-unit { font-size: 13px; color: #95B1B0; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 4px; }
.khala-meta-sensation { font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.45; color: #492A12; }
.khala-meta-color { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.khala-meta-color-disc {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--khala-color, #8CCDCC);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--khala-color, #8CCDCC) 20%, transparent);
	flex-shrink: 0;
}

/* --- CONTENIDO EXTENDIDO --- */
.khala-ritual-content-section {
	background: #F9F3E9;
	padding: 80px 24px 100px;
}
.khala-ritual-content-inner {
	max-width: 720px;
	margin: 0 auto;
	color: #492A12;
	font-size: 17px;
	line-height: 1.85;
}
.khala-ritual-content-inner p {
	margin: 0 0 22px;
	color: #492A12;
}
.khala-ritual-content-inner p:last-child { margin-bottom: 0; }
.khala-ritual-content-inner em {
	color: #324B4B;
	font-style: italic;
	font-weight: 400;
}

/* --- PROTOCOLO PLACEHOLDER --- */
.khala-ritual-protocol-section {
	background:
		radial-gradient(ellipse 700px 400px at 50% 0%, rgba(140, 205, 204, 0.12), transparent 60%),
		#FFFFFF;
	padding: 120px 24px 120px;
	text-align: center;
}
.khala-ritual-protocol-inner {
	max-width: 720px;
	margin: 0 auto;
}
.khala-ritual-section-kicker {
	margin: 0 0 18px;
	letter-spacing: 0.22em;
	color: #8CCDCC;
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
}
.khala-center { text-align: center; }
.khala-ritual-section-title {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 500 !important;
	color: #324B4B !important;
	font-size: 42px !important;
	line-height: 1.25 !important;
	margin: 0 0 24px !important;
}
.khala-ritual-section-title em {
	font-style: italic;
	color: #8CCDCC;
}
.khala-ritual-protocol-text {
	color: #492A12;
	font-size: 16px;
	line-height: 1.85;
	margin: 0 0 24px;
}
.khala-ritual-protocol-cta { margin: 0; }
.khala-link-arrow {
	color: #324B4B;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid #8CCDCC;
	padding-bottom: 3px;
	transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	display: inline-block;
}
.khala-link-arrow:hover {
	color: #8CCDCC;
	border-bottom-color: #324B4B;
	transform: translateX(4px);
}

/* --- RELACIONADOS --- */
.khala-ritual-related-section {
	background:
		radial-gradient(ellipse 800px 600px at 20% 100%, rgba(149, 197, 168, 0.14), transparent 60%),
		#F9F3E9;
	padding: 120px 24px 120px;
}
.khala-ritual-related-inner {
	max-width: 1100px;
	margin: 0 auto;
}
.khala-ritual-related-grid {
	margin-top: 50px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.khala-related-card {
	display: block;
	background: #FFFFFF;
	border-radius: 22px;
	padding: 36px 32px;
	text-decoration: none;
	color: #324B4B;
	box-shadow: 0 6px 24px rgba(50, 75, 75, 0.07);
	border-top: 4px solid #8CCDCC;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}
.khala-related-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(50, 75, 75, 0.14);
}
.khala-related-card--azul     { border-top-color: #8CCDCC; }
.khala-related-card--verde    { border-top-color: #95C5A8; }
.khala-related-card--amarillo { border-top-color: #E8D572; }
.khala-related-card--naranja  { border-top-color: #E89B5F; }
.khala-related-card--rojo     { border-top-color: #C46B6B; }
.khala-related-card--rosa     { border-top-color: #E8B6C7; }
.khala-related-card--violeta  { border-top-color: #A88BCC; }

.khala-related-disc {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-bottom: 16px;
	background: #8CCDCC;
	box-shadow: 0 0 0 4px rgba(140, 205, 204, 0.18);
}
.khala-related-card--azul .khala-related-disc     { background: #8CCDCC; box-shadow: 0 0 0 4px rgba(140,205,204,0.18); }
.khala-related-card--verde .khala-related-disc    { background: #95C5A8; box-shadow: 0 0 0 4px rgba(149,197,168,0.18); }
.khala-related-card--amarillo .khala-related-disc { background: #E8D572; box-shadow: 0 0 0 4px rgba(232,213,114,0.20); }
.khala-related-card--naranja .khala-related-disc  { background: #E89B5F; box-shadow: 0 0 0 4px rgba(232,155,95,0.20); }
.khala-related-card--rojo .khala-related-disc     { background: #C46B6B; box-shadow: 0 0 0 4px rgba(196,107,107,0.20); }
.khala-related-card--rosa .khala-related-disc     { background: #E8B6C7; box-shadow: 0 0 0 4px rgba(232,182,199,0.18); }
.khala-related-card--violeta .khala-related-disc  { background: #A88BCC; box-shadow: 0 0 0 4px rgba(168,139,204,0.18); }

.khala-related-title {
	margin: 0 0 10px !important;
	color: #324B4B !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	font-family: 'DM Sans', sans-serif !important;
	line-height: 1.35 !important;
}
.khala-related-sensation {
	color: #324B4B;
	font-style: italic;
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 14px;
}
.khala-related-duration {
	color: #95B1B0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0;
}
.khala-related-arrow {
	position: absolute;
	top: 32px;
	right: 28px;
	color: #8CCDCC;
	font-size: 18px;
	font-weight: 500;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.khala-related-card:hover .khala-related-arrow { opacity: 1; transform: translateX(0); }

/* --- CTA FOOTER --- */
.khala-ritual-footer-cta {
	background:
		radial-gradient(ellipse 600px 400px at 50% 100%, rgba(140, 205, 204, 0.14), transparent 70%),
		#324B4B;
	padding: 100px 24px 110px;
	text-align: center;
}
.khala-ritual-footer-cta-inner {
	max-width: 720px;
	margin: 0 auto;
}
.khala-ritual-back-text {
	margin: 0 0 28px;
	color: #A8C5C4;
	font-size: 16px;
	font-style: italic;
}
.khala-btn-primary {
	display: inline-block;
	background: #8CCDCC;
	color: #324B4B;
	text-decoration: none;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 18px 44px;
	border-radius: 50px;
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.khala-btn-primary:hover {
	background: #F9F3E9;
	color: #324B4B;
	transform: translateY(-2px);
}

/* --- Responsive single ritual --- */
@media (max-width: 980px) {
	.khala-ritual-hero { padding: 140px 20px 110px; }
	.khala-ritual-title { font-size: 46px !important; }
	.khala-ritual-meta-grid { grid-template-columns: 1fr; }
	.khala-ritual-related-grid { grid-template-columns: 1fr; }
	.khala-ritual-section-title { font-size: 32px !important; }
	.khala-ritual-meta-section { padding: 60px 20px 30px; }
	.khala-ritual-content-section { padding: 60px 20px 80px; }
	.khala-ritual-protocol-section { padding: 80px 20px 80px; }
	.khala-ritual-related-section { padding: 80px 20px 80px; }
	.khala-ritual-footer-cta { padding: 70px 20px 80px; }
}
@media (max-width: 600px) {
	.khala-ritual-title { font-size: 36px !important; }
	.khala-ritual-quote-hero { font-size: 17px; }
	.khala-meta-card { padding: 26px 22px; }
	.khala-related-card { padding: 28px 24px; }
}

/* ============================================
   12a. Fondos cromáticos para páginas WC
   "Chromatic Stillness": cream base + gradientes radiales muy sutiles.
   Sin saturación, sin ruido — el color como presencia, no decoración.
   ============================================ */
body.single-product,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.post-type-archive-product,
body.tax-product_cat,
body.woocommerce-order-received {
	background:
		radial-gradient(ellipse 900px 600px at 10% 0%, rgba(140, 205, 204, 0.08), transparent 60%),
		radial-gradient(ellipse 700px 600px at 90% 100%, rgba(149, 197, 168, 0.08), transparent 60%),
		#F9F3E9 !important;
}

/* Garantizar que main areas se ven sobre el bg cremoso */
body.single-product #main-content,
body.woocommerce-cart #main-content,
body.woocommerce-checkout #main-content,
body.woocommerce-account #main-content,
body.post-type-archive-product #main-content,
body.tax-product_cat #main-content {
	background: transparent !important;
}

/* ============================================
   12b. WooCommerce single-product / carrito / checkout
   Eliminar el divisor sidebar residual del tema Divi
   ============================================ */
body.single-product #main-content .container::before,
body.woocommerce-cart #main-content .container::before,
body.woocommerce-checkout #main-content .container::before,
body.woocommerce-account #main-content .container::before,
body.tax-product_cat #main-content .container::before,
body.post-type-archive-product #main-content .container::before {
	display: none !important;
	content: none !important;
}

/* Garantizar full width y eliminar sidebar en estas páginas WC */
body.single-product #left-area,
body.woocommerce-cart #left-area,
body.woocommerce-checkout #left-area,
body.tax-product_cat #left-area,
body.post-type-archive-product #left-area {
	width: 100% !important;
	float: none !important;
	margin: 0 auto !important;
	max-width: 1200px;
	padding: 40px 24px !important;
}
body.single-product #sidebar,
body.woocommerce-cart #sidebar,
body.woocommerce-checkout #sidebar,
body.tax-product_cat #sidebar,
body.post-type-archive-product #sidebar {
	display: none !important;
}

/* ============================================
   12c. Single product — refinamiento Khala
   ============================================ */
body.single-product .product .summary {
	padding: 30px 40px;
	background: #FFFFFF;
	border-radius: 18px;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.05);
}
body.single-product .product .summary .price,
body.single-product .product .summary p.price {
	color: #324B4B !important;
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 500 !important;
	font-size: 32px !important;
	letter-spacing: -0.005em;
	margin: 18px 0 26px !important;
}
body.single-product .product .summary .price ins {
	background: transparent;
	color: #8CCDCC !important;
	text-decoration: none;
}
body.single-product .product .summary .price del {
	color: #95B1B0 !important;
	opacity: 0.8;
}
body.single-product .product_meta {
	font-family: 'DM Sans', sans-serif;
	color: #95B1B0;
	font-size: 13px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid rgba(140, 205, 204, 0.18);
}
body.single-product .product_meta a {
	color: #324B4B !important;
	border-bottom: 1px solid #8CCDCC;
	padding-bottom: 1px;
	text-decoration: none;
}

/* Form de cantidad y add-to-cart en una caja branded */
body.single-product form.cart {
	background: #F9F3E9 !important;
	border-radius: 14px !important;
	padding: 18px 22px !important;
	margin-top: 0 !important;
	display: flex !important;
	gap: 14px !important;
	align-items: center !important;
}
body.single-product form.cart .quantity input.qty {
	background: #FFFFFF;
	border: 1px solid rgba(140, 205, 204, 0.45);
	border-radius: 50px;
	padding: 12px 14px;
	width: 70px;
	font-family: 'DM Sans', sans-serif;
	color: #324B4B;
	font-size: 15px;
	text-align: center;
}
body.single-product form.cart button.single_add_to_cart_button {
	background: #324B4B !important;
	color: #F9F3E9 !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 14px 32px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
	flex-grow: 1;
}
body.single-product form.cart button.single_add_to_cart_button:hover {
	background: #8CCDCC !important;
	color: #324B4B !important;
	transform: translateY(-2px);
}

/* Tabs (Descripción, Información, Valoraciones) */
body.single-product .woocommerce-tabs {
	background: transparent !important;
	border: none !important;
	margin-top: 60px !important;
	padding: 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid rgba(140, 205, 204, 0.30) !important;
	padding: 0 !important;
	margin: 0 0 30px 0 !important;
	list-style: none !important;
	background: transparent !important;
}
body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after {
	display: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs li a {
	display: block !important;
	padding: 14px 22px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: #95B1B0 !important;
	text-decoration: none !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -1px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: #324B4B !important;
	border-bottom-color: #8CCDCC !important;
}
body.single-product .woocommerce-tabs .panel,
body.single-product .woocommerce-tabs .wc-tab {
	background: #FFFFFF !important;
	border: none !important;
	border-radius: 18px !important;
	padding: 36px 40px !important;
	color: #492A12 !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px;
	line-height: 1.85;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.05);
}

/* Breadcrumbs */
body.single-product nav.woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb {
	font-family: 'DM Sans', sans-serif !important;
	font-size: 13px !important;
	color: #95B1B0 !important;
	margin-bottom: 26px !important;
	padding: 0 !important;
	border: none !important;
}
body.single-product .woocommerce-breadcrumb a {
	color: #324B4B !important;
	text-decoration: none !important;
}
body.single-product .woocommerce-breadcrumb a:hover {
	color: #8CCDCC !important;
}

/* PayPal y "Paga a plazos" — pequeño ajuste de spacing */
body.single-product .ppc-button-wrapper,
body.single-product .ppcp-messages,
body.single-product .pp-multiple-buttons {
	margin-top: 14px !important;
}

/* ============================================
   12d. Carrito (/carrito/)
   ============================================ */
body.woocommerce-cart .woocommerce {
	font-family: 'DM Sans', sans-serif !important;
}
body.woocommerce-cart table.shop_table {
	background: #FFFFFF !important;
	border: none !important;
	border-radius: 18px !important;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.07);
	border-collapse: separate !important;
	border-spacing: 0 !important;
	margin-bottom: 30px !important;
}
body.woocommerce-cart table.shop_table th {
	background: #F9F3E9 !important;
	color: #324B4B !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	padding: 18px 20px !important;
	border: none !important;
}
body.woocommerce-cart table.shop_table td {
	background: #FFFFFF !important;
	color: #324B4B !important;
	padding: 18px 20px !important;
	border-top: 1px solid rgba(50, 75, 75, 0.06) !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 14px !important;
	vertical-align: middle !important;
}
body.woocommerce-cart .product-thumbnail img {
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(50, 75, 75, 0.06);
}
body.woocommerce-cart .product-name a {
	color: #324B4B !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	font-size: 15px !important;
}
body.woocommerce-cart .product-name a:hover {
	color: #8CCDCC !important;
}
body.woocommerce-cart .product-price,
body.woocommerce-cart .product-subtotal {
	color: #324B4B !important;
	font-weight: 500 !important;
}
body.woocommerce-cart .quantity input.qty {
	background: #F9F3E9;
	border: 1px solid rgba(140, 205, 204, 0.45);
	border-radius: 50px;
	padding: 8px 12px;
	width: 64px;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	color: #324B4B;
	font-size: 14px;
}
body.woocommerce-cart a.remove {
	color: #C46B6B !important;
	background: transparent !important;
	font-size: 18px !important;
	width: auto;
	height: auto;
}
body.woocommerce-cart a.remove:hover {
	color: #324B4B !important;
	background: transparent !important;
}

/* Cupón */
body.woocommerce-cart .coupon {
	display: flex;
	gap: 10px;
	align-items: center;
}
body.woocommerce-cart .coupon label { display: none; }
body.woocommerce-cart #coupon_code {
	background: #FFFFFF !important;
	border: 1px solid rgba(140, 205, 204, 0.35) !important;
	border-radius: 50px !important;
	padding: 12px 18px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 14px !important;
	color: #324B4B !important;
	width: auto !important;
	min-width: 200px;
}

/* Cart totals */
body.woocommerce-cart .cart_totals {
	background: #FFFFFF !important;
	border-radius: 18px !important;
	padding: 30px 36px !important;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.07) !important;
}
body.woocommerce-cart .cart_totals h2 {
	font-family: 'DM Sans', sans-serif !important;
	color: #324B4B !important;
	font-size: 22px !important;
	font-weight: 500 !important;
	margin: 0 0 20px !important;
}
body.woocommerce-cart .cart_totals table {
	background: transparent !important;
	box-shadow: none !important;
}
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
	background: transparent !important;
	color: #324B4B !important;
	padding: 12px 0 !important;
	border-bottom: 1px solid rgba(50, 75, 75, 0.08) !important;
	border-top: none !important;
	font-size: 14px !important;
}
body.woocommerce-cart .cart_totals .order-total .amount {
	color: #324B4B !important;
	font-weight: 500 !important;
	font-size: 18px !important;
}
body.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0 !important;
	margin-top: 20px !important;
}

/* Botones del carrito (Actualizar, Aplicar cupón, Proceder al pago) */
body.woocommerce-cart .button,
body.woocommerce-cart input[type="submit"],
body.woocommerce-cart .checkout-button {
	background: #324B4B !important;
	color: #F9F3E9 !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 14px 32px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
}
body.woocommerce-cart .button:hover,
body.woocommerce-cart input[type="submit"]:hover,
body.woocommerce-cart .checkout-button:hover {
	background: #8CCDCC !important;
	color: #324B4B !important;
	transform: translateY(-2px);
}
body.woocommerce-cart .checkout-button.button.alt {
	background: #8CCDCC !important;
	color: #324B4B !important;
	padding: 16px 38px !important;
	font-size: 14px !important;
	width: 100% !important;
	display: block;
	text-align: center;
}
body.woocommerce-cart .checkout-button.button.alt:hover {
	background: #324B4B !important;
	color: #F9F3E9 !important;
}

/* Variant ghost (Actualizar carrito) */
body.woocommerce-cart .button[name="update_cart"] {
	background: transparent !important;
	color: #324B4B !important;
	border: 1px solid #324B4B !important;
}
body.woocommerce-cart .button[name="update_cart"]:hover {
	background: #324B4B !important;
	color: #F9F3E9 !important;
}

/* Mensajes Woo */
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error {
	background: #FFFFFF !important;
	border: none !important;
	border-left: 4px solid #8CCDCC !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
	color: #324B4B !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 14px !important;
	box-shadow: 0 6px 18px rgba(50, 75, 75, 0.08) !important;
	margin-bottom: 24px !important;
}
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message { border-left-color: #95C5A8 !important; }
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error { border-left-color: #C46B6B !important; }

/* ============================================
   12e. Checkout (/finalizar-compra/)
   ============================================ */
body.woocommerce-checkout .woocommerce {
	font-family: 'DM Sans', sans-serif !important;
}
body.woocommerce-checkout #customer_details {
	background: #FFFFFF;
	border-radius: 18px;
	padding: 36px 40px;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.07);
}
body.woocommerce-checkout #customer_details h3 {
	font-family: 'DM Sans', sans-serif !important;
	color: #324B4B !important;
	font-size: 22px !important;
	font-weight: 500 !important;
	margin: 0 0 20px !important;
}
body.woocommerce-checkout form.checkout label {
	display: block !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #324B4B !important;
	letter-spacing: 0.04em !important;
	margin-bottom: 8px !important;
}
body.woocommerce-checkout form.checkout .input-text,
body.woocommerce-checkout form.checkout textarea,
body.woocommerce-checkout form.checkout select,
body.woocommerce-checkout .select2-selection {
	background: #F9F3E9 !important;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px !important;
	color: #324B4B !important;
	box-shadow: none !important;
	width: 100% !important;
	min-height: 50px !important;
	transition: border-color 0.25s ease, background 0.25s ease !important;
}
body.woocommerce-checkout form.checkout .input-text:focus,
body.woocommerce-checkout form.checkout textarea:focus,
body.woocommerce-checkout form.checkout select:focus,
body.woocommerce-checkout .select2-container--focus .select2-selection {
	outline: none !important;
	border-color: #8CCDCC !important;
	background: #FFFFFF !important;
}
body.woocommerce-checkout .select2-selection__rendered {
	color: #324B4B !important;
	line-height: 22px !important;
	padding: 0 !important;
}
body.woocommerce-checkout .select2-selection__arrow {
	height: 48px !important;
	right: 12px !important;
}

/* Order review en la columna derecha */
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout h3#order_review_heading {
	font-family: 'DM Sans', sans-serif !important;
	color: #324B4B !important;
	font-size: 22px !important;
	font-weight: 500 !important;
	margin: 30px 0 20px !important;
}
body.woocommerce-checkout #order_review {
	background: #FFFFFF !important;
	border-radius: 18px !important;
	padding: 36px 40px !important;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.07) !important;
}
body.woocommerce-checkout #order_review table.shop_table {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
}
body.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table td {
	background: transparent !important;
	color: #324B4B !important;
	padding: 12px 0 !important;
	border-bottom: 1px solid rgba(50, 75, 75, 0.08) !important;
	border-top: none !important;
	font-family: 'DM Sans', sans-serif !important;
}

/* Métodos de pago */
body.woocommerce-checkout #payment {
	background: #F9F3E9 !important;
	border-radius: 14px !important;
	padding: 24px !important;
	margin-top: 20px !important;
}
body.woocommerce-checkout #payment ul.payment_methods {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	list-style: none !important;
}
body.woocommerce-checkout #payment ul.payment_methods li {
	background: #FFFFFF !important;
	border: 1px solid rgba(140, 205, 204, 0.25) !important;
	border-radius: 12px !important;
	padding: 14px 18px !important;
	margin-bottom: 10px !important;
}
body.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline !important;
	color: #324B4B !important;
	font-weight: 500 !important;
	margin-left: 8px;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
body.woocommerce-checkout #payment .payment_box {
	background: #F9F3E9 !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 18px !important;
	margin-top: 12px !important;
	font-size: 14px;
}
body.woocommerce-checkout #payment .payment_box::before {
	display: none !important;
}

/* Botón Realizar pedido */
body.woocommerce-checkout #place_order {
	background: #324B4B !important;
	color: #F9F3E9 !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 18px 40px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	width: 100% !important;
	margin-top: 20px !important;
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
}
body.woocommerce-checkout #place_order:hover {
	background: #8CCDCC !important;
	color: #324B4B !important;
	transform: translateY(-2px);
}

/* Login form en checkout (cuando no logueado) */
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .login,
body.woocommerce-checkout form.woocommerce-form-coupon {
	background: #FFFFFF !important;
	border: none !important;
	border-left: 4px solid #8CCDCC !important;
	border-radius: 12px !important;
	padding: 24px 28px !important;
	margin-bottom: 24px !important;
	box-shadow: 0 6px 18px rgba(50, 75, 75, 0.06) !important;
}

/* ============================================
   13. WooCommerce Mi Cuenta — paleta Khala
   ============================================ */

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	font-family: 'DM Sans', sans-serif !important;
}

/* Navegación lateral */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #F9F3E9;
	border-radius: 18px;
	padding: 20px !important;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.07);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	list-style: none !important;
	background: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px !important;
	color: #324B4B !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	border-radius: 10px;
	transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: rgba(140, 205, 204, 0.18) !important;
	color: #324B4B !important;
	padding-left: 22px !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: #324B4B !important;
	color: #F9F3E9 !important;
	font-weight: 500 !important;
}

/* Content principal */
body.woocommerce-account .woocommerce-MyAccount-content {
	color: #492A12 !important;
	font-size: 15px;
	line-height: 1.75;
}
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-MyAccount-content legend {
	font-family: 'DM Sans', sans-serif !important;
	color: #324B4B !important;
	font-weight: 500 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content a {
	color: #324B4B !important;
	border-bottom: 1px solid #8CCDCC;
	padding-bottom: 1px;
	text-decoration: none !important;
	transition: color 0.25s ease, border-color 0.25s ease;
}
body.woocommerce-account .woocommerce-MyAccount-content a:hover {
	color: #8CCDCC !important;
}

/* Tablas (pedidos, descargas, direcciones) */
body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account .shop_table,
body.woocommerce-account table.shop_table {
	background: #FFFFFF !important;
	border: none !important;
	border-radius: 18px !important;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.07);
	border-collapse: separate !important;
	border-spacing: 0 !important;
}
body.woocommerce-account .shop_table th {
	background: #F9F3E9 !important;
	color: #324B4B !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 16px !important;
	border: none !important;
}
body.woocommerce-account .shop_table td {
	background: #FFFFFF !important;
	color: #324B4B !important;
	padding: 16px !important;
	border-top: 1px solid rgba(50, 75, 75, 0.06) !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 14px !important;
}

/* Botones Woo dentro de Mi Cuenta */
body.woocommerce-account .button,
body.woocommerce-account input[type="submit"],
body.woocommerce-account .woocommerce-Button {
	background: #324B4B !important;
	color: #F9F3E9 !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 12px 28px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
	text-decoration: none !important;
	border-bottom: none !important;
}
body.woocommerce-account .button:hover,
body.woocommerce-account input[type="submit"]:hover {
	background: #8CCDCC !important;
	color: #324B4B !important;
	transform: translateY(-2px);
}

/* Variant ghost (Ver, Volver a pedir) */
body.woocommerce-account .button.view {
	background: transparent !important;
	color: #324B4B !important;
	border: 1px solid #324B4B !important;
}
body.woocommerce-account .button.view:hover {
	background: #324B4B !important;
	color: #F9F3E9 !important;
}

/* Forms (direcciones, detalles cuenta, contraseña) */
body.woocommerce-account form input[type="text"],
body.woocommerce-account form input[type="email"],
body.woocommerce-account form input[type="tel"],
body.woocommerce-account form input[type="password"],
body.woocommerce-account form select,
body.woocommerce-account form textarea {
	background: #F9F3E9 !important;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px !important;
	color: #324B4B !important;
	box-shadow: none !important;
	width: 100% !important;
	transition: border-color 0.25s ease, background 0.25s ease !important;
}
body.woocommerce-account form input:focus,
body.woocommerce-account form select:focus,
body.woocommerce-account form textarea:focus {
	outline: none !important;
	border-color: #8CCDCC !important;
	background: #FFFFFF !important;
}
body.woocommerce-account form label {
	display: block !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #324B4B !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

/* Mensajes Woo (success, info, error) */
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error {
	background: #FFFFFF !important;
	border: none !important;
	border-left: 4px solid #8CCDCC !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
	color: #324B4B !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 14px !important;
	box-shadow: 0 6px 18px rgba(50, 75, 75, 0.08) !important;
	margin-bottom: 24px !important;
}
body.woocommerce-account .woocommerce-message { border-left-color: #95C5A8 !important; }
body.woocommerce-account .woocommerce-error   { border-left-color: #C46B6B !important; }
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-error::before { display: none !important; }

/* Iconos antes de labels (a veces Woo añade ::) */
body.woocommerce-account form .required { color: #C46B6B !important; }

/* Order details detail page */
body.woocommerce-account .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details {
	background: #FFFFFF;
	border-radius: 18px;
	padding: 28px 32px;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.07);
	margin-top: 20px;
}
body.woocommerce-account .woocommerce-order-details h2,
body.woocommerce-account .woocommerce-customer-details h2 {
	font-size: 22px !important;
	margin-top: 0 !important;
	margin-bottom: 18px !important;
}

/* ============================================
   13b. /profesionales/ buttons (page-id-418) — explicit
   Divi no regenera CSS al actualizar post_content via WP-CLI,
   así que definimos estos botones explícitamente para garantizar
   contraste/visibilidad.
   ============================================ */
body.page-id-418 .et_pb_button {
	font-family: 'DM Sans', sans-serif !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}
/* Primary buttons (solicitar acceso, login, etc.) — fondo teal claro */
body.page-id-418 .et_pb_button_0,
body.page-id-418 .et_pb_section_4 .et_pb_button_0,
body.page-id-418 .et_pb_section_5 .et_pb_button_0,
body.page-id-418 .et_pb_button.et_pb_button_0:not(.et_pb_button_1):not(.et_pb_button_2),
body.page-id-418 .khala-tienda-banner .et_pb_button_0 {
	background: #8CCDCC !important;
	color: #324B4B !important;
	border: 0 !important;
	border-radius: 50px !important;
	padding: 18px 44px !important;
}
body.page-id-418 .et_pb_button_0:hover {
	background: #F9F3E9 !important;
	color: #324B4B !important;
}

/* Secondary ghost button (ya tengo cuenta) */
body.page-id-418 .et_pb_button_1 {
	background: transparent !important;
	color: #F9F3E9 !important;
	border: 1px solid rgba(140, 205, 204, 0.55) !important;
	border-radius: 50px !important;
	padding: 14px 32px !important;
	font-size: 13px !important;
}
body.page-id-418 .et_pb_button_1:hover {
	background: #F9F3E9 !important;
	color: #324B4B !important;
	border-color: #F9F3E9 !important;
}

/* CTA section secondary button (Solicitar acceso ghost en dark) */
body.page-id-418 .et_pb_button_3 {
	background: transparent !important;
	color: #F9F3E9 !important;
	border: 2px solid #F9F3E9 !important;
	border-radius: 50px !important;
}
body.page-id-418 .et_pb_button_3:hover {
	background: #F9F3E9 !important;
	color: #324B4B !important;
}

/* Hover y after (flecha Divi) — quitamos para limpieza */
body.page-id-418 .et_pb_button::after {
	display: none !important;
	content: none !important;
}

/* H2 en hero/sections oscuras — Divi no regenera color desde shortcode attr */
body.page-id-418 .khala-section-dark-hero h2,
body.page-id-418 .khala-section-dark-cta h2,
body.page-id-418 .khala-section-dark-hero h1,
body.page-id-418 .khala-section-dark-cta h1 {
	color: #F9F3E9 !important;
}

/* Hero H2: tamaño grande */
body.page-id-418 .khala-section-dark-hero h2 {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 500 !important;
	font-size: 60px !important;
	line-height: 1.15 !important;
	letter-spacing: -0.005em;
	margin: 0 !important;
}
@media (max-width: 980px) {
	body.page-id-418 .khala-section-dark-hero h2 { font-size: 44px !important; }
}
@media (max-width: 600px) {
	body.page-id-418 .khala-section-dark-hero h2 { font-size: 34px !important; }
}

/* H2 en otras secciones (cream/white) */
body.page-id-418 .khala-section-cream-blob-yellow h2,
body.page-id-418 .khala-section-cream-blob-blue h2,
body.page-id-418 .khala-section-cream-blob-green h2,
body.page-id-418 .khala-section-cream-blob-pink h2,
body.page-id-418 .khala-section-cream-blob-violet h2,
body.page-id-418 .khala-section-mandala h2,
body.page-id-418 .khala-section-mandala h3,
body.page-id-418 .khala-section-white-soft h2,
body.page-id-418 .khala-section-white-soft h3 {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 500 !important;
	font-size: 42px !important;
	line-height: 1.25 !important;
	margin: 0 !important;
}
@media (max-width: 980px) {
	body.page-id-418 .khala-section-cream-blob-yellow h2,
	body.page-id-418 .khala-section-cream-blob-blue h2,
	body.page-id-418 .khala-section-cream-blob-green h2,
	body.page-id-418 .khala-section-cream-blob-pink h2,
	body.page-id-418 .khala-section-cream-blob-violet h2,
	body.page-id-418 .khala-section-mandala h2,
	body.page-id-418 .khala-section-mandala h3,
	body.page-id-418 .khala-section-white-soft h2,
	body.page-id-418 .khala-section-white-soft h3 { font-size: 32px !important; }
}

/* H2/H3 en secciones cremas/blancas — color */
body.page-id-418 .khala-section-cream-blob-yellow h2,
body.page-id-418 .khala-section-cream-blob-blue h2,
body.page-id-418 .khala-section-cream-blob-green h2,
body.page-id-418 .khala-section-cream-blob-pink h2,
body.page-id-418 .khala-section-cream-blob-violet h2,
body.page-id-418 .khala-section-mandala h2,
body.page-id-418 .khala-section-mandala h3,
body.page-id-418 .khala-section-white-soft h2,
body.page-id-418 .khala-section-white-soft h3 {
	color: #324B4B !important;
}

/* Blurb (cards) titles — color y tipografía explícita por si Divi falla */
body.page-id-418 .et_pb_blurb h4,
body.page-id-418 .et_pb_blurb .et_pb_module_header {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 500 !important;
	color: #324B4B !important;
}
body.page-id-418 .khala-card-dark .et_pb_module_header,
body.page-id-418 .khala-card-dark h4 {
	color: #F9F3E9 !important;
}

/* ============================================
   14. Descargables placeholder mejorado
   ============================================ */
.khala-pdf-placeholder {
	background: #FFFFFF !important;
	border-radius: 18px !important;
	padding: 30px 24px 26px !important;
	box-shadow: 0 6px 22px rgba(50, 75, 75, 0.07) !important;
	border: 1px dashed rgba(140, 205, 204, 0.45) !important;
	text-align: center !important;
	position: relative;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.khala-pdf-placeholder:hover {
	border-color: rgba(140, 205, 204, 0.75) !important;
	box-shadow: 0 12px 32px rgba(50, 75, 75, 0.10) !important;
}
.khala-pdf-badge {
	display: inline-block;
	background: rgba(140, 205, 204, 0.18);
	color: #324B4B;
	font-family: 'DM Sans', sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 50px;
	margin-bottom: 14px;
}
.khala-pdf-icon {
	display: block;
	width: 48px;
	height: 60px;
	margin: 0 auto 14px;
	background:
		linear-gradient(135deg, #F9F3E9 0%, #FFFFFF 100%);
	border: 1px solid rgba(140, 205, 204, 0.45);
	border-radius: 4px;
	position: relative;
	box-shadow: 0 4px 14px rgba(50, 75, 75, 0.06);
}
.khala-pdf-icon::before {
	content: "PDF";
	position: absolute;
	bottom: 6px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.10em;
	color: #8CCDCC;
}
.khala-pdf-icon::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 14px;
	height: 14px;
	background: #F9F3E9;
	border-left: 1px solid rgba(140, 205, 204, 0.45);
	border-bottom: 1px solid rgba(140, 205, 204, 0.45);
	border-radius: 0 4px 0 4px;
}

/* ============================================
   15. Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	.khala-card,
	.khala-rituales-grid .khala-ritual-card,
	.khala-pro-form-wrap input[type="submit"] {
		transition: none !important;
	}
	.khala-card:hover,
	.khala-rituales-grid .khala-ritual-card:hover {
		transform: none !important;
	}
}