@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
 
:root {
  --marron:       #3b2a1a;
  --marron-medio: #5c3d22;
  --naranja-sucio:#c47b3a;
  --beige:        #d4b896;
  --beige-claro:  #e8d9c4;
  --gris-azul:    #8a9aa8;
  --gris-oscuro:  #2a2a2a;
  --crema:        #f0e6d3;
  --rojo-apagado: #8b3a3a;
  --texto-claro:  #e8d9c4;
  --texto-oscuro: #2a1f15;
}
 
* {
  box-sizing: border-box;
}
 
body {
  background-image: url("cielofondo.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  font-family: 'Crimson Text', Georgia, serif;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='4' fill='none' stroke='%23c47b3a' stroke-width='1.5'/%3E%3C/svg%3E") 10 10, auto;
}
 
/* grain overlay sutil */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px;
}
 
/* MARQUEE */
.marquee-barra {
  width: 100%;
  max-width: 500px;
  background: var(--marron);
  border: 1px solid var(--naranja-sucio);
  border-radius: 2px;
  padding: 5px 0;
  margin-bottom: 10px;
  overflow: hidden;
  opacity: 0.92;
}
 
.marquee-barra marquee {
  color: var(--beige);
  font-size: 0.78rem;
  font-family: 'Special Elite', monospace;
  letter-spacing: 1.5px;
}
 
/* VENTANA PRINCIPAL */
.contenedor-perfil {
  text-align: center;
  max-width: 440px;
  width: 92%;
  border-radius: 6px 6px 4px 4px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.6),
    0 0 0 1px rgba(196,123,58,0.25),
    inset 0 0 60px rgba(0,0,0,0.15);
}
 
/* BARRA DE TÍTULO — estilo WinXP pero otoñal */
.barra-titulo {
  background: linear-gradient(180deg, #7a5230 0%, #4a3020 50%, #3a2318 100%);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2a1a0e;
}
 
.titulo-texto {
  color: var(--beige-claro);
  font-size: 0.78rem;
  font-family: 'Special Elite', monospace;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  gap: 6px;
}
 
.titulo-texto::before {
  content: "🍂";
  font-size: 0.9rem;
}
 
.botones-ventana {
  display: flex;
  gap: 4px;
}
 
.btn-ventana {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.35);
  cursor: pointer;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.45);
  font-weight: bold;
}
 
.btn-cerrar    { background: linear-gradient(180deg, #c46060, #8b3a3a); }
.btn-minimizar { background: linear-gradient(180deg, #c4a060, #8b6a2a); }
.btn-maximizar { background: linear-gradient(180deg, #7a9060, #4a6030); }
 
/* BARRA DE DIRECCIÓN */
.barra-direccion {
  background: linear-gradient(180deg, #c8b89a, #b0a080);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #8a7060;
}
 
.campo-url {
  flex: 1;
  background: #f0e8d8;
  border: 1px solid #9a8060;
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 0.72rem;
  color: var(--texto-oscuro);
  font-family: 'Special Elite', monospace;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.12);
}
 
.btn-ir {
  background: linear-gradient(180deg, #d4c4a0, #b0a080);
  border: 1px solid #9a8060;
  border-radius: 2px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-family: 'Special Elite', monospace;
  cursor: pointer;
  color: var(--texto-oscuro);
}
 
/* CONTENIDO INTERIOR */
.contenido-interior {
  background-color: #1e1710;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(196,123,58,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(58,35,24,0.8) 0%, transparent 70%);
  padding: 28px 28px 24px;
  position: relative;
}
 
/* foto de perfil tipo polaroid */
.foto-wrapper {
  display: inline-block;
  background: #f0e8d8;
  padding: 6px 6px 18px 6px;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.5);
  transform: rotate(-1.5deg);
  margin-bottom: 18px;
  position: relative;
}
 
.foto-perfil {
  width: 100px;
  height: 100px;
  object-fit: cover;
  display: block;
  filter: sepia(20%) contrast(0.95) brightness(0.95);
}
 
h1 {
  font-family: 'Special Elite', monospace;
  font-size: 1.5rem;
  font-weight: normal;
  margin: 6px 0 8px 0;
  color: var(--beige-claro);
  text-shadow: 1px 2px 8px rgba(0,0,0,0.8);
  letter-spacing: 1px;
}
 
.subtitulo {
  color: var(--beige);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  margin: 0 0 22px 0;
  line-height: 1.55;
  opacity: 0.85;
}
 
.enlaces-contenedor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
.boton-link {
  background-color: rgba(30, 20, 12, 0.75);
  color: var(--beige-claro);
  text-decoration: none;
  padding: 12px 20px;
  font-family: 'Special Elite', monospace;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  border: 1px solid rgba(196,123,58,0.3);
  border-radius: 2px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
 
.boton-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(196,123,58,0.07), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
 
.boton-link:hover {
  background-color: rgba(196,123,58,0.18);
  border-color: rgba(196,123,58,0.7);
  color: var(--crema);
  transform: translateX(3px);
}
 
.boton-link:hover::before {
  opacity: 1;
}
 
/* BARRA DE ESTADO */
.barra-estado {
  background: linear-gradient(180deg, #c8b89a, #b0a080);
  padding: 3px 10px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #8a7060;
  font-size: 0.68rem;
  font-family: 'Special Elite', monospace;
  color: #3a2a18;
  letter-spacing: 0.5px;
}
 
/* GIF FLOTANTE */
.gif-flotante {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  cursor: pointer;
  z-index: 9999;
  transition: top 1.5s ease, left 1.5s ease;
  filter: sepia(30%) hue-rotate(10deg);
  opacity: 0.9;
}
 
/* TRACKLIST PAPELITO */
.tracklist-papel {
  position: fixed;
  top: 50%;
  left: calc(50% - 700px);
  transform: translateY(-50%);
  width: 170px;
  background: #f5efd8;
  background-image:
    repeating-linear-gradient(
      transparent,
      transparent 23px,
      rgba(180,160,100,0.25) 23px,
      rgba(180,160,100,0.25) 24px
    );
  border: 1px solid #c8b080;
  box-shadow:
    2px 3px 10px rgba(0,0,0,0.45),
    inset 0 0 20px rgba(180,140,60,0.08);
  padding: 14px 12px 10px;
  z-index: 990;
  transform: translateY(-50%) rotate(-1deg);
}
 
.papel-titulo {
  font-family: 'Special Elite', monospace;
  font-size: 0.78rem;
  color: #5c3d22;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
 
.papel-linea-decorativa {
  height: 1px;
  background: linear-gradient(90deg, transparent, #c4a060, transparent);
  margin-bottom: 10px;
}
 
.tracklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
 
.track {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s ease;
  line-height: 1.35;
}
 
.track:hover {
  background: rgba(196,123,58,0.15);
}
 
.track:hover .track-icono {
  color: #8b3a3a;
}
 
.track-num {
  font-family: 'Special Elite', monospace;
  font-size: 0.65rem;
  color: #9a8060;
  flex-shrink: 0;
}
 
.track-nombre {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 0.88rem;
  color: #3a2a14;
  font-style: italic;
  flex: 1;
}
 
.track-icono {
  font-size: 0.65rem;
  color: #c4a060;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
 
.papel-nota {
  font-family: 'Special Elite', monospace;
  font-size: 0.55rem;
  color: #9a8060;
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.3px;
}
 
/* SIDEBAR ADS */
.sidebar-ads {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}
 
.sidebar-derecha { right: 8px; }
.sidebar-izquierda { left: 8px; }
 
.ad-spot {
  width: 120px;
  border: 1px solid rgba(196,123,58,0.5);
  background: linear-gradient(180deg, #100d08, #1a1208);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(196,123,58,0.2);
  transition: box-shadow 0.2s ease;
}
 
.ad-spot:hover {
  box-shadow: 0 0 12px rgba(196,123,58,0.45);
  border-color: rgba(196,123,58,0.8);
}
 
.ad-spot img {
  width: 100%;
  display: block;
  filter: sepia(15%) contrast(0.95);
}
 
.ad-label {
  display: block;
  font-size: 9px;
  font-family: 'Special Elite', monospace;
  padding: 4px 3px;
  background: var(--marron);
  color: var(--beige);
  letter-spacing: 0.3px;
  line-height: 1.3;
}
 .seccion-abajo {
  margin-top: 28px;
}
 
/* separadorcito entre ventanas */
.seccion-abajo + .seccion-abajo::before {
  content: "✦  ✦  ✦";
  display: block;
  text-align: center;
  color: #5c3d22;
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem;
  letter-spacing: 6px;
  margin-bottom: 28px;
}
 
/* bio tags */
.bio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
 
.bio-tag {
  font-family: 'Special Elite', monospace;
  font-size: 0.65rem;
  padding: 3px 8px;
  border: 1px solid rgba(196,123,58,0.3);
  color: var(--naranja-sucio);
  border-radius: 2px;
  letter-spacing: 0.5px;
}
 
/* álbumes */
.albums-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
 
.album-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(196,123,58,0.15);
  border-radius: 2px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
 
.album-card:hover {
  border-color: rgba(196,123,58,0.5);
  background: rgba(196,123,58,0.05);
}
 
.album-foto {
  margin-bottom: 0;
}
 
.album-nombre {
  font-family: 'Special Elite', monospace;
  font-size: 0.8rem;
  color: var(--beige-claro);
  text-align: center;
}
 
.album-artista {
  font-family: 'Crimson Text', serif;
  font-size: 0.78rem;
  color: var(--naranja-sucio);
  font-style: italic;
}
 
.album-nota {
  display: none;
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--beige);
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid rgba(196,123,58,0.2);
  line-height: 1.5;
  margin: 4px 0 0;
}
 
.album-nota.visible {
  display: block;
}
 
/* venancia / bloques de texto */
.libro-bloque {
  border-left: 2px solid rgba(196,123,58,0.4);
  padding-left: 16px;
  margin-bottom: 20px;
}
 
.libro-titulo {
  font-family: 'Special Elite', monospace;
  font-size: 1rem;
  color: var(--beige-claro);
  font-weight: normal;
  margin: 0 0 6px 0;
}
 
.libro-bloque .subtitulo {
  margin: 0;
  text-align: left;
}
 
/* gustos */
.gustos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: left;
}
 
.gusto-titulo {
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem;
  color: var(--naranja-sucio);
  letter-spacing: 1.5px;
  font-weight: normal;
  margin: 0 0 10px;
}
 
.gusto-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
 
.gusto-lista li {
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--beige);
  opacity: 0.85;
  padding-left: 12px;
  position: relative;
}
 
.gusto-lista li::before {
  content: "✦";
  position: absolute;
  left: 0;
  font-size: 0.5rem;
  color: var(--marron-medio);
  top: 4px;
}
 
/* barras de estadísticas */
.stat-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
 
.stat-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  color: var(--beige);
  width: 130px;
  flex-shrink: 0;
}
 
.stat-barra {
  flex: 1;
  height: 7px;
  background: rgba(30,20,12,0.8);
  border: 1px solid rgba(196,123,58,0.2);
  border-radius: 1px;
  overflow: hidden;
}
 
.stat-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--marron-medio), var(--naranja-sucio));
  border-radius: 1px;
}
 
.stat-num {
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  color: var(--naranja-sucio);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}