/* Lo propio de las páginas de contenido. El resto sale de estilos.css. */
.pieza{margin:0 0 13px}
.pieza:last-child{margin-bottom:0}
.pieza h3{font:600 .98rem/1.35 var(--titular); margin:0 0 4px; color:var(--tinta)}
.pieza p{font-size:.88rem; line-height:1.55; color:var(--suave)}
/* Lo que suele estar pasando: se elige, y ahí mismo se amplía. */
.op--globo .abre{display:none; font-size:.85rem; line-height:1.5; color:var(--suave);
  margin-top:6px; padding-top:6px; border-top:1px solid var(--linea)}
.op--globo[aria-expanded=true] .abre{display:block}
.op--globo b{display:block; font-weight:600}
/* La respuesta que ya se eligió, marcada. */
.op--globo.dicho{border-color:var(--cian)!important}
.op--globo.dicho b::after{content:' ✓'; color:var(--cian2)}
.entra{font-size:.92rem; line-height:1.55; color:var(--tinta); margin-bottom:11px}
/* ⛔ En la primera pantalla el titular es h1 y va MAS CORTO que el del sitio:
   compite con el personaje y con cinco opciones en el mismo alto. */
.entrada--menu h1{font-size:1.62rem; text-align:center; margin:0 0 11px; max-width:26ch}
a.llamada{text-decoration:none}
.leyenda{display:block; margin-top:9px; padding-top:8px; border-top:1px solid var(--linea);
  font-size:.79rem; color:var(--tenue)}
/* ══ EL TELÉFONO ══════════════════════════════════════════════════════════
   ⛔⛔ SIN ESTO LAS PÁGINAS NO SIRVEN EN UN MÓVIL, y estaba avisado: R7-bis dice
   que «el personaje no puede ir al lado del globo — en 390 px dejaría 130 px
   para el texto». Medido aquí: el personaje tomaba 174 px y al texto le
   quedaban 139. La regla acertó y se ignoró.

   ⭐ La salida NO es encoger: es la composición de CHAT que ya está aprobada en
   la versión de teléfono del sitio — el personaje como avatar arriba y el globo
   a todo el ancho, que es donde el texto necesita el sitio. */
@media (max-width:820px){
  .entrada--menu{--fig:64px}
  /* El personaje se pone ENCIMA y en pequeño; el globo toma la línea entera. */
  .entrada--menu .nodite{flex-direction:column; align-items:stretch; gap:0;
    margin:10px 0 0; max-width:none}
  .entrada--menu .fig{width:64px; height:64px; object-fit:contain;
    object-position:top; align-self:flex-start; margin-bottom:9px}
  .dice{align-items:stretch}
  /* ⛔ El pico ya no puede apuntar a la boca: el personaje está ARRIBA, no al
     lado. Se lleva al borde superior, que es de donde nace ahora. */
  .globo--menu::before,.globo--relato::before{top:-7px!important; left:22px; bottom:auto;
    border:0; border-left:1px solid var(--linea); border-top:1px solid var(--linea)}
  .entrada--menu h1{font-size:1.35rem; text-align:left; max-width:none}
  .entrada--menu h2{font-size:1.18rem; text-align:left}
  .marca--grande{font-size:20px; align-self:flex-start}
  .marca--grande img{width:34px; height:34px}
  .env{padding:0 15px}
  /* El área táctil de las opciones: por debajo de 44 px se falla el toque. */
  .op--globo{min-height:46px; display:flex; flex-direction:column; justify-content:center}
  .secundarias{gap:8px}
  .secundarias > *{flex:1 1 auto}
}

/* El artículo con TODO el contenido: lo lee el buscador, lo esconde el guion. */
.completo{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap}