/* =========================================================
   Footer propio — compacto a propósito, NUNCA 4-5 columnas.
   Reutiliza los mismos tokens de color que header/ficha/listado
   (--ctc-accent, --ctc-border, --ctc-text-muted...) para no crear
   una paleta nueva; se redeclaran aquí porque el footer puede vivir
   fuera de cualquier .ctc-ficha/.ctc-listado (aparece en TODO el
   sitio, incluidas páginas del tema sin ninguna de esas clases).
   ========================================================= */
.ctc-footer {
	--ctc-accent: #1428a0;
	--ctc-text: #12141a;
	--ctc-text-muted: #6b7280;
	--ctc-border: #e4e7ee;
	--ctc-surface-2: #f3f5f9;

	background: var(--ctc-surface-2);
	border-top: 1px solid var(--ctc-border);
	padding: 22px 16px 18px;
}
.ctc-footer-inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.ctc-footer-marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.ctc-footer-marca-fila {
	display: flex;
	align-items: center;
	gap: 8px;
}
/* FASE 4.2: logo real, nunca deforma ni domina — alto fijo chico,
   ancho automático (mantiene proporción real del PNG). object-fit
   por si el archivo no fuera exactamente cuadrado. */
.ctc-footer-logo {
	height: 26px;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
	border-radius: 6px;
}
.ctc-footer-marca-nombre {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ctc-text);
}
.ctc-footer-slogan {
	font-size: 11.5px;
	color: var(--ctc-text-muted);
}

/* Redes: fila de íconos circulares chicos — target táctil real de
   36px (aunque el ícono visual sea más chico) para que sea cómodo en
   móvil sin verse pesado. */
.ctc-footer-redes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.ctc-footer-red-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--ctc-border);
	background: #fff;
	color: var(--ctc-red-color, var(--ctc-text-muted));
	transition: transform 165ms ease, box-shadow 165ms ease, border-color 165ms ease, background-color 165ms ease;
	animation: ctc-red-respirar var(--ctc-red-ritmo, 3.2s) ease-in-out infinite;
	animation-delay: var(--ctc-red-retraso, 0s);
}
.ctc-footer-red-icono svg {
	width: 17px;
	height: 17px;
}
.ctc-footer-red-icono:hover,
.ctc-footer-red-icono:focus-visible,
.ctc-footer-red-icono:active {
	animation-play-state: paused;
}
.ctc-footer-red-icono:hover {
	transform: translateY(-2px) scale(1.05);
	border-color: var(--ctc-red-color, var(--ctc-accent));
	box-shadow: 0 4px 10px rgba(16, 24, 40, 0.14);
	background: #fff;
}
.ctc-footer-red-icono:active {
	transform: translateY(0) scale(0.95);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}
.ctc-footer-red-icono:focus-visible {
	outline: 2px solid var(--ctc-red-color, var(--ctc-accent));
	outline-offset: 2px;
}
/* FASE 4.3 — "respiración" muy discreta: SOLO escala (1 -> ~1.035) +
	una sombra apenas más presente en el pico, nunca desplazamiento ni
	rebote. La amplitud/ritmo real por red vive en --ctc-red-ritmo
	(inline, PHP) para que WhatsApp/Telegram respiren un poco más
	perceptible y Facebook/Instagram/TikTok casi imperceptible, sin
	necesitar un keyframe distinto por red. */
@keyframes ctc-red-respirar {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(16, 24, 40, 0);
	}
	50% {
		transform: scale(1.035);
		box-shadow: 0 2px 6px rgba(16, 24, 40, 0.10);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ctc-footer-red-icono {
		animation: none;
	}
}
/* Grupo de Facebook: FASE 4.3 — mismo contenedor EXACTO que el resto
   (mismo blanco, mismo borde, mismo diámetro, misma sombra/animación) —
   antes tenía un fondo gris propio que lo hacía ver distinto/opaco;
   ahora lo único que distingue "Grupo de Facebook" es el pictograma
   (dos personas) que ya trae su propio SVG, nunca el contenedor. */

.ctc-footer-afiliados {
	margin: 0;
	max-width: 560px;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--ctc-text-muted);
}

.ctc-footer-legales {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 14px;
}
.ctc-footer-legales a {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ctc-text-muted);
	text-decoration: none;
}
.ctc-footer-legales a:hover {
	color: var(--ctc-accent);
	text-decoration: underline;
}

.ctc-footer-copyright {
	margin: 4px 0 0;
	font-size: 10.5px;
	color: var(--ctc-text-muted);
}

/* FASE 4.3 — red de seguridad para el copyright NATIVO de Astra.
   Prioridad 1 (hook/filtro) vive en CTC_Footer::init(); esta regla es
   la prioridad 2 ("si no existe una vía limpia") — selector
   ESPECÍFICO únicamente para el bloque de copyright de Astra
   (.ast-footer-copyright es la clase real que Astra usa tanto en el
   footer clásico como en el Footer Builder), nunca un selector
   genérico de "todo el footer del tema" que pudiera esconder otra
   cosa por accidente. */
.ast-footer-copyright {
	display: none !important;
}

/* FASE 4.2: cuando la barra inferior fija móvil existe en la página
   (Home), reserva un poco de aire extra abajo del footer para que no
   quede tapado al hacer scroll hasta el final — :has() se degrada de
   forma segura (simplemente no aplica) en navegadores que no lo
   soportan, sin romper nada. Solo aplica <1024px, que es cuando esa
   barra existe. */
@media (max-width: 1023px) {
	body:has(.ctc-home-barra-inferior) .ctc-footer {
		padding-bottom: 92px;
	}
}

/* Desktop: fila única en vez de columna apilada, sin altura extra —
   sigue siendo compacto, solo distribuye mejor el ancho disponible. */
@media (min-width: 760px) {
	.ctc-footer-inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		row-gap: 10px;
	}
	.ctc-footer-marca {
		align-items: flex-start;
		flex: 0 0 auto;
	}
	.ctc-footer-redes {
		order: 2;
	}
	.ctc-footer-afiliados {
		flex-basis: 100%;
		max-width: none;
		text-align: center;
		order: 4;
		padding-top: 6px;
		border-top: 1px solid var(--ctc-border);
	}
	.ctc-footer-legales {
		order: 5;
		flex-basis: 100%;
		justify-content: center;
	}
	.ctc-footer-copyright {
		order: 6;
		flex-basis: 100%;
		text-align: center;
	}
}

/* =========================================================
   WHATSAPP FLOTANTE — AJUSTE VISUAL FINAL POR BREAKPOINT.
   Píldora fixed, independiente del flujo del footer (vive en
   wp_footer, ver CTC_Footer::render_whatsapp_flotante). Arrastrable
   con Pointer Events (ver ctc-footer.js) — el CSS solo define
   apariencia y posición INICIAL; el drag, la detección click-vs-drag
   y los límites de viewport NO se tocaron en esta fase.
   Móvil vs desktop tienen tamaños DISTINTOS a propósito (no una
   copia escalada): las reglas base de abajo son el punto de partida
   compacto (móvil, ligeramente más grande que la fase anterior), y el
   bloque @media (min-width:1024px) al final redefine icono,
   tipografía, padding y botón cerrar con sus propios valores — nunca
   un simple factor de escala.
   ========================================================= */
.ctc-whatsapp-flotante {
	--ctc-accent: #1428a0;
	--ctc-border: #e4e7ee;
	--ctc-text: #12141a;
	--ctc-text-muted: #6b7280;
	--ctc-whatsapp: #25d366;

	position: fixed;
	z-index: 55; /* debajo del menú/drawer (65-66) y de la barra inferior (60), encima del contenido normal */
	left: 12px;
	bottom: 92px;
	width: max-content;
	max-width: min(85vw, 248px);
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--ctc-border);
	border-radius: 999px;
	box-shadow: 0 3px 12px rgba(16, 24, 40, 0.14);
	padding: 8px 12px 8px 7px;
	opacity: 0;
	transform: translateY(10px) scale(0.96);
	transition: opacity 220ms ease, transform 220ms ease, box-shadow 165ms ease;
	animation: ctc-whatsapp-respirar 3s ease-in-out infinite;
	animation-delay: 1.5s; /* no empieza a "respirar" hasta que ya terminó de entrar */
	touch-action: none; /* el arrastre lo maneja JS via Pointer Events, sin que el navegador interprete scroll/zoom sobre la píldora */
	user-select: none;
	cursor: grab;
}
.ctc-whatsapp-flotante[hidden] {
	display: none;
}
.ctc-whatsapp-flotante.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.ctc-whatsapp-flotante:hover,
.ctc-whatsapp-flotante:focus-within {
	animation-play-state: paused;
}
/* Mientras se arrastra: sin transición (el movimiento debe seguir al
   dedo/mouse 1:1, sin "lag"), respiración pausada, sombra un poco más
   presente para dar sensación de "levantado". El JS agrega esta clase
   en pointerdown y la quita en pointerup/cancel — sin cambios en esta
   fase. */
.ctc-whatsapp-flotante.is-arrastrando {
	animation-play-state: paused;
	transition: none;
	cursor: grabbing;
	box-shadow: 0 8px 22px rgba(16, 24, 40, 0.22);
}
.ctc-whatsapp-flotante-link {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
/* ÁREA DEL ÍCONO — identidad WhatsApp sobria: verde translúcido
   (nunca sólido/pesado) + blur de fondo + halo muy discreto. El
   blur es principalmente estético aquí (el fondo detrás del círculo
   suele ser la propia píldora blanca), pero queda listo si algún día
   la píldora se vuelve semitransparente. Se degrada con elegancia:
   sin soporte de backdrop-filter, el fondo verde translúcido solo se
   ve un poco menos "vidrioso", nunca se rompe. */
.ctc-whatsapp-flotante-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
	background: rgba(37, 211, 102, 0.16);
	-webkit-backdrop-filter: blur(6px) saturate(140%);
	backdrop-filter: blur(6px) saturate(140%);
	box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.18), 0 0 10px rgba(37, 211, 102, 0.16);
	color: var(--ctc-whatsapp);
	width: 32px;
	height: 32px;
}
.ctc-whatsapp-flotante-icono svg {
	width: 19px;
	height: 19px;
}
.ctc-whatsapp-flotante-texto {
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 1.2;
	min-width: 0;
}
.ctc-whatsapp-flotante-titulo {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ctc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ctc-whatsapp-flotante-sub {
	font-size: 9.5px;
	color: var(--ctc-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Botón cerrar — chico y circular, alineado al centro vertical de la
   píldora. Área táctil ampliada con pseudo-elemento invisible, nunca
   agrandando el círculo visual. */
.ctc-whatsapp-flotante-cerrar {
	position: relative;
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--ctc-border);
	background: #fff;
	color: var(--ctc-text-muted);
	padding: 0;
	margin-left: 2px;
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.ctc-whatsapp-flotante-cerrar::before {
	content: '';
	position: absolute;
	inset: -10px; /* área táctil real ≈37px, sin agrandar el círculo visual */
}
.ctc-whatsapp-flotante-cerrar svg {
	width: 7px;
	height: 7px;
	position: relative;
}
.ctc-whatsapp-flotante-cerrar:hover {
	color: var(--ctc-text);
	border-color: var(--ctc-text-muted);
	background: var(--ctc-surface-2, #f3f5f9);
}
.ctc-whatsapp-flotante-cerrar:focus-visible {
	outline: 2px solid var(--ctc-accent);
	outline-offset: 2px;
}
/* Respiración — AJUSTE VISUAL FINAL: un poco más perceptible que la
   fase anterior (escala hasta 1.03, halo verde más presente en el
   pico), pero SIGUE siendo solo escala + sombra: sin desplazamiento
   vertical, sin rebote (easing ease-in-out, un solo pico suave a la
   mitad del ciclo), ciclo de 3s. */
@keyframes ctc-whatsapp-respirar {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 3px 12px rgba(16, 24, 40, 0.14);
	}
	50% {
		transform: scale(1.03);
		box-shadow: 0 6px 18px rgba(37, 211, 102, 0.26);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ctc-whatsapp-flotante {
		animation: none;
		transition: opacity 220ms ease;
	}
}

/* Posición en escritorio (sin cambios de esta fase: sigue abajo-
   derecha, separada del botón "volver arriba") + ESCALA PROPIA para
   desktop — nunca los mismos números de móvil estirados: ícono
   claramente más grande, tipografía mayor, más aire, X proporcional. */
@media (min-width: 1024px) {
	.ctc-whatsapp-flotante {
		left: auto;
		right: 24px;
		bottom: 92px;
		max-width: 296px;
		gap: 12px;
		padding: 12px 18px 12px 10px;
	}
	.ctc-whatsapp-flotante-link {
		gap: 12px;
	}
	.ctc-whatsapp-flotante-icono {
		width: 44px;
		height: 44px;
	}
	.ctc-whatsapp-flotante-icono svg {
		width: 26px;
		height: 26px;
	}
	.ctc-whatsapp-flotante-titulo {
		font-size: 14px;
	}
	.ctc-whatsapp-flotante-sub {
		font-size: 11.5px;
	}
	.ctc-whatsapp-flotante-cerrar {
		width: 22px;
		height: 22px;
		margin-left: 4px;
	}
	.ctc-whatsapp-flotante-cerrar svg {
		width: 9px;
		height: 9px;
	}
}