:root {
    /* Espacios   - usos genéricos */
    --eo8: 160px;
    /**/
    --eo7: 80px;
    /*Columnas pantalla*/
    --eo6: 64px;
    /**/
    --eo5: 56px;
    /**/
    --eo4: 40px;
    /*alto btn*/
    --eo3: 32px;
    /**/
    --eo2: 24px;
    /*gap*/
    --eo1: 12px;
    /**/
    --eo0: 6px;
    /**/
  
    /* grid */
    --gap: var(--eo2);
    --grid0: auto repeat(4, minmax(0, 1fr)) auto;
    --grid1:   repeat(4, minmax(0, 1fr))  ;
  
    /* Columnas */
    --cl00: 1/-1;
    --cl01: 2/-2;
    --cl1: span 1;
    --cl2: span 2;
    --cl3: span 3;
    --cl4: span 4;
    --cl5: span 5;
    --cl6: span 6;
    --cl7: span 7;
    --cl8: span 8;
    --cl9: span 9;
    --cl10: span 10;
    --cl11: span 11;
    --cl12: span 12;
  
     /* z-index */
     --ziMj: 1200; /*mensajes*/
     --ziM: 1100; /*ventana Modal*/
     --ziN: 1000; /*nav*/
     --ziMf:800; /*Fondo Modal*/
     --ziEf: 700; /*Elementos flotantes - Stiky*/
  }
  
*,
::after,
::before {
  box-sizing: border-box;
}

* {
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
  border-collapse: collapse;
  text-decoration: none;
  text-transform: none;
  list-style: none;
  font-weight: normal;
  font-style: normal;
  font-family: 'ft1', sans-serif;
  font-size: var(--fs4);
  line-height: 1.4;
  letter-spacing: 0;
  color: rgb(var(--crT0));
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* iconos */
*[class*='ic'],
i {
  font-family: 'ftI';
  font-size: inherit;
  color: inherit;
  line-height: 1;
  vertical-align: middle;
}



/*Imágenes*/
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* 800 para arriba */
@media all and (min-width:1024px) {
  :root {
    /* grid */
    --grid0: 1fr repeat(12, minmax(0, var(--eo7))) 1fr;
    --grid1: repeat(12, minmax(0, 1fr));
  }
}