/* ============================================================ FrameRhapsody Films — hoja de estilo comun (web + blog) Paleta: Obsidian / Charcoal Silk / Shadowed Ash / Concrete / Mist ============================================================ */ :root{ --obsidian:#151618; --deep:#120F0E; /* --charcoal solo para lo inerte (dias deshabilitados): WCAG exime los controles deshabilitados, y ahi el gris apagado ES la senal. Para texto que hay que leer, --ash o mas claro. */ --charcoal:#3C4449; --ash:#898E92; --concrete:#8D9295; --mist:#CED3D6; --white:#F6F8F9; /* acentos: el corte naranja/azul del cine, sacado de sus propios planos */ --ember:#E8552D; --ember-2:#FF7A4D; --steel:#6B9BD1; --ember-10:rgba(232,85,45,.10); --ember-22:rgba(232,85,45,.22); --line:rgba(206,211,214,.13); --line-2:rgba(206,211,214,.26); --line-ui:rgba(206,211,214,.38); --glass:linear-gradient(155deg,rgba(206,211,214,.075),rgba(206,211,214,.014) 48%); --maxw:1240px; --pad:clamp(20px,5vw,64px); --gut:max(var(--pad),env(safe-area-inset-left)); --r-s:12px; --r-m:20px; --r-l:28px; --ease:cubic-bezier(.22,.61,.36,1); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} html,body{overflow-x:clip} html{background:var(--obsidian)} body{ background:transparent;color:var(--mist); font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-weight:400;font-size:15px;line-height:1.62; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--ember);color:var(--white)} :focus-visible{outline:2px solid var(--ember-2);outline-offset:3px;border-radius:6px} h1,h2,h3,h4{font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;font-weight:600;line-height:1.07;letter-spacing:-.021em;color:var(--white);text-wrap:balance} .serif{font-weight:500;color:var(--concrete)} .skip{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--white);color:var(--obsidian);padding:12px 20px;border-radius:0 0 var(--r-s) 0;font-weight:600} .skip:focus{left:0} body::before{ content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none; background: radial-gradient(34% 38% at 16% 20%, rgba(232,85,45,.26), transparent 64%), radial-gradient(32% 36% at 84% 30%, rgba(107,155,209,.20), transparent 66%), radial-gradient(42% 34% at 66% 80%, rgba(232,85,45,.16), transparent 68%), radial-gradient(28% 32% at 26% 76%, rgba(107,155,209,.15), transparent 64%), radial-gradient(50% 40% at 50% 50%, rgba(232,85,45,.05), transparent 70%); filter:blur(44px); animation:aurora 38s ease-in-out infinite alternate; } @keyframes aurora{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(2.5%,-2%,0) scale(1.08)} 100%{transform:translate3d(-2%,2.5%,0) scale(1.03)} } /* la estela del raton, la misma en todas las paginas */ #estela{position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:0;transition:opacity .5s linear} #estela.on{opacity:1} body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.14; background-image:url("data:image/svg+xml;utf8,"); mix-blend-mode:soft-light; } #bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:10000; background:linear-gradient(90deg,var(--ember),var(--ember-2)); box-shadow:0 0 16px rgba(232,85,45,.5)} /* ============================================================ NAV */ /* solo la barra superior, no cualquier