/* Todo Club · tema tornasol
   Sin morado: tinta casi negra + degradado iris (rosa → lavanda → celeste).
   Regla de contraste: sobre fondo claro, texto tinta y acentos con el degradado detrás;
   sobre fondo tinta, texto blanco y acentos con el degradado en las letras;
   sobre fondo iris, todo en tinta. */

/* Etiquetas pequeñas: píldora iris con texto tinta */
.etiqueta {
  display: inline-block; width: fit-content;
  padding: 5px 12px; border-radius: var(--radio-pill);
  background: var(--iris); color: var(--tinta);
}

/* Palabra destacada en títulos sobre fondo claro: resaltador iris */
.titulo .lila, .cabecera-pag h1 span, .cabecera h1 span, .hero-neg h1 span,
.lado h1 span, .listo h2 span#listo-palabra, .titular b, .cab-cuenta h2 {
  color: var(--tinta);
  background: var(--iris);
  background-repeat: no-repeat; background-size: 100% 82%; background-position: 0 58%;
  padding: 0 .12em; border-radius: .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Aire entre líneas y entre la etiqueta y el título, para que los resaltados no se peguen */
.titulo, .cabecera-pag h1, .cabecera h1, .hero-neg h1, .lado h1, .listo h2 { line-height: 1.04; }
.etiqueta { margin-bottom: 8px; }
.cab-cuenta h2 { background: none; padding: 0; }

/* Sobre fondo iris: sin resaltador */
.banda .titulo .lila, .espera .lila, .contacto .lila { background: none; padding: 0; color: var(--tinta); }

/* Sobre fondo tinta: letras con degradado, botones iris */
.oscura .titulo .lila, .cierre .lila, .privacidad .lila, .app-bloque .lila {
  background: var(--iris); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0;
}
.oscura .boton, .cierre .boton, .privacidad .boton, .app-bloque .boton, .app-mini .boton, .qr-local .boton, .emb-hero .boton {
  background: var(--iris); color: var(--tinta);
}
.oscura .boton:hover, .cierre .boton:hover, .privacidad .boton:hover, .app-bloque .boton:hover, .app-mini .boton:hover, .qr-local .boton:hover, .emb-hero .boton:hover {
  background: var(--iris); filter: brightness(1.06);
}
.qr-local-img span { background: var(--iris); color: var(--tinta); }

/* Chat flotante */
.chat { background: var(--iris); color: var(--tinta); box-shadow: 0 10px 28px rgba(18, 16, 22, .22); }

/* Foco visible */
:focus-visible { outline-color: var(--tinta); }

/* Bloques oscuros: fondo tinta, letras blancas y acentos tornasol */
.bloque-oscuro {
  background: #121016; color: #FFFFFF;
  border-radius: 28px; padding: clamp(24px, 4vw, 48px);
}
.bloque-oscuro .titulo, .bloque-oscuro h2, .bloque-oscuro h3 { color: #FFFFFF; }
.bloque-oscuro .titulo .lila, .bloque-oscuro h2 .lila {
  background: var(--iris); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0; border-radius: 0;
}
.bloque-oscuro .bajada, .bloque-oscuro p { color: #C9C3D6; }
.bloque-oscuro .bajada strong, .bloque-oscuro p strong { color: #FFFFFF !important; }
.bloque-oscuro .relleno { color: #FF8CC6; }
.bloque-oscuro .boton, .bloque-oscuro .cta { background: var(--iris); color: var(--tinta); box-shadow: none; }
.bloque-oscuro .boton:hover, .bloque-oscuro .cta:hover { background: var(--iris); filter: brightness(1.06); }
.bloque-oscuro .boton.borde { background: transparent; color: #FFFFFF; border: 1.5px solid #FFFFFF; }
.bloque-oscuro .boton.borde:hover { background: #FFFFFF; color: var(--tinta); filter: none; }
.bloque-oscuro .reloj div { background: #24202C; }
.bloque-oscuro .espera-premio { background: #24202C; }
.bloque-oscuro .espera-premio span { color: #C9C3D6; }
.bloque-oscuro .fecha { color: var(--tinta); }

/* Redes sociales: íconos pequeños en todas las páginas (también en el inicio, que no usa base.css) */
.redes { list-style: none; margin: 0; padding: 0; display: flex !important; flex-wrap: wrap; gap: 8px; }
.redes li { line-height: 0; }
.redes a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tinta); color: #fff; text-decoration: none; transition: transform .2s; }
.redes a:hover { transform: translateY(-2px); background: var(--iris); color: var(--tinta); }
.redes svg { width: 16px; height: 16px; flex: none; }
.pie .redes a { background: #2A2533; color: #fff; }
.pie .redes a:hover { background: var(--iris); color: #121016; }
.preguntas details .redes { padding: 0 20px 18px; margin-top: -6px; }

/* Las etiquetas siempre en tinta sobre el iris (también sobre fondos oscuros) */
.etiqueta { color: var(--tinta) !important; }