/* Guía del directo para las familias (instrucciones_directo*.html). Va encima de
   css/publico2.css, así que tiene el mismo aspecto que el directo y el histórico, y las
   pantallas de ejemplo son las piezas de verdad (las mismas clases) con datos inventados.
   La guía la comparten todos los clubes: nada de un club concreto. */
.g{padding-bottom:0}
.g-main{max-width:1080px;margin:0 auto;padding:18px 16px 12px}

/* ── barra de arriba ── */
.g-volver{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px 0 9px;border-radius:12px;flex:none;
  background:var(--club-suave);color:var(--club-texto);font-weight:800;font-size:.88rem;text-decoration:none}
.g-volver[hidden]{display:none}
.g-idiomas{display:flex;gap:3px;background:var(--fondo);border-radius:999px;padding:4px;flex:none}
.g-idiomas a{min-width:38px;height:34px;display:grid;place-items:center;border-radius:999px;text-decoration:none;
  font-weight:800;font-size:.8rem;color:var(--gris)}
.g-idiomas a[aria-current]{background:var(--papel);color:var(--tinta);box-shadow:0 1px 4px rgba(15,23,42,.12)}
@media(max-width:480px){
  .g-volver{padding:0 9px}
  .g-volver span{display:none}
  .g-idiomas a{min-width:34px}
}

/* ── portada ── */
.g-portada{position:relative;overflow:hidden;display:grid;gap:28px;align-items:center;background:var(--papel);
  border:1px solid var(--linea);border-radius:28px;box-shadow:var(--sombra);padding:26px 20px}
.g-portada::before{content:"";position:absolute;right:-140px;top:-170px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(30,107,255,.13),transparent);pointer-events:none}
.g-portada>*{position:relative}
@media(min-width:900px){.g-portada{grid-template-columns:1.1fr .9fr;padding:42px 46px}}
.g-rotulo{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--club-texto);background:var(--club-suave);border-radius:999px;padding:6px 12px}
.g-rotulo .ic{width:16px;height:16px}
.g-portada h1{font:800 clamp(2.05rem,6.2vw,3.1rem)/1.04 var(--f-tit);letter-spacing:-.035em;margin:16px 0 12px}
.g-portada>div>p{color:var(--gris);font-size:1.06rem;margin:0 0 22px;max-width:32em}
.g-atajos{display:flex;flex-wrap:wrap;gap:8px}
.g-atajos a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border-radius:999px;
  background:var(--fondo);text-decoration:none;font-weight:700;font-size:.92rem}
.g-atajos a:hover{background:var(--club-suave);color:var(--club-texto)}
.g-atajos .ic{width:17px;height:17px;color:var(--club-texto)}

/* ── el móvil de ejemplo, con las piezas de la página de verdad ── */
.g-movil{width:100%;max-width:350px;margin:0 auto;background:var(--fondo);border:9px solid var(--tinta);border-radius:40px;
  padding:14px 12px;box-shadow:0 30px 60px rgba(15,23,42,.2);overflow:hidden;text-align:left}
.g-movil *{cursor:default}
.g-movil .m-barra{position:static;margin:-14px -12px 12px;padding-top:0;border-radius:0}
.g-movil .m-barra-in{height:60px;padding:0 12px}
.g-movil .m-escudo{width:38px;height:38px}
.g-movil .m-club-txt b{font-size:1rem}
.g-movil .m-campana{width:42px;height:42px}
.g-movil .m-estado{margin:0 2px 12px}
.g-movil .m-abajo{position:static;margin:12px -12px -14px;padding:6px 8px 8px}
.g-movil .notif-panel{position:static;display:block;transform:none;max-height:none;overflow:visible;
  margin:0 -12px -14px;padding:10px 16px 18px;box-shadow:0 -12px 34px rgba(15,23,42,.16)}
.g-movil .notif-panel.solo{margin:-14px -12px;border-radius:0;box-shadow:none;padding-top:16px}
.g-movil .notif-save-btn{display:grid;place-items:center}
.g-movil .m-vacio{padding:22px 16px 20px}
.g-movil .m-titulo{margin:4px 2px 12px}
.g-movil .h-dias{box-shadow:none}
.g-movil .h-filtros{padding-top:12px}
.g-movil .h-filtro{display:inline-flex;align-items:center}
/* el desenfoque de las barras se saldría del marco redondeado; y la de abajo, que la página
   esconde en pantalla grande, aquí se ve siempre */
.g-movil .m-barra,.g-movil .m-abajo{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
.g-movil .m-abajo{display:flex}
.g-movil .res .g-marca{opacity:1;font:800 .78rem/24px var(--f-txt)}
/* minmax(0,…): sin él, la columna crece hasta lo que pide el móvil de ejemplo y a 320 px se sale */
.g-dos{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
@media(min-width:760px){.g-dos{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
/* lo que se señala con un número */
.g-movil .pcampo,.g-movil .est,.g-movil .res,.g-movil .reloj,.g-movil .pjug,.g-movil .comp,
.g-movil .m-campana,.g-movil .notif-toggle-row,.g-movil .h-flecha,.g-movil .h-cal-bt{position:relative}
.g-marca{position:absolute;z-index:3;width:24px;height:24px;border-radius:50%;background:var(--amarilla);color:var(--tinta);
  font:800 .78rem/24px var(--f-txt);letter-spacing:0;text-align:center;text-transform:none;
  box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.28)}
.g-marca.ai{top:-12px;left:-10px}
.g-marca.ad{top:-12px;right:-10px}
.g-marca.iz{top:50%;left:-32px;transform:translateY(-50%)}
.g-marca.ab{top:auto;bottom:-18px;left:50%;transform:translateX(-50%)}
.g-leyenda{list-style:none;counter-reset:m;padding:0;margin:18px auto 0;display:grid;gap:12px;max-width:560px}
.g-leyenda li{counter-increment:m;display:flex;gap:12px;align-items:flex-start;margin:0}
.g-leyenda li::before{content:counter(m);flex:none;width:26px;height:26px;border-radius:50%;background:var(--amarilla);
  color:var(--tinta);font:800 .8rem/26px var(--f-txt);text-align:center;margin-top:1px}
/* En móviles estrechos el marco se ajusta para que la ficha quepa entera, como en la página */
@media(max-width:420px){
  .g-portada{padding:22px 14px}
  .g-movil{border-width:7px;border-radius:34px;padding:12px 9px}
  .g-movil .m-barra{margin:-12px -9px 12px}
  .g-movil .m-abajo{margin:12px -9px -12px}
  .g-movil .notif-panel{margin:0 -9px -12px}
  .g-movil .notif-panel.solo{margin:-12px -9px}
  .g-movil .pant{padding-left:12px;padding-right:12px}
}
.g-figura{margin:22px 0 8px}
.g-figura figcaption{text-align:center;color:var(--claro);font-size:.86rem;margin-top:14px}

/* ── cuerpo: índice y secciones ── */
.g-cuerpo{display:grid;gap:18px;margin-top:20px}
@media(min-width:980px){.g-cuerpo{grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:start}}
.g-indice{background:var(--papel);border:1px solid var(--linea);border-radius:22px;box-shadow:var(--sombra);padding:16px 14px}
@media(min-width:980px){.g-indice{position:sticky;top:88px}}
.g-indice h2{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--claro);margin:0 6px 8px;font-weight:800}
.g-indice ol{list-style:none;margin:0;padding:0;counter-reset:i}
.g-indice li{counter-increment:i;margin:0}
.g-indice a{display:flex;gap:10px;align-items:center;min-height:42px;padding:6px;border-radius:12px;text-decoration:none;
  font-weight:700;font-size:.93rem;line-height:1.3}
.g-indice a::before{content:counter(i);flex:none;width:26px;height:26px;border-radius:9px;background:var(--fondo);
  color:var(--gris);font:800 .78rem/26px var(--f-txt);text-align:center}
.g-indice a:hover{background:var(--fondo)}
.g-textos{display:grid;gap:18px;min-width:0}
.g-sec{background:var(--papel);border:1px solid var(--linea);border-radius:24px;box-shadow:var(--sombra);
  padding:22px 18px 20px;scroll-margin-top:84px;min-width:0}
@media(min-width:640px){.g-sec{padding:30px 32px 26px}}
.g-sec>h2{display:flex;align-items:center;gap:12px;font:800 1.38rem/1.2 var(--f-tit);letter-spacing:-.02em;margin:0 0 14px}
.g-num{flex:none;width:38px;height:38px;border-radius:13px;background:var(--club);color:var(--sobre-club);
  display:grid;place-items:center;font:800 1.02rem var(--f-tit)}
/* Solo el texto de la guía: las pantallas de ejemplo van dentro de figuras y conservan
   los estilos de la página de verdad */
.g-sec>h3{font:800 1.1rem/1.3 var(--f-tit);letter-spacing:-.01em;margin:26px 0 8px}
.g-sec>p,.g-sec>ul>li,.g-pasos>li,.g-leyenda>li,.g-nota p,.g-aviso p,.g-truco p,.g-prob p{color:#334155;font-size:1rem;line-height:1.6}
.g-sec>p{margin:10px 0}
.g-sec>ul{padding-left:1.25em;margin:10px 0}
.g-sec>ul>li{margin:6px 0}
.g-sec strong{color:var(--tinta)}
.g-sec em{font-style:normal;font-weight:700;color:var(--tinta)}
.g-sec code{background:var(--fondo);border-radius:7px;padding:2px 7px;font-size:.92em}
.g-sec>p a,.g-sec>ul a,.g-nota a,.g-aviso a,.g-truco a,.g-prob a{color:var(--club-texto);font-weight:700}
.g-arriba{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:.85rem;font-weight:700;color:var(--claro);text-decoration:none}
.g-arriba .ic{width:15px;height:15px;transform:rotate(-90deg)}
.g-arriba:hover{color:var(--tinta)}

.g-pasos{list-style:none;counter-reset:p;padding:0!important;margin:16px 0}
.g-pasos>li{counter-increment:p;position:relative;padding:3px 0 12px 46px;margin:0}
.g-pasos>li::before{content:counter(p);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  background:var(--club-suave);color:var(--club-texto);font:800 .92rem/32px var(--f-txt);text-align:center}

.g-nota,.g-aviso,.g-truco{border-radius:18px;padding:14px 16px;margin:16px 0}
.g-nota{background:#eef4ff}
.g-aviso{background:#fff1f2}
.g-truco{background:#edfaf1}
.g-nota b,.g-aviso b,.g-truco b{display:block;font-weight:800;margin-bottom:2px}
.g-nota b{color:#1d4ed8}
.g-aviso b{color:#be123c}
.g-truco b{color:#15803d}
.g-nota p,.g-aviso p,.g-truco p{margin:0}

/* botones que se nombran en el texto, como se ven en la página */
.g-bt{display:inline-flex;align-items:center;gap:5px;padding:1px 10px;border-radius:999px;font-weight:800;font-size:.9em;
  white-space:nowrap;background:var(--club);color:var(--sobre-club);vertical-align:1px}
.g-bt.s{background:var(--fondo);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--linea)}
.g-bt .ic{width:14px;height:14px}

/* el menú de Chrome, dibujado */
.g-menu{max-width:290px;margin:20px auto 6px;background:var(--papel);border:1px solid var(--linea);border-radius:18px;
  box-shadow:0 14px 36px rgba(15,23,42,.16);padding:8px 0;overflow:hidden}
.g-menu div{padding:11px 18px;color:var(--claro);font-weight:600}
.g-menu .si{color:var(--club-texto);font-weight:800;background:var(--club-suave)}
.g-pie-dibujo{text-align:center;color:var(--claro);font-size:.86rem;margin:10px 0 0!important}

.g-problemas{display:grid;gap:10px;margin:14px 0}
@media(min-width:760px){.g-problemas{grid-template-columns:1fr 1fr}}
.g-prob{background:var(--fondo);border-radius:18px;padding:15px 16px}
.g-prob b{display:block;font:800 1rem/1.3 var(--f-tit);margin-bottom:4px}
.g-prob p{margin:0;font-size:.95rem}

.g-pie{max-width:1080px;margin:0 auto;padding:18px 16px 40px;text-align:center;color:var(--claro);font-size:.86rem}
.g-pie p{margin:4px 0}
.g-pie a{color:var(--gris);font-weight:700}

@media print{
  .m-barra,.g-indice,.g-atajos,.g-arriba,.g-movil,.g-portada::before{display:none}
  body{background:#fff}
  .g-portada,.g-sec{box-shadow:none;border:0;break-inside:avoid}
}