/* ========== C&C Global Commerce - Public UI (Dark/Light) ========== */

/* Tipografía */
:root{
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Oro profesional (no amarillo chillón) */
:root{
  --gold-1:#D4AF37;  /* principal */
  --gold-2:#B8922E;  /* hover */
  --gold-3:#8A6B1C;  /* deep */
}

/* DARK por defecto */
:root{
  --bg: #070A12;
  --bg2:#0B1020;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);

  --text:#EAF0FF;
  --muted: rgba(234,240,255,.72);

  --card:#0D1428;
  --card2:#0A1022;

  --input-bg: rgba(255,255,255,.07);
  --input-stroke: rgba(255,255,255,.14);

  --shadow: 0 10px 40px rgba(0,0,0,.35);

  --link: #EAF0FF;
  --link2: rgba(234,240,255,.8);
}

/* LIGHT */
html[data-theme="light"]{
  --bg:#F7F8FB;
  --bg2:#FFFFFF;
  --surface: rgba(10,20,40,.06);
  --surface2: rgba(10,20,40,.08);
  --stroke: rgba(10,20,40,.14);

  --text:#0B1324;
  --muted: rgba(11,19,36,.70);

  --card:#FFFFFF;
  --card2:#F2F5FB;

  --input-bg: rgba(10,20,40,.05);
  --input-stroke: rgba(10,20,40,.14);

  --shadow: 0 10px 40px rgba(12,18,33,.12);

  --link:#0B1324;
  --link2: rgba(11,19,36,.8);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(212,175,55,.20), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(60,140,255,.16), transparent 60%),
              radial-gradient(700px 500px at 60% 80%, rgba(153,60,255,.14), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
}

/* Fondo con grid + formas */
.bg-canvas{
  position:relative;
  isolation:isolate;
  min-height:100vh;
}
.bg-canvas::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity:.10;
  pointer-events:none;
}
html[data-theme="light"] .bg-canvas::before{
  background:
    linear-gradient(to right, rgba(10,20,40,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,20,40,.10) 1px, transparent 1px);
  opacity:.12;
}

.bg-canvas::after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-3;
  background:
    radial-gradient(800px 500px at 15% 15%, rgba(212,175,55,.25), transparent 65%),
    radial-gradient(700px 500px at 85% 20%, rgba(45,120,255,.22), transparent 60%),
    radial-gradient(700px 500px at 55% 85%, rgba(150,60,255,.18), transparent 60%);
  filter: blur(6px);
  opacity:.75;
  pointer-events:none;
}

/* Layout */
.container{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
}

.nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.05));
  border-bottom:1px solid var(--stroke);
}
html[data-theme="light"] .nav{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text);
}
.brand-badge{
  width:42px; height:42px;
  border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--gold-1), #7A5B16);
  color:#0B0F1A;
  font-weight:800;
  box-shadow: 0 10px 30px rgba(212,175,55,.25);
}
.brand-title{ font-weight:800; line-height:1.1; }
.brand-sub{ font-size:12px; color:var(--muted); }

.nav-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.nav-links a{
  color:var(--link2);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  padding:10px 10px;
  border-radius:10px;
}
.nav-links a:hover{
  color:var(--link);
  background:var(--surface);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  box-shadow: none;
}
.btn:hover{ background: var(--surface2); }
.btn-primary{
  background: linear-gradient(135deg, var(--gold-1), #7A5B16);
  border-color: rgba(212,175,55,.45);
  color:#0B0F1A;
}
.btn-primary:hover{ background: linear-gradient(135deg, var(--gold-2), #6A4F12); }
.btn-ghost{
  background: transparent;
}
.pill{
  border-radius:999px;
}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
}
html[data-theme="light"] .card{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
}
.card-inner{ padding:18px; }

.h1{ font-size: clamp(28px, 3.2vw, 46px); margin:0 0 10px; letter-spacing:-.02em; }
.h2{ font-size: clamp(20px, 2.2vw, 28px); margin:0 0 10px; letter-spacing:-.01em; }
.p{ color: var(--muted); margin:0; line-height:1.6; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.35);
  background: rgba(212,175,55,.10);
  color: understanding;
  color: var(--text);
  font-weight:700;
  font-size:12px;
}

/* Forms */
.input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--input-stroke);
  background: var(--input-bg);
  color: var(--text);
  outline:none;
}
.input::placeholder, textarea::placeholder{ color: rgba(234,240,255,.55); }
html[data-theme="light"] .input::placeholder,
html[data-theme="light"] textarea::placeholder{ color: rgba(11,19,36,.45); }

label{ font-weight:800; font-size:13px; display:block; margin:0 0 8px; color: var(--text); }

/* Grids */
.grid{
  display:grid;
  gap:16px;
}
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px){
  .grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2{ grid-template-columns: 1fr; }
  .nav-inner{ flex-wrap:wrap; }
}

/* Product cards */
.product-card{
  overflow:hidden;
  position:relative;
}
.product-img{
  height:200px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(212,175,55,.20), rgba(60,140,255,.18));
  border:1px solid var(--stroke);
  overflow:hidden;
}
.product-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.product-meta{
  margin-top:12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.price{
  font-weight:900;
  color: var(--gold-1);
}

/* Footer */
.footer{
  margin-top:40px;
  padding:22px 0;
  border-top:1px solid var(--stroke);
  color: var(--muted);
}
.footer a{ color: var(--link2); text-decoration:none; font-weight:700; }
.footer a:hover{ color: var(--link); }

/* Fix tablas claras sobre fondo oscuro */
table{
  width:100%;
  border-collapse: collapse;
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
}
th, td{
  padding:12px;
  border-bottom:1px solid var(--stroke);
  color: var(--text);
}
th{ text-align:left; font-weight:900; background: rgba(255,255,255,.06); }
html[data-theme="light"] th{ background: rgba(10,20,40,.06); }

/* ===========================
   FIX: Footer social icons
   - en fila (no en columna)
   - tamaño proporcional
   - sin textos/labels debajo
   =========================== */

/* Contenedor: soporta varios nombres comunes */
footer .cc-socials,
footer .social-links,
footer .social-icons,
footer .footer-social,
footer .footer-socials,
footer ul.social,
footer ul.social-links,
footer .social {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Si vienen como lista */
footer .cc-socials li,
footer .social-links li,
footer .social-icons li,
footer .footer-social li,
footer .footer-socials li,
footer ul.social li,
footer ul.social-links li,
footer .social li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
}

/* Link del icono */
footer a.cc-social-icon,
footer .cc-socials a,
footer .social-links a,
footer .social-icons a,
footer .footer-social a,
footer .footer-socials a,
footer ul.social a,
footer ul.social-links a,
footer .social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  line-height: 0 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
}

/* Tamaño de SVG / IMG (evita que se vean gigantes) */
footer a.cc-social-icon svg,
footer .cc-socials svg,
footer .social-links svg,
footer .social-icons svg,
footer .footer-social svg,
footer .footer-socials svg,
footer ul.social svg,
footer ul.social-links svg,
footer .social svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

footer a.cc-social-icon img,
footer .cc-socials img,
footer .social-links img,
footer .social-icons img,
footer .footer-social img,
footer .footer-socials img,
footer ul.social img,
footer ul.social-links img,
footer .social img {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Oculta labels/textos debajo del icono si existen */
footer .cc-social-label,
footer .social-label,
footer .label,
footer .name {
  display: none !important;
}


/* ===========================
   Dark mode overrides (Tailwind light utilities)
   =========================== */
html.dark .bg-white { background-color: var(--card) !important; }
html.dark .bg-gray-50,
html.dark .bg-gray-100 { background-color: color-mix(in srgb, var(--bg) 92%, white 8%) !important; }

html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 { color: var(--fg) !important; }

html.dark .text-gray-600,
html.dark .text-gray-500 { color: var(--muted) !important; }

html.dark .text-gray-400 { color: rgba(226,232,240,.55) !important; }

html.dark .border-gray-200,
html.dark .border-gray-300 { border-color: var(--border) !important; }

/* Inputs / selects / textareas que se quedan blancos */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: var(--card) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgba(226,232,240,.55) !important;
}

/* Cards comunes */
html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md {
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}

/* =========================================================
   FIX LEGIBILIDAD (modo oscuro)
   - Muchas vistas usan bg-white sin dark:..., y el texto queda claro sobre blanco.
   - Esto fuerza esas cards a verse "dark" cuando html.dark está activo.
   ========================================================= */
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-slate-50,
html.dark .bg-slate-100{
  background-color: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}

html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-slate-50,
html.dark .bg-slate-100{
  color: rgba(226,232,240,.96) !important;
}

html.dark .bg-white * ,
html.dark .bg-gray-50 * ,
html.dark .bg-gray-100 * ,
html.dark .bg-slate-50 * ,
html.dark .bg-slate-100 *{
  color: inherit;
}

/* Inputs y placeholders en dark */
html.dark input,
html.dark select,
html.dark textarea{
  color: rgba(226,232,240,.96) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder{
  color: rgba(226,232,240,.55) !important;
}

/* =========================================================
   FIX BOTONES AMARILLOS / DORADOS
   - Algunos botones (pagar/continuar) usan fondo amarillo con texto claro.
   - Forzamos texto oscuro sobre fondos yellow/amber.
   ========================================================= */
button[class*="bg-yellow-"],
a[class*="bg-yellow-"],
button[class*="bg-amber-"],
a[class*="bg-amber-"]{
  color: #0b1220 !important;
}

button[class*="bg-yellow-"] *,
a[class*="bg-yellow-"] *,
button[class*="bg-amber-"] *,
a[class*="bg-amber-"] *{
  color: #0b1220 !important;
}


/* =========================================================
   FIX: Botones amarillos (pagar/continuar) -> TEXTO NEGRO
   (forzado fuerte para ganarle a text-white / inline)
   ========================================================= */

html.dark button,
html.dark a,
html.dark input[type="submit"]{
  -webkit-text-fill-color: inherit;
}

/* cualquier botón/link con fondo amarillo/amber (Tailwind) */
html.dark button[class*="bg-yellow"],
html.dark a[class*="bg-yellow"],
html.dark input[type="submit"][class*="bg-yellow"],
html.dark button[class*="bg-amber"],
html.dark a[class*="bg-amber"],
html.dark input[type="submit"][class*="bg-amber"],
/* por si usan gradients tipo from-yellow/amber */
html.dark button[class*="from-yellow"],
html.dark a[class*="from-yellow"],
html.dark button[class*="from-amber"],
html.dark a[class*="from-amber"]{
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}

/* el texto interno (span, strong, etc) también */
html.dark button[class*="bg-yellow"] *,
html.dark a[class*="bg-yellow"] *,
html.dark input[type="submit"][class*="bg-yellow"] *,
html.dark button[class*="bg-amber"] *,
html.dark a[class*="bg-amber"] *,
html.dark input[type="submit"][class*="bg-amber"] *,
html.dark button[class*="from-yellow"] *,
html.dark a[class*="from-yellow"] *,
html.dark button[class*="from-amber"] *,
html.dark a[class*="from-amber"] *{
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}


/* =========================================================
   Bordes dorados en dark (cajas / cards / contenedores)
   ========================================================= */
html.dark .border-yellow-400,
html.dark .border-yellow-500,
html.dark .border-amber-400,
html.dark .border-amber-500{
  border-color: rgba(209, 177, 90, .95) !important; /* dorado */
}

/* Si hay contenedores con border pero sin clase específica */
html.dark .ring-yellow-400,
html.dark .ring-yellow-500,
html.dark .ring-amber-400,
html.dark .ring-amber-500{
  --tw-ring-color: rgba(209, 177, 90, .95) !important;
}


/* =========================================================
   Bordes dorados GLOBAL (modo oscuro) para cajas/cards/panels
   ========================================================= */
html.dark{
  --cc-gold-border: rgba(209, 177, 90, .85);   /* dorado */
  --cc-gold-border-strong: rgba(225, 196, 106, .95);
}

/* Cajas comunes (si existen en tu HTML) */
html.dark .cc-card,
html.dark .card,
html.dark .panel,
html.dark .box,
html.dark .checkout-card,
html.dark .order-card,
html.dark .payment-card,
html.dark .summary-card{
  border-color: var(--cc-gold-border) !important;
}

/* Target genérico para “cajas” típicas del sitio:
   - elementos con borde y esquinas redondeadas
   - y con fondo oscuro tipo panel
*/
html.dark .rounded-xl.border,
html.dark .rounded-2xl.border,
html.dark .rounded-lg.border{
  border-color: var(--cc-gold-border) !important;
}

/* Si el borde viene de ring (Tailwind) */
html.dark .ring-1,
html.dark .ring{
  --tw-ring-color: var(--cc-gold-border) !important;
}

/* Hover/focus un poquito más fuerte */
html.dark .cc-card:hover,
html.dark .card:hover,
html.dark .panel:hover,
html.dark .rounded-xl.border:hover,
html.dark .rounded-2xl.border:hover{
  border-color: var(--cc-gold-border-strong) !important;
}


/* CC GLOBAL GOLD BORDER */
html.dark{
  --border: rgba(209, 177, 90, .75);
}


/* =========================
   GOLD BORDERS (GLOBAL DARK)
   ========================= */
html.dark{
  --border: rgba(198,164,74,.55);
  --border-strong: rgba(198,164,74,.75);
}

/* Cajas típicas */
html.dark .border,
html.dark .border-t,
html.dark .border-b,
html.dark .border-l,
html.dark .border-r{
  border-color: var(--border) !important;
}

/* Si alguna vista trae utilidades tipo border-white/10, border-slate-700, etc */
html.dark [class*="border-white"],
html.dark [class*="border-slate"],
html.dark [class*="border-gray"],
html.dark [class*="border-zinc"],
html.dark [class*="border-neutral"],
html.dark [class*="border-stone"]{
  border-color: var(--border) !important;
}

/* Inputs/textarea/select para que también se vean consistentes */
html.dark input,
html.dark textarea,
html.dark select{
  border-color: var(--border) !important;
}

/* =========================================================

/* =========================================================
   CC BACKGROUND — Dubai Tech Ribbons (NO dots, NO grid)
   - Figuras grandes con movimiento suave
   - Mashrabiya solo en esquinas (UAE vibe sutil)
   - Funciona en dark y light
   ========================================================= */

.cc-bg{
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;

  /* tu paleta base */
  background:
    radial-gradient(900px 600px at 10% 8%, rgba(185,147,47,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(900px 600px at 55% 95%, rgba(168,85,247,.12), transparent 60%)
    !important;
}

/* ---------- FIGURAS TECH (ribbons) ---------- */
/* 3 “cintas” grandes, suaves, sin patrones repetitivos */
.cc-bg::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;

  background:
    /* ribbon 1 */
    radial-gradient(900px 260px at 10% 25%, rgba(56,189,248,.20), transparent 65%),
    /* ribbon 2 */
    radial-gradient(980px 300px at 95% 40%, rgba(168,85,247,.18), transparent 70%),
    /* ribbon 3 (oro) */
    radial-gradient(880px 260px at 30% 95%, rgba(198,164,74,.18), transparent 70%);

  filter: blur(22px);
  opacity: .85;
  transform: translateZ(0);
  animation: ccRibbons 26s ease-in-out infinite;
}

/* una línea “neón” sutil (curva) que se mueve lento */
.cc-bg::after{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;

  background:
    /* arco cyan */
    conic-gradient(from 210deg at 70% 55%,
      transparent 0 60%,
      rgba(56,189,248,.22) 62%,
      transparent 64% 100%),
    /* arco violeta */
    conic-gradient(from 40deg at 30% 65%,
      transparent 0 62%,
      rgba(168,85,247,.20) 64%,
      transparent 66% 100%),
    /* arco dorado */
    conic-gradient(from 120deg at 50% 35%,
      transparent 0 63%,
      rgba(198,164,74,.18) 65%,
      transparent 67% 100%);

  filter: blur(10px);
  opacity: .55;
  transform: translateZ(0);
  animation: ccArcs 34s linear infinite;
  mix-blend-mode: soft-light;
}

/* ---------- UAE: Mashrabiya corners (muy sutil) ---------- */
.cc-bg .cc-uae-corners{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;
  opacity: .10;           /* dark default */
  mix-blend-mode: overlay;
  transform: translateZ(0);
  animation: ccCorners 18s ease-in-out infinite;
}

.cc-bg .cc-uae-corners::before{
  content:"";
  position:absolute;
  inset:-10px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='rgba(198,164,74,0.85)' stroke-width='2'%3E%3Cpath d='M80 12 108 40 80 68 52 40 80 12Z'/%3E%3Cpath d='M80 68 108 96 80 124 52 96 80 68Z'/%3E%3Cpath d='M40 52 68 80 40 108 12 80 40 52Z'/%3E%3Cpath d='M120 52 148 80 120 108 92 80 120 52Z'/%3E%3Cpath d='M80 0 V160 M0 80 H160' stroke='rgba(198,164,74,0.22)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;

  -webkit-mask-image:
    radial-gradient(circle at 0% 0%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 100% 0%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 0% 100%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 52% 52%;
  -webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

  mask-image:
    radial-gradient(circle at 0% 0%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 100% 0%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 0% 100%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%);
  mask-repeat: no-repeat;
  mask-size: 52% 52%;
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

  filter: blur(.2px);
  opacity: 1;
}

/* Animaciones suaves (NO bruscas) */
@keyframes ccRibbons{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(16px,-10px,0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes ccArcs{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  100% { transform: translate3d(0,0,0) rotate(360deg); }
}
@keyframes ccCorners{
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(0,-4px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* Light: se nota más (pero elegante) */
html:not(.dark) .cc-bg{
  background:
    radial-gradient(900px 600px at 10% 8%, rgba(185,147,47,.22), transparent 62%),
    radial-gradient(900px 600px at 90% 20%, rgba(56,189,248,.22), transparent 62%),
    radial-gradient(900px 600px at 55% 95%, rgba(168,85,247,.18), transparent 64%)
    !important;
}
html:not(.dark) .cc-bg::before{ opacity: .95; }
html:not(.dark) .cc-bg::after { opacity: .62; mix-blend-mode: multiply; }
html:not(.dark) .cc-bg .cc-uae-corners{ opacity: .16; mix-blend-mode: multiply; }

/* Dark: baja ruido para que NO moleste */
html.dark .cc-bg::before{ opacity: .78; }
html.dark .cc-bg::after { opacity: .42; }
html.dark .cc-bg .cc-uae-corners{ opacity: .10; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .cc-bg::before, .cc-bg::after, .cc-bg .cc-uae-corners{ animation: none !important; }
}


/* =========================================================
   CC BG - Tech + Dubai/UAE (partículas + circuitos + skyline)
   - Funciona en modo oscuro y claro
   - Partículas + circuitos con movimiento suave
   - Skyline estilo outline (Burj Khalifa vibe)
   ========================================================= */

.cc-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* 1) PARTÍCULAS (dots) - se mueven con background-position */
.cc-bg::before{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;

  background-image:
    radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.8px),
    radial-gradient(circle, rgba(185,147,47,.18) 1px, transparent 2px);

  background-size:
    26px 26px,
    44px 44px;

  background-position: 0 0, 0 0;
  opacity: .55;
  animation: ccDubaiParticles 18s linear infinite;
}

/* 2) CIRCUITOS / GRID TECH (suave) */
.cc-bg::after{
  content:"";
  position:absolute;
  inset:-15%;
  pointer-events:none;

  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 140px),
    radial-gradient(circle at 20% 25%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(168,85,247,.16), transparent 62%),
    radial-gradient(circle at 55% 85%, rgba(185,147,47,.16), transparent 62%);

  opacity: .55;
  animation: ccDubaiGrid 26s ease-in-out infinite;
}

/* 3) DUBAI SKYLINE (outline) */
.cc-bg .cc-dubai-skyline{
  position:absolute;
  inset:0;
  pointer-events:none;

  background-repeat: repeat-x;
  background-size: 520px 220px;
  background-position: 0 100%;
  animation: ccDubaiSky 40s linear infinite;

  opacity: .22; /* dark */
  mix-blend-mode: normal;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='220' viewBox='0 0 520 220'%3E%3Crect width='520' height='220' fill='none'/%3E%3Cg fill='none' stroke='rgba(198,164,74,0.85)' stroke-width='2'%3E%3Cpath d='M260 18 l6 24 -4 0 6 28 -4 0 6 34 -4 0 5 42 -4 0 4 52'/%3E%3Cpath d='M246 154 v38 h28 v-38'/%3E%3Cpath d='M70 172 v20 h26 v-30 h18 v40'/%3E%3Cpath d='M130 182 v10 h18 v-22 h18 v32'/%3E%3Cpath d='M360 170 v22 h26 v-34 h18 v44'/%3E%3Cpath d='M410 182 v10 h18 v-24 h18 v34'/%3E%3Cpath d='M30 192 H490'/%3E%3C/g%3E%3Cg fill='rgba(198,164,74,0.22)'%3E%3Ccircle cx='260' cy='18' r='3'/%3E%3Ccircle cx='96' cy='162' r='2'/%3E%3Ccircle cx='382' cy='158' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* 4) MODO CLARO: subimos contraste para que se note */
html:not(.dark) .cc-bg::before{
  opacity: .75;
  background-image:
    radial-gradient(circle, rgba(15,23,42,.20) 1px, transparent 1.9px),
    radial-gradient(circle, rgba(185,147,47,.22) 1px, transparent 2px);
}

html:not(.dark) .cc-bg::after{
  opacity: .65;
  background-image:
    repeating-linear-gradient(90deg, rgba(15,23,42,.08) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg,  rgba(15,23,42,.07) 0 1px, transparent 1px 140px),
    radial-gradient(circle at 20% 25%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(168,85,247,.14), transparent 62%),
    radial-gradient(circle at 55% 85%, rgba(185,147,47,.18), transparent 62%);
}

html:not(.dark) .cc-bg .cc-dubai-skyline{
  opacity: .28;
}

/* Animaciones */
@keyframes ccDubaiParticles{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 160px -120px, -220px 160px; }
}

@keyframes ccDubaiGrid{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(1.2%, -0.8%, 0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

@keyframes ccDubaiSky{
  0%   { background-position: 0 100%; }
  100% { background-position: 520px 100%; }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .cc-bg::before,
  .cc-bg::after,
  .cc-bg .cc-dubai-skyline{
    animation: none !important;
  }
}


/* =========================================================
   CC BG - Figuras sutiles (hex + circuit lines) SIN recargar
   Requiere: <div class="cc-bg"><div class="cc-dubai-skyline"></div></div>
   ========================================================= */

/* Capa de figuras */
.cc-bg .cc-figures{
  position:absolute;
  inset:-10%;
  pointer-events:none;
  z-index: 1; /* arriba de ::before y ::after */
  opacity: .28; /* base */
  mix-blend-mode: soft-light;
  animation: ccFiguresFloat 32s ease-in-out infinite;
  filter: blur(.0px);
}

/* SVG liviano: hexágonos + líneas tipo circuito (muy sutil) */
.cc-bg .cc-figures::before{
  content:"";
  position:absolute;
  inset:0;

  background-repeat: repeat;
  background-size: 760px 460px;
  background-position: 0 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='460' viewBox='0 0 760 460'%3E%3Crect width='760' height='460' fill='none'/%3E%3Cg fill='none' stroke='rgba(56,189,248,0.55)' stroke-width='1.2'%3E%3Cpath d='M90 70 l28 16 v32 l-28 16 -28-16V86z'/%3E%3Cpath d='M230 120 l30 17 v34 l-30 17 -30-17v-34z'/%3E%3Cpath d='M520 90 l34 19 v38 l-34 19 -34-19v-38z'/%3E%3Cpath d='M640 220 l28 16 v32 l-28 16 -28-16v-32z'/%3E%3Cpath d='M150 300 l36 20 v40 l-36 20 -36-20v-40z'/%3E%3Cpath d='M420 300 l30 17 v34 l-30 17 -30-17v-34z'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(198,164,74,0.55)' stroke-width='1.2'%3E%3Cpath d='M40 210 H160 M160 210 v-40 M160 170 h60'/%3E%3Cpath d='M310 250 h120 m0 0 v-50 m0 50 h70'/%3E%3Cpath d='M520 210 h120 m0 0 v60 m0-60 h60'/%3E%3Cpath d='M120 410 h140 m0 0 v-40 m0 40 h70'/%3E%3C/g%3E%3Cg fill='rgba(198,164,74,0.30)'%3E%3Ccircle cx='160' cy='170' r='2.2'/%3E%3Ccircle cx='370' cy='200' r='2.2'/%3E%3Ccircle cx='640' cy='210' r='2.2'/%3E%3Ccircle cx='260' cy='370' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Pequeño “parpadeo”/respiro sin ser brusco */
@keyframes ccFiguresFloat{
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .26; }
  50%  { transform: translate3d(18px,-10px,0) scale(1.01); opacity: .32; }
  100% { transform: translate3d(0,0,0) scale(1); opacity: .26; }
}

/* Ajustes por modo: en dark se ve menos, en light se ve un poco más */
html.dark .cc-bg .cc-figures{
  opacity: .22;
  mix-blend-mode: screen; /* resalta suave sobre oscuro */
}

html:not(.dark) .cc-bg .cc-figures{
  opacity: .30;
  mix-blend-mode: multiply; /* se nota sobre claro */
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .cc-bg .cc-figures{ animation: none !important; }
}


/* =========================================================
   FIX: Figuras visibles + movimiento suave (dark & light)
   ========================================================= */

/* Aislamos para que no “desaparezcan” por blend */
.cc-bg{ isolation: isolate; }

/* Más presencia (pero sin molestar) */
.cc-bg .cc-figures{
  z-index: 2;
  opacity: .40;
  mix-blend-mode: normal; /* clave: que se vea */
}

/* SVG más contrastado + animación por background-position */
.cc-bg .cc-figures::before{
  background-size: 560px 340px;
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(198,164,74,.08));
  animation: ccFiguresMove 38s linear infinite;
}

/* Dark: se ve bien sobre oscuro sin “ensuciar” */
html.dark .cc-bg .cc-figures{
  opacity: .34;
}
html.dark .cc-bg .cc-figures::before{
  filter: drop-shadow(0 0 14px rgba(198,164,74,.10));
}

/* Light: se ve más (porque en claro cuesta) */
html:not(.dark) .cc-bg .cc-figures{
  opacity: .48;
}
html:not(.dark) .cc-bg .cc-figures::before{
  filter: drop-shadow(0 0 10px rgba(15,23,42,.10));
}

/* Movimiento real y suave */
@keyframes ccFiguresMove{
  0%   { background-position:   0px   0px; }
  50%  { background-position: 140px -80px; }
  100% { background-position: 280px -160px; }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .cc-bg .cc-figures::before{ animation: none !important; }
}


/* =========================================================
   CC BACKGROUND — Dubai Tech Ribbons (NO dots, NO grid)
   - Figuras grandes con movimiento suave
   - Mashrabiya solo en esquinas (UAE vibe sutil)
   - Funciona en dark y light
   ========================================================= */

.cc-bg{
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;

  /* tu paleta base */
  background:
    radial-gradient(900px 600px at 10% 8%, rgba(185,147,47,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(900px 600px at 55% 95%, rgba(168,85,247,.12), transparent 60%)
    !important;
}

/* ---------- FIGURAS TECH (ribbons) ---------- */
/* 3 “cintas” grandes, suaves, sin patrones repetitivos */
.cc-bg::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;

  background:
    /* ribbon 1 */
    radial-gradient(900px 260px at 10% 25%, rgba(56,189,248,.20), transparent 65%),
    /* ribbon 2 */
    radial-gradient(980px 300px at 95% 40%, rgba(168,85,247,.18), transparent 70%),
    /* ribbon 3 (oro) */
    radial-gradient(880px 260px at 30% 95%, rgba(198,164,74,.18), transparent 70%);

  filter: blur(22px);
  opacity: .85;
  transform: translateZ(0);
  animation: ccRibbons 26s ease-in-out infinite;
}

/* una línea “neón” sutil (curva) que se mueve lento */
.cc-bg::after{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;

  background:
    /* arco cyan */
    conic-gradient(from 210deg at 70% 55%,
      transparent 0 60%,
      rgba(56,189,248,.22) 62%,
      transparent 64% 100%),
    /* arco violeta */
    conic-gradient(from 40deg at 30% 65%,
      transparent 0 62%,
      rgba(168,85,247,.20) 64%,
      transparent 66% 100%),
    /* arco dorado */
    conic-gradient(from 120deg at 50% 35%,
      transparent 0 63%,
      rgba(198,164,74,.18) 65%,
      transparent 67% 100%);

  filter: blur(10px);
  opacity: .55;
  transform: translateZ(0);
  animation: ccArcs 34s linear infinite;
  mix-blend-mode: soft-light;
}

/* ---------- UAE: Mashrabiya corners (muy sutil) ---------- */
.cc-bg .cc-uae-corners{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;
  opacity: .10;           /* dark default */
  mix-blend-mode: overlay;
  transform: translateZ(0);
  animation: ccCorners 18s ease-in-out infinite;
}

.cc-bg .cc-uae-corners::before{
  content:"";
  position:absolute;
  inset:-10px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='rgba(198,164,74,0.85)' stroke-width='2'%3E%3Cpath d='M80 12 108 40 80 68 52 40 80 12Z'/%3E%3Cpath d='M80 68 108 96 80 124 52 96 80 68Z'/%3E%3Cpath d='M40 52 68 80 40 108 12 80 40 52Z'/%3E%3Cpath d='M120 52 148 80 120 108 92 80 120 52Z'/%3E%3Cpath d='M80 0 V160 M0 80 H160' stroke='rgba(198,164,74,0.22)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;

  -webkit-mask-image:
    radial-gradient(circle at 0% 0%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 100% 0%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 0% 100%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 52% 52%;
  -webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

  mask-image:
    radial-gradient(circle at 0% 0%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 100% 0%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 0% 100%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 0 34%, rgba(0,0,0,0) 66%);
  mask-repeat: no-repeat;
  mask-size: 52% 52%;
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

  filter: blur(.2px);
  opacity: 1;
}

/* Animaciones suaves (NO bruscas) */
@keyframes ccRibbons{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(16px,-10px,0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes ccArcs{
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  100% { transform: translate3d(0,0,0) rotate(360deg); }
}
@keyframes ccCorners{
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(0,-4px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* Light: se nota más (pero elegante) */
html:not(.dark) .cc-bg{
  background:
    radial-gradient(900px 600px at 10% 8%, rgba(185,147,47,.22), transparent 62%),
    radial-gradient(900px 600px at 90% 20%, rgba(56,189,248,.22), transparent 62%),
    radial-gradient(900px 600px at 55% 95%, rgba(168,85,247,.18), transparent 64%)
    !important;
}
html:not(.dark) .cc-bg::before{ opacity: .95; }
html:not(.dark) .cc-bg::after { opacity: .62; mix-blend-mode: multiply; }
html:not(.dark) .cc-bg .cc-uae-corners{ opacity: .16; mix-blend-mode: multiply; }

/* Dark: baja ruido para que NO moleste */
html.dark .cc-bg::before{ opacity: .78; }
html.dark .cc-bg::after { opacity: .42; }
html.dark .cc-bg .cc-uae-corners{ opacity: .10; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .cc-bg::before, .cc-bg::after, .cc-bg .cc-uae-corners{ animation: none !important; }
}


/* =========================================================
   UAE TECH SHAPES BG (PRO, suave, figuras, ambos modos)
   Requiere en layout:
   <div class="cc-bg">
     <div class="cc-aurora"></div>
     <div class="cc-uae-pattern"></div>
     <div class="cc-dubai-skyline"></div>
   </div>
   Interacción: variables --mx/--my (parallax)
   ========================================================= */

:root{
  --mx: 0;
  --my: 0;
}

/* Base del fondo: no toca el contenido */
.cc-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

/* Mantén un fondo limpio y elegante */
.cc-bg{
  background:
    radial-gradient(900px 600px at 10% 8%, rgba(185,147,47,.14), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(900px 600px at 55% 95%, rgba(168,85,247,.10), transparent 60%);
}

/* Capa 1: “Aurora shapes” (figuras suaves, no puntos) */
.cc-bg .cc-aurora{
  position:absolute;
  inset:-20%;
  opacity: .22;
  transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px), 0);
  filter: blur(14px);
  will-change: transform;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,.35) 0 40%, rgba(0,0,0,1) 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,.35) 0 40%, rgba(0,0,0,1) 78%);
}

.cc-bg .cc-aurora::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 360px at 22% 30%, rgba(56,189,248,.24), transparent 62%),
    radial-gradient(520px 360px at 78% 25%, rgba(168,85,247,.20), transparent 62%),
    radial-gradient(560px 420px at 55% 80%, rgba(198,164,74,.22), transparent 64%),
    radial-gradient(420px 280px at 35% 65%, rgba(198,164,74,.12), transparent 68%),
    radial-gradient(420px 280px at 70% 70%, rgba(56,189,248,.10), transparent 70%);
  animation: ccAuroraFloat 26s ease-in-out infinite;
}

/* Capa 2: Patrón UAE (curvas/arabesco, NO cuadros) + deriva suave */
.cc-bg .cc-uae-pattern{
  position:absolute;
  inset:-10%;
  opacity: .16;
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 8px), 0);
  will-change: transform;
  mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,.28) 0 42%, rgba(0,0,0,1) 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,.28) 0 42%, rgba(0,0,0,1) 80%);
}

.cc-bg .cc-uae-pattern::before{
  content:"";
  position:absolute;
  inset:0;

  /* patrón de curvas tipo arabesco (ligero) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='rgba(198,164,74,0.55)' stroke-width='1.6'%3E%3Cpath d='M130 18c32 0 58 26 58 58 0 24-15 45-36 54 22 9 38 30 38 55 0 33-27 60-60 60s-60-27-60-60c0-25 16-46 38-55-21-9-36-30-36-54 0-32 26-58 58-58Z'/%3E%3Cpath d='M78 78c18 0 32 14 32 32 0 11-6 21-15 27 12 6 20 18 20 33 0 20-16 36-36 36s-36-16-36-36c0-15 9-27 21-33-9-6-15-16-15-27 0-18 14-32 32-32Z' opacity='0.55'/%3E%3Cpath d='M182 78c18 0 32 14 32 32 0 11-6 21-15 27 12 6 20 18 20 33 0 20-16 36-36 36s-36-16-36-36c0-15 9-27 21-33-9-6-15-16-15-27 0-18 14-32 32-32Z' opacity='0.55'/%3E%3C/g%3E%3Cg fill='rgba(56,189,248,0.10)'%3E%3Ccircle cx='130' cy='18' r='3'/%3E%3Ccircle cx='78' cy='78' r='2'/%3E%3Ccircle cx='182' cy='78' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 260px 260px;

  /* mover patrón suavemente */
  animation: ccPatternDrift 40s linear infinite;
  filter: blur(.15px);
}

/* Skyline Dubai (si ya lo tienes, lo dejamos suave) */
.cc-bg .cc-dubai-skyline{
  position:absolute;
  left:0; right:0; bottom:-8px; top:auto;
  height:260px;
  opacity: .18;
  transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 4px), 0);
  will-change: transform;
}

/* Ajustes modo claro: más contraste (SIN puntos) */
html:not(.dark) .cc-bg{
  background:
    radial-gradient(900px 600px at 10% 8%, rgba(185,147,47,.16), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(900px 600px at 55% 95%, rgba(168,85,247,.10), transparent 60%);
}

html:not(.dark) .cc-bg .cc-aurora{ opacity: .26; filter: blur(12px); }
html:not(.dark) .cc-bg .cc-uae-pattern{ opacity: .22; }
html:not(.dark) .cc-bg .cc-dubai-skyline{ opacity: .22; }

/* Ajustes modo oscuro: visible sin molestar */
html.dark .cc-bg .cc-aurora{ opacity: .20; }
html.dark .cc-bg .cc-uae-pattern{ opacity: .14; }
html.dark .cc-bg .cc-dubai-skyline{ opacity: .16; }

/* Animaciones suaves, nada brusco */
@keyframes ccAuroraFloat{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(18px,-10px,0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes ccPatternDrift{
  0%   { background-position: 0 0; }
  100% { background-position: 260px -260px; }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .cc-bg .cc-aurora::before,
  .cc-bg .cc-uae-pattern::before{
    animation: none !important;
  }
}