/* ========================================================================== HOFT — TOKENS Única fuente de verdad de color, tipografía, ritmo y breakpoints. Valores de marca según MARCA/HOFT MANUAL. No añadir colores fuera de gama. ========================================================================== */ :root { /* --- Color: gama principal ------------------------------------------- */ --hoft-negro: #111111; /* negro no puro, ligeramente desaturado */ --hoft-blanco: #f9f9f9; /* blanco roto */ /* --- Color: gama complementaria (acento puntual, nunca como base) ----- */ --hoft-rosa: #ff00d3; --hoft-verde: #00ff00; --hoft-amarillo: #ffff00; /* --- Roles semánticos: base blanca de marca --------------------------- */ --color-fondo: var(--hoft-blanco); --color-texto: var(--hoft-negro); --color-texto-suave: color-mix(in srgb, var(--hoft-negro) 66%, transparent); --color-texto-tenue: color-mix(in srgb, var(--hoft-negro) 42%, transparent); --color-linea: color-mix(in srgb, var(--hoft-negro) 14%, transparent); --color-linea-fuerte: color-mix(in srgb, var(--hoft-negro) 30%, transparent); --color-foco: var(--hoft-negro); /* Reparto de la gama complementaria entre las secciones del sitio. Sobre estos colores el texto va SIEMPRE en negro (regla del manual). */ --color-traxx: var(--hoft-rosa); --color-booking: var(--hoft-verde); --color-blog: var(--hoft-amarillo); --color-acento: var(--hoft-rosa); /* acento de página; lo fija cada página */ /* --- Tipografía ------------------------------------------------------- */ /* Host Grotesk = principal (siempre MAYÚSCULAS en niveles 1 y 2). DM Mono Medium = solo detalles secundarios y números. */ --font-display: "Host Grotesk", "Helvetica Neue", Arial, sans-serif; --font-texto: "Host Grotesk", "Helvetica Neue", Arial, sans-serif; --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; --peso-light: 300; --peso-regular: 400; --peso-semibold: 600; /* Escala fluida: mínimo = móvil 320px, máximo = ~1440px. */ --txt-xs: clamp(0.625rem, 0.61rem + 0.08vw, 0.6875rem); --txt-sm: clamp(0.6875rem, 0.67rem + 0.1vw, 0.75rem); --txt-base: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem); --txt-md: clamp(0.875rem, 0.84rem + 0.18vw, 1rem); --txt-lg: clamp(1.0625rem, 0.98rem + 0.4vw, 1.375rem); --txt-xl: clamp(1.25rem, 1.05rem + 1vw, 2rem); --txt-2xl: clamp(1.75rem, 1.3rem + 2.2vw, 3.25rem); --txt-3xl: clamp(2.25rem, 1.4rem + 4.2vw, 5rem); --alto-linea-titular: 0.94; --alto-linea-texto: 1.55; --tracking-titular: -0.02em; --tracking-mono: 0.14em; /* --- Ritmo / espaciado fluido ----------------------------------------- */ --esp-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem); --esp-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.625rem); --esp-xs: clamp(0.75rem, 0.7rem + 0.25vw, 1rem); --esp-sm: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); --esp-md: clamp(1.5rem, 1.3rem + 1vw, 2.5rem); --esp-lg: clamp(2.75rem, 2.3rem + 2.2vw, 5rem); --esp-xl: clamp(5rem, 4rem + 5vw, 10rem); --esp-2xl: clamp(7.5rem, 5.6rem + 9.5vw, 16rem); /* --- Layout ------------------------------------------------------------ */ --gutter: clamp(1.25rem, 4vw, 3.5rem); --ancho-contenido: 90rem; /* 1440px */ --ancho-contenido-ancho: 110rem; /* 1760px — solo ultra-wide */ --ancho-texto: 58ch; --gap-grid: clamp(1.5rem, 1rem + 2.4vw, 3.25rem); /* --- Menú lateral (v3) -------------------------------------------------- Columna fija a toda altura con el índice de secciones. El contenido vive a su derecha y es lo único que se mueve. Por debajo de --bp-lg no cabe una columna y el menú pasa a barra superior + panel deslizante; --alto-barra es el alto de esa barra y vale 0 en escritorio, donde no existe. ------------------------------------------------------------------------ */ --ancho-menu: clamp(16rem, 21vw, 21rem); --alto-barra: 3.5rem; /* Logo: el SVG va recortado al arte (viewBox 792x455), así que esta altura es la que se ve de verdad. Discreto pero legible; mínimo digital 25 px. Área de seguridad = ½ de su altura (regla del manual). */ --logo-alto: clamp(2.5rem, 2.05rem + 2.2vw, 3.75rem); --logo-seguridad: calc(var(--logo-alto) / 2); /* Techo de las imágenes de artículo: la foto acompaña, no manda */ --img-alto: 42svh; --img-ancho: 30rem; --img-alto-portada: 52svh; /* Siluetas de esquina: recurso secundario, tamaño muy pequeño */ --silueta-tam: clamp(1.6875rem, 1.275rem + 1.95vw, 2.625rem); --silueta-margen: clamp(0.5rem, 0.3rem + 1vw, 1.25rem); /* Pegatinas del manual (3.3): vez y media las siluetas de esquina */ --pegatina-tam: calc(var(--silueta-tam) * 1.5); --radio-0: 0; /* --- Capas ------------------------------------------------------------- */ --z-base: 0; --z-siluetas: 5; --z-sticky: 10; /* Las pegatinas tapan cualquier elemento de la página, texto incluido: si el texto quedara por encima, se comería el ratón y no se podría volver a agarrar la pegatina. Solo el menú se mantiene por delante, para no bloquear la navegación. */ --z-pegatinas: 50; --z-menu: 100; --z-menu-velo: 99; --z-grano: 200; --z-skip: 300; /* --- Botones de cabecera (estilo cómic) --------------------------------- Rectángulos con trazo negro y bloque de sombra dura desplazado: el botón parece flotar sobre el papel. Al pasar el cursor el bloque crece y el botón se despega; al pulsar aterriza sobre su propia sombra. ------------------------------------------------------------------------ */ --btn-trazo: 2px; /* grosor del trazo de tinta */ --btn-desp: 0.1875rem; /* desplazamiento del bloque en reposo */ --btn-desp-alt: 0.5000rem; /* desplazamiento con el cursor encima */ --btn-elev: 0.250rem; /* cuánto se despega el botón en hover */ --btn-giro: -1.2deg; /* ladeo de viñeta */ --btn-punto-paso: 0.2125rem; /* separación de la trama de puntos */ --btn-punto-r: 0.5px; /* radio del punto (en px: debe quedar nítido) */ --btn-punto-alfa: 50%; /* opacidad del punto sobre el color del botón */ /* Grano de película: cuánto se nota la capa de ruido */ --grano-opacidad: 0.20; /* --- Movimiento --------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Rebote corto: el botón se pasa de frenada y vuelve. Es lo que da el aire de cómic; sin el sobreimpulso el movimiento se lee como un botón normal. */ --ease-comic: cubic-bezier(0.34, 1.8, 0.5, 1); --dur-rapida: 160ms; --dur-media: 320ms; --dur-lenta: 640ms; } /* Acento por página: se activa con data-page en ---------------------- */ [data-page="traxx"] { --color-acento: var(--color-traxx); } [data-page="booking"] { --color-acento: var(--color-booking); } [data-page="blog"] { --color-acento: var(--color-blog); } /* ========================================================================== BREAKPOINTS — mobile-first estricto: la base es móvil, todo @media es min-width -------------------------------------------------------------------------- sm ≥ 480px móvil grande / phablet md ≥ 768px tablet vertical (límite: por debajo se apagan las animaciones pesadas) lg ≥ 1024px tablet apaisada / portátil xl ≥ 1440px escritorio 2xl ≥ 1920px pantallas ultra-amplias ========================================================================== */ :root { --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px; --bp-2xl: 1920px; } @media (min-width: 1024px) { /* Aquí ya cabe la columna fija: la barra superior desaparece y con ella su alto, del que cuelgan el scroll-padding y las siluetas de arriba. */ :root { --alto-barra: 0rem; } } /* Ultra-wide: más aire, no más texto por línea */ @media (min-width: 1920px) { :root { --ancho-contenido: var(--ancho-contenido-ancho); --gutter: clamp(3.5rem, 5vw, 7rem); } }