/* EL BLOG PUBLICO. Se carga DESPUES de documento.css, que trae la barra, el pie, el
   aviso corto y las variables. Lo pinta api/_blog-html.ts; aqui solo van las piezas que
   el documento no tiene.

   El acento (--acento) solo pinta bordes y fondos: `teal` mide 3,54 y no sirve de letra.
   --acento lo pone cada entrada (uno de los tres aprobados de ACENTOS, en
   sitio/diapositiva.js). Todo lo tocable mide 44 px, y nada fija un ancho mayor que el
   de la pantalla: a 375 px el contenido cabe sin desplazarse de lado. */

/* EL MISMO ANCHO QUE LA BARRA (76ch de `.barra-fila`, documento.css): a 1280 px el blog
   medía 72rem y no se alineaba con la barra. El pie (64ch) no se toca. Medido antes: la
   barra empezaba en x=242 y el contenido en x=64. */
.bq-ancha{width:min(100% - 2.6rem,76ch)}
.bq-hoja{overflow-wrap:anywhere}

.bq{--acento:var(--teal-oscuro)}
.bq-cabeza{margin:0 0 1.6rem}
.bq-tema{display:block;margin:0 0 .5rem;font-family:var(--titular);font-size:.78rem;font-weight:600;
         letter-spacing:.08em;text-transform:uppercase;color:var(--teal-oscuro)}
.bq-meta{display:block;font-family:var(--titular);font-size:.85rem;color:var(--gris)}

.bq-portada{width:100%;max-height:26rem;object-fit:cover;border-radius:10px;margin:1.4rem 0 0}
.bq-portada-color{background:var(--acento);height:8rem;border-radius:10px;margin:1.4rem 0 0}

/* los bloques */
.bq-cuerpo > * + *{margin-top:1.4rem}
.bq-texto p:last-child{margin-bottom:0}
.bq-imagen{margin:0}
.bq-imagen img,.bq-imagen video{width:100%;height:auto;border-radius:8px}
.bq-imagen figcaption{margin-top:.5rem;font-family:var(--titular);font-size:.85rem;color:var(--gris)}
.bq-galeria{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}
.bq-video{position:relative;aspect-ratio:16 / 9;background:var(--navy);border-radius:8px;overflow:hidden}
.bq-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bq-cita{margin:2rem 0;padding:.2rem 0 .2rem 1.3rem;border-left:4px solid var(--acento);
         font-size:1.3rem;line-height:1.45}
.bq-cita p{margin-bottom:.5em}
.bq-cita footer{font-family:var(--titular);font-size:.9rem;color:var(--gris)}

/* el boton y los enlaces que se tocan */
.bq-boton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem 1.2rem;
          border:0;border-radius:7px;background:var(--teal-oscuro);color:#fff;cursor:pointer;
          font-family:var(--titular);font-size:.95rem;font-weight:500;text-decoration:none}
.bq-boton:hover{background:var(--navy);color:#fff}

/* la tarjeta de la autora, «Sigue leyendo» y la invitacion */
.bq-autora{margin:3rem 0 0}
.bq-autora a{display:flex;align-items:center;gap:.9rem;min-height:44px;padding:.9rem 1.1rem;text-decoration:none;
             color:var(--tinta);background:var(--papel-alto);border:1px solid var(--regla);border-radius:10px}
.bq-autora b{display:block;font-family:var(--titular)}
.bq-autora-foto{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover}
.bq-invita{margin:3rem 0 0;padding:1.4rem 1.5rem;background:var(--papel-alto);border:1px solid var(--regla);
           border-left:4px solid var(--acento);border-radius:10px}
.bq-invita h2{margin-top:0}

/* tarjetas y la rejilla */
.bq-rejilla{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr))}
.bq-tarjeta{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:var(--tinta);
            background:var(--papel-alto);border:1px solid var(--regla);border-radius:10px;overflow:hidden}
.bq-tarjeta:hover{border-color:var(--acento)}
.bq-tarjeta-portada{width:100%;height:9rem;object-fit:cover;background:var(--acento);border-radius:0;margin:0}
.bq-tarjeta-texto{display:block;padding:.8rem .95rem 1rem}
.bq-tarjeta-texto b{display:block;margin:.1rem 0 .4rem;font-family:var(--titular);font-size:1.05rem;line-height:1.25}
.bq-sigue{margin:3rem 0 0}
.bq-sigue h2{margin-top:0}

/* la portada del blog */
.bq-destacada{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:0 0 1.6rem;text-decoration:none;
              color:var(--tinta);background:var(--papel-alto);border:1px solid var(--regla);border-radius:12px;
              overflow:hidden}
.bq-destacada-portada{width:100%;height:100%;min-height:13rem;object-fit:cover;background:var(--acento);margin:0}
.bq-destacada-texto{display:block;padding:1.2rem 1.4rem}
.bq-destacada-texto b{display:block;margin:.2rem 0 .6rem;font-family:var(--titular);font-size:1.5rem;line-height:1.2}
.bq-temas{display:flex;gap:.5rem;margin:0 0 1.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bq-filtro{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--regla);
           border-radius:999px;font-family:var(--titular);font-size:.9rem;text-decoration:none;color:var(--tinta);
           background:var(--papel-alto);white-space:nowrap}
.bq-filtro[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:640px){
  .bq-destacada{grid-template-columns:minmax(0,1fr)}
  .bq-destacada-portada{min-height:9rem;height:9rem}
}

/* los comentarios */
.bq-comentarios{margin:3rem 0 0}
.bq-comentarios h2{margin-top:0}
.bq-comentarios-lista{list-style:none;margin:0 0 1.6rem;padding:0}
.bq-comentario{margin:0;padding:1rem 0;border-top:1px solid var(--regla)}
.bq-comentario:first-child{border-top:0}
.bq-comentario-cabeza{font-family:var(--titular);font-size:.9rem;margin-bottom:.3rem}
.bq-comentario-cabeza time{color:var(--gris);margin-left:.5rem}
.bq-respuesta{margin:.8rem 0 0 1rem;padding-left:1rem;border-left:3px solid var(--acento)}
.bq-formulario{display:grid;gap:.4rem}
.bq-formulario label{font-family:var(--titular);font-size:.9rem}
.bq-formulario input,.bq-formulario textarea{width:100%;min-height:44px;padding:.6rem .7rem;font:inherit;
            font-size:1rem;border:1px solid var(--regla);border-radius:6px;background:#fff;color:var(--tinta)}
.bq-formulario .bq-boton{justify-self:start;margin-top:.4rem}
.bq-nota{margin:.4rem 0 0;font-family:var(--titular);font-size:.88rem;color:var(--gris)}
.bq-resultado{margin:.4rem 0 0;font-family:var(--titular);font-size:.95rem}
.bq-resultado:empty{display:none}
/* El campo trampa: fuera de la vista para quien lee y para quien toca, y fuera del orden de tabulacion. */
.bq-trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}