/**
 * Casos de éxito — single (plantilla Kadence Element), v3.
 * El centro se monta con BLOQUES NATIVOS de Kadence (rowlayout/column/advancedheading/icon),
 * que traen su propio CSS por-uniqueID. Aquí solo queda lo que NO es un bloque nativo:
 *  - los chips (los pinta el shortcode PHP [cce_chips], no un bloque)
 *  - el matiz de cursiva de la cita
 */

:root {
	--cce-brand:      var(--global-palette1, #00a7c5);
	--cce-brand-dark: var(--global-palette5, #003b47);
	--cce-brand-soft: #e8f6fb;
}

/* Chips de clasificación (zona / tratamiento) — generados por [cce_chips] */
.cce-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; }
.cce-chip { font-size: 12.5px; font-weight: 600; letter-spacing: .3px; padding: 5px 14px;
	border-radius: 999px; line-height: 1.4; }
.cce-chip--zona { background: var(--cce-brand); color: #fff; }
.cce-chip--trat { background: var(--cce-brand-soft); color: var(--cce-brand-dark); border: 1px solid #cfeaf2; }

/* Utilidad: negrita para textos dinámicos (Kadence no deja poner negrita a un campo
   dinámico en el editor; el usuario aplica esta clase al bloque y aquí le damos el estilo) */
.dynamic-text-bold { font-weight: bold; }

/* Pill ANTES/DESPUÉS superpuesta sobre la imagen.
   Contrato con el editor (clases en Advanced del bloque Kadence, sin tocar el markup):
   - .cce-media → columna que envuelve pill + imagen (ancla del posicionamiento)
   - .cce-pill  → advancedheading de la pill (se saca del flujo y se planta sobre la foto)
   El estilo visual de la pill (fondo, tipografía, radio) sigue viviendo en Kadence. */
.cce-media .kt-inside-inner-col { position: relative; }
.cce-media .cce-pill {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
}

/* Cita: la reseña en cursiva (el resto del estilo —fondo, borde— va en el bloque nativo) */
.cce-quotetext { font-style: italic; }

/* ── Sliders móviles del single (patrón jb-mobile-slider, Personalizar→CSS adicional) ──
   El editor asigna clases a los bloques; aquí solo las variantes que la utilidad
   global no cubre:
   - .cce-slider-ficha  → modificador para la FICHA (junto a jb-mobile-slider en el row
     INTERIOR de 5 columnas): celdas de datos pequeñas → slides al 44% (se ven 2).
     Doble clase = más especificidad que la regla global (que fija 82%).
   - .cce-mobile-slider → para bloques POST GRID (relacionados): su DOM no es el de un
     Row Layout (track .kt-post-grid-wrap, tarjetas .kt-blocks-post-grid-item), así que
     jb-mobile-slider no lo alcanza. Sin filtro no hay Isotope: solo flex + snap. */
@media (max-width: 767px) {
	.jb-mobile-slider.cce-slider-ficha .kt-row-column-wrap > .wp-block-kadence-column {
		flex: 0 0 44%;
	}

	.cce-mobile-slider .kt-post-grid-wrap {
		height: auto !important;
		display: flex !important; /* el CSS del bloque carga después; sin esto gana su grid */
		/* full-bleed: el track ocupa el viewport entero aunque la columna que envuelve
		   al bloque tenga paddings — sin esto las tarjetas quedan pequeñas (82% de ~280px) */
		margin-inline: calc(50% - 50vw);
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
		scrollbar-width: none;
	}
	.cce-mobile-slider .kt-post-grid-wrap::-webkit-scrollbar { display: none; }
	.cce-mobile-slider .kt-post-grid-wrap > .kt-blocks-post-grid-item {
		flex: 0 0 78%;
		scroll-snap-align: start;
		min-width: 0;
	}

	/* Pista de swipe del Post Grid: mismo refuerzo visual que jb-mobile-slider
	   (píldora accent arriba-dcha, animada), para que ambos sliders del single
	   hablen igual. Keyframes propios para no depender del CSS del Customizer. */
	.cce-mobile-slider { position: relative; }
	.cce-mobile-slider::after {
		content: "\27F7"; /* ⟷ */
		position: absolute;
		right: 14px;
		top: 14px;
		width: 44px;
		height: 44px;
		border-radius: 16px;
		display: grid;
		place-items: center;
		font-size: 20px;
		line-height: 1;
		color: var(--global-palette9, #fff);
		background: color-mix(in srgb, var(--cce-brand) 85%, transparent);
		box-shadow: 0 5px 6px rgba(0, 0, 0, .18);
		-webkit-backdrop-filter: blur(1px);
		backdrop-filter: blur(1px);
		pointer-events: none;
		z-index: 10;
		animation: cceSwipeHintSingle 1.2s ease-in-out infinite;
	}
}

@keyframes cceSwipeHintSingle {
	0%, 100% { transform: translateX(0);   opacity: .85; }
	50%      { transform: translateX(8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.cce-mobile-slider::after { animation: none; }
}

/* Galería "Más imágenes" (la pinta el shortcode [cce_mas_imagenes], no es un bloque).
   Encabezado y visibilidad de la sección (toggle mas_fotos): en la plantilla Kadence.
   Solo salen pares COMPLETOS, apilados: sin slides vacías con 1 solo par. */
.cce-gal { max-width: var(--global-content-width, 1140px); margin: 0 auto;
	padding-top: 45px; /* mismo aire que separa los bloques de fotos previos (par principal/perfil 1) */ }
/* Los valores replican los MEDIDOS en el bloque del par principal (.cce-media) para que
   los pares del shortcode se vean como las tarjetas de los bloques nativos:
   gap 32px · radio 20px · ratio 4:3 con cover (alturas iguales) · pill 8px 16px a 14.4px */
.cce-gal__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 0 0 32px; }
.cce-gal__pair:last-child { margin-bottom: 0; }
.cce-gal__fig { position: relative; margin: 0; }
.cce-gal__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto;
	display: block; border-radius: 20px; }
.cce-gal__tag { position: absolute; top: 12px; left: 12px; z-index: 2;
	font-size: 14.4px; font-weight: 400; padding: 8px 16px; border-radius: 20px; line-height: 1.4; }
.cce-gal__tag.is-antes   { background: #fff; color: #555; }
.cce-gal__tag.is-despues { background: var(--cce-brand); color: #fff; }

/* Móvil: cada foto a ancho completo, igual que Kadence apila las columnas del par
   principal y del perfil 1 (dos fotos de 124px lado a lado no dejan ver nada) */
@media (max-width: 767px) {
	.cce-gal__pair { grid-template-columns: 1fr; }
}

/* Escritorio: el par al 80% del ancho, centrado (fotos un punto más pequeñas
   que las de los bloques nativos, con aire a los lados) */
@media (min-width: 768px) {
	.cce-gal__pair { max-width: 85%; margin-inline: auto; }
}

/* ── Lightbox (cce-single.js) ──
   Dispara en cualquier <img> dentro de .cce-lightbox: las del shortcode la llevan de
   serie; en los bloques del editor (par principal, perfil 1) la clase la pone el usuario. */
.cce-lightbox img { cursor: zoom-in; }
.cce-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, .8); /* negro clásico translúcido */
}
.cce-lb.is-open { display: flex; }
.cce-lb__img {
	max-width: min(92vw, 1400px);
	max-height: 90vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.cce-lb__close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center; /* centra el glifo × de verdad (con line-height quedaba bajo) */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.cce-lb__close:hover { background: rgba(255, 255, 255, .28); }

/* Breadcrumb de Rank Math en el hero del caso (el usuario inserta el shortcode
   [rank_math_breadcrumb] en la plantilla Kadence). El hero es oscuro → blancos
   translúcidos; este CSS solo carga en singles de caso_exito, no hace falta scope. */
.rank-math-breadcrumb { text-align: center; font-size: 13px; line-height: 1.5; }
.rank-math-breadcrumb p { margin: 0; }
.rank-math-breadcrumb a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.rank-math-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.rank-math-breadcrumb .separator { color: rgba(255, 255, 255, .45); margin: 0 3px; }
.rank-math-breadcrumb .last { color: #fff; }
/* Móvil: la miga se convierte en un "volver" tipo app. "Inicio" saca del flujo de
   casos en pantalla pequeña y el título duplicaría el H del hero, así que se ocultan
   ambos (con los separadores) y el tramo "Casos de éxito" se viste de botón de
   retroceso (chevrón + pill, alineado a la izquierda). En escritorio, miga completa.
   Estructura Rank Math: <a>Inicio</a><sep/><a>Casos de éxito</a><sep/><span.last> */
@media (max-width: 767px) {
	/* translate: mueve SOLO el botón (más pegado al borde izq. y bajado hacia el
	   contenido) sin alterar el layout del resto del hero */
	.rank-math-breadcrumb { text-align: left; transform: translate(-14px, 18px); }
	.rank-math-breadcrumb p > a:first-child,
	.rank-math-breadcrumb .separator,
	.rank-math-breadcrumb .last { display: none; }
	.rank-math-breadcrumb p > a:nth-of-type(2) {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 40px; /* área táctil cómoda */
		padding: 0 16px 0 11px;
		border-radius: 999px;
		background: rgba(255, 255, 255, .14);
		color: #fff;
	}
	.rank-math-breadcrumb p > a:nth-of-type(2)::before {
		content: "‹";
		font-size: 24px;
		line-height: 1;
		margin-top: -3px; /* centra ópticamente el chevrón con el texto */
	}
}