/* ============================================================ ROCALDE — Banner de consentimiento (SITE-PROD-BUILD-1) El banner se inyecta en , FUERA de .rocalde-home, por lo que no hereda sus variables: los tokens de marca se declaran aquí de nuevo, scoped bajo .rh-consent. Autocontenido y portable. Tokens oficiales: 01_MARCA/02_IDENTIDAD_VISUAL ============================================================ */ .rh-consent { --rhc-teal: #1E9BC4; --rhc-orange: #F26A1B; --rhc-dark: #080E18; --rhc-surface:#173042; --rhc-text: rgba(244, 247, 250, 0.92); --rhc-dim: rgba(198, 214, 226, 0.72); --rhc-line: rgba(214, 222, 227, 0.16); position: fixed; z-index: 9999; inset: auto 0 0 0; box-sizing: border-box; padding: 1rem; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--rhc-text); animation: rhc-in .32s cubic-bezier(.2, .7, .3, 1) both; } @keyframes rhc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rh-consent { animation: none; } } .rh-consent *, .rh-consent *::before, .rh-consent *::after { box-sizing: border-box; } .rh-consent__inner { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border: 1px solid var(--rhc-line); border-radius: 14px; background: rgba(8, 14, 24, 0.94); backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); } .rh-consent__text { flex: 1 1 420px; min-width: 0; } .rh-consent__title { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; } .rh-consent__text p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--rhc-dim); } .rh-consent__text a { color: var(--rhc-teal); text-decoration: underline; text-underline-offset: 2px; } .rh-consent__opts { margin-top: .9rem; display: grid; gap: .55rem; padding-top: .9rem; border-top: 1px solid var(--rhc-line); } /* El atributo [hidden] debe ganarle a los display: de arriba. Sin esto, el panel de opciones y el botón "Guardar selección" se muestran de entrada. */ .rh-consent [hidden] { display: none !important; } .rh-consent__opt { display: flex; gap: .6rem; align-items: flex-start; font-size: .8125rem; line-height: 1.5; color: var(--rhc-dim); cursor: pointer; } .rh-consent__opt--locked { cursor: default; opacity: .75; } .rh-consent__opt input { margin-top: .25rem; accent-color: var(--rhc-teal); flex: none; } .rh-consent__opt strong { color: var(--rhc-text); font-weight: 600; } .rh-consent__actions { display: flex; flex-wrap: wrap; gap: .5rem; flex: 0 1 auto; } .rh-consent__btn { font: inherit; font-size: .8125rem; font-weight: 600; padding: .6rem 1.1rem; border-radius: 8px; border: 1px solid var(--rhc-line); background: var(--rhc-surface); color: var(--rhc-text); cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .rh-consent__btn:hover { background: #1d3d52; border-color: rgba(30, 155, 196, .5); } .rh-consent__btn:active { transform: translateY(1px); } .rh-consent__btn:focus-visible { outline: 2px solid var(--rhc-teal); outline-offset: 2px; } .rh-consent__btn--primary { background: var(--rhc-orange); border-color: var(--rhc-orange); color: #fff; } .rh-consent__btn--primary:hover { background: #ff7a2b; border-color: #ff7a2b; } .rh-consent__btn--ghost { background: transparent; } @media (prefers-reduced-motion: reduce) { .rh-consent__btn { transition: none; } } @media (max-width: 640px) { .rh-consent__inner { padding: 1.1rem; } .rh-consent__actions { width: 100%; } .rh-consent__btn { flex: 1 1 auto; } }