web-next: banner de consentimiento de cookies + estado de la API (Zaraz)

- Banner real `uw-cookie-content` (Rechazar/Personalizar/Aceptar todas) fijo
  abajo y site-wide (montado en el layout, componente CookieBanner). Aparece
  en la primera visita, guarda la decisión en la cookie uw_cookie_consent (1
  año) y se sincroniza con Cloudflare Zaraz si está presente
  (zaraz.consent.setAll / .modal). Estilos en globals.css.
- «Personalizar» abre el modal granular de Zaraz (o /cookies si no hay Zaraz).
- window.UWCookies {showBanner, revokeConsent, acceptAll, rejectAll}.
- Página /cookies: panel «Tu estado de consentimiento» (ConsentStatus) que
  muestra los datos EN VIVO de la API de Zaraz (zaraz.consent.getAll()) por
  propósito; si Zaraz no está, cae a la preferencia guardada por categoría.

Verificado con navegador: el banner aparece, «Aceptar todas» lo oculta y
escribe la cookie, y el panel de /cookies refleja el estado.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/app/[locale]/cookies/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 import { Link } from '@/i18n/navigation'
-import { CookieConsentButtons } from '@/components/CookieConsent'
+import { CookieConsentButtons, ConsentStatus } from '@/components/CookieConsent'
 
 export const metadata: Metadata = {
   title: 'Declaración de Cookies',
@@ -163,6 +163,7 @@ export default function CookiesPage() {
               <span>Tu estado de consentimiento</span>
               <p>Puedes cambiar o retirar tu consentimiento en cualquier momento. Al contactarnos respecto a su consentimiento, por favor, indique la fecha de su consentimiento.</p>
 
+              <ConsentStatus />
               <CookieConsentButtons />
               <br />
               <hr />

web-next/app/[locale]/layout.tsx

@@ -7,6 +7,7 @@ import { Header } from '@/components/Header'
 import { Video } from '@/components/Video'
 import { Social } from '@/components/Social'
 import { Footer } from '@/components/Footer'
+import { CookieBanner } from '@/components/CookieConsent'
 import '../globals.css'
 
 export function generateStaticParams() {
@@ -73,6 +74,7 @@ export default async function LocaleLayout({
           {children}
           <Social />
           <Footer />
+          <CookieBanner />
         </NextIntlClientProvider>
       </body>
     </html>

web-next/app/globals.css

@@ -197,6 +197,108 @@ textarea:focus {
   color: #fff;
 }
 
+/* Banner de consentimiento de cookies (fijo abajo). */
+.uw-cookie-content {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  flex-wrap: wrap;
+  padding: 16px 24px;
+  background: #140d08;
+  border-top: 2px solid #4a3320;
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.55);
+}
+.uw-cookie-text {
+  flex: 1 1 420px;
+}
+.uw-cookie-text h3 {
+  color: #d79602;
+  margin-bottom: 6px;
+}
+.uw-cookie-text p {
+  color: #b1997f;
+  font-size: 14px;
+  line-height: 20px;
+}
+.uw-cookie-link {
+  display: inline-block;
+  margin-top: 6px;
+  color: #2471a9;
+}
+.uw-cookie-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.uw-cookie-btn {
+  border: 2px solid #352e2b;
+  background: hsla(0, 0%, 100%, 0.05);
+  color: #ebdec2;
+  padding: 9px 16px;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 14px;
+  transition: 0.3s;
+}
+.uw-cookie-btn:hover {
+  background: hsla(0, 0%, 100%, 0.1);
+  color: #fff;
+}
+.uw-cookie-btn-accept {
+  border-color: #b17c02;
+  color: #f0b93f;
+}
+.uw-cookie-btn-accept:hover {
+  background: hsla(40, 90%, 45%, 0.15);
+  color: #fff;
+}
+.uw-cookie-btn-reject {
+  border-color: #5c2b2b;
+  color: #d98c8c;
+}
+
+/* Panel «Tu estado de consentimiento» en /cookies (datos de la API de Zaraz). */
+.uw-consent-status {
+  border: 1px solid #352e2b;
+  padding: 12px 14px;
+  margin: 12px 0;
+}
+.uw-consent-status .uw-consent-source {
+  font-size: 13px;
+  color: #7e8d09;
+  margin-bottom: 8px;
+}
+.uw-consent-status ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.uw-consent-status li {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 0;
+  border-bottom: 1px solid #241812;
+}
+.uw-consent-status li:last-child {
+  border-bottom: 0;
+}
+.uw-consent-on {
+  color: #6aa84f;
+}
+.uw-consent-off {
+  color: #cc5b5b;
+}
+.uw-consent-always {
+  color: #b1997f;
+}
+
 /* Colores de clase de WoW (nombre de personaje) */
 .class-warrior { color: #c79c6e; }
 .class-paladin { color: #f58cba; }