/* Catálogo (#juegos), encima de css/secciones.css: control Foto | 3D por tarjeta y encabezados de grupo (app.js §3 los arma).
   Capas: el lienzo 3D #gl es fijo en z 5 y la pista "Arrastra para girar" va en z 7 (abajo a la derecha); el control va en z 8,
   arriba a la derecha de .media, fuera del título (que vive en .texto). Sin transform en .ficha con 3D vivo (.en3d): crearía un
   contexto de apilamiento y el control quedaría debajo del lienzo (la ficha con foto sí se inclina al pasar: secciones.css). */
.ficha .media .seg-ficha{position:absolute;top:12px;right:12px;z-index:8;display:inline-flex;gap:2px;margin:0;padding:2px;
  border:1px solid rgba(201,162,78,.35);border-radius:var(--r-pill);background:rgba(10,7,26,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* dos botones de 44 × 44 px mínimo (área táctil), mono y mayúsculas como el resto de rótulos chicos */
.ficha .media .seg-ficha button{min-width:44px;height:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--tinta-2);
  font:600 var(--t-mini)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background-color .15s ease-out,color .15s ease-out,opacity .15s ease-out}
@media(hover:hover){.ficha .media .seg-ficha button:hover{color:var(--tinta)}}
.ficha .media .seg-ficha [aria-pressed="true"]{background:rgba(243,238,227,.14);color:var(--tinta)}
/* «3D…» mientras se prepara; sin WebGL el botón se queda, apagado */
.ficha .media .seg-ficha [aria-disabled="true"]{cursor:default;opacity:.75}
.ficha .media .seg-ficha [aria-disabled="true"][title="Sin 3D en este equipo"]{cursor:not-allowed;opacity:.5}
/* el rótulo "Imagen de referencia" pasa a la esquina izquierda: la derecha es del control */
.ficha .media .ref-tag{right:auto;left:10px}
/* encabezado de grupo (Principales, Grandes, Medianos, Infantiles): toda la fila de la rejilla, mono/mini en oro con un filete
   que corre a la derecha hasta desvanecerse (v13: antes el filete iba arriba, a todo lo ancho) */
.fichas .grid .fichas-grupo{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin:28px 0 -4px;padding:0;border:0;
  font:600 var(--t-mini)/1.4 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--oro-logo)}
.fichas .grid .fichas-grupo::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,var(--filete-oro-suave),rgba(201,162,78,0))}
.fichas .grid .fichas-grupo:first-child{margin-top:0}
@media(max-width:699px){
  .ficha .media .seg-ficha{top:10px;right:10px}
  .fichas .grid .fichas-grupo{margin:18px 0 -4px;gap:12px}
}