/* coa_portal.css — hubs de la portada (etapa 08b). Va DESPUÉS de coa.*.css.
   Todas las reglas empiezan por `body.coa .coa-gx`: el texto del donante tiene `.coa-body img{margin:20px 0;border}`,
   `.coa-body ul > li{padding-left:26px}` + rombo ::before y `.coa-body a{box-shadow}` — aquí se anulan. */
body.coa .coa-gx{clear:both;margin:26px 0 36px}
body.coa .coa-gx ul,body.coa .coa-gx ol{margin:0;padding:0;list-style:none}
body.coa .coa-gx li{margin:0;padding:0}
body.coa .coa-gx li::before{content:none;display:none}
body.coa .coa-gx img{display:block;margin:0;border:0;max-width:none}
body.coa .coa-gx a{color:inherit;box-shadow:none;text-decoration:none}
body.coa .coa-gx a b{display:block;color:var(--coa-ink);transition:color .15s}
body.coa .coa-gx a:hover b{color:var(--coa-punzo)}
body.coa .coa-gx a span{display:block}
body.coa .coa-gx .coa-gx-rot{display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font:700 12px/1.3 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--coa-punzo)}
body.coa .coa-gx .coa-gx-rot::after{content:"";flex:1;height:1px;background:var(--coa-line)}
body.coa .coa-gx a.coa-gx-todos{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin-top:16px;
  width:auto;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;overflow:visible;white-space:nowrap;
  font:700 15px/1.3 var(--f-ui);color:var(--coa-punzo);box-shadow:inset 0 -1px 0 var(--coa-punzo)}
/* «todos» vive dentro del hub: las reglas `.coa-gx-X a` de cada composición no deben tocarlo (por eso a.coa-gx-todos) */
body.coa .coa-gx .coa-gx-todos:hover{color:var(--coa-punzo-2)}
body.coa .coa-gx .coa-gx-fl{display:inline;color:var(--coa-punzo)}

/* 1 · índice numerado — tipos de casino */
body.coa .coa-gx-tipos ol{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;border-top:2px solid var(--coa-ink)}
body.coa .coa-gx-tipos a{display:grid;grid-template-columns:38px 96px 1fr;gap:14px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--coa-line)}
body.coa .coa-gx-tipos .coa-gx-n{font:700 26px/1 var(--f-title);color:var(--coa-oro)}
body.coa .coa-gx-tipos .coa-gx-ph img{width:96px;height:64px;object-fit:cover;border-radius:3px}
body.coa .coa-gx-tipos b{font:700 17.5px/1.25 var(--f-title)}
body.coa .coa-gx-tipos .coa-gx-tx span{margin-top:3px;font:400 14px/1.4 var(--f-ui);color:var(--coa-mut)}

/* 2 · filas de cajas por grupo */
body.coa .coa-gx-cajas .coa-gx-fila{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start;
  padding:14px 0;border-top:1px solid var(--coa-line)}
body.coa .coa-gx-cajas .coa-gx-fila:first-of-type{border-top:2px solid var(--coa-ink)}
body.coa .coa-gx-cajas .coa-gx-gr{margin:6px 0 0;padding-left:10px;border-left:3px solid var(--coa-celeste);
  font:700 15px/1.3 var(--f-ui);color:var(--coa-ink)}
body.coa .coa-gx-cajas ul{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
body.coa .coa-gx-cajas a{display:block;height:100%;box-sizing:border-box;padding:10px 12px 11px;background:#fff;
  border:1px solid var(--coa-line);border-radius:6px;transition:border-color .15s}
body.coa .coa-gx-cajas a:hover{border-color:var(--coa-celeste)}
body.coa .coa-gx-cajas .coa-gx-lg{display:flex;align-items:center;justify-content:center;height:56px;margin-bottom:6px}
body.coa .coa-gx-cajas .coa-gx-lg img{width:120px;height:56px;object-fit:contain}
body.coa .coa-gx-cajas b{font:700 15px/1.25 var(--f-ui);text-align:center}
body.coa .coa-gx-cajas a span:last-child{font:400 12.5px/1.35 var(--f-ui);color:var(--coa-mut);text-align:center}

/* 3 · bandas — bonos */
body.coa .coa-gx-bonos ul{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body.coa .coa-gx-bonos a{display:grid;grid-template-columns:1fr 40%;min-height:118px;height:100%;overflow:hidden;
  background:var(--coa-ink);border-radius:8px}
body.coa .coa-gx-bonos .coa-gx-tx{display:flex;flex-direction:column;justify-content:center;padding:14px 16px;
  border-left:4px solid var(--coa-oro)}
body.coa .coa-gx-bonos a b{font:700 18.5px/1.2 var(--f-title);color:#fff}
body.coa .coa-gx-bonos a:hover b{color:var(--coa-celeste-2)}
body.coa .coa-gx-bonos .coa-gx-tx span{margin-top:5px;font:400 14px/1.4 var(--f-ui);color:var(--coa-celeste-2)}
body.coa .coa-gx-bonos .coa-gx-ph img{width:100%;height:100%;object-fit:cover}

/* 4 · revista — juegos: la primera ocupa 2×2 */
body.coa .coa-gx-juegos ul{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 14px}
body.coa .coa-gx-juegos li:first-child{grid-column:span 2;grid-row:span 2}
body.coa .coa-gx-juegos a{display:flex;flex-direction:column;height:100%}
body.coa .coa-gx-juegos .coa-gx-ph{aspect-ratio:3/2;overflow:hidden;border-radius:4px;border-bottom:3px solid var(--coa-celeste)}
body.coa .coa-gx-juegos li:first-child .coa-gx-ph{flex:1;aspect-ratio:auto;min-height:220px}
body.coa .coa-gx-juegos .coa-gx-ph img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
body.coa .coa-gx-juegos a:hover img{transform:scale(1.04)}
body.coa .coa-gx-juegos b{margin-top:8px;font:700 17px/1.25 var(--f-title)}
body.coa .coa-gx-juegos li:first-child b{font-size:22px}
body.coa .coa-gx-juegos a > span:last-child{margin-top:2px;font:400 13.5px/1.4 var(--f-ui);color:var(--coa-mut)}

/* 5 · muro de logos — proveedores */
body.coa .coa-gx-prov ul{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--coa-line);
  border-left:1px solid var(--coa-line)}
body.coa .coa-gx-prov li{border-right:1px solid var(--coa-line);border-bottom:1px solid var(--coa-line)}
body.coa .coa-gx-prov a{display:block;height:100%;box-sizing:border-box;padding:14px 10px 13px;text-align:center;
  background:#fff;transition:background .15s}
body.coa .coa-gx-prov a:hover{background:var(--coa-celeste-pale)}
body.coa .coa-gx-prov .coa-gx-lg{display:flex;align-items:center;justify-content:center;height:52px;margin-bottom:8px}
body.coa .coa-gx-prov .coa-gx-lg img{width:124px;height:52px;object-fit:contain}
body.coa .coa-gx-prov b{font:700 14.5px/1.25 var(--f-ui)}
body.coa .coa-gx-prov a > span:last-child{margin-top:2px;font:400 12.5px/1.35 var(--f-ui);color:var(--coa-mut)}

/* 6 · filas con miniatura — dinero y retiros */
body.coa .coa-gx-dinero ul{border-top:2px solid var(--coa-ink)}
body.coa .coa-gx-dinero a{display:grid;grid-template-columns:120px 1fr 22px;gap:18px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--coa-line)}
body.coa .coa-gx-dinero .coa-gx-ph img{width:120px;height:72px;object-fit:cover;border-radius:3px}
body.coa .coa-gx-dinero b{font:700 18px/1.25 var(--f-title)}
body.coa .coa-gx-dinero .coa-gx-tx span{margin-top:2px;font:400 14.5px/1.4 var(--f-ui);color:var(--coa-mut)}
body.coa .coa-gx-dinero .coa-gx-fl{font:700 18px/1 var(--f-ui);transition:transform .15s}
body.coa .coa-gx-dinero a:hover .coa-gx-fl{transform:translateX(4px)}

/* 7 · sellos redondos — confianza y ley */
body.coa .coa-gx-confianza ul{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
body.coa .coa-gx-confianza .coa-gx-ph{width:118px;height:118px;margin:0 auto 10px;padding:4px;border-radius:50%;
  background:var(--coa-celeste-pale);box-shadow:0 0 0 1px var(--coa-celeste-2)}
body.coa .coa-gx-confianza .coa-gx-ph img{width:118px;height:118px;object-fit:cover;border-radius:50%}
body.coa .coa-gx-confianza b{font:700 17px/1.25 var(--f-title)}
body.coa .coa-gx-confianza a > span:last-child{margin-top:4px;font:400 13.5px/1.4 var(--f-ui);color:var(--coa-mut)}

/* 8 · trío sobre banda oscura — móvil */
body.coa .coa-gx-movil{padding:18px 20px 20px;background:var(--coa-ink);border-radius:8px}
body.coa .coa-gx-movil .coa-gx-rot{color:var(--coa-celeste)}
body.coa .coa-gx-movil .coa-gx-rot::after{background:rgba(255,255,255,.18)}
body.coa .coa-gx-movil ul{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
body.coa .coa-gx-movil .coa-gx-ph{aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#fff}
body.coa .coa-gx-movil .coa-gx-ph img{width:100%;height:100%;object-fit:cover}
body.coa .coa-gx-movil .coa-gx-lgc .coa-gx-ph{display:flex;align-items:center;justify-content:center}
body.coa .coa-gx-movil .coa-gx-lgc .coa-gx-ph img{width:70%;height:60%;object-fit:contain}
body.coa .coa-gx-movil a b{margin-top:9px;font:700 17px/1.25 var(--f-title);color:#fff}
body.coa .coa-gx-movil a:hover b{color:var(--coa-celeste)}
body.coa .coa-gx-movil a > span:last-child{margin-top:3px;font:400 13.5px/1.4 var(--f-ui);color:var(--coa-celeste-2)}

/* 2b · píldoras con disco — criptomonedas */
body.coa .coa-gx-cripto ul{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
body.coa .coa-gx-cripto a{display:flex;align-items:center;gap:12px;height:100%;box-sizing:border-box;
  padding:7px 16px 7px 7px;background:#fff;border:1px solid var(--coa-line);border-radius:999px;transition:border-color .15s}
body.coa .coa-gx-cripto a:hover{border-color:var(--coa-oro)}
body.coa .coa-gx-cripto .coa-gx-lg{flex:none;display:flex;align-items:center;justify-content:center;width:58px;height:58px;
  border-radius:50%;background:var(--coa-celeste-pale);overflow:hidden}
body.coa .coa-gx-cripto .coa-gx-lg img{width:64px;height:32px;object-fit:contain}
body.coa .coa-gx-cripto .coa-gx-tx{min-width:0}
body.coa .coa-gx-cripto a b{font:700 15.5px/1.2 var(--f-ui)}
body.coa .coa-gx-cripto .coa-gx-tx span{margin-top:2px;font:400 12.5px/1.3 var(--f-ui);color:var(--coa-mut)}

/* 2c · fichas con etiqueta — más medios de pago (en el H3 de criterios) */
body.coa .coa-gx-mas ul{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
body.coa .coa-gx-mas a{display:flex;flex-direction:column;align-items:center;height:100%;box-sizing:border-box;overflow:hidden;
  padding:0 10px 12px;background:var(--coa-celeste-pale);border-radius:6px;text-align:center}
body.coa .coa-gx-mas .coa-gx-et{align-self:stretch;margin:0 -10px 10px;padding:5px 8px;background:var(--coa-ink);color:#fff;
  font:700 10.5px/1.3 var(--f-ui);letter-spacing:.07em;text-transform:uppercase}
body.coa .coa-gx-mas a:hover .coa-gx-et{background:var(--coa-punzo)}
body.coa .coa-gx-mas .coa-gx-lg{display:flex;align-items:center;justify-content:center;align-self:stretch;height:56px;
  margin-bottom:8px;background:#fff;border-radius:4px}
body.coa .coa-gx-mas .coa-gx-lg img{width:104px;height:52px;object-fit:contain}
body.coa .coa-gx-mas a b{font:700 15px/1.25 var(--f-ui)}

/* celdas de la tabla de proveedores convertidas en enlace */
.coa-body .coa-tw a[data-coa-ctx]{font-weight:700}

@media (max-width:900px){
  body.coa .coa-gx-tipos ol{grid-template-columns:1fr}
  body.coa .coa-gx-cajas .coa-gx-fila{grid-template-columns:1fr;gap:8px}
  body.coa .coa-gx-cajas .coa-gx-gr{margin:0}
  body.coa .coa-gx-bonos ul{grid-template-columns:1fr}
  body.coa .coa-gx-juegos ul{grid-template-columns:1fr 1fr}
  body.coa .coa-gx-juegos li:first-child{grid-row:auto}
  body.coa .coa-gx-juegos li:first-child .coa-gx-ph{flex:none;aspect-ratio:16/9;min-height:0}
  body.coa .coa-gx-prov ul{grid-template-columns:repeat(3,1fr)}
  body.coa .coa-gx-confianza ul,body.coa .coa-gx-movil ul{grid-template-columns:1fr 1fr}
  body.coa .coa-gx-cripto ul{grid-template-columns:1fr 1fr}
  body.coa .coa-gx-mas ul{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  body.coa .coa-gx-tipos a{grid-template-columns:30px 84px 1fr;gap:11px}
  body.coa .coa-gx-tipos .coa-gx-ph img{width:84px;height:56px}
  body.coa .coa-gx-cajas ul{grid-template-columns:1fr 1fr}
  body.coa .coa-gx-bonos a{grid-template-columns:1fr 36%;min-height:104px}
  body.coa .coa-gx-bonos a b{font-size:17px}
  body.coa .coa-gx-cripto ul{grid-template-columns:1fr;gap:8px}
  body.coa .coa-gx-mas ul{grid-template-columns:1fr 1fr}
  body.coa .coa-gx-juegos li:first-child b{font-size:19px}
  body.coa .coa-gx-prov ul{grid-template-columns:1fr 1fr}
  body.coa .coa-gx-dinero a{grid-template-columns:92px 1fr 16px;gap:12px}
  body.coa .coa-gx-dinero .coa-gx-ph img{width:92px;height:62px}
  body.coa .coa-gx-dinero b{font-size:16.5px}
  body.coa .coa-gx-confianza ul{gap:18px 12px}
  body.coa .coa-gx-confianza .coa-gx-ph,body.coa .coa-gx-confianza .coa-gx-ph img{width:100px;height:100px}
  body.coa .coa-gx-movil{padding:16px 14px}
  body.coa .coa-gx-movil ul{gap:12px 10px}
}