/*
 * Piezas de CRO del shell: el cintillo transversal y la tarjeta del menu movil.
 * Vive aparte de shell.css para que esa hoja siga siendo comparable linea a
 * linea con la de Noticias.
 */

/*
 * El cintillo se monta DENTRO del header, que ya es fixed, asi que no hay que
 * posicionarlo. Este valor inicial es el alto medido en escritorio y solo evita
 * el salto del primer pintado: cro-ticker.js publica la altura real en cuanto la
 * mide, porque la maqueta la pone Elementor y el tema no la puede saber de
 * antemano (64px en escritorio, 76 en tableta, 88 en telefono).
 */
:root {
  --fz-ticker-height: 64px;
}

/*
 * display: flow-root y no block: la plantilla de Elementor trae margen en su
 * seccion, y con block ese margen se colapsa fuera del contenedor. El cintillo
 * medido salia 33px mas bajo que el header real en telefono, asi que la reserva
 * de espacio del body dejaba el principio del contenido debajo del header.
 */
.fz-header__ticker {
  display: flow-root;
  width: 100%;
}

/*
 * La tarjeta cierra la lista de navegacion y solo se ve donde esa lista es un
 * panel a pantalla completa, o sea por debajo del breakpoint del shell. El tema
 * anterior la cortaba en 767px, dejandola oculta entre 768 y 1023 aunque el
 * menu ya fuera el panel movil.
 */
.fz-nav__card {
  display: none;
}

@media (max-width: 1023px) {
  .fz-nav__card {
    display: block;
    padding: 20px;
  }

  .fz-nav__card img {
    display: block;
    width: 100%;
    height: auto;
  }
}