/* ============================================================================
   LA ESCALA DE LA LETRA (Santiago, 27-sep: «te dije que había que unificar todos
   los textos en tamaño de la vitrina»). Cuatro tamaños para toda la página, en px
   de un celular de 390 de ancho; --u los lleva en proporción al ancho del celular
   (la pone variante.js; en la computadora vale 1px):
     36 · titular     los titulares de cada parada y el de la portada (lo más grande
                      que cabe hasta 36 sin pisar lo que protegen)
     20 · destacado   las etiquetas de arriba, la pregunta y las opciones de la
                      portada, los botones y el nombre de la ficha
     16 · cuerpo      las reseñas de la ficha, la llamada de la clínica y la señal
                      de scroll (el footer va con la letra de las landings, cierre.css)
     12 · chico       quién dejó cada reseña
   Los titulares y la ficha los pone variante.js (se ven a través de la cámara o la
   laptop); aquí va lo que se ve tal cual. Los chats no van en la escala: su letra va
   en proporción a su celular, como un WhatsApp de verdad.
   ========================================================================== */

/* --u sale del ancho desde el CSS, igual que la cuenta de variante.js (min(ancho, 480) /
   390, y 1px en la computadora): antes valía 1px hasta que corría variante.js, y con 4G
   la portada se veía unos segundos con otra letra y luego brincaba (28-sep). */
:root { --u: calc(min(100vw, 480px) / 390); --lp: 1px; }
@media (min-width: 900px) { :root { --u: 1px; } }

/* El renglón de un titular que no cabe se parte parejo: nunca una palabra sola
   abajo («pincel)», «calle»). Cada renglón de Santiago va en su bloque
   (variante.js, partirLineas) y se equilibra solo. */
.titular .parrafo { display: block; text-wrap: balance; }

.etiqueta,
.selector-pregunta { font-size: calc(20 * var(--u)); }
.selector-opciones a { font-size: calc(20 * var(--u)); }
.accion .boton { font-size: calc(20 * var(--u)); }

.senal-scroll { font-size: calc(16 * var(--u)); }
.globo { font-size: calc(16 * var(--u)); }
.aviso-texto { font-size: calc(16 * var(--u)); }

/* En el celular, el titular de la portada usa todo el ancho: en el 86 % de los otros
   sus dos renglones no llegaban ni a 30. */
@media (max-width: 899px) {
  .hero .titular { max-width: none; }
  /* Y desde que se pinta, en los dos renglones de Santiago (20-oct: «lo apruebo todo» a
     sacarlo en 2 renglones en el iPhone). A 36 su primer renglón no cabe a lo ancho de
     un celular y se partía en tres; a 32 cabe entero. variante.js lo vuelve a medir y lo
     sube a lo más grande que quepa en dos (32.8 a 390). El balance se queda: si un
     celular raro no lo deja entero, no queda «más» solo abajo (28-sep). */
  .hero .titular { font-size: calc(32 * var(--u)); text-wrap: balance; }
}

/* La ficha de la laptop: --lp es un px de la escala dentro de la laptop (la pone
   variante.js con la cámara ya acercada). La reseña es 1em de su grupo. */
.laptop .gm-grupo { font-size: calc(16 * var(--lp)); }
.laptop .gm-resena-quien { font-size: 0.75em; }
.laptop .gm-nombre { font-size: calc(20 * var(--lp)); }