/* ============================================================================
   foundations-guideline.css — base del kit (SHELL muthafunk).
   2 capas de tokens:
     --mf-*    = FIRMA muthafunk. FIJA. Es el "chrome": fondo #EFEFEF, ink #0F0F0F,
                 rojo #FF4343, fuente PP Neue Montreal, radio 20px, container, escala.
                 El usuario debe SENTIR que está en muthafunk.co.
     --brand-* = SKIN del cliente (color + fuentes). Se MUESTRA donde corresponde:
                 swatches de color, specimen tipográfico, logo, tokens. NO pinta el chrome.
   ============================================================================ */

/* --- Fuente firma muthafunk: PP Neue Montreal (una sola familia, 400 + 500) --- */
@font-face {
	font-family: "PP Neue Montreal";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../fonts/PPNeueMontreal-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "PP Neue Montreal";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../../fonts/ppneuemontreal-medium.woff2") format("woff2");
}

:root {
	/* --- FIRMA muthafunk (--mf-*): escala tipográfica fluida (clamp) --- */
	--mf-type-display: clamp(45px, 4.688vw, 117px);
	--mf-type-t1:      clamp(40px, 3.65vw, 91px);
	--mf-type-t2:      clamp(32px, 2.61vw, 64px);
	--mf-type-t3:      clamp(30px, 2.0833vw, 50px);
	--mf-type-t4:      clamp(22px, 1.57vw, 39px);
	--mf-type-t5:      clamp(18px, 1.25vw, 30px);
	--mf-type-body:    clamp(16px, 1.045vw, 20px);
	--mf-type-small:   clamp(13px, 0.9vw, 15px);

	--mf-lh-display: 1.02;
	--mf-lh-title:   1.1;
	--mf-lh-body:    1.55;

	/* --- Espaciado (escala modular) --- */
	--mf-space-1: 0.5rem;
	--mf-space-2: 1rem;
	--mf-space-3: 1.5rem;
	--mf-space-4: 2rem;
	--mf-space-5: clamp(2rem, 4vw, 4rem);
	--mf-space-6: clamp(3rem, 6vw, 6rem);
	--mf-space-7: clamp(4rem, 9vw, 9rem);

	/* --- Radio (firma: 20px) — tematizable por portal --- */
	--mf-radius-sm: 10px;
	--mf-radius:    20px;
	--mf-radius-media: var(--mf-radius); /* esquinas de imágenes/media (override opcional) */
	--mf-radius-btn:   var(--mf-radius); /* esquinas de botones (override opcional) */
	/* Radio "estadio" del morph de card en hover (firma muthafunk) */
	--mf-radius-pill: clamp(120px, 20vw, 400px);

	/* --- Motion --- */
	--mf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mf-dur:  0.5s;

	/* --- Container (ancho amplio, firma muthafunk) --- */
	--mf-container-max: 1840px;
	--mf-container-pad: clamp(1.5rem, 3.5vw, 3.5rem);

	/* --- Fuente + COLORES: DEFAULT muthafunk (chrome). Tematizable por portal vía skin (--mf-*). --- */
	--mf-font:  "PP Neue Montreal", "Neue Montreal", system-ui, sans-serif;
	--mf-paper: #EFEFEF;  /* fondo página */
	--mf-ink:   #0F0F0F;  /* texto principal */
	--mf-red:   #FF4343;  /* rojo muthafunk (constante de marca) */
	--mf-accent: var(--mf-red);  /* acento / interacción — tematizable (default rojo muthafunk) */
	--mf-gray:  #bababa;  /* meta / secundario */
	--mf-line:  rgba(15, 15, 15, 0.12); /* hairlines */
	--mf-surface: color-mix(in srgb, var(--mf-ink) 5%, var(--mf-paper)); /* superficie de cards (se re-tinta con ink/paper) */
	/* Copias no-swap de ink/paper para que las bandas inviertan sin ciclo (y respeten el tema). */
	--mf-ink-base:   var(--mf-ink);
	--mf-paper-base: var(--mf-paper);

	/* --- SKIN del cliente (--brand-*): se muestra en el CONTENIDO, no en el chrome.
	   Defaults = neutros muthafunk por si un slot queda vacío. --- */
	--brand-primary:      var(--mf-red);
	--brand-secondary:    #666666;
	--brand-accent:       var(--mf-red);
	--brand-on-primary:   #ffffff;  /* texto/elementos sobre --brand-primary (lockup) */
	--brand-neutral-ink:  var(--mf-ink);
	--brand-neutral-bg:   var(--mf-paper);
	--brand-font-display: var(--mf-font);
	--brand-font-body:    var(--mf-font);
	--brand-radius:       var(--mf-radius);
}

/* --- Reset mínimo --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }

/* --- Root del kit: CHROME muthafunk (fondo paper, ink, PP Neue Montreal) --- */
.gl-root {
	font-family: var(--mf-font);
	font-size: var(--mf-type-body);
	line-height: var(--mf-lh-body);
	color: var(--mf-ink);
	background: var(--mf-paper);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.gl-root h1, .gl-root h2, .gl-root h3, .gl-root h4 {
	font-family: var(--mf-font);
	font-weight: 500;
	line-height: var(--mf-lh-title);
	margin: 0 0 var(--mf-space-2);
	letter-spacing: -0.01em;
}

.gl-container {
	max-width: var(--mf-container-max);
	margin-inline: auto;
	padding-inline: var(--mf-container-pad);
}