/* Concepto: un mundo en negro de grabado. El globo es la portada; debajo, el archivo vivo en bandas a sangre. */
:root {
  --tinta: #0b0b0a;
  --tinta-2: #151513;
  --papel: #efeae0;
  --gris: #8f8c85;
  --linea: #2a2926;
  --brillo: #ffffff;
  --f-tit: "Montserrat", "Arial Black", Arial, sans-serif;
  --f-txt: "Jost", "Futura", "Century Gothic", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--tinta); color: var(--papel); margin: 0; }
body { font-family: var(--f-txt); font-size: 16px; line-height: 1.5; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, canvas:focus-visible { outline: 2px solid var(--brillo); outline-offset: 3px; }
.envoltura { max-width: 1440px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 900px) { .envoltura { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
.eti { font: 400 12px/1.2 var(--f-txt); letter-spacing: .3em; text-transform: uppercase; color: var(--gris); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boton { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--papel); font: 500 12px/1 var(--f-txt); letter-spacing: .22em; text-transform: uppercase; background: none; color: var(--papel); cursor: pointer; transition: background .25s, color .25s; }
.boton:hover, .boton--lleno { background: var(--papel); color: var(--tinta); }
.boton--lleno:hover { background: var(--brillo); }
.tit-sec { margin: 0; font: 900 clamp(34px, 5vw, 72px)/.92 var(--f-tit); text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; }
.cab-sec { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.cab-sec > div { display: grid; gap: 14px; min-width: 0; }
section { position: relative; }

/* ---------- Barra ---------- */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 25; padding-top: env(safe-area-inset-top, 0px); background: transparent; border-bottom: 1px solid transparent; transition: background .35s, border-color .35s, backdrop-filter .35s; }
.barra.solida { background: rgba(11,11,10,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--linea); }
main { padding-top: var(--barra-h, 90px); }
main#v-inicio { padding-top: 0; }
.portada__malla { padding-top: var(--barra-h, 90px); }
.barra .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; transition: padding .35s; }
.barra.solida .envoltura { padding-block: 12px; }
.logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo span { display: grid; gap: 4px; text-transform: uppercase; white-space: nowrap; }
.logo small { font: 400 11px/1 var(--f-txt); letter-spacing: .32em; display: inline-block; justify-self: start; white-space: nowrap; }
.logo b { display: inline-block; justify-self: start; white-space: nowrap; }
.logo b { font: 800 19px/1 var(--f-tit); letter-spacing: .04em; }
.logo i { flex: none; aspect-ratio: 1; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--papel); border-radius: 50%; font: 900 15px/1 var(--f-tit); font-style: normal; letter-spacing: -.04em; }
.barra nav { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 8px 22px; justify-content: flex-end; font: 400 12px/1 var(--f-txt); letter-spacing: .2em; text-transform: uppercase; }
.barra nav { align-items: center; }
.barra nav > a, .menu__item > a { padding: 6px 0; color: #cfcac0; }
.barra nav a:hover { color: var(--brillo); }
.menu__item { position: relative; }
.menu__item > a::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.submenu { position: absolute; left: -18px; top: 100%; z-index: 30; display: grid; gap: 2px; min-width: 210px; padding: 14px 18px; margin-top: 10px; background: #121210; border: 1px solid var(--linea); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility .2s; }
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.menu__item:hover .submenu, .menu__item:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { padding: 8px 0; color: #cfcac0; letter-spacing: .14em; }
.icono { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--papel); cursor: pointer; padding: 0; border-radius: 50%; }
.icono:hover { background: var(--tinta-2); }
.busca { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #121210; border-bottom: 1px solid var(--linea); }
.busca form { display: flex; gap: 12px; align-items: center; padding-block: 18px; }
.busca label { flex: none; }
.busca input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; background: var(--tinta); border: 1px solid #3a3935; border-radius: 999px; color: var(--papel); font: 300 18px/1 var(--f-txt); }
.busca input:focus { outline: 2px solid var(--papel); outline-offset: 2px; }
.barra__acc { display: flex; align-items: center; gap: 6px; }
.menu-movil { display: none; }
@media (max-width: 1360px) {
  .barra nav.menu { display: none; }
  .menu-movil { display: grid; }
}

/* ---------- Panel del menú (hamburguesa) ---------- */
.panel { position: fixed; inset: 0; z-index: 100; background: #070706; color: var(--papel); clip-path: circle(0 at var(--ox, 95%) var(--oy, 40px)); visibility: hidden; transition: clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s .7s; overflow: hidden; }
.panel.abierto { clip-path: circle(150% at var(--ox, 95%) var(--oy, 40px)); visibility: visible; transition: clip-path .8s cubic-bezier(.7,0,.2,1), visibility 0s; }
.panel__marco { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.panel__izq { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding-block: 22px 32px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 900px) { .panel__izq { padding-block: 22px 40px; padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: 40px; } }
.panel__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(24px, 5vh, 56px); }
.panel__cerrar { position: fixed; z-index: 5; width: 52px; height: 52px; border: 1px solid #6b6964; border-radius: 50%; background: rgba(7,7,6,.7); color: var(--papel); cursor: pointer; display: grid; place-items: center; transition: transform .4s, background .3s; }
.panel__cerrar:hover { background: var(--papel); color: var(--tinta); transform: rotate(90deg); }
.panel__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(2px, .8vh, 10px); counter-reset: s; }
.panel__lista > li { min-width: 0; opacity: 0; transform: translateY(26px); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.25s + var(--i) * .05s); }
.panel.abierto .panel__lista > li { opacity: 1; transform: none; }
.panel__sec { display: flex; align-items: baseline; gap: 18px; padding: 2px 0; }
.panel__sec::before { counter-increment: s; content: counter(s, decimal-leading-zero); font: 400 12px/1 var(--f-txt); letter-spacing: .2em; color: var(--gris); width: 2.4em; flex: none; transform: translateY(-.9em); }
.panel__sec b { font: 900 clamp(34px, 6.2vh, 74px)/.98 var(--f-tit); text-transform: uppercase; letter-spacing: -.025em; color: var(--tinta); -webkit-text-stroke: 1.6px var(--papel); paint-order: stroke fill; transition: color .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.panel__sec small { font: 400 11px/1 var(--f-txt); letter-spacing: .24em; text-transform: uppercase; color: var(--gris); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.panel__lista > li:hover .panel__sec b, .panel__sec:focus-visible b, .panel__lista > li.activo .panel__sec b { color: var(--papel); transform: translateX(10px); }
.panel__lista > li:hover .panel__sec small, .panel__lista > li.activo .panel__sec small { opacity: 1; transform: none; }
.panel__sub { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0 0 8px calc(2.4em + 18px + 10px); font: 400 13px/1 var(--f-txt); letter-spacing: .18em; text-transform: uppercase; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .3s, padding .3s; }
.panel__sub a { padding: 8px 0; color: #cfcac0; border-bottom: 1px solid transparent; }
.panel__sub a:hover, .panel__sub a:focus-visible { color: var(--brillo); border-color: var(--brillo); }
.panel__lista > li:hover .panel__sub, .panel__lista > li:focus-within .panel__sub, .panel__lista > li.activo .panel__sub { max-height: 80px; opacity: 1; padding-top: 6px; }
.panel__pie { margin-top: auto; padding-top: 32px; display: grid; gap: 22px; opacity: 0; transition: opacity .5s .7s; }
.panel.abierto .panel__pie { opacity: 1; }
.panel__busca { display: flex; gap: 10px; max-width: 520px; }
.panel__busca input { flex: 1; min-width: 0; height: 50px; padding: 0 20px; background: transparent; border: 1px solid #3a3935; border-radius: 999px; color: var(--papel); font: 300 17px/1 var(--f-txt); }
.panel__busca input:focus { outline: 2px solid var(--papel); outline-offset: 2px; }
.panel__enlaces { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.panel__prox { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 1px solid #3a3935; border-radius: 999px; font: 400 12px/1.2 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; }
.panel__prox i { width: 8px; height: 8px; border-radius: 50%; background: var(--brillo); box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.panel__der { position: relative; overflow: hidden; background: #000; }
.panel__der figure { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.08); transition: opacity .6s, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.panel__der figure.ver { opacity: 1; transform: scale(1); }
.panel__der img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.8); }
.panel__der::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #070706 0%, rgba(7,7,6,0) 30%), linear-gradient(0deg, rgba(7,7,6,.85), rgba(7,7,6,0) 45%); pointer-events: none; }
.panel__leyenda { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 32px; display: grid; gap: 10px; max-width: 46ch; }
.panel__leyenda b { font: 900 clamp(60px, 10vw, 150px)/.8 var(--f-tit); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.panel__leyenda span { font: 300 16px/1.45 var(--f-txt); color: #d8d3c8; }
@media (max-width: 900px) {
  .panel__marco { grid-template-columns: minmax(0, 1fr); }
  .panel__der { display: none; }
  .panel__sec b { font-size: clamp(26px, 8.2vw, 42px); }
  .panel__sec { gap: 10px; flex-wrap: wrap; }
  .panel__sec small { display: none; }
  .panel__busca .boton { padding: 0 16px; }
  .panel__busca input { padding: 0 16px; font-size: 16px; }
  .panel__sub { max-height: none; opacity: 1; padding-top: 4px; padding-left: 0; gap: 2px 16px; font-size: 12px; }
  .panel__sec::before { width: 2em; }
}
@media (prefers-reduced-motion: reduce) { .panel, .panel.abierto { transition: none; } .panel__lista > li { transition: none; } }

/* ---------- Portada: el globo ---------- */
.portada { overflow: hidden; border-bottom: 1px solid var(--linea); }
.portada__malla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; min-height: 780px; gap: 0; }
.portada__txt { position: relative; z-index: 2; display: grid; gap: 28px; padding-block: 40px 64px; }
.portada__txt h1 { margin: 0; display: grid; gap: 10px; }
.portada__txt h1 small { font: 300 clamp(18px, 2vw, 26px)/1 var(--f-txt); letter-spacing: .5em; text-transform: uppercase; }
.portada__txt h1 span { font: 900 clamp(64px, 9.4vw, 158px)/.8 var(--f-tit); letter-spacing: -.045em; text-transform: uppercase; margin-left: -.065em; }
.portada__intro { margin: 0; max-width: 34ch; font: 300 19px/1.5 var(--f-txt); color: #cfcac0; }
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin: 0; max-width: 460px; }
.cifras div { display: grid; gap: 6px; border-top: 1px solid var(--linea); padding-top: 12px; }
.cifras dt { order: 2; font: 400 11px/1.2 var(--f-txt); letter-spacing: .26em; text-transform: uppercase; color: var(--gris); }
.cifras dd { margin: 0; font: 800 clamp(30px, 3vw, 44px)/1 var(--f-tit); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.globo { position: relative; height: 100%; min-height: 780px; }
.globo canvas { position: absolute; top: 50%; left: 50%; width: min(900px, 59vw); height: min(900px, 59vw); transform: translate(-44%, -46%); cursor: grab; touch-action: pan-y; }
.globo canvas.arrastra { cursor: grabbing; }
.globo__ayuda { position: absolute; right: 0; bottom: 28px; margin: 0; z-index: 2; text-align: right; }
.ficha-pais { position: absolute; z-index: 4; pointer-events: none; min-width: 210px; padding: 14px 16px; background: rgba(11,11,10,.92); border: 1px solid #3a3935; border-radius: 4px; display: grid; gap: 6px; opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
.ficha-pais.ver { opacity: 1; transform: none; }
.ficha-pais b { font: 800 20px/1.1 var(--f-tit); }
.ficha-pais span { font: 400 13px/1.4 var(--f-txt); color: #cfcac0; font-variant-numeric: tabular-nums; }
.ficha-pais em { font: 500 11px/1 var(--f-txt); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--brillo); margin-top: 4px; }
.ficha-pais .cc { font: 500 11px/1 var(--f-txt); letter-spacing: .2em; color: var(--gris); text-transform: uppercase; }
.cinta { border-top: 1px solid var(--linea); overflow: hidden; }
.carril { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.carril.arrastra { cursor: grabbing; }
.carril.arrastra a { pointer-events: none; }
.carril img { -webkit-user-drag: none; user-select: none; }
.cinta__pista { display: flex; gap: 0; width: max-content; will-change: transform; }
.cinta a { display: flex; align-items: baseline; gap: 10px; padding: 16px 26px; border-right: 1px solid var(--linea); white-space: nowrap; font: 400 13px/1 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; color: #cfcac0; }
.cinta a b { font: 800 14px/1 var(--f-tit); letter-spacing: 0; color: var(--papel); font-variant-numeric: tabular-nums; }
.cinta a:hover { background: var(--tinta-2); color: var(--brillo); }
@media (max-width: 900px) {
  .portada__malla { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .globo { min-height: 0; height: auto; order: -1; display: grid; gap: 10px; padding-top: 8px; }
  .globo canvas { position: relative; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: 1; transform: none; }
  .globo__ayuda { position: static; text-align: center; }
  .portada__txt { padding-block: 0 48px; }
}

/* ---------- Próximos conciertos ---------- */
.prox { padding-block: 96px; border-bottom: 1px solid var(--linea); }
.tablero { margin-top: 44px; background: #050505; border: 1px solid var(--linea); border-radius: 6px; padding: 22px; --celda: clamp(17px, 1.75vw, 26px); }
.tablero__cab { display: flex; gap: 0; margin-bottom: 12px; }
.tablero__cab span { flex: 1 1 auto; white-space: nowrap; }
.tablero__cab span[style] { flex: none; width: calc((var(--celda) + 3px) * var(--n)); }
.tablero__filas { display: grid; gap: 14px; }
.tablero__bloque { display: grid; gap: 3px; border-radius: 3px; }
.tablero__bloque:hover i:not(.v) { background: linear-gradient(#20201d 0 49%, #000 49% 51%, #1a1a17 51%); }
.linea { display: flex; gap: 3px; }
.linea i { flex: none; width: var(--celda); height: calc(var(--celda) * 1.45); display: grid; place-items: center; font: 700 calc(var(--celda) * .78)/1 "Courier New", ui-monospace, monospace; font-style: normal; color: #f4efe2; background: linear-gradient(#1a1a18 0 49%, #000 49% 51%, #141412 51%); border-radius: 2px; }
.linea i.t { color: #c4bfb3; }
.linea i.v { color: transparent; background: linear-gradient(#121210 0 49%, #000 49% 51%, #0e0e0c 51%); }

/* ---------- Tal día como hoy ---------- */
.hoy { padding-block: 96px; border-bottom: 1px solid var(--linea); }
.hoy__fecha { font: 900 clamp(80px, 13vw, 210px)/.8 var(--f-tit); letter-spacing: -.05em; text-transform: uppercase; margin: 0; }
.hoy__fecha small { display: block; font: 300 .16em/1 var(--f-txt); letter-spacing: .5em; margin-bottom: .6em; color: var(--gris); }
.regla { position: relative; margin-top: 56px; height: 64px; border-bottom: 1px solid #4a4843; }
.regla__marca { position: absolute; bottom: 0; width: 1px; height: 10px; background: #4a4843; }
.regla__marca span { position: absolute; top: 14px; left: 0; transform: translateX(-50%); font: 400 11px/1 var(--f-txt); letter-spacing: .1em; color: var(--gris); }
.regla__ev { position: absolute; bottom: -6px; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: var(--papel); box-shadow: 0 0 0 4px var(--tinta); cursor: pointer; transition: transform .2s; border: 0; padding: 0; }
.regla__ev:hover, .regla__ev[aria-pressed="true"] { transform: scale(1.6); background: var(--brillo); }
.eventos { margin: 48px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--tinta); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.eventos li { background: var(--tinta); border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 24px 22px; display: grid; gap: 10px; align-content: start; transition: background .2s; }
.eventos li.activo { background: var(--tinta-2); }
.eventos b { font: 800 34px/1 var(--f-tit); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.eventos p { margin: 0; font: 400 15px/1.45 var(--f-txt); color: #d8d3c8; }
.eventos small { font: 400 11px/1.3 var(--f-txt); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }

/* ---------- La Historia: tira de película ---------- */
.historia { padding-block: 96px 0; border-bottom: 1px solid var(--linea); overflow: hidden; }
.pelicula { margin-top: 48px; background: #050505; padding: 30px 0; position: relative; }
.pelicula__pista { cursor: inherit; }
.pelicula::before, .pelicula::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: radial-gradient(circle at 50% 50%, #0b0b0a 0 3.5px, transparent 4px) 0 0 / 22px 14px repeat-x, #050505; }
.pelicula::before { top: 8px; } .pelicula::after { bottom: 8px; }
.pelicula__pista { display: flex; gap: 10px; width: max-content; padding-inline: 40px; will-change: transform; }
.cuadro { position: relative; flex: none; width: 230px; aspect-ratio: 3 / 2; overflow: hidden; background: #111; }
.cuadro img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform .5s, filter .5s; }
.cuadro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.85)); }
.cuadro span { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; display: grid; gap: 4px; }
.cuadro small { font: 400 10px/1 var(--f-txt); letter-spacing: .24em; text-transform: uppercase; color: #cfcac0; }
.cuadro b { font: 800 14px/1.1 var(--f-tit); text-transform: uppercase; }
.cuadro:hover img { transform: scale(1.06); filter: grayscale(1) brightness(1.15); }

/* ---------- Muro de discos ---------- */
.discos { padding-block: 96px; border-bottom: 1px solid var(--linea); overflow: hidden; }
.muro { margin-top: 48px; display: grid; gap: 18px; }
.fila { overflow: hidden; }
.fila__pista { display: flex; gap: 18px; width: max-content; padding-block: 8px; will-change: transform; }
.disco { position: relative; flex: none; width: 170px; height: 170px; }
.soporte { position: absolute; top: 50%; left: 50%; width: 158px; height: 158px; margin: -79px 0 0 -79px; border-radius: 50%; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.soporte--lp { background: radial-gradient(circle, #0b0b0a 0 3%, var(--etq, #c9c2b2) 3.5% 17%, #2a2a28 17.5% 19%, #3a3a37 20%, #2b2b29 23%, #3a3a37 33%, #2a2a28 35%, #383835 48%, #292927 50%, #363633 66%, #282826 68%, #343431 85%, #2a2a28 97%, #4a4a46 100%); box-shadow: 0 0 0 1px #4a4a46, 0 10px 24px rgba(0,0,0,.5); }
.soporte--single { width: 120px; height: 120px; margin: -60px 0 0 -60px; background: radial-gradient(circle, #0b0b0a 0 15%, var(--etq, #c9c2b2) 15.5% 35%, #2a2a28 35.5% 38%, #3a3a37 40%, #2b2b29 44%, #393936 58%, #292927 60%, #363633 78%, #2a2a28 96%, #4a4a46 100%); box-shadow: 0 0 0 1px #4a4a46, 0 8px 18px rgba(0,0,0,.5); }
.soporte--cd { width: 150px; height: 150px; margin: -75px 0 0 -75px; background: radial-gradient(circle, transparent 0 9%, rgba(255,255,255,.55) 9.5% 11%, #c9cdd2 11.5% 22%, transparent 22.5%), conic-gradient(from 20deg, #d9dde2, #9aa3ad, #f2f2ef, #b6a9c9, #e7ecef, #9fb4b9, #f4f1e8, #a7a0b4, #d9dde2); -webkit-mask: radial-gradient(circle, transparent 0 7%, #000 7.5%); mask: radial-gradient(circle, transparent 0 7%, #000 7.5%); }
.soporte--doble { box-shadow: 10px 0 0 -2px #222, 10px 0 0 -1px #0b0b0a; }
.soporte--digital { display: none; }
.disco__tipo { position: absolute; z-index: 2; right: 8px; bottom: 8px; padding: 4px 7px; background: rgba(11,11,10,.85); font: 500 10px/1 var(--f-txt); letter-spacing: .16em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.disco img { position: relative; z-index: 1; width: 170px; height: 170px; object-fit: cover; box-shadow: 0 10px 24px rgba(0,0,0,.5); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.disco small { position: absolute; z-index: 2; left: 8px; top: 8px; padding: 4px 7px; background: rgba(11,11,10,.85); font: 500 10px/1 var(--f-txt); letter-spacing: .2em; opacity: 0; transition: opacity .3s; }
.disco:hover img, .disco:focus-visible img { transform: translateX(-34%) rotate(-3deg); }
.disco:hover .soporte, .disco:focus-visible .soporte { transform: translateX(46%) rotate(140deg); }
.disco:hover .soporte--single, .disco:focus-visible .soporte--single { transform: translateX(70%) rotate(140deg); }
.disco:hover small, .disco:focus-visible small, .disco:hover .disco__tipo, .disco:focus-visible .disco__tipo { opacity: 1; }
.disco--digital:hover img { transform: none; }

/* ---------- Secciones ---------- */
.secciones { padding-block: 96px; border-bottom: 1px solid var(--linea); }
.indice { margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.indice a { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 16ch; gap: 12px 40px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linea); transition: padding .3s; }
.indice b { font: 900 clamp(30px, 5vw, 74px)/.95 var(--f-tit); overflow-wrap: anywhere; text-transform: uppercase; letter-spacing: -.03em; color: var(--tinta); -webkit-text-stroke: 2.4px var(--papel); paint-order: stroke fill; transition: color .3s; }
.indice a:hover b, .indice a:focus-visible b { color: var(--papel); }
.indice a:hover { padding-left: 18px; }
.indice p { margin: 0; max-width: 46ch; font: 300 16px/1.5 var(--f-txt); color: #cfcac0; }
.indice small { justify-self: end; font: 500 12px/1 var(--f-txt); letter-spacing: .22em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.sigue { position: fixed; z-index: 20; left: 0; top: 0; width: 300px; height: 240px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .25s, transform .25s; }
.sigue.ver { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sigue img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
@media (max-width: 760px) { .indice a { grid-template-columns: minmax(0, 1fr); } .indice small { order: -1; justify-self: start; } .indice small:empty { display: none; } .sigue { display: none; } }

/* ---------- Lo último ---------- */
.ultimo { padding-block: 96px; }
.ultimo ul { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--tinta); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.ultimo li { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
@media (max-width: 900px) { .ultimo ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ultimo ul { grid-template-columns: minmax(0, 1fr); } }
.ultimo li a { display: grid; gap: 14px; align-content: space-between; min-height: 170px; padding: 22px; background: var(--tinta); height: 100%; transition: background .2s; }
.ultimo li a:hover { background: var(--tinta-2); }
.ultimo b { font: 800 22px/1.15 var(--f-tit); }
.pie { border-top: 1px solid var(--linea); }
.pie .envoltura { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 36px; }

@media (max-width: 1000px) { .eventos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eventos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); overflow: hidden; }
.pie__llamada { border-bottom: 1px solid var(--linea); }
.pie__llamada .envoltura { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; padding-block: 88px 72px; }
.pie__llamada h2 { margin: 0; font: 900 clamp(32px, 4.2vw, 62px)/.95 var(--f-tit); text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; }
.pie__llamada p { margin: 0 0 24px; font: 300 18px/1.6 var(--f-txt); color: #d8d3c8; max-width: 52ch; }
.pie__llamada .acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.pie__cols .envoltura { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-block: 64px; }
.pie__cols h3 { margin: 0 0 18px; }
.pie__cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pie__cols a { font: 400 16px/1.3 var(--f-txt); color: #cfcac0; }
.pie__cols a:hover { color: var(--brillo); }
.redes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.redes a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #3a3935; border-radius: 50%; color: var(--papel); transition: background .25s, color .25s; }
.redes a:hover { background: var(--papel); color: var(--tinta); }
.pie__correo { font: 500 15px/1.2 var(--f-txt) !important; color: var(--papel) !important; border-bottom: 1px solid #4a4843; padding-bottom: 2px; }
.pie__base .envoltura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; border-top: 1px solid var(--linea); }
.pie__arriba { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--papel); cursor: pointer; padding: 8px 0; }
.pie__firma { font: 900 clamp(34px, 8.6vw, 132px)/.78 var(--f-tit); letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; color: var(--tinta); -webkit-text-stroke: 1.4px #3f3e3a; paint-order: stroke fill; margin: 0 0 -.12em; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); text-align: center; user-select: none; }
@media (max-width: 900px) { .pie__llamada .envoltura { grid-template-columns: minmax(0, 1fr); } .pie__cols .envoltura { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pie__cols .envoltura { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Páginas del proyecto ---------- */
.vista { padding-block: 72px 112px; }
.vista__cab { display: grid; gap: 18px; padding-bottom: 56px; border-bottom: 1px solid var(--linea); }
.vista__cab h1 { margin: 0; font: 900 clamp(56px, 10vw, 168px)/.82 var(--f-tit); letter-spacing: -.045em; text-transform: uppercase; margin-left: -.05em; }
.manif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px 72px; padding-top: 64px; }
.manif__lado { position: sticky; top: 32px; align-self: start; display: grid; gap: 14px; }
.manif__lado img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1); }
.manif__txt { display: grid; gap: 26px; max-width: 66ch; }
.manif__txt p { margin: 0; font: 300 19px/1.7 var(--f-txt); color: #ddd8cd; }
.manif__txt p:first-child { font: 400 clamp(24px, 2.4vw, 32px)/1.35 var(--f-txt); color: var(--papel); }
.manif__cita { margin: 40px 0 0; padding-top: 40px; border-top: 1px solid var(--linea); font: 900 clamp(30px, 3.6vw, 54px)/1.02 var(--f-tit); text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; }
.colab__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; padding-top: 64px; }
.colab__intro p { margin: 0 0 20px; font: 300 19px/1.7 var(--f-txt); color: #ddd8cd; }
.colab__intro p.grande { font: 400 clamp(22px, 2.2vw, 30px)/1.4 var(--f-txt); color: var(--papel); }
.gracias { margin-top: 72px; border-top: 1px solid var(--linea); }
.gracias h2 { margin: 40px 0 10px; }
.gracias > p { margin: 0 0 36px; max-width: 70ch; font: 300 16px/1.6 var(--f-txt); color: #cfcac0; }
.nombres { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.nombres li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.nombres b { font: 800 clamp(24px, 3.4vw, 46px)/1.05 var(--f-tit); letter-spacing: -.02em; }
.nombres span { flex: none; }
.gracias__nota { margin: 28px 0 0; font: 300 15px/1.6 var(--f-txt); color: var(--gris); }
.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px 72px; padding-top: 64px; }
.contacto__lado { display: grid; gap: 20px; align-content: start; }
.contacto__lado p { margin: 0; font: 300 19px/1.6 var(--f-txt); color: #ddd8cd; }
.contacto__lado a.correo { font: 800 clamp(20px, 2vw, 28px)/1.2 var(--f-tit); border-bottom: 2px solid var(--papel); justify-self: start; overflow-wrap: anywhere; }
.form { display: grid; gap: 40px; min-width: 0; }
#fases { display: grid; gap: 56px; }
.pasos { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pasos li { flex: 1; display: grid; gap: 8px; }
.pasos li::before { content: ""; height: 2px; background: #33322e; }
.pasos li.hecho::before, .pasos li.actual::before { background: var(--papel); }
.pasos li.actual { color: var(--papel); }
.fase { display: grid; gap: 28px; border: 0; margin: 0; padding: 0; min-width: 0; }
.fase legend { padding: 0; margin-bottom: 18px; font: 800 clamp(22px, 2.4vw, 32px)/1.15 var(--f-tit); }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span { display: grid; gap: 8px; align-content: space-between; min-height: 112px; padding: 18px; border: 1px solid #33322e; border-radius: 6px; font: 700 17px/1.2 var(--f-tit); transition: border-color .2s, background .2s; }
.opcion span small { font: 300 13px/1.4 var(--f-txt); color: var(--gris); }
.opcion input:hover + span { border-color: #6b6964; }
.opcion input:checked + span { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.opcion input:checked + span small { color: #4a4843; }
.opcion input:focus-visible + span { outline: 2px solid var(--papel); outline-offset: 3px; }
.opciones--peq .opcion span { min-height: 0; padding: 14px 16px; font-size: 15px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
.campo { display: grid; gap: 8px; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label, .campo .eti-campo { font: 500 13px/1.3 var(--f-txt); letter-spacing: .08em; color: #d8d3c8; }
.campo small { font: 300 13px/1.4 var(--f-txt); color: var(--gris); }
.campo input[type=text], .campo input[type=url], .campo input[type=email], .campo select, .campo textarea { width: 100%; min-height: 50px; padding: 12px 16px; background: #0f0f0d; border: 1px solid #33322e; border-radius: 6px; color: var(--papel); font: 300 17px/1.4 var(--f-txt); }
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--papel); outline-offset: 1px; border-color: transparent; }
.soltar { display: grid; place-items: center; gap: 8px; min-height: 150px; padding: 24px; border: 1px dashed #4a4843; border-radius: 6px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.soltar:hover, .soltar.sobre { border-color: var(--papel); background: #121210; }
.soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.soltar b { font: 700 16px/1.2 var(--f-tit); }
.miniaturas { display: flex; flex-wrap: wrap; gap: 8px; }
.miniaturas span { width: 74px; height: 74px; border-radius: 4px; overflow: hidden; background: #1a1a18; display: grid; place-items: center; font: 500 11px/1 var(--f-txt); color: var(--gris); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.marca { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font: 400 16px/1.4 var(--f-txt); }
.marca input { width: 22px; height: 22px; margin: 0; accent-color: var(--papel); flex: none; }
.form__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--linea); padding-top: 28px; }
.aviso { font: 400 14px/1.4 var(--f-txt); color: #f0b4a8; }
.hecho-ok { display: grid; gap: 18px; padding: 48px 0; }
.hecho-ok b { font: 900 clamp(36px, 5vw, 72px)/.95 var(--f-tit); text-transform: uppercase; }
@media (max-width: 900px) { .manif, .contacto, .colab__intro { grid-template-columns: minmax(0, 1fr); } .manif__lado { position: static; max-width: 360px; } .campos { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .disco img, .disco__vinilo, .cuadro img { transition: none; }
}
/* WordPress: barra de administración y aviso de cookies */
.barra { transition: background .35s, border-color .35s, backdrop-filter .35s, transform .35s ease; }
.barra.oculta { transform: translateY(calc(-100% - 50px)); }
.tip-bandera { position: fixed; z-index: 100001; left: 0; top: 0; transform: translate(-50%, -100%) translateY(4px); padding: 7px 11px; background: var(--papel); color: var(--tinta); font: 500 11px/1 var(--f-txt); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.tip-bandera::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: var(--papel); transform: translateX(-50%) rotate(45deg); }
.tip-bandera.ver { opacity: 1; transform: translate(-50%, -100%); }
.barra nav a.activo { color: var(--brillo); }
.barra nav > a.activo, .menu__item > a.activo { text-decoration: underline 1px var(--brillo); text-underline-offset: 9px; }
.panel__sub a.activo { color: var(--brillo); }
.admin-bar .barra { top: 32px; }
@media (max-width: 782px) { .admin-bar .barra { top: 46px; } }
@media (max-width: 600px) { #wpadminbar { position: fixed; } }
.admin-bar .panel { z-index: 100000; }
/* Logo: el globo con la «R» de la marca, en el color del texto */
.logo i { aspect-ratio: auto; width: 62px; height: 46px; border: 0; border-radius: 0; font-size: 0; display: block; }
.logo i svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Títulos: nunca se parte una palabra (si no cabe, se reduce el tamaño en marco.js) */
.indice b { overflow-wrap: normal; }
/* Tal día como hoy: puntos sobre la línea (apilados si coinciden), años debajo sin taparse */
.regla__ev { bottom: 0; translate: 0 50%; box-shadow: 0 0 0 3px var(--tinta); border-radius: 99px; }
.regla__marca span { top: 16px; }
@media (max-width: 700px) { .regla__ev { width: 9px; height: 9px; margin-left: -4.5px; } .regla__marca span { font-size: 10px; letter-spacing: .04em; } }
/* Panel del menú sin sección elegida: mosaico de todas */
.panel__der figure.panel__todas { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; background: #070706; }
.panel__der figure.panel__todas img { min-height: 0; filter: grayscale(1) contrast(1.05) brightness(.5); }
/* Pie: el nombre de la web, siempre a lo ancho sin salirse */
.pie__firma { font-size: min(132px, calc((100vw - 48px) / 12.3)); }