/* «Juega y crea» (juega-y-crea/): juegos, manualidades y piezas para compartir. Todo va bajo .atm para no tocar el resto de la web. */
.atm { --noche: #12303a; --petroleo: #1d4753; --teja: #923713; --ambar: #f0a95a; --crema: #fdf4e3; --papel: #f6ead4; --tinta: #12303a; --acento: #923713; --fondo: var(--crema); --tarjeta: #fff;
  --sombra: 0 2px 2px #1a2a2e26, 0 18px 30px -14px #1a2a2e66; --display: "Barlow Condensed", sans-serif; }
.atm * { box-sizing: border-box; margin: 0; }
.atm { background: var(--fondo); color: var(--tinta); font: 500 1.06rem/1.5 "Barlow", system-ui, sans-serif; }
.atm img { max-width: 100%; }
.atm h1, .atm h2, .atm h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .92; }
.atm a { color: var(--acento); }
.atm :focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.atm [hidden] { display: none !important; }
.atm .ancho { width: min(1220px, 100% - 2rem); margin-inline: auto; }
.atm .ante { font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--acento); }
.atm .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: .55rem 1.3rem .5rem; border: 2px solid var(--teja); background: var(--teja); color: #fff3e0; font: 800 1.15rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 3px 4px 0 #0000002e; }
.atm .btn:hover { background: #6d2a10; border-color: #6d2a10; }
.atm .btn--linea { background: none; color: var(--acento); border-color: currentColor; box-shadow: none; }
.atm .btn--linea:hover, .atm .btn--linea[aria-pressed="true"] { background: var(--teja); border-color: var(--teja); color: #fff3e0; }
.atm .btn--ancho { width: 100%; }
.atm .btn:disabled { opacity: .5; cursor: default; }
.atm .btn--archivo { position: relative; }
.atm .btn--archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.atm .btn--archivo:focus-within { outline: 3px solid var(--acento); outline-offset: 3px; }
.atm .dos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.atm .rotulo { font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.atm .ayuda { font-size: .95rem; min-height: 1.4em; }
.atm .pieza { padding: clamp(3rem, 7vw, 6rem) 0; position: relative; }
.atm .pieza--alt { background: var(--papel); }
.atm .pieza--osc { background: var(--noche); color: #fff3e0; --acento: var(--ambar); --tarjeta: #0c2229; }
.atm .pieza__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.6rem, 5vw, 5rem); align-items: center; }
.atm .pieza--inv .pieza__txt { order: 2; }
.atm .pieza__txt { display: grid; gap: .9rem; align-content: start; }
.atm .pieza__n { font: 800 clamp(4rem, 9vw, 8rem)/.75 var(--display); color: var(--acento); opacity: .9; }
.atm .pieza h2 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
.atm .intro { max-width: 34em; }
.atm .pieza--ancha .cabecera { display: flex; align-items: flex-end; gap: 1.2rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.atm .pieza--ancha .cabecera > div { flex: 1 1 22rem; display: grid; gap: .5rem; }
.atm .pieza--ancha .cabecera .pieza__n { align-self: flex-start; }
.atm .g-familia { --acento: #923713; }
.atm .pintar { display: grid; grid-template-columns: 124px minmax(0, 1fr) 270px; gap: 1.4rem; align-items: start; }
.atm .pintar__laminas { display: grid; gap: .8rem; }
.atm .mini { display: grid; gap: .25rem; justify-items: center; padding: .5rem; border: 3px solid transparent; background: #fff; font: inherit; font-size: .8rem; font-weight: 700; line-height: 1.15; color: var(--noche); cursor: pointer; box-shadow: var(--sombra); }
.atm .mini img { height: 66px; width: auto; object-fit: contain; }
.atm .mini[aria-pressed="true"] { border-color: var(--teja); }
.atm .pintar__mesa { display: grid; place-items: center; padding: clamp(.8rem, 2vw, 1.6rem); background: #e9cfa3 url("../img/cartel/papel.webp") center / cover; box-shadow: inset 0 0 0 1px #12303a14, var(--sombra); min-height: 420px; }
.atm .pintar__lienzo { position: relative; width: 100%; background: #fff; box-shadow: var(--sombra); touch-action: none; line-height: 0; }
.atm .pintar__lienzo canvas { display: block; width: 100%; height: auto; cursor: crosshair; }
.atm .pintar__lienzo img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.atm .pintar__caja { display: grid; gap: .8rem; padding: 1.2rem; background: #fff; box-shadow: var(--sombra); }
.atm .paleta { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-bottom: .4rem; }
.atm .color { aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; background: var(--c); box-shadow: 0 0 0 2px #12303a40, 0 4px 6px #1a2a2e40; cursor: pointer; }
.atm .color[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--noche), 0 4px 6px #1a2a2e40; scale: 1.08; }
.atm .modelos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.atm .modelo-btn { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border: 3px solid transparent; background: #fff; color: var(--noche); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sombra); }
.atm .modelo-btn img { height: 64px; width: 84px; object-fit: contain; flex: none; }
.atm .modelo-btn span { display: grid; font-size: .9rem; }
.atm .modelo-btn strong { font: 800 1.5rem/1 var(--display); text-transform: uppercase; }
.atm .modelo-btn[aria-pressed="true"] { border-color: var(--teja); background: #fff7e6; }
.atm .modelo__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.atm .necesitas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.atm .necesitas strong { font: 800 1.2rem/1 var(--display); text-transform: uppercase; margin-right: .3rem; }
.atm .necesitas span { padding: .3rem .8rem; background: #fff; border-radius: 99px; font-size: .92rem; font-weight: 700; box-shadow: 0 1px 3px #1a2a2e33; }
.atm .pasos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.atm .paso { position: relative; display: grid; gap: .5rem; align-content: start; padding-bottom: 1.1rem; background: #fff; box-shadow: var(--sombra); }
.atm .paso h3 { font-size: 1.5rem; padding: 0 1rem; }
.atm .paso p { padding: 0 1rem; font-size: .93rem; line-height: 1.4; }
.atm .paso__n { position: absolute; left: .7rem; top: .7rem; z-index: 2; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--teja); color: #fff3e0; font: 800 1.6rem/1 var(--display); box-shadow: 0 3px 6px #1a2a2e55; }
.atm .paso:not(:last-child)::after { content: "→"; position: absolute; right: -1rem; top: 26%; z-index: 3; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--noche); color: #fff3e0; font-weight: 700; }
.atm .caja { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(#d9bf94, #cbb084); box-shadow: inset 0 0 0 10px #a9844f, inset 0 0 0 12px #8a6a3c, inset 0 26px 30px -14px #5a421f99, inset 26px 0 30px -18px #5a421f66, inset -26px 0 30px -18px #5a421f66; }
.atm .caja img { position: absolute; max-width: none; filter: drop-shadow(0 3px 2px #1a2a2e55) drop-shadow(0 8px 8px #1a2a2e33); }
.atm .caja--mesa { background: #f4e7cd repeating-linear-gradient(0deg, #12303a0d 0 1px, #0000 1px 22px), #f4e7cd; box-shadow: inset 0 0 0 1px #12303a1f; }
.atm .caja--mesa .suelta { outline: 2px dashed #12303a66; outline-offset: 4px; filter: none; }
.atm .caja--lista::after { content: "¡Listo!"; position: absolute; right: 6%; top: 8%; padding: .25rem .7rem .2rem; background: var(--teja); color: #fff3e0; font: 800 1.2rem/1 var(--display); text-transform: uppercase; rotate: 6deg; box-shadow: 3px 4px 0 #0003; }
.atm .letra { position: absolute; }
.atm .caja .letra img { filter: none; }
.atm .letra__dentro { position: absolute; inset: 0; overflow: hidden; }
.atm .letra__canto { inset: 0; width: 100%; height: 100%; }
.atm .caja--letras .letra { filter: drop-shadow(0 6px 6px #1a2a2e44); }
.atm .juegos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.4rem); align-items: start; }
.atm .tablero { display: grid; gap: 1rem; padding: clamp(1.1rem, 2.4vw, 1.8rem); background: #fff; box-shadow: var(--sombra); }
.atm .tablero header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.atm .tablero h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.atm .tablero__estado { padding: .5rem .9rem; background: var(--papel); font-weight: 700; }
.atm .tablero__ayuda { font-size: .93rem; opacity: .8; }
.atm .parejas { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.4rem, 1.2vw, .8rem); }
.atm .carta { aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; }
.atm .carta > span { position: relative; display: block; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.atm .carta.vuelta > span { transform: rotateY(180deg); }
.atm .carta i, .atm .carta b { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; box-shadow: 0 2px 5px #1a2a2e40; border-radius: 6px; }
.atm .carta i { background: #009fb9 url("../img/juegos/logo-blanco.svg") center / 44% no-repeat; }
.atm .carta:nth-child(odd) i { background-color: var(--petroleo); }
.atm .carta b { background: #fdf4e3; transform: rotateY(180deg); }
.atm .carta b img { max-width: 78%; max-height: 78%; }
.atm .carta.hecha b { background: #fbe0a8; box-shadow: 0 0 0 3px var(--teja); }
.atm .puzle-zona { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 1rem; align-items: start; }
.atm .puzle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; aspect-ratio: 425 / 600; padding: 4px; background: var(--noche); }
.atm .trozo { border: 0; padding: 0; background-size: 300% 300%; cursor: pointer; }
.atm .trozo.sel { outline: 5px solid var(--ambar); outline-offset: -5px; }
.atm .puzle.listo { gap: 0; }
.atm .puzle-guia { display: grid; gap: .3rem; font-size: .8rem; font-weight: 700; text-align: center; }
.atm .puzle-guia img { box-shadow: var(--sombra); }
.atm .g-compartir { --fondo: #12303a; --tinta: #fff3e0; --acento: #f0a95a; --papel: #0c2229; --tarjeta: #0c2229; }
.atm .g-compartir .pieza h2 { font-size: clamp(3rem, 7vw, 6rem); line-height: .84; }
.atm .g-compartir .pieza__n { -webkit-text-stroke: 2px var(--ambar); color: #0000; opacity: 1; }
.atm .form { display: grid; gap: 1.1rem; }
.atm .campo { display: grid; gap: .3rem; font-weight: 700; }
.atm .campo input { min-height: 50px; padding: .4rem .9rem; font: 800 1.5rem/1 var(--display); letter-spacing: .03em; text-transform: uppercase; border: 2px solid #fff3e066; background: #ffffff14; color: inherit; }
.atm fieldset { border: 0; padding: 0; min-width: 0; }
.atm legend { font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; opacity: .75; margin-bottom: .45rem; }
.atm .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.atm .chip { position: relative; }
.atm .chip input { position: absolute; opacity: 0; inset: 0; }
.atm .chip span { display: flex; align-items: center; min-height: 46px; padding: .3rem 1rem; border: 2px solid #fff3e055; font: 800 1.15rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.atm .chip input:checked + span { background: var(--ambar); border-color: var(--ambar); color: var(--noche); }
.atm .chip input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.atm .titulo-caja { display: grid; gap: .5rem; justify-items: start; padding: 1rem 1.1rem; border-left: 6px solid var(--ambar); background: #ffffff10; }
.atm .titulo-gen { font: 800 clamp(1.6rem, 3vw, 2.3rem)/1 var(--display); text-transform: uppercase; }
.atm .marco-movil { width: min(360px, 100%); margin-inline: auto; padding: 10px; border-radius: 34px; background: #0a1a20; box-shadow: 0 0 0 2px #fff3e022, 0 30px 60px -20px #000c; rotate: 2deg; }
.atm .marco-movil canvas { display: block; width: 100%; height: auto; border-radius: 24px; }
.atm .cabina { width: min(430px, 100%); margin-inline: auto; padding: 14px 14px 46px; background: #fdf4e3; box-shadow: 0 30px 60px -20px #000c; rotate: -2deg; }
.atm .cabina__vista { position: relative; aspect-ratio: 4 / 5; background: #0a1a20; overflow: hidden; }
.atm .cabina__vista video, .atm .cabina__vista canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.atm .cabina__vista video { transform: scaleX(-1); }
.atm .cabina__cuenta { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12rem/1 var(--display); color: #fff; text-shadow: 0 6px 30px #000a; }
.atm .test { padding: clamp(1.2rem, 3vw, 2rem); background: #0c2229; box-shadow: 0 30px 60px -24px #000c; display: grid; gap: 1rem; }
.atm .test__n { font: 800 1.2rem/1 var(--display); letter-spacing: .1em; color: var(--ambar); }
.atm .test__barra { height: 8px; background: #fff3e022; }
.atm .test__barra span { display: block; height: 100%; background: var(--ambar); transition: width .3s; }
.atm .test__q { font-size: clamp(2rem, 4.4vw, 3.2rem); min-height: 1.9em; }
.atm .duelo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.atm .duelo__op { min-height: 200px; padding: 1.2rem; border: 0; color: #12303a; font: 800 clamp(1.5rem, 3vw, 2.2rem)/1 var(--display); text-transform: uppercase; cursor: pointer; transition: scale .2s, rotate .2s; }
.atm .duelo__op--1 { background: var(--ambar); rotate: -1.5deg; }
.atm .duelo__op--2 { background: #fff3e0; rotate: 1.5deg; }
.atm .duelo__op:hover, .atm .duelo__op:focus-visible { scale: 1.04; rotate: 0deg; z-index: 1; }
.atm .duelo__o { text-transform: none !important; position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--teja); color: #fff3e0; font: 800 1.6rem/1 var(--display); text-transform: uppercase; box-shadow: 0 4px 10px #0008; pointer-events: none; }
.atm .test__fin { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 1.2rem; align-items: center; }
.atm .test__ficha { width: 100%; height: auto; box-shadow: 0 20px 40px -14px #000c; rotate: -1.5deg; }
.atm .test__acciones { display: grid; gap: .6rem; }
.atm .carton { padding: clamp(1rem, 2.4vw, 1.6rem); background: #fdf4e3 url("../img/cartel/papel.webp") center / cover; color: #12303a; box-shadow: 0 30px 60px -22px #000c; rotate: 1.5deg; --acento: var(--teja); }
.atm .carton header { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 3px dashed #12303a55; }
.atm .carton header img { height: 62px; width: auto; }
.atm .carton header div { display: grid; }
.atm .carton header strong { font: 800 2.4rem/.9 var(--display); text-transform: uppercase; }
.atm .carton header span { font-weight: 700; color: var(--teja); }
.atm .carton--linea header span { font-size: 1.15rem; }
.atm .bingo { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.atm .bingo button { position: relative; aspect-ratio: 1; padding: .35rem; border: 0; background: #fffaf0; color: #12303a; font: 700 clamp(.66rem, 1.5vw, .86rem)/1.15 "Barlow", sans-serif; cursor: pointer; box-shadow: 0 1px 3px #1a2a2e40; overflow: hidden; }
.atm .bingo button[aria-pressed="true"] { background: #f7d9a6; }
.atm .bingo button[aria-pressed="true"] { color: #6d2a10; }
.atm .bingo button[aria-pressed="true"]::after { content: ""; position: absolute; inset: 5%; border: 4px solid #923713; border-radius: 50%; rotate: var(--g, -8deg); opacity: .75; box-shadow: inset 0 0 0 3px #f7d9a6, inset 0 0 0 5px #92371388; }
.atm .g-cine { --fondo: #f6ead4; --papel: #fdf4e3; }
.atm .marcador-t { display: flex; align-items: center; gap: 1.2rem; margin-top: .6rem; font-weight: 700; }
.atm .anillo { --p: 0%; flex: none; width: 124px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(closest-side, var(--fondo) 78%, #0000 80%), conic-gradient(var(--teja) var(--p), #12303a22 0); }
.atm .anillo strong { font: 800 3rem/.9 var(--display); }
.atm .anillo span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.atm .trivial { display: grid; gap: 1rem; padding: clamp(1.3rem, 3vw, 2.2rem); background: #fff; box-shadow: var(--sombra); rotate: .6deg; }
.atm .trivial__n { font: 800 1.1rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--teja); }
.atm .trivial h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); text-transform: none; line-height: 1.04; min-height: 2.1em; }
.atm .trivial__ops { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.atm .trivial__ops button { display: flex; align-items: center; gap: .7rem; min-height: 60px; padding: .5rem .8rem; border: 2px solid #12303a26; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.atm .letra-op { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--noche); color: #fff3e0; font: 800 1.2rem/1 var(--display); }
.atm .trivial__ops button:not(:disabled):hover { border-color: var(--teja); background: #fdf4e3; }
.atm .trivial__ops .bien { background: #2f7d4f; border-color: #2f7d4f; color: #fff; }
.atm .trivial__ops .mal { background: #b02a17; border-color: #b02a17; color: #fff; }
.atm .trivial__nota { min-height: 3em; font-weight: 700; }
.atm .trivial__fin { display: grid; gap: .8rem; justify-items: start; }
.atm .trivial__fin strong { font: 800 6rem/.85 var(--display); color: var(--teja); }
.atm .visor { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: clamp(.6rem, 2vw, 1.6rem); align-items: center; margin-bottom: 1.6rem; }
.atm .visor__flecha { height: 56px; border: 2px solid #fff3e066; border-radius: 50%; background: none; color: #fff3e0; font-size: 2rem; line-height: 1; cursor: pointer; }
.atm .visor__flecha:hover:not(:disabled) { background: var(--ambar); border-color: var(--ambar); color: #12303a; }
.atm .visor__flecha:disabled { opacity: .25; }
.atm .visor__ficha { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3.4rem); align-items: center; padding: clamp(1rem, 3vw, 2.2rem); background: #0a1a20; min-height: 470px;
  border-block: 22px solid #000; border-image: repeating-linear-gradient(90deg, #000 0 14px, #fff3e0 14px 30px, #000 30px 44px) 22 0 / 22px 0 round; }
.atm .visor__cartel { justify-self: center; margin: 0; padding: 10px; background: #fdf4e3; box-shadow: 0 20px 40px -12px #000; rotate: -2deg; }
.atm .visor__cartel img { display: block; max-height: 400px; width: auto; }
.atm .visor__txt { display: grid; gap: .6rem; align-content: center; }
.atm .visor__n { font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.atm .visor__anio { font: 800 clamp(5rem, 13vw, 10rem)/.78 var(--display); color: var(--ambar); }
.atm .visor__txt h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1; }
.atm .visor__premiados { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; }
.atm .visor__premiados li { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.atm .visor__premiados img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ambar); }
.atm .epocas { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.atm .epocas button { display: grid; text-align: left; padding: .55rem 1rem; border: 2px solid #fff3e044; background: none; color: #fff3e0; font: inherit; font-size: .85rem; cursor: pointer; }
.atm .epocas strong { font: 800 1.25rem/1 var(--display); text-transform: uppercase; }
.atm .epocas button[aria-pressed="true"] { background: var(--ambar); border-color: var(--ambar); color: #12303a; }
.atm .tira { display: flex; gap: 8px; overflow-x: auto; padding: 22px 10px; scroll-snap-type: x proximity; background:
  radial-gradient(circle, #fff3e0 0 4px, #0000 5px) 0 4px / 26px 14px repeat-x, radial-gradient(circle, #fff3e0 0 4px, #0000 5px) 0 calc(100% - 4px) / 26px 14px repeat-x, #000; }
.atm .cuadro { flex: none; position: relative; width: 104px; padding: 0; border: 3px solid transparent; background: #1d4753; cursor: pointer; scroll-snap-align: center; }
.atm .cuadro img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; opacity: .55; transition: opacity .2s; }
.atm .cuadro span { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 0 .2rem; background: linear-gradient(#0000, #000c); color: #fff3e0; font: 800 1.15rem/1 var(--display); text-align: center; }
.atm .cuadro:hover img, .atm .cuadro[aria-pressed="true"] img { opacity: 1; }
.atm .cuadro[aria-pressed="true"] { border-color: var(--ambar); }
.atm .quiniela-zona { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.atm .quiniela { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.atm .quiniela fieldset { padding: 1.1rem 1.2rem; background: #fff; box-shadow: var(--sombra); }
.atm .quiniela legend { float: left; width: 100%; font: 800 1.45rem/1 var(--display); letter-spacing: 0; text-transform: uppercase; opacity: 1; margin-bottom: .7rem; }
.atm .quiniela label { clear: both; display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .4rem; border-top: 1px solid #12303a1f; cursor: pointer; }
.atm .quiniela label span { display: grid; line-height: 1.2; }
.atm .quiniela small { opacity: .7; }
.atm .quiniela input { accent-color: var(--teja); margin-top: .2rem; }
.atm .quiniela label:has(input:checked) { background: #fbe6bd; }
.atm .quiniela label:has(input:checked) strong { color: var(--teja); }
.atm .boleto { position: sticky; top: 1rem; display: grid; gap: .8rem; padding: 1.2rem; background: #fff; box-shadow: var(--sombra); }
.atm .boleto__vista canvas { display: block; width: 100%; height: auto; box-shadow: 0 10px 24px -10px #1a2a2e99; }
.atm .boleto__estado { font-weight: 700; }
@media (max-width: 900px) {
.atm .pieza__rejilla, .atm .juegos, .atm .quiniela-zona, .atm .test__fin { grid-template-columns: 1fr; }
.atm .pieza--inv .pieza__txt { order: 0; }
.atm .pintar { grid-template-columns: 1fr; }
.atm .pintar__laminas { grid-template-columns: repeat(4, 1fr); }
.atm .pintar__mesa { min-height: 0; }
.atm .paleta { grid-template-columns: repeat(7, 1fr); }
.atm .modelos { grid-template-columns: 1fr; }
.atm .pasos { grid-template-columns: 1fr 1fr; }
.atm .paso:not(:last-child)::after { display: none; }
.atm .trivial__ops { grid-template-columns: 1fr; }
.atm .visor { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .4rem; }
.atm .visor__flecha { height: 44px; }
.atm .visor__ficha { grid-template-columns: 1fr; text-align: center; }
.atm .visor__premiados { justify-content: center; }
.atm .visor__cartel img { max-height: 300px; }
.atm .boleto { position: static; }
.atm .boleto__vista { max-width: 240px; margin-inline: auto; }
.atm .duelo__op { min-height: 150px; }
}
@media (max-width: 520px) {
.atm .pasos { grid-template-columns: 1fr; }
.atm .puzle-zona { grid-template-columns: 1fr; }
.atm .puzle-guia { display: none; }
.atm .dos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.atm * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Los tres botones y los grupos ---------- */
.atm { --tinta: #12303a; overflow-x: clip; }
.atm-barra { padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1rem, 2vw, 1.4rem); background: #dcc6a9 url("../img/cartel/papel-ancho.webp") center / cover; }
.atm-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1.4vw, 1rem); }
.atm .atm-tab { min-height: 68px; padding: .7rem 1rem .6rem; border: 3px solid var(--noche); border-radius: 0; background: #fdf4e3cc; color: var(--noche); font: 800 clamp(1.15rem, 2.3vw, 1.9rem)/1 var(--display); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: translate .2s, background-color .2s; }
.atm .atm-tab:hover { translate: 0 -3px; background: #fdf4e3; }
.atm .atm-tab[aria-selected="true"] { background: var(--teja); border-color: var(--teja); color: #fff3e0; box-shadow: 4px 5px 0 #12303a40; }
.atm .grupo { background: var(--fondo); color: var(--tinta); counter-reset: pieza; }
.atm .g-familia { --fondo: #fdf4e3; }
.atm .pieza { counter-increment: pieza; scroll-margin-top: 1rem; }
.atm .pieza__n::before { content: counter(pieza, decimal-leading-zero); }
.atm .caja__dentro { position: absolute; inset: 12px; overflow: hidden; }
.atm .caja .plana { filter: drop-shadow(0 6px 6px #1a2a2e44); }
.atm .taco { position: absolute; width: 9%; aspect-ratio: 1; background: #b98d55; box-shadow: inset 0 0 0 2px #8a6a3c, 0 3px 5px #1a2a2e55; rotate: 8deg; }
@media (max-width: 700px) {
  .atm-tabs { grid-template-columns: 1fr; } .atm .atm-tab { min-height: 54px; }
}

/* ---------- Ajustes de composición ---------- */
.atm .dos .btn, .atm .pintar__caja .btn { padding-inline: .5rem; font-size: 1.05rem; }
.atm .g-compartir .pieza h2 { line-height: 1; }
.atm .tablero header .btn { padding-inline: .8rem; font-size: 1.05rem; white-space: nowrap; }
.atm .quiniela { display: block; columns: 3 250px; column-gap: 1rem; }
.atm .quiniela fieldset { break-inside: avoid; margin-bottom: 1rem; }
.atm img { height: auto; }
/* Los dos tableros de juego, a la misma altura: el tablero se centra en el hueco y la ayuda queda abajo. */
.atm .juegos { align-items: stretch; }
.atm .tablero { grid-template-rows: auto auto 1fr auto; }
.atm .tablero .parejas, .atm .tablero .puzle-zona { align-self: center; }