/* ==========================================================================
DESIGN SYSTEM & CUSTOM PROPERTIES
========================================================================== */
:root {
/* Schwarz — German black with warm undertone */
--bg-darkest: hsl(0 0% 5%);
--bg-darker: hsl(0 0% 8%);
--bg-dark: hsl(0 0% 12%);
--bg-card: hsl(0 0% 14% / 0.85);
--bg-card-hover: hsl(0 0% 18% / 0.9);
--bg-paper: hsl(45 28% 91%);
--bg-paper-muted: hsl(44 20% 82%);
/* Gold — German flag gold, refined for premium */
--brand-color: hsl(46 100% 44%);
--brand-light: hsl(47 100% 55%);
--brand-dark: hsl(45 90% 34%);
--brand-glow: hsl(46 100% 44% / 0.20);
/* Rot — German flag red */
--signal-red: hsl(0 100% 43%);
--signal-red-soft: hsl(0 100% 43% / 0.16);
--text-light: hsl(45 20% 94%);
--text-muted: hsl(42 8% 70%);
--text-dim: hsl(40 9% 70%);
--border-color: hsl(0 0% 20%);
--border-light: hsl(46 100% 44% / 0.28);
--border-focus: hsl(47 100% 55% / 0.58);
/* Surface System — Paper (light, warm ivory) */
--bg-warm: hsl(46 100% 44% / 0.04);
--text-on-paper: hsl(0 0% 10%);
--text-on-paper-muted: hsl(0 0% 32%);
--text-on-paper-dim: hsl(0 0% 38%);
/* Dorado legible SOBRE PAPEL: --brand-dark (34%) da 3.15:1 contra --bg-paper,
por debajo del 4.5:1 que necesita el texto normal. Este da 4.65:1. */
--brand-on-paper: hsl(45 90% 27%);
--border-paper: hsl(44 18% 78%);
--border-paper-accent: hsl(46 100% 44% / 0.28);
/* Sponsors Colors */
--tier-1-color: hsl(46 100% 44%); /* Gold Main Sponsor */
--tier-2-color: hsl(38 80% 30%); /* Section Sponsor: restrained gold-brown */
/* Fonts */
--font-title: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-header: var(--font-title);
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 8rem;
/* UI Attributes */
--border-radius-sm: 6px;
--border-radius-md: 8px;
--border-radius-lg: 8px;
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
--shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.7);
/* Container sizes */
--container-width: 1280px;
}
/* ==========================================================================
RESET & GLOBAL BASE STYLES
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Imágenes de contenido NUNCA más anchas que su contenedor (móvil): sin esto, una
![]()
suelta (p.ej. el hero de una nota del blog) expandía el card a
~1088px y el texto de TODA la nota quedaba cortado fuera de la pantalla — el
overflow-x:hidden del body ocultaba el síntoma recortando. height:auto conserva
la proporción; los logos/banderas con height fijada por CSS no se ven afectados. */
img {
max-width: 100%;
height: auto;
}
/* Anti-zoom de iOS: Safari hace zoom automático al enfocar cualquier control con
fuente <16px. Los inputs dentro de .form-group ya lo tenían; esto cubre el resto
(newsletter del pie sitewide, variantes inline). Las reglas de componente pueden
subirlo, nunca conviene bajarlo. */
input, select, textarea {
font-size: 16px;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 96px; /* Offset for sticky header */
/* clip (no hidden: hidden crea contenedor de scroll y rompe position:sticky).
Cierra el paneo horizontal fantasma de ~7px que quedaba a 320px aun con todo
el contenido midiendo <= viewport (efecto 100vw). Medido en Chrome real 22/8/2026. */
overflow-x: clip;
}
/* Quien pidió "reducir movimiento" en su sistema no debería tener que aguantar un
desplazamiento animado de pantalla completa cada vez que toca un ancla. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
background-color: var(--bg-darkest);
color: var(--text-light);
font-family: var(--font-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-darkest);
}
::-webkit-scrollbar-thumb {
background: var(--bg-dark);
border: 2px solid var(--bg-darkest);
border-radius: var(--border-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
background: var(--brand-color);
}
/* Typography */
h1, h2, h3, h4 {
font-family: var(--font-title);
font-weight: 700;
line-height: 1.25;
color: var(--text-light);
}
h1 {
font-size: clamp(2.5rem, 5.5vw, 4rem);
font-weight: 800;
letter-spacing: 0;
}
h2 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
letter-spacing: 0;
margin-block-end: 1rem;
}
h3 {
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}
/* Sube el NIVEL de un encabezado sin cambiar cómo se ve. Quien navega con lector de
pantalla salta de encabezado en encabezado: si una página va del h1 directo al h3, se
percibe un nivel faltante y se pierde el mapa de la página. A veces la jerarquía visual
correcta no coincide con la semántica, y esto permite arreglar la segunda sin tocar la
primera: