/* Vive Salsa · Guía «Lo que tenés que saber» (/guia) y página de error (404). Estáticas: sin JS, solo enlaces. Móvil primero.
   1.9.4 (George 12-oct: «a la guía le falta diseño»): la guía es la CONTRAPORTADA DE UN DISCO — papel crema de la portada,
   índice Lado A / Lado B y pistas numeradas 01–06, con los afiches aprobados en «El cartel». La 404 sigue oscura. */
.g-h1{font-size:clamp(2.4rem,12vw,3.8rem);margin:8px 0 10px}
.g-intro{color:var(--tenue);margin-bottom:8px}
.g-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.g-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border-radius:10px;background:var(--naranja);color:var(--fondo);font-weight:700;text-decoration:none}
.g-btn.sec{background:transparent;color:var(--oro);border:1px solid var(--oro)}

/* ——— La guía: papel crema, tinta vino ——— */
body[data-p="guia"]{--papel:#FBF3E4;--tinta:#1C0A14;--vinot:#5B3B47;--linea:#DFCBB9;--rojob:#B02318;background:var(--papel);color:var(--tinta)}
body[data-p="guia"] .clave i{background:#E7D6C2}
body[data-p="guia"] .tope .rot{color:#A34B10}
body[data-p="guia"] a{color:var(--rojob)}
body[data-p="guia"] main.guia{max-width:680px;padding-top:22px}
body[data-p="guia"] .tope{max-width:680px}
body[data-p="guia"] a:focus-visible{outline-color:var(--tinta)}   /* el naranja no se ve sobre el papel (1.9:1) */
body[data-p="guia"] .g-boleto a:focus-visible,body[data-p="guia"] .pie a:focus-visible{outline-color:var(--naranja)}
.guia .rot{color:#A34B10}
.g-portada{text-align:center;padding:4px 0 18px}
.g-eb{font-size:.8rem}
.guia .g-h1{color:var(--tinta);font-size:clamp(2.7rem,13vw,4.4rem);margin:12px 0 12px}
.guia .g-h1 span{display:block;color:var(--rojob)}
.g-it{font-family:"Bodoni Moda",Didot,Georgia,serif;font-style:italic;font-size:1.12rem;line-height:1.45;color:var(--vinot);max-width:30em;margin:0 auto}
.g-banner{width:calc(100% + 32px);max-width:none;margin:0 -16px;border-block:3px solid var(--tinta)}

/* Índice: dos lados del disco */
.g-indice{display:grid;gap:2px;background:var(--linea);border:1px solid var(--linea);margin:22px 0 8px}
.g-lado{background:#FFFDF8;padding:16px 18px 12px}
.g-lado .rot{font-size:.78rem;margin-bottom:4px}
.g-indice ol{list-style:none;margin:0;padding:0}
.g-indice li a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:8px 0;border-bottom:1px dashed var(--linea);color:var(--tinta);text-decoration:none;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;font-size:1.45rem;text-transform:uppercase;line-height:1.1}
.g-indice li:last-child a{border-bottom:0}
.g-n{font-size:.95rem;color:var(--rojob);letter-spacing:.08em;min-width:1.6em}
.g-indice li a:hover{color:var(--rojob)}

/* Cada pista */
.guia .g-sec{border-top:3px solid var(--tinta);padding:26px 0 8px;display:grid;gap:10px;scroll-margin-top:12px}
.g-pista{display:flex;align-items:baseline;gap:12px}
.g-num{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:3.4rem;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--rojob)}
.g-pista .rot{font-size:.85rem}
.guia .g-h2{font-size:clamp(2rem,10vw,2.9rem);color:var(--tinta);scroll-margin-top:96px}   /* el índice salta al h2: que se vea su «01 Cuándo» arriba */
.guia .g-sec>p{color:var(--vinot);line-height:1.55}
.g-nota{font-size:.95rem;border-left:3px solid var(--naranja);padding:2px 0 2px 12px}
.guia .g-btn{background:var(--rojob);color:#FFF3EA;border-radius:0;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:1.08rem;padding:12px 20px}
.guia .g-btn:hover{background:var(--tinta)}
.guia .g-btn.sec{background:transparent;color:var(--tinta);border:2px solid var(--tinta)}

/* 02 Cuándo: el boleto oscuro, como «Lo que ya podemos contarte» de la portada */
.g-boleto{background:var(--tinta);color:#F6EADF;padding:22px 20px;border-left:8px solid var(--naranja);display:grid;gap:8px}
.g-boleto .g-h2{color:#F6EADF}
.g-hora{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;font-size:1.6rem;color:var(--naranja);text-transform:uppercase}
.g-boleto .g-btn{background:var(--naranja);color:var(--tinta)}
.g-boleto .g-btn:hover{background:#FFF3EA}
.g-boleto .g-btn.sec{background:transparent;color:#F6EADF;border-color:#F6EADF}

/* El cartel: los afiches aprobados */
.g-cartel{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g-af img{width:100%;aspect-ratio:400/712;object-fit:cover;box-shadow:0 10px 24px rgba(28,10,20,.25);margin-bottom:8px}
.g-af .rot{font-size:.7rem;letter-spacing:.16em}
.g-af-n{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;font-size:1.25rem;text-transform:uppercase;line-height:1.05;color:var(--tinta)}
.g-af-n b{color:var(--rojob)}

/* 01 La noche: las cifras del dossier */
.g-cifras{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--linea);border:1px solid var(--linea)}
.g-cifras li{background:#FFFDF8;padding:14px 10px;display:grid;gap:4px;text-align:center}
.g-cifras b{font-size:2.6rem;line-height:.9;color:var(--rojob)}
.g-cifras span{font-size:.82rem;line-height:1.25;color:var(--vinot)}
.g-cifras li:last-child{grid-column:span 2}

/* 05 El cartel: Lado A grande (orquestas), Lado B la pista */
.g-sub{font-size:.8rem;margin-top:8px}
.g-cartel-a{grid-template-columns:1fr 1fr}
.g-cod{display:inline-block;background:var(--tinta);color:var(--papel);padding:1px 6px;margin-right:4px;letter-spacing:.06em}
.g-af-d{font-size:.85rem;color:var(--vinot);margin-top:2px}

/* 06 Vestite de época: banda oscura con «chips» de la época */
.guia .g-vestite{background:var(--tinta);color:#F6EADF;border-top:6px solid var(--naranja);padding:26px 18px 22px;margin:8px -16px}
.guia .g-vestite .g-h2{color:#F6EADF}
.guia .g-vestite>p{color:#E9D9CC}
.guia .g-vestite .rot{color:var(--naranja)}
.g-vestite .g-num{-webkit-text-stroke-color:var(--naranja)}
.g-chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.g-chips li{font-family:"Bodoni Moda",Didot,Georgia,serif;font-style:italic;font-size:1.05rem;padding:6px 14px;border:1px solid var(--oro);border-radius:999px;color:#F6EADF}

/* 07 Durante la noche */
.guia .g-ir{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:var(--linea);border:1px solid var(--linea)}
.guia .g-ir a{display:grid;gap:3px;padding:16px 18px;background:#FFFDF8;color:var(--tinta);text-decoration:none;min-height:44px}
.guia .g-ir a:hover{background:#FFF3EA}
.guia .g-ir .rot{font-size:.72rem}
.guia .g-ir b{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;font-size:1.5rem;text-transform:uppercase;line-height:1}
.guia .g-ir span:last-child{color:var(--vinot);font-size:.95rem}

/* El pie de la guía, sobre el papel */
body[data-p="guia"] .pie{background:var(--tinta);color:#B9A7A0;border-top:6px solid var(--naranja);margin-top:18px}
body[data-p="guia"] .pie a{color:var(--oro)}

@media (min-width:640px){
  .g-banner{width:100%;margin:0;border:3px solid var(--tinta)}
  .g-indice{grid-template-columns:1fr 1fr}
  .g-cartel{grid-template-columns:repeat(4,1fr)}
  .g-cartel-a{grid-template-columns:1fr 1fr;gap:24px}
  .g-cifras{grid-template-columns:repeat(5,1fr)}.g-cifras li:last-child{grid-column:auto}
  .guia .g-vestite{margin:8px 0;padding:30px 30px 26px}
  .g-boleto{padding:28px 30px}
}