/* ==================================================================
   TIPOGRAFIA EN MOVIL Y TABLET  —  una sola escala para todo el sitio

   El problema: cada seccion se fue escribiendo con su propio tamano.
   Midiendo las catorce paginas a 390px salian SIETE tamanos distintos
   de texto corrido (13, 14, 15, 16, 17, 18 y 30px) y SEIS de titulo de
   bloque (18, 18.72, 20, 22, 24, 26 y 50px). Al bajar por la pagina la
   letra crecia y encogia sin motivo.

   La solucion es una escala unica, con cuatro escalones y nada mas:

       Titulo de pagina  (h1)          30px
       Titulo de seccion (h2)          22px
       Titulo de bloque  (h3, h4)      19px
       Texto             (p, li...)    16px
       Botones                         15px

   POR QUE VA EN UN ARCHIVO APARTE Y CON !important
   Los tamanos viven repartidos en diez hojas de estilo (styles, inicio,
   servicios, proyectos, contacto, galeria...). Cambiarlos uno a uno
   significaria tocar decenas de reglas en todas ellas y volver a
   revisarlas cada vez que se anada una seccion. Esta hoja se carga la
   ULTIMA y solo dentro del limite de 900px: por encima de esa anchura
   no toca absolutamente nada, y el escritorio se queda como estaba.

   NO se tocan la cabecera ni el pie: tienen su propia escala, ya
   ajustada, y meterse ahi descuadraria el menu y las columnas.
   ================================================================== */

@media (max-width: 900px) {

    /* --- Titulo de pagina ---
       Estaba en 38px en diez paginas, 25 en el libro de reclamaciones y
       24 en la portada. */
    h1:not(header *):not(footer *) {
        /* 30px salvo en pantallas muy estrechas, donde la palabra mas larga
           del titulo no cabria y sacaria la pagina de la pantalla. Alcanza
           los 30px a partir de unos 417px de ancho. */
        font-size: clamp(23px, 7.2vw, 30px) !important;
        line-height: 1.25 !important;
        /* Reparte las palabras entre todas las lineas en vez de llenar de
           una en una: evita que la ultima quede con una sola palabra. */
        text-wrap: balance;
    }

    /* --- Titulo de seccion ---
       Estaba entre 18 y 28px segun la seccion. */
    h2:not(header *):not(footer *) {
        font-size: 22px !important;
        line-height: 1.3 !important;
        text-wrap: balance;
    }

    /* --- Titulo de bloque o tarjeta ---
       Era el mas descuadrado: de 18 a 50px. */
    h3:not(header *):not(footer *),
    h4:not(header *):not(footer *),
    h5:not(header *):not(footer *) {
        font-size: 19px !important;
        line-height: 1.35 !important;
        text-wrap: balance;
    }

    /* --- Texto corrido ---
       Los 16px son el tamano comodo de lectura en un telefono; por
       debajo de 15 muchos navegadores moviles la agrandan por su cuenta
       y descuadran la caja. */
    p:not(header *):not(footer *),
    li:not(header *):not(footer *),
    label:not(header *):not(footer *),
    .faq-pregunta {
        font-size: 16px !important;
    }

    /* --- Botones y llamadas a la accion ---
       Estaban entre 14 y 18px. Un punto por debajo del texto para que se
       lean como boton y no como parrafo. */
    .btn:not(header *):not(footer *),
    button:not(header *):not(footer *):not(.faq-pregunta),
    input[type="submit"]:not(header *):not(footer *) {
        font-size: 15px !important;
    }

}


/* ==================================================================
   ALINEACION EN TARJETAS ESTRECHAS  (hasta 1024px)

   Justificar reparte los huecos entre palabras hasta llegar al borde de la
   linea. Con 45 caracteres o mas queda prolijo; con menos, los huecos se
   abren y salen "rios" blancos. Medido a 800px, en las tarjetas caben entre
   19 y 36 caracteres, asi que ninguna da la talla.

   En el telefono no se notaba porque ahi ya iban alineadas a la izquierda:
   el problema aparecia al pasar a tablet, justo cuando las tarjetas se ponen
   en dos y tres columnas.

   Se enumeran los sitios uno a uno a proposito. Una regla general sobre p y
   li tumbaria tambien los textos que estan centrados a proposito.
   ================================================================== */

@media (max-width: 1024px) {

    .porque-item p,
    .card p,
    .nosotros-card p,
    .nosotros-bullets li,
    .caso-item .caso-detalle,
    .caso-item .caso-descripcion,
    .proyecto-card p,
    .proyecto-card .proyecto-detalle,
    .proyecto-card .proyecto-descripcion,
    #modal-proyecto p,
    #modal-proyecto li {
        text-align: left;
    }

}