/* ===== Aviso de estado — MODO PILOTO ===== Para retirarlo cuando Stripe cobre y el panel esté abierto: borra pilot.css y pilot.js de los y estos dos archivos. Nada más depende de ellos. POR QUÉ ES CREMA Y NO MORADO En morado sobre morado parecía una sección más de la web: se leía como parte del diseño y la gente pasaba por encima. Un aviso tiene que interrumpir un poco. La crema del oliva de marca, con el texto en el granate oscuro, se lee como lo que es —una nota pegada encima— sin salirse de la paleta ni gritar como un rojo de error. Contraste del texto sobre el fondo: 12,6:1. Muy por encima del 4,5:1 que pide la norma, y legible también para quien vea mal de cerca. */ :root{--pilot-h:41px} #pilotbar{ position:fixed;top:0;left:0;right:0;z-index:70; background:#F2EAC4; /* crema cálida, de la familia del oliva */ border-bottom:1px solid #C2B65C; box-shadow:0 2px 14px rgba(0,0,0,.32); /* despega la nota de la página */ color:#3A1338; /* granate de marca, no negro */ font-size:.84rem;line-height:1.45;font-weight:500; padding:.62rem 1.4rem;text-align:center; font-family:"DIN Next","Inter",ui-sans-serif,system-ui,sans-serif; transform:translateY(0); transition:transform .26s cubic-bezier(.4,0,.2,1); will-change:transform; } #pilotbar b{color:#7A2B45;font-weight:800} /* el gancho, un punto más fuerte */ /* Un filito oliva arriba: remata la nota y la ata a la marca. */ #pilotbar::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,#C2B65C,#D16E72,#813A95); } /* la barra empuja hacia abajo todo lo que estaba pegado arriba */ body.has-pilot nav{top:var(--pilot-h) !important} body.has-pilot #rv-progress{top:var(--pilot-h)} body.has-pilot{padding-top:var(--pilot-h)} /* ── Al bajar, el aviso se aparta ────────────────────────────────── Se desplaza fuera de la vista y el menú sube a ocupar su hueco. El padding-top del body se queda como está a propósito: quitarlo haría saltar la página de golpe, y el hueco reservado está arriba del todo, donde ya no se ve. */ body.pilot-fuera #pilotbar{transform:translateY(-101%)} body.has-pilot.pilot-fuera nav{top:0 !important} body.has-pilot.pilot-fuera #rv-progress{top:0} body.has-pilot.pilot-fuera .mnav{top:0} body.has-pilot.pilot-fuera .mnav{height:100dvh;max-height:100dvh} /* Con el menú móvil abierto el aviso no pinta nada: estorba y puede quedar por encima. Se retira mientras dure. */ body:has(.mnav.on) #pilotbar{transform:translateY(-101%)} /* Quien pide menos movimiento no ve el deslizamiento, pero el aviso se aparta igual — lo que molestaba era ocupar sitio, no la animación. */ @media (prefers-reduced-motion:reduce){ #pilotbar{transition:none} } @media(max-width:760px){ :root{--pilot-h:52px} #pilotbar{font-size:.76rem;padding:.5rem .85rem;line-height:1.4} } @media(max-width:420px){ :root{--pilot-h:58px} } /* Quien tenga el sistema en alto contraste ve la nota aún más marcada. */ @media (prefers-contrast:more){ #pilotbar{background:#FFF8DC;color:#2A0E28;border-bottom-width:2px} }