body {
background-image: url('https://www.agendaconcerts.cat/images/agenda-background.png');
background-size: contain;
background-repeat: repeat;
background-position: center top;
background-attachment: fixed;
font-family: 'Patrick Hand', cursive;
background-color: #f5f5f0; /* color de papel o beige */
}

.artist-name-big {
font-family: 'Permanent Marker', cursive;
font-size: 2rem;
margin-bottom: 0.8rem;
line-height: 1.1;
color: #000;
}

@media (min-width: 600px) {
.artist-name-big {
font-size: 2.5rem;
}
}

.concert-poster {
background: linear-gradient(to bottom right, #fceabb, #f8b500);
border: 3px solid #b8860b;
border-radius: 12px;
box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
font-family: 'Impact', 'Arial Black', sans-serif;
color: #333;
}

.concert-poster h2 {
font-size: 1.5rem;
text-transform: uppercase;
border-bottom: 2px dashed #b8860b;
padding-bottom: 8px;
}

.concert-poster a {
color: #8b0000;
text-decoration: none;
}

.concert-poster a:hover {
text-decoration: underline;
}


.concert-info {
font-family: 'Patrick Hand', cursive;
font-size: 1.1rem;
color: #333;
margin-bottom: 1rem;
}

.ticket-box {
border: 2px dashed #333;
background: #fdfaf4;
font-family: 'Courier New', Courier, monospace;
border-radius: 10px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
position: relative;
}

.ticket-link {
display: inline-block;
margin-top: 10px;
padding: 8px 12px;
background-color: #333;
color: #fff;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
}

.ticket-link:hover {
background-color: #555;
}

.post-it {
background: #fffc8a;
padding: 1.5rem;
transform: rotate(-2deg);
box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
border-left: 5px solid #f3c623;
}

.sticky-note {
background: #e1f7d5;
padding: 1.5rem;
transform: rotate(1deg);
box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
border-left: 5px solid #77dd77;
}

.sticky-tape {
background: #ffe5b4;
border-left: 5px solid #f8b195;
box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
}

.notebook-page {
background: #fefefe;
border: 1px solid #ccc;
padding: 2rem;
border-radius: 8px;
line-height: 1.6;
font-family: 'Comic Sans MS', cursive, sans-serif;
}

.notebook-box {
border: 1px dashed #aaa;
padding: 1rem 1.5rem;
background-color: #f9f9f9;
margin-bottom: 1rem;
}


.concert-card.agenda-line {
background-color: transparent;
border-left: 5px solid #7e57c2;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
position: relative;
font-family: 'Segoe UI', sans-serif;
box-shadow: none;
border-radius: 0;
}


.concert-card.post-it {
background-color: #fff59d;
padding: 1rem;
margin-bottom: 2rem;
width: fit-content;
max-width: 100%;
position: relative;
transform: rotate(-1.5deg);
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
font-family: 'Permanent Marker', cursive;
border-radius: 6px;
}

.concert-card.post-it::before {
content: "";
position: absolute;
width: 60px;
height: 20px;
background: #dcdcdc;
top: -10px;
left: 20px;
border-radius: 3px;
box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
transform: rotate(-5deg);
}

.concert-card.post-it::after {
content: "";
position: absolute;
width: 60px;
height: 20px;
background: #dcdcdc;
top: -10px;
right: 20px;
border-radius: 3px;
box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
transform: rotate(5deg);
}

.concert-card.post-it.past{
  position:relative;
  padding:1rem 1.1rem;          /* más aire, no pegado al borde */
  background:#f3f4f6;           /* gris claro */
  border-left:5px solid #9e9e9e;
  color:#555;
  filter:saturate(.25) contrast(.96);
  box-shadow: 3px 3px 8px rgba(0,0,0,.12);
}
.concert-card.post-it.past .artist-name{ color:#444; }

/* Cinta/insignia “Pasado” arriba a la derecha */
.badge-past{
  position:absolute;
  top:8px;
  right:-10px;
  transform: rotate(8deg);
  background:#424242;
  color:#fff;
  padding:.2rem .55rem;
  border-radius:.25rem;
  font-size:.8rem;
  font-weight:700;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

/* Botón de pasados, más suave pero claro */
.btn-outline-past{
  display:inline-block;
  font-weight:700;
  padding:.45rem .75rem;
  border-radius:.55rem;
  text-decoration:none;
  border:2px solid #6b7280;
  color:#374151;
  background:#fff;
}
.btn-outline-past:hover{
  background:#f3f4f6;
  border-color:#4b5563;
}

/* Ajustes responsive */
@media (max-width:480px){
  .poster-card,
  .concert-card.post-it.past{ padding:.85rem .9rem; }
  .poster-card .head{ padding:.35rem .5rem; }
}
.artist-name {
  font-weight: bold;
  font-size: 1.2rem;
  font-family: 'Permanent Marker', cursive;
}

.style-badge {
  background-color: #efefef;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  margin-right: 0.3rem;
  display: inline-block;
  font-size: 0.8rem;
  font-style: italic;
  color: #333;
}

.news-section {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 3rem;
}

.news-clipping {
padding: 1.5rem;
border: 2px dashed #ccc;
background-color: #fafafa;
background-image: url('https://agendaconcerts.cat/images/paper-texture.png'); /* fondo imitación papel */
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
clip-path: polygon(2% 0%, 98% 1%, 100% 98%, 0% 100%); /* bordes mal recortados */
font-family: 'Georgia', serif;
}

.newspaper-frontpage {
font-family: 'Times New Roman', Times, serif;
background-color: #fefdf9;
font-size: 1.2rem;
border: 2px solid #000;
}

.newspaper-secondary {
font-family: 'Courier New', Courier, monospace;
background-color: #f9f6f1;
border: 2px double #666;
}

.newspaper-tertiary {
font-family: 'Garamond', serif;
background-color: #fdf7e3;
border: 2px dotted #999;
}

.newspaper-brief {
font-family: 'Arial Narrow', sans-serif;
background-color: #fffefa;
border: 1px solid #ccc;
font-size: 0.9rem;
}

.news-title {
margin-bottom: 0.5rem;
font-weight: bold;
text-transform: uppercase;
}

.news-subtitle {
font-style: italic;
color: #444;
}

.card-amazon {
background-color: #fffef5;
border-left: 4px solid #ffbb33;
border-radius: 1rem;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.05);
padding: 1.5rem;
height: 100%;
transition: transform 0.2s ease;
font-size: 0.95rem;
}

.card-amazon:hover {
transform: translateY(-4px);
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.08);
}

.card-amazon p {
margin-bottom: 1rem;
}

.card-amazon .amazon-link {
display: inline-block;
background-color: #ff9900;
color: #fff;
font-weight: bold;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s ease;
}

.card-amazon .amazon-link:hover {
background-color: #e68a00;
}

/* Fuente manuscrita */
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

.polaroid-gallery {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}

.polaroid-card {
position: relative;
width: 260px;
background-color: white;
border: 1px solid #ccc;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
padding: 0.5rem 0.5rem 1rem;
margin-bottom: 2rem;
transition: transform 0.3s ease;
}

.polaroid-card:nth-child(even) {
transform: rotate(4deg);
}

.polaroid-card:nth-child(odd) {
transform: rotate(-4deg);
}

.polaroid-card:hover {
transform: rotate(0deg) scale(1.02);
z-index: 2;
}

.polaroid-img {
width: 100%;
height: auto;
display: block;
margin-bottom: 0.5rem;
border: 4px solid white;
box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

.polaroid-caption {
text-align: center;
}

.handwriting-font {
font-family: 'Patrick Hand', cursive;
font-size: 1.1rem;
}

/* Chincheta */
.pin {
position: absolute;
top: -10px;
left: -10px;
width: 32px;
height: 32px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Push_pin_icon.svg/240px-Push_pin_icon.svg.png');
background-size: contain;
background-repeat: no-repeat;
z-index: 3;
filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
}


.header-agenda {
background: url('https://www.transparenttextures.com/patterns/paper-fibers.png'), #fffbe6;
border-bottom: 4px dashed #c0392b;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
position: relative;
}

.header-agenda h1 {
font-family: 'Permanent Marker', cursive;
font-size: 2.2rem;
color: #2c3e50;
margin: 0;
}

.nav-tabs-agenda .nav-link {
font-family: 'Patrick Hand', cursive;
font-size: 1.1rem;
color: #2c3e50 !important;
padding: 0.5rem 1rem;
border-radius: 10px 10px 0 0;
margin-right: 5px;
background-color: #f4e1d2;
border: 2px solid #c0392b;
border-bottom: none;
}

.nav-tabs-agenda .nav-link:hover,
.nav-tabs-agenda .nav-link.active {
background-color: #fff;
color: #c0392b !important;
}

.logo-sticker {
position: absolute;
top: -30px;
left: 20px;
width: 80px;
height: 80px;
background-color: white;
border: 3px solid #2c3e50;
border-radius: 50%;
box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
margin-top: 2.3rem;
}

.gato-sticker {
width: 70px;
height: 70px;
background-image: url('https://agendaconcerts.cat/logo-cabecera-agenda-concerts.png');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
z-index: 10;
transform: rotate(-15deg);
opacity: 0.85;
}

/* Ejemplo para colocarlo en la esquina inferior derecha */
.gato-sticker.fixed-bottom-right {
position: fixed;
bottom: 10px;
right: 10px;
}


.agenda-section-title {
font-family: 'Permanent Marker', cursive;
font-size: 2rem;
margin-bottom: 1.5rem;
color: #2c3e50;
text-shadow: 1px 1px 0 #fff;
border-left: 8px solid #c0392b;
padding-left: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.agenda-section-title span {
font-size: 1.8rem;
}

.news-footer {
margin-top: 5rem;
padding: 2rem;
background-color: #fefdf9;
background-image: url('https://agendaconcerts.cat/images/paper-texture.png');
background-size: cover;
background-repeat: repeat;
font-family: 'Georgia', serif;
color: #222;
clip-path: polygon(
0% 3%, 3% 0%, 97% 0%, 100% 3%,
100% 97%, 97% 100%, 3% 100%, 0% 97%
);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
border: 1px dashed rgba(0, 0, 0, 0.1);
}

.news-footer .nav-link {
color: #333;
font-weight: bold;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.2s ease;
}

.news-footer .nav-link:hover {
color: #555;
text-decoration: underline;
}

.news-footer p {
font-size: 0.9rem;
color: #666;
margin-bottom: 1rem;
}

@media (max-width: 768px) {
body {
background-size: auto;
font-size: 1rem;
}

.concert-card.post-it {
width: 90%;
transform: rotate(-1deg);
padding: 0.8rem;
}

.concert-card.post-it::before,
.concert-card.post-it::after {
width: 40px;
height: 15px;
top: -8px;
}

.artist-name {
font-size: 1rem;
}

.style-badge {
font-size: 0.75rem;
padding: 0.1rem 0.4rem;
}

.news-section {
flex-direction: column;
gap: 1rem;
}

.news-clipping {
font-size: 1rem;
padding: 1rem;
}

.card-amazon {
padding: 1rem;
font-size: 0.9rem;
}

.card-amazon .amazon-link {
font-size: 0.9rem;
padding: 0.4rem 0.8rem;
}

.polaroid-gallery {
gap: 1rem;
}

.polaroid-card {
width: 90%;
transform: rotate(0deg);
}

.header-agenda h1 {
font-size: 1.6rem;
text-align: center;
}

.nav-tabs-agenda .nav-link {
font-size: 1rem;
padding: 0.4rem 0.8rem;
}
}

@media (max-width: 480px) {
  .concert-card.post-it { font-size: 0.95rem; }
  .polaroid-caption { font-size: 0.9rem; }
  .handwriting-font { font-size: 1rem; }
  .pin { width: 24px; height: 24px; top: -6px; left: -6px; }
  .header-agenda h1 { font-size: 1.4rem; }
}

.polaroid-caption {
font-size: 0.9rem;
}

.handwriting-font {
font-size: 1rem;
}

.pin {
width: 24px;
height: 24px;
top: -6px;
left: -6px;
}

.header-agenda h1 {
font-size: 1.4rem;
}

/* (mismos estilos locales que la versión anterior – recortes) */
.artist-hero{background:#fffdfa;background-image:url('https://www.transparenttextures.com/patterns/paper-fibers.png');border:3px dashed #c0392b;border-radius:14px;padding:1.25rem 1.25rem .85rem;box-shadow:4px 4px 10px rgba(0,0,0,.15);}
.artist-hero .artist-name-big{font-family:'Permanent Marker',cursive;font-size:2.4rem;margin:0 0 .25rem 0;line-height:1.05;}
.artist-meta{color:#555;font-size:1rem;}
.badges{margin-top:.35rem;}
.badges .style-badge{margin-bottom:.3rem;}
.poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;}
/* ======= Tarjeta “próximos conciertos” alegre, con padding interno ======= */
.poster-card {
  position: relative;
  padding: 1rem 1.1rem;
  border: 2px solid #2c3e50;
  border-radius: 12px;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.15);
  background: linear-gradient(135deg, #fffde7 0%, #e1f5fe 45%, #e8f5e9 100%); /* alegre, sin ocre */
}

.poster-card .head{
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  font-weight:700;
  background: rgba(255,255,255,.85);
  padding:.4rem .6rem;
  border-radius:.6rem;
  margin-bottom:.6rem;
  border:1px dashed #c0392b;
}

.poster-card .place{
  margin-bottom:.8rem;
  line-height:1.3;
}

/* Si tienes una regla global tipo `.concert-poster a{ color:#8b0000 }` que
   te ensucia los botones, esta anula dentro de la tarjeta: */
.poster-card a.btn,
.poster-card a.btn-cta{ color:#fff !important; }

/* Botón CTA legible (forzamos texto blanco y contraste) */
.btn-cta{
  display:inline-block;
  font-weight:700;
  padding:.45rem .75rem;
  border-radius:.55rem;
  text-decoration:none;
  background:#2c3e50;
  border:2px solid #2c3e50;
  color:#fff !important;           /* evita herencias de .concert-poster a{} */
}
.btn-cta:hover{ background:#1f2d3a; border-color:#1f2d3a; }

.bio-clip{margin-top:1rem;}
.bio-clip .news-title{font-size:1.1rem;}
.soc-list a{display:inline-flex;align-items:center;gap:.35rem;margin:.25rem .5rem .25rem 0;text-decoration:none;}

/* ======= Tarjetas “pasados” — aspecto desaturado y claro, sin confusiones ======= */
.past-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:1.25rem;
}
.soc-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.soc-link{
  display:inline-block; padding:.35rem .65rem; line-height:1.2;
  border:2px solid #c0392b; border-radius:.55rem; background:#fff;
  color:#2c3e50 !important; font-weight:600; text-decoration:none;
}
.soc-link:hover{ background:#fff8f3; }

/* Chips de enlaces sociales (sin iconos) — layout estable */
.soc-list{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .6rem;
  list-style:none;
  padding:0;
  margin:0;
  align-items:flex-start; /* evita que algún item “caiga” por baseline */
}
.soc-list li{ margin:0; }

.soc-link{
  display:flex;                /* centra verticalmente el texto */
  align-items:center;
  justify-content:center;
  padding:.45rem .75rem;
  min-height: 38px;            /* altura uniforme para todos los chips */
  line-height:1;               /* elimina variaciones por fuentes */
  border:2px solid #c0392b;
  border-radius:.6rem;
  background:#fff;
  color:#2c3e50 !important;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;          /* evita salto raro en “Twitter · X”, etc. */
  overflow:hidden;
  text-overflow:ellipsis;      /* si no cabe, pone … */
}
.soc-link:hover{ background:#fff8f3; }
.soc-link:focus{ outline:2px dashed #c0392b; outline-offset:2px; }

/* En pantallas muy pequeñas permitimos el salto si hace falta */
@media (max-width: 380px){
  .soc-link{ white-space:normal; }
}

/* ======= Grid de tarjetas ======= */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}



}