/* =====================================================================
ME FUI POR LAS RAMAS — Design Tokens
Filosofía en vivo por Zoom · estética fanzine / hecho a mano · luz cálida
Importar:
===================================================================== */
/* ---- FUENTES (Google Fonts) ----
Pegá esto en el ANTES de tokens.css, o usá el @import de abajo. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=Special+Elite&display=swap');
:root {
/* ===========================================================
COLOR — fondo oscuro + luz cálida de lámpara (naranja/ámbar/fuego)
Paleta nocturna, acogedora. La llama naranja manda.
=========================================================== */
--color-ink: #14110F; /* Tinta / negro humo — fondo principal */
--color-ink-2: #221E1A; /* Tinta lavada — superficies elevadas */
--color-paper: #EFE7D2; /* Papel manila — texto sobre oscuro */
--color-paper-dim: #C9C0AC; /* Papel apagado — texto secundario */
/* OJO: los NOMBRES de las variables se conservan por compatibilidad.
Sus valores ahora son cálidos (la marca pasó de fluo-frío a fuego). */
--color-acid: #FF7A18; /* Naranja fuego — acento PRIMARIO / CTA (la llama) */
--color-magenta: #FF5C7A; /* Rosa cálido — acento / highlight */
--color-orange: #FFB23E; /* Ámbar dorado — acento (el halo de luz) */
--color-ember: #E8412B; /* Teja / brasa — acento extra cálido */
--color-acid-ink: #14110F; /* texto sobre naranja fuego (oscuro, legible) */
--color-magenta-ink:#14110F; /* texto sobre rosa cálido (oscuro, legible) */
/* Roles semánticos */
--bg: var(--color-ink);
--bg-elevated: var(--color-ink-2);
--fg: var(--color-paper);
--fg-muted: var(--color-paper-dim);
--accent: var(--color-acid); /* naranja fuego (primario) */
--accent-2: var(--color-magenta); /* rosa cálido */
--accent-3: var(--color-orange); /* ámbar dorado */
--link: var(--color-acid); /* enlaces en naranja fuego */
/* ===========================================================
TIPOGRAFÍA
=========================================================== */
--font-display: 'Archivo Black', 'Arial Narrow', Impact, sans-serif;
--font-body: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
--font-mono: 'Special Elite', 'Courier New', Courier, monospace; /* máquina de escribir */
/* Escala tipográfica (modular ~1.25 / major third-ish) */
--fs-xs: 0.75rem; /* 12px — etiquetas, kicker */
--fs-sm: 0.875rem; /* 14px — notas, captions */
--fs-base: 1rem; /* 16px — cuerpo */
--fs-md: 1.25rem; /* 20px — lead */
--fs-lg: 1.75rem; /* 28px — h3 */
--fs-xl: 2.5rem; /* 40px — h2 */
--fs-2xl: 3.75rem; /* 60px — h1 */
--fs-3xl: 5.5rem; /* 88px — display hero */
--lh-tight: 1.02;
--lh-snug: 1.18;
--lh-normal: 1.55;
--tracking-tight: -0.01em;
--tracking-wide: 0.06em;
--tracking-mono: 0.04em;
/* ===========================================================
ESPACIADO / RADIOS / BORDES
=========================================================== */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
--radius-sm: 2px; /* casi recto, recortado */
--radius: 4px;
--border-w: 3px; /* trazo marker grueso */
/* ===========================================================
SOMBRAS DURAS (sin blur — estética sticker / recorte)
=========================================================== */
--shadow-hard: 4px 4px 0 0 var(--color-ink);
--shadow-hard-acid: 6px 6px 0 0 var(--color-acid);
--shadow-hard-mag: 6px 6px 0 0 var(--color-magenta);
/* Bordes irregulares reutilizables (clip-paths) */
--clip-torn: polygon(0% 4%, 4% 0%, 97% 2%, 100% 6%, 99% 95%, 96% 100%, 3% 98%, 0% 93%);
}
/* =====================================================================
UTILIDADES — estética punk / fanzine
===================================================================== */
/* --- Tipografía rápida --- */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }
.display {
font-family: var(--font-display);
font-size: var(--fs-2xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
text-transform: lowercase;
}
.kicker {
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--accent);
}
/* --- Rotaciones leves (todo medio torcido, hecho a mano) --- */
.tilt-l { transform: rotate(-2deg); }
.tilt-l2 { transform: rotate(-4deg); }
.tilt-r { transform: rotate(2deg); }
.tilt-r2 { transform: rotate(4deg); }
.straighten:hover { transform: rotate(0); transition: transform .15s ease; }
/* --- Sombra dura / sticker --- */
.hard-shadow { box-shadow: var(--shadow-hard); }
.hard-shadow-acid { box-shadow: var(--shadow-hard-acid); }
.hard-shadow-mag { box-shadow: var(--shadow-hard-mag); }
/* --- Borde irregular / recortado tipo fanzine --- */
.torn {
clip-path: var(--clip-torn);
}
.cut-corner {
clip-path: polygon(0 0, 100% 0, 100% 80%, 88% 100%, 0 100%);
}
/* --- Marcador / resaltador fluo detrás del texto --- */
.marker {
background-image: linear-gradient(transparent 55%, var(--color-acid) 55%, var(--color-acid) 92%, transparent 92%);
padding: 0 .15em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.marker-mag {
background-image: linear-gradient(transparent 55%, var(--color-magenta) 55%, var(--color-magenta) 92%, transparent 92%);
color: var(--color-paper);
padding: 0 .15em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* --- Bloque resaltado sólido (stencil) --- */
.highlight {
background: var(--color-acid);
color: var(--color-acid-ink);
padding: .05em .35em;
transform: rotate(-1.5deg);
display: inline-block;
font-family: var(--font-display);
}
/* --- Cinta de papel (masking tape) --- */
.tape {
position: relative;
}
.tape::before {
content: "";
position: absolute;
top: -14px;
left: 50%;
width: 120px;
height: 30px;
transform: translateX(-50%) rotate(-3deg);
background: rgba(239, 231, 210, .35);
border-left: 1px dashed rgba(20,17,15,.25);
border-right: 1px dashed rgba(20,17,15,.25);
backdrop-filter: blur(.5px);
}
.tape--acid::before { background: rgba(255, 122, 24, .35); }
.tape--mag::before { background: rgba(255, 92, 122, .30); }
/* --- Borde "marker" grueso e irregular --- */
.ink-border {
border: var(--border-w) solid var(--color-paper);
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* truco borde a mano */
}
.ink-border-acid { border-color: var(--color-acid); }
.ink-border-mag { border-color: var(--color-magenta); }
/* --- Subrayado a mano (SVG wobble inline como background) --- */
.underline-hand {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
padding-bottom: .25em;
}
/* --- Botón punk --- */
.btn-punk {
display: inline-block;
font-family: var(--font-display);
text-transform: lowercase;
font-size: var(--fs-md);
color: var(--color-acid-ink);
background: var(--color-acid);
padding: .5em 1.1em;
border: 3px solid var(--color-ink);
box-shadow: var(--shadow-hard);
text-decoration: none;
transform: rotate(-1.5deg);
transition: transform .12s ease, box-shadow .12s ease;
cursor: pointer;
}
.btn-punk:hover {
transform: rotate(0) translate(-2px, -2px);
box-shadow: 6px 6px 0 0 var(--color-ink);
}
.btn-punk:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 0 var(--color-ink);
}
.btn-punk--mag { background: var(--color-magenta); color: var(--color-paper); }
/* --- Grano / ruido sobre cualquier sección (overlay) --- */
.grain {
position: relative;
isolation: isolate;
}
.grain::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: .08;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* --- Asterisco / brote decorativo (usar como ::before manual o span) --- */
.star::before {
content: "✳";
color: var(--color-magenta);
margin-right: .35em;
}
.arrow::after {
content: " ↳";
color: var(--color-orange);
}
/* --- Reset mínimo de página con la estética por defecto --- */
.page-base {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-normal);
}