/* =========================================================================
 * EcoConsciencia — Estilos de los juegos y componentes de apoyo
 * Tokens de color según el análisis (§2.1). Fuentes: Baloo 2 + Nunito.
 * ========================================================================= */
:root {
	--eco-dark: #16332A;
	--eco-strong: #2C7049;
	--eco-mid: #3F8F5F;
	--eco-sage: #F4F7F0;
	--eco-soft: #E3F1E4;
	--eco-crema: #FBF9F3;
	--eco-amber: #F0A93A;
	--eco-blue: #3E86AE;
	--eco-cafe: #A9764C;
	--eco-red: #DD5B45;
	--eco-border: #E1E4D9;
	--eco-text: #1E2A22;
	--eco-muted: #5C6E63;
}

/* ---------- Tipografía base de la zona de juegos ---------- */
.eco-juegos-wrap,
.eco-juegos-wrap * {
	box-sizing: border-box;
}
.eco-juegos-wrap {
	font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
	color: var(--eco-text);
	max-width: 960px;
	margin: 0 auto;
	padding: 8px;
}
.eco-h2 {
	font-family: 'Baloo 2', ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 4vw, 30px);
	color: var(--eco-dark);
	margin: 0 0 6px;
}
.eco-sub {
	color: var(--eco-muted);
	margin: 0 0 24px;
	font-size: 16px;
}

/* ---------- Botones ---------- */
.eco-btn {
	background: var(--eco-mid);
	color: #fff;
	font: 800 14px/1 'Nunito', sans-serif;
	padding: 12px 22px;
	border-radius: 12px;
	border: 0;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease;
}
.eco-btn:hover { background: var(--eco-strong); transform: translateY(-2px); }
.eco-btn-ghost {
	background: transparent;
	color: var(--eco-strong);
	border: 1px solid var(--eco-border);
}
.eco-btn-ghost:hover { background: var(--eco-sage); }
.eco-link {
	background: none;
	border: 0;
	color: var(--eco-strong);
	font: 800 14px 'Nunito', sans-serif;
	cursor: pointer;
	padding: 6px 0;
}
.eco-link:hover { text-decoration: underline; }

/* ---------- Tarjetas ---------- */
.eco-card {
	background: #fff;
	border: 1px solid var(--eco-border);
	border-radius: 16px;
	padding: 24px;
	transition: box-shadow .15s ease, transform .15s ease;
}
.eco-card:hover { box-shadow: 0 8px 24px rgba(22, 51, 42, .08); }

/* ---------- Grid de juegos (2x2) ---------- */
.eco-grid-juegos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 768px) {
	.eco-grid-juegos { grid-template-columns: 1fr 1fr; }
}
.eco-card-juego { display: flex; flex-direction: column; align-items: flex-start; }
.eco-icono { font-size: 34px; margin-bottom: 8px; }
.eco-card-titulo {
	font-family: 'Baloo 2', sans-serif;
	font-weight: 700;
	font-size: 19px;
	margin: 0 0 6px;
	color: var(--eco-dark);
}
.eco-card-desc { color: var(--eco-muted); font-size: 15px; margin: 0 0 16px; flex: 1; }

/* ---------- Panel de juego (cabecera + área) ---------- */
.eco-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.eco-panel-titulo { font-family: 'Baloo 2', sans-serif; font-size: 18px; margin: 0; }
.eco-marcador {
	background: var(--eco-soft);
	color: var(--eco-strong);
	font-weight: 800;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 15px;
}
.eco-juego-area {
	background: var(--eco-crema);
	border: 1px solid var(--eco-border);
	border-radius: 24px;
	padding: 24px;
	min-height: 300px;
}

/* ---------- Selector de niveles ---------- */
.eco-niveles { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .eco-niveles { grid-template-columns: repeat(3, 1fr); } }
.eco-nivel { text-align: left; cursor: pointer; border: 1px solid var(--eco-border); }
.eco-nivel:hover { border-color: var(--eco-mid); transform: translateY(-2px); }
.eco-nivel-emoji { font-size: 28px; }
.eco-nivel-nombre { font-family: 'Baloo 2', sans-serif; font-weight: 700; margin: 6px 0 4px; }
.eco-nivel-desc { color: var(--eco-muted); font-size: 14px; }

/* ---------- Clasifica los residuos ---------- */
.eco-objeto {
	text-align: center;
	background: #fff;
	border: 1px solid var(--eco-border);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 16px;
}
.eco-objeto-emoji { font-size: 56px; line-height: 1; }
.eco-objeto-nombre { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 20px; margin-top: 8px; }
.eco-objeto-progreso { color: var(--eco-muted); font-size: 13px; margin-top: 6px; }
.eco-ok { animation: eco-ok .4s ease; }
.eco-mal { animation: eco-mal .4s ease; }
@keyframes eco-ok { 0% { box-shadow: 0 0 0 0 var(--eco-mid); } 100% { box-shadow: 0 0 0 6px rgba(63,143,95,.25); } }
@keyframes eco-mal { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.eco-botes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .eco-botes { grid-template-columns: repeat(4, 1fr); } }
.eco-bote {
	background: color-mix(in srgb, var(--bcol) 12%, #fff);
	border: 2px solid var(--bcol);
	border-radius: 16px;
	padding: 16px 8px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	transition: transform .12s ease;
}
.eco-bote:hover { transform: translateY(-3px); }
.eco-bote-emoji { font-size: 28px; }
.eco-bote-nombre { font-weight: 800; font-size: 13px; color: var(--eco-text); }

.eco-tiempo { height: 8px; background: var(--eco-border); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.eco-tiempo-fill { height: 100%; width: 100%; background: var(--eco-amber); transition: width 1s linear; }

/* ---------- Quiz ---------- */
.eco-quiz-prog { color: var(--eco-muted); font-size: 13px; margin-bottom: 8px; }
.eco-quiz-q { font-family: 'Baloo 2', sans-serif; font-size: 20px; margin: 0 0 16px; color: var(--eco-dark); }
.eco-quiz-timer { color: var(--eco-red); font-weight: 800; margin-bottom: 12px; }
.eco-quiz-ops { display: grid; gap: 10px; margin-bottom: 12px; }
.eco-quiz-op {
	text-align: left;
	background: #fff;
	border: 1px solid var(--eco-border);
	border-radius: 12px;
	padding: 14px 16px;
	font: 700 15px 'Nunito', sans-serif;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}
.eco-quiz-op:hover:not(:disabled) { border-color: var(--eco-mid); background: var(--eco-sage); }
.eco-quiz-op:disabled { cursor: default; opacity: .9; }
.eco-quiz-op.is-correcta { border-color: var(--eco-mid); background: var(--eco-soft); }
.eco-quiz-op.is-incorrecta { border-color: var(--eco-red); background: #FBE4DF; }
.eco-quiz-exp {
	background: #FCEFD8;
	color: #8A5A06;
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	margin-bottom: 12px;
}

/* ---------- Memorama ---------- */
.eco-memo-info { text-align: center; color: var(--eco-muted); margin-bottom: 16px; font-weight: 700; }
.eco-memo-tablero {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), 1fr);
	gap: 10px;
	max-width: 420px;
	margin: 0 auto;
}
.eco-memo-carta {
	aspect-ratio: 1;
	border: 0;
	border-radius: 12px;
	background: var(--eco-mid);
	cursor: pointer;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease, background .2s ease;
}
.eco-memo-carta .eco-memo-cara { opacity: 0; transition: opacity .12s ease; }
.eco-memo-carta.is-flip { background: #fff; border: 2px solid var(--eco-border); }
.eco-memo-carta.is-flip .eco-memo-cara { opacity: 1; }
.eco-memo-carta.is-done { background: var(--eco-soft); border: 2px solid var(--eco-mid); cursor: default; }
.eco-memo-carta.is-done .eco-memo-cara { opacity: 1; }

/* ---------- Atrapa el reciclable ---------- */
.eco-atrapa-hud { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 8px; }
.eco-atrapa-zona {
	position: relative;
	height: 340px;
	background: linear-gradient(180deg, #E4F0F6, var(--eco-sage));
	border-radius: 16px;
	overflow: hidden;
}
.eco-atrapa-item {
	position: absolute;
	top: -40px;
	border: 0;
	background: none;
	font-size: 32px;
	cursor: pointer;
	padding: 0;
}
.eco-cae { animation-name: eco-cae; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes eco-cae { from { top: -40px; } to { top: 340px; } }

/* ---------- Resultado ---------- */
.eco-resultado { text-align: center; padding: 20px; }
.eco-res-emoji { font-size: 48px; }
.eco-res-titulo { font-family: 'Baloo 2', sans-serif; font-size: 22px; margin: 8px 0; color: var(--eco-dark); }
.eco-res-puntos { font-size: 28px; font-weight: 900; color: var(--eco-mid); }
.eco-res-extra { color: var(--eco-muted); margin: 8px 0; }
.eco-res-total { margin: 12px 0 20px; }
.eco-res-acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Stats del Hero ---------- */
.eco-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.eco-stat {
	background: #fff;
	border: 1px solid var(--eco-border);
	border-radius: 16px;
	padding: 16px 20px;
	text-align: center;
	min-width: 90px;
	font-family: 'Nunito', sans-serif;
}
.eco-stat-num { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 26px; color: var(--eco-dark); }
.eco-stat-lbl { color: var(--eco-muted); font-size: 13px; }

/* ---------- Pastilla de puntos (header) ---------- */
.eco-pill {
	display: inline-block;
	background: var(--eco-soft);
	color: var(--eco-strong);
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14px;
}

/* ---------- Grid de logros ---------- */
.eco-logros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 960px; margin: 0 auto; }
@media (min-width: 768px) { .eco-logros { grid-template-columns: repeat(4, 1fr); } }
.eco-badge {
	background: #fff;
	border: 1px solid var(--eco-border);
	border-radius: 16px;
	padding: 18px;
	text-align: center;
	opacity: .55;
	filter: grayscale(1);
	transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.eco-badge.is-on { opacity: 1; filter: none; border-color: var(--eco-mid); transform: translateY(-2px); }
.eco-badge-emoji { font-size: 32px; }
.eco-badge-nombre { font-family: 'Baloo 2', sans-serif; font-weight: 700; margin: 6px 0 2px; }
.eco-badge-cond { color: var(--eco-muted); font-size: 13px; }
.eco-badge-estado { font-size: 12px; font-weight: 800; margin-top: 6px; color: var(--eco-strong); }
.eco-badge:not(.is-on) .eco-badge-estado { color: var(--eco-muted); }

/* ---------- Cinta del footer ---------- */
.eco-ribbon {
	overflow: hidden;
	background: var(--eco-dark);
	color: #fff;
	font: 800 14px 'Nunito', sans-serif;
	padding: 12px 0;
}
/* Pista con dos copias idénticas: al desplazar -50% el bucle es continuo */
.eco-ribbon-track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	animation: eco-marq 30s linear infinite;
}
.eco-ribbon-track span { display: inline-block; }
@keyframes eco-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Toast ---------- */
.eco-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(20px);
	background: var(--eco-dark);
	color: #fff;
	padding: 12px 20px;
	border-radius: 12px;
	font: 800 14px 'Nunito', sans-serif;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
	z-index: 9999;
}
.eco-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================================
 * Landing a ancho completo ([eco_pagina])
 * ========================================================================= */
.eco-landing {
	font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
	color: var(--eco-text);
}
/* Bandas de sección: rompen el contenedor "boxed" del tema y llegan de borde
   a borde, sin necesidad de cambiar la plantilla de Kadence. */
.eco-seccion {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 64px 20px;
	box-sizing: border-box;
}
.eco-bg-white { background: #fff; }
.eco-bg-sage  { background: var(--eco-sage); }
.eco-bg-crema { background: var(--eco-crema); }
/* Contenido interno centrado y legible */
.eco-inner {
	max-width: 1080px;
	margin: 0 auto;
	width: 100%;
}
/* La zona de juegos hereda el ancho del .eco-inner */
.eco-seccion .eco-juegos-wrap { max-width: none; padding: 0; }

/* Títulos grandes del hero */
.eco-h1 {
	font-family: 'Baloo 2', ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 5vw, 48px);
	color: var(--eco-dark);
	margin: 16px 0;
	line-height: 1.1;
}
.eco-lead { color: var(--eco-muted); font-size: 18px; max-width: 520px; }

/* Hero a dos columnas en pantallas grandes */
.eco-hero { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) {
	.eco-hero { grid-template-columns: 1.1fr .9fr; }
}
/* Zona ilustrada del hero (columna derecha) */
.eco-hero-art {
	position: relative;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Círculo pálido de fondo */
.eco-hero-circle {
	position: absolute;
	width: 340px;
	height: 340px;
	max-width: 90%;
	border-radius: 50%;
	background: radial-gradient(circle, #EDF7EE 0%, #E3F1E4 72%);
	z-index: 0;
}
/* Tarjeta verde, ligeramente desplazada */
.eco-hero-card {
	position: relative;
	z-index: 1;
	width: 300px;
	max-width: 78%;
	height: 210px;
	background: linear-gradient(155deg, #4CA36B, #16332A);
	border-radius: 24px;
	transform: translate(24px, -18px);
	box-shadow: 0 22px 44px rgba(22, 51, 42, .28);
	color: #fff;
	overflow: hidden;
}
.eco-hero-sprout { position: absolute; top: 30px; left: 0; right: 0; text-align: center; font-size: 54px; }
.eco-hero-caption {
	position: absolute;
	bottom: 30px;
	left: 26px;
	right: 26px;
	font-family: 'Baloo 2', sans-serif;
	font-weight: 700;
	font-size: 18px;
}
/* Mascota SVG, apoyada abajo a la izquierda */
.eco-mascota { position: absolute; z-index: 2; bottom: 26px; left: 30px; width: 120px; }
.eco-mascota svg { width: 100%; height: auto; display: block; }
/* Emojis flotantes alrededor */
.eco-float { position: absolute; z-index: 2; font-size: 26px; animation: eco-flota 4s ease-in-out infinite; }
.eco-float-leaf   { top: 26px;  right: 40px; animation-delay: 0s; }
.eco-float-fly    { top: 130px; right: 6px;  animation-delay: .8s; }
.eco-float-flower { top: 168px; left: 20px;  animation-delay: 1.6s; }
@keyframes eco-flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* La cinta del footer ya es full-width por su cuenta */
.eco-landing .eco-ribbon { width: 100vw; margin-left: calc(50% - 50vw); }

/* Guía en dos columnas en escritorio */
@media (min-width: 768px) {
	.eco-guia { columns: 2; column-gap: 12px; }
	.eco-guia .eco-card { break-inside: avoid; }
}

/* =========================================================================
 * Legibilidad: algunos temas (Kadence) pintan los <button> en blanco.
 * Forzamos color de texto legible en los componentes que son botones.
 * ========================================================================= */
.eco-nivel { color: var(--eco-text); }
.eco-nivel-nombre { color: var(--eco-dark); }
.eco-quiz-op { color: var(--eco-text); }
.eco-bote { color: var(--eco-text); }
.eco-bote-nombre { color: var(--eco-text); }
/* Reaseguramos el blanco de los CTA principales */
.eco-landing .eco-btn, .eco-juegos-wrap .eco-btn { color: #fff; }

/* =========================================================================
 * Boletín ambiental — carrusel
 * ========================================================================= */
.eco-boletin { width: 100%; }
.eco-bol-row { display: flex; align-items: center; gap: 12px; }
.eco-bol-card {
	flex: 1;
	background: #fff;
	border: 1px solid var(--eco-border);
	border-radius: 24px;
	padding: 28px;
	min-height: 150px;
}
.eco-bol-cat {
	display: inline-block;
	background: var(--eco-soft);
	color: var(--eco-strong);
	font-weight: 800;
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.eco-bol-titulo { font-family: 'Baloo 2', sans-serif; color: var(--eco-dark); margin: 12px 0 8px; font-size: 22px; }
.eco-bol-cuerpo { color: var(--eco-muted); margin: 0; line-height: 1.5; }
.eco-bol-nav {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--eco-border);
	background: #fff;
	color: var(--eco-strong);
	font-size: 20px;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.eco-bol-nav:hover { background: var(--eco-sage); transform: translateY(-2px); }
.eco-bol-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.eco-bol-dot {
	width: 8px; height: 8px;
	border-radius: 999px;
	border: 0;
	background: var(--eco-border);
	cursor: pointer;
	padding: 0;
	transition: width .2s ease, background .2s ease;
}
.eco-bol-dot.is-on { width: 22px; background: var(--eco-mid); }
@media (max-width: 600px) { .eco-bol-nav { width: 36px; height: 36px; font-size: 18px; } .eco-bol-card { padding: 20px; } }

/* ---------- Accesibilidad ---------- */
.eco-btn:focus-visible,
.eco-quiz-op:focus-visible,
.eco-bote:focus-visible,
.eco-memo-carta:focus-visible,
.eco-nivel:focus-visible { outline: 3px solid var(--eco-amber); outline-offset: 2px; }