/* css/style.css
   Estilo: colorido, loco e irreverente (mantiene la estructura original) */

/* Paleta estridente */
:root{
  --bg-a: linear-gradient(135deg,#fff7c2 0%, #ffd1f0 40%, #c2f0ff 100%);
  --card-a: #ffffff;
  --accent1: #ff007f; /* fucsia */
  --accent2: #00d1ff; /* cyan */
  --accent3: #ffcf33; /* amarillo */
  --muted: #333333;
  --glass: rgba(255,255,255,0.7);
  --radius: 10px;
}

/* Reset sencillo */
*{box-sizing:border-box}
html,body{height:100%}
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg-a);
  color: var(--muted);
  margin: 0;
  padding: 18px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

/* Cabecera grande y llamativa */
h1 {
  color: white;
  text-align: center;
  margin: 0 0 18px 0;
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(255,255,255,0.08));
  box-shadow: 0 8px 30px rgba(0,0,0,0.12), inset 0 -3px 12px rgba(255,255,255,0.06);
  font-size: 28px;
  letter-spacing: 1px;
  position: relative;
  overflow: visible;
}

/* Rayo neon detrás del título (decorativo) */
h1::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  bottom: -14px;
  width: 60%;
  height: 8px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  filter: blur(6px) saturate(140%);
  border-radius: 6px;
  opacity: 0.9;
}

/* Contenedor de la lista */
.lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
  margin: 20px auto;
  padding: 8px;
}

/* Tarjeta irreverente */
.item {
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,0.92));
  border: 2px solid rgba(0,0,0,0.06);
  padding: 14px;
  border-radius: var(--radius);
  display: flex;
  gap: 14px;
  align-items: center;
  transform: perspective(800px) translateZ(0);
  transition: transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms;
  position: relative;
  overflow: hidden;
}

/* pequeño badge en esquina */
.item::before{
  content: "★";
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 18px;
  color: var(--accent1);
  transform: rotate(-15deg);
  opacity: 0.95;
}

/* efecto hover loco */
.item:hover{
  transform: translateY(-6px) rotate(-0.6deg) scale(1.01);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12), 0 6px 18px rgba(0,0,0,0.06);
  z-index: 2;
}

/* Imagen con marco pop */
.item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 4px solid rgba(255,255,255,0.85);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transform: rotate(-3deg);
}

/* Texto y enlaces */
.item .meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.item a {
  color: var(--accent1);
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  display: inline-block;
  background: linear-gradient(90deg, rgba(255,0,127,0.06), rgba(0,209,255,0.04));
  padding: 2px 6px;
  border-radius: 6px;
  transition: transform 180ms, text-shadow 180ms;
}

.item a:hover {
  transform: translateX(4px) rotate(-1deg) scale(1.02);
  text-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* fecha con estilo neon */
.item small {
  color: #222;
  display:block;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(90deg,var(--accent3),var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* descripcion con borde superior colorido */
.item p {
  margin: 6px 0 0 0;
  font-size: 14px;
  color: #2b2b2b;
  background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.02));
  padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,0.03);
}

/* badges / tags opcionales */
.tags {
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.tag {
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent2), var(--accent1));
  color:white;
  font-weight:700;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* responsive */
@media (max-width:700px){
  .item { flex-direction: row; gap:12px; padding:12px; }
  .item img { width:84px; height:84px; }
  .lista { padding: 8px; }
  h1 { font-size:22px; padding:14px; }
}

/* extra: animación sutil de color de fondo */
@keyframes bgShift {
  0%{ background-position:0% 50%;}
  50%{ background-position:100% 50%;}
  100%{ background-position:0% 50%;}
}
body { background-size:200% 200%; animation: bgShift 18s ease-in-out infinite; }