/* CARÓPTIMO · banner de consentimiento. Usa los tokens de la web («A pie de calle»):
   si cambia la paleta en :root, el banner cambia solo. */

.cc{position:fixed; left:0; right:0; bottom:0; z-index:9000; padding:var(--gutter, 16px);
  padding-bottom:max(var(--gutter, 16px), env(safe-area-inset-bottom));
  display:flex; justify-content:flex-start; pointer-events:none}
.cc-caja{pointer-events:auto; width:min(440px, 100%); background:var(--fondo-2, #1A1917); color:var(--texto, #F3F0EA);
  border:1px solid var(--linea, rgba(243,240,234,.12)); border-radius:var(--radio, 6px);
  padding:24px; box-shadow:0 24px 60px rgba(0,0,0,.5);
  transform:translateY(16px); opacity:0; transition:transform .35s var(--curva, ease), opacity .35s var(--curva, ease)}
.cc-visible .cc-caja{transform:none; opacity:1}
.cc-caja h2{font-size:20px; font-weight:700; letter-spacing:-.01em; margin-bottom:8px}
.cc-caja > div > p{color:var(--texto-2, #A8A39A); font-size:15px; line-height:1.5}

.cc-opciones{margin-top:18px; border-top:1px solid var(--linea, rgba(243,240,234,.12))}
.cc-fila{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--linea, rgba(243,240,234,.12)); cursor:pointer}
.cc-fila:last-child{border-bottom:none}
.cc-fija{cursor:default}
.cc-fila strong{display:block; font-size:15px; font-weight:600}
.cc-fila small{display:block; margin-top:3px; color:var(--texto-2, #A8A39A); font-size:13px; line-height:1.45}
.cc-fila input[type=checkbox]{flex:none; width:20px; height:20px; margin-top:2px; accent-color:var(--acento, #F28A2E)}
.cc-siempre{flex:none; margin-top:2px; color:var(--tenue, rgba(243,240,234,.5)); font-size:13px}

/* «Rechazar todas» tiene el mismo tamaño y el mismo sitio que «Aceptar todas» (guía de la AEPD, 2023) */
.cc-botones{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.cc-botones .boton, .cc-botones .boton-sec, .cc-botones .cc-guardar{flex:1 1 160px; min-height:48px; font-size:15px}
.cc-elegir{flex:1 1 100%; min-height:40px; color:var(--texto-2, #A8A39A); font-size:14px; text-decoration:underline;
  text-underline-offset:3px}
.cc-elegir:hover{color:var(--texto, #F3F0EA)}
.cc-pie{margin-top:14px; font-size:13px; color:var(--tenue, rgba(243,240,234,.5))}
.cc-pie a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.cc-pie a:hover{color:var(--texto, #F3F0EA)}

@media (max-width:520px){
  .cc{padding:12px}
  .cc-caja{padding:20px}
  .cc-botones .boton, .cc-botones .boton-sec{flex:1 1 100%}
}
@media (prefers-reduced-motion: reduce){
  .cc-caja{transition:none; transform:none; opacity:1}
}