/* Sinfónica del Chaco en crisis · v3.1 (Riki 31/10: "sin personalidad, colores lisos feos"; "ese amarillo es tan horrible,
   no me gustan los colores sólidos"; "fondo ligero desenfoque, partículas flotando, sutil").
   Cada sección va sobre una foto real de la orquesta con desenfoque liviano y un velo cálido (como las historias aprobadas).
   Nada de bloques de color lleno: el amarillo de la campaña queda solo en letras y detalles. */
:root {
  --velo: 34, 17, 10;            /* marrón madera para oscurecer las fotos, no negro */
  --crema: #f7eedf;
  --crema-suave: rgba(247, 238, 223, .8);
  --tinta: #1c1612;
  --amarillo: #ffc83d;
  --linea: rgba(247, 238, 223, .22);
  --vidrio: rgba(255, 245, 230, .08);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --serif: "Source Serif 4", Georgia, serif;
  --grano: url("/assets/grano.png");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: rgb(var(--velo)); color: var(--crema); font-family: "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif; font-size: 18px; line-height: 1.5; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
b { font-weight: 800; }
.contenedor { width: min(1100px, 100% - 40px); margin: 0 auto; position: relative; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

/* secciones sobre foto */
.con-fondo { position: relative; overflow: hidden; isolation: isolate; }
.fondo { position: absolute; inset: 0; z-index: -1; }
.fondo img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, calc(var(--p, 0) * -8%), 0) scale(1.18); will-change: transform; }   /* profundidad al bajar y al subir */
.fondo::after { content: ""; position: absolute; inset: 0;
  background: var(--grano), linear-gradient(180deg, rgba(var(--velo), .7) 0%, rgba(var(--velo), .52) 45%, rgba(var(--velo), .76) 100%); }
.con-fondo h2, .con-fondo h3, .titulo-portada, .banda-grande, .cita, .cifra b { text-shadow: 0 2px 18px rgba(var(--velo), .45); }

/* partículas: polvo en la luz, muy sutil (app.js). Van dentro del fondo de cada sección y se mueven con la página */
.particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.con-fondo > .particulas { z-index: -1; }
.portada > .particulas, .banda > .particulas { z-index: 1; }

/* barra */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); color: #fff; transition: background .35s, box-shadow .35s; }
.barra.solida { background: rgba(var(--velo), .55); box-shadow: 0 1px 0 var(--linea); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.marca { font-weight: 900; font-size: clamp(12px, 3.4vw, 15px); letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.marca span { color: var(--amarillo); }

/* botones: vidrio, nada lleno */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 15px 24px;
  font: inherit; font-weight: 800; font-size: 17px; text-decoration: none; cursor: pointer; color: #fff;
  background: rgba(255, 245, 230, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 245, 230, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.boton:hover { transform: translateY(-2px); background: rgba(255, 245, 230, .2); }
.boton-principal { color: var(--amarillo); box-shadow: inset 0 0 0 1.5px var(--amarillo), 0 0 28px -8px rgba(255, 200, 61, .5); }
.boton.chico { padding: 8px 15px; font-size: 15px; }

/* 1. portada */
.portada { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; background: rgb(var(--velo)); overflow: hidden; }
.portada-foto { position: absolute; inset: 0; }
.portada-foto { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }   /* baja más lento que la página, según lo scrolleado */
.portada-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; animation: encender 2.6s cubic-bezier(.3, .6, .2, 1) backwards; }
.portada-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--velo), .5) 0%, rgba(var(--velo), 0) 16%, rgba(var(--velo), 0) 36%, rgba(var(--velo), .74) 58%, rgba(var(--velo), .94) 100%); }
/* entrada: la sala a oscuras, se dibuja el pentagrama y "se encienden las luces" (Riki 1/11: "algo creativo al comienzo") */
@keyframes encender { 0% { filter: brightness(.2) blur(9px); transform: scale(1.14); } 45% { filter: brightness(.38) blur(6px); } 100% { filter: none; transform: scale(1); } }
.intro-pentagrama { position: absolute; z-index: 1; left: 0; right: 0; top: 30%; display: grid; gap: 12px; pointer-events: none; animation: apagar .8s ease 1.75s forwards; }
.intro-pentagrama i { display: block; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(255, 226, 170, .9) 18%, rgba(255, 226, 170, .9) 82%, transparent);
  transform: scaleX(0); transform-origin: left; animation: trazar 1.05s cubic-bezier(.6, 0, .2, 1) forwards; box-shadow: 0 0 10px rgba(255, 210, 140, .45); }
.intro-pentagrama i:nth-child(2) { animation-delay: .09s; } .intro-pentagrama i:nth-child(3) { animation-delay: .18s; }
.intro-pentagrama i:nth-child(4) { animation-delay: .27s; } .intro-pentagrama i:nth-child(5) { animation-delay: .36s; }
@keyframes trazar { to { transform: scaleX(1); } }
@keyframes apagar { to { opacity: 0; transform: translateY(-10px); } }
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 41; pointer-events: none; transform-origin: left; transform: scaleX(var(--avance, 0));
  background: linear-gradient(90deg, rgba(255, 200, 61, .15), var(--amarillo)); box-shadow: 0 0 8px rgba(255, 200, 61, .6); }
.portada-texto { position: relative; z-index: 2; padding: 0 20px calc(64px + env(safe-area-inset-bottom)); max-width: 820px; }
.chip { display: inline-block; color: var(--amarillo); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border: 1.5px solid rgba(255, 200, 61, .7); border-radius: 999px; background: rgba(var(--velo), .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.titulo-portada { font-size: clamp(44px, 14vw, 150px); line-height: .9; font-weight: 900; letter-spacing: -.025em; margin: 16px 0 14px; }
.titulo-portada span { display: block; }
.amarillo-txt { color: var(--amarillo); }
.portada-sub { font-size: clamp(22px, 5.6vw, 32px); font-weight: 800; line-height: 1.2; }
.portada-sub b { color: var(--amarillo); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.bajar { position: absolute; z-index: 2; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); width: 22px; height: 22px; margin-left: -11px; border-right: 3px solid rgba(255, 255, 255, .7); border-bottom: 3px solid rgba(255, 255, 255, .7); transform: rotate(45deg); animation: latido 2.2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
.entra { opacity: 0; transform: translateY(26px); animation: entrar .9s var(--ease) forwards; }
.chip.entra { animation-delay: .95s; }
.titulo-portada .entra:nth-child(1) { animation-delay: 1.15s; }
.titulo-portada .entra:nth-child(2) { animation-delay: 1.32s; }
.portada-sub.entra { animation-delay: 1.6s; }
.acciones.entra { animation-delay: 1.8s; }
@keyframes entrar { to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .portada { align-items: center; }
  .portada-foto img { object-position: 50% 32%; }
  .portada-foto::after { background: linear-gradient(90deg, rgba(var(--velo), .92) 0%, rgba(var(--velo), .7) 38%, rgba(var(--velo), .05) 70%), linear-gradient(180deg, rgba(var(--velo), .45) 0%, rgba(var(--velo), 0) 18%); }
  .portada-texto { padding: 100px 40px 60px max(40px, calc((100vw - 1100px) / 2)); }
  .titulo-portada { font-size: clamp(64px, 6.6vw, 118px); }
}

/* aparecer al bajar */
.aparece { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.aparece.arriba { transform: translateY(-22px); }   /* al subir, entra desde arriba */
.aparece.visible { opacity: 1; transform: none; }
.foco.aparece { filter: blur(10px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter 1.2s var(--ease); }
.foco.aparece.visible { filter: none; }
.kicker { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amarillo); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .25s; }
.kicker.visible::before { transform: scaleX(1); }

/* 2. la ley */
.ley { padding: 96px 0 100px; }
.ley-grid { display: grid; gap: 46px; align-items: center; }
@media (min-width: 900px) { .ley-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.pregunta { font-size: clamp(38px, 9.4vw, 66px); line-height: .98; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.respuesta { font-size: clamp(20px, 2.6vw, 24px); margin-top: 20px; color: var(--crema-suave); max-width: 30em; }
.respuesta b { color: #fff; }
.documento { position: relative; color: var(--tinta); background: var(--grano), linear-gradient(180deg, #fffdf6, #f6eedc); padding: 34px 28px 30px; border-radius: 3px; rotate: -1.6deg;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 6px 14px -6px rgba(0, 0, 0, .4); font-family: var(--serif); }
.documento::before { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; margin-left: -55px; background: rgba(255, 240, 190, .7); rotate: 2deg; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.doc-etiqueta { font-family: "Libre Franklin", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #6b5d4e; }
.doc-titulo { font-size: 22px; font-weight: 700; margin-top: 8px; padding-bottom: 14px; border-bottom: 1.5px solid rgba(28, 22, 18, .2); }
.doc-titulo span { display: block; font-size: clamp(54px, 13vw, 76px); line-height: 1; letter-spacing: -.01em; }
.doc-texto { font-size: clamp(24px, 5.6vw, 30px); line-height: 1.32; margin-top: 18px; }
.resaltar { color: inherit; padding: 0 3px; background: linear-gradient(rgba(255, 200, 61, .85), rgba(255, 200, 61, .85)) no-repeat 0 85% / 0% 78%; transition: background-size 1.1s var(--ease) .5s; }
.documento.visible .resaltar { background-size: 100% 78%; }
.doc-firma { font-style: italic; font-weight: 500; font-size: 20px; color: #9a3b25; margin-top: 18px; }

/* 3. lo que pedimos */
.pedimos { padding: 96px 0 100px; }
.orden { list-style: none; }
.orden li { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--linea); }
.orden-n { font-size: clamp(88px, 24vw, 150px); line-height: .78; font-weight: 900; letter-spacing: -.04em; min-width: .62em; color: var(--amarillo); text-shadow: 0 0 40px rgba(255, 200, 61, .25); }
.orden h3 { font-size: clamp(30px, 7.4vw, 52px); line-height: 1; font-weight: 900; letter-spacing: -.015em; margin-bottom: 10px; text-wrap: balance; }
.orden p { font-size: clamp(18px, 2.4vw, 21px); color: var(--crema-suave); max-width: 34em; }
.tambien { border-top: 1px solid var(--linea); padding-top: 24px; }
.tambien-tit { font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--amarillo); margin-bottom: 14px; }
.tambien-lista { list-style: none; counter-reset: n 2; display: grid; gap: 14px; }
@media (min-width: 900px) { .tambien-lista { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.tambien-lista li { counter-increment: n; position: relative; padding-left: 44px; color: var(--crema-suave); font-size: 17px; }
.tambien-lista li b { color: #fff; }
.tambien-lista li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--amarillo); color: var(--amarillo); display: grid; place-items: center; font-weight: 900; font-size: 16px; }
.sin-privilegios { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; line-height: 1.2; margin-top: 40px; max-width: 26em; }
.sin-privilegios b { color: var(--amarillo); }

/* bandas de foto nítida */
.banda { position: relative; min-height: 86svh; display: grid; align-items: end; color: #fff; overflow: hidden; background: rgb(var(--velo)); }
.banda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, calc(var(--p, 0) * -6%), 0) scale(calc(1.13 + var(--pa, 0) * .08)); will-change: transform; }
.banda::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--velo), .55) 0%, rgba(var(--velo), 0) 18%, rgba(var(--velo), 0) 38%, rgba(var(--velo), .82) 78%, rgba(var(--velo), .95) 100%); }
.banda-texto { z-index: 2; padding: 0 0 64px; }
.banda-grande { font-size: clamp(36px, 9vw, 72px); line-height: 1; font-weight: 900; letter-spacing: -.02em; max-width: 13em; text-wrap: balance; }
.banda-chica { font-size: clamp(20px, 2.8vw, 26px); font-weight: 700; color: var(--amarillo); margin-top: 14px; }
.banda-cb img { object-position: 70% 30%; }
.banda-silla { min-height: 80svh; }
.banda-silla img { object-position: 40% 55%; }
@media (min-width: 900px) {   /* en compu la foto va a la derecha entera, para no cortar a la chelista */
  .banda-silla { min-height: 90svh; align-items: center; background: url("/assets/fondo-silla.jpg?v=2") 30% 50% / cover; }
  .banda-silla img { left: auto; width: 56%; object-position: 50% 40%; }
  .banda-silla::after { background: var(--grano), linear-gradient(90deg, rgba(var(--velo), .82) 0%, rgba(var(--velo), .66) 42%, rgba(var(--velo), 0) 64%); }
  .banda-silla .banda-texto { padding: 0; }
  .banda-silla .cita { max-width: 11em; }
}
.cita { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(34px, 8.4vw, 64px); line-height: 1.08; max-width: 15em; text-wrap: balance; }
.cita::before { content: "“"; display: block; font-size: 1.9em; line-height: .55; color: var(--amarillo); font-style: normal; }

/* 5. la orquesta vista desde arriba */
.orquesta { padding: 96px 0 90px; }
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cifra b { display: block; font-size: clamp(80px, 23vw, 190px); line-height: .86; font-weight: 900; letter-spacing: -.05em; }
.cifra span { display: block; font-size: clamp(16px, 2.6vw, 22px); font-weight: 700; color: var(--crema-suave); margin-top: 8px; max-width: 13em; line-height: 1.25; }
.cifra-hoy b { color: var(--amarillo); }
.plano-caja { margin: 40px -12px 0; border-radius: 22px; padding: 16px 8px 20px; background: var(--vidrio); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); box-shadow: inset 0 0 0 1px rgba(255, 245, 230, .16), 0 30px 60px -30px rgba(0, 0, 0, .6); }
@media (min-width: 760px) { .plano-caja { margin: 44px 0 0; padding: 26px 26px 24px; } }
.plano-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(0, 0, 0, .18); border-radius: 999px; padding: 5px; max-width: 520px; margin: 0 auto 12px; box-shadow: inset 0 0 0 1px rgba(255, 245, 230, .12); }
.plano-botones button { font: inherit; font-weight: 800; font-size: clamp(13px, 3.4vw, 16px); border: 0; border-radius: 999px; padding: 11px 8px; background: transparent; color: var(--crema-suave); cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; }
.plano-botones button[aria-pressed="true"] { background: rgba(255, 245, 230, .14); color: var(--amarillo); box-shadow: inset 0 0 0 1.5px rgba(255, 200, 61, .65); }
.plano { display: block; width: 100%; height: auto; max-width: 860px; margin: 0 auto; overflow: visible; }
.plano .zona { fill-opacity: .82; stroke: rgba(255, 245, 230, .35); stroke-width: 3; }
.plano .silla { fill: var(--tinta); stroke: var(--tinta); stroke-width: 2.5; transition: fill .45s, stroke .45s; }
.plano .silla.vacia { fill: rgba(255, 255, 255, .55); stroke: rgba(28, 22, 18, .45); stroke-dasharray: 4 3.5; }
.plano .podio { fill: rgba(var(--velo), .9); stroke: var(--amarillo); stroke-width: 2.5; }
.plano .podio-txt { fill: var(--amarillo); font: 800 19px "Libre Franklin", sans-serif; letter-spacing: .12em; text-anchor: middle; }
.plano .sin-dato { fill: rgba(28, 22, 18, .5); font: 800 20px "Libre Franklin", sans-serif; letter-spacing: .14em; text-anchor: middle; }
.secciones { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 18px; padding: 0 8px; }
@media (min-width: 760px) { .secciones { grid-template-columns: repeat(4, 1fr); } }
.secciones li { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.25; color: var(--crema-suave); }
.secciones i { width: 14px; height: 14px; border-radius: 4px; translate: 0 2px; }
.secciones b { grid-column: 2; font-size: 17px; font-weight: 900; color: #fff; }
.chaco .secciones b em { font-style: normal; color: var(--amarillo); }
.plano-nota { text-align: center; font-size: 14px; color: var(--crema-suave); margin-top: 14px; }
.datos { list-style: none; display: grid; gap: 14px; margin-top: 44px; max-width: 760px; }
.datos li { position: relative; padding-left: 30px; font-size: clamp(19px, 2.4vw, 22px); color: var(--crema-suave); }
.datos li b { color: #fff; }
.datos li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 12px rgba(255, 200, 61, .6); }
.fuente { font-size: 14px; color: rgba(247, 238, 223, .6); margin-top: 26px; }

/* 5b. cronología */
.cronologia { padding: 96px 0 100px; }
.linea-tiempo { list-style: none; position: relative; margin-top: 30px; max-width: 760px; }
.linea-tiempo::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--linea), rgba(255, 200, 61, .7)); }
.linea-tiempo li { position: relative; padding: 0 0 22px 36px; }
.linea-tiempo li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: rgba(var(--velo), .9); box-shadow: inset 0 0 0 2px var(--amarillo); }
.linea-tiempo time { display: block; font-weight: 900; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }
.linea-tiempo p { font-size: clamp(18px, 2.3vw, 21px); color: var(--crema-suave); }
.linea-tiempo .ahora::before { background: var(--amarillo); box-shadow: 0 0 18px rgba(255, 200, 61, .7); }
.linea-tiempo .ahora p { color: #fff; font-weight: 700; }
.linea-tiempo .ahora b { color: var(--amarillo); }

/* para periodistas */
.kit-prensa { display: grid; gap: 12px; margin-bottom: 8px; }
@media (min-width: 760px) { .kit-prensa { grid-template-columns: repeat(3, 1fr); } }

/* 6. el video de los músicos */
.video-sec { padding: 96px 0 100px; }
.video-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .video-grid { grid-template-columns: 1fr auto; gap: 64px; } }
.video-marco { width: min(340px, 82vw); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 7px rgba(255, 245, 230, .1), 0 0 0 8px rgba(255, 245, 230, .2), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.video-marco video { width: 100%; height: 100%; object-fit: cover; }

/* 7. apoyar */
.apoyar { padding: 96px 0 100px; }
.titulo-sec { font-size: clamp(46px, 12vw, 96px); line-height: .92; font-weight: 900; letter-spacing: -.03em; margin-bottom: 30px; }
.acciones-apoyo { display: grid; gap: 12px; }
@media (min-width: 760px) { .acciones-apoyo { grid-template-columns: 1.3fr 1fr 1fr; } }
.apoyo { display: grid; gap: 4px; text-decoration: none; color: #fff; background: var(--vidrio); border-radius: 18px; padding: 22px;
  box-shadow: inset 0 0 0 1px rgba(255, 245, 230, .2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .2s var(--ease), background .2s; }
.apoyo:hover { transform: translateY(-3px); background: rgba(255, 245, 230, .14); }
.apoyo-n { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--amarillo); color: var(--amarillo); display: grid; place-items: center; font-weight: 900; margin-bottom: 8px; }
.apoyo b { font-size: 22px; line-height: 1.15; }
.apoyo span:last-child { color: var(--crema-suave); font-size: 16px; }
.apoyo-principal { box-shadow: inset 0 0 0 1.5px rgba(255, 200, 61, .8), 0 0 40px -12px rgba(255, 200, 61, .45); }
.apoyo-principal b { color: var(--amarillo); }
.aviso-copiado { min-height: 1.4em; margin-top: 10px; font-weight: 700; color: var(--amarillo); }
.subtit { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amarillo); margin: 40px 0 18px; }
.recortes { list-style: none; display: grid; gap: 16px; }
@media (min-width: 760px) { .recortes { grid-template-columns: 1fr 1fr; gap: 22px; } }
.recortes a { display: grid; gap: 6px; text-decoration: none; color: var(--tinta); background: var(--grano), linear-gradient(180deg, #fbf4e3, #efe3c9); padding: 18px 20px 20px; border-radius: 2px;
  font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.2; box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .75); transition: transform .25s var(--ease); }
.recortes li:nth-child(odd) a { rotate: -.8deg; }
.recortes li:nth-child(even) a { rotate: .7deg; }
.recortes a:hover { transform: translateY(-3px) scale(1.01); }
.recortes span { font-family: "Libre Franklin", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9a3b25; padding-bottom: 6px; border-bottom: 1px solid rgba(28, 22, 18, .18); }

/* pie */
.pie { padding: 90px 0 calc(50px + env(safe-area-inset-bottom)); }
.cierre { font-size: clamp(34px, 8vw, 64px); font-weight: 900; line-height: 1; letter-spacing: -.02em; max-width: 14em; margin-bottom: 22px; text-wrap: balance; }
.cierre span { color: var(--amarillo); }
.pie-legal { font-size: 15px; color: var(--crema-suave); max-width: 640px; }
.pie-links { margin-top: 12px; font-size: 15px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aparece, .entra { opacity: 1; transform: none; }
  .foco.aparece { filter: none; }
  .intro-pentagrama { display: none; }
  .fondo img, .banda img, .portada-foto { transform: none !important; }
  .resaltar { background-size: 100% 78%; }
  .particulas { display: none; }
}