/*
Theme Name: Check-in Abierto
Theme URI: https://checkinabierto.com/
Author: Check-in Abierto
Author URI: https://checkinabierto.com/
Description: Tema independiente para Check-in Abierto. Incluye portada con parallax, blog dinámico, entradas individuales y opciones de edición desde el Personalizador de WordPress.
Version: 1.15.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: checkin-abierto
*/

/* Los estilos principales se cargan desde assets/css según la plantilla activa. */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.floating-whatsapp {
	position: fixed;
	right: max(22px, env(safe-area-inset-right));
	bottom: max(22px, env(safe-area-inset-bottom));
	z-index: 80;
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	border: 4px solid rgba(255, 255, 255, .92);
	border-radius: 50%;
	color: #fff;
	background: #25d366;
	box-shadow: 0 16px 36px rgba(10, 74, 45, .28), 0 6px 14px rgba(4, 52, 111, .16);
	isolation: isolate;
	overflow: visible;
	transition: transform .22s ease, box-shadow .22s ease;
}

.floating-whatsapp::before {
	content: "";
	position: absolute;
	inset: -10px;
	z-index: -1;
	border: 1px solid rgba(37, 211, 102, .42);
	border-radius: 50%;
	animation: cia-whatsapp-pulse 2.8s ease-out infinite;
}

.floating-whatsapp:hover {
	transform: translateY(-4px) scale(1.035);
	box-shadow: 0 20px 42px rgba(10, 74, 45, .33), 0 8px 18px rgba(4, 52, 111, .18);
}

.floating-whatsapp:focus-visible { outline: 4px solid #ffd34e; outline-offset: 4px; }
.floating-whatsapp svg { width: 42px; height: 42px; }
.floating-whatsapp img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }

.site-sparkles {
	position: fixed;
	inset: 0;
	z-index: 18;
	pointer-events: none;
	overflow: hidden;
}

.site-sparkle {
	--sparkle-color: #ffd34e;
	--sparkle-size: 15px;
	--sparkle-duration: 7s;
	position: absolute;
	width: var(--sparkle-size);
	height: var(--sparkle-size);
	background: var(--sparkle-color);
	clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
	filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sparkle-color) 58%, transparent));
	opacity: .72;
	animation: cia-sparkle-float var(--sparkle-duration) ease-in-out infinite;
}

.site-sparkle-1 { top: 14%; left: 7%; --sparkle-size: 12px; --sparkle-duration: 7.4s; }
.site-sparkle-2 { top: 25%; left: 88%; --sparkle-color: #00bfc7; --sparkle-size: 10px; --sparkle-duration: 8.3s; animation-delay: -2.2s; }
.site-sparkle-3 { top: 43%; left: 4%; --sparkle-color: #ff655c; --sparkle-size: 9px; --sparkle-duration: 6.8s; animation-delay: -4.1s; }
.site-sparkle-4 { top: 57%; left: 93%; --sparkle-size: 17px; --sparkle-duration: 9.1s; animation-delay: -1.5s; }
.site-sparkle-5 { top: 76%; left: 11%; --sparkle-color: #5845d8; --sparkle-size: 11px; --sparkle-duration: 7.9s; animation-delay: -5s; }
.site-sparkle-6 { top: 87%; left: 78%; --sparkle-color: #00bfc7; --sparkle-size: 8px; --sparkle-duration: 8.6s; animation-delay: -3.3s; }
.site-sparkle-7 { top: 9%; left: 67%; --sparkle-color: #fff; --sparkle-size: 8px; --sparkle-duration: 6.7s; animation-delay: -1.8s; }
.site-sparkle-8 { top: 67%; left: 53%; --sparkle-color: #fff; --sparkle-size: 7px; --sparkle-duration: 9.4s; animation-delay: -6.1s; }
.site-sparkle-9 { top: 35%; left: 31%; --sparkle-color: #ffd34e; --sparkle-size: 7px; --sparkle-duration: 8.8s; animation-delay: -4.7s; }
.site-sparkle-10 { top: 92%; left: 35%; --sparkle-color: #ff655c; --sparkle-size: 8px; --sparkle-duration: 7.2s; animation-delay: -2.8s; }

@keyframes cia-sparkle-float {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.72); opacity: .24; }
	45% { transform: translate3d(8px, -16px, 0) rotate(32deg) scale(1); opacity: .78; }
	70% { transform: translate3d(-4px, -9px, 0) rotate(55deg) scale(.86); opacity: .52; }
}

@keyframes cia-whatsapp-pulse {
	0% { transform: scale(.82); opacity: .72; }
	80%, 100% { transform: scale(1.34); opacity: 0; }
}

@media (max-width: 760px) {
	.floating-whatsapp {
		right: max(16px, env(safe-area-inset-right));
		bottom: max(16px, env(safe-area-inset-bottom));
		width: 62px;
		height: 62px;
	}
	.floating-whatsapp svg { width: 36px; height: 36px; }
	.site-sparkle-3, .site-sparkle-6, .site-sparkle-8, .site-sparkle-10 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.floating-whatsapp::before { display: none; }
	.site-sparkle { animation: none; opacity: .38; }
}
