/*
Theme Name: El Club Del Rock
Description: Theme propio de elclubdelrock.com. Sin constructores ni dependencias.
Version: 1.1.0
Requires PHP: 8.0
Text Domain: ecdr
*/
@font-face { font-family: Archivo; src: url(archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
:root {
  --tinta: oklch(0.17 0.01 95);
  --papel: oklch(0.97 0.008 95);
  --gris: oklch(0.46 0.01 95);
  --linea: oklch(0.87 0.01 95);
  --ampli: oklch(0.89 0.19 98);
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --suave: cubic-bezier(.2, .8, .2, 1);
}
*, ::before, ::after { box-sizing: border-box; margin: 0; }
html, body { overflow-x: clip; }
html { scroll-padding-top: 6rem; }
body { background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.6 Archivo, system-ui, sans-serif; }
img, iframe, video { max-width: 100%; }
img { height: auto; }
.foto { background: var(--linea); overflow: hidden; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--suave); }
a:hover .foto img { scale: 1.04; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ampli); outline-offset: 2px; }
.ancho { max-width: 76rem; margin-inline: auto; padding-inline: var(--gap); }
.negro { background: var(--tinta); color: var(--papel); }
.screen-reader-text { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }

h1, h2, h3, .dia { font-stretch: 62%; font-weight: 800; line-height: 1.05; text-wrap: balance; }
.rotulo { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 900; line-height: 1; text-transform: uppercase; }
.meta, .cab nav, .cinta, .nav-links, .cabeza a { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.meta { color: var(--gris); }
.negro .meta { color: var(--ampli); }

/* Cabecera fija: el menú acompaña toda la lectura */
.cab { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 5; display: flex; flex-direction: column; align-items: center; padding-top: .5rem; }
.cab img { width: 84px; height: auto; display: block; }
.cab nav { max-width: 100%; }
.cab ul { display: flex; gap: 1.4rem; padding: .7rem var(--gap); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.cab nav a { transition: color .2s; }
.cab nav a:hover, .cab :is(.current-menu-item, .current-cat) a { color: var(--ampli); }

/* Cinta de tendencia */
.cinta { background: var(--ampli); overflow: hidden; white-space: nowrap; rotate: -1deg; margin-inline: -1rem; position: relative; z-index: 1; }
.cinta div { display: inline-flex; gap: 2.5rem; padding: .5rem 1.25rem; animation: correr 45s linear infinite; }
.cinta a::before { content: "★  "; }
.cinta:hover div { animation-play-state: paused; }
@keyframes correr { to { translate: -50% 0; } }

/* Tapa: foto y titular en tiras amarillas */
.tapa { padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 5vw, 3.5rem); margin-top: -.5rem; }
.tapa a { display: grid; gap: 0 clamp(1.5rem, 4vw, 3rem); align-items: center; }
.tapa .foto { aspect-ratio: 16 / 9; }
.tapa h2 { font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 900; line-height: 1.02; text-transform: uppercase; margin-top: -1em; position: relative; }
.tapa h2 span { background: var(--ampli); color: var(--tinta); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tapa p { font-size: 1.1rem; max-width: 46ch; margin-top: 1rem; }

.bloque { padding-block: clamp(2rem, 5vw, 3.5rem); }
.cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 3px solid; padding-top: .6rem; margin-bottom: 1.25rem; }
.cabeza a:hover { text-decoration: underline; }
.bajada { font-size: 1.15rem; max-width: 60ch; margin-bottom: 2rem; }

/* Tarjetas: en rejilla o en riel deslizable */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem) var(--gap); }
.riel { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gap) * -1); padding-inline: var(--gap); scroll-padding-inline: var(--gap); }
.riel > * { flex: 0 0 min(17rem, 72vw); scroll-snap-align: start; }
.tarjeta .foto { aspect-ratio: 16 / 10; margin-bottom: .7rem; }
.tarjeta :is(h2, h3) { font-size: 1.4rem; margin-top: .25rem; }
:is(.tarjeta, .visto a):hover :is(h2, h3) { text-decoration: underline; text-decoration-color: var(--ampli); text-decoration-thickness: .16em; text-underline-offset: .12em; }
.mosaico { display: grid; gap: var(--gap); }

/* Boletos */
.boletos { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: .6rem; scrollbar-width: none; }
.boleto { flex: 0 0 min(20rem, 82vw); scroll-snap-align: start; display: grid; grid-template-columns: 5.5rem 1fr; background: var(--ampli); color: var(--tinta); position: relative; }
.boleto time { display: grid; place-content: center; text-align: center; border-right: 3px dashed; padding: 1rem 0; }
.boleto::before, .boleto::after { content: ""; position: absolute; left: 4.9rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--tinta); }
.boleto::before { top: -.6rem; }
.boleto::after { bottom: -.6rem; }
.boleto div { padding: 1rem 1.25rem; align-self: center; }
.boleto h3 { font-size: 1.5rem; text-transform: uppercase; }
.boleto .meta { color: inherit; margin-top: .3rem; }
.dia { display: block; font-size: 3rem; font-weight: 900; line-height: 1; }
.nota .boleto { max-width: 25rem; }
.nota .boleto::before, .nota .boleto::after { background: var(--papel); }

/* Lo más visto */
.visto { display: grid; gap: 1.25rem var(--gap); counter-reset: n; }
.visto li { counter-increment: n; display: grid; grid-template-columns: 3rem 1fr; align-items: start; }
.visto li::before { content: counter(n); font-stretch: 62%; font-weight: 900; font-size: 3.2rem; line-height: .85; color: var(--ampli); }
.visto h3 { font-size: 1.25rem; }
.pub { display: grid; place-items: center; min-height: 100px; margin-block: 1.5rem; overflow: hidden; }

/* Pie */
.pie { padding-block: 2.5rem; text-align: center; }
.pie img { width: 110px; height: auto; margin: 0 auto .75rem; display: block; }
.pie form { display: flex; justify-content: center; margin-bottom: 2rem; }
.pie input, .pie button, .form-submit input { background: none; border: 2px solid; padding: .5em 1em; }
.pie label { flex: 0 1 20rem; }
.pie input[type=search] { width: 100%; border-right: 0; }
.pie button, .form-submit input { background: var(--ampli); color: var(--tinta); border-color: var(--ampli); font-weight: 700; cursor: pointer; }

/* Nota */
.progreso { display: none; }
.titular { padding-block: clamp(1.5rem, 4vw, 3rem); }
.titular.con-foto { padding-bottom: clamp(5rem, 13vw, 9rem); }
.titular > .ancho { max-width: 46rem; }
.titular h1 { font-size: clamp(2rem, 5.4vw, 3.6rem); font-weight: 900; line-height: 1; text-transform: uppercase; margin-block: .75rem 1rem; }
.titular p:not(.meta) { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.4; }
.titular .meta a:hover { text-decoration: underline; }
.nota { max-width: 44rem; margin-inline: auto; padding-bottom: 2rem; }
.nota > * { margin-top: 1.5rem; }
.titular.con-foto + .ancho .nota > figure { margin-top: clamp(-7.5rem, -10vw, -4rem); }
.nota figure .foto { aspect-ratio: 16 / 9; }
figcaption, .wp-caption-text { font-size: .85rem; color: var(--gris); margin-top: .4rem; }
.compartir { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.compartir > :is(a, button) { background: var(--tinta); color: var(--papel); border: 0; padding: .5em 1.1em; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background .2s, color .2s; }
.compartir > :is(a, button):hover { background: var(--ampli); color: var(--tinta); }
.compartir .meta { margin-left: auto; }

.cuerpo { font-size: 1.2rem; line-height: 1.7; overflow-wrap: break-word; }
.cuerpo > * + * { margin-top: 1.1em; }
.cuerpo p { text-align: start !important; }
.cuerpo :is(h2, h3, h4) { font-size: 1.9rem; margin-top: 1.6em; }
.cuerpo :is(h3, h4) { font-size: 1.5rem; }
.cuerpo a, .comentarios p a { background: var(--ampli); padding: 0 .15em; }
.cuerpo > p:first-child::first-letter { font-stretch: 62%; font-weight: 900; font-size: 4.2em; line-height: .8; float: left; padding: .06em .08em 0 0; }
.cuerpo :is(ul, ol) { padding-left: 1.4em; list-style: revert; }
.cuerpo blockquote { border-block: 3px solid; padding-block: 1rem; font-stretch: 62%; font-weight: 800; font-size: 1.7rem; line-height: 1.15; }
.cuerpo iframe { display: block; width: 100%; border: 0; }
.cuerpo iframe:is([src*=youtube], [src*=vimeo]) { aspect-ratio: 16 / 9; height: auto; }
.cuerpo .tambien { background: var(--tinta); color: var(--papel); padding: 1rem 1.25rem; font-stretch: 62%; font-weight: 800; font-size: 1.45rem; line-height: 1.1; }
.cuerpo .tambien a { background: none; padding: 0; }
.cuerpo .tambien a:hover { color: var(--ampli); }
.cuerpo .tambien .meta { display: block; margin-bottom: .35rem; font-stretch: 100%; }
.wp-caption { max-width: 100%; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: .3em 1.5em 1em 0; max-width: 50%; }
.alignright { float: right; margin: .3em 0 1em 1.5em; max-width: 50%; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }

/* Comentarios y paginación */
.comentarios > * + * { margin-top: 1.5rem; }
.comentarios h2 { font-size: 1.8rem; }
.comment-body { border-top: 1px solid var(--linea); padding-block: 1rem; }
.comment-body img { float: left; border-radius: 50%; margin-right: .75rem; }
.comment-metadata, .reply, .logged-in-as, .comment-notes { font-size: .85rem; color: var(--gris); }
.children { padding-left: 1.5rem; }
.comment-form :is(textarea, input:not([type=submit], [type=checkbox])) { display: block; width: 100%; background: none; border: 2px solid; padding: .5em; }
.comment-form p { margin-top: 1rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; font-size: .95rem; }
.nav-links > * { border: 2px solid; padding: .4em .9em; }
.nav-links .current, .nav-links a:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

@media (min-width: 48rem) {
  .cab { flex-direction: row; gap: 1.5rem; padding: .45rem var(--gap); }
  .cab ul { padding-inline: 0; }
  .tapa a { grid-template-columns: 1.45fr 1fr; }
  .tapa h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); margin: 0 0 0 -3rem; }
  .visto { grid-template-columns: repeat(5, 1fr); }
  .visto li { display: block; }
  .visto li::before { display: block; margin-bottom: .5rem; }
  .mosaico { grid-template-columns: repeat(4, 1fr); }
  .riel { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .riel > :nth-child(n+5) { display: none; }
  .mosaico .tarjeta:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaico .tarjeta:first-child :is(h2, h3) { font-size: clamp(1.8rem, 3vw, 2.6rem); }
  .mosaico .tarjeta:first-child .foto { aspect-ratio: 4 / 3; }
}

/* Movimiento: solo si el lector no pidió reducirlo y el navegador lo soporta */
@media (prefers-reduced-motion: reduce) { .cinta div { animation: none; } .foto img { transition: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rejilla .tarjeta, .mosaico .tarjeta, .cabeza { animation: subir linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .progreso { display: block; position: fixed; inset: 0 0 auto; height: 4px; z-index: 6; background: var(--ampli); transform-origin: 0 50%; animation: avance linear both; animation-timeline: scroll(root); }
  }
}
@keyframes subir { from { opacity: 0; translate: 0 1.5rem; } }
@keyframes avance { from { scale: 0 1; } }