/* --- Variables de Control Absoluto --- */
:root {
    --gap-x: 5px;         
    --gap-y: 5px;         
    --margin-top: 0px;     
    --margin-bottom: 0px;  
}

/* Contenedor principal */
.row {
    display: flex;
    flex-wrap: wrap;
    
    margin-left: calc(var(--gap-x) * -1);
    margin-right: calc(var(--gap-x) * -1);
    margin-top: var(--margin-top);
    margin-bottom: var(--margin-bottom);
    
    
}

/* Base para todas las columnas */
[class*="span-"] {
    padding-left: var(--gap-x);
    padding-right: var(--gap-x);
    padding-bottom: var(--gap-y);
    box-sizing: border-box;
    flex-shrink: 0;
}

/* --- 1. MÓVIL / DEFAULT (Mobile First) --- */
/* Estas clases mandan siempre, a menos que una clase md o lg las pise */
.span-5 { width: 5%; }
.span-10 { width: 10%; }
.span-15 { width: 15%; }
.span-20 { width: 20%; }
.span-25 { width: 25%; }
.span-30 { width: 30%; }
.span-35 { width: 35%; }
.span-40 { width: 40%; }
.span-45 { width: 45%; }
.span-50 { width: 50%; }
.span-55 { width: 55%; }
.span-60 { width: 60%; }
.span-65 { width: 65%; }
.span-70 { width: 70%; }
.span-75 { width: 75%; }  /* <--- Aquí estaba el problema */
.span-80 { width: 80%; }
.span-85 { width: 85%; }
.span-90 { width: 90%; }
.span-95 { width: 95%; }
.span-100 { width: 100%; }

/* --- 2. TABLET (Desde 768px) --- */
@media (min-width: 768px) {
	.span-md-5 { width: 5%; }
    .span-md-10 { width: 10%; }
    .span-md-15 { width: 15%; }
    .span-md-20 { width: 20%; }
    .span-md-25 { width: 25%; }
    .span-md-30 { width: 30%; }
    .span-md-35 { width: 35%; }
    .span-md-40 { width: 40%; }
    .span-md-45 { width: 45%; }
    .span-md-50 { width: 50%; }
    .span-md-55 { width: 55%; }
    .span-md-60 { width: 60%; }
    .span-md-65 { width: 65%; }
    .span-md-70 { width: 70%; }
    .span-md-75 { width: 75%; }
    .span-md-80 { width: 80%; }
    .span-md-85 { width: 85%; }
    .span-md-90 { width: 90%; }
    .span-md-95 { width: 95%; }
    .span-md-100 { width: 100%; }
}

/* --- 3. DESKTOP (Desde 1024px) --- */
@media (min-width: 1024px) {
	.span-lg-5 { width: 5%; }
    .span-lg-10 { width: 10%; }
    .span-lg-15 { width: 15%; }
    .span-lg-20 { width: 20%; }
    .span-lg-25 { width: 25%; }
    .span-lg-30 { width: 30%; }
    .span-lg-35 { width: 35%; }
    .span-lg-40 { width: 40%; }
    .span-lg-45 { width: 45%; }
    .span-lg-50 { width: 50%; }
    .span-lg-55 { width: 55%; }
    .span-lg-60 { width: 60%; }
    .span-lg-65 { width: 65%; }
    .span-lg-70 { width: 70%; }
    .span-lg-75 { width: 75%; }
    .span-lg-80 { width: 80%; }
    .span-lg-85 { width: 85%; }
    .span-lg-90 { width: 90%; }
    .span-lg-95 { width: 95%; }
    .span-lg-100 { width: 100%; }
}

/* Utilidades adicionales que ya tenías */
.push { 
	/*	uso:
		<div class="push" style="--push-val: 20px;">Contenido movido</div>
		<div class="push" style="--push-val: 50px;">Contenido con más espacio</div>
		<div class="push" style="--push-val: 10%;">Empujado un 10%</div>
	*/	
	/* Si --push-val no existe, usa 10px */
    margin-left: var(--push-val, 10px);
}
.custom-width { width: var(--w); }