/* Reset + base typography */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x clip (no hidden): el drawer móvil off-canvas (.nav__tabs, fixed a 726px) inflaba el scrollWidth del documento y EN MÓVIL REAL el navegador expandía el layout viewport a esos 726px — todos los media queries móviles dejaban de aplicar y la web entera se veía al ~54%, "cortada". clip corta el overflow sin crear scroll container (sticky y anclas siguen funcionando). hidden queda como fallback para navegadores sin clip. */ html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); background: var(--bg-base); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; overflow-x: clip; } /* El atributo hidden debe ganar SIEMPRE al display de las clases de autor (.own-form, .watch-target… son flex y lo pisaban): formularios que debían nacer ocultos se mostraban siempre. Regla canónica del reset. */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } img { display: block; max-width: 100%; } /* Atmósfera base: papel de "libro mayor" sobre obsidiana cálida (textura REAL generada con Gemini) + un foco cálido de latón en una esquina, como la luz de una lámpara sobre el libro de cuentas. CERO arcoíris: el iridiscente se RESERVA al canto de la carta (regla dura del rediseño). El material da profundidad. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: /* luz cálida de latón, solo arriba-derecha — "el brillo se gana" */ radial-gradient(ellipse 58% 50% at 90% -8%, rgba(201,168,106,.11) 0%, rgba(201,168,106,.04) 40%, transparent 72%), /* papel de libro mayor, tileado, como base */ image-set( url("/lustre-demo/static-frontend/assets/bg-paper.webp") type("image/webp") ) repeat top left / 600px auto, var(--bg-base); } :root[data-theme="light"] body::before { background: var(--bg-base); /* el tema claro no usa las texturas oscuras */ } /* Grano físico fino (textura tileable propia, generada con PIL): rompe la planitud digital "IA". Sutil, fijo, no interactivo. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: url("/lustre-demo/static-frontend/assets/grain-fine.webp"); background-size: 256px 256px; } /* Scrollbar */ /* Scrollbar con firma foil — hasta el chrome del navegador lleva la marca */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: var(--lustre-foil); background-size: 100% 240%; border-radius: var(--r-pill); border: 3px solid var(--bg-deep); } ::-webkit-scrollbar-thumb:hover { background-position: 0 100%; } ::selection { background: var(--poke-gold); color: #1a1208; text-shadow: none; } /* Foco firmado: doble anillo cálido (oro + halo), no el outline azul por defecto */ :focus-visible { outline: 2px solid var(--poke-gold); outline-offset: 2px; border-radius: var(--r-xs); box-shadow: 0 0 0 5px rgba(255,203,5,.18); } /* ── Firma "foil": texto con el degradado iridiscente de marca, con leve barrido animado. Reservado para palabras clave de titulares (no abusar). */ .foil-text { background: var(--lustre-foil); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: foil-sweep 7s linear infinite; } @keyframes foil-sweep { from { background-position: 0% 0; } to { background-position: 280% 0; } } @media (prefers-reduced-motion: reduce) { .foil-text { animation: none; } } /* ── Motion: reveals al entrar en viewport (los activa reveal.js). Por defecto TODO visible; solo si se ocultan y revelan — así, si el JS falla, no se queda nada invisible. */ .reveal-on [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal-on [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ── Barra de idioma de las CARTAS (sticky bajo el navbar) ───────────── */ .langbar { position: sticky; top: var(--nav-h); z-index: 40; display: flex; justify-content: center; padding: 8px 16px; background: color-mix(in srgb, var(--bg-base) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .langbar__inner { display: flex; align-items: center; gap: 12px; } .langbar__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); } .langbar__opts { display: flex; gap: 4px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px; } .langbar__opt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); border: none; background: transparent; color: var(--text-3); font-family: var(--font-body); font-weight: 700; font-size: 13px; cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .langbar__opt:hover { color: var(--text); } .langbar__opt.is-active { background: var(--poke-gold); color: #1a1208; box-shadow: 0 2px 12px rgba(255,203,5,.32); } .langbar__opt svg { box-shadow: 0 1px 3px rgba(0,0,0,.35); } .langbar__note { font-size: var(--fs-caption); color: var(--text-3); font-style: italic; max-width: 40ch; line-height: 1.45; } .langbar__note[hidden] { display: none; } @media (max-width: 720px) { .langbar__note { display: none; } } @media (max-width: 560px) { .langbar__label { display: none; } .langbar__opt span { display: none; } .langbar__opt { padding: 6px 11px; } } /* Accesibilidad: respeta la preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Tipografía base — escala arquitectónica (tokens fluidos, tracking apretado) */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.06; text-wrap: balance; } h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tighter); } h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); } h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); } h4 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; } p { color: var(--text-2); } /* Display: el gesto tipográfico más grande (héroe, precio rey, año ancla). Que GRITE — es lo que separa "premium" de "frontend IA". */ .display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: .9; letter-spacing: var(--tracking-tighter); text-wrap: balance; } .mono { font-family: var(--font-mono); } /* Todo dato numérico en mono tabular: columnas alineadas, identidad de terminal */ .num, .price, .tnum, [data-num] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .muted { color: var(--text-3); } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip-link: oculto fuera de pantalla salvo al recibir foco con Teclado (WCAG 2.4.1) */ .skip-link { position: absolute; left: 8px; top: -48px; z-index: 1000; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; transition: top .15s ease; } .skip-link:focus { top: 8px; } /* Pokéball spinner */ .pokeball { display: inline-block; vertical-align: middle; } .pokeball--spin { animation: pokeball-spin 1.2s linear infinite; } @keyframes pokeball-spin { 0% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(180deg) translateY(-3px); } 50% { transform: rotate(360deg) translateY(0); } 75% { transform: rotate(540deg) translateY(-3px); } 100% { transform: rotate(720deg) translateY(0); } } /* Fila de energías */ .energy-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .energy-icon { filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); transition: transform var(--t-mid) var(--ease); } .energy-icon:hover { transform: translateY(-3px) scale(1.08); } /* Pattern background helper */ .pokeball-pattern { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--poke-red); }