también hay marco: las migas y la tira de secciones. Aquí sobran las dos —la pantalla es una sola cosa—, y el sitio entero se alcanza por los azulejos de la derecha. */ body.hc-entrada .hc-migas, body.hc-entrada .lc-exp-nav, body.hc-entrada .hc-lty-bar, body.hc-entrada .hc-lateral{display:none!important} /* El esqueleto del escritorio (cuerpo + columna lateral) tampoco pinta aquí: esta pantalla es una sola cosa y ocupa lo que necesita. */ body.hc-entrada .hc-esqueleto{display:block} body.hc-entrada .hc-principal{width:auto;max-width:none} /* La fila: el contenedor y, a su derecha, la columna de azulejos. */ .hc-ent-fila{display:flex;align-items:flex-start;justify-content:center;gap:28px;flex-wrap:wrap} .hc-ent-col{flex:0 1 430px;min-width:0;max-width:430px;width:100%} .hc-ent-col .hc-acceso-titulo, .hc-ent-col .hc-acceso-caja, .hc-ent-col .hc-can-sello{max-width:none} .hc-ent-col .hc-acceso-caja{margin-bottom:0} /* El idioma lo pone la IP; el selector está por si se equivoca, y por eso va pequeño y al final, al lado del sello, no ocupando media tarjeta arriba. */ .hc-can-pie{display:flex;align-items:center;gap:8px;margin:10px 0 0} .hc-can-pie .hc-can-sello{flex:1 1 auto;margin:0;min-width:0} .hc-can-pie .hc-ent-lang{flex:0 0 auto;width:auto;margin:0} .hc-can-pie .hc-ent-lang .hc-idiomas-abrir{height:38px} /* * La píldora hereda del pie, y el pie en pantalla estrecha se pone a lo ancho y * centrado: aquí eso aplastaba el sello contra el borde —cuatro palabras, cuatro * líneas—. Aquí manda la fila: el sello ocupa lo que sobra y la píldora, lo suyo. */ @media(max-width:640px){ .hc-can-pie .hc-ent-lang{width:auto!important;margin:0!important;justify-content:flex-end} .hc-can-pie .hc-ent-lang .hc-idiomas-lista{left:auto!important;right:0!important;transform:none!important} } /* Los azulejos: 70 px de alto, dibujo cuadrado a la izquierda y el nombre al lado, en el mismo cuerpo de letra que el sello. La fila entera es el enlace. */ .hc-ent-azulejos{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;flex:0 0 auto;width:250px} .hc-ent-az{display:flex;align-items:center;gap:12px;box-sizing:border-box;height:70px;padding:0 12px 0 0; border-radius:12px;overflow:hidden;border:1px solid rgba(226,196,142,.28);background:#141b22; text-decoration:none!important;color:#f0e2c8} .hc-ent-az:hover,.hc-ent-az:focus-visible{border-color:#e2c48e;background:#1b242d;color:#f0e2c8} .hc-ent-az-img{flex:0 0 auto;width:70px;height:70px;object-fit:cover;display:block;background:#0f1418} .hc-ent-az-tx{min-width:0;font-size:13px;font-weight:700;line-height:1.25} /* * EL MÓVIL (ley de la casa: primero el móvil). El contenedor manda y ocupa el * ancho; los azulejos pasan debajo, en rejilla de dos columnas, sin dejar de * ser cuadrados ni de caber en 360 px de pantalla. */ @media(max-width:900px){ .hc-ent-fila{gap:20px} .hc-ent-col{flex:1 1 100%;max-width:430px;margin:0 auto} .hc-ent-azulejos{flex:1 1 100%;width:100%;max-width:430px;margin:0 auto; grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .hc-ent-az{gap:10px} .hc-ent-az-tx{font-size:13.5px} } @media(max-width:430px){ /* En pantallas estrechas, una debajo de otra: dos columnas cortarían los nombres largos («Clube de Viajantes», «Клуб путешественников»). */ .hc-ent-azulejos{grid-template-columns:minmax(0,1fr)} } @media(max-width:380px){ .hc-can-sello{font-size:12px;padding:8px} }