/* =========================================================
   Widget del clima animado + ojito de visitas
   Todo con transform/opacity, ligero para la GPU.
   Solo se carga en la portada.
   ========================================================= */

/* --- Widget del clima --- */

.dato--clima {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	text-align: left;
	overflow: hidden;
}

.clima__escena {
	position: relative;
	width: 64px;
	height: 64px;
	flex: none;
}

.clima__datos {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	min-width: 0;
}

.clima__temp {
	font-family: 'Inter', sans-serif;
	font-size: 1.9rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.clima__desc {
	font-family: 'Barlow', sans-serif;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
}

.clima__lugar {
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.clima__extra {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.35rem;
}

.clima__uv,
.clima__humedad {
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.15rem 0.5rem;
	border-radius: 9999px;
	white-space: nowrap;
}

.clima__humedad {
	background: rgba(125, 199, 240, 0.14);
	color: #cfe9fb;
}

.clima__uv--bajo      { background: rgba(88, 214, 141, 0.18); color: #b9f0cd; }
.clima__uv--moderado  { background: rgba(244, 208, 63, 0.18); color: #f7e9ab; }
.clima__uv--alto      { background: rgba(240, 160, 90, 0.20); color: #f7d0ab; }
.clima__uv--muy-alto  { background: rgba(231, 76, 60, 0.20);  color: #ffc0b8; }
.clima__uv--extremo   { background: rgba(155, 89, 182, 0.28); color: #eac6f7; }

/* Cuando el UV es alto o peor, el badge late para llamar la atención */
.clima__uv--alto,
.clima__uv--muy-alto,
.clima__uv--extremo {
	animation: uv-late 1.8s ease-in-out infinite;
}

@keyframes uv-late {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

/* --- Escena base --- */

.esc {
	position: absolute;
	inset: 0;
}

/* ---------- SOL ---------- */

.sol {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%);
}

.sol__nucleo {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #ffe9a8, #ffb43d);
	box-shadow: 0 0 14px rgba(255, 180, 61, 0.7);
	animation: sol-latido 3s ease-in-out infinite;
}

.sol__rayos {
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	background:
		conic-gradient(from 0deg,
			rgba(255, 190, 80, 0.9) 0 6deg, transparent 6deg 45deg,
			rgba(255, 190, 80, 0.9) 45deg 51deg, transparent 51deg 90deg,
			rgba(255, 190, 80, 0.9) 90deg 96deg, transparent 96deg 135deg,
			rgba(255, 190, 80, 0.9) 135deg 141deg, transparent 141deg 180deg,
			rgba(255, 190, 80, 0.9) 180deg 186deg, transparent 186deg 225deg,
			rgba(255, 190, 80, 0.9) 225deg 231deg, transparent 231deg 270deg,
			rgba(255, 190, 80, 0.9) 270deg 276deg, transparent 276deg 315deg,
			rgba(255, 190, 80, 0.9) 315deg 321deg, transparent 321deg 360deg);
	-webkit-mask: radial-gradient(circle, transparent 55%, #000 56%);
	mask: radial-gradient(circle, transparent 55%, #000 56%);
	animation: gira 14s linear infinite;
}

@keyframes sol-latido {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

@keyframes gira {
	to { transform: rotate(360deg); }
}

/* ---------- LUNA ---------- */

.luna {
	position: absolute;
	top: 42%;
	left: 50%;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fdfbe4, #d8d6c0);
	box-shadow: 0 0 14px rgba(220, 224, 240, 0.5);
	animation: luna-flota 5s ease-in-out infinite;
}

.luna__crater {
	position: absolute;
	border-radius: 50%;
	background: rgba(160, 160, 140, 0.4);
}

.luna__crater--1 { width: 6px; height: 6px; top: 6px; left: 7px; }
.luna__crater--2 { width: 4px; height: 4px; top: 15px; left: 16px; }

@keyframes luna-flota {
	0%, 100% { transform: translate(-50%, -50%); }
	50%      { transform: translate(-50%, -56%); }
}

.estrella {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #fff;
	animation: titila 2s ease-in-out infinite;
}

.estrella--1 { top: 10px; left: 10px; animation-delay: 0s; }
.estrella--2 { top: 44px; left: 46px; animation-delay: 0.6s; }
.estrella--3 { top: 48px; left: 12px; animation-delay: 1.2s; }

@keyframes titila {
	0%, 100% { opacity: 0.2; transform: scale(0.7); }
	50%      { opacity: 1;   transform: scale(1); }
}

/* ---------- NUBES ---------- */

.nube {
	position: absolute;
	border-radius: 9999px;
	background: linear-gradient(180deg, #ffffff, #d6dde6);
}

.nube::before,
.nube::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: inherit;
}

.nube--1 {
	width: 26px;
	height: 10px;
	bottom: 14px;
	right: 6px;
	animation: nube-desliza 6s ease-in-out infinite;
}

.nube--1::before { width: 12px; height: 12px; top: -6px; left: 4px; }
.nube--1::after  { width: 9px;  height: 9px;  top: -4px; left: 14px; }

.nube--2 {
	width: 20px;
	height: 8px;
	top: 12px;
	left: 6px;
	opacity: 0.8;
	animation: nube-desliza 7s ease-in-out infinite reverse;
}

.nube--2::before { width: 10px; height: 10px; top: -5px; left: 3px; }
.nube--2::after  { width: 8px;  height: 8px;  top: -3px; left: 11px; }

.nube--grande {
	width: 38px;
	height: 14px;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: nube-flota 4s ease-in-out infinite;
}

.nube--grande::before { width: 17px; height: 17px; top: -9px; left: 5px; }
.nube--grande::after  { width: 13px; height: 13px; top: -6px; left: 19px; }

.nube--oscura {
	background: linear-gradient(180deg, #9aa4b0, #6b7480);
}

@keyframes nube-desliza {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(-5px); }
}

@keyframes nube-flota {
	0%, 100% { transform: translate(-50%, -50%); }
	50%      { transform: translate(-54%, -50%); }
}

/* ---------- LLUVIA ---------- */

.gota {
	position: absolute;
	width: 2px;
	height: 8px;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(125, 199, 240, 0.2), #7dc7f0);
	top: 38px;
	opacity: 0;
	animation: cae 1.1s linear infinite;
}

.gota--1 { left: 22px; animation-delay: 0s; }
.gota--2 { left: 30px; animation-delay: 0.35s; }
.gota--3 { left: 38px; animation-delay: 0.15s; }
.gota--4 { left: 46px; animation-delay: 0.55s; }

@keyframes cae {
	0%   { transform: translateY(0);    opacity: 0; }
	20%  { opacity: 1; }
	100% { transform: translateY(16px); opacity: 0; }
}

/* ---------- TORMENTA ---------- */

.rayo {
	position: absolute;
	top: 34px;
	left: 30px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 12px solid #ffd23d;
	filter: drop-shadow(0 0 4px rgba(255, 210, 61, 0.9));
	opacity: 0;
	animation: relampago 2.4s steps(1) infinite;
}

@keyframes relampago {
	0%, 100% { opacity: 0; }
	48%      { opacity: 0; }
	50%      { opacity: 1; }
	54%      { opacity: 0.2; }
	57%      { opacity: 1; }
	62%      { opacity: 0; }
}

/* ---------- NIEVE ---------- */

.copo {
	position: absolute;
	width: 5px;
	height: 5px;
	top: 36px;
	color: #fff;
	opacity: 0;
	animation: nieva 2.4s linear infinite;
}

.copo::before {
	content: "❄";
	font-size: 8px;
	line-height: 1;
}

.copo--1 { left: 24px; animation-delay: 0s; }
.copo--2 { left: 34px; animation-delay: 0.8s; }
.copo--3 { left: 44px; animation-delay: 1.6s; }

@keyframes nieva {
	0%   { transform: translateY(0) rotate(0);      opacity: 0; }
	20%  { opacity: 1; }
	100% { transform: translateY(18px) rotate(180deg); opacity: 0; }
}

/* ---------- NIEBLA ---------- */

.niebla__linea {
	position: absolute;
	left: 12px;
	width: 40px;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.5);
	animation: niebla-mueve 3s ease-in-out infinite;
}

.niebla__linea:nth-child(2) { top: 40px; animation-delay: 0s; }
.niebla__linea:nth-child(3) { top: 47px; animation-delay: 0.5s; width: 34px; }
.niebla__linea:nth-child(4) { top: 54px; animation-delay: 1s; width: 38px; }

@keyframes niebla-mueve {
	0%, 100% { transform: translateX(-4px); opacity: 0.4; }
	50%      { transform: translateX(4px);  opacity: 0.9; }
}

/* --- Ojito de visitas --- */

.dato__valor--ojo {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.ojo {
	position: relative;
	width: 30px;
	height: 30px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ojo__globo {
	position: relative;
	width: 30px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ojo__iris {
	position: relative;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, #5cb8ea 0 40%, #2c6f9c 41% 100%);
	/* La mirada se pasea de lado a lado */
	animation: ojo-mira 5s ease-in-out infinite;
}

.ojo__iris::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #10233a;
	transform: translate(-50%, -50%);
}

.ojo__brillo {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	z-index: 2;
}

/* Párpado que baja para parpadear */
.ojo__parpado {
	position: absolute;
	top: 0;
	left: 50%;
	width: 32px;
	height: 22px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: #12151b;
	transform-origin: top;
	animation: ojo-parpadea 5.5s ease-in-out infinite;
}

@keyframes ojo-mira {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); }
	60%      { transform: translateX(4px); }
	80%      { transform: translateX(0); }
}

@keyframes ojo-parpadea {
	0%, 92%, 100% { transform: translateX(-50%) scaleY(0); }
	95%           { transform: translateX(-50%) scaleY(1); }
	97%           { transform: translateX(-50%) scaleY(0); }
}

/* --- Móvil --- */

@media (max-width: 860px) {
	.dato--clima {
		justify-content: flex-start;
	}
}

/* --- Movimiento reducido: se congelan las animaciones --- */

@media (prefers-reduced-motion: reduce) {
	.sol__nucleo, .sol__rayos, .luna, .estrella, .nube, .nube--grande,
	.gota, .rayo, .copo, .niebla__linea, .clima__uv,
	.ojo__iris, .ojo__parpado {
		animation: none !important;
	}
	.ojo__parpado { transform: translateX(-50%) scaleY(0); }
}