/*
 * Barra de navegacion y pie de pagina, iguales a los de la portada
 * (mismas clases .ay-bar/.ay-foot/.ay-btn/.ay-float, mismos tokens de
 * color). Un solo lugar para los dos: cambia aqui y cambia en todo el
 * blog. La portada trae su propia copia adentro del contenido (pagina
 * de una sola pieza); esta hoja es la que usan las paginas nuevas.
 */
.ay-page {
	--green-deep: #178500;
	--green-bright: #29b70c;
	--green-800: #116800;
	--green-900: #0d4f00;
	--green-950: #0a3a00;
	--green-50: #eef8e8;
	--green-100: #ddf4d2;
	--green-200: #b9eda6;
	--cream: #faf3e0;
	--cream-50: #fffdf7;
	--cream-200: #f4ebd4;
	--cream-300: #ecdfbe;
	--cream-400: #ddca9f;
	--panel: #ffffff;
	--ink: #1d1d1d;
	--ink-700: #3c3a33;
	--ink-500: #6b6656;
	--ink-400: #8b8676;
	--amber-600: #c08411;
	--amber-100: #f7eccf;
	--font-display: 'Sora', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
	--font-body: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
	--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	/* Fondo del blog: cream-50, elegido por Alejandro (2026-09-22) sobre
	   blanco puro y el crema de la portada. Las tarjetas pasan a --panel
	   (blanco) para no perderse contra este fondo. */
	background: var(--cream-50);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	padding: 64px 0 0;
	-webkit-font-smoothing: antialiased;
}
.ay-page * { box-sizing: border-box; }
.ay-page a { color: var(--green-deep); }
.ay-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- botones ---------- */
.ay-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-display); font-weight: 600; font-size: 15px;
	padding: 13px 22px; border-radius: 999px; text-decoration: none;
	border: 1px solid transparent;
	transition: transform 140ms cubic-bezier(.2,.7,.3,1), background 140ms, box-shadow 140ms;
	white-space: nowrap;
}
.ay-btn:active { transform: translateY(1px); }
.ay-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41,183,12,.35); }
.ay-btn.primary { background: var(--green-deep); color: #fff; }
.ay-btn.primary:hover { background: var(--green-800); color: #fff; }
.ay-btn.cta { background: var(--green-bright); color: #fff; box-shadow: 0 6px 18px rgba(41,183,12,.32); }
.ay-btn.cta:hover { background: var(--green-800); color: #fff; box-shadow: 0 10px 24px rgba(23,133,0,.3); }
.ay-btn.ghost { background: transparent; color: var(--green-deep); border-color: var(--green-200); }
.ay-btn.ghost:hover { background: var(--green-50); color: var(--green-800); }
.ay-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- barra fija ---------- */
.ay-bar {
	position: fixed; left: 0; right: 0; top: var(--wp-admin--admin-bar--height, 0px); z-index: 1000;
	height: 64px; background: rgba(250,243,224,.86);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--cream-300);
}
.ay-bar-in { max-width: 1080px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 18px; }
.ay-brand { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.ay-brand span { color: var(--green-deep); }
.ay-nav { display: none; gap: 22px; margin-left: 8px; }
.ay-nav a { font-size: 14px; font-weight: 500; color: var(--ink-700); text-decoration: none; }
.ay-nav a:hover, .ay-nav a[aria-current="page"] { color: var(--green-deep); }
.ay-bar .ay-btn { margin-left: auto; padding: 10px 16px; font-size: 14px; }
.ay-bar .ay-btn .long { display: none; }
.ay-bar .ay-btn .short { display: inline; }
@media (min-width: 480px) { .ay-bar .ay-btn .long { display: inline; } .ay-bar .ay-btn .short { display: none; } }
@media (max-width: 479px) { .ay-brand { font-size: 16px; } .ay-bar-in { gap: 12px; padding: 0 16px; } .ay-bar .ay-btn { padding: 9px 14px; font-size: 13.5px; } }
@media (min-width: 760px) { .ay-nav { display: flex; } }

/* ---------- pie ---------- */
.ay-foot { border-top: 1px solid var(--cream-300); padding: 30px 0 40px; font-size: 14px; color: var(--ink-500); }
.ay-foot-in { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; }
.ay-foot a { color: var(--green-deep); text-decoration: none; font-weight: 500; }
.ay-foot a:hover { text-decoration: underline; }
.ay-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ay-foot-side { width: 100%; margin-top: 6px; font-size: 13px; color: var(--ink-400); }

/* ---------- flotante whatsapp ---------- */
.ay-float {
	position: fixed; right: 18px; bottom: 18px; z-index: 1000;
	width: 56px; height: 56px; border-radius: 50%;
	background: #25D366; color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 22px rgba(37,211,102,.45);
	transition: transform 140ms cubic-bezier(.2,.7,.3,1);
}
.ay-float:hover { transform: translateY(-3px); }
.ay-float svg { width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce) {
	.ay-btn, .ay-float { transition: none; }
	.ay-float:hover { transform: none; }
}