/* Portada-portal (etapa 08b) de casinosonlinecostarica.com — hubs dentro de los bloques H2 del donante.
   Va DESPUÉS de diquis.*.css; solo usa sus variables. Nueve formas, ninguna repetida: postales, lista de control,
   carril de estudios, medallones, bento, acordeón de cajas, monedas, retratos con banda, desplegable móvil. */

/* ==[ común ]== */
.tic-px{clear:both;margin:26px 0 34px}
.tic-px-rot{margin:0 0 14px;font:600 12.5px/1.3 var(--f-tool);letter-spacing:.12em;text-transform:uppercase;color:var(--c-red)}
.tic-px-rot::before{content:"";display:inline-block;width:26px;height:6px;margin:0 10px 2px 0;vertical-align:middle;background:var(--flag)}
.tic-prose .tic-px-ul{margin:0;padding:0;list-style:none}
.tic-prose .tic-px-ul > li{margin:0;padding:0}
.tic-prose .tic-px-ul > li::before{content:none;display:none}
.tic-prose .tic-px img{display:block;margin:0;max-width:100%}
.tic-px-a{display:block;color:var(--c-ink);text-decoration:none}
.tic-px-a b{display:block;font:700 16.5px/1.3 var(--f-head);color:var(--c-ink)}
.tic-px-a span{display:block}
.tic-px-a > span:not([class]),.tic-px-tx > span{font:400 14px/1.45 var(--f-body);color:var(--c-mute)}
.tic-px-a:hover b{color:var(--c-blue-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tic-px-a:focus-visible{outline:2px solid var(--c-blue-2);outline-offset:3px}
.tic-px-ph{overflow:hidden;background:var(--c-grey)}
.tic-px-ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.tic-px-a:hover .tic-px-ph img{transform:scale(1.04)}
.tic-px-lgc .tic-px-ph,.tic-px-ph.tic-px-lgc{display:flex;align-items:center;justify-content:center;background:var(--c-gold-wash)}
.tic-px-lgc .tic-px-ph img,.tic-px-ph.tic-px-lgc img{width:62%;height:auto;object-fit:contain;transform:none!important}
.tic-prose a.tic-px-todos{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:600 14px/1.3 var(--f-tool);color:var(--c-blue);text-decoration:none;border-bottom:2px solid var(--c-gold)}
.tic-prose a.tic-px-todos:hover{color:var(--c-red);border-color:var(--c-red)}
.tic-px-fl{display:inline-block;transition:transform .2s}
a:hover .tic-px-fl{transform:translateX(3px)}

/* ==[ 1 · postales: foto 3:2, filo de bandera, nombre y destino ]== */
.tic-px-tipos .tic-px-ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tic-px-tipos .tic-px-a{padding:8px 8px 14px;background:var(--c-white);border:1px solid var(--c-line);box-shadow:0 2px 0 var(--c-line-2);height:100%}
.tic-px-tipos .tic-px-ph{aspect-ratio:3/2;position:relative}
.tic-px-tipos .tic-px-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--flag)}
.tic-px-tipos b{margin:12px 4px 4px}
.tic-px-tipos .tic-px-a > span:not([class]){margin:0 4px}

/* ==[ 2 · lista de control: casillas numeradas con foto cuadrada ]== */
.tic-px-control .tic-px-ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:px}
.tic-px-control li{counter-increment:px}
.tic-px-control .tic-px-a{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px 12px 12px;
  background:var(--c-blue-wash);border-left:4px solid var(--c-blue);height:100%}
.tic-px-control .tic-px-ph{width:92px;height:92px;position:relative}
.tic-px-control .tic-px-ph::after{content:counter(px);position:absolute;left:0;top:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  font:700 14px/1 var(--f-tool);color:#fff;background:var(--c-blue)}
.tic-px-control .tic-px-tx b{margin-bottom:3px}
.tic-px-control .tic-px-a:hover{border-left-color:var(--c-red)}

/* ==[ 3 · carril de estudios: se desliza de lado, placas de logo ]== */
.tic-px-prov .tic-px-ul{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--c-gold) var(--c-line-2)}
.tic-px-prov li{scroll-snap-align:start}
.tic-px-prov .tic-px-a{height:100%;padding:14px;background:var(--c-white);border:1px solid var(--c-line);border-top:3px solid var(--c-ink)}
.tic-px-prov .tic-px-lg{display:flex;align-items:center;justify-content:center;height:84px;margin:-14px -14px 12px;padding:10px 18px;background:var(--c-paper)}
.tic-px-prov .tic-px-lg img{width:100%;max-height:64px;object-fit:contain}
.tic-px-prov b{font-size:15.5px}
.tic-px-prov .tic-px-a > span:not([class]){font-size:13.5px}
.tic-px-prov .tic-px-a:hover{border-top-color:var(--c-red)}

/* ==[ 4 · medallones: foto redonda con aro dorado, dos columnas ]== */
.tic-px-bonos .tic-px-ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
.tic-px-bonos .tic-px-a{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center;padding:6px 0;border-bottom:1px dotted var(--c-line)}
.tic-px-bonos .tic-px-ph{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 3px var(--c-white),0 0 0 5px var(--c-gold)}

/* ==[ 5 · bento: un fotograma grande y nueve chicos, nombre sobre la foto ]== */
.tic-px-juegos .tic-px-ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:118px;gap:8px}
.tic-px-juegos li:first-child{grid-column:span 2;grid-row:span 2}
.tic-px-juegos li:nth-child(6),.tic-px-juegos li:nth-child(9),.tic-px-juegos li:nth-child(10){grid-column:span 2}
.tic-px-juegos .tic-px-a{position:relative;height:100%;overflow:hidden;background:var(--c-navy)}
.tic-px-juegos img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease,opacity .2s}
.tic-px-juegos .tic-px-a:hover img{transform:scale(1.05);opacity:.9}
.tic-px-juegos b{position:absolute;left:0;bottom:0;padding:5px 10px;font:600 14px/1.25 var(--f-tool);color:#fff;background:var(--c-navy)}
.tic-px-juegos li:first-child b{padding:8px 14px;font-size:17px;background:var(--c-red)}
.tic-px-juegos .tic-px-a:hover b{color:#fff;background:var(--c-red)}

/* ==[ 6 · acordeón de cajas: grupos que se abren, logos en celdas ]== */
.tic-px-gr{border:1px solid var(--c-line);background:var(--c-white)}
.tic-px-gr + .tic-px-gr{border-top:0}
.tic-px-gr summary{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;list-style:none}
.tic-px-gr summary::-webkit-details-marker{display:none}
.tic-px-gr summary::after{content:"+";margin-left:auto;font:600 20px/1 var(--f-tool);color:var(--c-blue)}
.tic-px-gr[open] summary::after{content:"−"}
.tic-px-gr summary b{font:700 16.5px/1.3 var(--f-head)}
.tic-px-gr summary span{font:500 12.5px/1 var(--f-tool);color:var(--c-gold-ink);background:var(--c-gold-wash);padding:4px 8px}
.tic-px-gr[open] summary{border-bottom:1px solid var(--c-line-2)}
.tic-px-cajas .tic-px-ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tic-px-cajas li{border-right:1px solid var(--c-line-2);border-bottom:1px solid var(--c-line-2)}
.tic-px-cajas li:nth-child(4n){border-right:0}
.tic-px-cajas .tic-px-a{height:100%;padding:12px 10px;text-align:center}
.tic-px-cajas .tic-px-lg{height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.tic-px-cajas .tic-px-lg img{max-width:150px;max-height:56px;width:auto;height:auto}
.tic-px-cajas b{font:600 14px/1.3 var(--f-tool)}
.tic-px-cajas .tic-px-a > span:not([class]){font-size:12.5px;margin-top:2px}
.tic-px-cajas .tic-px-a:hover{background:var(--c-blue-wash)}

/* ==[ 7 · monedas: discos sobre fondo marino, nombre y símbolo ]== */
.tic-px-cripto{padding:20px 20px 18px;background:var(--c-navy)}
.tic-px-cripto .tic-px-rot{color:var(--c-sun)}
.tic-px-cripto .tic-px-ul{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.tic-px-cripto .tic-px-a{text-align:center}
.tic-px-cripto .tic-px-lg{width:76px;height:76px;margin:0 auto 8px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 3px var(--c-gold);transition:transform .2s}
.tic-px-cripto .tic-px-lg{overflow:hidden}
.tic-px-cripto .tic-px-lg img{width:150px;max-width:none;height:auto}
.tic-px-cripto b{font:600 13.5px/1.25 var(--f-tool);color:#fff}
.tic-px-cripto .tic-px-a > span:not([class]){font:500 11.5px/1.2 var(--f-tool);letter-spacing:.08em;color:var(--c-gold)}
.tic-px-cripto .tic-px-a:hover .tic-px-lg{transform:translateY(-3px)}
.tic-px-cripto .tic-px-a:hover b{color:var(--c-sun)}

/* ==[ 8 · retratos con banda: foto vertical, banda azul/roja alterna ]== */
.tic-px-dinero .tic-px-ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tic-px-dinero .tic-px-a{height:100%;background:var(--c-white);border:1px solid var(--c-line)}
.tic-px-dinero .tic-px-ph{aspect-ratio:4/3}
.tic-px-dinero b{padding:10px 14px 4px;color:#fff;background:var(--c-blue);margin:0}
.tic-px-dinero li:nth-child(even) b{background:var(--c-red-2)}
.tic-px-dinero .tic-px-a > span:not([class]){padding:10px 14px 14px}
.tic-px-dinero .tic-px-a:hover b{color:#fff;background:var(--c-navy)}

/* ==[ 9 · desplegable del teléfono: una foto grande y tres renglones ]== */
.tic-px-movil{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;border:1px solid var(--c-line);background:var(--c-white)}
.tic-px-movil .tic-px-rot{grid-column:1/-1;margin:0;padding:12px 16px;border-bottom:1px solid var(--c-line)}
.tic-px-movil .tic-px-lead{position:relative;min-height:300px}
.tic-px-movil .tic-px-lead .tic-px-ph{position:absolute;inset:0}
.tic-px-movil .tic-px-lead .tic-px-tx{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(10,31,77,.92))}
.tic-px-movil .tic-px-lead b{font-size:21px;color:#fff}
.tic-px-movil .tic-px-lead .tic-px-tx > span{color:#E8EEF9}
.tic-px-movil .tic-px-lead:hover b{color:#fff}
.tic-px-movil .tic-px-ul{display:flex;flex-direction:column}
.tic-px-movil li{flex:1;border-bottom:1px solid var(--c-line-2)}
.tic-px-movil li:last-child{border-bottom:0}
.tic-px-movil li .tic-px-a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;height:100%;padding:12px 16px}
.tic-px-movil li .tic-px-ph{width:96px;height:72px}
.tic-px-movil li .tic-px-a:hover{background:var(--c-paper)}

/* ==[ ≤860 ]== */
@media (max-width:860px){
  .tic-px-tipos .tic-px-ul,.tic-px-dinero .tic-px-ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tic-px-control .tic-px-ul,.tic-px-bonos .tic-px-ul{grid-template-columns:minmax(0,1fr)}
  .tic-px-juegos .tic-px-ul{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:110px}
  .tic-px-juegos li:nth-child(n){grid-column:auto}
  .tic-px-juegos li:first-child{grid-column:span 2}
  .tic-px-cajas .tic-px-ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tic-px-cripto .tic-px-ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px}
  .tic-px-movil{grid-template-columns:minmax(0,1fr)}
  .tic-px-movil .tic-px-lead{min-height:220px}
  .tic-px-prov .tic-px-ul{grid-auto-columns:170px}
}
/* ==[ ≤480 ]== */
@media (max-width:480px){
  .tic-px-tipos b,.tic-px-dinero b{font-size:15px}
  .tic-px-tipos .tic-px-a > span:not([class]),.tic-px-dinero .tic-px-a > span:not([class]){font-size:13px}
  .tic-px-dinero b{padding:8px 10px 4px}
  .tic-px-dinero .tic-px-a > span:not([class]){padding:8px 10px 10px}
  .tic-px-cajas .tic-px-ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tic-px-control .tic-px-a{grid-template-columns:72px minmax(0,1fr)}
  .tic-px-control .tic-px-ph{width:72px;height:72px}
  .tic-px-movil li .tic-px-a{grid-template-columns:80px minmax(0,1fr)}
  .tic-px-movil li .tic-px-ph{width:80px;height:60px}
}