/* ===================================================
   CUSTOM CSS — The Weeknd Fan Page
   Paleta: negro profundo + rojo sangre + dorado
   =================================================== */

/* ===== VARIABLES CSS ===== */
:root {
  --color-rojo:        #b01a1a;
  --color-rojo-vivo:   #e63030;
  --color-dorado:      #d4a017;
  --color-dorado-claro:#f5c842;
  --color-negro:       #080808;
  --color-negro-suave: #111111;
  --color-gris-oscuro: #1a1a1a;
  --color-texto:       #e8e8e8;
  --color-texto-dim:   #999999;
  --sombra-roja:       rgba(176, 26, 26, 0.5);
  --sombra-dorada:     rgba(212, 160, 23, 0.3);
  --transicion:        all 0.3s ease-in-out;
  --espaciado:         1rem;
  --radio-borde:       4px;
}

/* ===== HACK CSS: box-sizing global ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ===== FONDO GENERAL — negro casi puro como la foto de concierto ===== */
body {
  background-color: var(--color-negro) !important;
  color: var(--color-texto);
}

#wrapper {
  background-color: var(--color-negro);
}

/* ===== SECCIONES — fondo oscuro con borde rojo sutil ===== */
#wrapper > section {
  border-top: 1px solid rgba(176, 26, 26, 0.2);
}

/* El header lateral de cada sección */
#wrapper > section > header {
  background-color: var(--color-negro-suave) !important;
  border-right: 3px solid var(--color-rojo);
}

/* Texto del header lateral */
#wrapper > section > header h2,
#wrapper > section > header h3 {
  color: var(--color-dorado) !important;
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#wrapper > section > header p {
  color: var(--color-texto-dim) !important;
  font-style: italic;
}

/* Contenido de secciones */
#wrapper > section > .content {
  background-color: var(--color-gris-oscuro) !important;
  color: var(--color-texto);
}

/* ===== INTRO / PORTADA ===== */
.intro {
  background-color: var(--color-negro) !important;
}

.intro header {
  background: linear-gradient(180deg, var(--color-negro) 60%, rgba(176,26,26,0.15)) !important;
}

.intro header h1 {
  color: var(--color-texto) !important;
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 3.5em;
  text-shadow: 0 0 calc(var(--espaciado) * 3) var(--sombra-roja); /* calc() */
}

.intro header p {
  color: var(--color-dorado) !important;
  font-size: 1.05em;
  line-height: 1.7;
}

/* ===== IMAGEN PRINCIPAL ===== */
.image.main img {
  border: 2px solid var(--color-rojo);
  border-radius: var(--radio-borde);
  box-shadow: 0 0 30px var(--sombra-roja), 0 0 8px var(--sombra-dorada);
  transition: var(--transicion);
}

/* Selector pseudo-clase :hover en imagen */
.image.main img:hover {
  box-shadow: 0 0 50px var(--sombra-roja), 0 0 20px var(--sombra-dorada);
  transform: scale(1.01);
}

/* ===== BOTONES ===== */
.button.primary,
input[type="submit"].primary {
  background-color: var(--color-rojo) !important;
  border-color: var(--color-rojo) !important;
  color: #fff !important;
  letter-spacing: 0.05em;
  transition: var(--transicion);
}

/* Selector :hover en botones */
.button.primary:hover,
input[type="submit"].primary:hover {
  background-color: var(--color-rojo-vivo) !important;
  border-color: var(--color-rojo-vivo) !important;
  box-shadow: 0 0 15px var(--sombra-roja);
}

.button:not(.primary) {
  border-color: var(--color-dorado) !important;
  color: var(--color-dorado) !important;
  background: transparent !important;
  transition: var(--transicion);
}

.button:not(.primary):hover {
  background-color: rgba(212, 160, 23, 0.15) !important;
}

/* ===== LISTA DE ÁLBUMES (ol) ===== */
#lista-albumes {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: var(--espaciado);
}

#lista-albumes li {
  padding: calc(var(--espaciado) * 0.6) 0;
  border-bottom: 1px solid rgba(176, 26, 26, 0.2);
  color: var(--color-texto);
  line-height: 1.6;
  transition: var(--transicion);
}

/* Selector :nth-child (selector avanzado) */
#lista-albumes li:nth-child(odd) {
  color: var(--color-dorado-claro);
}

#lista-albumes li:nth-child(even) {
  color: var(--color-texto);
}

#lista-albumes li:last-child {
  border-bottom: none;
}

/* ===== LISTA DE MIXTAPES (ul) ===== */
#lista-mixtapes {
  list-style: disc;
  padding-left: 1.5rem;
}

#lista-mixtapes li {
  margin-bottom: calc(var(--espaciado) * 0.6);
  color: var(--color-texto);
}

/* Selector :first-child */
#lista-mixtapes li:first-child {
  color: var(--color-dorado);
  font-weight: 600;
}

/* ===== LISTA DE CANCIONES ===== */
.lista-canciones {
  list-style: none;
  padding: 0;
}

.lista-canciones li {
  padding: calc(var(--espaciado) * 0.7) calc(var(--espaciado) * 0.5);
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: var(--transicion);
  cursor: default;
}

.lista-canciones li:hover {
  border-left-color: var(--color-rojo);
  padding-left: calc(var(--espaciado) * 1.2);
  color: var(--color-dorado);
  background-color: rgba(176, 26, 26, 0.08);
}

.lista-canciones li:last-child {
  border-bottom: none;
}

/* ===== LISTA DE LOGROS ===== */
#lista-logros {
  list-style: none;
  padding: 0;
  margin-bottom: calc(var(--espaciado) * 2);
}

#lista-logros li {
  padding: calc(var(--espaciado) * 0.5) 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--color-texto);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Pseudo-elemento ::before como bullet dorado */
#lista-logros li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--color-dorado);
  font-size: 0.8em;
}

/* ===== FEATURE ICONS ===== */
.feature-icons li {
  color: var(--color-texto) !important;
}

.feature-icons li::before {
  color: var(--color-rojo) !important;
}

/* ===== FORMULARIO ===== */
input[type="text"],
input[type="email"],
textarea {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: rgba(176, 26, 26, 0.4) !important;
  color: var(--color-texto) !important;
  transition: var(--transicion);
}

/* Selector :focus */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--color-rojo) !important;
  background-color: rgba(176, 26, 26, 0.06) !important;
  outline: none;
  box-shadow: 0 0 10px var(--sombra-roja);
}

/* ===== ICONOS SOCIALES ===== */
ul.icons li a {
  color: var(--color-texto-dim) !important;
  transition: var(--transicion);
}

ul.icons li a:hover {
  color: var(--color-rojo-vivo) !important;
  transform: scale(1.2);
}

/* ===== FOOTER / ITEMS ===== */
.items h3 {
  color: var(--color-dorado) !important;
  border-bottom: 1px solid rgba(212, 160, 23, 0.3);
  padding-bottom: 0.4rem;
}

/* ===== COPYRIGHT ===== */
.copyright {
  background-color: var(--color-negro) !important;
  color: var(--color-texto-dim) !important;
  font-size: 0.82em;
  letter-spacing: 0.08em;
  border-top: 1px solid rgba(176, 26, 26, 0.3);
  padding: 1.5rem 2%;
}

/* ===== HACK CSS: clearfix ===== */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ===== FLECHA DE SCROLL ===== */
.arrow a {
  border-color: var(--color-rojo) !important;
}

/* ===== UNIDADES VARIADAS (px, em, rem, %, vh, vw) ===== */
#wrapper > section > header {
  min-height: 25vh;
}

p {
  line-height: 1.8;
  margin-bottom: 1.2em;
}

strong {
  color: var(--color-dorado-claro);
}