La identidad visual de Licorería Santo Pecado se construye sobre un tema completamente oscuro que evoca el lujo, la noche y el misterio inherentes a la marca. El negro absoluto como fondo sitúa al usuario en un ambiente íntimo y elegante; el rojo carmesí inyecta energía, urgencia y audacia en cada punto de interacción; y el dorado eleva la percepción de premium en títulos y elementos de navegación. Los grises oscuros (Documentation Index
Fetch the complete documentation index at: https://mintlify.com/marvinalban30/CSS3-avanzado-y-Bootstrap-5/llms.txt
Use this file to discover all available pages before exploring further.
#1a1a1a, #222) actúan como fondos secundarios que separan secciones sin romper la atmósfera nocturna. Esta combinación cromática es inseparable del concepto “Santo Pecado”: tentadora, suntuosa y memorable.
Colores principales
Negro — #000000
Fondo del
body principal. Establece la base oscura sobre la que todos los demás colores resaltan con máximo contraste. Ningún elemento compite con el contenido cuando el fondo es negro puro.Rojo — #cc0000 / #ff0000
Color de acción. Usado en botones (estado normal
#cc0000, hover #ff0000), bordes de cards, borde de foco en inputs, resplandores de box-shadow y links del footer. Señala interactividad y urgencia.Dorado — #ffcc00
Color de distinción. Aplicado en todos los encabezados
h1, h2, h3, en el estado hover de los nav-links y como borde por defecto de los campos de formulario. Comunica lujo y exclusividad.Gris oscuro — #1a1a1a / #222
Fondos secundarios.
#1a1a1a se usa en las tarjetas de productos y #222 en los inputs del formulario. Son lo suficientemente oscuros para mantener la atmósfera nocturna, pero distintos del negro puro para crear profundidad visual.Tabla de referencia completa
La siguiente tabla consolida cada selector destyles.css con su valor de color y su función dentro del diseño:
| Variable / Selector | Color | Uso |
|---|---|---|
body background | #000000 | Fondo de página |
h1, h2, h3 | #ffcc00 | Texto de titulares |
.navbar-brand | #ff0000 | Logo en navbar |
.nav-link | #ffffff | Nav links normales |
.nav-link:hover | #ffcc00 | Nav link activo |
.btn-primary | #cc0000 | Botón normal |
.btn-primary:hover | #ff0000 | Botón hover |
.card background | #1a1a1a | Fondo de tarjeta |
.card border | #ff0000 | Borde de tarjeta |
.card:hover shadow | rgba(255,0,0,0.3) | Resplandor rojo |
form input/textarea background | #222222 | Fondo de input |
form input/textarea border | #ffcc00 | Borde dorado de input |
form *:focus border | #ff0000 | Borde foco rojo |
form *:focus shadow | rgba(255,0,0,0.6) | Glow foco |
footer a | #ff0000 | Links del footer |
Combinaciones cromáticas
La paleta trabaja con dos pares de contraste intencionales que comunican mensajes distintos pero complementarios: Negro + Dorado — Esta combinación es universalmente asociada con lujo, riqueza y elegancia atemporal. Al ver los títulos dorados sobre negro, el usuario percibe inconscientemente un posicionamiento premium: la licorería no vende cualquier producto, vende una experiencia exclusiva. Este par se reserva para los elementos de mayor jerarquía tipográfica (h1, h2, h3) y la navegación activa.
Negro + Rojo — El rojo sobre negro evoca audacia, peligro controlado y deseo, conceptos perfectamente alineados con el nombre “Santo Pecado”. Este par domina en los elementos de interacción (botones, bordes de cards, efectos de foco), transmitiendo que actuar —hacer clic, explorar, contactar— tiene emoción y consecuencias deliciosas.
Las clases de Bootstrap
bg-dark (equivalente a #212529) también aparecen en el HTML —en el <header>, la <nav> y el bloque de promociones— y son visualmente consistentes con el negro puro de la paleta personalizada. El elemento .navbar-brand en el HTML lleva adicionalmente la clase text-warning de Bootstrap, pero la regla color: #ff0000 !important de styles.css la sobreescribe, resultando en el rojo de marca (#ff0000) que se muestra en pantalla.