/* páginas interiores: Artistas 2026 y Compradores 2026 (usa las variables de comic.css) */
.top nav a[aria-current="page"]{background:var(--yellow);color:var(--ink)}
.page-head{padding:56px 0 40px}
.page-head .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.title-card{background:var(--yellow);border:var(--line) solid var(--ink);box-shadow:12px 12px 0 var(--ink);padding:34px 40px 38px;transform:rotate(-1.5deg);
  animation:entra-titulo .7s cubic-bezier(.2,1.4,.4,1) backwards}
.title-card .kicker{font-family:var(--display);font-size:1.25rem;background:var(--ink);color:#fff;display:inline-block;padding:4px 16px;transform:rotate(1.5deg)}
.title-card h1{font-size:clamp(2.6rem,6.2vw,5.2rem);color:var(--magenta);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);margin-top:14px}
.page-head .bubble{align-self:center}
.sec h2.h2-sm{font-size:clamp(2rem,4.4vw,3rem)}
.note{margin-top:10px;color:#fff;font-weight:700;max-width:62ch}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.card{position:relative;border:var(--line) solid var(--ink);box-shadow:var(--shadow);padding:24px 22px 26px;display:flex;flex-direction:column;gap:12px;min-height:240px;background:var(--paper)}
.card:nth-child(3n+1){transform:rotate(-1.2deg)}
.card:nth-child(3n+2){transform:rotate(.8deg)}
.card:nth-child(3n){transform:rotate(-.5deg)}
.card .tag{align-self:flex-start;font-family:var(--display);font-size:1rem;background:var(--ink);color:#fff;padding:3px 12px}
.card h3{font-size:clamp(1.7rem,2.6vw,2.2rem);color:var(--violet)}
.card .meta{font-weight:800;font-size:1rem}
.card .star{width:84px;height:84px;display:grid;place-items:center;background:var(--yellow);
  clip-path:polygon(50% 0,61% 14%,78% 8%,80% 26%,98% 30%,88% 45%,100% 60%,82% 66%,82% 84%,65% 80%,50% 100%,36% 80%,18% 84%,18% 66%,0 60%,12% 45%,2% 30%,20% 26%,22% 8%,39% 14%);
  font-family:var(--display);font-size:1.9rem;color:var(--ink)}
.card.c-yellow{background:var(--yellow)}
.card.c-yellow .star{background:#fff}
.card.c-magenta{background:var(--magenta)}
.card.c-magenta h3,.card.c-magenta .meta{color:#fff}
.card.c-magenta .tag{background:var(--yellow);color:var(--ink)}
.card.soon{background:transparent;border-style:dashed;box-shadow:none;transform:none;color:#fff;justify-content:center}
.card.soon h3{color:#fff}
.card.soon .star{background:rgba(255,255,255,.18);color:#fff}

/* tarjetas con foto */
.cards.dense{grid-template-columns:repeat(4,1fr);gap:22px}
.card.has-photo{padding:0;min-height:0;gap:0;overflow:hidden}
/* fondo liso detrás de las fotos */
.card .photo{position:relative;aspect-ratio:4/5;border-bottom:var(--line) solid var(--ink);background-color:var(--yellow);overflow:hidden}
.card.c-yellow .photo{background-color:var(--magenta)}
.card.c-magenta .photo{background-color:var(--violet)}
.sub-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.count{font-family:var(--display);background:var(--ink);color:#fff;padding:2px 14px;font-size:1.1rem;transform:rotate(-1.5deg)}
.card .bio.small{font-size:.88rem;line-height:1.4;font-weight:700}
.card .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%}
.card .photo .star{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;font-size:2.6rem}
.card .body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 20px}
.card .body .tag{position:absolute;top:12px;left:12px;transform:rotate(-3deg);background:var(--yellow);color:var(--ink);border:3px solid var(--ink);z-index:2}
.card .bio{font-weight:700;font-size:.95rem;line-height:1.45}
.dense .card h3{font-size:1.35rem}
.dense .card .meta{font-size:.9rem;font-weight:700}
.buscador{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.buscador input{font:inherit;font-weight:800;padding:12px 18px;border:var(--line) solid var(--ink);box-shadow:5px 5px 0 var(--ink);min-width:min(420px,100%);background:#fff;color:var(--ink)}
.buscador output{color:#fff;font-weight:800}
.dialog{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.dialog .stack{display:grid;gap:34px}
.cta-row{margin-top:34px;display:flex;flex-wrap:wrap;gap:16px}

@media (max-width:960px){
  .page-head .wrap,.dialog{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.dense{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){.cards.dense{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .cards,.cards.dense{grid-template-columns:1fr}
  .title-card{padding:26px 22px 30px}
}

/* cabeceras de Artistas, Compradores y Agenda: el cuadro del título y el globo se mueven */
.title-card{position:relative;overflow:hidden}
.title-card::after{content:"";position:absolute;top:-25%;bottom:-25%;left:-60%;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg)}
@keyframes entra-titulo{from{opacity:0;transform:translateX(-60px) rotate(-9deg) scale(.92)}to{opacity:1;transform:rotate(-1.5deg)}}
@keyframes entra-globo{from{opacity:0;transform:scale(.55) rotate(8deg);transform-origin:20% 100%}to{opacity:1;transform:none}}
@keyframes mece{0%,100%{rotate:-.8deg}50%{rotate:1.4deg}}
@keyframes brillo{0%{left:-60%}30%,100%{left:135%}}
@keyframes cinta-vibra{0%,86%,100%{rotate:0deg;translate:0 0}90%{rotate:-3deg;translate:-2px 0}94%{rotate:2.5deg;translate:2px -1px}98%{rotate:-1deg}}
@keyframes habla-globo{
  0%,34%,100%{translate:0 0;scale:1;rotate:0deg}
  6%{translate:0 -5px;scale:1.045;rotate:-1.3deg}
  14%{translate:0 -1px;scale:1.015;rotate:.9deg}
  22%{translate:0 -4px;scale:1.035;rotate:-.7deg}
}
@media (prefers-reduced-motion:no-preference){
  .page-head .title-card{animation:entra-titulo .7s cubic-bezier(.2,1.4,.4,1) backwards,mece 7s ease-in-out 1.2s infinite}
  .title-card::after{animation:brillo 6s ease-in-out 1.8s infinite}
  .title-card .kicker{animation:cinta-vibra 5s ease-in-out 2s infinite}
  .page-head .bubble{animation:entra-globo .7s cubic-bezier(.2,1.5,.4,1) .45s backwards,habla-globo 6s ease-in-out 1.8s infinite}
}

@media (max-width:960px){.title-card h1{font-size:clamp(2.8rem,10vw,5rem)}}
