/*
Theme Name: Hormiganzas
Theme URI: https://hormiganzas.com
Author: Agencia Gracia
Description: Tema a medida para Hormiganzas. Finanzas personales en Perú. Sin page builders: PHP, CSS y el mínimo JavaScript indispensable. Optimizado para lectura larga, AdSense y Core Web Vitals.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: hormiganzas
Tags: blog, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Tokens de marca — Manual de marca Hormiganzas v1.0
   Los valores de esta sección son normativos: no se inventan colores nuevos
   ni se usan hex sueltos en el resto del CSS.
   ========================================================================== */

:root {
	/* --- Color principal: jade + lima --- */
	--hz-jade: #0F5132;          /* marca, enlaces, botones, encabezados */
	--hz-jade-oscuro: #0A3A23;   /* hover, estados activos, pie */
	--hz-lima: #C9F24A;          /* isotipo en negativo y cifra clave */
	--hz-tinte: #E8F4EC;         /* respuesta directa, citas */

	/* --- Texto --- */
	--hz-tinta: #14110F;         /* texto principal */
	--hz-secundario: #4C554E;    /* autoría, metadatos */
	--hz-terciario: #5D665F;     /* migas, fechas, captions */

	/* --- Superficies --- */
	--hz-papel: #FFFFFF;
	--hz-borde: #E8EDE8;

	/* --- Secundario: solo para lo humano --- */
	/* Caja de autor, newsletter, comunidad, respuestas a comentarios.
	   Nunca en datos, tasas ni tablas: ese es territorio del jade. */
	--hz-lila: #6E5AC8;
	--hz-lila-oscuro: #4C3B99;
	--hz-lila-tinte: #EBE7FB;

	/* --- Funcionales: solo en datos --- */
	/* Lo favorable se marca con el propio jade, no con un segundo verde. */
	--hz-costo: #A32D2D;
	--hz-atencion: #8A6A2F;

	/* --- Gradientes: solo en superficies oscuras, uno por vista --- */
	--hz-grad-jade: linear-gradient(160deg, #0F5132, #062A20);
	--hz-grad-tinta-jade: linear-gradient(135deg, #14110F, #0F5132);
	--hz-grad-lima-jade: linear-gradient(90deg, #C9F24A, #0F5132);

	/* --- Enlaces --- */
	--hz-enlace: var(--hz-jade);
	--hz-enlace-hover: #063119;

	/* Alto de la barra de administración de WordPress. Vale 0 para el
	   visitante y lo sobrescribe main.css cuando hay sesión iniciada.
	   Todo lo que se fija al borde superior parte de aquí. */
	--hz-barra-admin: 0px;

	/* --- Tipografía: dos familias, nada más --------------------------------
	   Schibsted Grotesk para titulares y cifras, Inter para texto e interfaz.
	   Manrope entra solo en el logotipo, hasta que llegue el SVG vectorizado.
	   Sentence case siempre: nunca versalitas ni caja alta decorativa.
	   -------------------------------------------------------------------- */
	--hz-fuente-titular: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
	--hz-fuente-cuerpo: 'Inter', system-ui, -apple-system, sans-serif;
	--hz-fuente-logo: 'Manrope', system-ui, sans-serif;
	--hz-fuente-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Escala fluida, móvil primero. El cuerpo nunca baja de 17px. */
	--hz-t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--hz-t-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--hz-t-base: clamp(1.0625rem, 1.03rem + 0.2vw, 1.125rem);
	--hz-t-lg: clamp(1.1875rem, 1.14rem + 0.25vw, 1.3125rem);
	--hz-t-xl: clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem);
	--hz-t-2xl: clamp(1.625rem, 1.45rem + 0.9vw, 2.125rem);
	--hz-t-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.875rem);

	/* --- Rejilla --------------------------------------------------------
	   Escritorio 1440: contenedor 1280 · lectura 1fr · lateral 300 · canal 56
	   Móvil 390: una columna, margen 14
	   ------------------------------------------------------------------- */
	--hz-ancho: 1280px;
	--hz-medida: 68ch;           /* columna de lectura */
	--hz-lateral: 300px;
	--hz-canal: 56px;
	--hz-margen: 14px;

	/* --- Radios: cada valor tiene un uso asignado --- */
	--hz-radio-anuncio: 14px;    /* espacios publicitarios y píldoras pequeñas */
	--hz-radio-bloque: 20px;     /* bloques de contenido y tarjetas */
	--hz-radio-superficie: 28px; /* hero y losas oscuras */
	--hz-radio-pildora: 999px;   /* botones, chips y cabecera */

	/* --- Bordes y elevación --- */
	--hz-borde-contenedor: 1px solid #EDF1ED;
	--hz-borde-cita: 4px;
	--hz-sombra: 0 24px 44px -30px rgba(20, 17, 15, 0.45);

	/* --- Alturas reservadas de publicidad -------------------------------
	   Se reservan en CSS aunque el anuncio no cargue. Es lo que impide que
	   el texto salte al aparecer el bloque y hunda el CLS.
	   ------------------------------------------------------------------- */
	--hz-ad-728x90: 90px;
	--hz-ad-300x250: 250px;
	--hz-ad-336x280: 280px;
	--hz-ad-300x600: 600px;

/* --- Movimiento -------------------------------------------------------
	   Tres duraciones y tres curvas, nada más. Un sistema de animación con
	   veinte valores distintos no se percibe como sistema: se percibe como
	   ruido. Todo lo que se mueve aquí usa transform y opacity, nunca alto
	   ni margen, porque esos dos provocan recálculo de maquetación y se
	   comen el presupuesto de CLS que necesitamos para los anuncios.
	   -------------------------------------------------------------------- */
	--hz-dur-rapida: 120ms;   /* pulsaciones, cambios de color */
	--hz-dur-media: 240ms;    /* hovers, despliegues */
	--hz-dur-lenta: 420ms;    /* entradas al hacer scroll */

	/* Sale rápido y frena suave: la curva que se siente «natural» */
	--hz-ease: cubic-bezier(0.2, 0, 0, 1);
	/* Para lo que desaparece: arranca lento y acelera al irse */
	--hz-ease-salida: cubic-bezier(0.4, 0, 1, 1);
	/* Un punto de rebote, solo en confirmaciones y en el press */
	--hz-ease-rebote: cubic-bezier(0.34, 1.4, 0.64, 1);

	/* --- Espaciado, base 4 --- */
	--hz-e1: 0.25rem;
	--hz-e2: 0.5rem;
	--hz-e3: 0.75rem;
	--hz-e4: 1rem;
	--hz-e6: 1.5rem;
	--hz-e8: 2rem;
	--hz-e12: 3rem;
	--hz-e16: 4rem;
}

/* El sitio vive de artículos largos y de anuncios: el papel se queda
   blanco y plano. Por eso no hay tema oscuro en el contenido. */