/*
 * Reset moderno minimo - a proposito sin ninguna regla de color o
 * tipografia fija (esas las ponen las variables --flq-* que ya trae
 * <head>, ver helpers/design.php). Solo lo indispensable para que los
 * bloques de Fluques (que ya traen su propio CSS embebido por
 * instancia) rindan predecible sin pelear contra un reset ajeno.
 */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* [696] Respaldo defensivo pedido explicito por el usuario (probado en
   vivo, 375px) - cualquier pieza puntual que se desborde del ancho real
   de la pantalla (encontradas y arregladas varias esta misma ronda:
   franja de precios del Hero, listas de menu, etc.) no deberia poder
   agregar una barra de scroll horizontal a la pagina ENTERA. "clip" (no
   "hidden") - mismo comportamiento de recorte, sin convertir "html"/
   "body" en su propio contenedor de scroll con "scrollLeft" propio
   (evita interferir con cualquier otro codigo que ya asuma que el
   scroll vertical vive en estos 2 elementos). */
html, body {
    overflow-x: clip;
}

/* [699] "Lienzo libre -> flujo normal en celular" - pedido explicito del
   usuario (REVISION-responsive-modulos.txt seccion 3): una pieza con
   "posicion libre" (".flq-element-free", flechas/insignias/iconos/
   botones/titulos sueltos - el MISMO mecanismo en >10 modulos del
   catalogo) vive en "position:absolute" con su "left/top/width/height"
   en % de ESCRITORIO - en una pantalla angosta, ese mismo % casi
   siempre la deja mal ubicada/superpuesta con el resto del contenido
   (ya confirmado para las flechas del carrusel esta misma sesion). Regla
   generica UNA sola vez (nunca repetida en cada uno de los >10 modulos)
   porque ".flq-element-free" ya es la clase compartida de TODO el
   catalogo - en celular vuelve al flujo normal (estatica, una pieza
   debajo de otra, igual que cualquier otro contenido), hasta que exista
   una posicion propia de celular guardada (pendiente, ver REGLA punto 2
   del mismo documento - "salvo que el usuario les de posicion propia en
   celular"; sin ese guardado especifico todavia, "siempre en celular"
   es el unico comportamiento posible hoy). Las manijas de arrastrar/
   redimensionar (solo existen dentro del Constructor) tambien se
   esconden - no tiene sentido ofrecer arrastre libre sobre algo que ya
   no esta en "position:absolute". */
@media (max-width: 767px) {
    .flq-element-free {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .flq-element-free__move,
    .flq-element-free__resize {
        display: none !important;
    }
}

/* [778] Pedido explicito del usuario (documento "Ajustes del bloque
   Blog y de la pagina Comprar", Cambio 3.1/3.2) - bug real encontrado:
   las Secciones (".flq-section", el contenedor real de columnas/
   tarjetas - ver LayoutHelper.php) se estiraban a 1326px en pantallas
   anchas, con titulos de 18.7px por el ancho de columna resultante.
   "--flq-content-max" (helpers/design.php, Ajustes del proyecto) -
   UNA sola regla aqui, nunca repetida por modulo. Regla GENERICA por
   clase (no por id de instancia) a proposito - igual que
   ".flq-element-free" arriba, aplica a TODAS las Secciones de
   cualquier proyecto sin tener que tocar cada plantilla de modulo.
   Sin ningun mecanismo todavia para que UNA Seccion puntual se quede
   a proposito a todo lo ancho (nunca existio un campo para eso en
   mod_flq_section) - si algun bloque ya publicado de verdad necesita
   quedarse sin este limite, avisar para agregarle esa excepcion.

   NO se le agrega "max-width" aparte a ".flq-text-image" (lo pedia el
   documento) a proposito - BUG REAL YA CORREGIDO antes en ese mismo
   modulo (ver el comentario "[483]/[491]" en tmpl/default.php): un
   limite de ancho fijo ahi adentro ya habia competido una vez con el
   ajustador de columnas/margen real del Constructor ("dos formas
   distintas de angostar el mismo bloque, pisandose"). Con la Seccion
   que lo envuelve ya centrada/acotada por la regla de arriba, un
   bloque de texto a ancho completo queda bien separado de la orilla
   de la pantalla sin necesitar su propio limite - reintroducirlo
   volveria a chocar con esa herramienta. */
.flq-section {
    max-width: var(--flq-content-max, 1200px);
    margin-inline: auto;
    padding-inline: 24px;
    box-sizing: border-box;
}

.flq-text-image__title {
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.15;
}

body {
    font-family: var(--flq-font-body, sans-serif);
    font-size: var(--flq-font-size-base, 16px);
    color: var(--flq-text-dark, #1a1a2e);
    background: var(--flq-bg-light, #ffffff);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--flq-font-heading, sans-serif);
    margin: 0 0 .5em;
}

p {
    margin: 0 0 1em;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
}

a {
    color: var(--flq-color-primary, #1a1a2e);
}